/* ====================================================================== beprint Verwaltung – CSS-Overrides für das Filament-Admin-Panel ---------------------------------------------------------------------- Wird ueber einen RenderHook im AdminPanelProvider in den jeder Admin-Page gehaengt. Iteration ohne Build-Schritt: Datei aendern + Browser hart-refreshen (Strg+F5). Scope: alle Resource-Detail-(View-)Pages (`.fi-resource-view-record-page`). Listen, Edit-Formulare, Login etc. werden NICHT angefasst. ====================================================================== */ /* ---------------------------------------------------------------------- 1. Vertikale Abstaende reduzieren (~25–35%) ---------------------------------------------------------------------- */ /* Section-Padding: Filament default ist relativ luftig */ .fi-resource-view-record-page .fi-section-content, .fi-resource-view-record-page .fi-section-content-ctn { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; } .fi-resource-view-record-page .fi-section-header { padding-top: 0.875rem !important; padding-bottom: 0.625rem !important; } /* Gap zwischen Sections im Tab */ .fi-resource-view-record-page .fi-tabs-tab-pnl, .fi-resource-view-record-page .fi-tabs-tab-pnl > div { row-gap: 0.75rem !important; } /* Spacing zwischen Eintraegen innerhalb einer Section */ .fi-resource-view-record-page .fi-in-component-ctn { row-gap: 0.5rem !important; column-gap: 1.25rem !important; } /* ---------------------------------------------------------------------- 2. Label & Wert nebeneinander (wo es passt) ---------------------------------------------------------------------- Filament rendert pro Eintrag einen .fi-in-entry-wrp mit einem inneren `
`, das zwei Childs hat: Label-Container + Content-Container. Wir machen daraus ein 2-Spalten-Grid. Excludes (bleiben wie Default): - col-span-full Eintraege (Hero / lange Texte) - Eintraege mit RepeatableEntry, Actions oder text-lg (Hero) ---------------------------------------------------------------------- */ .fi-resource-view-record-page .fi-in-entry-wrp:not(.col-span-full):not(:has(.fi-in-repeatable-entry)):not(:has(.fi-ac)):not(:has(.text-lg)) > div:first-child { display: grid !important; grid-template-columns: minmax(140px, 11rem) 1fr !important; column-gap: 1rem !important; row-gap: 0 !important; align-items: baseline !important; } /* Label-Container im Inline-Modus: kein Bottom-Margin, an Baseline ausrichten */ .fi-resource-view-record-page .fi-in-entry-wrp:not(.col-span-full):not(:has(.fi-in-repeatable-entry)):not(:has(.fi-ac)):not(:has(.text-lg)) > div:first-child > div:first-child { margin: 0 !important; padding-top: 0.125rem; } /* ---------------------------------------------------------------------- 3. Visuelle Hierarchie ---------------------------------------------------------------------- */ /* Labels: dezent grau, kleinerer Schnitt, weniger Gewicht */ .fi-resource-view-record-page .fi-in-entry-wrp-label, .fi-resource-view-record-page .fi-in-entry-wrp-label > span { color: rgb(100 116 139) !important; /* slate-500 */ font-weight: 500 !important; font-size: 0.8125rem !important; /* ~13px */ line-height: 1.4 !important; } .dark .fi-resource-view-record-page .fi-in-entry-wrp-label, .dark .fi-resource-view-record-page .fi-in-entry-wrp-label > span { color: rgb(148 163 184) !important; /* slate-400 */ } /* Section-Heading: klar abgesetzt mit Border unten */ .fi-resource-view-record-page .fi-section > .fi-section-header { border-bottom: 1px solid rgb(226 232 240); /* slate-200 */ } .dark .fi-resource-view-record-page .fi-section > .fi-section-header { border-bottom-color: rgb(51 65 85); /* slate-700 */ } .fi-resource-view-record-page .fi-section-header-heading { font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: -0.005em; } /* Section-Description (Helfer-Text): kompakter */ .fi-resource-view-record-page .fi-section-header-description { font-size: 0.8rem !important; margin-top: 0.125rem; } /* ---------------------------------------------------------------------- 4. Hinweis-Boxen (Warn-/Fehler-Banner) in Custom-Blade-Templates ---------------------------------------------------------------------- Hintergrund: Filament generiert sein CSS nur fuer die Farb-Klassen, die in der Filament-Core verwendet werden. Standard-Tailwind-Farben wie `bg-amber-50` und auch viele Shades von `bg-warning-50`/`bg-danger-50` fehlen im Production-Build. Deshalb hier explizite Klassen. Genutzt in: - resources/views/filament/infolists/billing-preview.blade.php ---------------------------------------------------------------------- */ .beprint-notice-warning { border-radius: 0.5rem; border: 1px solid rgb(253 230 138); /* amber-200 */ background-color: rgb(255 251 235); /* amber-50 */ color: rgb(120 53 15); /* amber-900 */ padding: 0.75rem 1rem; } .beprint-notice-warning strong { font-weight: 600; } .beprint-notice-danger { border-radius: 0.5rem; border: 1px solid rgb(254 202 202); /* red-200 */ background-color: rgb(254 242 242); /* red-50 */ color: rgb(127 29 29); /* red-900 */ padding: 0.75rem 1rem; } .beprint-notice-danger strong { font-weight: 600; } .beprint-notice-info { border-radius: 0.5rem; border: 1px solid rgb(199 210 254); /* indigo-200 */ background-color: rgb(238 242 255); /* indigo-50 */ color: rgb(49 46 129); /* indigo-900 */ padding: 0.75rem 1rem; } .beprint-notice-info strong { font-weight: 600; } .dark .beprint-notice-warning { background-color: rgb(120 53 15 / 0.18); border-color: rgb(146 64 14 / 0.45); color: rgb(254 240 138); } .dark .beprint-notice-info { background-color: rgb(49 46 129 / 0.18); border-color: rgb(67 56 202 / 0.45); color: rgb(199 210 254); } .dark .beprint-notice-danger { background-color: rgb(127 29 29 / 0.18); border-color: rgb(153 27 27 / 0.45); color: rgb(254 202 202); }