/* * LLMinator — warstwa bazowa pod komponenty prototypu (app.css). * Tokeny kolorów, dostępność (focus, reduced motion), uzupełnienia komponentów * i komunikaty Django. Wygląd komponentów jest w app.css. */ :root { --ink: #1D1E1F; --ink2: #313233; --g1: #454647; --g2: #737375; --g3: #A4A6A8; --line: #E0E2E5; --line2: #EBEDF0; --muted: #F2F4F7; --paper: #FAFBFC; --white: #FFFFFF; --mint: #A2F5E7; --mint2: #B6FDF1; --mint3: #CFFDF5; --mint50: #E3FCF7; --teal4: #83EBD9; --teal7: #3EAD9E; --teal8: #007A6A; --lav: #C5C3EE; --lav1: #E8E9FC; --lav50: #F2F3FC; --lav6: #636294; --lav7: #444366; --red: #B42335; --red50: #FFECEE; --amber: #9A3A07; --amber50: #FFF4EC; --ok: #5DF584; /* tekst na ciemnym tle (sidebar, hero) */ --on-ink: #D5D6D9; --ink-line: #3A3B3C; --ink-hover: #2A2B2C; /* Kolory według roli (tło, tekst, obramowanie, grafika) — tego używają komponenty. W jasnym motywie mają wartości palety wyżej, ciemny motyw podmienia tylko je. */ --bg: #FAFBFC; --surface: #FFFFFF; --surface-2: #F2F4F7; --surface-3: #EBEDF0; --surface-4: #E0E2E5; --surface-c8: #C8C9CC; --surface-glass: rgba(255, 255, 255, .92); --inverse: #1D1E1F; --inverse-2: #313233; --tint-mint: #E3FCF7; --tint-mint-2: #CFFDF5; --tint-mint-3: #B6FDF1; --tint-lav: #F2F3FC; --tint-lav-2: #E8E9FC; --tint-red: #FFECEE; --tint-amber: #FFF4EC; --fg: #1D1E1F; --fg-ink2: #313233; --fg-2: #454647; --fg-muted: #69696B; --fg-subtle: #747679; --on-accent: #1D1E1F; --accent-text: #007A6A; --accent-line: #007A6A; --danger-text: #B42335; --danger-text-2: #7A1E2A; --lav-text: #444366; --lav-text-2: #636294; --lav-line: #636294; --warn-text: #9A3A07; --warn-text-2: #7A3A07; --border: #E0E2E5; --border-2: #EBEDF0; --border-ink: #1D1E1F; --border-ink2: #313233; --border-muted: #F2F4F7; --border-paper: #FAFBFC; --border-c8: #C8C9CC; --link-hover: #2F2E47; --ok-text: #00544A; --tint-red-soft: #FFF7F8; --shadow-card: 0 4px 32px 0 rgba(29, 29, 29, .05), inset 0 0 0 1px var(--border-2); --shadow-pop: 0 24px 64px rgba(15, 16, 17, .22), 0 0 0 1px var(--border-2); --shadow-modal: 0 32px 80px rgba(15, 16, 17, .35); --scrim: rgba(15, 16, 17, .45); --ease: cubic-bezier(.22, 1, .36, 1); --font: 'Inter', system-ui, -apple-system, sans-serif; --disp: 'PolySans Neutral', 'Inter', system-ui, sans-serif; --pad-x: 40px; --side-w: 260px; } /* Ciemny motyw — przełącznik w panelu bocznym (core.js), atrybut na . Panel boczny i nagłówki (--inverse) zostają ciemne, akcenty (mięta, lawenda) jasne z ciemnym tekstem, logotypy modeli na jasnym kółku. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #111214; --surface: #1A1B1E; --surface-2: #222326; --surface-3: #2A2C30; --surface-4: #33353A; --surface-c8: #4A4C51; --surface-glass: rgba(26, 27, 30, .92); --inverse: #0B0C0D; --inverse-2: #1F2022; --tint-mint: #0F2E29; --tint-mint-2: #123A33; --tint-mint-3: #164841; --tint-lav: #1D1D30; --tint-lav-2: #26263D; --tint-red: #3A161B; --tint-amber: #382313; --fg: #E9EAEC; --fg-ink2: #DCDDE0; --fg-2: #C9CBCF; --fg-muted: #A6A8AD; --fg-subtle: #8E9095; --accent-text: #4ED6BF; --accent-line: #2FC7AE; --danger-text: #FF7E8E; --danger-text-2: #FF9AA6; --lav-text: #C5C3EE; --lav-text-2: #A9A7E0; --lav-line: #8E8CCB; --warn-text: #F4A86A; --warn-text-2: #F7B985; --border: #2E3034; --border-2: #26282B; --border-ink: #C2C4C8; --border-ink2: #A9ABB0; --border-muted: #26282B; --border-paper: #222326; --border-c8: #5A5C61; --link-hover: #DCDBF7; --ok-text: #7FE9D6; --tint-red-soft: #2A1518; --shadow-card: 0 4px 32px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px var(--border-2); --shadow-pop: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px var(--border); --shadow-modal: 0 32px 80px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .6); } * { box-sizing: border-box; } html { overscroll-behavior: none; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); } :focus-visible { outline: none; box-shadow: 0 0 0 4px var(--lav1), 0 0 0 1.5px var(--lav6) !important; } ::selection { background: var(--tint-mint-3); color: var(--fg); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================ UZUPEŁNIENIA KOMPONENTÓW PROTOTYPU (app.css) Prototyp stylował przyciski; aplikacja używa też linków (filtry w URL działają bez JS), więc te same wyglądy dostają odpowiedniki dla . ============================================ */ a.nav, a.mchip, a.toggle, a.btn, a.iconbtn, .pills a, .projlist a, a.proj, a.brand-row { text-decoration: none; } /* W prototypie blok marki to
— jako link nie może brać koloru linków (#444366). */ a.brand-row, a.brand-row:hover { color: inherit; } .pills a { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; color: var(--fg-2); white-space: nowrap; transition: background-color .2s var(--ease); } .pills a:hover { color: var(--fg); } .pills a[data-on="true"] { background: var(--tint-mint-3); color: var(--fg); font-weight: 500; } .pills a[data-on="false"] .sw { opacity: .3; } .projlist a { display: flex; align-items: center; gap: 12px; border: 0; background: none; border-radius: 6px; height: 40px; padding: 0 8px; text-align: left; color: inherit; } .projlist a:hover { background: #333435; color: inherit; } a.pgb { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } a.pgb[data-on="true"] { color: #fff; } a.pgb[aria-disabled="true"] { opacity: .35; pointer-events: none; } /* Dymki: rysuje je core.js (.apptip); CSS-owe ::after z prototypu rozpychały tabele. */ [data-tip]:hover::after, [data-tip]:hover::before, [data-tip]:focus-visible::after, [data-tip]:focus-visible::before { content: none !important; display: none !important; } .apptip { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px)); background: var(--inverse); color: #fff; font: 500 12px/1.35 var(--font); padding: 7px 10px; border-radius: 6px; white-space: normal; overflow-wrap: anywhere; pointer-events: none; box-shadow: 0 8px 24px rgba(15, 16, 17, .25); animation: fadein .12s ease both; } /* Treść na całą szerokość części głównej — jak nagłówek i pasek filtrów (prototyp miał max-width: 1400px, co na szerszych ekranach zostawiało pusty pas po prawej). */ body .main > .content { max-width: none; } /* Atrybut hidden wygrywa z display z komponentów (.opt, .warn, .mov, .cal…). */ [hidden] { display: none !important; } .mchip:hover, .toggle:hover { color: var(--fg); } .side form { margin: 0; } .side button.nav { cursor: pointer; font: inherit; } .toast[data-type="err"] { background: var(--red); } /* Dłuższy komunikat (np. lista usuniętych konkurentów) zawija się w kilka linii zamiast wychodzić poza 48-pikselowy pasek z app.css; krótki wygląda jak dotąd. */ #appToast { height: auto; min-height: 48px; max-width: min(720px, calc(100vw - 32px)); max-height: 50vh; overflow-y: auto; padding-top: 12px; padding-bottom: 12px; line-height: 1.45; } /* Tekst tylko dla czytnika ekranu (np. liczba wyników ⌘K). */ .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .drawer-loading { padding: 40px 24px; color: var(--fg-muted); } .cmdk-r[data-on="true"] { background: var(--tint-mint-2); } .cmdk-r .row-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ============================================ KOMUNIKATY (Django messages) ============================================ */ .app-messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .app-message { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; animation: rise .25s var(--ease); } .app-message__text { flex: 1; min-width: 0; } .app-message__close { flex-shrink: 0; background: none; border: none; color: inherit; opacity: .6; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; } .app-message__close:hover { opacity: 1; } .app-message--error { background: var(--tint-red); color: var(--danger-text-2); } .app-message--warning { background: var(--tint-amber); color: var(--warn-text-2); } .app-message--success { background: var(--tint-mint); color: #00544A; } .app-message--info { background: var(--tint-lav); color: var(--lav-text); } /* Radar tagów × modeli: wartości przy punktach i kolumna na każdy model. */ .rwrap .rpt { animation: rdot .5s var(--ease) .35s both; pointer-events: none; } .rlab .rlv { margin-left: 2px; padding: 1px 6px; border-radius: 999px; background: var(--inverse); color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; } @keyframes rdot { from { opacity: 0; } to { opacity: 1; } } .rleg { overflow-x: auto; } .rleg .rlh, .rleg .rlr { min-width: max-content; } .rleg .rmh { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 12.5px; } .rleg .rmh img { width: 14px; height: 14px; } .rleg .rv { font-variant-numeric: tabular-nums; } .rleg .rv[data-best] { font-weight: 600; color: var(--fg); } .rleg .rv[data-worst] { color: var(--fg-muted); } /* Szuflada pytania: skala i dymek mini-wykresu. */ .mchart { margin-left: 34px; } .mchart-y { position: absolute; left: -34px; transform: translateY(-50%); font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .mchart[data-points] { cursor: crosshair; } .mhov { position: absolute; inset: 0; pointer-events: none; } .mhov-l { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--inverse-2); opacity: .35; } .mhov-d { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal8); } .mhov-d.mhov-pos { border-color: var(--lav6); } .mhov-t { position: absolute; top: 4px; margin-left: 12px; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; background: var(--inverse); color: #fff; font-size: 12px; white-space: nowrap; box-shadow: 0 8px 24px rgba(15,16,17,.2); z-index: 2; } .mhov-t[data-side="l"] { transform: translateX(calc(-100% - 24px)); } .mhov-t span { display: inline-flex; align-items: center; gap: 6px; color: #D7D9DC; } .mhov-t strong { color: #fff; } .mhov-t .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } /* Pasek filtrów: powrót z jednego modelu do sumy wszystkich. */ a.mreset { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--fg); background: var(--surface-2); text-decoration: none; transition: background-color .2s var(--ease); } a.mreset:hover { background: var(--surface-3); color: var(--fg); } a.mreset .i { width: 14px; height: 14px; } /* Otwarta nakładka (modal, szuflada, ⌘K) blokuje przewijanie tła — klasę ustawia core.js. */ html.scroll-lock { overflow: hidden; padding-right: var(--scroll-gap, 0px); } html.scroll-lock body { overflow: hidden; } /* Przy zablokowanym tle przewija się tylko treść nakładki: środek modala (także w opakowaniu fazy, np. „Odpytaj teraz”) i szuflady kurczy się do wysokości okna, a nagłówek i stopka z przyciskami zostają widoczne. */ .mdl > .mdl-h, .mdl > .mdl-f { flex: none; } .mdl > :not(.mdl-h):not(.mdl-f) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .mdl .mdl-b, .drawer-b { min-height: 0; overscroll-behavior: contain; } .mdl .mdl-b { flex: 1 1 auto; } .mdl .mdl-b > * { flex-shrink: 0; } /* Przełącznik motywu w stopce panelu bocznego: pokazuje motyw, na który przełączy. */ .theme-toggle { width: 100%; text-align: left; } .theme-toggle > span { display: inline-flex; align-items: center; gap: inherit; } .theme-toggle .tt-light { display: none; } :root[data-theme="dark"] .theme-toggle .tt-light { display: inline-flex; } :root[data-theme="dark"] .theme-toggle .tt-dark { display: none; } html { background: var(--bg); } /* Ciemny motyw: kolory wpisane w SVG wykresów (atrybuty fill/stroke z JS i szablonów). CSS wygrywa z atrybutami prezentacyjnymi, więc podmieniamy je tu, a nie w każdym skrypcie. */ :root[data-theme="dark"] :is(.plot, .mchart, .rwrap, .radar, .cpl, .ring, .spark) :is([stroke="#EBEDF0" i]) { stroke: var(--border-2); } :root[data-theme="dark"] :is(.plot, .mchart, .rwrap, .radar, .cpl, .ring, .spark) :is([stroke="#E0E2E5" i]) { stroke: var(--border); } :root[data-theme="dark"] :is(.plot, .mchart, .rwrap, .radar, .cpl, .ring, .spark) [fill="#FAFBFC" i] { fill: var(--surface-2); } :root[data-theme="dark"] :is(.plot, .mchart, .rwrap, .radar, .cpl, .ring, .spark) :is([fill="#fff" i], [fill="#ffffff" i]) { fill: var(--surface); } :root[data-theme="dark"] :is(.plot, .mchart, .rwrap, .radar, .cpl, .ring, .spark) [stroke="#007A6A" i] { stroke: var(--accent-line); } :root[data-theme="dark"] :is(.plot, .mchart, .rwrap, .radar, .cpl, .ring, .spark) [fill="#007A6A" i] { fill: var(--accent-line); } :root[data-theme="dark"] :is(.plot, .mchart, .rwrap, .radar, .cpl, .ring, .spark) [stroke="#636294" i] { stroke: var(--lav-line); } :root[data-theme="dark"] :is(.plot, .mchart, .rwrap, .radar, .cpl, .ring, .spark) [fill="#636294" i] { fill: var(--lav-line); } :root[data-theme="dark"] :is(.plot, .mchart) stop[stop-color="#83EBD9" i] { stop-color: #2FC7AE; } :root[data-theme="dark"] .rleg .rmh img { background: #fff; border-radius: 50%; padding: 1px; } /* Elementy na jasnym akcencie (mięta), które dziedziczą kolor tekstu — w ciemnym motywie dziedziczyłyby jasny, więc ustawiamy ciemny (tak jak w jasnym). */ :root[data-theme="dark"] :is(.rr[data-own="true"], .railrow[data-own="true"], .pcell[data-lvl="3"], .okic), :root[data-theme="dark"] :is(.rr[data-own="true"], .railrow[data-own="true"], .pcell[data-lvl="3"]) :is(b, strong, span) { color: var(--on-accent); } /* Zakreślenie marki w tekście odpowiedzi: jasny pas pod jasnym tekstem był nieczytelny — w ciemnym motywie pas półprzezroczysty, tekst jasny. */ :root[data-theme="dark"] mark.hl { background: linear-gradient(transparent 55%, rgba(78, 214, 191, .35) 55%); color: var(--fg); } /* Wyłączone przyciski: 40% krycia ginie na ciemnym tle. */ :root[data-theme="dark"] :is(.btn[disabled], .btn:disabled, .rchip[disabled]) { opacity: .6; } :root[data-theme="dark"] .pgb[disabled] { opacity: .5; } /* Znak projektu ({% brand_fav %}): litera na kolorze katalogu, a gdy jest favicona — logo firmy na białej płytce z belką w kolorze katalogu. Płytka jest biała w obu motywach (jak kółka logotypów modeli), bo logotypy firm bywają ciemne. */ span.fav { background: var(--fav-accent, var(--mint)); position: relative; overflow: hidden; } .fav .fav-img { position: absolute; top: 14%; left: 14%; width: 72%; height: 72%; object-fit: contain; opacity: 0; transition: opacity .25s var(--ease); } .fav[data-fav="logo"] { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 16, 17, .08), inset 0 -2px 0 var(--fav-accent); } .fav[data-fav="logo"] .fav-img { top: 12%; height: 66%; opacity: 1; } .fav[data-fav="logo"] .fav-l { visibility: hidden; } .favstack .fav[data-fav="logo"] { box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px rgba(15, 16, 17, .08), inset 0 -2px 0 var(--fav-accent); } @media (prefers-reduced-motion: reduce) { .fav .fav-img { transition: none; } } /* Źródła → „Pytania z tym linkiem / z tą domeną”: pytanie, liczba cytowań i dni odpytań. */ .sqrow { align-items: flex-start; cursor: default; } .sqq { display: block; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--fg); text-align: left; cursor: pointer; } .sqq:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } .sqruns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } a.sqrun { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); font-size: 12px; font-variant-numeric: tabular-nums; text-decoration: none; transition: background-color .15s, color .15s; } a.sqrun:hover { background: var(--tint-mint-2); color: var(--fg); } a.sqrun b { font-weight: 600; color: var(--fg); } .sqmore { display: inline-flex; align-items: center; height: 24px; padding: 0 4px; font-size: 12px; color: var(--fg-muted); } /* Kontrast (audyt WCAG AA w obu motywach). Zawsze ciemne powierzchnie (panel boczny, nagłówki, wyróżniony KPI, podsumowanie eksportu, szuflada) mają własne szarości — szarości strony są dobrane do jasnego tła w jasnym motywie i do ciemnego w ciemnym, a te miejsca są ciemne w obu. */ :is(.side, .hero, .kpi.feat, .drawer-h, .card.sum, [data-page="login"] .left) { --fg-muted: #B5B7BA; --fg-subtle: #A4A6A8; } .kpi.feat .prov strong { color: #fff; } /* Wyżej specyficzne niż reguły app.css (wczytywanego później). */ span.delta[data-dir="flat"] { color: var(--fg-2); } small.csub, span.csub { opacity: .85; } span.stepn { color: var(--accent-text); } .opt span.badge { color: var(--on-accent); } /* Przełącznik motywu to