/* * custom.css — uzupełnienie skompilowanego tailwind.css * * tailwind.css w repo to purged build bez narzędzi do przebudowy. * Brakuje w nim klas używanych przez panel (m.in. ekran edycji postów, * siatka stylów obrazków, część klas z oryginalnego panelu). * Ten plik dodaje brakujące utilities. Ładowany w header.php PO tailwind.css. * * Docelowo: przebudować tailwind.css z aktualną zawartością panelu. */ /* ============================================================ TOKENY MOTYWU (light = wartości bazowe; dark nadpisuje). Cały panel kolory bierze z tych zmiennych — zmiana motywu to tylko podmiana wartości tu, zero duplikowanych reguł per-komponent. Aktywacja dark: (pre-paint w header.php + przełącznik w topbar-pop--user, stan w localStorage 'panel-theme'). Light wartości = 1:1 dotychczasowe hexy → tryb jasny bez zmian. ============================================================ */ :root { /* powierzchnie */ --c-bg: #f7f7fb; /* tło strony */ --c-surface: #ffffff; /* karty, inputy, popovery, topbar */ --c-surface-2: #fcfcff; /* subtelnie podniesione (od-box, f9fafb, fafafe) */ --c-surface-soft: #f3f4f6; /* hover / tor przełącznika */ --c-overlay: rgba(255, 255, 255, .92); /* półprzezroczyste paski/przyciski nad treścią (toolbar, spinner) */ /* tekst */ --c-ink: #1f2937; /* tekst główny („czarny") */ --c-muted: #6b7280; /* JEDYNY szary: opisy, labelki, status-off */ --c-muted-strong: #374151; /* mocniejszy (pop-head) */ --c-faint: #9ca3af; /* przygaszony */ /* obramowania */ --c-border: #eef0f4; /* karty / boxy */ --c-border-input: #e5e7eb; /* inputy */ --c-border-soft: #ececf1; /* topbar / separatory */ /* akcent fiolet */ --c-accent: #7c3aed; /* wypełnienia/bordery (solid) */ --c-accent-ink: #7c3aed; /* fiolet jako TEKST/ikona (dark rozjaśnia) */ --c-accent-tint: #f3f0ff; /* kafel/tile violet */ --c-accent-tint-2: #ede9fe;/* avatar / badge tło */ --c-accent-on: #6d28d9; /* tekst na tincie */ --c-on-accent: #ffffff; /* tekst na SOLID fiolecie — zawsze biały */ /* status */ --c-green: #10b981; --c-amber: #f59e0b; --c-red: #ef4444; --c-danger: #dc2626; /* alerty (notice + alerty per-strona) */ --c-info-bg: #eef2ff; --c-info-bd: #6366f1; --c-info-tx: #3730a3; --c-ok-bg: #f0fdf4; --c-ok-bd: #22c55e; --c-ok-tx: #166534; --c-warn-bg: #fffbeb; --c-warn-bd: #f59e0b; --c-warn-tx: #92400e; --c-err-bg: #fef2f2; --c-err-bd: #ef4444; --c-err-tx: #991b1b; --c-err-soft: #fecaca; /* miękkie obramowanie boxu błędu */ /* niebieski — poza główną paletą, tylko admin-packages (zachowany 1:1) */ --c-blue: #2563eb; --c-blue-strong: #1d4ed8; /* cienie */ --c-shadow-card: 0 1px 2px rgba(17, 24, 39, .04); --c-shadow-pop: 0 12px 32px rgba(17, 24, 39, .12); } html.theme-dark { --c-bg: #18181b; --c-surface: #232327; --c-surface-2: #1e1e22; --c-surface-soft: #2a2a2f; --c-overlay: rgba(35, 35, 39, .92); --c-ink: #e7e7ea; --c-muted: #a1a1aa; --c-muted-strong: #d4d4d8; --c-faint: #71717a; --c-border: #34343a; --c-border-input: #3f3f46; --c-border-soft: #34343a; --c-accent: #7c3aed; --c-accent-ink: #a78bfa; /* fiolet czytelny na ciemnym */ --c-accent-tint: #2e2640; --c-accent-tint-2: #2e2640; --c-accent-on: #c4b5fd; --c-on-accent: #ffffff; --c-green: #34d399; --c-amber: #fbbf24; --c-red: #f87171; --c-danger: #f87171; --c-info-bg: #1d1b2e; --c-info-bd: #6d5bd0; --c-info-tx: #c7c2f5; --c-ok-bg: #122a1f; --c-ok-bd: #2f9e5f; --c-ok-tx: #9be8be; --c-warn-bg: #2c2410; --c-warn-bd: #b8860b; --c-warn-tx: #f3d390; --c-err-bg: #2d1717; --c-err-bd: #c0392b; --c-err-tx: #f3a9a2; --c-err-soft: #5b2526; --c-blue: #3b82f6; --c-blue-strong: #60a5fa; --c-shadow-card: 0 1px 2px rgba(0, 0, 0, .3); --c-shadow-pop: 0 12px 32px rgba(0, 0, 0, .45); } /* ---- layout / grid ---- */ .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .col-span-2 { grid-column: span 2 / span 2; } .overflow-x-auto { overflow-x: auto; } .p-1 { padding: 0.25rem; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } /* ---- warianty disabled: (purged z tailwind.css, używane przez przyciski akcji) ---- */ .disabled\:opacity-50:disabled { opacity: 0.5; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:bg-gray-300:disabled { background-color: #d1d5db; } .disabled\:cursor-wait:disabled { cursor: wait; } .disabled\:bg-gray-100:disabled { background-color: #f3f4f6; } .disabled\:text-gray-400:disabled { color: #9ca3af; } /* ---- sizing ---- */ .h-24 { height: 6rem; } .h-32 { height: 8rem; } .max-h-96 { max-height: 24rem; } .max-h-\[40rem\] { max-height: 40rem; } /* ---- borders ---- */ .border-transparent { border-color: transparent; } /* ---- pozycjonowanie absolutne (brakujące w purged tailwind.css) ---- */ .top-1 { top: 0.25rem; } .top-2 { top: 0.5rem; } .right-1 { right: 0.25rem; } .right-2 { right: 0.5rem; } .bottom-1 { bottom: 0.25rem; } .left-1 { left: 0.25rem; } /* ---- przezroczystość tła (lightbox) ---- */ .bg-opacity-80 { --tw-bg-opacity: 0.8; } /* ---- ring (pierścień zaznaczenia) ---- */ .ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(59,130,246,.5)); } .ring-transparent { --tw-ring-color: transparent; } /* ---- kolory: indigo ---- */ .bg-indigo-50 { background-color: #eef2ff; } .bg-indigo-100 { background-color: #e0e7ff; } .bg-indigo-600 { background-color: #4f46e5; } .text-indigo-700 { color: #4338ca; } .text-indigo-800 { color: #3730a3; } .border-indigo-200 { border-color: #c7d2fe; } .hover\:bg-indigo-700:hover { background-color: #4338ca; } .focus\:ring-indigo-500:focus { --tw-ring-color: #6366f1; } /* ---- kolory: emerald (badge Google Business) ---- */ .bg-emerald-100 { background-color: #d1fae5; } .text-emerald-800 { color: #065f46; } /* ---- kolory: gray ---- */ .bg-gray-700 { background-color: #374151; } /* ---- warianty peer-checked (galeria wyboru zdjęcia / stylów) ---- */ .peer:checked ~ .peer-checked\:flex { display: flex; } .peer:checked ~ .peer-checked\:border-indigo-500 { border-color: #6366f1; } .peer:checked ~ .peer-checked\:ring-indigo-500 { --tw-ring-color: #6366f1; } /* ---- responsywne ---- */ @media (min-width: 640px) { .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { .md\:block { display: block; } .md\:col-span-1 { grid-column: span 1 / span 1; } .md\:flex-none { flex: none; } .md\:gap-4 { gap: 1rem; } .md\:text-base { font-size: 1rem; line-height: 1.5rem; } } @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1280px) { .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ---- collapse/expand siatki styli (settings: Auto vs Ręczny) ---- */ .style-grid-collapse { overflow: hidden; max-height: 760px; opacity: 1; transition: max-height .4s ease, opacity .25s ease, margin-top .4s ease; } .style-grid-collapse.is-closed { max-height: 0; opacity: 0; margin-top: 0; } /* ---- wartość dowolna ---- */ .text-\[10px\] { font-size: 10px; line-height: 1; } /* ---------------------------------------------------------------- Inputy daty na mobile iOS Safari / Chrome Mobile nadają inputom type=date własne min-width (UA stylesheet), przez co `w-full` w wąskich kolumnach gridu nie potrafi ich ścisnąć i input wystaje poza kontener. Wymuszamy width: 100%, min-width: 0 i box-sizing. Dotyczy m.in. filtrów „Data od / Data do" na /client/posts oraz pola „Data publikacji" na /client/on-demand. ---------------------------------------------------------------- */ input[type="date"], input[type="datetime-local"], input[type="time"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; line-height: 1.25; min-height: 2.125rem; /* 34px - spójne z małymi inputami panelu */ /* Pokazujemy POJEDYNCZĄ natywną ikonę kalendarza przeglądarki. Wcześniejszy wariant dorysowywał własną ikonę i ukrywał natywną tylko dla -webkit-, przez co na Firefoksie były WIDOCZNE DWIE ikony. Native = jedna, spójna w każdej. */ } /* iOS domyślnie centruje i dokłada marginesy do wewnętrznej wartości. */ input[type="date"]::-webkit-date-and-time-value, input[type="datetime-local"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; } /* ---------------------------------------------------------------- Sidebar: scroll tabów ukryty, ale działający (Firefox / IE / WebKit). ---------------------------------------------------------------- */ .sidebar-scroll { scrollbar-width: none; -ms-overflow-style: none; } .sidebar-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } /* ---------------------------------------------------------------- Badge statusu generacji tygodnia (admin: lista klientów). NULL = generuje, 1 = OK, 0 = brak treści. ---------------------------------------------------------------- */ .gen-status { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; border-radius: 9999px; white-space: nowrap; } .gen-status--ok { background: var(--c-ok-bg); color: var(--c-ok-tx); } .gen-status--fail { background: var(--c-err-bg); color: var(--c-err-tx); } .gen-status--pending { background: var(--c-warn-bg); color: var(--c-warn-tx); } .gen-status--none { background: var(--c-surface-soft); color: var(--c-muted); } .gen-status__week { display: block; margin-top: 2px; font-size: 11px; color: var(--c-muted); } /* Badge "Podejrzane" (S2 anty-abuse) - obserwacyjny, admin: lista klientów. Baza .cf-status (client-forms.css), kolorystyka jak pozostale warianty ostrzegawcze (.cf-status--pending/--retry): tylko tlo+tekst, bez bordera. */ .cf-status--suspicious { background: var(--c-warn-bg); color: var(--c-warn-tx); margin-left: 6px; } /* ---------------------------------------------------------------- Notki / alerty — jeden system dla całego panelu. Mocny border 3px w kolorze + łagodne tło tej samej barwy. W środku TYLKO tekst i ewentualnie — zero innych styli. Warianty semantyczne: info / success / warning / error. ---------------------------------------------------------------- */ .notice { padding: 16px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; line-height: 1.55; } .notice strong { font-weight: 700; } .notice p { margin: 0; } .notice p + p { margin-top: 6px; } .notice a { text-decoration: underline; } .notice--info { background: var(--c-info-bg); border: 3px solid var(--c-info-bd); color: var(--c-info-tx); } .notice--success { background: var(--c-ok-bg); border: 3px solid var(--c-ok-bd); color: var(--c-ok-tx); } .notice--warning { background: var(--c-warn-bg); border: 3px solid var(--c-warn-bd); color: var(--c-warn-tx); } .notice--error { background: var(--c-err-bg); border: 3px solid var(--c-err-bd); color: var(--c-err-tx); } /* Wariant notice ze spinnerem - trwały komunikat pierwszej generacji (S3). Był w dashboard.css, ale pasek wisi teraz na KAŻDEJ stronie klienta (bootstrap-notice.php z sidebar-client.php), a dashboard.css ładuje tylko dashboard. @keyframes cf-spin zdefiniowany lokalnie - bliźniak z client-forms.css, którego większość stron klienta nie ładuje (te same nazwa i czas = zero różnicy w ruchu). */ .onb-gennotice { display: flex; align-items: center; gap: 16px; } .onb-genspin { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--c-accent-tint-2); border-top-color: var(--c-accent); animation: cf-spin .7s linear infinite; } @keyframes cf-spin { to { transform: rotate(360deg); } } /* ============================================================ Toggle-box — ujednolicony checkbox z tytułem + podpowiedzią. Wzorzec z /client/brand-assets. Globalny (header ładuje custom.css), więc używają go brand-assets, story-template, post-edit, queue. ---------------------------------------------------------------- */ .ba-toggle-box { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; background: var(--c-bg); border: 1px solid var(--c-accent); border-radius: 4px; padding: 16px; } .ba-toggle-box input { width: 16px; height: 16px; accent-color: var(--c-accent); cursor: pointer; flex-shrink: 0; margin-top: 2px; } .st-toprow .ba-toggle-box:has(input:checked) { background: var(--c-surface); } /* story-template: zaznaczony = białe tło (brand-assets zostaje szary) */ .ba-toggle-box-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ba-toggle-box-title { font-size: 14px; font-weight: 500; color: var(--c-ink); line-height: 1.4; } .ba-toggle-box-hint { font-size: 12px; color: var(--c-muted); line-height: 1.5; } /* ============================================================ Formularz ustawień firmy (company-settings-form.php) — globalny, bo komponent jest współdzielony klient + admin (admin nie linkuje client-forms.css). Spójny z cf-: szary #6b7280, fiolet #7c3aed, radius 4px, weight 500, realny hover. ============================================================ */ .csf-form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; box-shadow: var(--c-shadow-card); } /* Body = grid 2 kolumny 50/50 na desktopie, gap 16; pojedyncza kolumna na mobile. Pola pełnej szerokości (duże textarea, sekcja długości) → .csf-field--full. */ /* Body = pionowe grupy; każda grupa to grid 50/50 na desktopie (gap 16). Grupa 1 = wysokie textarea (opis/prompt/hashtagi), grupa 2 = reszta pól. */ .csf-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; } .csf-group { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } @media (min-width: 768px) { .csf-group { grid-template-columns: 1fr 1fr; } } .csf-group + .csf-group { border-top: 1px solid var(--c-border); padding-top: 16px; } .csf-field { min-width: 0; } .csf-field--full { grid-column: 1 / -1; } /* połowa grupy (stack pionowy pól, gap 16) */ .csf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* nagłówek połowy — jedna linia w obu kolumnach => inputy startują równo */ .csf-colhead { color: var(--c-ink); font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* para w obrębie połowy => na desktopie każdy element 25% całości */ .csf-pair { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .csf-pair { grid-template-columns: 1fr 1fr; } } .csf-label { display: block; color: var(--c-muted); font-size: 13px; font-weight: 500; margin-bottom: 8px; } .csf-label-soft { color: var(--c-muted); font-weight: 400; } .csf-input, .csf-select, .csf-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--c-border-input); border-radius: 4px; padding: 7px 12px; font-size: 13px; color: var(--c-ink); background: var(--c-surface); font-family: inherit; line-height: 1.4; transition: border-color .15s, box-shadow .15s; } .csf-input:hover, .csf-select:hover, .csf-textarea:hover, .csf-input:focus, .csf-select:focus, .csf-textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(124, 58, 237, .15); } .csf-input:disabled:hover, .csf-select:disabled:hover { border-color: var(--c-border-input); box-shadow: none; } .csf-input, .csf-select { height: 34px; cursor: pointer; } /* małe, spójne z panelem; pointer (textarea = text) */ .csf-textarea { resize: vertical; min-height: 140px; } /* wysokie textarea zostają wysokie */ .csf-count { display: block; text-align: right; color: var(--c-muted); font-size: 12px; margin-top: 6px; } .csf-hint { color: var(--c-muted); font-size: 13px; margin: 0 0 12px; } .csf-grid2 { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .csf-grid2 { grid-template-columns: 1fr 1fr; } } .csf-sublabel { display: block; color: var(--c-muted); font-size: 13px; margin-bottom: 6px; } .csf-rowbetween { display: flex; justify-content: space-between; gap: 8px; } .csf-foot { padding: 16px; border-top: 1px solid var(--c-border); } .csf-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; border: 1px solid transparent; background: var(--c-accent); color: var(--c-on-accent); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .csf-btn:hover { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-border-input); } .csf-btn--sm { padding: 7px 16px; font-size: 13px; } /* mały wariant - jak dash-btn--sm */ /* ============================================================ Picker typów obrazów (image-types-picker.php) — sekcja „Jak promować Twój biznes". Spójny z csf-/cf-: radius 4px, fiolet #7c3aed, szary #6b7280, weight 500, realny hover. ============================================================ */ /* fieldset = pełna szerokość (nadpisuje grid csf-group) */ .itp { display: block; border: 0; margin: 0; padding: 0; min-width: 0; } /* tytuł sekcji = identyczny z .csf-colhead (np. „Marka (kolory i font)") */ .itp-legend { display: block; color: var(--c-ink); font-size: 13px; font-weight: 500; line-height: 1.4; margin-bottom: 16px; padding: 0; } /* Tryb: radio jako segmentowy przełącznik (jak .cf-segmented) */ .itp-seg { display: inline-flex; gap: 0; border: 1px solid var(--c-accent); border-radius: 4px; overflow: hidden; background: var(--c-surface); margin-bottom: 16px; } .itp-seg-btn { display: inline-flex; align-items: center; padding: 7px 14px; color: var(--c-accent-ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; } .itp-seg-btn + .itp-seg-btn { border-left: 1px solid var(--c-accent); } .itp-seg-btn input { position: absolute; opacity: 0; pointer-events: none; } .itp-seg-btn:hover { background: var(--c-accent); color: var(--c-on-accent); } .itp-seg-btn:has(input:checked) { background: var(--c-accent); color: var(--c-on-accent); } /* Nagłówek grupy typów (Konwersja / Zaufanie / Zasięg) */ .itp-grouphead { color: var(--c-ink); font-size: 13px; font-weight: 500; line-height: 1.4; margin: 16px 0 8px; } .itp-grouphead:first-of-type { margin-top: 0; } /* Siatka kart — 2 kolumny desktop, 1 na mobile (jak csf-pair) */ .itp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .itp-grid { grid-template-columns: 1fr 1fr; } } /* Karta typu */ .itp-card { border: 1px solid var(--c-border); border-radius: 4px; background: var(--c-surface); padding: 12px; transition: border-color .15s, background .15s; } .itp-card:has(.itp-check:checked) { border-color: var(--c-accent); background: var(--c-accent-tint); } .itp-card.is-disabled { background: var(--c-surface-soft); opacity: .6; } /* Galeria przykładów — poziomy pasek miniatur (kilka zdjęć per typ) */ /* Galeria przykładów = równy grid, 5 zdjęć w rzędzie, łamie się do nowej linii. */ .itp-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; } .itp-gallery-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--c-border); cursor: zoom-in; background: var(--c-surface-soft); } /* Lightbox przykładów (samodzielny, wzorzec z post-edit .pe-lightbox) */ .itp-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 60; cursor: zoom-out; } .itp-lightbox.is-open { display: flex; } .itp-lightbox-img { display: block; max-width: 100%; max-height: 90vh; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.4); } .itp-card-pick { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; } .itp-card.is-disabled .itp-card-pick { cursor: not-allowed; } .itp-check { width: 16px; height: 16px; accent-color: var(--c-accent); cursor: pointer; flex-shrink: 0; margin-top: 1px; } .itp-card-title { font-size: 13px; font-weight: 500; color: var(--c-ink); line-height: 1.4; min-width: 0; } .itp-badge { display: inline-block; font-size: 11px; font-weight: 500; color: var(--c-warn-tx); background: var(--c-warn-bg); border-radius: 4px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; } .itp-card-note { color: var(--c-muted); font-size: 12px; line-height: 1.5; margin: 6px 0 0; } /* Waga (tryb zaawansowany) */ .itp-weight { margin-top: 8px; } .itp-weight.is-hidden { display: none; } .itp-weight-label { display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: 12px; } .itp-weight-input { width: 56px; height: 30px; flex-shrink: 0; } /* ============================================================ Topbar — pozioma nawigacja paneli (klient + admin). Jasne tło, fioletowy akcent. Style własne (Tailwind build jest purgowany — nie polegamy na jego klasach). ============================================================ */ [x-cloak] { display: none !important; } .panel-body { background: var(--c-bg); min-height: 100vh; margin: 0; } .topbar { position: sticky; top: 0; z-index: 50; background: var(--c-surface); border-bottom: 1px solid var(--c-border-soft); } .topbar-inner { max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 16px; display: flex; align-items: center; gap: 16px; } .topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .topbar-logo { width: 32px; height: 32px; border-radius: 4px; } .topbar-brand-text { font-weight: 500; color: var(--c-ink); font-size: 16px; white-space: nowrap; } .topbar-nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; flex-wrap: nowrap; } .topbar-link { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 4px; color: var(--c-muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .topbar-link svg { width: 18px; height: 18px; flex-shrink: 0; } .topbar-link:hover { background: var(--c-surface-soft); color: var(--c-ink); } .topbar-link.is-active { color: var(--c-accent-ink); } .topbar-badge { margin-left: 2px; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 4px; background: var(--c-accent-tint-2); color: var(--c-accent-on); } .topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } .topbar-iconbtn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; border-radius: 4px; color: var(--c-muted); cursor: pointer; } .topbar-iconbtn:hover { background: var(--c-surface-soft); } .topbar-iconbtn svg { width: 22px; height: 22px; } .topbar-bell, .topbar-user { position: relative; } .topbar-userbtn { display: flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; padding: 4px 8px; border-radius: 4px; color: var(--c-ink); } .topbar-userbtn:hover { background: var(--c-surface-soft); } .topbar-avatar { width: 34px; height: 34px; border-radius: 4px; background: var(--c-accent-tint-2); color: var(--c-accent-on); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .topbar-username { font-size: 14px; font-weight: 500; white-space: nowrap; } .topbar-userbtn svg { width: 16px; height: 16px; color: var(--c-faint); } .topbar-pop { position: absolute; top: calc(100% + 8px); right: 0; background: var(--c-surface); border: 1px solid var(--c-border-soft); border-radius: 4px; box-shadow: var(--c-shadow-pop); min-width: 240px; padding: 6px; z-index: 60; } .topbar-pop--bell { width: 340px; } .topbar-pop-head { padding: 8px 10px; font-weight: 700; font-size: 13px; color: var(--c-muted-strong); } .topbar-pop-scroll { max-height: 60vh; overflow-y: auto; padding: 4px; } .topbar-pop-scroll .notice { margin-bottom: 8px; } .topbar-log-time { display: block; margin-top: 4px; font-size: 11px; opacity: .7; } .topbar-empty { padding: 16px; text-align: center; color: var(--c-faint); font-size: 13px; } .topbar-pop-link { display: block; padding: 9px 12px; border-radius: 4px; color: var(--c-muted-strong); font-size: 14px; text-decoration: none; } .topbar-pop-link:hover { background: var(--c-surface-soft); } .topbar-pop-link.is-active { color: var(--c-accent-ink); } .topbar-pop-link--danger { color: var(--c-danger); } /* Przełącznik motywu jasny/ciemny — wiersz z labelką i prawdziwym switchem. */ .topbar-pop-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px; border: none; background: transparent; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--c-muted-strong); } .topbar-pop-toggle:hover { background: var(--c-surface-soft); } .topbar-pop-toggle-label { display: flex; align-items: center; gap: 8px; } .topbar-pop-toggle-label svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-accent-ink); } .topbar-pop-switch { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; background: var(--c-border-input); transition: background .15s; } .topbar-pop-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; } .topbar-pop-switch.is-on { background: var(--c-accent); } .topbar-pop-switch.is-on .topbar-pop-switch-knob { transform: translateX(16px); } .topbar-pop-sep { height: 1px; background: var(--c-border-soft); margin: 6px 4px; } .topbar-burger { display: none; } .topbar-mobile { display: none; } .topbar-main { max-width: 1280px; margin: 0 auto; padding: 16px; } @media (max-width: 980px) { .topbar-nav { display: none; } .topbar-username { display: none; } .topbar-burger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; border-radius: 4px; color: var(--c-muted); cursor: pointer; } .topbar-burger svg { width: 24px; height: 24px; } .topbar-mobile { display: block; border-top: 1px solid var(--c-border-soft); padding: 8px; background: var(--c-surface); /* lista linków bywa dłuższa niż ekran - scroll wewnątrz, dvh (mobilne paski adresu) z fallbackiem vh */ max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .topbar-mobile .topbar-link { width: 100%; } .topbar-pop--bell { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-width: none; } } /* ============================================================ MOTYW CIEMNY — siatka bezpieczeństwa dla LEGACY klas Tailwind. Cały panel kolory bierze z tokenów (:root / html.theme-dark powyżej), więc tryb ciemny działa automatycznie w custom.css + plikach feature (dashboard/client-forms/post-edit/...). Tu nadpisujemy TYLKO surowe utility z purgowanego tailwind.css, których część stron używa wprost w markupie — kierujemy je na te same tokeny, żeby nie powstała wyspa jasnych elementów na ciemnym tle. ============================================================ */ html.theme-dark .bg-white { background-color: var(--c-surface) !important; } html.theme-dark .bg-gray-50 { background-color: var(--c-surface-2) !important; } html.theme-dark .bg-gray-100 { background-color: var(--c-surface-soft) !important; } html.theme-dark .bg-gray-200 { background-color: var(--c-border) !important; } html.theme-dark .bg-gray-300 { background-color: var(--c-border-input) !important; } html.theme-dark .text-gray-900, html.theme-dark .text-gray-800, html.theme-dark .text-gray-700 { color: var(--c-ink) !important; } html.theme-dark .text-gray-600, html.theme-dark .text-gray-500 { color: var(--c-muted) !important; } html.theme-dark .text-gray-400, html.theme-dark .text-gray-300 { color: var(--c-faint) !important; } html.theme-dark .border-gray-200 { border-color: var(--c-border) !important; } html.theme-dark .border-gray-300 { border-color: var(--c-border-input) !important; } html.theme-dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html.theme-dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-border) !important; } html.theme-dark .hover\:bg-gray-50:hover { background-color: var(--c-surface-soft) !important; } html.theme-dark .hover\:bg-gray-100:hover { background-color: var(--c-surface-soft) !important; } html.theme-dark .hover\:bg-gray-300:hover { background-color: var(--c-border-input) !important; } html.theme-dark .bg-indigo-50 { background-color: var(--c-accent-tint) !important; } html.theme-dark .bg-indigo-100 { background-color: var(--c-accent-tint-2) !important; } html.theme-dark .bg-indigo-600 { background-color: var(--c-accent) !important; } html.theme-dark .text-indigo-700, html.theme-dark .text-indigo-800 { color: var(--c-accent-on) !important; } html.theme-dark .border-indigo-200 { border-color: var(--c-accent-tint-2) !important; } /* emerald (badge GBP „połączone") */ html.theme-dark .bg-emerald-100 { background-color: var(--c-ok-bg) !important; } html.theme-dark .text-emerald-800 { color: var(--c-ok-tx) !important; } /* Badge licznika „do zatwierdzenia" przy linku „Moje posty" w navie */ /* Hint pod polem formularza ustawień (lewo, szary) — odróżniony od .csf-count (licznik, prawo). */ .csf-hint { display: block; color: var(--c-muted); font-size: 12px; line-height: 1.5; margin-top: 6px; } /* ============================================================ EKRAN LOGOWANIA (standalone — login.php nie ładuje header/dashboard). Wszystko z tokenów motywu → jasny/ciemny wg localStorage 'panel-theme'. Radius 4px, font-weight 500 na tytule+buttonie, jedyny szary --c-muted. ============================================================ */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--c-bg); } .login-wrap { width: 100%; max-width: 400px; } .login-head { text-align: center; margin-bottom: 16px; } .login-logo { height: 56px; margin: 0 auto 16px; display: block; } .login-title { font-size: 22px; font-weight: 500; color: var(--c-ink); margin: 0; } .login-sub { color: var(--c-muted); margin-top: 4px; font-size: 14px; } .login-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; padding: 16px; box-shadow: var(--c-shadow-card); } .login-field { margin-bottom: 16px; } .login-label { display: block; font-size: 13px; font-weight: 500; color: var(--c-muted); margin-bottom: 8px; } .login-input { width: 100%; padding: 10px 16px; box-sizing: border-box; background: var(--c-surface); border: 1px solid var(--c-border-input); border-radius: 4px; color: var(--c-ink); font-size: 14px; font-family: inherit; transition: border-color .15s; } .login-input:focus { outline: none; border-color: var(--c-accent); } .login-input::placeholder { color: var(--c-faint); } /* button: ten sam hover-swap co .dash-btn--primary (fiolet→ghost). `gap` obsługuje ikonę w wariancie Google; `text-decoration` bo bywa . */ .login-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; border: 1px solid var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .login-btn:hover { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-border-input); } /* Przycisk „przez Google" (/login + /rejestracja) - drugorzędna ścieżka obok CTA e-mail. Ta sama wysokość/radius/typografia co .login-btn (dziedziczy je w całości), zmienia się WYŁĄCZNIE kolorystyka. Hover = pełny swap tło↔tekst (nie opacity, nie tint). Selektor podwójny, żeby wygrać z .login-btn:hover niezależnie od kolejności w pliku. */ .login-btn.login-btn--google { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-border-input); } .login-btn.login-btn--google:hover { background: var(--c-ink); color: var(--c-surface); border-color: var(--c-ink); } /* Logo Google = inline SVG (CSP: zero zewnętrznych zasobów); jedyne hexy to barwy marki. */ .login-gicon { width: 18px; height: 18px; flex: 0 0 auto; display: block; } /* Separator „albo" - kreski po bokach napisu (1px, token obramowania inputów). */ .login-or { display: flex; align-items: center; gap: 16px; margin: 16px 0; color: var(--c-muted); font-size: 13px; line-height: 1.5; } .login-or::before, .login-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--c-border-input); } /* Stopka karty (linki „Masz już konto", „Nie pamiętasz hasła") - klasa mt-3 to martwy Tailwind. */ .login-foot { margin-top: 16px; margin-bottom: 0; text-align: center; } /* Linki w karcie: preflight Tailwinda zeruje kolor/underline, więc nadajemy je jawnie. */ .login-sub a, .login-check a { color: var(--c-accent-ink); text-decoration: underline; } .login-sub a:hover, .login-check a:hover { color: var(--c-accent-on); } .login-err { color: var(--c-danger); font-size: 12px; line-height: 1.5; margin: 4px 0 0; } .login-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--c-muted); } .login-check input { margin-top: 2px; } /* Banner soft-blocku unpaid (S1) - nad treścią strony */ .billing-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: 4px; background: var(--c-warn-bg); border: 1px solid var(--c-warn-bd); color: var(--c-warn-tx); font-size: 14px; line-height: 1.5; } .billing-banner__btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; background: var(--c-blue); color: #fff; border: 1px solid var(--c-blue); text-decoration: none; transition: background .15s, border-color .15s; } .billing-banner__btn:hover { background: var(--c-blue-strong); border-color: var(--c-blue-strong); } /* ===================== Kalendarz świąt i okazji (klient) ===================== */ .hol-wrap { width: 100%; } .hol-title { font-size: 26px; font-weight: 500; color: var(--c-ink); margin: 0; line-height: 1.15; } .hol-lead { color: var(--c-muted); font-size: 14px; margin: 6px 0 0; max-width: 720px; } .hol-settings { margin-bottom: 16px; } .hol-hint { margin-top: 8px; margin-bottom: 0; } .hol-overview { margin-top: 16px; } .hol-overhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .hol-subtitle { font-size: 18px; font-weight: 500; color: var(--c-ink); margin: 0; } .hol-field { min-width: 220px; } .hol-filter { height: 46px; } .hol-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .hol-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; padding: 16px; box-shadow: var(--c-shadow-card); } .hol-item--soon { border: 3px solid var(--c-accent); } .hol-soon { margin-bottom: 24px; } .hol-soon-desc { color: var(--c-muted); font-size: 13px; margin: 0 0 16px; } .hol-item.is-hidden { display: none; } .hol-itemhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .hol-date { color: var(--c-accent-ink); font-size: 13px; font-weight: 500; } .hol-name { color: var(--c-ink); font-size: 15px; font-weight: 500; margin: 8px 0 0; } .hol-idea { color: var(--c-muted); font-size: 14px; margin: 6px 0 0; } .hol-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; } .hol-badge--krytyczne { background: var(--c-err-bg); color: var(--c-err-tx); border-color: var(--c-err-bd); } .hol-badge--popularne { background: var(--c-accent-tint); color: var(--c-accent-on); border-color: var(--c-accent); } .hol-badge--niszowe { background: var(--c-surface-soft); color: var(--c-muted); border-color: var(--c-border-input); } .hol-alert--ok { /* mapuje na .notice--success */ } .hol-alert--err { /* mapuje na .notice--error */ } @media (max-width: 980px) { .hol-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { /* główny kontener treści w vw (ref 393px); max-width/margin bez zmian */ .topbar-main { padding: 4.071vw; } /* dvh = realna wysokość viewportu mobile (pasek URL); desktop zostaje vh wyżej */ .login-body { min-height: 100dvh; } /* rejestracja + banner unpaid — wymiary w vw (baza 393px), ramki 1px zostają px */ .login-or { margin: 4.071vw 0; gap: 4.071vw; font-size: 3.308vw; } /* buttony i inputy karty skalują się razem (te same 10/16px bazowo = ta sama wysokość) */ .login-btn { gap: 2.036vw; padding: 2.545vw 4.071vw; border-radius: 1.018vw; font-size: 3.563vw; } .login-input { padding: 2.545vw 4.071vw; border-radius: 1.018vw; font-size: 3.563vw; } .login-gicon { width: 4.580vw; height: 4.580vw; } .login-foot { margin-top: 4.071vw; } .login-err { font-size: 3.053vw; margin-top: 1.018vw; } .login-check { gap: 2.036vw; font-size: 3.308vw; } .login-check input { margin-top: 0.509vw; } .billing-banner { gap: 4.071vw; padding: 3.053vw 4.071vw; margin-bottom: 4.071vw; border-radius: 1.018vw; font-size: 3.563vw; } .billing-banner__btn { padding: 2.036vw 4.071vw; border-radius: 1.018vw; font-size: 3.563vw; } /* komunikat pierwszej generacji - spinner skaluje sie z tekstem, ramka 3px zostaje px */ .onb-gennotice { gap: 4.071vw; } .onb-genspin { width: 5.089vw; height: 5.089vw; } .panel-body { min-height: 100dvh; } .onbw-modal { max-height: calc(100dvh - 48px); } /* alert okazji (#peForm) — 3px ramka zostaje px; selektor wzmocniony, bo bazowy .pe-occasion jest NIŻEJ w pliku (równa specyficzność = kolejność). */ .pe-occasion.pe-occasion { margin-bottom: 4.071vw; padding: 4.071vw; border-radius: 1.018vw; font-size: 3.563vw; } /* globalny toggle-box (brand-assets/story-template/post-edit/queue) — 1px ramka px */ .ba-toggle-box { gap: 3.053vw; border-radius: 1.018vw; padding: 4.071vw; } .ba-toggle-box input { width: 4.071vw; height: 4.071vw; margin-top: 0.509vw; } .ba-toggle-box-text { gap: 1.018vw; } .ba-toggle-box-title { font-size: 3.563vw; } .ba-toggle-box-hint { font-size: 3.053vw; } /* === Kalendarz świąt (/client/holidays, hol-*) — vw (ref 393px) === */ /* guard na phantom poziomy scroll z zaokrągleń vw; clip (nie hidden) = bez scroll-kontenera, nie psuje sticky */ .hol-wrap { overflow-x: clip; } .hol-settings { margin-bottom: 4.071vw; } .hol-hint { margin-top: 2.036vw; } .hol-overview { margin-top: 4.071vw; } .hol-overhead { align-items: stretch; gap: 4.071vw; margin-bottom: 4.071vw; } .hol-subtitle { font-size: 4.580vw; } .hol-field { min-width: 0; } .hol-filter { height: 8.651vw; } /* 2 kolumny; itemhead zawija (badge spada pod datę gdy ciasno) */ .hol-list { grid-template-columns: repeat(2, 1fr); gap: 3.053vw; } /* grid-item min-width:0 → data/badge w jednej linii, kafelek się nie rozpycha (data skraca się …) */ .hol-item { padding: 3.053vw; border-radius: 1.018vw; min-width: 0; } .hol-soon { margin-bottom: 6.107vw; } .hol-soon-desc { font-size: 3.308vw; margin: 0 0 4.071vw; } .hol-itemhead { gap: 2.036vw; flex-wrap: nowrap; } .hol-date { font-size: 3.053vw; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hol-name { font-size: 3.562vw; margin-top: 2.036vw; } .hol-idea { font-size: 3.053vw; margin-top: 1.527vw; } .hol-badge { padding: 0.763vw 2.545vw; border-radius: 1.018vw; font-size: 3.053vw; } /* przycisk Zapisz (dash-btn w csf-foot) pełnoszeroki */ .csf-foot .dash-btn { width: 100%; } /* notice (info/success/warning/error) - spójne vw (ref 393px) */ .notice { padding: 4.071vw; border-radius: 1.018vw; margin-bottom: 4.071vw; font-size: 3.563vw; } .notice p + p { margin-top: 1.527vw; } /* subskrypcja kalendarza iCal - selektory wzmocnione: bazowe .cal-subscribe__* są zdefiniowane NIŻEJ w pliku (równa specyficzność wygrywałaby przez kolejność). */ .cal-subscribe.cal-subscribe { padding: 4.071vw; margin-bottom: 4.071vw; border-radius: 1.018vw; } .cal-subscribe .cal-subscribe__title { font-size: 3.563vw; margin: 0 0 2.036vw; } .cal-subscribe .cal-subscribe__desc { font-size: 3.563vw; margin: 0 0 4.071vw; } .cal-subscribe .cal-subscribe__actions { gap: 4.071vw; } .cal-subscribe .cal-btn { padding: 2.036vw 4.071vw; border-radius: 1.018vw; } /* === Ustawienia firmy (/client/settings, csf-form) — vw (ref 393px) === */ /* guard na phantom poziomy scroll z zaokrągleń vw (jak .hol-wrap); clip nie psuje sticky */ .csf-form { border-radius: 1.018vw; overflow-x: clip; } .csf-body { padding: 4.071vw; gap: 4.071vw; } .csf-group { gap: 4.071vw; } .csf-group + .csf-group { padding-top: 4.071vw; } .csf-col { gap: 4.071vw; } .csf-colhead { font-size: 3.308vw; } .csf-pair { gap: 4.071vw; } .csf-label { font-size: 3.308vw; margin-bottom: 2.036vw; } .csf-input, .csf-select, .csf-textarea { padding: 1.781vw 3.053vw; font-size: 3.308vw; border-radius: 1.018vw; } .csf-input, .csf-select { height: 8.651vw; } /* chevron selecta (spójny z cf-select na mobile) */ .csf-select { padding-right: 8.651vw; background-position: right 2.545vw center; background-size: 4.071vw; } .csf-count { font-size: 3.053vw; margin-top: 1.527vw; } .csf-hint { font-size: 3.053vw; margin-top: 1.527vw; } .csf-sublabel { font-size: 3.308vw; margin-bottom: 1.527vw; } .csf-rowbetween { gap: 2.036vw; } .csf-foot { padding: 4.071vw; } .csf-btn { padding: 2.545vw 4.071vw; font-size: 3.563vw; border-radius: 1.018vw; } .csf-btn--sm { padding: 1.781vw 4.071vw; font-size: 3.308vw; } .csf-foot .csf-btn { width: 100%; } /* picker typów obrazów (skala VW jak csf-) */ .itp-legend { font-size: 3.308vw; margin-bottom: 4.071vw; } .itp-seg { border-radius: 1.018vw; margin-bottom: 4.071vw; } .itp-seg-btn { padding: 1.781vw 3.563vw; font-size: 3.308vw; } .itp-grouphead { font-size: 3.308vw; margin: 4.071vw 0 2.036vw; } .itp-grid { gap: 4.071vw; } .itp-card { padding: 3.053vw; border-radius: 1.018vw; } .itp-gallery { gap: 1.527vw; margin-bottom: 2.036vw; grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr)); } .itp-gallery-img { border-radius: 1.018vw; } .itp-card-pick { gap: 2.036vw; } .itp-check { width: 4.071vw; height: 4.071vw; margin-top: 0.509vw; } .itp-card-title { font-size: 3.308vw; } .itp-badge { font-size: 2.799vw; border-radius: 1.018vw; padding: 0.254vw 1.527vw; margin-left: 1.018vw; } .itp-card-note { font-size: 3.053vw; margin-top: 1.527vw; } .itp-weight { margin-top: 2.036vw; } .itp-weight-label { gap: 2.036vw; font-size: 3.053vw; } .itp-weight-input { width: 14.25vw; height: 7.634vw; } } /* --- Znacznik postu okolicznościowego (powiązany ze świętem/okazją) --------- Badge tekstowy „Okazja", akcent fioletowy (var(--c-accent-ink)). */ .post-occasion { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: var(--c-accent-tint); color: var(--c-accent-ink); font-size: 12px; font-weight: 500; cursor: help; } .post-occasion-txt { font-weight: 500; } /* Wariant „okazji" w rzędzie akcji - tylko mobile (desktop pokazuje wariant pod godziną). Przełączane breakpointem 600px w client-forms.css. */ .post-occasion--mob { display: none; } /* --- Znacznik postu z wydarzenia cyklicznego (parytet .post-occasion) --------- Badge tekstowy „Cykliczne", akcent zielony (var(--c-ok-bg)). */ .post-event { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: var(--c-ok-bg); color: var(--c-ok-tx); font-size: 12px; font-weight: 500; cursor: help; } .post-event--mob { display: none; } @media (max-width: 600px) { .cf-cols-posts .post-event--desk { display: none; } .cf-cols-posts .post-event--mob { display: inline-flex; margin-right: auto; } .cf-cols-posts .post-event { font-size: 3.053vw; padding: 1.018vw 2.545vw; } } /* Wariant kompaktowy na kafelkach kalendarza (tydzień/miesiąc): fioletowa kropka. Nazwa okazji pokazywana w dymku hover (.cf-caltip-occ). */ .cf-cal-occasion { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent-ink); flex: none; cursor: help; } /* Znacznik wydarzenia cyklicznego w kalendarzu (parytet cf-cal-occasion, inny kolor). */ .cf-cal-event { display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--c-info-bd); flex: none; cursor: help; margin-left: 2px; } /* Notice w edytorze posta - pełna szerokość, fioletowy. */ .pe-occasion { margin-bottom: 16px; padding: 16px; border-radius: 4px; border: 3px solid var(--c-accent); background: var(--c-accent-tint); color: var(--c-accent-on); font-size: 14px; line-height: 1.55; } /* Badge wydarzenia cyklicznego w edytorze posta (parytet .pe-occasion, niebieski). */ .pe-event { margin-bottom: 16px; padding: 16px; border-radius: 4px; border: 3px solid var(--c-info-bd); background: var(--c-info-bg); color: var(--c-info-tx); font-size: 14px; line-height: 1.55; } /* CAL. Sekcja subskrypcji kalendarza iCal */ .cal-subscribe { border: 1px solid var(--c-border); border-radius: 4px; padding: 16px; margin-bottom: 16px; background: var(--c-surface); } .cal-subscribe__title { font-weight: 500; font-size: 14px; margin: 0 0 8px; color: var(--c-ink); } .cal-subscribe__desc { margin: 0 0 16px; font-size: 14px; color: var(--c-muted); } .cal-subscribe__actions { display: flex; flex-wrap: wrap; gap: 16px; } .cal-btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--c-accent); border-radius: 4px; background: var(--c-accent); color: var(--c-on-accent); font-weight: 500; text-decoration: none; cursor: pointer; } .cal-btn:hover { background: var(--c-on-accent); color: var(--c-accent); } .cal-btn--ghost { background: transparent; color: var(--c-accent); } .cal-btn--ghost:hover { background: var(--c-accent); color: var(--c-on-accent); } .cal-btn--small { padding: 5px 12px; font-size: 13px; } .cal-subscribe__hint { margin: 16px 0 0; font-size: 14px; color: var(--c-muted); } /* SHARE. Pasek udostępniania tygodnia w kalendarzu — przyciski reużywają .cal-btn (jak cal-subscribe) */ .cf-cal-share { display: flex; gap: 8px; align-items: center; } /* SHARE. Publiczna strona podglądu tygodnia */ .share-page { max-width: 760px; margin: 0 auto; padding: 24px 16px; color: var(--c-ink); background: var(--c-bg); } .share-head { margin-bottom: 24px; border-bottom: 3px solid var(--c-accent); padding-bottom: 16px; } .share-head__title { font-size: 24px; font-weight: 500; margin: 0; } .share-head__week { font-size: 16px; margin: 4px 0 0; } .share-head__note { font-size: 13px; color: var(--c-muted); margin: 4px 0 0; } .share-empty { padding: 48px 16px; text-align: center; color: var(--c-muted); } .share-card { margin-bottom: 32px; } .share-card__meta { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; } .share-card__date { font-weight: 500; text-transform: capitalize; } .share-card__hour { color: var(--c-accent); font-weight: 500; } /* === Onboarding wizard (krok 1: AI-profil firmy) - spojne z dash-card/dash-btn === */ .onbw-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, .55); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; z-index: 1000; } .onbw-modal { background: var(--c-surface); color: var(--c-ink); width: calc(100vw - 32px); max-width: 1280px; border-radius: 4px; border: 1px solid var(--c-border); padding: 16px; position: relative; box-shadow: var(--c-shadow-pop); max-height: calc(100vh - 48px); overflow-y: auto; } .csf-count.is-over { color: var(--c-danger); font-weight: 500; } .onbw-title { font-size: 16px; font-weight: 500; color: var(--c-ink); margin: 0 0 4px; } .onbw-sub { color: var(--c-muted); font-size: 14px; margin: 0 0 16px; } .onbw-hints { font-size: 13px; color: var(--c-muted); margin: 8px 0 16px; padding-left: 18px; } .onbw-hints li { margin: 2px 0; } .onbw-label { display: block; font-weight: 500; font-size: 14px; color: var(--c-ink); margin: 16px 0 6px; } .onbw-textarea, .onbw-input { width: 100%; border: 1px solid var(--c-border-input); border-radius: 4px; background: var(--c-surface); color: var(--c-ink); padding: 10px 12px; font: inherit; } .onbw-textarea:focus, .onbw-input:focus { outline: none; border-color: var(--c-accent); } .onbw-textarea { min-height: 120px; max-height: 60vh; resize: vertical; } .onbw-counter { font-size: 12px; color: var(--c-muted); text-align: right; margin-top: 4px; } .onbw-counter.is-over { color: var(--c-danger); font-weight: 500; } .onbw-select { width: 100%; border: 1px solid var(--c-border-input); border-radius: 4px; background: var(--c-surface); color: var(--c-ink); padding: 10px 12px; font: inherit; } .onbw-select:focus { outline: none; border-color: var(--c-accent); } .onbw-row { display: flex; gap: 12px; flex-wrap: wrap; } .onbw-col { flex: 1; min-width: 140px; } .onbw-label--sm { font-weight: 400; font-size: 13px; color: var(--c-muted); margin: 12px 0 6px; } .onbw-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } /* buttony - mirror .dash-btn (pelny swap kolorow na hover, bez opacity) */ .onbw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid var(--c-border-input); background: var(--c-surface); color: var(--c-accent-ink); transition: background .15s, border-color .15s, color .15s; } .onbw-btn:hover { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); } .onbw-btn--primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); } .onbw-btn--primary:hover { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-border-input); } .onbw-btn:disabled { opacity: .55; cursor: not-allowed; } .onbw-err { color: var(--c-danger); font-size: 13px; margin-top: 12px; } .onbw-rotating { color: var(--c-muted); font-weight: 500; margin-top: 14px; min-height: 22px; } .share-foot { text-align: center; font-size: 12px; color: var(--c-muted); margin-top: 24px; } /* === /admin/account — 2FA (tokeny, radius 4px, swap hover, dark przez var) === */ .account-wrap { max-width: 640px; } .account-title { font-size: 22px; font-weight: 500; color: var(--c-ink); margin-bottom: 16px; } .account-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; box-shadow: var(--c-shadow-card); margin-bottom: 16px; } .account-card-head { padding: 16px; border-bottom: 1px solid var(--c-border); } .account-card-title { font-size: 15px; font-weight: 500; color: var(--c-ink); } .account-card-body { padding: 16px; } .account-desc { font-size: 14px; color: var(--c-muted); line-height: 1.5; margin-bottom: 16px; } .account-desc strong { color: var(--c-ink); font-weight: 500; } .account-hint { font-size: 13px; color: var(--c-muted); margin-top: 12px; } .account-hint strong { color: var(--c-ink); font-weight: 500; } .account-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--c-surface-soft); padding: 2px 6px; border-radius: 4px; color: var(--c-ink); } /* kody zapasowe — siatka monospace */ .account-codes { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; padding: 0; } .account-codes li { background: var(--c-surface-soft); border: 1px solid var(--c-border); border-radius: 4px; padding: 8px 12px; text-align: center; } .account-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .05em; color: var(--c-ink); } /* QR — wyśrodkowany; SVG niesie własny biały tło + quiet zone */ .account-enroll { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 16px; } .account-qr { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; padding: 12px; line-height: 0; } .account-qr svg { display: block; width: 200px; height: 200px; } .account-form { margin-top: 16px; } .account-form .login-input { max-width: 280px; } .account-form .account-btn { margin-top: 16px; } .account-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; } .account-actions .account-btn { margin-top: 0; } /* buttony — pełny swap kolorów na hover (mirror .dash-btn), bez opacity */ .account-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid var(--c-border-input); background: var(--c-surface); color: var(--c-accent-ink); transition: background .15s, border-color .15s, color .15s; } .account-btn:hover { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); } .account-btn--primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); } .account-btn--primary:hover { background: var(--c-surface); color: var(--c-accent-ink); border-color: var(--c-border-input); } .account-btn--danger { background: var(--c-surface); color: var(--c-danger); border-color: var(--c-border-input); } .account-btn--danger:hover { background: var(--c-danger); color: var(--c-on-accent); border-color: var(--c-danger); } @media (max-width: 600px) { .account-codes { grid-template-columns: 1fr; } .account-actions { flex-direction: column; } .account-actions .account-btn { width: 100%; } .notice { padding: 4.071vw; margin-bottom: 4.071vw; font-size: 3.563vw; border-radius: 1.018vw; } .notice p + p { margin-top: 1.527vw; } } /* ===== Sticky pasek akcji (Zapisz / Anuluj) ===== Pasek dokleja się do dołu ekranu gdy jego naturalna pozycja jest poza widokiem; klasę .is-stuck + geometrię (padding L/R) ustawia sticky-bar.js. position:fixed = pasek na całą szerokość ekranu, treść wyrównana do kolumny. */ [data-sticky-bar] { transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease; } .sticky-bar-spacer { display: none; width: 100%; height: 0; } [data-sticky-bar].is-stuck { /* left + width ustawia sticky-bar.js = dokładnie szerokość i pozycja kontenera w flow. Padding paska ujednolicony (wygodny odstęp od krawędzi ekranu). */ position: fixed; bottom: 0; z-index: 40; margin: 0; box-sizing: border-box; background: var(--c-surface); border-top: 1px solid var(--c-border-soft); box-shadow: 0 -6px 20px rgba(17, 24, 39, .07); padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); animation: sticky-bar-in .18s ease; } @keyframes sticky-bar-in { from { transform: translateY(100%); } to { transform: translateY(0); } } /* --- S3: widget „Pierwsze kroki" (onboarding checklist) --- Spojnosc z reszta panelu: karta = .dash-card, przyciski = .dash-btn, naglowek 16px/500 jak .dash-card-title, odstepy na tokenie 16px, radius 4px. Znacznik kroku to NATYWNY checkbox z accent-color: var(--c-accent) - ten sam firmowy fiolet i ten sam ksztalt co .cf-daycheck / .itp-check / .al-gen-check. Zero hexow - wylacznie tokeny --c-*, wiec light i dark dzialaja bez duplikatow. */ .onb__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .onb__title { font-size: 16px; font-weight: 500; color: var(--c-ink); margin: 0; } .onb__count { font-size: 13px; font-weight: 500; color: var(--c-muted); white-space: nowrap; } .onb__lead { font-size: 14px; color: var(--c-muted); margin: 0 0 16px; } .onb__group { font-size: 12px; font-weight: 500; color: var(--c-muted); margin: 16px 0 8px 0; } .onb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .onb__item { display: flex; align-items: flex-start; gap: 8px; } /* pointer-events/tabindex: znacznik stanu, nie pole formularza - klikaniem steruje link kroku */ .onb__check { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--c-accent); pointer-events: none; } .onb__item--done .onb__label { color: var(--c-muted); } .onb__body { display: flex; flex-direction: column; gap: 4px; } .onb__label { font-size: 14px; color: var(--c-ink); } .onb__link { color: var(--c-accent-ink); font-weight: 500; text-decoration: none; } .onb__link:hover { text-decoration: underline; } .onb__why { font-size: 12px; color: var(--c-muted); } .onb__foot { margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .onb__note { font-size: 12px; color: var(--c-muted); } /* Komunikaty widgetu to zwykly .notice (JS przenosi je do #onbNoticeHost pod tytulem strony) - wlasne klasy .onb__msg* skasowane, zeby nie bylo drugiego wygladu alertu w panelu. */ /* tekst tylko dla czytnikow ekranu (stan kroku - checkbox jest aria-hidden) */ .onb__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .onb-modal { position: fixed; inset: 0; z-index: 60; background: var(--c-overlay); display: flex; align-items: center; justify-content: center; padding: 16px; } .onb-modal[hidden] { display: none; } .onb-modal__box { width: 100%; max-width: 480px; padding: 16px; border-radius: 4px; background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--c-shadow-pop); } .onb-modal__title { font-size: 16px; font-weight: 500; color: var(--c-ink); margin-bottom: 8px; } .onb-modal__lead { font-size: 13px; color: var(--c-muted); margin-bottom: 8px; } .onb-modal__list { margin: 0 0 16px 16px; font-size: 13px; color: var(--c-ink); display: flex; flex-direction: column; gap: 8px; } .onb-modal__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } @media (max-width: 600px) { .onb__title, .onb-modal__title { font-size: 4.071vw; } .onb__count, .onb-modal__lead, .onb-modal__list { font-size: 3.308vw; } .onb__lead, .onb__label { font-size: 3.562vw; } .onb__group, .onb__why, .onb__note { font-size: 3.053vw; } .onb__check { width: 4.580vw; height: 4.580vw; } .onb__head, .onb__group { margin-bottom: 2.036vw; } .onb__lead { margin-bottom: 4.071vw; } .onb__foot { margin-top: 4.071vw; } .onb__list, .onb__item, .onb__head, .onb__foot, .onb-modal__acts { gap: 2.036vw; } .onb-modal, .onb-modal__box { padding: 4.071vw; } }