/* ------------------------------------------------------- Własne style panelu administracyjnego - bez przebudowy. Edytuj ten plik bezpośrednio i odśwież przeglądarkę. Filament używa CSS variables w formacie: R, G, B (bez rgb()) Nazwy zmiennych kolorów: --gray-50 .. --gray-950 --primary-50 .. --primary-950 --danger-*, --info-*, --success-*, --warning-* primary-500 = #13335a → primary-600 = #112e51 Przydatne selektory: .fi-ta-row - wiersz tabeli .fi-ta-header-cell - nagłówek kolumny .fi-sidebar - lewy pasek nawigacji .fi-topbar - górny pasek ------------------------------------------------------- */ /* ------------------------------------------------------- Paleta gray - nadpisanie przez CSS variables. Dotyczy zarówno tła jak i tekstu (Filament używa tych samych zmiennych dla bg-gray-* i text-gray-*). text-primary-* działa normalnie - używa --primary-*. gray-50/100: niebieskie tło strony gray-200-950: skala Tailwind Slate (lekki niebieski odcień) primary-500 = #13335a → primary-600 = #112e51 ------------------------------------------------------- */ :root { --gray-50: 248, 249, 255; /* #f8f9ff - tło strony */ --gray-100: 239, 244, 255; /* #eff4ff - tło hover / stripe */ --gray-200: 226, 232, 240; /* slate-200 */ --gray-300: 203, 213, 225; /* slate-300 */ --gray-400: 148, 163, 184; /* slate-400 - placeholder */ --gray-500: 100, 116, 139; /* slate-500 - muted */ --gray-600: 71, 85, 105; /* slate-600 - secondary text */ --gray-700: 51, 65, 85; /* slate-700 */ --gray-800: 30, 41, 59; /* slate-800 - główny tekst */ --gray-900: 15, 23, 42; /* slate-900 - nagłówki */ --gray-950: 2, 6, 23; /* prawie czarny */ } /* ------------------------------------------------------- Modals z formularzem - tło jak strona; potwierdzenia (brak .fi-form w środku) zostają białe. ------------------------------------------------------- */ /* Modale z formularzem ale bez ikony (alert/akceptacja mają fi-modal-icon) */ .fi-modal-window:has(.fi-fo-component-ctn):not(:has(.fi-modal-icon)) { background-color: rgb(var(--gray-50)) !important; } /* ------------------------------------------------------- Disabled buttons - wypłowiały wygląd przez odsycenie. ------------------------------------------------------- */ button[disabled], button[disabled="disabled"] { filter: saturate(0.5) opacity(0.5) !important; cursor: not-allowed !important; pointer-events: auto !important; } /* ------------------------------------------------------- Nav sidebar - jaśniejsza paleta tekstów i ikon. Bazuje na gray-700 = #DCE9FF (user), kroki ±15%. Ikony dziedziczą kolor przez currentColor automatycznie. ------------------------------------------------------- */ .fi-sidebar { /* --gray-400: 135, 143, 157; #878f9d - bardzo muted --gray-500: 159, 168, 184; #9fa8b8 - etykiety grup --gray-600: 187, 198, 217; #bbc6d9 - nieaktywne secondary */ --gray-700: 90, 103, 125; /* #dce9ff - nieaktywne itemy */ /* --gray-800: 231, 240, 255; #e7f0ff - lekko wyróżnione --gray-900: 243, 247, 255; #f3f7ff - najbardziej widoczne */ } /* ------------------------------------------------------- Approve button — wizualne wyszarzenie gdy formularz ma niezapisane zmiany. Klasa ecr-dirty ustawiana przez JS na , dzięki czemu przeżywa Livewire DOM morph. NIE stosujemy pointer-events:none bo klik musiał dojść do interceptora JS; kursor not-allowed sygnalizuje blokadę. ------------------------------------------------------- */ body.ecr-dirty [data-ecr-approve] { opacity: 0.5 !important; cursor: not-allowed !important; } /* Nav badge - ciemne tło + biały tekst jak przyciski Utwórz */ .fi-sidebar-item-button .fi-badge { font-weight: 700 !important; font-size: 0.875rem !important; --c-50: var(--primary-600) !important; /* tło → primary-600 */ --c-400: 255, 255, 255 !important; /* tekst dark-mode */ --c-600: 255, 255, 255 !important; /* tekst light-mode */ } /* ------------------------------------------------------- Przycisk "Zaloguj się" - WIELKIE LITERY tylko na ekranie logowania/resetu hasła (.fi-simple-layout). Inne przyciski w panelu zostają bez wymuszonego text-transform. ------------------------------------------------------- */ .fi-simple-layout .fi-btn-color-primary .fi-btn-label { text-transform: uppercase; } /* ------------------------------------------------------- Logo na ekranie logowania (i reset hasła) - szerokość 400px. Panel::brandLogoHeight() ustawia wysokość inline stylem na , więc żeby wymusić szerokość trzeba nadpisać height przez !important (inline ma wyższą specyficzność). Logo w topbarze (poza .fi-simple-header) zostaje bez zmian. ------------------------------------------------------- */ .fi-simple-header .fi-logo { width: 400px !important; height: auto !important; max-width: 100%; } /* ------------------------------------------------------- Przełącznik języka PL/EN w topbarze, bezpośrednio przy ikonie usera (nie w dropdownie). Dwie "piguły" jedna pod drugą. Wybrany język - ciemne tło (primary-600) i biały (negatywowy) tekst; drugi - jasna obwódka. ------------------------------------------------------- */ .fi-lang-switcher { display: flex; flex-direction: column; align-items: stretch; gap: 0.125rem; } .fi-lang-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; padding: 0.0625rem 0.3125rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.02em; line-height: 0.875rem; border-radius: 0.25rem; border: 1px solid rgb(var(--gray-300)); color: rgb(var(--gray-700)); background-color: transparent; text-decoration: none; } .fi-lang-pill:hover { border-color: rgb(var(--primary-500)); color: rgb(var(--primary-600)); } .fi-lang-pill-active, .fi-lang-pill-active:hover { background-color: rgb(var(--primary-600)); border-color: rgb(var(--primary-600)); color: #fff; }