. Scope overrides to one page * with that class so they don't leak elsewhere. * * Current page classes: * .dashboard-page Dashboard (app/Filament/Pages/Dashboard.php) * .task-board-page Tasks (app/Filament/Pages/TaskBoard.php - Flowforge Kanban board, no .fi-ta-* table markup) * .quote-board-page Quotes (app/Filament/Pages/QuoteBoard.php) * .gist-board-page Gists (app/Filament/Pages/GistBoard.php) * .sla-dashboard-page SLA Dashboard (app/Filament/Pages/SlaDashboard.php) * .manage-settings-page Manage Settings * .screen-grab-page Screen Grab * .hosting-proposal-page Hosting Proposal editor * .sites-list-page Sites (Manage > Sites) * .clients-list-page Clients (Manage > Clients) * .servers-list-page Servers (Manage > Servers) * .tags-list-page Tags (Manage > Tags) * * Some pages also set a class on itself via $extraBodyAttributes * (a different mechanism to getPageClasses() - use this when you need to * scope styles beyond just the .fi-page wrapper, e.g. the sidebar/topbar): * .gist-board-body Gists (app/Filament/Pages/GistBoard.php) * .sla-dashboard-body SLA Dashboard (app/Filament/Pages/SlaDashboard.php) * * Useful Filament table class names (present in the compiled bundle, * safe to target directly): .fi-ta-row, .fi-ta-cell, .fi-ta-cell-content, * .fi-ta-col, .fi-ta-header-cell, .fi-ta-actions, .fi-ta-text-item. */ /* Inactive Quote rows render faded + grayscale (toggled via ->recordClasses() in QuoteBoard). */ .fi-ta-row.is-inactive { opacity: 0.5; filter: grayscale(1); } /* Example: make the first column wider on the Quote Board table. .quote-board-page .fi-ta-cell:first-child { width: 40%; } */ .quote-board-page .fi-ta-row.is-active { background:#F7F0E6 } .quote-board-page .fi-ta-row.is-inactive .fi-ta-text-item { padding-top: 4px; padding-bottom: 4px; } .quote-board-page .active-title { font-weight:bold; font-size:18px; } .quote-board-page .active-hours { font-weight:bold; font-size:24px; } /* Gist view modal: click-to-copy code blocks and the auto-generated variable-substitution inputs (see resources/views/filament/gist-content.blade.php). */ .gist-copyable { cursor: pointer; transition: background-color 0.15s ease; } .gist-copyable:hover { background: #f3f4f6; } .gist-vars-panel { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #f9fafb; } .gist-vars-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #4b5563; text-transform: capitalize; } .gist-vars-field input { font-size: 13px; font-weight: 400; text-transform: none; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 0.375rem; min-width: 160px; } .gist-board-body .fi-section-content button {font-weight:bold} .gist-board-body .gist-content-body pre {background:#f5f2f0;padding:1rem;margin:1rem 0} .gist-board-body .gist-content-body p {margin-bottom:1rem} .gist-board-body .fi-modal-heading {font-size:20px;} /* Gist edit form: the TinyMCE editor replaces a plain Textarea (see GistForm.php + public/js/gist-tinymce.js). Filament's textarea wrapper has a small fixed height sized for a plain textarea - let TinyMCE's own UI size itself instead. */ .gist-tinymce-wrapper { height: auto !important; overflow: visible !important; } /* Gist Board: offset the tag jump-link anchors so a scrolled-to section doesn't end up hidden under Filament's fixed topbar (.fi-topbar, 64px). */ .gist-section-anchor { scroll-margin-top: 80px; } /* Dashboard stat panels (SiteBillingOverview, SlaBillingOverview, QuotePipelineOverview widgets). Each Stat sets a --stat-accent custom property via ->extraAttributes() - Stat's own ->color() has no visual effect in this Filament version (confirmed by reading the compiled stat.blade.php - it's simply not used in the template), so per-stat colour has to come through this way instead. */ .dashboard-page .fi-wi-stats-overview-stat { --stat-accent: #9ca3af; position: relative; padding-left: 20px; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: box-shadow 0.15s ease, transform 0.15s ease; overflow: hidden; } .dashboard-page .fi-wi-stats-overview-stat:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .dashboard-page .fi-wi-stats-overview-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--stat-accent); } .dashboard-page .fi-wi-stats-overview-stat-label-ctn { display: flex; align-items: center; gap: 6px; } .dashboard-page .fi-wi-stats-overview-stat-label-ctn svg { width: 16px; height: 16px; color: var(--stat-accent); flex-shrink: 0; } .dashboard-page .fi-wi-stats-overview-stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; } .dashboard-page .fi-wi-stats-overview-stat-value { font-size: 26px; font-weight: 700; color: #111827; margin-top: 2px; } .sla-dashboard-body .fi-modal .fi-section {margin-bottom:6px} /* Login / password-reset pages: Filament's "simple" auth layout wrapper. Full-page background image behind the login card. */ body:has(.fi-simple-layout) { background-image: url('/images/login-bg.webp'); background-size: cover; background-position: center; background-attachment: fixed; } /* Manage Settings: sections are all direct children of one embedded schema render, so the form's own space-y utility doesn't reach between them - add the gap directly. */ .manage-settings-page .fi-section + .fi-section { margin-top: 1.5rem; } /* Table search box on listing pages - Filament's default renders it at its own intrinsic width (no explicit width rule of its own); double it so it's easier to see what you've typed on a long query. */ .fi-ta-search-field { width: 24rem; max-width: 100%; } .fi-ta-search-field .fi-input-wrp { width: 100%; }