/* * IX-Verio-Look fuer das Admin-Panel * ---------------------------------- * Bringt das ERP-Admin auf die Oberflaeche der Produktfamilie (IX Verio): * dunkle Seitenleiste mit Logo und Gold-Aktivmarker, schlanke Topbar, weisse * Arbeitsflaeche mit Hairline-Raendern statt Schatten. * * Warum eine eigene Datei statt eines Filament-Custom-Themes: * das Panel laeuft mit den mitgelieferten, fertig kompilierten Filament-Assets * (public/css/filament) — ein Theme haette einen npm-Build beim Deploy noetig * gemacht. Diese Datei wird im AdminPanelProvider ueber einen Render-Hook * eingebunden und liegt damit im HINTER Filaments Stylesheet. * * Wichtig fuer Aenderungen: Filaments Regeln stehen komplett in * @layer components. Unlayered CSS — also alles hier — gewinnt gegen sie, * unabhaengig von der Spezifitaet. Deshalb reichen einfache Selektoren; aus * demselben Grund muessen die Selektoren eng bleiben, damit sie nicht * versehentlich Tailwind-Utilities in eigenen Blade-Seiten ueberschreiben. * * Farben und Regeln stammen aus dem IX-Verio-Designsystem * (~/heizkosten/design-system/ix-verio/MASTER.md). */ :root { --ix-gold: #f5a800; --ix-gold-hell: #ffce5c; --ix-gold-dunkel: #9a7100; /* Gold pur hat auf Weiss keinen AA-Kontrast */ --ix-schwarz: #111111; --ix-linie: #e5e5e5; --ix-linie-dunkel: rgba(255, 255, 255, 0.1); --ix-topbar-hoehe: 3.5rem; } /* ========================================================================== 1. Grundflaeche — weiss statt grau, Karten tragen Hairlines ========================================================================== */ .fi-body { background-color: #ffffff; } /* Topbar rechnet Filament mit 4rem; unsere ist schlanker, sonst entsteht auf jeder Seite ein halber Zentimeter Leerscroll. */ .fi-main-ctn { min-height: calc(100dvh - var(--ix-topbar-hoehe)); } /* Flaechen: kein Schatten mehr, nur noch eine feine Linie. Modals und Dropdowns behalten ihren Schatten bewusst — sie schweben wirklich. */ .fi-section:not(.fi-section-not-contained):not(.fi-aside), .fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-tabs:not(.fi-contained), .fi-sc-tabs.fi-contained, .fi-sc-wizard.fi-contained, .fi-callout { border-radius: 0.75rem; border: 1px solid var(--ix-linie); box-shadow: none; } .dark .fi-section:not(.fi-section-not-contained):not(.fi-aside), .dark .fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn, .dark .fi-ta-ctn, .dark .fi-wi-stats-overview-stat, .dark .fi-tabs:not(.fi-contained), .dark .fi-sc-tabs.fi-contained, .dark .fi-sc-wizard.fi-contained, .dark .fi-callout { border-color: var(--ix-linie-dunkel); } /* Zahlen gehoeren in Tabellen auf gleiche Breite (Verio-Regel). */ .fi-ta-text-item-label, .fi-ta-cell { font-variant-numeric: tabular-nums; } /* ========================================================================== 2. Topbar — schlank, weiss, Hairline statt Goldbalken ========================================================================== */ .fi-topbar { min-height: var(--ix-topbar-hoehe); border-bottom: 1px solid var(--ix-linie); box-shadow: none; } .dark .fi-topbar { border-bottom-color: var(--ix-linie-dunkel); } /* Angemeldete Kollegen: dezenter Chip statt gruener Pille. */ .ix-online-users { display: flex; align-items: center; gap: 0.375rem; padding-inline: 0.75rem; flex-wrap: wrap; } .ix-online-users .ix-online-user { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1.25rem; color: #525252; background-color: #fafafa; border: 1px solid var(--ix-linie); border-radius: 999px; padding: 0.0625rem 0.5rem; white-space: nowrap; } .ix-online-users .ix-online-user::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px; background-color: #16a34a; flex: none; } .dark .ix-online-users .ix-online-user { color: #d4d4d4; background-color: rgba(255, 255, 255, 0.05); border-color: var(--ix-linie-dunkel); } /* Auf dem Handy ist in der Topbar kein Platz dafuer. */ @media (max-width: 48rem) { .ix-online-users { display: none; } } /* Anmelde- und 2FA-Seiten stehen ohne Leiste und ohne Topbar da — dort traegt das Logo die Marke allein und darf groesser sein als in der Topbar. !important, weil Filament die Hoehe (brandLogoHeight) als Inline-Style setzt. */ .fi-simple-layout .fi-logo { height: 3rem !important; } /* ========================================================================== 3. Seitenleiste — dunkel, ueber die volle Hoehe, Gold als Aktivmarker ========================================================================== */ .fi-sidebar { background-color: var(--ix-schwarz); } /* Filaments eigener Logo-Kopf entfaellt: er ist auf Weiss ausgelegt und auf dem Desktop ohnehin ausgeblendet. Der Markenkopf kommt aus dem Render-Hook panels::sidebar.start (AdminPanelProvider) und steht damit an derselben Stelle — auch in der mobilen Schublade. */ .fi-sidebar-header-ctn { display: none; } /* Das Logo laeuft bewusst ueber die volle Breite der Leiste (Wunsch Markus, 29.07.) — deshalb keine feste Hoehe, sondern Breite 100 % und Hoehe frei. */ .ix-sidebar-brand { display: flex; align-items: center; padding: 1rem 1.25rem 1.25rem; flex: none; } .ix-sidebar-brand a { display: block; width: 100%; } .ix-sidebar-brand img { width: 100%; height: auto; } .fi-sidebar-nav { padding-inline: 0.75rem; padding-block: 0.75rem 1.5rem; row-gap: 1.25rem; scrollbar-color: #3f3f3f transparent; } /* Gruppenkopf */ .fi-sidebar-group-label { color: #8f8f8f; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } .fi-sidebar-group-btn { padding-inline: 0.625rem; } .fi-sidebar-group-btn .fi-icon, .fi-sidebar-group-collapse-btn .fi-icon { color: #6b6b6b; } /* Eintraege — Masse 1:1 aus IX Verio (AppLayout.jsx, hauptNav): px-3 py-2, gap-2.5, text-sm, Grundgewicht 400 auf neutral-400, erst der aktive Eintrag wird weiss und halbfett. Vorher war hier alles 500 auf neutral-300 — dadurch wirkte das ERP-Menue schwerer als Verio. */ .fi-sidebar-item-btn { border-radius: 0.5rem; padding: 0.5rem 0.75rem; gap: 0.625rem; } .fi-sidebar-item-label { color: #a3a3a3; font-size: 0.875rem; font-weight: 400; } .fi-sidebar-item-btn > .fi-icon { color: #a3a3a3; width: 1rem; height: 1rem; } .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover, .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible { background-color: rgba(255, 255, 255, 0.05); /* Verio: hover:bg-white/5 */ } .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label, .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible > .fi-sidebar-item-label { color: #ffffff; } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: rgba(255, 255, 255, 0.1); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: #ffffff; font-weight: 500; } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--ix-gold); } /* Goldener Balken links am aktiven Eintrag (Verio-Aktivmarker). Masse wie in Verio: before:top-2 before:bottom-2 before:-left-3 before:w-0.5 */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before { content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: -0.75rem; width: 2px; border-radius: 999px; background-color: var(--ix-gold); } /* Punkt-Marker der Untereintraege in Gold statt Primaerfarbe. */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part { background-color: var(--ix-gold); } .fi-sidebar-item-grouped-border { color: rgba(255, 255, 255, 0.15); } /* Fusszeile der Leiste (Benachrichtigungen o. ae.) */ .fi-sidebar-footer .fi-sidebar-database-notifications-btn-label { color: #d4d4d4; } /* Scrollbalken der dunklen Leiste (WebKit) */ .fi-sidebar-nav::-webkit-scrollbar { width: 6px; } .fi-sidebar-nav::-webkit-scrollbar-thumb { background-color: #3f3f3f; border-radius: 999px; } /* ========================================================================== 4. App-Schale ab Desktop — Leiste ueber die volle Hoehe links, Topbar sitzt rechts daneben (Verio-Anordnung) ========================================================================== */ @media (min-width: 64rem) { .fi-body-has-topbar .fi-sidebar { position: fixed; top: 0; height: 100dvh; width: var(--sidebar-width); z-index: 40; /* ueber der Topbar (30) */ } /* Die Leiste liegt jetzt ausserhalb des Flusses — Inhalt und Topbar muessen den Platz selbst freihalten. */ .fi-body-has-topbar .fi-layout, .fi-body-has-topbar .fi-topbar-ctn { padding-inline-start: var(--sidebar-width); } /* Das Logo steht jetzt im Kopf der Leiste, nicht mehr in der Topbar. .fi-topbar-start enthaelt nur Logo und (hier nicht genutzte) Einklapp-Schalter. */ .fi-topbar-start { display: none; } }