/* ─── Evyasys Design System Tokens ───────────────────────────────────────── Source: .evyasys/docs/THEME.md Loaded dynamically in App.tsx AFTER Bootstrap so overrides win cascade. DO NOT add hardcoded hex values anywhere else in the codebase. ──────────────────────────────────────────────────────────────────────────── */ /* ── Google Fonts: Source Serif 4 (display/num) · Schibsted Grotesk (UI) · Fragment Mono (code) ─ */ @import url('https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap'); /* ── 1. Raw Evyasys tokens + Bootstrap CSS variable overrides ────────────── */ :root { /* Raw Evyasys tokens */ --evya-ink: #0f172a; --evya-ink-rgb: 15, 23, 42; --evya-ink-hover: #1e293b; --evya-canvas: #ffffff; --evya-surface: #f8fafc; --evya-border: #e2e8f0; --evya-muted: #94a3b8; --evya-body: #475569; --evya-dark: #0a0a0a; --evya-dark-surface: #111111; --evya-dark-border: #1f2937; --evya-dark-muted: #6b7280; --evya-dark-text: #f1f5f9; --evya-amber: #f59e0b; --evya-amber-rgb: 245, 158, 11; /* Bootstrap variable overrides — light mode */ --bs-primary: #0f172a; --bs-primary-rgb: 15, 23, 42; --bs-body-bg: #f8fafc; --bs-body-color: #475569; --bs-body-color-rgb: 71, 85, 105; --bs-border-color: #e2e8f0; --bs-heading-color: #0f172a; --bs-link-color: #0f172a; --bs-link-hover-color: rgba(15, 23, 42, 0.8); --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif; --bs-card-bg: #ffffff; --bs-card-border-color: #e2e8f0; /* --evya-amber (#f59e0b) tops out at ~2.15:1 contrast on white even at full opacity, below WCAG 1.4.11's 3:1 — no alpha value can close that gap against light backgrounds. 0.9 maximises visibility given that ceiling; passes ~7.3:1 on dark backgrounds. Accepted design gap for light mode — see DESIGN_SYSTEM.md. */ --bs-focus-ring-color: rgba(var(--evya-amber-rgb), 0.9); } /* Dark mode — applied when .dark-style is set on */ .dark-style { --bs-body-bg: #0a0a0a; --bs-body-color: #f1f5f9; --bs-border-color: #1f2937; --bs-card-bg: #111111; --bs-heading-color: #f1f5f9; --bs-link-color: #f1f5f9; } /* ── 2. Bootstrap class overrides ─────────────────────────────────────────── theme-default.css hardcodes #009688 values that bypass CSS custom properties. These rules load AFTER theme-default.css so they win. ──────────────────────────────────────────────────────────────────────────── */ /* Body & background */ body { background: var(--evya-surface) !important; } .bg-body { background: var(--evya-surface) !important; } /* Primary text / background utilities */ .text-primary { color: var(--evya-ink) !important; } .bg-primary { background-color: var(--evya-ink) !important; } .bg-label-primary { background-color: var(--evya-surface) !important; color: var(--evya-ink) !important; } .bg-label-hover-primary { background-color: var(--evya-surface) !important; color: var(--evya-ink) !important; } .bg-label-hover-primary:hover { background-color: var(--evya-ink) !important; color: var(--evya-canvas) !important; } .bg-gradient-primary { background-image: linear-gradient(45deg, var(--evya-ink), var(--evya-ink-hover)) !important; } .text-body[href]:hover, .text-heading[href]:hover { color: var(--evya-ink-hover) !important; } /* Primary borders */ .border-primary { border-color: var(--evya-ink) !important; } /* btn-primary — all states */ .btn-primary { color: var(--evya-canvas); background-color: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } .btn-primary:hover { color: var(--evya-canvas) !important; background-color: var(--evya-ink-hover) !important; border-color: var(--evya-ink-hover) !important; } .btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary.focus { color: var(--evya-canvas); background-color: var(--evya-ink-hover) !important; border-color: var(--evya-ink-hover) !important; box-shadow: 0 0 0 0.25rem rgba(var(--evya-ink-rgb), 0.25) !important; } .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .btn-primary.show.dropdown-toggle, .show > .btn-primary.dropdown-toggle { color: var(--evya-canvas) !important; background-color: var(--evya-ink-hover) !important; border-color: var(--evya-ink-hover) !important; } .btn-primary.disabled, .btn-primary:disabled { color: var(--evya-canvas) !important; background-color: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } .btn-group .btn-primary, .input-group .btn-primary { border-right-color: var(--evya-ink-hover) !important; border-left-color: var(--evya-ink-hover) !important; } .btn-group-vertical .btn-primary { border-top-color: var(--evya-ink-hover) !important; border-bottom-color: var(--evya-ink-hover) !important; } /* btn-label-primary */ .btn-label-primary { color: var(--evya-ink) !important; border-color: var(--evya-surface) !important; background: var(--evya-surface) !important; } .btn-label-primary:hover { border-color: var(--evya-border) !important; background: var(--evya-border) !important; color: var(--evya-ink) !important; } .btn-label-primary:focus, .btn-label-primary.focus { color: var(--evya-ink) !important; background: var(--evya-border) !important; border-color: var(--evya-border) !important; } .btn-label-primary:active, .btn-label-primary.active { color: var(--evya-ink) !important; background-color: var(--evya-border) !important; border-color: var(--evya-border) !important; } /* Outline primary button */ .btn-outline-primary { color: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } .btn-outline-primary:hover { color: var(--evya-canvas) !important; background-color: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } /* Pagination */ .page-item .page-link:hover, .page-item .page-link:focus { background-color: var(--evya-surface) !important; color: var(--evya-ink) !important; } .page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus { border-color: var(--evya-ink) !important; background-color: var(--evya-ink) !important; color: var(--evya-canvas) !important; } /* ── 3. Links (theme-semi-dark.css line 794: a { color: #009688 }) ────────── */ a { color: var(--evya-ink) !important; } a:hover { color: var(--evya-ink-hover) !important; } /* ── 4. Form inputs — focus states ─────────────────────────────────────── */ /* Sneat's .form-control:focus/.form-select:focus hardcode box-shadow: none, so --bs-focus-ring-color (set above) is never consumed here — the amber ring has to be applied directly on these selectors instead. */ .form-control:focus, .form-select:focus { border-color: var(--evya-ink) !important; box-shadow: 0 0 0 0.2rem rgba(var(--evya-amber-rgb), 0.9) !important; } .form-floating-outline .form-control:focus, .form-floating-outline .form-select:focus { border-color: var(--evya-ink) !important; box-shadow: 0 0 0 0.2rem rgba(var(--evya-amber-rgb), 0.9) !important; } .input-group:not(.input-group-floating):focus-within .form-control, .input-group:not(.input-group-floating):focus-within .input-group-text { border-color: var(--evya-ink) !important; box-shadow: 0 0 0 0.2rem rgba(var(--evya-amber-rgb), 0.9) !important; } /* Floating labels on focus */ .form-floating > .form-control:focus ~ label, .form-floating > .form-control:focus:not(:placeholder-shown) ~ label, .form-floating > .form-select:focus ~ label, .form-floating > .form-select:focus:not(:placeholder-shown) ~ label { color: var(--evya-ink) !important; } .form-floating-outline :not(select):focus + label, .form-floating-outline :not(select):focus + span:not(.flatpickr-day) { color: var(--evya-ink) !important; } .form-control:focus ~ .form-label { border-color: var(--evya-ink) !important; } .form-floating-outline label.bg-body::after { background: var(--evya-surface) !important; } .form-floating-focused { background-color: var(--evya-ink) !important; } /* Checkboxes and switches */ .form-check-input:checked { background-color: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } .form-check-input[type=checkbox]:indeterminate { background-color: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } .switch-input:checked ~ .switch-toggle-slider { background: var(--evya-ink) !important; color: var(--evya-canvas) !important; } .switch-primary.switch .switch-input:checked ~ .switch-toggle-slider { background: var(--evya-ink) !important; color: var(--evya-canvas) !important; } /* ── 5. Navigation — active/hover states ────────────────────────────────── */ .nav .nav-link:hover, .nav .nav-link:focus { color: var(--evya-ink-hover) !important; } .nav-pills .nav-link.active, .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus { background-color: var(--evya-ink) !important; color: var(--evya-canvas) !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover, .nav-tabs .nav-link.active:focus { color: var(--evya-ink) !important; } .nav-tabs .tab-slider { background-color: var(--evya-ink) !important; } /* ── 6. Dropdown active items ───────────────────────────────────────────── */ .dropdown-item:not(.disabled).active, .dropdown-item:not(.disabled):active { background-color: var(--evya-surface) !important; color: var(--evya-ink) !important; } .dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active, .dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) { background-color: var(--evya-surface) !important; color: var(--evya-ink) !important; } /* ── 7. Sidebar menu active items ───────────────────────────────────────── */ .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) { background-color: var(--evya-ink) !important; } .bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle), .bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before { color: var(--evya-ink) !important; } .bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle { background: var(--evya-ink) !important; } .bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle), .bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle)::before { color: var(--evya-canvas) !important; } /* ── 8. Select2 and tagify ──────────────────────────────────────────────── */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--evya-ink) !important; color: var(--evya-canvas) !important; } .select2-container--default.select2-container--focus .select2-selection, .select2-container--default.select2-container--open .select2-selection { border-color: var(--evya-ink) !important; } .form-floating.select2-focus label { color: var(--evya-ink) !important; } .tagify--focus { border-color: var(--evya-ink) !important; } .tagify--focus ~ label { color: var(--evya-ink) !important; } .tagify__dropdown__item--active { background: var(--evya-ink) !important; } /* ── 9. Misc component overrides ────────────────────────────────────────── */ .btn-text-primary { color: var(--evya-ink) !important; } .btn-text-primary:hover, .btn-text-primary:focus { color: var(--evya-ink) !important; } .fill-primary { fill: var(--evya-ink) !important; } .bg-footer-theme { color: var(--evya-ink) !important; } .bg-footer-theme .footer-link { color: var(--evya-ink) !important; } .accordion.accordion-header-primary .accordion-item.active .accordion-button { color: var(--evya-ink) !important; } .alert-primary { background-color: var(--evya-surface) !important; border-color: var(--evya-border) !important; color: var(--evya-ink) !important; } .alert-primary .alert-link { color: var(--evya-ink) !important; } .alert-primary .alert-icon { background-color: var(--evya-ink) !important; } .alert-outline-primary { border-color: var(--evya-ink) !important; color: var(--evya-ink) !important; } .alert-solid-primary { background-color: var(--evya-ink) !important; } .bs-stepper .step.active .bs-stepper-circle { border-color: var(--evya-ink) !important; color: var(--evya-ink) !important; } .bs-stepper .step.active .bs-stepper-icon i { color: var(--evya-ink) !important; } .bs-stepper .step.crossed .step-trigger .bs-stepper-circle { background-color: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } /* ── 10. Global base styles ─────────────────────────────────────────────── */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :focus-visible { outline: 2px solid var(--evya-amber); outline-offset: 2px; } ::selection { background: var(--evya-ink); color: var(--evya-canvas); } /* ── 11. Remaining component overrides ──────────────────────────────────── */ /* a.bg-primary hover/focus */ a.bg-primary:hover, a.bg-primary:focus { background-color: var(--evya-ink-hover) !important; } /* Pagination outline variant */ .pagination-outline-primary .page-item.active .page-link, .pagination-outline-primary .page-item.active .page-link:hover, .pagination-outline-primary .page-item.active .page-link:focus, .pagination-outline-primary.pagination li.active > a:not(.page-link), .pagination-outline-primary.pagination li.active > a:not(.page-link):hover, .pagination-outline-primary.pagination li.active > a:not(.page-link):focus { border-color: var(--evya-ink) !important; color: var(--evya-ink) !important; background-color: var(--evya-surface) !important; } /* Carousel */ .modal-onboarding .carousel-indicators [data-bs-target] { background-color: var(--evya-ink); } .carousel-control-prev, .carousel-control-next { color: var(--evya-ink); } .carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { color: var(--evya-ink); } /* List group */ .list-group-item-primary { background-color: var(--evya-surface) !important; color: var(--evya-ink) !important; } a.list-group-item-primary, button.list-group-item-primary { color: var(--evya-ink); } a.list-group-item-primary:hover, a.list-group-item-primary:focus, button.list-group-item-primary:hover, button.list-group-item-primary:focus { color: var(--evya-ink); } a.list-group-item-primary.active, button.list-group-item-primary.active { border-color: var(--evya-ink) !important; background-color: var(--evya-ink) !important; color: var(--evya-canvas) !important; } .list-group.list-group-timeline .list-group-timeline-primary:before { border-color: var(--evya-ink); background-color: var(--evya-ink); } /* Alert variations */ .alert-primary hr { background-color: var(--evya-ink) !important; } .alert-outline-primary .alert-link { color: var(--evya-ink) !important; } .alert-outline-primary hr { background-color: var(--evya-ink) !important; } .alert-outline-primary .alert-icon { color: var(--evya-ink) !important; background-color: var(--evya-surface) !important; } .alert-solid-primary .alert-icon { color: var(--evya-ink) !important; } /* Tooltips */ .tooltip-primary .tooltip-inner, .tooltip-primary > .tooltip .tooltip-inner { background: var(--evya-ink); } .tooltip-primary.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before, .tooltip-primary > .tooltip.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before { border-top-color: var(--evya-ink); } .tooltip-primary.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before, .tooltip-primary > .tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow::before { border-left-color: var(--evya-ink); } .tooltip-primary.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow::before, .tooltip-primary > .tooltip.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow::before { border-bottom-color: var(--evya-ink); } .tooltip-primary.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before, .tooltip-primary > .tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow::before { border-right-color: var(--evya-ink); } /* Popovers */ .popover-primary, .popover-primary > .popover { background: var(--evya-ink); } .popover-primary.bs-popover-auto[data-popper-placement=top] > .popover-arrow::after, .popover-primary > .popover.bs-popover-auto[data-popper-placement=top] > .popover-arrow::after { border-top-color: var(--evya-ink) !important; } .popover-primary.bs-popover-auto[data-popper-placement=right] > .popover-arrow::after, .popover-primary > .popover.bs-popover-auto[data-popper-placement=right] > .popover-arrow::after { border-right-color: var(--evya-ink) !important; } .popover-primary.bs-popover-auto[data-popper-placement=bottom] > .popover-arrow::after, .popover-primary > .popover.bs-popover-auto[data-popper-placement=bottom] > .popover-arrow::after { border-bottom-color: var(--evya-ink) !important; } .popover-primary.bs-popover-auto[data-popper-placement=left] > .popover-arrow::after, .popover-primary > .popover.bs-popover-auto[data-popper-placement=left] > .popover-arrow::after { border-left-color: var(--evya-ink) !important; } /* btn-label-primary disabled */ .btn-label-primary.disabled, .btn-label-primary:disabled { color: var(--evya-ink) !important; border-color: var(--evya-surface) !important; background: var(--evya-surface) !important; } /* btn-outline-primary extended states */ .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus { color: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show { color: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--evya-ink) !important; } .btn-outline-primary .badge { background: var(--evya-ink); border-color: var(--evya-ink); } .btn-outline-primary:hover .badge, .btn-outline-primary:active .badge, .btn-outline-primary.active .badge, .show > .btn-outline-primary.dropdown-toggle .badge { background: var(--evya-ink); border-color: var(--evya-ink); } /* btn-text-primary all states */ .btn-text-primary.btn:active, .btn-text-primary.btn.active { color: var(--evya-ink) !important; } .btn-group .btn-text-primary, .input-group .btn-text-primary { border-right: 1px solid var(--evya-ink) !important; border-left: 1px solid var(--evya-ink) !important; } .btn-group-vertical .btn-text-primary { border-top: 1px solid var(--evya-ink) !important; border-bottom: 1px solid var(--evya-ink) !important; } /* Dropdown DT collection */ .dt-button-collection .dropdown-item:not(.disabled):active { background-color: var(--evya-surface) !important; } /* Custom options */ .custom-option.checked { border: 2px solid var(--evya-ink) !important; } .custom-option.checked .custom-option-body i, .custom-option.checked .custom-option-header i { color: var(--evya-ink) !important; } .custom-option.custom-option-label.checked { color: var(--evya-ink) !important; } .custom-option.custom-option-label.checked .custom-option-header span, .custom-option.custom-option-label.checked .custom-option-title { color: var(--evya-ink) !important; } /* Form range */ .form-range::-webkit-slider-thumb { background-color: var(--evya-ink); } .form-range::-webkit-slider-thumb:active { background-color: var(--evya-ink); } .form-range::-webkit-slider-runnable-track { background-color: var(--evya-ink); } .form-range::-moz-range-track { background-color: var(--evya-ink); } /* Timeline */ .timeline .timeline-point-primary { background-color: var(--evya-ink) !important; } .timeline.timeline-outline .timeline-point-primary { border: 2px solid var(--evya-ink) !important; } .timeline .timeline-indicator-primary i { color: var(--evya-ink) !important; } /* Divider */ .divider.divider-primary.divider-vertical:before, .divider.divider-primary.divider-vertical:after, .divider.divider-primary .divider-text:before, .divider.divider-primary .divider-text:after { border-color: var(--evya-ink); } /* SVG illustration */ .svg-illustration svg { fill: var(--evya-ink); } /* Card border shadow */ .card.card-border-shadow-primary:hover::after { border-bottom-color: var(--evya-ink); } /* Layout navbar detached bg */ .layout-navbar-fixed .layout-page:not(.window-scrolled) .layout-navbar.navbar-detached { background: var(--evya-surface); } /* bg-menu-theme surface colour */ .bg-menu-theme { background-color: var(--evya-surface) !important; } /* Landing navbar */ .navbar.landing-navbar .navbar-nav .show > .nav-link, .navbar.landing-navbar .navbar-nav .active > .nav-link, .navbar.landing-navbar .navbar-nav .nav-link.show, .navbar.landing-navbar .navbar-nav .nav-link.active, .navbar.landing-navbar .navbar-nav .nav-link:hover { color: var(--evya-ink) !important; } .navbar.landing-navbar .navbar-nav .show > .nav-link .menu-icon, .navbar.landing-navbar .navbar-nav .active > .nav-link .menu-icon, .navbar.landing-navbar .navbar-nav .nav-link:hover .menu-icon { color: var(--evya-ink); } /* ── 12. Third-party widget overrides ───────────────────────────────────── */ /* Select2 multi-select choice */ .select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--evya-ink) !important; color: var(--evya-canvas) !important; } /* noUI slider */ .noUi-target .noUi-connect { background: var(--evya-ink); } .noUi-target .noUi-handle { border-color: var(--evya-ink); } /* DataTables expand control */ table.dataTable.dtr-column > tbody > tr > td.control:before, table.dataTable.dtr-column > tbody > tr > th.control:before { background-color: var(--evya-ink); } /* Bootstrap Select */ .bootstrap-select .dropdown-menu.inner a[aria-selected=true] { background: var(--evya-ink) !important; color: var(--evya-canvas) !important; } .bootstrap-select .dropdown-toggle.show { border-color: var(--evya-ink); } .form-floating:has(.bootstrap-select .dropdown-toggle.show) label { color: var(--evya-ink); } .form-floating.form-floating-bootstrap-select label.form-floating-bootstrap-select-label { color: var(--evya-ink); } /* Datepicker */ .datepicker table tr td.active, .datepicker table tr td.active.highlighted, .datepicker table tr td span.active, .datepicker table tr td span.active.disabled, .datepicker table tr td.range-start, .datepicker table tr td.range-end { background: var(--evya-ink) !important; color: var(--evya-canvas) !important; } .datepicker table tr td.range, .datepicker table tr td.range.highlighted, .datepicker table tr td.range.today { color: var(--evya-ink) !important; } .datepicker table tr td.today:not(.active), .datepicker table tr td.today:not(.active):hover { color: var(--evya-ink); background-color: var(--evya-surface); } /* Flatpickr */ .flatpickr-day.today, .flatpickr-day.today:hover { color: var(--evya-ink) !important; border-color: var(--evya-border); background-color: var(--evya-surface) !important; } .flatpickr-day.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange { color: var(--evya-ink) !important; } .flatpickr-day.selected, .flatpickr-day.selected.inRange, .flatpickr-day.selected:focus, .flatpickr-day.selected:hover, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange:focus, .flatpickr-day.startRange:hover, .flatpickr-day.endRange, .flatpickr-day.endRange.inRange, .flatpickr-day.endRange:focus, .flatpickr-day.endRange:hover, .flatpickr-day.week.selected { background: var(--evya-ink) !important; border-color: var(--evya-ink) !important; } /* Date range picker */ .daterangepicker td.active:not(.off) { background: var(--evya-ink) !important; } .daterangepicker .start-date:not(.end-date):not(.off), .daterangepicker .end-date:not(.start-date):not(.off) { background-color: var(--evya-ink); } .daterangepicker .start-date:not(.end-date):not(.off):hover, .daterangepicker .end-date:not(.start-date):not(.off):hover { background-color: var(--evya-ink) !important; } .daterangepicker .input-mini.active { border-color: var(--evya-ink) !important; } .daterangepicker td.in-range:not(.start-date):not(.end-date):not(.off) { color: var(--evya-ink) !important; } .ranges li.active { color: var(--evya-ink) !important; background-color: var(--evya-surface) !important; } /* Quill editor */ .ql-snow.ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar button:hover, .ql-snow .ql-toolbar button:focus, .ql-snow .ql-toolbar button.ql-active, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item.ql-selected { color: var(--evya-ink) !important; } .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill { fill: var(--evya-ink) !important; } .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter { stroke: var(--evya-ink) !important; } /* Typeahead */ .tt-suggestion:active, .tt-cursor { background: var(--evya-ink) !important; } /* Dropzone */ .dropzone.dz-drag-hover { border-color: var(--evya-ink) !important; } /* Swiper */ .swiper-pagination-bullet.swiper-pagination-bullet-active, .swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--evya-ink) !important; } /* Spinkit */ .sk-primary.sk-plane, .sk-primary .sk-chase-dot:before, .sk-primary .sk-bounce-dot, .sk-primary .sk-wave-rect, .sk-primary.sk-pulse, .sk-primary .sk-swing-dot, .sk-primary .sk-circle-dot:before, .sk-primary .sk-circle-fade-dot:before, .sk-primary .sk-grid-cube, .sk-primary .sk-fold-cube:before { background-color: var(--evya-ink); } /* FullCalendar */ .fc .fc-event-primary:not(.fc-list-event) { background-color: var(--evya-surface) !important; color: var(--evya-ink) !important; } .fc .fc-event-primary.fc-list-event .fc-list-event-dot { border-color: var(--evya-ink) !important; } .fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button) { border-color: var(--evya-ink); color: var(--evya-ink); } .fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):not(:last-child) { border-right: 1px solid var(--evya-ink) !important; } .fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover { border-color: var(--evya-ink); color: var(--evya-ink); } .fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):active, .fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button).fc-button-active { border-color: var(--evya-ink) !important; color: var(--evya-ink); } /* SweetAlert2 */ .swal2-progress-steps[class] .swal2-progress-step.swal2-active-progress-step, .swal2-progress-steps[class] .swal2-progress-step-line, .swal2-progress-steps[class] .swal2-progress-step { background: var(--evya-ink); } /* Color picker */ .pcr-app .pcr-type.active, .pcr-app .pcr-save { background: var(--evya-ink) !important; } /* Icon card */ .icon-card.active { outline: 1px solid var(--evya-ink); } .icon-card.active i, .icon-card.active svg { color: var(--evya-ink); } /* BS Stepper (extended) */ .bs-stepper.wizard-icons .step.crossed .bs-stepper-label, .bs-stepper.wizard-icons .step.active .bs-stepper-label { color: var(--evya-ink); } .bs-stepper .step.active .bs-stepper-icon svg { fill: var(--evya-ink) !important; } .bs-stepper .step.crossed .step-trigger .bs-stepper-icon svg { fill: var(--evya-ink) !important; } .bs-stepper .step.crossed .step-trigger .bs-stepper-icon i { color: var(--evya-ink) !important; } .bs-stepper .step.crossed + .line { border-color: var(--evya-ink); } .bs-stepper .step.crossed + .line svg { fill: var(--evya-ink); } .bs-stepper .step.crossed + .line i { color: var(--evya-ink); } .bs-stepper .step.crossed + .line:before { background-color: var(--evya-ink); } /* App chat */ .app-chat .sidebar-body .chat-contact-list li.active { background-color: var(--evya-ink); } .app-chat .app-chat-history .chat-history .chat-message.chat-message-right .chat-message-text { background-color: var(--evya-ink) !important; } /* Plyr */ .plyr--video .plyr__control.plyr__control--overlaid, .plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__control[aria-expanded=true], .plyr--video .plyr__controls button:hover, .plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__control[aria-expanded=true], .plyr--audio .plyr__controls button:hover { background: var(--evya-ink) !important; } .plyr__play-large { background: var(--evya-ink) !important; } .plyr__progress--played, .plyr__volume--display { color: var(--evya-ink) !important; } .plyr--full-ui input[type=range] { color: var(--evya-ink) !important; } .plyr input[type=range]:active::-webkit-slider-thumb, .plyr input[type=range]:active::-moz-range-thumb, .plyr input[type=range]:active::-ms-thumb { background: var(--evya-ink) !important; } .plyr input[type=range]::-ms-fill-lower { background: var(--evya-ink) !important; } .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before { background: var(--evya-ink) !important; } /* ── Site-wide footer removal ────────────────────────────────────────────── */ footer { display: none !important; } /* ════════════════════════════════════════════════════════════════════════════ OBSIDIAN DESIGN SYSTEM — full token set Mirrors CoHostZoneAdmin/ClientV2/src/styles/obsidian.css All component CSS below consumes only var() references. ════════════════════════════════════════════════════════════════════════════ */ /* ── Obsidian raw literals — the ONLY place colour hex lives ─────────────── */ :root { /* type families */ --font-serif: 'Source Serif 4', Georgia, serif; --font-sans: 'Schibsted Grotesk', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Fragment Mono', Consolas, monospace; --font-num: 'Source Serif 4', Georgia, serif; /* border-radius — 12px everywhere */ --radius-card: 12px; --radius-ctl: 12px; --radius-btn: 12px; --radius-icon: 12px; --radius-av: 12px; /* motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* accent slot bases (mono: near-black accent matching existing evya-ink palette) */ --accent-alpha: #4F7CFF; --accent-beta: #7C5CFF; --accent-gamma: #00C2A8; --accent-delta: #FF8A3D; --accent-epsilon: #E94E77; /* on-accent anchors */ --on-accent-dark: #0A0B0D; --on-accent-light: #FFFFFF; /* status hues (theme-independent) */ --red: #FF6A5C; --red-dim: color-mix(in srgb, var(--red) 15%, transparent); --gold: #F5B83D; --gold-dim: color-mix(in srgb, var(--gold) 15%, transparent); --green: #2FB344; --green-dim: color-mix(in srgb, var(--green) 15%, transparent); /* modal scrims */ --scrim: color-mix(in srgb, var(--on-accent-dark) 55%, transparent); --scrim-soft: color-mix(in srgb, var(--on-accent-dark) 45%, transparent); /* default accent triad — mono (near-black, matches --evya-ink in light mode) */ --acc-bright: #0A0B0D; --acc-deep: #0A0B0D; --acc-ink: #FFFFFF; --acc: var(--acc-bright); --acc-dim: color-mix(in srgb, var(--acc-bright) 12%, transparent); } /* ── Light Mode Default Obsidian Colors ───────────────────────────────────── */ :root, .light-style, .theme-light { --evya-canvas: #FFFFFF; --evya-surface: #FFFFFF; --evya-body: #0A0B0D; --evya-ink: #0A0B0D; --evya-border: #E2E4DE; --evya-muted: #767972; /* Obsidian light neutral scale */ --bg: #FFFFFF; --fg: #12150F; --void: #FFFFFF; --surf: #FFFFFF; --coal: color-mix(in srgb, #12150F 6%, #FFFFFF); --surf2: color-mix(in srgb, #12150F 4%, #FFFFFF); --surf3: color-mix(in srgb, #12150F 8.5%, #FFFFFF); /* table surfaces */ --table-surface: #FFFFFF; --table-band: color-mix(in srgb, #12150F 7%, #FFFFFF); --table-row-hover: color-mix(in srgb, #12150F 4%, #FFFFFF); /* text ramp — all black in light mode */ --txt: #000000; --txt2: #000000; --dim: #000000; --faint: #000000; --placeholder: color-mix(in srgb, #12150F 42%, #FFFFFF); /* hairlines */ --line: color-mix(in srgb, #12150F 11%, transparent); --line2: color-mix(in srgb, #12150F 17%, transparent); --line3: color-mix(in srgb, #12150F 28%, transparent); /* accent-derived */ --acc-text: var(--acc-deep); /* shadows */ --glow: 0 1px 2px color-mix(in srgb, #12150F 14%, transparent); --shadow: 0 22px 50px color-mix(in srgb, #12150F 16%, transparent); --card-sh: 0 1px 2px color-mix(in srgb, #12150F 5%, transparent), 0 10px 30px color-mix(in srgb, #12150F 7%, transparent); /* misc */ --kpi-grad: linear-gradient(165deg, var(--surf), var(--surf2)); --grain-op: 0; --grain-blend: multiply; color-scheme: light; } /* ── Dark Mode Obsidian Colors ────────────────────────────────────────────── */ .dark-style, .theme-dark { --bg: #090A0C; --fg: #F6F8F4; --void: #090A0C; --coal: color-mix(in srgb, #F6F8F4 3%, #090A0C); --surf: color-mix(in srgb, #F6F8F4 6%, #090A0C); --surf2: color-mix(in srgb, #F6F8F4 9%, #090A0C); --surf3: color-mix(in srgb, #F6F8F4 14%, #090A0C); /* table surfaces */ --table-surface: var(--coal); --table-band: var(--surf); --table-row-hover: var(--surf); /* text ramp */ --txt: #F6F8F4; --txt2: color-mix(in srgb, #F6F8F4 85%, #090A0C); --dim: color-mix(in srgb, #F6F8F4 68%, #090A0C); --faint: color-mix(in srgb, #F6F8F4 43%, #090A0C); --placeholder: color-mix(in srgb, #F6F8F4 38%, #090A0C); /* hairlines */ --line: color-mix(in srgb, #F6F8F4 10%, transparent); --line2: color-mix(in srgb, #F6F8F4 17%, transparent); --line3: color-mix(in srgb, #F6F8F4 26%, transparent); /* accent override — white in dark mode for mono preset */ --acc-bright: #FFFFFF; --acc-deep: #FFFFFF; --acc-ink: #000000; --acc: var(--acc-bright); --acc-dim: color-mix(in srgb, var(--acc-bright) 12%, transparent); --acc-text: var(--acc-bright); /* shadows */ --glow: 0 1px 2px color-mix(in srgb, #0A0B0D 45%, transparent); --shadow: 0 22px 60px color-mix(in srgb, #0A0B0D 55%, transparent); --card-sh: 0 1px 0 color-mix(in srgb, #FFFFFF 3%, transparent), 0 14px 34px color-mix(in srgb, #0A0B0D 35%, transparent); --kpi-grad: linear-gradient(165deg, var(--surf2), var(--coal)); --grain-op: 0.05; --grain-blend: overlay; color-scheme: dark; } /* ── Obsidian Card & Table base styling ─────────────────────────────────── */ .light-style .card, .theme-light .card { background-color: var(--surf) !important; border: 1px solid var(--line2) !important; border-radius: var(--radius-card) !important; box-shadow: var(--card-sh) !important; } .dark-style .card, .theme-dark .card { background-color: var(--coal) !important; border: 1px solid var(--line2) !important; border-radius: var(--radius-card) !important; box-shadow: var(--card-sh) !important; } /* ── Folio Pager ─────────────────────────────────────────────────────────── */ .evc-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 13px 22px; border-top: 1px solid var(--line2); background: var(--table-band, var(--surf)); } .evc-pager-count { font-family: var(--font-sans); font-size: 12.5px; text-transform: uppercase; color: var(--faint); letter-spacing: 0.04em; } .evc-pager-count .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } .evc-pager-nav { display: flex; align-items: center; gap: 4px; } .evc-pager-btn { height: 32px; min-width: 32px; border-radius: var(--radius-btn); border: none; background: transparent; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s, color 0.15s; } .evc-pager-btn:hover:not(:disabled) { color: var(--txt); background-color: var(--surf3); } .evc-pager-btn:disabled { opacity: 0.35; cursor: default; } .evc-pager-btn.active, .light-style .evc-pager-btn.active, .theme-light .evc-pager-btn.active, .dark-style .evc-pager-btn.active, .theme-dark .evc-pager-btn.active { background: var(--acc) !important; color: var(--acc-ink) !important; font-weight: 700; border-radius: var(--radius-btn) !important; } .evc-pager-gap { min-width: 34px; text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--dim); } .evc-pager-perpage { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-family: var(--font-sans); font-size: 12.5px; color: var(--dim); } .evc-pager-label { white-space: nowrap; } .evc-pager-dropdown .obs-dropdown-trigger { min-height: 30px !important; height: 30px !important; font-size: 12.5px !important; border-radius: var(--radius-ctl) !important; }