/** * Thin scrollbars everywhere — overrides Bootstrap .table-responsive (12px), app theme, etc. * Load this stylesheet LAST in (see _Layout.cshtml). */ :root { --scrollbar-width: 6px; --scrollbar-track: transparent; --scrollbar-thumb: rgba(100, 116, 139, 0.42); --scrollbar-thumb-hover: rgba(71, 85, 105, 0.72); } html.dark { --scrollbar-thumb: rgba(148, 163, 184, 0.32); --scrollbar-thumb-hover: rgba(203, 213, 225, 0.55); } /* Firefox — all elements (each scroll container picks this up) */ * { scrollbar-width: thin !important; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important; } html { scrollbar-width: thin !important; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important; } /* WebKit — universal ( !important beats .table-responsive etc. ) */ *::-webkit-scrollbar, *::-webkit-scrollbar-corner { -webkit-appearance: none !important; appearance: none !important; } *::-webkit-scrollbar { width: var(--scrollbar-width) !important; height: var(--scrollbar-width) !important; } *::-webkit-scrollbar-track { background: var(--scrollbar-track) !important; border-radius: 999px !important; } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb) !important; border-radius: 999px !important; border: 2px solid transparent !important; background-clip: padding-box !important; } *::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover) !important; } *::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; } *::-webkit-scrollbar-button:start:increment, *::-webkit-scrollbar-button:end:decrement { display: none !important; } /* Explicit: Bootstrap / DataTables / common wrappers (same values, max compatibility) */ .table-responsive::-webkit-scrollbar, .table-wrapper-scroll-y::-webkit-scrollbar, .table-wrapper-scroll-x::-webkit-scrollbar, .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar, .dataTables_scrollBody::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .modal-dialog-scrollable .modal-body::-webkit-scrollbar, .offcanvas-body::-webkit-scrollbar, .card-body::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar, .list-group::-webkit-scrollbar, .pre-scrollable::-webkit-scrollbar, textarea::-webkit-scrollbar, pre::-webkit-scrollbar, #main::-webkit-scrollbar, .main-content::-webkit-scrollbar, .page-content::-webkit-scrollbar, .page-content-wrapper::-webkit-scrollbar, #layout-wrapper::-webkit-scrollbar, .container-fluid::-webkit-scrollbar, .ru-table-wrap::-webkit-scrollbar, .ru-perm-grid::-webkit-scrollbar, .ems-notify-scroll-wrap::-webkit-scrollbar, .cfg-card::-webkit-scrollbar, .cd-card::-webkit-scrollbar, .ms-card-scroll::-webkit-scrollbar { width: var(--scrollbar-width) !important; height: var(--scrollbar-width) !important; } .table-responsive::-webkit-scrollbar-thumb, .table-wrapper-scroll-y::-webkit-scrollbar-thumb, .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb, .offcanvas-body::-webkit-scrollbar-thumb, .ru-table-wrap::-webkit-scrollbar-thumb, .ru-perm-grid::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb) !important; border-radius: 999px !important; border: 2px solid transparent !important; background-clip: padding-box !important; } .table-responsive::-webkit-scrollbar-thumb:hover, .table-wrapper-scroll-y::-webkit-scrollbar-thumb:hover, .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover) !important; } .table-responsive::-webkit-scrollbar-track, .table-wrapper-scroll-y::-webkit-scrollbar-track, .dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-track { background: var(--scrollbar-track) !important; border-radius: 999px !important; } /* -------- SimpleBar (custom widget, not native scrollbar) -------- */ .simplebar-track.simplebar-vertical { width: calc(var(--scrollbar-width) + 4px) !important; right: 1px; } .simplebar-track.simplebar-horizontal { height: calc(var(--scrollbar-width) + 4px) !important; bottom: 1px; } .simplebar-track.simplebar-vertical .simplebar-scrollbar { width: var(--scrollbar-width) !important; left: 2px; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar { height: var(--scrollbar-width) !important; top: 2px; } .simplebar-track.simplebar-vertical .simplebar-scrollbar:before { background: var(--scrollbar-thumb) !important; border-radius: 999px !important; opacity: 0.55 !important; top: 2px !important; bottom: 2px !important; left: 0 !important; right: 0 !important; } .simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before, .simplebar-track.simplebar-vertical .simplebar-scrollbar:hover:before { opacity: 0.9 !important; background: var(--scrollbar-thumb-hover) !important; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before { background: var(--scrollbar-thumb) !important; border-radius: 999px !important; opacity: 0.55 !important; left: 2px !important; right: 2px !important; top: 0 !important; bottom: 0 !important; height: auto !important; } .simplebar-track.simplebar-horizontal .simplebar-scrollbar.simplebar-visible:before, .simplebar-track.simplebar-horizontal .simplebar-scrollbar:hover:before { opacity: 0.9 !important; background: var(--scrollbar-thumb-hover) !important; } .simplebar-track { background: var(--scrollbar-track) !important; }