/* These styles are generated from project.scss. */ /* ============================================================================= zinc-deep theme A darker variant of Tabler's zinc palette. The light end of the scale is preserved so text stays readable; the dark end is pushed significantly deeper so backgrounds, sidebars, and cards are noticeably darker. Usage: set data-bs-theme-base="zinc-deep" on alongside data-bs-theme="dark" ============================================================================= */ [data-bs-theme-base='zinc-deep'], [data-theme-base='zinc-deep'] { /* Light end — kept close to zinc so foreground text remains legible */ --tblr-gray-50: #f4f4f5; --tblr-gray-100: #e4e4e7; --tblr-gray-200: #d4d4d8; --tblr-gray-300: #a1a1aa; --tblr-gray-400: #71717a; --tblr-gray-500: #52525b; /* Dark end — shifted ~2 stops darker than zinc for deeper backgrounds */ --tblr-gray-600: #27272a; --tblr-gray-700: #1c1c1f; --tblr-gray-800: #111113; --tblr-gray-900: #0a0a0c; --tblr-gray-950: #050506; } /* Shared indigo gradient — applied to .page-wrapper in the dashboard layout */ .page-wrapper { background: linear-gradient(to bottom, rgba(99, 102, 241, 0.03), var(--tblr-body-bg)); } /* .ghost — transparent container, no border or shadow, cascades to nested cards/tables */ .ghost, .ghost .card, .ghost .card-header, .ghost .card-footer, .ghost .container, .ghost .container-xl, .ghost .container-fluid, .ghost .navbar, .ghost .navbar-vertical, .ghost .dataTable, .ghost .dataTables_wrapper { background-color: transparent !important; border: none !important; box-shadow: none !important; } .alert-debug { color: black; background-color: white; border-color: #d6e9c6; } .alert-error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; } /* ============================================================================= Collapsible vertical sidebar (ported from tabler/tabler PR #2645) ============================================================================= */ :root { --sidebar-narrow-width: 3.5rem; } /* Brand row: give it the same height as the top navbar so Dromos aligns with the page header */ .navbar-brand-row { min-height: var(--tblr-navbar-height, 3.5rem); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-inline-start: 1rem; padding-inline-end: 0.5rem; } /* Brand row: hide icon-only logo by default */ .navbar-brand-row .navbar-brand-icon-only { display: none !important; } /* Section header labels inside nav */ .nav-link-header { display: block; padding: 0.5rem 0.75rem 0.25rem; font-size: 0.75rem; font-weight: var(--tblr-font-weight-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-text-secondary); } /* User footer pinned to sidebar bottom */ .navbar-footer { margin-top: auto; border-top: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-navbar-border-color); } .navbar-footer .navbar-footer-trigger { display: flex; align-items: center; width: 100%; padding: 0.75rem 0.75rem; color: var(--tblr-navbar-color); text-decoration: none; border-radius: 0; transition: background-color 0.3s; } .navbar-footer .navbar-footer-trigger:hover { background-color: var(--tblr-navbar-active-bg); color: var(--tblr-navbar-color); } .navbar-footer .navbar-footer-info { flex: 1; min-width: 0; overflow: hidden; } /* Smooth collapse transition for sidebar and content */ @media (min-width: 992px) { html.sidebar-animate .navbar-vertical.navbar-expand-lg { transition: width 0.2s ease; } html.sidebar-animate .page { transition: padding-inline-start 0.2s ease; } } /* Narrow state — active at lg breakpoint, matching navbar-expand-lg */ @media (min-width: 992px) { .navbar-vertical.navbar-expand-lg.navbar-narrow { width: var(--sidebar-narrow-width); overflow-y: auto; overflow-x: hidden; } .navbar-vertical.navbar-expand-lg.navbar-narrow ~ .page { padding-inline-start: var(--sidebar-narrow-width); } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-brand-row { justify-content: center; flex-direction: column; align-items: center; padding-inline-start: 0; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-brand-row .navbar-brand-full { display: none !important; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-brand-row .navbar-brand-icon-only { display: flex !important; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-brand-row .sidebar-header-actions { flex-direction: column; margin-inline-start: 0 !important; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse { flex-direction: column; align-items: stretch; justify-content: flex-start; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse > .navbar-nav { width: 100%; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse .nav-link { justify-content: center; padding-inline-start: 0; padding-inline-end: 0; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse .nav-link .nav-link-icon { margin-inline-end: 0; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse .nav-link .nav-link-title, .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse .nav-link .badge { display: none; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse .nav-link-header { display: none; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse .dropdown-toggle::after { display: none; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse .dropdown-menu { position: absolute !important; inset-inline-start: 100%; inset-inline-end: auto; top: 0; margin: 0; background: var(--tblr-navbar-bg); border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color); box-shadow: var(--tblr-shadow); } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-collapse .dropdown-menu .dropdown-item { padding-inline-start: 0.75rem; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-footer .navbar-footer-trigger { justify-content: center; padding-inline-start: 0; padding-inline-end: 0; } .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-footer .navbar-footer-info, .navbar-vertical.navbar-expand-lg.navbar-narrow .navbar-footer .icon.text-secondary.ms-auto { display: none; } }