/* ========================================================================== REFRESH THEME — 2026 design refresh High-contrast neutrals, Vuexy violet demoted to a surgical accent, light + dark designed as a pair on the same skin. Activated by: data-skin="refresh" on . Mode: data-bs-theme="light" | "dark" (toggle in navbar, persisted in localStorage 'ops-refresh-mode'). Source of truth for the look: docs/design-system/mockup-2026-dashboard.html Loaded AFTER oops-design-system.css so it wins specificity ties. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS — one --rf-* layer, set per mode; components reference it once. -------------------------------------------------------------------------- */ [data-skin="refresh"] { /* surfaces */ --rf-canvas: #f6f6f8; --rf-paper: #ffffff; --rf-elev: #ffffff; --rf-surface-2: #f1f1f5; /* ink — body 12.6:1, secondary 7.5:1, faint for decoration only */ --rf-ink: #16161d; --rf-ink-2: #50525e; --rf-ink-3: #878a99; /* lines */ --rf-line: #e4e5ec; --rf-line-strong: #d3d5df; /* accent — violet kept, deepened so white-on-accent passes AA (5.7:1) */ --rf-accent: #5b4fe0; --rf-accent-hover: #4c40d1; --rf-accent-ink: #5b4fe0; --rf-accent-soft: rgba(91, 79, 224, 0.09); --rf-accent-rgb: 91, 79, 224; /* status — ink (text) / dot (solid) / soft (tinted bg) */ --rf-ok-ink: #15803d; --rf-ok-dot: #22b06b; --rf-ok-soft: rgba(34, 176, 107, 0.11); --rf-info-ink: #0e7490; --rf-info-dot: #0ea5c4; --rf-info-soft: rgba(14, 165, 196, 0.10); --rf-warn-ink: #a16207; --rf-warn-dot: #e8a23c; --rf-warn-soft: rgba(232, 162, 60, 0.14); --rf-bad-ink: #be3a40; --rf-bad-dot: #e5484d; --rf-bad-soft: rgba(229, 72, 77, 0.10); /* depth — close to the surface, never dramatic */ --rf-shadow-xs: 0 1px 2px rgba(22, 22, 29, 0.04); --rf-shadow: 0 1px 2px rgba(22, 22, 29, 0.04), 0 6px 20px rgba(22, 22, 29, 0.05); --rf-shadow-lg: 0 8px 24px rgba(22, 22, 29, 0.10), 0 24px 64px rgba(22, 22, 29, 0.12); /* shape */ --rf-radius: 9px; /* controls: buttons, inputs, chips */ --rf-radius-lg: 12px; /* containers: cards, modals, dropdowns */ --rf-kbd-bg: #f1f1f5; --rf-scrim: rgba(22, 22, 29, 0.42); --rf-font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --rf-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace; } [data-skin="refresh"][data-bs-theme="dark"] { --rf-canvas: #0d0e12; --rf-paper: #14151b; --rf-elev: #1a1b23; --rf-surface-2: #1a1b23; --rf-ink: #edeef4; --rf-ink-2: #a4a7b5; --rf-ink-3: #6b6e7e; --rf-line: #23242f; --rf-line-strong: #30323f; --rf-accent: #6c5ff0; --rf-accent-hover: #7d71f6; --rf-accent-ink: #b3a9ff; --rf-accent-soft: rgba(139, 128, 248, 0.13); --rf-accent-rgb: 139, 128, 248; --rf-ok-ink: #4ade80; --rf-ok-dot: #34d178; --rf-ok-soft: rgba(74, 222, 128, 0.10); --rf-info-ink: #43cdec; --rf-info-dot: #3ecbe8; --rf-info-soft: rgba(62, 203, 232, 0.10); --rf-warn-ink: #f5be4f; --rf-warn-dot: #f0b43c; --rf-warn-soft: rgba(240, 180, 60, 0.11); --rf-bad-ink: #f8777c; --rf-bad-dot: #f2555a; --rf-bad-soft: rgba(242, 85, 90, 0.11); --rf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --rf-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.22); --rf-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45), 0 32px 80px rgba(0, 0, 0, 0.5); --rf-kbd-bg: #20212b; --rf-scrim: rgba(5, 5, 9, 0.6); } /* -------------------------------------------------------------------------- 2. BOOTSTRAP / VUEXY VARIABLE BINDINGS -------------------------------------------------------------------------- */ [data-skin="refresh"] { --bs-font-sans-serif: var(--rf-font-sans); --bs-font-monospace: var(--rf-font-mono); --bs-body-color: var(--rf-ink); --bs-body-color-rgb: 22, 22, 29; --bs-body-bg: var(--rf-canvas); --bs-heading-color: var(--rf-ink); --bs-emphasis-color: var(--rf-ink); --bs-secondary-color: var(--rf-ink-2); --bs-paper-bg: var(--rf-paper); --bs-tertiary-bg: var(--rf-surface-2); --bs-secondary-bg: var(--rf-surface-2); --bs-primary: var(--rf-accent); --bs-primary-rgb: var(--rf-accent-rgb); --bs-success: var(--rf-ok-dot); --bs-info: var(--rf-info-dot); --bs-warning: var(--rf-warn-dot); --bs-danger: var(--rf-bad-dot); --bs-link-color: var(--rf-accent-ink); --bs-link-hover-color: var(--rf-accent-hover); --bs-link-color-rgb: var(--rf-accent-rgb); --bs-border-color: var(--rf-line); --bs-border-color-translucent: var(--rf-line); --bs-border-radius: var(--rf-radius); --bs-box-shadow-xs: var(--rf-shadow-xs); --bs-box-shadow-sm: var(--rf-shadow-xs); --bs-box-shadow: var(--rf-shadow); --bs-box-shadow-lg: var(--rf-shadow-lg); --bs-floating-component-shadow: var(--rf-shadow-lg); /* navbar */ --bs-navbar-bg: var(--rf-paper); --bs-navbar-box-shadow: none; /* sidebar — paper surface, bordered, both modes */ --bs-menu-bg: var(--rf-paper); --bs-menu-color: var(--rf-ink-2); --bs-menu-hover-bg: var(--rf-accent-soft); --bs-menu-hover-color: var(--rf-ink); --bs-menu-sub-active-bg: var(--rf-accent-soft); --bs-menu-sub-active-color: var(--rf-accent-ink); --bs-menu-active-bg: var(--rf-accent-soft); --bs-menu-active-color: var(--rf-accent-ink); --bs-menu-box-shadow: none; --bs-menu-divider-color: var(--rf-line); --bs-menu-header-color: var(--rf-ink-3); font-family: var(--rf-font-sans); color-scheme: light; } [data-skin="refresh"][data-bs-theme="dark"] { --bs-body-color-rgb: 237, 238, 244; color-scheme: dark; } [data-skin="refresh"] body { background-color: var(--rf-canvas); color: var(--rf-ink); font-family: var(--rf-font-sans); } /* High-contrast secondary text — retires the failing #a5a3ae tone */ [data-skin="refresh"] .text-body-secondary, [data-skin="refresh"] .text-muted, [data-skin="refresh"] .form-text { color: var(--rf-ink-2) !important; } [data-skin="refresh"] h1, [data-skin="refresh"] h2, [data-skin="refresh"] h3, [data-skin="refresh"] h4, [data-skin="refresh"] h5, [data-skin="refresh"] h6 { color: var(--rf-ink); font-weight: 600; } /* Codes & figures — AWB, HAWB, refs, plates read as instrumentation */ [data-skin="refresh"] .mono, [data-skin="refresh"] .font-monospace, [data-skin="refresh"] code, [data-skin="refresh"] kbd, [data-skin="refresh"] td.awb, [data-skin="refresh"] .text-awb, [data-skin="refresh"] .reference-code { font-family: var(--rf-font-mono) !important; letter-spacing: 0.01em; } [data-skin="refresh"] .table td { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 3. SIDEBAR / MENU -------------------------------------------------------------------------- */ [data-skin="refresh"] .layout-menu, [data-skin="refresh"] .bg-menu-theme { background-color: var(--rf-paper) !important; border-right: 1px solid var(--rf-line); } [data-skin="refresh"] .menu-inner > .menu-header { color: var(--rf-ink-3) !important; font-family: var(--rf-font-mono); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; } [data-skin="refresh"] .menu-inner .menu-item .menu-link { color: var(--rf-ink-2); border-radius: 8px; margin: 1px 0.75rem; border: 1px solid transparent; } [data-skin="refresh"] .menu-inner .menu-item .menu-link .menu-icon { color: var(--rf-ink-3); } [data-skin="refresh"] .menu-inner .menu-item .menu-link:hover { background-color: var(--rf-accent-soft) !important; color: var(--rf-ink) !important; } [data-skin="refresh"] .menu-inner .menu-item .menu-link:hover .menu-icon { color: var(--rf-ink); } /* Active item — tinted, bordered, accent ink. No gradients. */ [data-skin="refresh"] .menu-inner .menu-item.active > .menu-link { background: var(--rf-accent-soft) !important; color: var(--rf-accent-ink) !important; font-weight: 600; border-color: rgba(var(--rf-accent-rgb), 0.22); box-shadow: none !important; } [data-skin="refresh"] .menu-inner .menu-item.active > .menu-link .menu-icon { color: var(--rf-accent-ink) !important; } [data-skin="refresh"] .app-brand-text { color: var(--rf-ink) !important; font-weight: 800; } [data-skin="refresh"] .layout-menu-toggle i { color: var(--rf-ink-3) !important; } [data-skin="refresh"] .bg-menu-theme .ps__thumb-y { background-color: var(--rf-line-strong) !important; } /* -------------------------------------------------------------------------- 4. NAVBAR -------------------------------------------------------------------------- */ [data-skin="refresh"] .layout-navbar.navbar-detached.bg-navbar-theme { background-color: var(--rf-paper) !important; border-bottom: 1px solid var(--rf-line); box-shadow: none; } [data-skin="refresh"] .navbar-nav .nav-link { color: var(--rf-ink-2); } [data-skin="refresh"] .navbar-nav .nav-link:hover { color: var(--rf-ink); } /* -------------------------------------------------------------------------- 5. CARDS -------------------------------------------------------------------------- */ [data-skin="refresh"] .card { background-color: var(--rf-paper); border: 1px solid var(--rf-line); border-radius: var(--rf-radius-lg); box-shadow: var(--rf-shadow); color: var(--rf-ink); } [data-skin="refresh"] .card-header { background-color: transparent; border-bottom: 1px solid var(--rf-line); color: var(--rf-ink); font-weight: 600; } [data-skin="refresh"] .card .card-title { color: var(--rf-ink); } /* KPI numerals — control-tower mono (existing partial hook + opt-in class) */ [data-skin="refresh"] .ods-kpi-card h3, [data-skin="refresh"] .rf-num { font-family: var(--rf-font-mono); font-weight: 600; letter-spacing: -0.02em; } /* -------------------------------------------------------------------------- 6. TABLES -------------------------------------------------------------------------- */ [data-skin="refresh"] .table { color: var(--rf-ink); border-color: var(--rf-line); } [data-skin="refresh"] .table thead th, [data-skin="refresh"] .table > thead.table-light th { background-color: var(--rf-surface-2) !important; color: var(--rf-ink-3) !important; font-family: var(--rf-font-mono); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--rf-line); } [data-skin="refresh"] .table td { color: var(--rf-ink); border-color: var(--rf-line); } [data-skin="refresh"] .table-hover tbody tr:hover { cursor: pointer; } [data-skin="refresh"] .table-hover tbody tr:hover > * { background-color: var(--rf-accent-soft) !important; color: var(--rf-ink); } [data-skin="refresh"] .table-bordered > :not(caption) > * > * { border-color: var(--rf-line); } /* -------------------------------------------------------------------------- 7. BUTTONS -------------------------------------------------------------------------- */ [data-skin="refresh"] .btn { border-radius: var(--rf-radius); font-weight: 600; letter-spacing: 0; } [data-skin="refresh"] .btn-primary { background-color: var(--rf-accent); border-color: var(--rf-accent); color: #fff; box-shadow: 0 2px 10px rgba(var(--rf-accent-rgb), 0.35); } [data-skin="refresh"] .btn-primary:hover, [data-skin="refresh"] .btn-primary:focus, [data-skin="refresh"] .btn-primary:active { background-color: var(--rf-accent-hover) !important; border-color: var(--rf-accent-hover) !important; color: #fff !important; } [data-skin="refresh"] .btn-outline-primary { color: var(--rf-accent-ink); border-color: var(--rf-accent); } [data-skin="refresh"] .btn-outline-primary:hover { background-color: var(--rf-accent); border-color: var(--rf-accent); color: #fff; } [data-skin="refresh"] .btn-label-primary { background-color: var(--rf-accent-soft) !important; color: var(--rf-accent-ink) !important; border-color: transparent !important; } [data-skin="refresh"] .btn-label-primary:hover { background-color: rgba(var(--rf-accent-rgb), 0.18) !important; color: var(--rf-accent-ink) !important; } [data-skin="refresh"] .btn-label-secondary { background-color: var(--rf-surface-2) !important; color: var(--rf-ink-2) !important; border: 1px solid var(--rf-line) !important; } [data-skin="refresh"] .btn-label-secondary:hover { color: var(--rf-ink) !important; border-color: var(--rf-line-strong) !important; } [data-skin="refresh"] .btn-text-secondary { color: var(--rf-ink-2); } [data-skin="refresh"] .btn-text-secondary:hover { color: var(--rf-ink); background-color: var(--rf-accent-soft); } /* -------------------------------------------------------------------------- 8. FORMS -------------------------------------------------------------------------- */ [data-skin="refresh"] .form-control, [data-skin="refresh"] .form-select { background-color: var(--rf-paper); border-color: var(--rf-line-strong); border-radius: var(--rf-radius); color: var(--rf-ink); } [data-skin="refresh"] .form-control::placeholder { color: var(--rf-ink-3); } [data-skin="refresh"] .form-control:focus, [data-skin="refresh"] .form-select:focus { background-color: var(--rf-paper); border-color: var(--rf-accent); box-shadow: 0 0 0 0.18rem rgba(var(--rf-accent-rgb), 0.22); color: var(--rf-ink); } [data-skin="refresh"] .form-label { color: var(--rf-ink-2); font-weight: 500; } [data-skin="refresh"] .input-group-text { background-color: var(--rf-surface-2); border-color: var(--rf-line-strong); color: var(--rf-ink-2); border-radius: var(--rf-radius); } [data-skin="refresh"] .form-check-input { background-color: var(--rf-paper); border-color: var(--rf-line-strong); } [data-skin="refresh"] .form-check-input:checked { background-color: var(--rf-accent); border-color: var(--rf-accent); } /* -------------------------------------------------------------------------- 9. BADGES — tinted label pattern, AA text in both modes -------------------------------------------------------------------------- */ [data-skin="refresh"] .badge { border-radius: 6px; font-weight: 600; letter-spacing: 0.01em; } [data-skin="refresh"] .bg-label-primary { background: var(--rf-accent-soft) !important; color: var(--rf-accent-ink) !important; } [data-skin="refresh"] .bg-label-success { background: var(--rf-ok-soft) !important; color: var(--rf-ok-ink) !important; } [data-skin="refresh"] .bg-label-info { background: var(--rf-info-soft) !important; color: var(--rf-info-ink) !important; } [data-skin="refresh"] .bg-label-warning { background: var(--rf-warn-soft) !important; color: var(--rf-warn-ink) !important; } [data-skin="refresh"] .bg-label-danger { background: var(--rf-bad-soft) !important; color: var(--rf-bad-ink) !important; } [data-skin="refresh"] .bg-label-secondary { background: var(--rf-surface-2) !important; color: var(--rf-ink-2) !important; } [data-skin="refresh"] .bg-label-dark { background: var(--rf-surface-2) !important; color: var(--rf-ink) !important; } [data-skin="refresh"] .badge.bg-secondary { background-color: var(--rf-surface-2) !important; color: var(--rf-ink-2) !important; border: 1px solid var(--rf-line); } /* Vuexy avatar "icon tiles" keep the tinted look, slightly rounder */ [data-skin="refresh"] .avatar-initial { border-radius: 8px; } /* -------------------------------------------------------------------------- 10. DROPDOWNS, MODALS, OFFCANVAS, POPOVERS -------------------------------------------------------------------------- */ [data-skin="refresh"] .dropdown-menu { background-color: var(--rf-elev); border: 1px solid var(--rf-line-strong); border-radius: var(--rf-radius-lg); box-shadow: var(--rf-shadow-lg); color: var(--rf-ink); } [data-skin="refresh"] .dropdown-item { color: var(--rf-ink-2); border-radius: 7px; } [data-skin="refresh"] .dropdown-menu > li { padding: 0 0.375rem; } [data-skin="refresh"] .dropdown-item:hover, [data-skin="refresh"] .dropdown-item:focus { background-color: var(--rf-accent-soft); color: var(--rf-ink); } [data-skin="refresh"] .dropdown-item.active, [data-skin="refresh"] .dropdown-item:active { background-color: var(--rf-accent-soft); color: var(--rf-accent-ink); } [data-skin="refresh"] .dropdown-header { color: var(--rf-ink-3); font-family: var(--rf-font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; } [data-skin="refresh"] .dropdown-divider { border-color: var(--rf-line); } [data-skin="refresh"] .modal-content { background-color: var(--rf-paper); border: 1px solid var(--rf-line-strong); border-radius: var(--rf-radius-lg); box-shadow: var(--rf-shadow-lg); color: var(--rf-ink); } [data-skin="refresh"] .modal-header { border-bottom: 1px solid var(--rf-line); } [data-skin="refresh"] .modal-footer { border-top: 1px solid var(--rf-line); } [data-skin="refresh"] .modal-backdrop.show { opacity: 0.55; } [data-skin="refresh"] .offcanvas { background-color: var(--rf-paper); color: var(--rf-ink); } /* -------------------------------------------------------------------------- 11. PAGINATION, ALERTS, BREADCRUMBS, NAV TABS -------------------------------------------------------------------------- */ [data-skin="refresh"] .page-link { color: var(--rf-ink-2); background-color: var(--rf-paper); border-color: var(--rf-line); border-radius: 7px; } [data-skin="refresh"] .page-link:hover { color: var(--rf-accent-ink); background-color: var(--rf-accent-soft); border-color: var(--rf-line-strong); } [data-skin="refresh"] .page-item.active .page-link { background-color: var(--rf-accent); border-color: var(--rf-accent); color: #fff; } [data-skin="refresh"] .alert { border-radius: var(--rf-radius-lg); } [data-skin="refresh"] .alert-danger { background: var(--rf-bad-soft); color: var(--rf-bad-ink); border-color: rgba(229, 72, 77, 0.25); } [data-skin="refresh"] .alert-success { background: var(--rf-ok-soft); color: var(--rf-ok-ink); border-color: rgba(34, 176, 107, 0.25); } [data-skin="refresh"] .alert-warning { background: var(--rf-warn-soft); color: var(--rf-warn-ink); border-color: rgba(232, 162, 60, 0.3); } [data-skin="refresh"] .alert-info { background: var(--rf-info-soft); color: var(--rf-info-ink); border-color: rgba(14, 165, 196, 0.25); } [data-skin="refresh"] .breadcrumb-item a { color: var(--rf-ink-2); } [data-skin="refresh"] .breadcrumb-item a:hover { color: var(--rf-accent-ink); } [data-skin="refresh"] .breadcrumb-item.active { color: var(--rf-ink); } [data-skin="refresh"] .breadcrumb-item + .breadcrumb-item::before { color: var(--rf-ink-3); } [data-skin="refresh"] .nav-tabs .nav-link, [data-skin="refresh"] .nav-pills .nav-link { color: var(--rf-ink-2); } [data-skin="refresh"] .nav-tabs .nav-link.active { color: var(--rf-accent-ink); border-bottom-color: var(--rf-accent); } [data-skin="refresh"] .nav-pills .nav-link.active { background-color: var(--rf-accent); color: #fff; } /* -------------------------------------------------------------------------- 12. VENDORS — DataTables, Select2, Flatpickr, SweetAlert2, Notyf -------------------------------------------------------------------------- */ [data-skin="refresh"] .dataTables_wrapper .dataTables_length, [data-skin="refresh"] .dataTables_wrapper .dataTables_filter, [data-skin="refresh"] .dataTables_wrapper .dataTables_info, [data-skin="refresh"] .dataTables_wrapper .dataTables_paginate { color: var(--rf-ink-2); } [data-skin="refresh"] .select2-container--default .select2-selection--single, [data-skin="refresh"] .select2-container--default .select2-selection--multiple { background-color: var(--rf-paper); border-color: var(--rf-line-strong); border-radius: var(--rf-radius); color: var(--rf-ink); } [data-skin="refresh"] .select2-container--default .select2-selection__rendered { color: var(--rf-ink); } [data-skin="refresh"] .select2-container--default.select2-container--focus .select2-selection--multiple, [data-skin="refresh"] .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--rf-accent); box-shadow: 0 0 0 0.18rem rgba(var(--rf-accent-rgb), 0.22); } [data-skin="refresh"] .select2-dropdown { background-color: var(--rf-elev); border-color: var(--rf-line-strong); border-radius: var(--rf-radius-lg); } [data-skin="refresh"] .select2-container--default .select2-results__option { color: var(--rf-ink-2); } [data-skin="refresh"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--rf-accent); color: #fff; } [data-skin="refresh"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--rf-paper); border-color: var(--rf-line-strong); color: var(--rf-ink); } [data-skin="refresh"] .flatpickr-calendar { background-color: var(--rf-elev); border: 1px solid var(--rf-line-strong); border-radius: var(--rf-radius-lg); box-shadow: var(--rf-shadow-lg); color: var(--rf-ink); } [data-skin="refresh"] .flatpickr-day { color: var(--rf-ink-2); } [data-skin="refresh"] .flatpickr-day:hover { background-color: var(--rf-accent-soft); border-color: transparent; } [data-skin="refresh"] .flatpickr-day.selected { background-color: var(--rf-accent); border-color: var(--rf-accent); color: #fff; } [data-skin="refresh"] .flatpickr-months .flatpickr-month, [data-skin="refresh"] .flatpickr-current-month, [data-skin="refresh"] .flatpickr-weekday { color: var(--rf-ink); fill: var(--rf-ink); } [data-skin="refresh"] .swal2-popup { background-color: var(--rf-paper); border-radius: var(--rf-radius-lg); color: var(--rf-ink); font-family: var(--rf-font-sans); } [data-skin="refresh"] .swal2-title { color: var(--rf-ink); } [data-skin="refresh"] .swal2-html-container { color: var(--rf-ink-2); } [data-skin="refresh"] .notyf, [data-skin="refresh"] .notyf__message { font-family: var(--rf-font-sans) !important; } /* -------------------------------------------------------------------------- 13. ODS PARTIALS (page header, KPI cards, filter bar, empty states) -------------------------------------------------------------------------- */ [data-skin="refresh"] .ods-page-header { border-bottom: 1px solid var(--rf-line); } [data-skin="refresh"] .ods-page-header .breadcrumb-item + .breadcrumb-item::before { color: var(--rf-ink-3); } [data-skin="refresh"] .ods-kpi-card { border: 1px solid var(--rf-line); box-shadow: var(--rf-shadow-xs); } [data-skin="refresh"] .ods-kpi-card:hover { box-shadow: var(--rf-shadow); border-color: var(--rf-line-strong); } [data-skin="refresh"] .ods-filter-bar { border: 1px solid var(--rf-line); } [data-skin="refresh"] .ods-filter-bar .form-label { color: var(--rf-ink-2); } /* -------------------------------------------------------------------------- 14. SCROLLBARS, FOCUS, MISC -------------------------------------------------------------------------- */ [data-skin="refresh"] ::-webkit-scrollbar { width: 9px; height: 9px; } [data-skin="refresh"] ::-webkit-scrollbar-track { background: transparent; } [data-skin="refresh"] ::-webkit-scrollbar-thumb { background: var(--rf-line-strong); border-radius: 99px; } [data-skin="refresh"] ::-webkit-scrollbar-thumb:hover { background: var(--rf-ink-3); } [data-skin="refresh"] ::selection { background: rgba(var(--rf-accent-rgb), 0.28); } [data-skin="refresh"] hr { border-color: var(--rf-line); opacity: 1; } [data-skin="refresh"] .content-backdrop { background-color: var(--rf-scrim); } [data-skin="refresh"] .footer.bg-footer-theme { background-color: var(--rf-canvas); border-top: 1px solid var(--rf-line); color: var(--rf-ink-2); } /* kbd hint chips (used by the command palette trigger) */ [data-skin="refresh"] kbd { font-family: var(--rf-font-mono); background: var(--rf-kbd-bg); border: 1px solid var(--rf-line-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--rf-ink-2); padding: 1px 5px; font-size: 0.7rem; } @media (prefers-reduced-motion: reduce) { [data-skin="refresh"] *, [data-skin="refresh"] *::before, [data-skin="refresh"] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }