/* Wygenerowano automatycznie: 2026-07-21 22:47:16 */ /* --- File: 1.fonts.css --- */ /* 1. FONTS.CSS - Ładowanie fontów. */ /* Dosis - Regular (400) - Treść główna */ @font-face { font-family: 'Dosis'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dosis-v34-latin_latin-ext-regular.woff2') format('woff2'); } /* Dosis - SemiBold (600) - Pogrubienia i przyciski */ @font-face { font-family: 'Dosis'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/dosis-v34-latin_latin-ext-600.woff2') format('woff2'); } /* Dosis - ExtraBold (800) - Nagłówki */ @font-face { font-family: 'Dosis'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/dosis-v34-latin_latin-ext-800.woff2') format('woff2'); } /* --- File: 2.colors.css --- */ /** * 2_colors.css * ZYXAK CRM by Paweł Pijanowski dla TONdance Szkoła Tańca w Łodzi * 2026-07-19 16:10 */ /* ========================================================================== 2. COLORS.CSS - Definicje kolorów (Dark Mode Default & Light Theme) Klimat: Szkoła Tańca (Salsa, Bachata, Kizomba) - Zgodne z oryginalnym Logo ========================================================================== */ /* ========================================================================== JAK KORZYSTAĆ Z MACIERZY KOLORÓW (Primary, Secondary, Success, Error, itd.) ========================================================================== --color-[nazwa]: Główne tło elementu (np. żółty przycisk akcji). --color-[nazwa]-hover: Stan po najechaniu myszką na element bazowy (:hover). --color-[nazwa]-contrast: Kolor tekstu/ikony leżącej BEZPOŚREDNIO na elemencie bazowym (np. czarny tekst na żółtym przycisku zachowuje WCAG). --color-[nazwa]-alpha: Półprzezroczyste tło (15-20%) - idealne pod delikatne alerty, etykiety (badges) i podświetlenia w menu. --color-[nazwa]-text: Kolor tekstu do czytania na standardowym tle strony (np. czerwony komunikat błędu pod inputem). --color-[nazwa]-muted: Ciemne/zgaszone obramowanie do delikatnych alertów. ========================================================================== */ :root { /* ========================================= DARK MODE (Domyślny - Klubowy Parkiet) ========================================= */ /* --- BRAND: PRIMARY (Żółty z logo) --- */ /* Użycie: Główne przyciski Call-to-Action ("Zapisz się", "Kup karnet"), mocne wyróżnienia. */ --color-primary: #FFCC00; --color-primary-hover: #FFD633; --color-primary-contrast: #000000; --color-primary-alpha: rgba(255, 204, 0, 0.15); --color-primary-text: #FFD633; --color-primary-muted: #3E320E; /* --- BRAND: SECONDARY (Klubowa Fuksja - Nocny Vibe) --- */ /* Użycie: Elementy budujące klimat, przyciski drugorzędne, podświetlenia aktywnych zakładek, efekty glow (cienie pod elementami). */ --color-secondary: #D946EF; --color-secondary-hover: #E879F9; --color-secondary-contrast: #000000; --color-secondary-alpha: rgba(217, 70, 239, 0.15); --color-secondary-text: #F0ABFC; --color-secondary-muted: #3D1244; /* --- STATUS: SUCCESS (Zielony z logo) --- */ /* Użycie: Komunikaty powodzenia ("Zapisano na zajęcia", "Płatność przeszła"), tagi "Aktywny". */ --color-success: #6BA443; --color-success-hover: #7EBB53; --color-success-contrast: #FFFFFF; --color-success-alpha: rgba(107, 164, 67, 0.15); --color-success-text: #95D16A; --color-success-muted: #1A2E0F; /* --- STATUS: ERROR (Czerwony z logo) --- */ /* Użycie: Walidacja formularzy ("Błędne hasło"), przyciski destrukcyjne ("Usuń konto"), tagi "Odrzucono". */ --color-error: #DB2C29; --color-error-hover: #EF3E3B; --color-error-contrast: #FFFFFF; --color-error-alpha: rgba(219, 44, 41, 0.15); --color-error-text: #FF8A88; --color-error-muted: #3D0A08; /* --- STATUS: WARNING (Pomarańczowy) --- */ /* Użycie: Ostrzeżenia nietrafne (np. "Karnet wygasa za 2 dni"), alerty wymagające uwagi. */ --color-warning: #F59E0B; --color-warning-hover: #FBBF24; --color-warning-contrast: #000000; --color-warning-alpha: rgba(245, 158, 11, 0.15); --color-warning-text: #FCD34D; --color-warning-muted: #452902; /* --- STATUS: INFO (Niebieski z logo) --- */ /* Użycie: Komunikaty neutralne ("Masz 1 nową wiadomość"), paski informacyjne. */ --color-info: #005A8C; --color-info-hover: #0073B3; --color-info-contrast: #FFFFFF; --color-info-alpha: rgba(0, 90, 140, 0.2); --color-info-text: #66BDEB; --color-info-muted: #001C2E; /* --- LINKI --- */ /* Użycie: Standardowe linki w tekście (). Dziedziczą klubową fuksję dla zachowania klimatu. */ --color-link: #E879F9; --color-link-muted: #3D1244; /* --- TŁA (SURFACE ARCHITECTURE) --- */ /* Głęboka czerń na pasek nawigacji idealnie wyeksponuje oryginalne logo bez ramek */ --color-bg-nav: #000000; --color-avatar-nav: #FFFFFF; --color-bg-table: #161616; /* Kolor tła tabeli */ --color-bg-table-hover: #14212c; /* Hover wiersza - tło tabeli lekko zabarwione błękitem (--color-info) */ /* Parter: Główna 'podłoga' aplikacji (body). Zgaszona czerń nie męczy oczu przy czytaniu */ --color-bg-main: #202020; /* #121212; */ /* Pierwsze piętro: Tło dla komponentów leżących na stronie (Karty, Panele, Artykuły) */ --color-bg-surface: #2a2a2a; /* Drugie piętro: Elementy 'oderwane' od strony i pływające (Dropdowny, Tooltipy, Modale) */ --color-bg-surface-alt: #363636; /* Zasłona: Półprzezroczysta czerń wrzucana ZA modala, aby przyciemnić aplikację pod spodem */ --color-bg-overlay: rgba(0, 0, 0, 0.75); /* --- TYPOGRAFIA I IKONY --- */ /* Base: Jasny, ale nie 100% biały. Do głównych nagłówków (H1-H6) i podstawowych paragrafów. */ --color-text: #F9FAFB; /* Tekst w tabeli (.data-table td): ta sama biel co --color-text, ale przygaszona do 80% - czysta biel na dużych powierzchniach tabeli męczy wzrok. */ --color-text-table: rgba(249, 250, 251, 0.8); /* Dimmed: Tekst drugorzędny. Używaj do podtytułów, okruszków, małych opisów pod polami. */ --color-text-dimmed: #D1D5DB; /* Muted: Najmniej ważny tekst. Używaj do placeholderów w inputach, stopek praw autorskich, stanów disabled. */ --color-text-muted: #6B7280; /* Icon: Kolor ikon w menu i interfejsie. Zapobiega "krzyczeniu" ikon na równi z tekstem. */ --color-icon: #A1A1AA; /* --- INTERAKCJE I LINIE --- */ /* Border: Cienkie, standardowe linie podziału (tabelki, granice kart,
). */ --color-border: #3f3f3f; /* Focus: Ramka aktywacji (Accessibility). Odpala się gdy klikniesz input lub używasz klawisza Tab. Jaskrawy żółty. */ --color-border-focus: var(--color-primary); /* Strong: Wyraźna ramka, np. granica aktywnego inputa na hover, lub wydzielenie głównego sidebaru. */ --color-border-strong: #595959; /* --- CIENIE --- */ /* Sm: Delikatny cień dla kart (surface) podnoszący je lekko z tła. */ --shadow-sm: 0 0.0625em 0.125em 0 rgb(0 0 0 / 0.5); /* Md: Mocny cień dla elementów pływających (modale, dropdowny), aby wybiły się mocno do przodu. */ --shadow-md: 0 0.5em 0.375em -0.0625em rgb(0 0 0 / 0.5); /* --- KOMPONENTY: INPUT / SELECT --- */ /* Specyficzne kolory dla formularzy. */ --color-input-bg: #0c4a6e; --color-input-border: #38bdf8; --color-input-text: #e0f2fe; /* --- WYKRESY (Chart.js) --- */ /* CELOWO osobne od --color-text-dimmed/--color-border: canvas (bez wygładzania czcionek jak w HTML, przy małych 9-12px ticks) potrzebuje mocniejszego kontrastu niż zwykły przygaszony tekst UI, żeby opisy osi były dobrze czytelne - patrz ChartTheme.resolveColor() w 02_2_chart-helpers.js. W dark mode wartość identyczna jak dotychczas (tu problemu nie było), w light mode - patrz [data-theme="light"]. */ --color-chart-axis-text: #D1D5DB; --color-chart-grid: #3f3f3f; } /* ========================================= LIGHT MODE (Opcjonalny) Komentarze strukturalne takie same jak w Dark Mode. ========================================= */ [data-theme="light"] { /* --- BRAND: PRIMARY --- */ --color-primary: #FFCC00; --color-primary-hover: #E6B800; --color-primary-contrast: #000000; --color-primary-alpha: #FEF08A; --color-primary-text: #A16207; --color-primary-muted: #FFF6D4; /* --- BRAND: SECONDARY --- */ --color-secondary: #C026D3; --color-secondary-hover: #A21CAF; --color-secondary-contrast: #FFFFFF; --color-secondary-alpha: #F5D0FE; --color-secondary-text: #86198F; --color-secondary-muted: #FDF4FF; /* --- STATUS: SUCCESS --- */ --color-success: #6BA443; --color-success-hover: #558732; --color-success-contrast: #FFFFFF; --color-success-alpha: #DCFCE7; --color-success-text: #2A4518; --color-success-muted: #F0FDF4; /* --- STATUS: ERROR --- */ --color-error: #DB2C29; --color-error-hover: #A81F1E; --color-error-contrast: #FFFFFF; --color-error-alpha: #FFE4E6; --color-error-text: #881337; --color-error-muted: #FFF1F2; /* --- STATUS: WARNING --- */ --color-warning: #F59E0B; --color-warning-hover: #D97706; --color-warning-contrast: #FFFFFF; --color-warning-alpha: #FFEDD5; --color-warning-text: #92400E; --color-warning-muted: #FFF7ED; /* --- STATUS: INFO --- */ --color-info: #005A8C; --color-info-hover: #00436B; --color-info-contrast: #FFFFFF; --color-info-alpha: #E0F2FE; --color-info-text: #002D47; --color-info-muted: #F0F9FF; /* --- LINKI --- */ --color-link: #C026D3; --color-link-muted: #FDF4FF; /* --- TŁA (SURFACE) --- */ --color-bg-table: #FFFFFF; /* Kolor tła tabeli */ --color-bg-table-hover: #E2F0F4; /* Hover wiersza - tło tabeli lekko zabarwione błękitem (--color-info) */ --color-bg-nav: #FFFFFF; /* Zmień na #000000, jeśli górna belka ma być czarna również w dzień */ --color-bg-main: #F9FAFB; --color-bg-surface: #FFFFFF; --color-bg-surface-alt: #EFF0F2; --color-bg-overlay: rgba(0, 0, 0, 0.5); /* --- TYPOGRAFIA I IKONY --- */ --color-text: #18181B; --color-text-table: rgba(24, 24, 27, 0.8); --color-text-dimmed: #52525B; --color-text-muted: #A1A1AA; --color-avatar-nav: #FFFFFF; --color-icon: #71717A; /* --- INTERAKCJE I LINIE --- */ --color-border: #E0E0E0; --color-border-focus: var(--color-primary); --color-border-strong: #A1A1AA; /* --- CIENIE --- */ --shadow-sm: 0 0.0625em 0.125em 0 rgb(0 0 0 / 0.05); --shadow-md: 0 0.5em 0.375em -0.0625em rgb(0 0 0 / 0.1); /* --- KOMPONENTY: INPUT / SELECT --- */ --color-input-bg: #e0f2fe; --color-input-border: #0284c7; --color-input-text: #0369a1; /* --- WYKRESY (Chart.js) --- */ /* Świadomie CIEMNIEJSZE niż --color-text-dimmed (#52525B) - ticks na canvasie przy małym rozmiarze fontu (9-12px, Dosis) wypadały słabo widoczne na białym tle mimo formalnie poprawnego kontrastu tekstu HTML. Zinc-700 daje wyraźnie mocniejszy, "ciężki" odczyt liczb/dat na osiach. Siatka (--color-chart-grid) lekko przyciemniona względem --color-border (#E0E0E0), żeby linie poziome też nie ginęły. */ --color-chart-axis-text: #3F3F46; --color-chart-grid: #D4D4D8; } /* --- File: 3.base.css --- */ /* 3. BASE.CSS - Normalizacja, Reset i Zmienne strukturalne. */ :root { /* Definicja modułu bazowego (szerokość kolumny mobile) */ --module-base: 22.5rem; } /* --- NOWA NORMALIZACJA --- */ html { box-sizing: border-box; /* Zapobiega systemowym gestom nawigacji na poziomie HTML */ overscroll-behavior: none; touch-action: manipulation; } *, *:before, *:after { box-sizing: inherit; } /* ========================================================================== UKRYCIE SUWAKÓW (Przewijanie działa kółkiem/dotykiem, ale brak paska) ========================================================================== */ * { /* Obsługa Firefox */ scrollbar-width: none; /* Obsługa starszych wersji IE / Edge */ -ms-overflow-style: none; } /* Obsługa Chrome, Safari, Edge, Opera */ *::-webkit-scrollbar { display: none; } body { margin: 0; width: 100vw; width: 100dvw; overflow: hidden; /* Pamiętaj, aby mieć wewnątrz kontener z overflow-y: auto */ /* Style globalne aplikacji (fonty i kolory) */ font-family: 'Dosis', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; line-height: 1.6; /* UJEDNOLICONE ZMIENNE Z SYSTEMU KOLORÓW (2.colors.css) */ background-color: var(--color-bg-main); color: var(--color-text); /* Wyłączenie domyślnego zaznaczania tekstu (odkomentuj w docelowej apce) */ /*-webkit-user-select: none; /* Safari/Chrome */ /*user-select: none; /* Standard */ /* BLOKADA GESTÓW SYSTEMOWYCH */ overscroll-behavior: none; touch-action: pan-y; } /* Kolor zaznaczonego tekstu (np. przy kopiowaniu) spójny z systemem kolorów */ ::selection { background-color: var(--color-primary); color: var(--color-primary-contrast); } /* Wyjątek dla pól formularzy - tam zaznaczanie i gesty muszą działać domyślnie */ input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; cursor: text; touch-action: manipulation; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: hidden; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } h1, h2, h3, h4, h5, h6, p { margin: 0; font-size: 1rem; /* Pełna kontrola w REM */ font-weight: 400; } b { font-weight: 600; } strong { font-weight: 800; } button { font-weight: 600; } a { text-decoration: none; color: var(--color-link); /* Spójne z kolorami z 2.colors.css */ transition: color 0.2s ease; } a:hover { color: var(--color-primary); } img, video, iframe { display: block; max-width: 100%; height: auto; } :active { -webkit-tap-highlight-color: transparent; } /* Zmodyfikowany reset tylko dla przycisków i inputów (bez globalnego hover z błędem) */ button, input { background-color: transparent; border: none; } /* ========================================================================== GLOBALNE ZARZĄDZANIE FOCUS (Zamiast :focus-visible) ========================================================================== */ /* Domyślnie TWARDO WYŁĄCZAMY focus dla wszystkich elementów. Zapobiega to "zawieszaniu" się focusa na ekranach dotykowych po kliknięciu. */ *:focus { outline: none !important; } /* WŁĄCZNIK FOCUS (DOSTĘPNOŚĆ / KLAWIATURA) Jeśli w przyszłości będziesz chciał globalnie włączyć focus (np. przy nawigacji tabulatorem), odkomentuj poniższy blok: */ /* *:focus { outline: 0.125rem solid var(--color-border-focus) !important; outline-offset: 0.125rem !important; } */ /* ========================================================================== */ [data-column] { display: flex; flex-direction: column; position: relative; } [data-row] { display: flex; flex-direction: row; position: relative; align-items: center; } /* ========================================================================== NOWOCZESNE EFEKTY SCROLLOWANIA (Scroll-driven Animations CSS) ========================================================================== */ /* Definicja animacji - z niczego w delikatny cień z Twojego Themingu */ @keyframes sticky-shadow-appear { from { box-shadow: none; } to { box-shadow: var(--shadow-md); } } /* UNIWERSALNA KLASA: .sticky-shadow Dodaj ją do dowolnego nagłówka (np.
), aby przykleił się do góry i rzucał cień, gdy zawartość pod nim jest przewijana. */ .sticky-shadow { position: sticky; top: 0; z-index: 50; /* Gwarantuje, że pasek będzie nad scrollowanym tekstem */ /* Natywny CSS Scroll Timeline (standard 2026) */ animation: sticky-shadow-appear linear both; animation-timeline: scroll(nearest block); /* Nasłuchuje najbliższego scrolla */ animation-range: 0 1.5rem; /* Cień płynnie pojawia się przez pierwsze 1.5rem scrollowania */ } /* --- NOWOŚĆ: CIEŃ DOLNY --- */ @keyframes sticky-shadow-bottom-appear { 0%, 95% { box-shadow: var(--shadow-md); } 100% { box-shadow: none; } } /* AUTOMATYCZNY CIEŃ DOLNY DLA PANELI Dzięki ::after omijamy potrzebę wklejania pustych divów do HTMLa. Zadziała automatycznie na każdym komponencie z klasą .panel */ .panel::after { content: ''; /* Wymagane dla pseudoelementów */ position: sticky; bottom: 0; height: 0; width: 100%; flex-shrink: 0; /* Zapobiega ewentualnemu ściskaniu we flexboxie */ z-index: 50; pointer-events: none; /* Nie blokuje kliknięć pod spodem */ /* Genialny trik: odwracamy element w osi Y. Dzięki temu gotowy cień z Themingu (skierowany w dół) rzuca cień do GÓRY! */ transform: scaleY(-1); /* Domyślnie brak cienia (gdy nie ma paska przewijania) */ box-shadow: none; animation: sticky-shadow-bottom-appear linear both; animation-timeline: scroll(nearest block); } /* --- EKRAN BLOKADY (Orientation Lock) --- */ body::after { content: "Obróć urządzenie"; position: fixed; top: 0; left: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; background-color: #000000; /* Twarda czerń do zablokowania tła */ color: #FFFFFF; z-index: 9999; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } body.orientation-locked::after { opacity: 1; pointer-events: all; } /* --- File: 4.layout.css --- */ :root { --visible-panels: 1; /* Domyślnie 1 (mobile) */ } @media (min-width: 45rem) { :root { --visible-panels: 2; } } @media (min-width: 67.5rem) { :root { --visible-panels: 3; } } @media (min-width: 90rem) { :root { --visible-panels: 4; } } @media (min-width: 112.5rem) { :root { --visible-panels: 5; } } :root { /* Obliczenia szerokości paneli w zależności od zmiennej --visible-panels (ustawianej w media queries) */ --w1to2: calc(22.5em * min(var(--visible-panels), 2)); --w1to3: calc(22.5em * min(var(--visible-panels), 3)); --w1to4: calc(22.5em * min(var(--visible-panels), 4)); } /* Klasy szerokości kolumn */ .w-1of6 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: 3.75em; width: 3.75em; max-width: 3.75em; } .w-1of5 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: 4.5em; width: 4.5em; max-width: 4.5em; } .w-1of4 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: 5.625em; width: 5.625em; max-width: 5.625em; } .w-1of3 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: 7.5em; width: 7.5em; max-width: 7.5em; } .w-1of2 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: 11.25em; width: 11.25em; max-width: 11.25em; } .w-1 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: 22.5em; width: 22.5em; max-width: 22.5em; } .w-2 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: 45em; width: 45em; max-width: 45em; } /* prawdopodobnie do skasowania */ /* Dynamiczne szerokości */ .w-1to2 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: min(var(--w1to2), 100%); width: var(--w1to2); max-width: 100%; } .w-1to3 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: min(var(--w1to2), 100%); width: var(--w1to3); max-width: 100%; } .w-1to4 { display: flex; flex-direction: row; flex-wrap: wrap; min-width: min(var(--w1to2), 100%); width: var(--w1to4); max-width: 100%; } html { font-size: calc(100dvw / (var(--visible-panels) * 22.5)); } body { margin: 0; /* Zabezpieczenie przed paskami przewijania */ width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; background-color: var(--color-bg-main); color: var(--color-text); display: flex; flex-direction: column; justify-content: space-between; } /* ========================================================================== NARZĘDZIA I PRZYCISKI ========================================================================== */ /* .spin - obracająca się ikona "ładowania" (), używana w wielu miejscach CRM (02_1_table-engine.js, 07_1_kurs-filters.js, 06_3_lekcje-details.js) - klasa BYŁA już od dawna dodawana przez JS, ale nigdzie w CSS nie istniała jej definicja, więc ikona się nie kręciła (błąd znaleziony i naprawiony - patrz rozmowa). 1s/linear/infinite - płynny, stały obrót bez przyspieszeń/zwolnień. */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { display: inline-block; animation: spin 1s linear infinite; } .toolButton { display: inline-flex; flex-direction: column; width: 3.5rem; height: 3.5rem; margin: 0.25rem; justify-content: center; align-items: center; background-color: transparent; border: 0.0625rem solid transparent; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; color: var(--color-text-dimmed); fill: var(--color-text-dimmed); outline: none; gap: 0.2rem; } .toolButton iconify-icon, .toolButton svg { font-size: 1.5rem; } .toolButton div { font-size: 0.7rem; } nav .toolButton div { text-transform: uppercase; } .toolButton:not(:disabled):hover { background-color: var(--color-bg-surface-alt); color: var(--color-text); border-color: var(--color-border); } .toolButton:active { border-color: var(--color-border-focus); color: var(--color-text); background-color: var(--color-bg-surface); box-shadow: 0 0 0 0.125rem var(--color-primary-alpha); } .toolButton:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: grayscale(100%); } .toolButton.active-tool { border-color: var(--color-border); background-color: var(--color-bg-surface); box-shadow: inset 0 0.1rem 0.225rem rgba(0,0,0,0.1); } /* ========================================================================== PASKI NAWIGACYJNE ========================================================================== */ #topBar { width: 100vw; height: 4rem; background-color: var(--color-bg-nav); border-bottom: 0.0625rem solid var(--color-border); flex-shrink: 0; } #bottomBar { width: 100vw; height: 4rem; background-color: var(--color-bg-nav); border-top: 0.0625rem solid var(--color-border); flex-shrink: 0; justify-content: center; } #leftButton { width: 4rem; height: 4rem; margin-left: 0.5rem; } #rightButton { width: 4rem; height: 4rem; margin-right: 0.5rem; } #middleMenu { flex-grow: 1; height: 4rem; background-color: transparent; } #backButton { width: 4rem; height: 4rem; background-color: transparent; color: var(--color-icon); } #logo { display: flex; justify-content: left; align-items: center; height: 4rem; background-color: transparent; margin-left: 0.5rem; } #topBar nav { display: flex; flex-grow: 1; height: 4rem; background-color: transparent; justify-content: center; } /* ========================================================================== UKRYWANIE ELEMENTÓW W ZALEŻNOŚCI OD KOLUMN ========================================================================== */ html:is([data-view-columns='3'], [data-view-columns='4'], [data-view-columns='5']) #leftButton, html:is([data-view-columns='3'], [data-view-columns='4'], [data-view-columns='5']) #bottomBar { display: none; } html:is([data-view-columns='2'], [data-view-columns='3'], [data-view-columns='4'], [data-view-columns='5']) #rightButton { display: none; } /* ========================================================================== MENU I AVATAR ========================================================================== */ .app-menu { display: flex; align-items: center; justify-content: center; height: 100%; /* Kontekst pozycjonowania dla .module-indicator (absolute) poniżej - w widoku mobile (data-view-columns='1') ta reguła jest i tak nadpisywana przez position:absolute z sekcji niżej (dropdown), co również jest poprawnym kontekstem pozycjonowania. */ position: relative; } /* ========================================================================== WSKAŹNIK AKTYWNEGO MODUŁU (przesuwająca się kreska pod przyciskiem) ========================================================================== */ /* Pozycja (left/width) ustawiana z JS w updateModuleIndicator() (1_layout.js), na podstawie getBoundingClientRect() aktualnie aktywnego przycisku (.toolButton.module-active) - transition niżej daje płynne przesunięcie/zmianę szerokości przy każdym przełączeniu modułu. */ .module-indicator { position: absolute; bottom: 0; left: 0; width: 0; height: 0.2rem; background-color: var(--color-primary); border-radius: 9999px 9999px 0 0; pointer-events: none; /* Czysto wizualny - nie przechwytuje kliknięć w przyciski pod/nad nim */ opacity: 0; /* Domyślnie ukryty - brak jeszcze aktywnego modułu (ekran startowy) */ transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.2s ease; } /* W widoku mobile .app-menu staje się rozwijanym menu w kolumnie (przyciski pełnej szerokości, jeden pod drugim - patrz reguły niżej w tym pliku) - podkreślenie "pod przyciskiem" nie ma tam wizualnego sensu, więc wskaźnik jest w tym układzie całkowicie ukrywany. */ html[data-view-columns='1'] .module-indicator { display: none; } #hamburgerButton { display: none; align-self: center; margin-right: 0.5rem; } html[data-view-columns='1'] #hamburgerButton { display: flex; } html[data-view-columns='1'] .app-menu { display: none; position: absolute; top: 4.5rem; right: 4.5rem; background-color: var(--color-bg-surface-alt); border: 1px solid var(--color-border); padding: 0.5rem; border-radius: 0.5rem; z-index: 1000; flex-direction: column; box-shadow: var(--shadow-md); height: auto; } html[data-view-columns='1'] .app-menu.open { display: flex; } html[data-view-columns='1'] .app-menu .toolButton { width: 12rem; flex-direction: row; justify-content: flex-start; height: auto; padding: 0.8rem 1rem; margin: 0.1rem; } html[data-view-columns='1'] .app-menu .toolButton iconify-icon, html[data-view-columns='1'] .app-menu .toolButton svg { margin-right: 1rem; } html[data-view-columns='1'] nav .toolButton div { font-size: 0.9rem; } #avatar { width: 4rem; height: 4rem; background-color: transparent; position: relative; cursor: pointer; } #avatar img {border: 0.125rem solid var(--color-avatar-nav);} #panelMenu { position: absolute; display: flex; flex-direction: column; align-items: center; top: 4.5rem; right: 0.8rem; background-color: var(--color-bg-surface-alt); border: 1px solid var(--color-border); padding: 1rem; border-radius: 0.5rem; z-index: 1000; min-width: 10rem; box-shadow: var(--shadow-md); } #panelMenu.hidden { display: none; } /* ========================================================================== ZASŁONA POD OKNEM USTAWIEŃ (panele / motyw) ========================================================================== */ #settingsOverlay { display: none; position: fixed; top: 4rem; /* Zaczyna się pod topBar - belka z logo i awatarem pozostaje odsłonięta */ left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.45); backdrop-filter: blur(0.25rem); -webkit-backdrop-filter: blur(0.25rem); z-index: 999; /* Pod #panelMenu (z-index 1000), żeby okno ustawień było klikalne */ transition: opacity 0.2s ease; } #settingsOverlay.visible { display: block; } /* ========================================================================== FEEDBACK WIZUALNY PODCZAS DŁUGIEGO PRZYTRZYMANIA WIERSZA (mobile) ========================================================================== */ .data-table tr.touch-pressing td { background-color: var(--color-primary-alpha) !important; transition: background-color 0.15s ease; } #panelMenu p { width: 100%; color: var(--color-text-dimmed); margin-bottom: 0.25rem; } #panelMenu .select { display: inline-flex; gap: 0.5rem; padding: 0.5rem; margin-top: 0; background-color: var(--color-bg-main); border-radius: 9999px; border: solid var(--color-border) 0.125rem; } #panelMenu button { display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; font-size: 1.2rem; background: var(--color-border); color: var(--color-text); border: none; cursor: pointer; border-radius: 50%; transition: all 0.2s ease; } #panelMenu button:hover { background: var(--color-primary-alpha); color: var(--color-primary); } #panelMenu button.active { background: var(--color-primary); color: var(--color-primary-contrast); font-weight: bold; box-shadow: inset 0 0.1rem 0.225rem rgba(0,0,0,0.5); cursor: default; } /* ========================================================================== UKŁAD PANELI GŁÓWNYCH (Wysuwanie na wierzch jako Overlay) ========================================================================== */ #mainContainer { position: relative; overflow: hidden; /* Zapobiega pojawianiu się dolnego paska przewijania podczas wysuwania */ } #filtersPanel, #detailsView, #detailedViewExtended { /* Płynna, naturalna animacja wysuwania */ transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); background-color: var(--color-bg-main); height: 100%; top: 0; bottom: 0; } /* Ustawienia szerokości grida w zależności od widoku */ html:is([data-view-columns='1'], [data-view-columns='2'], [data-view-columns='3']) #mainGrid { width: 22.5rem; } html:is([data-view-columns='4'], [data-view-columns='5']) #mainGrid { width: 45rem; } /* --- PANEL FILTRÓW (Wysuwa się z lewej) --- */ html:is([data-view-columns='1'], [data-view-columns='2']) #filtersPanel { position: absolute; left: 0; z-index: 100; /* Znajduje się NAD gridem tabeli */ transform: translateX(-105%); /* Ukryty */ } html:is([data-view-columns='3'], [data-view-columns='4'], [data-view-columns='5']) #filtersPanel { position: relative; z-index: 10; transform: translateX(0); /* Zawsze widoczny obok */ } /* --- PANEL SZCZEGÓŁÓW (Wysuwa się z prawej) --- */ html[data-view-columns='1'] #detailsView { position: absolute; right: 0; z-index: 100; /* Znajduje się NAD gridem tabeli */ transform: translateX(105%); /* Ukryty */ } html:is([data-view-columns='2'], [data-view-columns='3'], [data-view-columns='4'], [data-view-columns='5']) #detailsView { position: relative; z-index: 10; transform: translateX(0); /* Zawsze widoczny obok */ } /* --- PANEL SZCZEGÓŁÓW ROZSZERZONYCH --- */ html:is([data-view-columns='1'], [data-view-columns='2'], [data-view-columns='3'], [data-view-columns='4']) #detailedViewExtended { position: absolute; right: 0; z-index: 100; transform: translateX(105%); } html[data-view-columns='5'] #detailedViewExtended { position: relative; z-index: 10; transform: translateX(0); } /* ========================================================================== KLASY AKTYWUJĄCE WYSUNIĘCIE (dodawane dynamicznie przez JS) ========================================================================== */ #filtersPanel.open { transform: translateX(0) !important; box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.4); /* Głęboki cień sugerujący, że to nakładka */ } #detailsView.open, #detailedViewExtended.open { transform: translateX(0) !important; box-shadow: -0.5rem 0 2rem rgba(0, 0, 0, 0.4); /* Głęboki cień od prawej strony */ } .toolButton.panel-on { background-color: var(--color-primary, #005A8C) !important; color: var(--color-primary-contrast, #ffffff) !important; border-color: var(--color-primary, #005A8C) !important; box-shadow: inset 0 4px 8px rgba(0,0,0,0.3) !important; } .toolButton.panel-on iconify-icon, .toolButton.panel-on div { color: var(--color-primary-contrast, #ffffff) !important; fill: var(--color-primary-contrast, #ffffff) !important; } /* ========================================================================== PANEL SZCZEGÓŁÓW ROZSZERZONYCH - przyciski sterujące ========================================================================== */ /* Trzeci slot w dolnym pasku (mobile / 2 kolumny), analogiczny do #leftButton / #rightButton. Celowo BEZ osobnej reguły chowającej per liczbę kolumn - #bottomBar i tak znika całkowicie od 3 kolumn wzwyż (patrz reguła wyżej), więc ten przycisk pokazuje się automatycznie dokładnie tam, gdzie ma się pokazywać: przy 1 i 2 kolumnach. */ #extraButton { width: 4rem; height: 4rem; margin-right: 0.5rem; } /* Przycisk w nagłówku panelu (Rozwiń/Zwiń w Szczegółach, X w panelu Więcej, Wyczyść filtry w Filtrach) - dosunięty CAŁKOWICIE do prawej krawędzi nagłówka (bez marginesu, konwencja "przycisku zamknięcia okna"). DOMYŚLNIE (nadal używane przez nagłówek Filtrów) position: absolute - header ma position:relative (inline w index.php) i domyślne wyśrodkowanie tytułu przez flex (patrz .panel header w 7_main-container.css); ponieważ przycisk jest position:absolute, nie bierze udziału w tym flexowym centrowaniu, więc tytuł ("Filtry") zostaje wyśrodkowany względem CAŁEJ szerokości panelu, a nie tylko wolnej przestrzeni obok przycisku. Nagłówki Szczegółów i Więcej mają WŁASNY układ (pole tytułu 16,5rem + margines 3rem, patrz #detailsViewTitle/#detailedViewExtendedTitle w 7_main-container.css) - tam przycisk NIE jest position:absolute, tylko zwykłym elementem flex zaraz za tytułem (patrz override niżej), bo pole tytułu ma już wyliczoną, stałą szerokość i nie potrzebuje już sztuczki z wyjęciem przycisku z przepływu flex. */ .panel-header-btn { position: absolute; right: 0; top: 0; width: 3rem; height: 100%; margin: 0; border-radius: 0; } /* Override DLA Szczegółów i Więcej (patrz komentarz wyżej) - przycisk NIE jest już position:absolute, tylko zwykłym, "statycznym" dzieckiem .panel-header-btn-slot niżej (wypełnia go całego - te same wymiary 3rem/100% co dotąd). */ #detailsView .panel-header-btn, #detailedViewExtended .panel-header-btn { position: static; } /* .panel-header-btn-slot - TO JEST prawdziwy element flex w nagłówku (kolejność w index.php: najpierw / , potem ten div), więc ląduje dokładnie w polu 3+16,5=19,5rem -> 22,5rem (patrz #detailsViewTitle/ #detailedViewExtendedTitle w 7_main-container.css). ISTOTNE: rezerwuje te 3rem miejsca w nagłówku ZAWSZE, NIEZALEŻNIE od tego, czy przycisk W ŚRODKU jest akurat ukryty (patrz html[data-view-columns='5'] niżej w tym pliku, gdzie chowany jest sam