/* ========================================================================== Custom Global Styles (Override or extend Tailwind) ========================================================================== */ /* Custom Scrollbar - Base styles */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* -------------------------------------------------------------------------- Light Mode Scrollbar -------------------------------------------------------------------------- */ ::-webkit-scrollbar-thumb { background: #cbd5e1; /* slate-300 */ border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; /* slate-400 */ } /* -------------------------------------------------------------------------- Dark Mode Scrollbar (ถูกเรียกใช้เมื่อ มี class="dark") -------------------------------------------------------------------------- */ .dark ::-webkit-scrollbar-thumb { background: #3a3a3d; } .dark ::-webkit-scrollbar-thumb:hover { background: #4f4f56; } /* -------------------------------------------------------------------------- Utility Classes -------------------------------------------------------------------------- */ /* ซ่อน Scrollbar ทั้งหมด แต่ยังคงความสามารถในการเลื่อน (Scroll) ด้วยลูกกลิ้งหรือนิ้ว */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; /* สำหรับเบราว์เซอร์ IE และ Edge */ scrollbar-width: none; /* สำหรับเบราว์เซอร์ Firefox */ }