/* * Lynns Travel admin theme — loaded after Filament's own styles. * * Filament ships its CSS inside cascade layers, so these plain (unlayered) * rules win without !important. Colours come from Filament's own variables * (--gray-*, --primary-*), which the panel provider sets to neutral greys and * the Lynns red, so this file never hard-codes a palette. * * Light-mode-only tweaks are scoped with :root:not(.dark); Filament toggles * dark mode with a `dark` class on . */ /* ------------------------------------------------------------------------ * Page * --------------------------------------------------------------------- */ :root:not(.dark) .fi-body { background-color: var(--gray-100); } .fi-header-heading { letter-spacing: -0.025em; } /* ------------------------------------------------------------------------ * Header — the logo/menu row and the search row read as one white surface, * finished like the cards: a hairline and a soft shadow underneath, no heavy * rule. The search row sits outside Filament's sticky topbar container (see * global-search-bar.blade.php), so the two rows are styled separately. * --------------------------------------------------------------------- */ /* Row one: logo | centred menu | user menu. Filament's ring is replaced by a faint divider, so the two rows join without a hard line. */ .fi-topbar { box-shadow: none; --tw-ring-shadow: 0 0 #0000; border-bottom: 1px solid var(--gray-100); } :root.dark .fi-topbar { border-bottom-color: rgb(255 255 255 / 0.05); } @media (min-width: 1024px) { .fi-topbar { position: relative; } .fi-topbar .fi-topbar-nav-groups { position: absolute; left: 50%; transform: translateX(-50%); margin-inline: 0; } } /* Menu items are pills; the current page is a soft red tint. */ .fi-topbar .fi-topbar-item-btn { border-radius: 9999px; padding-inline: 0.875rem; } :root:not(.dark) .fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn { background-color: var(--primary-50); } .fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-label { font-weight: 600; } /* Only one visible search field: hide Filament's topbar copy. */ .fi-topbar .fi-topbar-end .fi-global-search-ctn { display: none; } /* Row two: search, full width. */ .lt-search-bar { position: relative; z-index: 20; padding: 0.5rem 1rem 0.75rem; background-color: #fff; border-bottom: 1px solid var(--gray-200); box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.06); } :root.dark .lt-search-bar { background-color: var(--gray-900); border-bottom-color: rgb(255 255 255 / 0.1); } .lt-search-bar .fi-global-search, .lt-search-bar .fi-global-search-ctn, .lt-search-bar .fi-global-search-field { width: 100%; } /* The field is a filled grey pill at rest, and turns white with Filament's red focus ring when in use. Only the resting state is overridden, so the focus ring (also a box-shadow) is left alone. */ .lt-search-bar .fi-input-wrp { border-radius: 9999px; } :root:not(.dark) .lt-search-bar .fi-input-wrp:not(:focus-within) { background-color: var(--gray-100); box-shadow: none; } :root:not(.dark) .lt-search-bar .fi-input-wrp:not(:focus-within):hover { background-color: var(--gray-200); } .lt-search-bar .fi-input-wrp input { background-color: transparent; } /* Results get the whole width: a result carries more than a name. */ .lt-search-bar .fi-global-search-results-ctn { inset-inline: 0; width: 100%; max-width: none; max-height: 32rem; } /* ------------------------------------------------------------------------ * Cards — sections, tables, widgets, modals. A hairline border and a soft * shadow instead of Filament's ring, with slightly rounder corners. * --------------------------------------------------------------------- */ :root:not(.dark) .fi-section:not(.fi-section-not-contained), :root:not(.dark) .fi-ta-ctn, :root:not(.dark) .fi-wi-stats-overview-stat { box-shadow: 0 0 0 1px var(--gray-200), 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 2px 8px -2px rgb(0 0 0 / 0.05); } .fi-section:not(.fi-section-not-contained), .fi-ta-ctn, .fi-wi-stats-overview-stat { border-radius: 0.875rem; } .fi-modal-window { border-radius: 1rem; } /* ------------------------------------------------------------------------ * Tables * --------------------------------------------------------------------- */ /* Quiet, small-caps column headings on a tinted band. */ :root:not(.dark) .fi-ta-table > thead > tr { background-color: var(--gray-50); } .fi-ta-header-cell { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); } /* Every row highlights under the pointer, not just clickable ones. */ :root:not(.dark) .fi-ta-row:hover { background-color: var(--gray-50); } :root.dark .fi-ta-row:hover { background-color: rgb(255 255 255 / 0.03); } /* ------------------------------------------------------------------------ * Controls * --------------------------------------------------------------------- */ .fi-btn { border-radius: 0.625rem; font-weight: 600; } .fi-input-wrp { border-radius: 0.625rem; } .fi-badge { border-radius: 9999px; } /* ------------------------------------------------------------------------ * Login * --------------------------------------------------------------------- */ :root:not(.dark) .fi-simple-layout { background-color: var(--gray-100); } /* The card gets a brand-red cap. */ .fi-simple-main { border-top: 4px solid var(--primary-600); } /* A bigger logo on the login page, where there's room. */ .fi-simple-header .fi-logo { height: 3rem !important; }