/* ============================================================================ * ui-refresh.css * Global visual refresh for the 15 stabilized operation tables, dashboard * scorecards, form inputs, and the component used across them. * Loaded LAST in _Host.cshtml so it overrides Bootstrap defaults without * touching individual .razor files. * * Bi-directional safety: every directional rule uses CSS Logical Properties * (margin-inline, padding-inline, border-inline-start, text-align: start) * so RTL (Arabic) and LTR (English) render pixel-identical without flipping. * * Design tokens (single source of truth) * -------------------------------------- * --ui-surface : page-level neutral surface (white) * --ui-thead-bg : soft modern neutral header bg (#f1f5f9) * --ui-thead-fg : dark slate header text (#334155) * --ui-row-divider : ultra-thin horizontal divider between rows * --ui-row-hover : premium soft hover bg (#f8fafc) * --ui-pager-* / --ui-cell-pad-* : pager + cell padding tokens * --ui-accent-green / -blue / -purple / -amber : semantic card accents * --ui-metric-fg / -label-fg : scorecard typography colors * --ui-radius-card / -input : rounded-corner tokens * --ui-shadow-card : lightweight drop-shadow for cards * --ui-font-stack : modern multi-script sans-serif stack * ========================================================================== */ :root { --ui-surface: #ffffff; --ui-thead-bg: #f1f5f9; /* soft modern neutral */ --ui-thead-fg: #334155; /* dark slate */ --ui-row-divider: rgba(15, 23, 42, 0.06); --ui-row-hover: #f8fafc; /* premium hover */ --ui-pager-bg: #ffffff; --ui-pager-fg: #495057; --ui-pager-active-bg: #e7f1ff; --ui-pager-active-fg: #0a58ca; --ui-pager-hover-bg: #f1f3f5; --ui-pager-border: #dee2e6; --ui-cell-pad-y: 12px; /* premium row breathing room */ --ui-cell-pad-x: 16px; /* Dashboard scorecard accents (semantic anchors, not full fills) */ --ui-accent-green: #10b981; /* Financials / Income */ --ui-accent-blue: #3b82f6; /* Active Users / Live Devices / Downloads */ --ui-accent-purple: #8b5cf6; /* Expired Vouchers */ --ui-accent-amber: #f59e0b; /* System Alerts */ --ui-metric-fg: #1e293b; /* prominent metric value */ --ui-label-fg: #64748b; /* clean subdued label */ /* Geometry & elevation */ --ui-radius-card: 12px; --ui-radius-input: 6px; --ui-input-border: #cbd5e1; --ui-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* Modern multi-script sans-serif (English + Arabic) */ --ui-font-stack: "Inter", "Segoe UI", "Cairo", "Tajawal", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; } /* ---------------------------------------------------------------------------- * 1. TABLES * Targets every rendered inside our standard * .table-responsive / .table-responsive-md / .table-responsive-xl wrappers * used by GenericList and all stabilized pages. * -------------------------------------------------------------------------- */ .table-responsive .table, .table-responsive-md .table, .table-responsive-xl .table, .table-responsive-sm .table, .table-responsive-lg .table { /* Reset any inherited tall layout */ margin-bottom: 0.75rem; border-color: var(--ui-row-divider); background-color: var(--ui-surface); font-size: 0.875rem; /* sleek, compact body text */ color: #212529; } /* Header — replace the harsh dark-navy with the premium light theme. */ .table-responsive .table > thead, .table-responsive-md .table > thead, .table-responsive-xl .table > thead, .table-responsive-sm .table > thead, .table-responsive-lg .table > thead { background-color: var(--ui-thead-bg); } .table-responsive .table > thead > tr > th, .table-responsive-md .table > thead > tr > th, .table-responsive-xl .table > thead > tr > th, .table-responsive-sm .table > thead > tr > th, .table-responsive-lg .table > thead > tr > th { background-color: var(--ui-thead-bg); color: var(--ui-thead-fg); font-weight: 700; /* dark slate, bold */ text-transform: none; letter-spacing: 0.01em; text-align: start; /* RTL/LTR-safe alignment */ padding: var(--ui-cell-pad-y) var(--ui-cell-pad-x); /* Eliminate vertical inner borders entirely */ border-inline: 0; border-top: 0; border-bottom: 1px solid var(--ui-row-divider); white-space: nowrap; } /* Body cells — premium padding, no vertical lines, soft horizontal divider. */ .table-responsive .table > tbody > tr > td, .table-responsive .table > tbody > tr > th, .table-responsive-md .table > tbody > tr > td, .table-responsive-md .table > tbody > tr > th, .table-responsive-xl .table > tbody > tr > td, .table-responsive-xl .table > tbody > tr > th, .table-responsive-sm .table > tbody > tr > td, .table-responsive-sm .table > tbody > tr > th, .table-responsive-lg .table > tbody > tr > td, .table-responsive-lg .table > tbody > tr > th { padding: var(--ui-cell-pad-y) var(--ui-cell-pad-x); border-inline: 0; /* RTL/LTR-safe: no vertical lines */ border-top: 0; border-bottom: 1px solid var(--ui-row-divider); vertical-align: middle; line-height: 1.45; text-align: start; /* RTL/LTR-safe alignment */ } /* Last row: drop the trailing divider so it doesn't double up with the summary label / pager below. */ .table-responsive .table > tbody > tr:last-child > td, .table-responsive .table > tbody > tr:last-child > th, .table-responsive-md .table > tbody > tr:last-child > td, .table-responsive-md .table > tbody > tr:last-child > th, .table-responsive-xl .table > tbody > tr:last-child > td, .table-responsive-xl .table > tbody > tr:last-child > th, .table-responsive-sm .table > tbody > tr:last-child > td, .table-responsive-sm .table > tbody > tr:last-child > th, .table-responsive-lg .table > tbody > tr:last-child > td, .table-responsive-lg .table > tbody > tr:last-child > th { border-bottom: 0; } /* Hover — premium soft transition. */ .table-responsive .table > tbody > tr, .table-responsive-md .table > tbody > tr, .table-responsive-xl .table > tbody > tr, .table-responsive-sm .table > tbody > tr, .table-responsive-lg .table > tbody > tr { transition: background-color 0.2s ease; } .table-responsive .table > tbody > tr:hover, .table-responsive-md .table > tbody > tr:hover, .table-responsive-xl .table > tbody > tr:hover, .table-responsive-sm .table > tbody > tr:hover, .table-responsive-lg .table > tbody > tr:hover { background-color: var(--ui-row-hover); } /* Striping (if any page enables .table-striped) should also be muted. */ .table-responsive .table-striped > tbody > tr:nth-of-type(odd) > *, .table-responsive-md .table-striped > tbody > tr:nth-of-type(odd) > *, .table-responsive-xl .table-striped > tbody > tr:nth-of-type(odd) > *, .table-responsive-sm .table-striped > tbody > tr:nth-of-type(odd) > *, .table-responsive-lg .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(0, 0, 0, 0.015); } /* ---------------------------------------------------------------------------- * 2. PAGINATION (custom — NOT Bootstrap's ) * The component renders a plain
elements rendered with * CssClass="voucher-privacy-mask" inside the four whitelisted pages: * • Pages/Vouchers/Index.razor — Code * • Pages/VoucherGroups/VchrrGrpSngle.razor — Code * • Pages/Reports/VoucherReportBasedOnDate.razor — Code * • Pages/Routers/Index.razor — IpAddress, UserName * Effect is direction-agnostic, so RTL and LTR render pixel-identical. * -------------------------------------------------------------------------- */ .voucher-privacy-mask { position: relative; color: transparent !important; /* hide raw text */ text-shadow: 0 0 8px rgba(15, 23, 42, 0.45); /* soft halo — glass look */ background: rgba(15, 23, 42, 0.03) !important; /* light gray placeholder */ -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 999px; /* rounded capsule */ cursor: pointer; transition: color 0.25s ease, text-shadow 0.25s ease, background-color 0.25s ease, backdrop-filter 0.25s ease; /* Prevent accidental text selection from leaking the masked value */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .voucher-privacy-mask:hover { color: inherit !important; /* crisp fade-in reveal */ text-shadow: none; background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* ---------------------------------------------------------------------------- * 5. DASHBOARD SCORECARDS & METRICS CARDS * Targets the legacy AdminLTE .small-box / .small-box-custom widgets used * by StatBox.razor, StatisticsBoxNew.razor and StatisticsCardRow.razor. * Replaces full pastel fills with white surfaces, rounded corners, soft * elevation, and a 4px inline-start accent that auto-mirrors in RTL. * -------------------------------------------------------------------------- */ .small-box, .small-box.small-box-custom { background-color: var(--ui-surface) !important; color: var(--ui-metric-fg) !important; border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow-card); border: 1px solid rgba(15, 23, 42, 0.05); border-inline-start: 4px solid var(--ui-accent-blue); /* default anchor */ padding: 1rem 1.25rem; margin-bottom: 1rem; overflow: hidden; font-family: var(--ui-font-stack); transition: box-shadow 0.2s ease, transform 0.2s ease; } .small-box:hover, .small-box.small-box-custom:hover { box-shadow: 0 8px 14px -2px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); transform: translateY(-1px); } /* Prominent metric value */ .small-box .inner h4, .small-box .static-counter-title, .small-box h3 { font-family: var(--ui-font-stack); font-size: 1.8rem !important; font-weight: 700 !important; color: var(--ui-metric-fg) !important; line-height: 1.15; margin: 0 0 0.25rem 0; } /* Clean readable label */ .small-box .static-counter-num, .small-box .small-box-footer, .small-box p { font-family: var(--ui-font-stack); font-size: 0.85rem !important; color: var(--ui-label-fg) !important; font-weight: 500; text-decoration: none; } /* Icon — reduced and tinted to the accent (no harsh full-fill backdrop) */ .small-box > .icon { color: var(--ui-accent-blue); opacity: 0.35; font-size: 4.5rem; top: 0.75rem; inset-inline-end: 1rem; /* RTL/LTR-safe icon placement */ inset-inline-start: auto; right: auto; left: auto; } /* Footer link button blends with the new lightweight aesthetic */ .small-box .small-box-footer { display: inline-block; background: transparent !important; color: var(--ui-accent-blue) !important; padding: 0.25rem 0; margin-top: 0.5rem; border-top: 1px solid rgba(15, 23, 42, 0.05); } /* ---- Semantic accent variants ---- * * Map legacy AdminLTE color classes (.bg-aqua, .bg-green, etc.) AND the * dynamic .statistics-bg-N classes used by StatisticsBoxNew.razor to the new * accent palette. Background stays white; only the inline-start border and * icon tint change. * -------------------------------------------------------------------------- */ /* Tech Blue — active users / live devices / downloads */ .small-box.bg-aqua, .small-box.bg-blue, .small-box.bg-info, .small-box.bg-light-blue, .small-box.statistics-bg-2 { border-inline-start-color: var(--ui-accent-blue); } .small-box.bg-aqua > .icon, .small-box.bg-blue > .icon, .small-box.bg-info > .icon, .small-box.bg-light-blue > .icon, .small-box.statistics-bg-2 > .icon { color: var(--ui-accent-blue); } /* Emerald Green — financials / income */ .small-box.bg-green, .small-box.bg-success, .small-box.bg-teal, .small-box.statistics-bg-1 { border-inline-start-color: var(--ui-accent-green); } .small-box.bg-green > .icon, .small-box.bg-success > .icon, .small-box.bg-teal > .icon, .small-box.statistics-bg-1 > .icon { color: var(--ui-accent-green); } .small-box.bg-green .small-box-footer, .small-box.bg-success .small-box-footer, .small-box.bg-teal .small-box-footer, .small-box.statistics-bg-1 .small-box-footer { color: var(--ui-accent-green) !important; } /* Purple — expired vouchers / system alerts */ .small-box.bg-purple, .small-box.bg-maroon, .small-box.statistics-bg-3 { border-inline-start-color: var(--ui-accent-purple); } .small-box.bg-purple > .icon, .small-box.bg-maroon > .icon, .small-box.statistics-bg-3 > .icon { color: var(--ui-accent-purple); } .small-box.bg-purple .small-box-footer, .small-box.bg-maroon .small-box-footer, .small-box.statistics-bg-3 .small-box-footer { color: var(--ui-accent-purple) !important; } /* Amber — warnings / system alerts */ .small-box.bg-yellow, .small-box.bg-orange, .small-box.bg-warning, .small-box.bg-danger, .small-box.statistics-bg-4 { border-inline-start-color: var(--ui-accent-amber); } .small-box.bg-yellow > .icon, .small-box.bg-orange > .icon, .small-box.bg-warning > .icon, .small-box.bg-danger > .icon, .small-box.statistics-bg-4 > .icon { color: var(--ui-accent-amber); } .small-box.bg-yellow .small-box-footer, .small-box.bg-orange .small-box-footer, .small-box.bg-warning .small-box-footer, .small-box.bg-danger .small-box-footer, .small-box.statistics-bg-4 .small-box-footer { color: var(--ui-accent-amber) !important; } /* ---------------------------------------------------------------------------- * 6. FORM INPUTS & FILTER PANELS (Toolbars above tables) * Smooth rounded edges, clean 1px slate border, premium focus ring. * Search/filter icons ride on logical-property utility wrappers so they * flip naturally between LTR and RTL. * -------------------------------------------------------------------------- */ .form-control, .form-select, input[type="text"].form-control, input[type="search"].form-control, input[type="number"].form-control, input[type="date"].form-control, input[type="email"].form-control, select.form-select, textarea.form-control { border-radius: var(--ui-radius-input); border: 1px solid var(--ui-input-border); background-color: var(--ui-surface); color: var(--ui-metric-fg); font-family: var(--ui-font-stack); font-size: 0.875rem; padding: 0.45rem 0.75rem; text-align: start; /* RTL/LTR-safe text alignment */ transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .form-select:focus, textarea.form-control:focus { border-color: var(--ui-accent-blue); box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.18); outline: 0; } .form-control::placeholder, textarea.form-control::placeholder { color: var(--ui-label-fg); opacity: 0.85; } .form-label, label.form-label { color: var(--ui-label-fg); font-family: var(--ui-font-stack); font-weight: 500; font-size: 0.85rem; text-align: start; /* auto-flips for RTL */ } /* Bootstrap input-group icons / addons — keep them aligned naturally with the field on either side via logical-property border radii. The native Bootstrap RTL stylesheet already swaps left/right radii, so we only need to enforce the rounded geometry here. */ .input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text { border-radius: var(--ui-radius-input); } .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-start-end-radius: 0; border-end-end-radius: 0; } .input-group > :not(:first-child):not(.dropdown-menu) { border-start-start-radius: 0; border-end-start-radius: 0; } .input-group-text { background-color: var(--ui-thead-bg); border: 1px solid var(--ui-input-border); color: var(--ui-label-fg); font-family: var(--ui-font-stack); font-size: 0.85rem; } /* ---------------------------------------------------------------------------- * 7. WIDE-SCREEN LAYOUT POLISH * Caps the main content at 1440px and centers it on huge monitors so * tables don't sprawl into oceans of white space, while still flexing to * 100% on small/medium screens. Pure additive CSS — no .razor edits. * * Bi-directional safety: uses `margin-inline: auto` so the centered axis * is direction-agnostic; works identically under LTR and RTL. * -------------------------------------------------------------------------- */ /* The existing main wrapper in Shared/MainLayout.razor (
@Body
) */ .content, .main-content-container { max-width: 1440px; width: 100%; margin-inline: auto; /* RTL/LTR-safe centering */ } /* Allow opt-out if a specific page needs full-width (e.g. dashboards with wall-to-wall charts) by adding the .content-fluid class on a wrapper. */ .content.content-fluid, .main-content-container.content-fluid { max-width: none; } /* ---------------------------------------------------------------------------- * 7b. TABLE COLUMN BEHAVIOR * Lets the widest column (e.g., Name / Plan Name / Group Name) absorb * trailing white space, while narrow columns (Id, status icon, amount) * shrink-wrap to their content. Achieved with `table-layout: auto` plus * defensive shrink rules on the first and last columns (Id + Actions). * -------------------------------------------------------------------------- */ .table-responsive .table, .table-responsive-md .table, .table-responsive-xl .table, .table-responsive-sm .table, .table-responsive-lg .table { table-layout: auto; /* widest column absorbs slack */ width: 100%; } /* First column (typically Id) and last column (typically the actions menu) shrink-wrap so the middle columns expand naturally. */ .table-responsive .table > thead > tr > th:first-child, .table-responsive .table > tbody > tr > td:first-child, .table-responsive-md .table > thead > tr > th:first-child, .table-responsive-md .table > tbody > tr > td:first-child, .table-responsive-xl .table > thead > tr > th:first-child, .table-responsive-xl .table > tbody > tr > td:first-child, .table-responsive-sm .table > thead > tr > th:first-child, .table-responsive-sm .table > tbody > tr > td:first-child, .table-responsive-lg .table > thead > tr > th:first-child, .table-responsive-lg .table > tbody > tr > td:first-child, .table-responsive .table > thead > tr > th:last-child, .table-responsive .table > tbody > tr > td:last-child, .table-responsive-md .table > thead > tr > th:last-child, .table-responsive-md .table > tbody > tr > td:last-child, .table-responsive-xl .table > thead > tr > th:last-child, .table-responsive-xl .table > tbody > tr > td:last-child, .table-responsive-sm .table > thead > tr > th:last-child, .table-responsive-sm .table > tbody > tr > td:last-child, .table-responsive-lg .table > thead > tr > th:last-child, .table-responsive-lg .table > tbody > tr > td:last-child { width: 1%; white-space: nowrap; } /* Helper utility classes — opt-in via GridColumn.CssClass for any column you want to shrink-wrap (Status icon, Amount, Phone, Date, Account #) or force-grow (Name / Description). */ .col-shrink, td.col-shrink, th.col-shrink { width: 1%; white-space: nowrap; } .col-grow, td.col-grow, th.col-grow { width: auto; white-space: normal; word-break: break-word; } /* Numeric / amount columns — right-align in LTR, left-align in RTL. */ .col-numeric, td.col-numeric, th.col-numeric { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------------------------------------------------------------------------- * 7c. FILTER BAR ALIGNMENT * Distributes toolbar inputs and primary action buttons evenly using * flex `justify-content: space-between`. Opt-in via `.toolbar-row` on * any existing Bootstrap row so we don't disturb non-toolbar rows. * On <768px, items wrap and re-stack naturally with `flex-wrap: wrap`. * -------------------------------------------------------------------------- */ .toolbar-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .toolbar-row > .toolbar-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; flex: 1 1 auto; /* filters absorb available space on the start side */ min-width: 0; } .toolbar-row > .toolbar-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; flex: 0 0 auto; /* actions hug the end */ margin-inline-start: auto; } /* Mobile: collapse and stack vertically below the md breakpoint */ @media (max-width: 767.98px) { .toolbar-row { justify-content: flex-start; } .toolbar-row > .toolbar-filters, .toolbar-row > .toolbar-actions { flex: 1 1 100%; margin-inline-start: 0; } } /* ---------------------------------------------------------------------------- * 8. SIDEBAR (NavMenu — .sidebar wrapper in Shared/MainLayout.razor) * Replaces the legacy purple gradient with a sophisticated dark slate / * navy palette for a high-tech, secure-networking SaaS feel. Overrides * are made from the global stylesheet using high-specificity selectors * plus surgical !important so we win against the existing Blazor scoped * CSS in MainLayout.razor.css and NavMenu.razor.css — zero .razor edits. * * Bi-directional safety: active-state accent uses `border-inline-start` * so it auto-mirrors (left rail in LTR, right rail in RTL). * -------------------------------------------------------------------------- */ :root { --ui-sidebar-bg: #0f172a; /* dark slate — base */ --ui-sidebar-bg-2: #1e293b; /* slightly lighter — active/hover */ --ui-sidebar-fg: #94a3b8; /* soft silver-gray — inactive */ --ui-sidebar-fg-hover: #ffffff; /* pure white — hover/active */ --ui-sidebar-accent: #3b82f6; /* tech blue — active rail */ --ui-sidebar-divider: rgba(255, 255, 255, 0.05); } /* Base surface — override the legacy gradient with a flat dark slate. */ .sidebar { background-image: none !important; background-color: var(--ui-sidebar-bg) !important; font-family: var(--ui-font-stack); color: var(--ui-sidebar-fg); } /* Top brand row inside the sidebar */ .sidebar .top-row, .sidebar .navbar-dark { background-color: rgba(0, 0, 0, 0.25) !important; border-bottom: 1px solid var(--ui-sidebar-divider); } .sidebar .navbar-brand { color: var(--ui-sidebar-fg-hover) !important; font-family: var(--ui-font-stack); font-weight: 600; letter-spacing: 0.01em; } /* Menu items — spacing, typography, soft silver-gray color */ .sidebar .nav-item { font-family: var(--ui-font-stack); font-size: 0.9rem; margin-block: 0.15rem; } .sidebar .nav-link, .sidebar .nav-item a, .sidebar .menu-item-link { color: var(--ui-sidebar-fg) !important; padding-block: 0.65rem !important; /* premium vertical breathing room */ padding-inline: 1rem !important; /* RTL/LTR-safe horizontal padding */ border-radius: 6px; border-inline-start: 3px solid transparent; /* reserved space for active rail */ transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; font-weight: 500; letter-spacing: 0.005em; } .sidebar .nav-link:hover, .sidebar .nav-item a:hover, .sidebar .menu-item-link:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--ui-sidebar-fg-hover) !important; } /* Active state — subtle slate tint + tech-blue inline-start accent rail */ .sidebar .nav-link.active, .sidebar .nav-item a.active { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--ui-sidebar-fg-hover) !important; border-inline-start: 3px solid var(--ui-sidebar-accent) !important; } /* Iconography inside the sidebar inherits the silver-gray / white scheme */ .sidebar .nav-link .oi, .sidebar .nav-item a .oi, .sidebar .menu-item-link .oi { color: inherit; opacity: 0.85; } .sidebar .nav-link:hover .oi, .sidebar .nav-link.active .oi, .sidebar .nav-item a:hover .oi, .sidebar .nav-item a.active .oi { opacity: 1; } /* ---- Dropdown chevron refinement ---- * The legacy template swaps between `.oi-chevron-top` and `.oi-chevron-bottom` * glyphs at the markup level when a group expands. We can't tween between two * glyphs, but we CAN make both chevrons smaller, thinner, and silkier so the * change reads as a smooth state transition rather than a heavy snap. */ .sidebar .oi-chevron-top, .sidebar .oi-chevron-bottom { font-size: 0.7rem !important; /* smaller, less intrusive */ opacity: 0.55; margin-inline-start: auto; /* RTL/LTR-safe end-alignment */ transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease; will-change: transform, opacity; } .sidebar .nav-link:hover .oi-chevron-top, .sidebar .nav-link:hover .oi-chevron-bottom, .sidebar .menu-item-link:hover .oi-chevron-top, .sidebar .menu-item-link:hover .oi-chevron-bottom { opacity: 1; color: var(--ui-sidebar-fg-hover); } /* Visual hint of rotation continuity between collapsed/expanded glyphs */ .sidebar .oi-chevron-top { transform: rotate(0deg); } .sidebar .oi-chevron-bottom { transform: rotate(0deg); } /* Sub-item indentation — nested links get a soft inset so the hierarchy reads correctly in both LTR and RTL via padding-inline-start. */ .sidebar .nav-item .nav-item .nav-link, .sidebar .nav-item ul .nav-link { padding-inline-start: 2.25rem !important; font-size: 0.85rem; color: var(--ui-sidebar-fg) !important; } /* Scrollbar tint — keeps the sidebar feeling all-of-a-piece on overflow */ .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.08); border-radius: 999px; } .sidebar::-webkit-scrollbar-track { background-color: transparent; } .sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.08) transparent; }