/* * Blue-White Credit - admin panel skin * --------------------------------------------------------------------------- * Copy to public/css/bw-admin.css. Plain CSS on purpose: it is loaded through * a render hook, so there is no Vite build step and no npm install to keep * working. Everything here is either something Filament does not theme, or a * detail carried over from the Credit App Express screens. * * Dark mode is handled by Filament, which puts `class="dark"` on . Every * rule below that sets a colour has a `.dark` counterpart. */ :root { --bw-red: #f72527; --bw-blue: #005eb8; --bw-field: #ebedf0; --bw-label: #878787; } /* --------------------------------------------------------------------------- Sidebar identity card --------------------------------------------------------------------------- */ .bw-identity { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.25rem 1rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgb(0 0 0 / 0.06); } .dark .bw-identity { border-bottom-color: rgb(255 255 255 / 0.08); } .bw-identity__badge { display: flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 9999px; background: var(--bw-red); color: #fff; font-weight: 600; font-size: 0.875rem; line-height: 1; } .bw-identity__text { display: flex; flex-direction: column; min-width: 0; } .bw-identity__company { font-size: 0.875rem; font-weight: 600; color: rgb(17 24 39); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .bw-identity__company { color: rgb(243 244 246); } .bw-identity__role { font-size: 0.6875rem; color: var(--bw-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Collapsed sidebar: hide the words, keep the bubble. */ .fi-sidebar:not(.fi-sidebar-open) .bw-identity__text { display: none; } .fi-sidebar:not(.fi-sidebar-open) .bw-identity { justify-content: center; } /* --------------------------------------------------------------------------- Navigation - red left border on the active item, as before --------------------------------------------------------------------------- */ .fi-sidebar-item-active .fi-sidebar-item-button { border-left: 3px solid var(--bw-red); border-top-left-radius: 0; border-bottom-left-radius: 0; background-color: rgb(0 0 0 / 0.04); } .dark .fi-sidebar-item-active .fi-sidebar-item-button { background-color: rgb(255 255 255 / 0.06); } .fi-sidebar-item-button { border-left: 3px solid transparent; } /* --------------------------------------------------------------------------- Stats cards - the five across the top of Home. Centre them, and let the number carry the card the way the old dashboard did. --------------------------------------------------------------------------- */ /* * Why this exists: the widget asks for five columns, and Filament builds that * class name by string concatenation ("xl:grid-cols-" . $columns). Tailwind * only compiles class names it can see literally in the source, so * xl:grid-cols-5 is never emitted into Filament's pre-compiled stylesheet and * the cards fall back to one per row. Setting the grid here by hand is the * fix that does not require a Vite theme build. * * Both selectors point at the same element - the -ctn class is the stats * container's own name, the descendant rule is a belt-and-braces fallback in * case that class is renamed in a future Filament release. Nothing else inside * a stats widget is a grid, so the broader selector is safe. */ .fi-wi-stats-overview .fi-wi-stats-overview-stats-ctn, .fi-wi-stats-overview .grid { gap: 1rem; } @media (min-width: 640px) { .fi-wi-stats-overview .fi-wi-stats-overview-stats-ctn, .fi-wi-stats-overview .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .fi-wi-stats-overview .fi-wi-stats-overview-stats-ctn, .fi-wi-stats-overview .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* The row of five, as on the old dashboard. */ @media (min-width: 1280px) { .fi-wi-stats-overview .fi-wi-stats-overview-stats-ctn, .fi-wi-stats-overview .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Five columns is roughly 190px each, and "$1,000,000" at 2rem does not fit in that. Step the number down once the cards get narrow. */ .fi-wi-stats-overview .fi-wi-stats-overview-stat-value { font-size: 1.5rem; } } .fi-wi-stats-overview-stat { text-align: center; } .fi-wi-stats-overview-stat-label { font-size: 0.8125rem; font-weight: 500; color: rgb(55 65 81); } .dark .fi-wi-stats-overview-stat-label { color: rgb(209 213 219); } .fi-wi-stats-overview-stat-value { font-size: 2rem; font-weight: 400; letter-spacing: -0.01em; } .fi-wi-stats-overview-stat-description { font-size: 0.6875rem; color: var(--bw-label); } /* --------------------------------------------------------------------------- Application detail modal - the tab rail down the left --------------------------------------------------------------------------- */ @media (min-width: 768px) { .bw-detail-tabs > .fi-tabs { flex-direction: column; align-items: stretch; float: left; width: 11rem; margin-right: 1.25rem; gap: 0.125rem; background: transparent; box-shadow: none; padding: 0; } .bw-detail-tabs > .fi-tabs .fi-tabs-item { justify-content: flex-start; border-left: 3px solid transparent; border-radius: 0.375rem; } .bw-detail-tabs > .fi-tabs .fi-tabs-item-active { border-left-color: var(--bw-red); background-color: rgb(0 0 0 / 0.04); } .dark .bw-detail-tabs > .fi-tabs .fi-tabs-item-active { background-color: rgb(255 255 255 / 0.06); } } /* --------------------------------------------------------------------------- References column - the little building icons --------------------------------------------------------------------------- */ .bw-ref-icons { display: flex; align-items: center; gap: 0.25rem; } .bw-ref-icons svg { width: 1.125rem; height: 1.125rem; } /* Unopened invitations show a filled red envelope, opened ones a grey one. Same signal your Active Applications list gives today. */ .bw-envelope--unopened { color: var(--bw-red); } .bw-envelope--opened { color: rgb(148 163 184); } /* --------------------------------------------------------------------------- Notes stream --------------------------------------------------------------------------- */ .bw-note { max-width: 32rem; padding: 0.5rem 0.875rem; border-radius: 0.5rem; background: #eef2f7; color: rgb(51 65 85); font-size: 0.875rem; } .dark .bw-note { background: rgb(255 255 255 / 0.06); color: rgb(226 232 240); } .bw-note--mine { background: #e0edff; } .dark .bw-note--mine { background: rgb(0 94 184 / 0.25); } .bw-note__meta { margin-top: 0.125rem; font-size: 0.6875rem; color: var(--bw-label); } /* --------------------------------------------------------------------------- Edit Application - the toggleable question blocks --------------------------------------------------------------------------- */ .bw-block { position: relative; border-radius: 0.75rem; padding: 1rem 1rem 1rem 2.75rem; background: rgb(249 250 251); border: 1px solid rgb(0 0 0 / 0.05); } .dark .bw-block { background: rgb(255 255 255 / 0.03); border-color: rgb(255 255 255 / 0.08); } .bw-block--off { opacity: 0.55; } .bw-block__toggle { position: absolute; left: 0.875rem; top: 1.125rem; } /* Disabled preview fields, so the shape of the applicant's form is readable without any of it being editable here. */ .bw-preview-field { display: block; width: 100%; height: 2.25rem; border-radius: 0.375rem; background: var(--bw-field); border: 0; } .dark .bw-preview-field { background: rgb(255 255 255 / 0.07); } .bw-preview-label { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; color: var(--bw-label); } /* --------------------------------------------------------------------------- Layout utilities - SCOPED to .bw-view --------------------------------------------------------------------------- Filament ships a PRE-COMPILED stylesheet built by scanning its own source. It never sees this project's Blade files, so a Tailwind class used in a custom view that Filament does not happen to use itself simply does not exist - the markup renders with no layout. Everything below is scoped under .bw-view, and that is not cosmetic. An earlier version defined these globally and broke Filament's own page header: its markup is `flex flex-col ... sm:flex-row sm:items-center` and defining the base classes without every responsive override left the header stuck in column mode with its contents centred. So: these apply ONLY inside elements carrying .bw-view, which is on the root of each custom view. Filament's own markup is untouched. If you add a Tailwind class to a custom Blade view and it does nothing, add it here - or switch to a built theme via `php artisan make:filament-theme`, which makes Tailwind scan everything and removes the need for this block. --------------------------------------------------------------------------- */ .bw-view .grid { display: grid; } .bw-view .flex { display: flex; } .bw-view .flex-1 { flex: 1 1 0%; } .bw-view .flex-col { flex-direction: column; } .bw-view .flex-row { flex-direction: row; } .bw-view .flex-wrap { flex-wrap: wrap; } .bw-view .items-start { align-items: flex-start; } .bw-view .items-center { align-items: center; } .bw-view .items-end { align-items: flex-end; } .bw-view .justify-between { justify-content: space-between; } .bw-view .min-w-0 { min-width: 0; } .bw-view .shrink-0 { flex-shrink: 0; } .bw-view .overflow-x-auto { overflow-x: auto; } .bw-view .whitespace-nowrap { white-space: nowrap; } .bw-view .gap-1 { gap: 0.25rem; } .bw-view .gap-2 { gap: 0.5rem; } .bw-view .gap-3 { gap: 0.75rem; } .bw-view .gap-4 { gap: 1rem; } .bw-view .gap-6 { gap: 1.5rem; } .bw-view .gap-8 { gap: 2rem; } .bw-view .gap-x-6 { column-gap: 1.5rem; } .bw-view .gap-y-3 { row-gap: 0.75rem; } .bw-view .col-span-full { grid-column: 1 / -1; } .bw-view .last\:mb-0:last-child { margin-bottom: 0; } @media (min-width: 640px) { .bw-view .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bw-view .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 768px - the breakpoint the detail screen's tab rail depends on */ @media (min-width: 768px) { .bw-view .md\:w-48 { width: 12rem; } .bw-view .md\:flex-col { flex-direction: column; } .bw-view .md\:flex-row { flex-direction: row; } .bw-view .md\:items-start { align-items: flex-start; } .bw-view .md\:overflow-visible { overflow: visible; } } @media (min-width: 1024px) { .bw-view .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bw-view .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bw-view .lg\:col-span-2 { grid-column: span 2 / span 2; } }