/* ========================================================================== Aplikacja domowa — arkusz stylów. Pisany ręcznie i mobile-first. Bez frameworka CSS, bo plan hostingowy nie daje Node.js, a każdy krok kompilacji trzeba by wykonywać lokalnie i wgrywać FTP-em. Wszystkie kolory są tokenami, więc tryb ciemny to podmiana wartości, a nie druga wersja arkusza. Ta sama zasada niesie motywy: „Las" czy „Ocean" to jeden blok tokenów, nie drugi arkusz. Żadna reguła poniżej sekcji palet nie zna nazwy motywu — wszystkie sięgają po zmienne, więc nowy motyw przemalowuje całą aplikację i nie wymaga dotykania niczego innego. Jasność ma trzy stany, nie dwa: jasny, ciemny i „jak w telefonie". Ostatni nie stawia żadnej klasy na , więc rozstrzyga o nim wyłącznie zapytanie @media. Stąd układ trzech bloków na każdy motyw — kolejność w pliku jest tu istotna i opisana niżej. ========================================================================== */ :root { --color-bg: #f4f5f7; --color-surface: #ffffff; --color-border: #dfe3e8; --color-text: #1c2024; --color-text-muted: #5c6773; --color-accent: #1f6feb; --color-accent-text: #ffffff; --color-success-bg: #e6f4ea; --color-success-text: #1b5e20; --color-error-bg: #fdecea; --color-error-text: #8b1a10; --color-info-bg: #e8f0fe; --color-info-text: #14458c; --user-blue: #1f6feb; --user-green: #1f8b4c; --user-amber: #b26a00; --user-rose: #c2185b; --user-violet: #6a35c9; --user-teal: #00796b; --color-surface-muted: #eef0f3; --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); --radius: 12px; --radius-sm: 9px; --radius-lg: 16px; --gap: 16px; --peek-opacity: .18; --header-height: 56px; --tabbar-height: 60px; } /* ========================================================================== Jasność i motywy. Trzy stany jasności, nie dwa. „Jak w telefonie" nie stawia żadnej klasy na , więc rozstrzyga o nim wyłącznie @media. Wybór wprost stawia klasę brightness-light albo brightness-dark i musi wygrać z systemem — stąd zawężenie :not(.brightness-light) przy każdej regule z @media. Podział na bloki nie jest kosmetyczny. To, co zależy wyłącznie od jasności (kolory domowników, cienie, znaczenia „udało się" i „błąd"), musi być poza motywem: inaczej każdy nowy motyw musiałby je powtarzać, a zapomnienie jednej linijki dawałoby jasnozielony komunikat na czarnym tle. Reguły motywów mają po dwa selektory: jeden na , drugi na dowolny element w środku. Ten drugi istnieje dla podglądu na ekranie ustawień — karta z klasą theme-ocean maluje się własną paletą, choć aplikacja wokół niej ma inną. Bez tego podgląd pokazywałby cztery identyczne kafelki. ========================================================================== */ /* --- zależne wyłącznie od jasności --------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not(.brightness-light) { --color-success-bg: #16301f; --color-success-text: #86e0a3; --color-error-bg: #3a1a17; --color-error-text: #f5a79c; --shadow-card: none; --peek-opacity: .24; --user-blue: #4f8ff7; --user-green: #4bbd7a; --user-amber: #e0a03c; --user-rose: #ef6a9b; --user-violet: #a480f2; --user-teal: #35b3a2; } } :root.brightness-dark { --color-success-bg: #16301f; --color-success-text: #86e0a3; --color-error-bg: #3a1a17; --color-error-text: #f5a79c; --shadow-card: none; --peek-opacity: .24; --user-blue: #4f8ff7; --user-green: #4bbd7a; --user-amber: #e0a03c; --user-rose: #ef6a9b; --user-violet: #a480f2; --user-teal: #35b3a2; } /* --- palety motywów: jasne ------------------------------------------------ */ /* * Motyw domyślny powtarza to, co stoi w :root. Nie jest to nadmiarowe: * :root jest zabezpieczeniem na wypadek strony bez klasy motywu, a klasa jest * potrzebna kafelkowi podglądu, który musi pokazać paletę domyślną nawet * wtedy, gdy aplikacja wokół chodzi na Oceanie. */ .theme-default { --color-bg: #f4f5f7; --color-surface: #ffffff; --color-surface-muted: #eef0f3; --color-border: #dfe3e8; --color-text: #1c2024; --color-text-muted: #5c6773; --color-accent: #1f6feb; --color-accent-text: #ffffff; --color-info-bg: #e8f0fe; --color-info-text: #14458c; } .theme-forest { --color-bg: #f1f4ee; --color-surface: #ffffff; --color-surface-muted: #e6ede0; --color-border: #dbe3d6; --color-text: #1b2419; --color-text-muted: #5b6b57; --color-accent: #2f6b3f; --color-accent-text: #ffffff; --color-info-bg: #e4efe4; --color-info-text: #1f5a2e; } .theme-ocean { --color-bg: #eef4f7; --color-surface: #ffffff; --color-surface-muted: #e2edf2; --color-border: #d5e2e9; --color-text: #16232a; --color-text-muted: #526874; --color-accent: #0f6d86; --color-accent-text: #ffffff; --color-info-bg: #dfeef4; --color-info-text: #0d5468; } .theme-meadow { --color-bg: #f8f3ea; --color-surface: #fffdf9; --color-surface-muted: #f1e8d9; --color-border: #e8dfcd; --color-text: #2a2318; --color-text-muted: #6d6353; --color-accent: #a9552c; --color-accent-text: #ffffff; --color-info-bg: #f6e8dc; --color-info-text: #8a4522; } .theme-savanna { --color-bg: #f7f2e2; --color-surface: #fffdf6; --color-surface-muted: #efe8d0; --color-border: #e3dabe; --color-text: #2b2718; --color-text-muted: #6c6550; --color-accent: #8a6a1c; --color-accent-text: #ffffff; --color-info-bg: #f2e9cf; --color-info-text: #6f5514; } .theme-pond { --color-bg: #edf3ef; --color-surface: #ffffff; --color-surface-muted: #dfe9e2; --color-border: #d2e0d7; --color-text: #17241d; --color-text-muted: #52685e; --color-accent: #2c6f5f; --color-accent-text: #ffffff; --color-info-bg: #dcece5; --color-info-text: #1f5a4c; } .theme-winter { --color-bg: #f1f4f7; --color-surface: #ffffff; --color-surface-muted: #e6eaef; --color-border: #d9dfe6; --color-text: #1a2028; --color-text-muted: #5b6672; --color-accent: #46647d; --color-accent-text: #ffffff; --color-info-bg: #e4ecf3; --color-info-text: #33506a; } .theme-mountains { --color-bg: #f4f2ef; --color-surface: #fffefd; --color-surface-muted: #e8e4de; --color-border: #dcd7cf; --color-text: #232120; --color-text-muted: #67615a; --color-accent: #6a5f52; --color-accent-text: #ffffff; --color-info-bg: #eae5dd; --color-info-text: #55493c; } /* --- palety motywów: ciemne, gdy jasność idzie za telefonem --------------- */ @media (prefers-color-scheme: dark) { :root:not(.brightness-light).theme-default, :root:not(.brightness-light) .theme-default { --color-bg: #14171a; --color-surface: #1e2226; --color-surface-muted: #262b31; --color-border: #30363d; --color-text: #e6e9ec; --color-text-muted: #9aa4af; --color-accent: #4f8ff7; --color-accent-text: #0b1017; --color-info-bg: #16263f; --color-info-text: #a9c9ff; } :root:not(.brightness-light).theme-forest, :root:not(.brightness-light) .theme-forest { --color-bg: #131811; --color-surface: #1c2319; --color-surface-muted: #232b1f; --color-border: #2e3a29; --color-text: #e6ebe2; --color-text-muted: #9aa895; --color-accent: #6fbb7f; --color-accent-text: #0c130c; --color-info-bg: #1a2c1d; --color-info-text: #93d3a2; } :root:not(.brightness-light).theme-ocean, :root:not(.brightness-light) .theme-ocean { --color-bg: #0f171b; --color-surface: #182228; --color-surface-muted: #1f2c33; --color-border: #2a3b44; --color-text: #e2ecf0; --color-text-muted: #93a7b1; --color-accent: #46b6cf; --color-accent-text: #06131a; --color-info-bg: #142a33; --color-info-text: #7fd0e4; } :root:not(.brightness-light).theme-meadow, :root:not(.brightness-light) .theme-meadow { --color-bg: #191510; --color-surface: #221d16; --color-surface-muted: #29231b; --color-border: #3a3226; --color-text: #efe7da; --color-text-muted: #ab9f8d; --color-accent: #e2a267; --color-accent-text: #17110a; --color-info-bg: #2e2118; --color-info-text: #f0bd8d; } :root:not(.brightness-light).theme-savanna, :root:not(.brightness-light) .theme-savanna { --color-bg: #16140d; --color-surface: #1f1c13; --color-surface-muted: #262218; --color-border: #3a3423; --color-text: #eee8d6; --color-text-muted: #a89f86; --color-accent: #d4ab4e; --color-accent-text: #14110a; --color-info-bg: #2b2415; --color-info-text: #e5c680; } :root:not(.brightness-light).theme-pond, :root:not(.brightness-light) .theme-pond { --color-bg: #101614; --color-surface: #1a221e; --color-surface-muted: #232e29; --color-border: #2c3a34; --color-text: #e2ece7; --color-text-muted: #93a89f; --color-accent: #5fbfa4; --color-accent-text: #06130f; --color-info-bg: #142620; --color-info-text: #8fd9c4; } :root:not(.brightness-light).theme-winter, :root:not(.brightness-light) .theme-winter { --color-bg: #101418; --color-surface: #191f25; --color-surface-muted: #212831; --color-border: #2f3841; --color-text: #e4e9ee; --color-text-muted: #98a3ae; --color-accent: #8fb4d0; --color-accent-text: #0a0f14; --color-info-bg: #182430; --color-info-text: #b9d3e6; } :root:not(.brightness-light).theme-mountains, :root:not(.brightness-light) .theme-mountains { --color-bg: #161513; --color-surface: #1f1e1b; --color-surface-muted: #292520; --color-border: #37332c; --color-text: #ebe8e2; --color-text-muted: #a39d93; --color-accent: #c1ac92; --color-accent-text: #14120f; --color-info-bg: #262119; --color-info-text: #ddcbb2; } } /* --- palety motywów: ciemna wybrana wprost -------------------------------- */ :root.brightness-dark.theme-default, :root.brightness-dark .theme-default { --color-bg: #14171a; --color-surface: #1e2226; --color-surface-muted: #262b31; --color-border: #30363d; --color-text: #e6e9ec; --color-text-muted: #9aa4af; --color-accent: #4f8ff7; --color-accent-text: #0b1017; --color-info-bg: #16263f; --color-info-text: #a9c9ff; } :root.brightness-dark.theme-forest, :root.brightness-dark .theme-forest { --color-bg: #131811; --color-surface: #1c2319; --color-surface-muted: #232b1f; --color-border: #2e3a29; --color-text: #e6ebe2; --color-text-muted: #9aa895; --color-accent: #6fbb7f; --color-accent-text: #0c130c; --color-info-bg: #1a2c1d; --color-info-text: #93d3a2; } :root.brightness-dark.theme-ocean, :root.brightness-dark .theme-ocean { --color-bg: #0f171b; --color-surface: #182228; --color-surface-muted: #1f2c33; --color-border: #2a3b44; --color-text: #e2ecf0; --color-text-muted: #93a7b1; --color-accent: #46b6cf; --color-accent-text: #06131a; --color-info-bg: #142a33; --color-info-text: #7fd0e4; } :root.brightness-dark.theme-meadow, :root.brightness-dark .theme-meadow { --color-bg: #191510; --color-surface: #221d16; --color-surface-muted: #29231b; --color-border: #3a3226; --color-text: #efe7da; --color-text-muted: #ab9f8d; --color-accent: #e2a267; --color-accent-text: #17110a; --color-info-bg: #2e2118; --color-info-text: #f0bd8d; } :root.brightness-dark.theme-savanna, :root.brightness-dark .theme-savanna { --color-bg: #16140d; --color-surface: #1f1c13; --color-surface-muted: #262218; --color-border: #3a3423; --color-text: #eee8d6; --color-text-muted: #a89f86; --color-accent: #d4ab4e; --color-accent-text: #14110a; --color-info-bg: #2b2415; --color-info-text: #e5c680; } :root.brightness-dark.theme-pond, :root.brightness-dark .theme-pond { --color-bg: #101614; --color-surface: #1a221e; --color-surface-muted: #232e29; --color-border: #2c3a34; --color-text: #e2ece7; --color-text-muted: #93a89f; --color-accent: #5fbfa4; --color-accent-text: #06130f; --color-info-bg: #142620; --color-info-text: #8fd9c4; } :root.brightness-dark.theme-winter, :root.brightness-dark .theme-winter { --color-bg: #101418; --color-surface: #191f25; --color-surface-muted: #212831; --color-border: #2f3841; --color-text: #e4e9ee; --color-text-muted: #98a3ae; --color-accent: #8fb4d0; --color-accent-text: #0a0f14; --color-info-bg: #182430; --color-info-text: #b9d3e6; } :root.brightness-dark.theme-mountains, :root.brightness-dark .theme-mountains { --color-bg: #161513; --color-surface: #1f1e1b; --color-surface-muted: #292520; --color-border: #37332c; --color-text: #ebe8e2; --color-text-muted: #a39d93; --color-accent: #c1ac92; --color-accent-text: #14120f; --color-info-bg: #262119; --color-info-text: #ddcbb2; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* * Odnośnik bez klasy bierze kolor akcentu, a nie domyślny błękit przeglądarki. * Bez tej reguły „Zobacz cały dzień" czy „Otwórz listę zakupów" były w trybie * ciemnym granatem na czerni — teoretycznie widoczne, praktycznie nie. * Komponenty, które mają własny kolor (przyciski, nawigacja, pozycje list), * nadpisują ją wyższą specyficznością i nic tu nie tracą. */ a { color: var(--color-accent); } /* --- układ --------------------------------------------------------------- */ .app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .app__header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); height: var(--header-height); padding: 0 var(--gap); background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 10; } .app__brand { font-weight: 600; letter-spacing: -0.01em; } .app__account { display: flex; align-items: center; gap: 12px; } .app__main { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: var(--gap); /* Miejsce na dolną nawigację, żeby nie zasłaniała treści na telefonie. */ padding-bottom: calc(var(--tabbar-height) + var(--gap) + env(safe-area-inset-bottom)); /* Nad sylwetką zwierzaka, która leży na dnie ekranu. Bez position warstwa nie miałaby znaczenia i rysunek wszedłby na treść. */ position: relative; z-index: 1; } /* --- nawigacja ----------------------------------------------------------- */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: stretch; height: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--color-surface); border-top: 1px solid var(--color-border); z-index: 10; } .tabbar__item { display: flex; align-items: center; justify-content: center; flex: 1; font-size: 13px; text-decoration: none; color: var(--color-text-muted); /* Cel dotknięcia nie mniejszy niż zalecane 44 px. */ min-height: 44px; } .tabbar__item.is-active { color: var(--color-accent); font-weight: 600; box-shadow: inset 0 2px 0 0 var(--color-accent); } /* --- karty i typografia -------------------------------------------------- */ .page-title { margin: 0 0 var(--gap); font-size: 22px; letter-spacing: -0.02em; } .cards { display: grid; gap: var(--gap); grid-template-columns: 1fr; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--gap); } .card__title { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .card__empty { margin: 0; color: var(--color-text-muted); font-size: 14px; } .hint { margin-top: var(--gap); font-size: 13px; color: var(--color-text-muted); } /* --- elementy formularzy -------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius); background: var(--color-accent); color: var(--color-accent-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .button--quiet { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); font-weight: 500; padding: 0 12px; min-height: 36px; } .button--outline { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .button--wide { display: flex; width: 100%; } .field { display: block; text-align: left; margin-bottom: var(--gap); } .field__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; } .field__input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); /* 16 px to najmniejszy rozmiar, przy którym Safari na iPhonie nie przybliża widoku po dotknięciu pola. */ font: inherit; font-size: 16px; } .field__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } .field__input--multiline { min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; } /* --- panel administratora ------------------------------------------------- */ .members { list-style: none; margin: 0 0 var(--gap); padding: 0; } .member { display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); flex-wrap: wrap; } .member__identity { flex: 1 1 180px; min-width: 0; } .member__name { display: block; font-weight: 600; color: var(--color-text); } .member__email, .member__meta { display: block; font-size: 13px; color: var(--color-text-muted); overflow-wrap: anywhere; } .member__actions { display: flex; gap: 8px; flex-wrap: wrap; } .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--color-info-bg); color: var(--color-info-text); } .badge--active { background: var(--color-success-bg); color: var(--color-success-text); } /* Plakietka bywa też odnośnikiem — w nagłówku prowadzi do listy zgłoszeń. Kolor bierze z modyfikatora, więc domyślne podkreślenie odnośnika trzeba wyłączyć. */ a.badge { text-decoration: none; } /* Wezwanie do działania, nie stan: mocny czerwony, nie pastel jak pozostałe plakietki. Ta jedna ma zostać zauważona. */ .badge--alert { background: var(--color-error-text); color: #ffffff; font-weight: 700; } .badge--disabled { background: var(--color-error-bg); color: var(--color-error-text); } /* --- pasek nawigacji po datach -------------------------------------------- */ .calbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; } .calbar__title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; text-align: center; text-transform: capitalize; } .calbar__year { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-muted); text-transform: none; letter-spacing: 0.02em; } .iconbutton { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 20px; line-height: 1; text-decoration: none; } .iconbutton:hover { color: var(--color-text); border-color: var(--color-text-muted); } /* --- siatka miesiąca ------------------------------------------------------ */ .month { padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); } .month__weekdays, .month__grid { display: grid; grid-template-columns: repeat(7, 1fr); } .month__weekdays { margin-bottom: 2px; } .month__weekday { padding: 6px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; color: var(--color-text-muted); } .month__weekday.is-weekend { color: var(--color-accent); } .month__grid { gap: 2px; } /* Stała proporcja komórki jest tu najważniejsza: wysokość nie zależy od tego, ile wydarzeń wypada danego dnia, więc dołożenie wpisu nie rozpycha siatki. */ .mday { display: flex; flex-direction: column; align-items: center; gap: 5px; aspect-ratio: 1 / 1; padding-top: 5px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; overflow: hidden; } .mday:hover { background: var(--color-surface-muted); } .mday__number { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; font-size: 14px; font-variant-numeric: tabular-nums; } .mday--weekend .mday__number { color: var(--color-text-muted); } .mday--outside { opacity: 0.4; } .mday--today .mday__number { background: var(--color-accent); color: var(--color-accent-text); font-weight: 700; } .mday__dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; min-height: 7px; padding: 0 2px; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--avatar-color, var(--color-accent)); } .mday__overflow { font-size: 10px; line-height: 1; color: var(--color-text-muted); } /* --- plan dnia ------------------------------------------------------------ */ .daytag { display: inline-block; margin: 0 0 12px; padding: 2px 10px; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-text); font-size: 12px; font-weight: 600; } .empty { margin: 0 0 var(--gap); padding: 28px 16px; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-muted); text-align: center; } .agenda { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: 8px; } .agenda__item { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); } /* Kolorowy pasek zamiast kropki: w liście czyta się go jednym spojrzeniem, nawet gdy pozycji jest kilkanaście. */ .agenda__rail { width: 4px; flex: none; border-radius: 999px; background: var(--avatar-color, var(--color-accent)); } /* Cały wiersz jest odnośnikiem do szczegółów — na telefonie trafienie w sam tytuł bywa loterią. */ .agenda__main { display: block; min-width: 0; flex: 1; color: inherit; text-decoration: none; } .agenda__time { display: block; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-muted); } .agenda__title { display: block; margin-top: 1px; color: var(--color-text); font-size: 16px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; } .agenda__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--color-text-muted); overflow-wrap: anywhere; } .agenda__chevron { align-self: center; flex: none; color: var(--color-text-muted); font-size: 20px; line-height: 1; } /* --- szczegóły wydarzenia ------------------------------------------------- */ .detail__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .detail__title { margin: 0 0 var(--gap); font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; } .facts-list { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 10px 16px; margin: 0; font-size: 15px; } .facts-list dt { color: var(--color-text-muted); font-size: 13px; padding-top: 2px; } .facts-list dd { margin: 0; overflow-wrap: anywhere; } .facts-list__strong { font-weight: 600; font-variant-numeric: tabular-nums; } .people-row { display: flex; flex-wrap: wrap; gap: 6px; } .detail__notes { margin-top: var(--gap); padding-top: var(--gap); border-top: 1px solid var(--color-border); } .detail__text { margin: 0; color: var(--color-text); overflow-wrap: anywhere; } /* --- lista zakupów -------------------------------------------------------- */ .listgroup__title { margin: var(--gap) 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .checklist__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } /* Kwadrat zamiast systemowego pola wyboru: to przycisk formularza, bo bez JavaScriptu odhaczenie musi być wysłaniem żądania, a nie zmianą stanu. */ .checkbox { display: grid; place-items: center; width: 26px; height: 26px; flex: none; padding: 0; border: 2px solid var(--color-border); border-radius: 7px; background: var(--color-surface); color: var(--color-accent-text); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; } .checkbox--checked { border-color: var(--color-accent); background: var(--color-accent); } .checklist__label { flex: 1; min-width: 0; } .checklist__name { display: block; overflow-wrap: anywhere; } .checklist--done .checklist__name { color: var(--color-text-muted); text-decoration: line-through; } .checklist__quantity, .checklist__by { display: block; font-size: 13px; color: var(--color-text-muted); } /* --- skaner kodów kreskowych ---------------------------------------------- */ /* Podglądu nie ma w szablonie na widoku — atrybut hidden musi wygrać z układem, który nadajemy niżej, bo domyślny styl przeglądarki przegrywa z każdą własną regułą display. */ .scanner[hidden] { display: none; } .scanner { display: grid; gap: 10px; margin-bottom: var(--gap); } /* Kadr ma stałe proporcje, żeby panel nie skakał w chwili, gdy kamera podaje pierwszą klatkę i przeglądarka poznaje wymiary obrazu. */ .scanner__viewport { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: #000000; } .scanner__video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Ramka celownicza: kod trzeba ustawić w poprzek, a nie gdziekolwiek w kadrze. Sam obraz z kamery tego nie podpowiada, a bez podpowiedzi ludzie celują środkiem telefonu i dziwią się, że nic się nie dzieje. */ .scanner__frame { position: absolute; top: 50%; left: 8%; right: 8%; height: 26%; transform: translateY(-50%); border: 2px solid rgba(255, 255, 255, 0.9); border-radius: var(--radius-sm); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); } /* Komunikat żyje poza podglądem, więc zostaje na ekranie po zgaszeniu kamery. To celowe: „nie znam tego kodu, wpisz nazwę" musi być widoczne właśnie wtedy, gdy podgląd już się zwinął, a domownik sięga do klawiatury. */ .scanner__status { margin: 0 0 var(--gap); padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-info-bg); color: var(--color-info-text); font-size: 14px; } .scanner__status[hidden] { display: none; } .scanner__forget { color: inherit; text-decoration: underline; } .scanner__start { margin-bottom: var(--gap); } /* --- tablica notatek ------------------------------------------------------ */ .board { list-style: none; margin: var(--gap) 0 0; padding: 0; display: grid; gap: 10px; } .note { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); } /* Przypięta kartka dostaje pasek z boku — na korkowej tablicy odpowiednikiem jest pinezka, tutaj musi wystarczyć coś, co widać kątem oka. */ .note--pinned { border-left: 4px solid var(--color-accent); } .note__title { margin: 0 0 6px; font-size: 16px; overflow-wrap: anywhere; } .note__body { margin: 0; overflow-wrap: anywhere; } .note__meta { margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); } .note__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); } /* --- skróty na stronie głównej -------------------------------------------- */ .minilist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .minilist__item { display: flex; gap: 8px; align-items: baseline; font-size: 14px; } .minilist__lead { flex: none; font-variant-numeric: tabular-nums; color: var(--color-text-muted); } .minilist__link { color: var(--color-text); overflow-wrap: anywhere; } .byline { display: flex; align-items: center; gap: 8px; margin: var(--gap) 0 0; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-muted); } .linkbutton { padding: 0; border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; } .linkbutton:hover { color: var(--color-text); } /* --- karty formularza ----------------------------------------------------- */ .panel { margin: 0 0 12px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); } .panel--quiet { background: var(--color-surface-muted); box-shadow: none; } .panel__title { margin: 0 0 4px; font-size: 15px; font-weight: 600; } .panel__hint { margin: 0 0 14px; font-size: 13px; color: var(--color-text-muted); } .field--last { margin-bottom: 0; } .field__optional { font-weight: 400; color: var(--color-text-muted); } .field-pair { display: flex; gap: 12px; } .field-pair .field { flex: 1; min-width: 0; } .switch { display: flex; align-items: center; gap: 10px; margin-bottom: var(--gap); font-size: 15px; cursor: pointer; } .switch input { width: 20px; height: 20px; accent-color: var(--color-accent); } /* --- wybór osób i dni tygodnia -------------------------------------------- */ .people { display: flex; flex-wrap: wrap; gap: 8px; } .person input, .weekday input, .kind input { position: absolute; opacity: 0; width: 0; height: 0; } .person__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 14px; cursor: pointer; } .person input:checked + .person__chip { border-color: var(--color-accent); background: var(--color-info-bg); color: var(--color-info-text); font-weight: 600; } /* Obrys pojawia się przy poruszaniu się klawiaturą — pole wyboru jest ukryte, więc bez tego nie byłoby widać, na czym stoi zaznaczenie. */ .person input:focus-visible + .person__chip, .weekday input:focus-visible + .weekday__chip, .kind input:focus-visible + .kind__chip { outline: 2px solid var(--color-accent); outline-offset: 2px; } .weekdays { display: flex; flex-wrap: wrap; gap: 6px; } .weekday__chip { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 14px; cursor: pointer; } .weekday input:checked + .weekday__chip { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-text); font-weight: 600; } /* --- ostrzeżenia i listy faktów ------------------------------------------- */ .notice { margin: 0 0 var(--gap); padding: 12px 14px; border-radius: var(--radius); font-size: 14px; } .notice--warning { background: var(--color-error-bg); color: var(--color-error-text); } .facts { margin: 0 0 var(--gap); padding-left: 20px; font-size: 14px; color: var(--color-text-muted); } .facts li { margin-bottom: 4px; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .button--danger { background: var(--color-error-text); color: #ffffff; border-color: transparent; } /* --- dziennik zdarzeń ----------------------------------------------------- */ .log { list-style: none; margin: 0 0 var(--gap); padding: 0; font-size: 13px; } .log__item { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); } /* Odrzucone próby mają zostać widoczne przy przewijaniu listy — o nie chodzi w całym tym ekranie. */ .log__item--rejected { background: var(--color-error-bg); color: var(--color-error-text); } .log__time { font-variant-numeric: tabular-nums; color: var(--color-text-muted); } .log__action { font-weight: 600; } .log__detail, .log__ip { color: var(--color-text-muted); overflow-wrap: anywhere; } /* --- pasek nowych zgłoszeń ------------------------------------------------ */ /* Czerwony, bo ma być zauważony, ale nie krzykliwy: tło pastelowe i ciemny tekst, tak jak komunikat błędu, a nie odwrotnie. Pasek pojawia się rzadko i znika po dotknięciu, więc nie ma powodu, żeby przez ten czas przytłaczał ekran startowy. */ .alertbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--gap); padding: 10px 14px; border: 1px solid var(--color-error-text); border-radius: var(--radius-lg); background: var(--color-error-bg); color: var(--color-error-text); font-size: 14px; } /* Tekst zabiera całą wolną szerokość, więc oba przyciski lądują przy prawej krawędzi — a gdy zabraknie miejsca, spadają razem do drugiego wiersza zamiast rozjeżdżać się po jednym. */ .alertbar__text { flex: 1; min-width: 0; font-weight: 600; } /* Przyciski dziedziczą czerwień paska, żeby nie wyglądały jak wklejone z innego ekranu. */ .alertbar__action { border-color: var(--color-error-text); color: var(--color-error-text); } /* --- awatary ------------------------------------------------------------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--avatar-color, var(--color-accent)); color: #ffffff; font-size: 13px; font-weight: 700; flex: none; /* Awatar prowadzi do ustawień, więc jest odnośnikiem — ale ma wyglądać jak plakietka, nie jak podkreślony link. */ text-decoration: none; } .color-blue { --avatar-color: var(--user-blue); } .color-green { --avatar-color: var(--user-green); } .color-amber { --avatar-color: var(--user-amber); } .color-rose { --avatar-color: var(--user-rose); } .color-violet { --avatar-color: var(--user-violet); } .color-teal { --avatar-color: var(--user-teal); } /* --- komunikaty ---------------------------------------------------------- */ .flash { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: 8px; } .flash__item { padding: 12px 14px; border-radius: var(--radius); font-size: 14px; } .flash__item--success { background: var(--color-success-bg); color: var(--color-success-text); } .flash__item--error { background: var(--color-error-bg); color: var(--color-error-text); } .flash__item--info { background: var(--color-info-bg); color: var(--color-info-text); } /* --- logowanie ----------------------------------------------------------- */ .signin { max-width: 360px; margin: 12vh auto 0; text-align: center; } .signin__title { margin: 0 0 8px; font-size: 26px; letter-spacing: -0.02em; } /* Ekran logowania nie ma zdania pod nagłówkiem, a to ono trzymało odstęp do pierwszego przycisku. Modyfikator zamiast :has(), bo jeden jawny modyfikator czyta się lepiej niż selektor warunkowy. */ .signin__title--alone { margin-bottom: 24px; } .signin__lead { margin: 0 0 24px; color: var(--color-text-muted); font-size: 15px; } .signin__or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--color-text-muted); font-size: 13px; } .signin__or::before, .signin__or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); } /* --- zgłoszenia od domowników --------------------------------------------- */ .kinds { display: flex; gap: 8px; } .kind__chip { display: inline-block; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 14px; cursor: pointer; } .kind input:checked + .kind__chip { border-color: var(--color-accent); background: var(--color-info-bg); color: var(--color-info-text); font-weight: 600; } /* Rodzaj zgłoszenia odróżniamy odcieniem, stan — nasyceniem. Dzięki temu dwa znaczniki obok siebie nie zlewają się w jedną plamę koloru. */ .kind--bug { background: var(--color-error-bg); color: var(--color-error-text); } .kind--idea { background: var(--color-surface-muted); color: var(--color-text); } .badge--feedback-new { background: var(--color-info-bg); color: var(--color-info-text); } .badge--feedback-done { background: var(--color-success-bg); color: var(--color-success-text); } .badge--feedback-rejected { background: var(--color-surface-muted); color: var(--color-text-muted); } .reports { list-style: none; margin: var(--gap) 0 0; padding: 0; display: grid; gap: 12px; } .report { padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); } /* Zamknięte zgłoszenia zostają na liście, ale schodzą na drugi plan — historia jest przydatna, tylko nie ma konkurować z tym, co czeka. */ .report--closed { opacity: 0.65; } .report__tags { display: flex; gap: 6px; margin-bottom: 8px; } .report__body { margin: 0; overflow-wrap: anywhere; } .report__meta { margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); } .report__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); } /* --- przełącznik widoku: miesiąc / tydzień -------------------------------- */ /* Pigułka z dwoma polami zamiast dwóch osobnych przycisków: od razu widać, że to wybór jednego z dwóch stanów, a nie dwie niezależne akcje. */ .viewswitch { display: flex; gap: 2px; margin: 0 0 var(--gap); padding: 3px; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 999px; } .viewswitch__option { flex: 1; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .viewswitch__option.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); } /* --- widok tygodnia ------------------------------------------------------- */ /* Pasek bez strzałek. Został przy planie zajęć, bo tam tydzień jest zawsze ten sam i nie ma dokąd iść; kalendarz swój tydzień przewija i używa zwykłego .calbar ze strzałkami. */ .calbar--plain { justify-content: center; } .week { display: grid; gap: 18px; margin: 0 0 var(--gap); } /* Dzień nie jest kartą, tylko nagłówkiem nad listą. Karta w karcie (bo wpisy mają już własne ramki) robi się na telefonie ciężka. */ .wday { display: grid; gap: 8px; } .wday__head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; color: inherit; text-decoration: none; } .wday__name { font-size: 15px; font-weight: 700; text-transform: capitalize; } .wday__date { font-size: 13px; color: var(--color-text-muted); } .wday__badge { margin: 0 0 0 auto; } .wday--weekend .wday__date { color: var(--color-accent); } .wday--today .wday__name { color: var(--color-accent); } /* Lista wpisów wewnątrz dnia nie potrzebuje własnego marginesu — odstępy między dniami daje siatka .week. */ .wday .agenda { margin: 0; } .wday__empty { margin: 0; padding: 10px 14px; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-muted); font-size: 14px; } /* --- plan zajęć ----------------------------------------------------------- */ /* Wybór osoby. Awatary same w sobie są zakładkami, więc pasek nie ma ramki ani tła — inaczej konkurowałby o uwagę z przełącznikiem widoku pod nim. Nazwa nie brzmi .people, bo ta jest już zajęta przez wybór uczestników w formularzu wydarzenia; nasz arkusz jest wczytywany w całości i późniejsza reguła o tej samej nazwie po cichu przemalowałaby tamten ekran. */ .peopletabs { /* Zasięg obwódki zaznaczonego awatara. Ta sama liczba jest tutaj w wyściółce i niżej w cieniu, i musi być jedna: obwódka wychodzi poza kółko, a pasek ją przycina (patrz overflow niżej). */ --ring-width: 4px; display: flex; gap: 12px; margin: 0 0 var(--gap); padding: var(--ring-width) 0; /* Przy sześciu domownikach lista nie mieści się na telefonie. Przewijanie w poziomie jest tu lepsze od zawijania: pasek zostaje jednym paskiem i nie przesuwa treści pod sobą, gdy kont przybywa. Uwaga: samo overflow-x nie przewija tylko w poziomie. Gdy jedna oś przestaje być „visible", druga też przestaje nią być — przeglądarka liczy ją jako „auto" i pasek zaczyna PRZYCINAĆ także z góry i z dołu. Stąd wyściółka wyżej; bez niej obwódka zaznaczonego awatara jest ucięta równo z krawędzią kółka. */ overflow-x: auto; } .peopletabs__item { display: flex; flex: none; width: 64px; flex-direction: column; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 12px; text-decoration: none; } .peopletabs__item.is-active { color: var(--color-text); font-weight: 600; } /* Obwódka rysowana cieniem, a nie ramką: ramka zmieniłaby rozmiar awatara i pasek drgałby przy przełączaniu osoby. Pierwszy cień odsuwa drugi od krawędzi kółka, żeby kolor domownika nie stykał się z kolorem akcentu. */ .peopletabs__item.is-active .avatar { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 var(--ring-width) var(--color-accent); } .peopletabs__name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Zajęcia trwające w tej chwili — widok dnia. Obwódka rysowana cieniem, a nie grubszą ramką: ramka zmieniłaby wysokość wiersza i lista drgałaby co kilkadziesiąt minut, gdy obwódka przeskakuje na kolejne zajęcia. Cień karty zostaje, bo inaczej wyróżniony wiersz straciłby głębię pozostałych. */ .agenda__item--now { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-card); } /* Ramka wokół dzisiejszego dnia — w kalendarzu wystarcza inny kolor podpisu, bo każdy dzień ma tam datę. Plan zajęć dat nie ma i bez ramki siedem dni wygląda identycznie. */ .week--plan .wday--today { padding: 10px 12px; border: 2px solid var(--color-accent); border-radius: var(--radius-lg); } /* --- strony błędów ------------------------------------------------------- */ .error-page { max-width: 420px; margin: 12vh auto 0; text-align: center; } .error-page__code { margin: 0; font-size: 48px; font-weight: 800; color: var(--color-text-muted); letter-spacing: -0.04em; } .error-page__icon { display: block; margin: 0 auto 16px; border-radius: 18px; } .error-page__title { margin: 0 0 8px; font-size: 20px; } .error-page__message { margin: 0 0 24px; color: var(--color-text-muted); } /* --- desktop ------------------------------------------------------------- */ @media (min-width: 700px) { .cards { grid-template-columns: repeat(3, 1fr); } .app__main { padding-bottom: var(--gap); } /* Na dużym ekranie nawigacja wraca pod nagłówek. Kolejność ustawiamy jawnie, bo w HTML-u tabbar jest ostatni — tam gdzie na telefonie ma być na dole. */ .app__header { order: 1; } .tabbar { order: 2; } .app__main { order: 3; } .tabbar { position: static; height: auto; border-top: none; border-bottom: 1px solid var(--color-border); justify-content: flex-start; gap: 4px; padding: 0 var(--gap); } .tabbar__item { flex: none; padding: 12px 16px; font-size: 14px; } /* Na dużym ekranie kwadratowe komórki wyglądają na przesadnie wysokie — klasyczny kalendarz ścienny jest szerszy niż wyższy. */ .mday { aspect-ratio: 1.3 / 1; gap: 7px; padding-top: 8px; } .month { padding: 10px; } .calbar__title { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* --- pas powitalny i zwierzak -------------------------------------------- */ /* * Motyw ze zwierzakiem pokazuje go w dwóch miejscach: w pasku za powitaniem * na pulpicie i przy dolnej krawędzi ekranu, na wszystkich zakładkach. * * Powód tego podziału jest w układzie strony. Karty są nieprzezroczyste, więc * tapeta rozciągnięta na całą stronę wychodzi wyłącznie w 16-pikselowej ramce * i w szczelinach między kartami — czyli w paskach zbyt wąskich, żeby cokolwiek * było na nich widać. Pas powitalny i puste miejsce pod ostatnią kartą to * jedyne dwa obszary, gdzie rysunek ma się gdzie zmieścić. * * Zmienna --ko trzyma kolor tła pod sylwetką. Kształty w klasie „ko" (oko lisa, * biała kita ogona) są nim malowane, a tło jest w tych dwóch miejscach różne: * pasek stoi na --color-surface-muted, dolna krawędź na --color-bg. */ .peek { position: fixed; right: 4px; bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); z-index: 0; width: 140px; color: var(--color-accent); opacity: var(--peek-opacity); pointer-events: none; --ko: var(--color-bg); } .hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; /* Ujemne marginesy boczne wyprowadzają pasek poza wcięcie głównej kolumny, żeby na telefonie sięgał krawędzi ekranu. */ margin: 0 calc(var(--gap) * -1) var(--gap); padding: var(--gap); min-height: 118px; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); --ko: var(--color-surface-muted); } /* Do góry pasek wychodzi tylko wtedy, gdy nic nad nim nie stoi. Komunikat po zapisie jest pierwszym elementem strony i pasek nie ma go zasłaniać. */ .app__main > .hero:first-child { margin-top: calc(var(--gap) * -1); } .hero__title { position: relative; z-index: 1; margin: 0; } .hero__art { position: absolute; right: 8px; bottom: -6px; width: 118px; color: var(--color-accent); opacity: .88; } .peek svg, .hero__art svg { display: block; width: 100%; height: auto; } /* Każde zwierzę ma inne proporcje: lis jest niemal kwadratowy, jeż płaski i szeroki, ośmiornica wysoka. Jedna szerokość dla wszystkich dałaby jeża wielkości znaczka i ośmiornicę na pół ekranu. */ .peek.animal--octopus { width: 126px; } .peek.animal--hedgehog { width: 176px; } .hero__art.animal--octopus { width: 106px; } .hero__art.animal--hedgehog { width: 152px; bottom: 0; } .peek.animal--elephant { width: 154px; } .peek.animal--frog { width: 168px; } .peek.animal--bear { width: 160px; } .peek.animal--chamois { width: 150px; } .hero__art.animal--elephant { width: 128px; } .hero__art.animal--frog { width: 140px; bottom: 0; } .hero__art.animal--bear { width: 134px; bottom: 0; } .hero__art.animal--chamois { width: 124px; } /* --- wybór motywu -------------------------------------------------------- */ .themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; } .themepick input { position: absolute; opacity: 0; width: 0; height: 0; } /* * Kafelek nosi klasę swojego motywu, więc maluje się jego tokenami — tło, * obramowanie i tekst włącznie. To nie jest próbka koloru obok nazwy, tylko * kawałek aplikacji w danym motywie. */ .themepick__card { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); cursor: pointer; } .themepick input:checked + .themepick__card { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } /* Obrys przy poruszaniu się klawiaturą — pole wyboru jest ukryte, więc bez tego nie byłoby widać, na czym stoi zaznaczenie. */ .themepick input:focus-visible + .themepick__card { outline: 2px solid var(--color-accent); outline-offset: 2px; } .themepick__swatch { display: flex; height: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .themepick__band { flex: 1; } .themepick__band--bg { background: var(--color-bg); } .themepick__band--surface { background: var(--color-surface); } .themepick__band--accent { flex: 0 0 34%; background: var(--color-accent); } .themepick__name { font-size: 15px; font-weight: 600; } .themepick__desc { font-size: 12.5px; line-height: 1.4; color: var(--color-text-muted); } /* --- powiadomienia push ---------------------------------------------------- */ /* Sekcja stoi pod formularzem wyglądu i jest od niego oddzielona kreską, bo to inna decyzja: tamto dotyczy konta, to — tego jednego urządzenia. */ .push { margin-top: calc(var(--gap) * 1.5); padding-top: var(--gap); border-top: 1px solid var(--color-border); } .push__title { margin: 0 0 4px; font-size: 17px; font-weight: 600; } /* Stan czyta się jednym zdaniem, a kolor jest dodatkiem do zdania, nie zamiast niego — telefon w słońcu i tak zrówna zieleń z szarością. */ .push__state { display: flex; align-items: flex-start; gap: 10px; margin: var(--gap) 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-surface-muted); color: var(--color-text); font-size: 14px; line-height: 1.45; } .push__state--on { background: var(--color-success-bg); color: var(--color-success-text); } .push__state--waiting { background: var(--color-info-bg); color: var(--color-info-text); } .push__state--blocked { background: var(--color-error-bg); color: var(--color-error-text); } /* Kropka bierze kolor z tekstu, więc nie ma własnej listy odcieni do utrzymania przy ośmiu motywach razy dwie jasności. */ .push__dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: currentColor; opacity: .65; } .push__actions { display: grid; gap: 8px; } /* Pusty pojemnik na przyciski nie ma prawa zostawiać po sobie odstępu — w trzech z pięciu stanów nie ma tam nic i nie będzie. */ .push__actions:empty { display: none; } .push__everywhere { margin-top: var(--gap); }