/* * public/assets/css/style.css * * Jedyny arkusz stylów aplikacji. Własny CSS (bez Bootstrapa/Tailwinda), * oparty o zmienne CSS (custom properties). Mobile-first, minimalistyczny, * jasny motyw. Kolory dobrane wg systemowej metody kolorów danych: * kategorialne barwy makroskładników w stałej kolejności (blue/aqua/ * yellow/green), kolor "severity" dla miernika kalorii (accent -> warning * -> critical), tekst zawsze w tonach tekstu (nigdy w kolorze danych). */ /* --------------------------------------------------------------------- 1. Zmienne (design tokens) --------------------------------------------------------------------- */ :root { /* Typografia */ --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif; /* Powierzchnie */ --color-page-bg: #f9f9f7; --color-surface: #fcfcfb; --color-surface-alt: #f3f2ef; /* Tekst */ --color-text: #0b0b0b; --color-text-secondary: #52514e; --color-text-muted: #898781; /* Obramowania */ --color-border: #e1e0d9; --color-border-strong: #c3c2b7; /* Kolor marki / akcent */ --color-primary: #2a78d6; --color-primary-dark: #184f95; --color-primary-light: #cde2fb; /* Kolory statusu (stałe, nieużywane do innych celów) */ --color-good: #0ca30c; --color-warning: #fab219; --color-critical: #d03b3b; /* Kolory makroskładników — stała kolejność, tylko do akcentów (nie do tekstu) */ --color-protein: #2a78d6; --color-fat: #1baf7a; --color-carbs: #eda100; --color-fiber: #008300; /* Odstępy */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Zaokrąglenia i cienie */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06); --shadow-md: 0 4px 14px rgba(11, 11, 11, 0.08); --max-width: 1080px; --header-height: 60px; } /* --------------------------------------------------------------------- 1b. Tryb ciemny — nadpisanie zmiennych z 1. (design tokens) NIE jest automatycznym odwróceniem kolorów jasnego motywu — każda wartość to osobny, dobrany krok z tych samych ramp barw (metoda ze skilla dataviz: "dark mode is selected, not an automatic flip"), zwalidowany pod kątem kontrastu względem ciemnej powierzchni #1a1a19 (scripts/validate_palette.js --mode dark). Kolory makro (protein/fat/ carbs/fiber) to te same 4 gniazda kategorialne, tylko w wersji "dark step" — kolejność i przypisanie do makroskładnika bez zmian. Aktywowany atrybutem [data-theme="dark"] na — ustawianym przez inline-owy skrypt w layouts/header.php (przed wczytaniem CSS, żeby uniknąć "mignięcia" jasnym motywem) oraz przełącznikiem w app.js. --------------------------------------------------------------------- */ [data-theme="dark"] { --color-page-bg: #0d0d0d; --color-surface: #1a1a19; --color-surface-alt: #242422; --color-text: #ffffff; --color-text-secondary: #c3c2b7; --color-text-muted: #898781; --color-border: #2c2c2a; --color-border-strong: #383835; --color-primary: #3987e5; --color-primary-dark: #1c5cab; --color-primary-light: #14304f; /* Kolory statusu: te same kroki co w jasnym motywie — skill dataviz potwierdza, że wszystkie cztery zachowują kontrast >= 3:1 względem ciemnej powierzchni bez zmian (patrz references/palette.md). */ --color-good: #0ca30c; --color-warning: #fab219; --color-critical: #d03b3b; /* Kategorialne kolory makro — "dark step" tych samych 4 gniazd (blue/aqua/yellow/green), zwalidowane jako zestaw dla trybu dark. */ --color-protein: #3987e5; --color-fat: #199e70; --color-carbs: #c98500; --color-fiber: #008300; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); } /* --------------------------------------------------------------------- 2. Reset i podstawy --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { padding: 0; margin: 0; } body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-page-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.25; font-weight: 600; } h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; } p { margin: 0 0 var(--space-3); } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } ul { list-style: none; margin: 0; padding: 0; } img, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); } /* --------------------------------------------------------------------- 3. Nagłówek / nawigacja --------------------------------------------------------------------- */ .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20; /* Pasek stanu iOS jest "black-translucent" (patrz header.php) — treść strony rysuje się POD nim, więc nagłówek dostaje dopisek wysokości notcha/wyspy dynamicznej jako dodatkowy padding, żeby logo i menu nie chowały się pod nim. env() zwraca 0 na urządzeniach bez notcha i w zwykłej przeglądarce, więc to bezpieczne wszędzie. Wymaga viewport-fit=cover w meta viewport (już ustawione w header.php). */ padding-top: env(safe-area-inset-top); } .site-header__inner { display: flex; align-items: center; gap: var(--space-3); height: var(--header-height); } .brand { font-weight: 700; font-size: 1.125rem; color: var(--color-text); /* Reszta pasków nagłówka (menu, przełącznik hamburgera, przełącznik motywu) grupuje się po prawej — patrz .site-header__inner (flex bez justify-content: space-between, żeby dodanie kolejnego przycisku po prawej nie rozjeżdżało środkowego menu do centrum). */ margin-right: auto; } .brand:hover { text-decoration: none; } .nav-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; padding: var(--space-2); cursor: pointer; } .nav-toggle span { width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; } .main-nav { position: fixed; top: var(--header-height); left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); max-height: 0; overflow: hidden; transition: max-height 0.2s ease; } .main-nav.is-open { max-height: 320px; } .main-nav ul { display: flex; flex-direction: column; padding: var(--space-2) var(--space-4) var(--space-4); } .main-nav a { display: block; padding: var(--space-3) var(--space-2); color: var(--color-text-secondary); border-radius: var(--radius-sm); font-weight: 500; } .main-nav a:hover { background: var(--color-surface-alt); text-decoration: none; } .main-nav a.active { color: var(--color-primary); background: var(--color-primary-light); } @media (min-width: 720px) { .nav-toggle { display: none; } .main-nav { position: static; max-height: none; overflow: visible; border-bottom: none; background: none; } .main-nav ul { flex-direction: row; padding: 0; gap: var(--space-2); } .main-nav a { padding: var(--space-2) var(--space-3); } } /* --------------------------------------------------------------------- 4. Layout główny / stopka --------------------------------------------------------------------- */ main { padding: var(--space-5) 0 var(--space-7); min-height: calc(100vh - var(--header-height) - 64px); } .page-header { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-5); } .site-footer { text-align: center; padding: var(--space-5) var(--space-4); color: var(--color-text-muted); font-size: 0.875rem; border-top: 1px solid var(--color-border); } /* --------------------------------------------------------------------- 5. Karty --------------------------------------------------------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); } .card + .card { margin-top: var(--space-4); } .card__title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } /* --------------------------------------------------------------------- 6. Przyciski --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.6rem 1.1rem; border-radius: var(--radius-md); border: 1px solid transparent; font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; text-decoration: none; } .btn:hover { text-decoration: none; } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-dark); } .btn--secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); } .btn--secondary:hover { background: var(--color-surface-alt); } .btn--danger { background: var(--color-surface); border-color: var(--color-critical); color: var(--color-critical); } .btn--danger:hover { background: var(--color-critical); color: #fff; } .btn--ghost { background: transparent; color: var(--color-text-secondary); } .btn--ghost:hover { background: var(--color-surface-alt); } .btn--sm { padding: 0.4rem 0.75rem; font-size: 0.8125rem; } .btn--block { width: 100%; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* --------------------------------------------------------------------- 7. Formularze --------------------------------------------------------------------- */ .field { margin-bottom: var(--space-4); } .field label { display: block; margin-bottom: var(--space-2); font-weight: 600; font-size: 0.875rem; } .field input, .field select, .field textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .field-hint { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: var(--space-1); } .field-error { font-size: 0.8125rem; color: var(--color-critical); margin-top: var(--space-1); } .form-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .form-row--2 { grid-template-columns: repeat(2, 1fr); } .form-row--3 { grid-template-columns: repeat(3, 1fr); } } /* --------------------------------------------------------------------- 8. Tabele --------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; /* Tylko poziomy scroll jest "awaryjny" (bardzo wąskie okno) — pionowy zostaje widoczny, żeby menu akcji (.row-menu__panel, position: absolute) mogło się rozwinąć poza dolną krawędź ostatniego wiersza bez ucinania. Przeglądarki od dawna obsługują niezależne osie overflow-x/overflow-y, więc to bezpieczna kombinacja. */ overflow-y: visible; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; /* table-layout: fixed + (patrz np. views/products.php) — każda kolumna dostaje z góry przydzieloną szerokość procentową dopasowaną do jej typowej zawartości, więc długa nazwa produktu zawija się WEWNĄTRZ swojej kolumny zamiast rozpychać całą tabelę w bok. Z table-layout: auto przeglądarka i tak licząc minimalną szerokość każdej kolumny na nowo przy każdym renderze — przy zmiennej długości nazw produktów efekt był nieprzewidywalny (kolumny nagłówków typu "Marka"/"Jedn." bywały ściskane do łamania w środku wyrazu). Stałe proporcje kolumn eliminują ten problem raz na zawsze, niezależnie od długości danych. */ table-layout: fixed; } .table th, .table td { padding: var(--space-2) var(--space-2); text-align: left; border-bottom: 1px solid var(--color-border); overflow-wrap: break-word; } .table thead th { background: var(--color-surface-alt); color: var(--color-text-secondary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.01em; /* Wąskie kolumny liczbowe (stała szerokość, table-layout: fixed) czasem nie mieszczą całego nagłówka w jednej linii — hyphens: auto dzieli słowo w naturalnym miejscu sylabowym ("Kate-goria") zamiast surowego cięcia w dowolnym miejscu znakowym, które wyglądało jak błąd renderowania. */ hyphens: auto; -webkit-hyphens: auto; } .table tbody tr:hover { background: var(--color-surface-alt); } .table tbody tr:last-child td { border-bottom: none; } .table td.num, .table th.num { font-variant-numeric: tabular-nums; text-align: right; } /* Same dane liczbowe (np. "120,5") nigdy się nie łamią — ale nagłówek kolumny ("Kcal/100g", "Białko"...) MOŻE zawinąć się na drugą linię w wąskiej, stałej szerokości kolumnie (table-layout: fixed), inaczej długie nagłówki nachodziłyby wizualnie na sąsiednie kolumny. */ .table td.num { white-space: nowrap; } /* --------------------------------------------------------------------- 9. Odznaki (kategorie, jednostki) --------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--color-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); white-space: nowrap; } /* --------------------------------------------------------------------- 10. Stat tiles (kafelki makro) i siatka statystyk --------------------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); position: relative; overflow: hidden; } /* Pasek koloru po lewej stronie kafelka niesie tożsamość makroskładnika; wartość liczbowa i etykieta zawsze zostają w tonach tekstu. */ .stat-tile::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--stat-color, var(--color-primary)); } .stat-tile--protein { --stat-color: var(--color-protein); } .stat-tile--fat { --stat-color: var(--color-fat); } .stat-tile--carbs { --stat-color: var(--color-carbs); } .stat-tile--fiber { --stat-color: var(--color-fiber); } .stat-tile__label { font-size: 0.8125rem; color: var(--color-text-secondary); margin-bottom: var(--space-2); } .stat-tile__value { font-size: 1.5rem; font-weight: 700; color: var(--color-text); } .stat-tile__value small { font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); margin-left: 2px; } /* --------------------------------------------------------------------- 11. Miernik kalorii (meter) --------------------------------------------------------------------- */ .meter { margin: var(--space-3) 0; } .meter__labels { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: var(--space-2); } .meter__labels strong { color: var(--color-text); } .meter__track { width: 100%; height: 14px; border-radius: 999px; background: var(--color-surface-alt); border: 1px solid var(--color-border); overflow: hidden; } .meter__fill { height: 100%; border-radius: 999px 0 0 999px; background: var(--color-primary); transition: width 0.3s ease; } /* Stan miernika niesie "severity": w normie / blisko limitu / przekroczony. Kolor wypełnienia zmienia się, tor pozostaje neutralny. */ .meter--warning .meter__fill { background: var(--color-warning); } .meter--over .meter__fill { background: var(--color-critical); border-radius: 999px; } /* --------------------------------------------------------------------- 12. Alerty / komunikaty --------------------------------------------------------------------- */ .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); margin-bottom: var(--space-4); font-size: 0.9375rem; } .alert--success { border-color: var(--color-good); background: #eafaea; color: #0a5c0a; } .alert--error { border-color: var(--color-critical); background: #fdecec; color: #8a1f1f; } .alert--warning { border-color: var(--color-warning); background: #fff6e5; color: #7a5200; } .alert--info { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); } /* --------------------------------------------------------------------- 13. Stan pusty (empty state) --------------------------------------------------------------------- */ .empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-secondary); } .empty-state h3 { color: var(--color-text); } /* --------------------------------------------------------------------- 14. Narzędzia (utility classes) --------------------------------------------------------------------- */ .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .text-muted { color: var(--color-text-muted); } .text-secondary { color: var(--color-text-secondary); } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .hidden { display: none !important; } /* --------------------------------------------------------------------- 15. Responsywność ogólna --------------------------------------------------------------------- */ @media (min-width: 960px) { .container { padding: 0 var(--space-5); } } /* Tabele (Produkty/Przepisy/Plany/edytor składników) na wąskim ekranie: zamiast przewijania w bok (.table-wrap miało overflow-x: auto), każdy wiersz staje się osobną "kartą", a komórki układają się pionowo jako para etykieta/wartość. Etykieta pochodzi z atrybutu data-label, który JS dopisuje do każdej wyrenderowanej komórki (patrz products-ui.js, recipes-ui.js, plans-ui.js) — komórka akcji celowo nie ma data-label, więc zostaje po prostu pełną szerokości blokiem z przyciskami. */ @media (max-width: 640px) { .table-wrap { overflow-x: visible; border: none; } .table thead { display: none; } .table, .table tbody, .table tr, .table td { display: block; width: 100%; } .table tbody tr { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); } .table tbody tr.table-loading { border: none; background: transparent; padding: 0; } .table td { white-space: normal; border-bottom: 1px solid var(--color-border); } .table td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); text-align: right; } .table td[data-label]::before { content: attr(data-label); font-weight: 600; font-size: 0.8125rem; color: var(--color-text-secondary); text-align: left; flex-shrink: 0; } /* Komórka akcji (bez data-label): pełna szerokość, bez etykiety — przyciski i tak są samo-opisujące (Edytuj/Kopiuj/Usuń...). */ .table td:not([data-label]) { text-align: left; padding-top: var(--space-3); border-bottom: none; } } /* --------------------------------------------------------------------- 16. Pasek filtrów (wyszukiwarka, kategoria, sortowanie) --------------------------------------------------------------------- */ .filters-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); } .filters-bar .field { margin-bottom: 0; flex: 1 1 180px; min-width: 160px; } .filters-bar .field--grow { flex: 2 1 240px; } .sort-direction-btn { padding: 0.6rem 0.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; font-size: 1rem; line-height: 1; } .sort-direction-btn:hover { background: var(--color-surface-alt); } /* --------------------------------------------------------------------- 17. Wynik listy: licznik + paginacja --------------------------------------------------------------------- */ .results-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-3); color: var(--color-text-secondary); font-size: 0.9375rem; } .pagination { display: flex; gap: var(--space-2); align-items: center; justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); } .pagination__page { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); padding: 0 var(--space-2); } /* --------------------------------------------------------------------- 18. Modal (formularz dodawania/edycji produktu) --------------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(11, 11, 11, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: var(--space-5) var(--space-4); overflow-y: auto; z-index: 50; } .modal-overlay.hidden { display: none; } .modal { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); max-width: 640px; width: 100%; box-shadow: var(--shadow-md); } .modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .modal__close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); padding: var(--space-1) var(--space-2); } .modal__close:hover { color: var(--color-text); } .modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); } /* --------------------------------------------------------------------- 19. Odznaki statusu aktywności + akcje w wierszu tabeli --------------------------------------------------------------------- */ .badge--active { background: #eafaea; color: #0a5c0a; border-color: var(--color-good); } .badge--inactive { background: var(--color-surface-alt); color: var(--color-text-muted); } .row-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .row-actions form { display: inline; } /* Menu "⋮" (Kopiuj / Dezaktywuj / Usuń) — chowa trzy rzadziej używane akcje pod jednym przyciskiem, żeby kolumna akcji nie poszerzała całej tabeli (patrz initRowActionMenus() w utils.js dla logiki otwierania). */ .row-menu { position: relative; display: inline-block; } .row-menu__trigger { width: 32px; height: 32px; line-height: 1; font-size: 1.125rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; } .row-menu__trigger:hover { background: var(--color-surface-alt); } .row-menu__panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 160px; display: flex; flex-direction: column; gap: 2px; padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .row-menu__panel[hidden] { display: none; } .row-menu__item { text-align: left; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-size: 0.875rem; cursor: pointer; white-space: nowrap; } .row-menu__item:hover { background: var(--color-surface-alt); } .row-menu__item--danger { color: var(--color-critical); } /* Potwierdzenie usunięcia w miejscu — zamiast blokującego window.confirm() */ .confirm-inline { display: flex; gap: var(--space-2); align-items: center; font-size: 0.8125rem; } /* --------------------------------------------------------------------- 20. Powiadomienia (toasty) — nieblokujący odpowiednik alert() --------------------------------------------------------------------- */ .toast-container { position: fixed; /* + safe-area-inset-bottom: na iPhone z Face ID (X i nowsze) odsuwa toasty znad paska "home" na dole ekranu, żeby ich nie zasłaniał ani nie kolidował z gestem powrotu. */ bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); right: calc(var(--space-4) + env(safe-area-inset-right)); left: calc(var(--space-4) + env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); z-index: 100; pointer-events: none; } .toast { pointer-events: auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: 0.9rem; max-width: 360px; background: var(--color-surface); border: 1px solid var(--color-border); border-left-width: 4px; animation: toast-in 0.2s ease; } .toast--success { border-left-color: var(--color-good); } .toast--error { border-left-color: var(--color-critical); } .toast--warning { border-left-color: var(--color-warning); } .toast--info { border-left-color: var(--color-primary); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------------- 21. Stan ładowania (skeleton prosty) --------------------------------------------------------------------- */ .table-loading td { color: var(--color-text-muted); text-align: center; padding: var(--space-6); } /* --------------------------------------------------------------------- 22. Edytor składników przepisu — wyszukiwarka (autouzupełnianie), przyciski ikonowe (kolejność/usuń), podsumowanie makro na żywo --------------------------------------------------------------------- */ .autocomplete { position: relative; } .autocomplete__results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); max-height: 240px; overflow-y: auto; z-index: 30; box-shadow: var(--shadow-md); } .autocomplete__results.hidden { display: none; } .autocomplete__item { padding: var(--space-2) var(--space-3); cursor: pointer; border-bottom: 1px solid var(--color-border); } .autocomplete__item:last-child { border-bottom: none; } .autocomplete__item:hover { background: var(--color-surface-alt); } .icon-btn { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); width: 28px; height: 28px; line-height: 1; cursor: pointer; color: var(--color-text-secondary); } .icon-btn:hover { background: var(--color-surface-alt); } .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; } .ingredient-qty-input { width: 90px; padding: 0.4rem 0.6rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); text-align: right; font-variant-numeric: tabular-nums; } .ingredient-qty-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .macro-summary-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-md); font-size: 0.875rem; margin-bottom: var(--space-3); } .macro-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; } .macro-dot--protein { background: var(--color-protein); } .macro-dot--fat { background: var(--color-fat); } .macro-dot--carbs { background: var(--color-carbs); } .macro-dot--fiber { background: var(--color-fiber); } /* --------------------------------------------------------------------- 23. Plan dnia / wielodniowy — zakładki dni i sloty posiłków (Moduł 5) --------------------------------------------------------------------- */ .day-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .day-tab { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: 0.875rem; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; } .day-tab:hover { background: var(--color-surface-alt); } .day-tab--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .day-tab__date { font-weight: 400; opacity: 0.8; font-size: 0.75rem; } /* Pasek akcji nad slotami posiłków bieżącego dnia (kopiuj / zapisz jako szablon / zastosuj szablon) — te same przyciski co gdzie indziej. */ .day-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .meal-slot { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface); } .meal-slot__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); } .meal-slot__name { font-weight: 700; font-size: 1rem; } .meal-slot__kcal { font-size: 0.875rem; color: var(--color-text-secondary); } .meal-slot__assigned { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); } .meal-slot__recipe-info strong { display: block; margin-bottom: var(--space-1); } .meal-slot__controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .meal-slot__controls label { display: flex; align-items: center; gap: var(--space-1); font-size: 0.8125rem; color: var(--color-text-secondary); } .meal-servings-input { width: 70px; padding: 0.35rem 0.5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); text-align: right; font-variant-numeric: tabular-nums; } .meal-servings-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .meal-slot__search { position: relative; } .meal-slot__macro-mini { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: var(--space-1); } /* --------------------------------------------------------------------- 24. Lista zakupów — grupy kategorii, pozycje z checkboxem, wydruk (Moduł 6) --------------------------------------------------------------------- */ .shopping-category { margin-bottom: var(--space-5); } .shopping-category:last-child { margin-bottom: 0; } .shopping-category__title { font-size: 1rem; font-weight: 700; margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); } .shopping-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--color-border); } .shopping-item:last-child { border-bottom: none; } .shopping-item input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; cursor: pointer; } .shopping-item__name { flex: 1 1 auto; } .shopping-item__qty { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); white-space: nowrap; } /* Pozycja odznaczona jako kupiona — przekreślona i przygaszona, ale nadal czytelna (nie znika z listy, żeby łatwo było cofnąć pomyłkę). */ .shopping-item--checked .shopping-item__name, .shopping-item--checked .shopping-item__qty { text-decoration: line-through; color: var(--color-text-muted); } /* Widok wydruku: tylko sama lista (bez nawigacji, przycisków, stopki) — #printArea to jedyna treść strony w oknie drukowania. */ @media print { .site-header, .site-footer, .no-print { display: none !important; } body { background: #fff; } .card { box-shadow: none; border: none; padding: 0; } } /* --------------------------------------------------------------------- 25. Tryb ciemny — wyjątki komponentowe + przełącznik motywu Prawie cała reszta arkusza jest już oparta o zmienne z sekcji 1/1b, więc [data-theme="dark"] tam nie wymaga żadnych dodatkowych reguł — ta sekcja zawiera WYŁĄCZNIE komponenty, które celowo używają własnych, pastelowych kolorów tła (nie tokenów) i dlatego potrzebują osobnego ciemnego wariantu: statusy alertów i odznaka "Aktywny". --------------------------------------------------------------------- */ [data-theme="dark"] .alert--success { background: #123a12; color: #7fe07f; } [data-theme="dark"] .alert--error { background: #3a1414; color: #ff9b9b; } [data-theme="dark"] .alert--warning { background: #3a2c0a; color: #ffcf70; } [data-theme="dark"] .badge--active { background: #123a12; color: #7fe07f; } /* Przełącznik jasny/ciemny w nagłówku — ikonowy przycisk (☀/🌙), ten sam rozmiar i styl co .icon-btn używane w edytorze przepisu. */ .theme-toggle { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); width: 36px; height: 36px; line-height: 1; font-size: 1.05rem; cursor: pointer; color: var(--color-text-secondary); flex-shrink: 0; } .theme-toggle:hover { background: var(--color-surface-alt); }