/* ============================================================================ ŠTARTOVKY — DIZAJNOVÉ TOKENY ---------------------------------------------------------------------------- Jediné miesto, kde sú definované farby, tiene, rádiusy a typografia webu. Odvodené zo štýlu stránky "Správcovia súťaže" (blok .cm-* v offcanvas.css), ktorý je vzorom pre vzhľad celého webu. PRAVIDLÁ: 1. V novom CSS sa NEPÍŠE hex farba. Vždy sa použije premenná odtiaľto. Ak tu premenná chýba, doplní sa sem — nie natvrdo do komponentu. 2. Primitívy (--sk-blue-600, --sk-green-100…) sa v komponentoch nepoužívajú priamo. Používajú sa VÝZNAMOVÉ tokeny (--sk-state-open, --sk-ink-muted…). Vďaka tomu sa dá zmeniť význam bez prepisovania komponentov. 3. Významové tokeny stavov (otvorené / uzávierka / prebieha / uzavreté) platia na celom webe rovnako. Zelená nesmie na jednej stránke znamenať "zapisovateľ" a na druhej "otvorená štartovka". 4. Tmavý režim sa zapne prepísaním tokenov v bloku na konci súboru. Komponenty sa kvôli nemu nemenia. ========================================================================== */ :root { /* ── PRIMITÍVY ───────────────────────────────────────────────────────── Surová paleta. V komponentoch ich nepoužívaj priamo. */ /* Modro-bridlicové neutrály — základ celého vzhľadu */ --sk-slate-900: #173a5e; --sk-slate-800: #21425f; --sk-slate-700: #294864; --sk-slate-600: #19324d; --sk-slate-500: #45647f; --sk-slate-400: #53718d; --sk-slate-300: #617c96; --sk-slate-200: #7890a4; --sk-slate-100: #85aecb; /* Modrá — značka a hlavná akcia */ --sk-blue-800: #0e5984; --sk-blue-700: #104f7d; --sk-blue-600: #11699b; --sk-blue-500: #176998; --sk-blue-400: #1e5d8d; --sk-blue-300: #1976b5; --sk-blue-200: #259dc3; /* Modré plochy a okraje */ --sk-blue-050: #f9fcff; --sk-blue-075: #eef7fc; --sk-blue-100: #e9f6ff; --sk-blue-150: #e2eff9; --sk-blue-200-bg: #b8ddf2; --sk-line-100: #e9f0f6; --sk-line-200: #deebf4; --sk-line-300: #d5e3ee; --sk-line-400: #c4d8e9; /* Zelená — v poriadku / otvorené */ --sk-green-700: #147b5c; --sk-green-600: #168061; --sk-green-100: #e4f6ef; /* Jantárová — pozor / čaká / blíži sa uzávierka */ --sk-amber-700: #8a5a08; --sk-amber-600: #a35c0d; --sk-amber-500: #aa6c19; --sk-amber-100: #fff2d9; --sk-amber-050: #fffdf8; /* Zlatá — vlastník / víťaz / ocenenie */ --sk-gold-700: #87590b; --sk-gold-100: #fff0d1; /* Fialová — administrátor / správa */ --sk-violet-600: #6350a8; --sk-violet-100: #eeeafd; /* Červená — prebieha naživo. Používa sa striedmo, je to najsilnejší signál. */ --sk-red-600: #c0392b; --sk-red-100: #fdecea; --sk-white: #ffffff; /* ── VÝZNAMOVÉ TOKENY ────────────────────────────────────────────────── Toto používaj v komponentoch. */ /* Text */ --sk-ink-heading: var(--sk-slate-900); /* h1 */ --sk-ink-title: var(--sk-slate-800); /* h2, nadpisy panelov */ --sk-ink-strong: var(--sk-slate-700); /* zvýraznený text v riadku */ --sk-ink: var(--sk-slate-600); /* bežný text */ --sk-ink-label: var(--sk-slate-500); /* popisky formulárov */ --sk-ink-link: var(--sk-slate-400); /* tlmené odkazy, napr. "späť" */ --sk-ink-muted: var(--sk-slate-300); /* druhoradý text */ --sk-ink-soft: var(--sk-slate-200); /* treťoradý text, small */ --sk-ink-faint: var(--sk-slate-100); /* ikony prázdnych stavov */ /* Plochy */ --sk-surface: var(--sk-white); --sk-surface-subtle: var(--sk-blue-050); /* jemne odsadený riadok */ --sk-surface-tint: var(--sk-blue-075); /* hover, zvýraznená plocha */ --sk-surface-info: var(--sk-blue-100); /* informačný pruh */ --sk-surface-accent: var(--sk-blue-150); /* podklad ikony */ --sk-surface-warn: var(--sk-amber-050); /* riadok čakajúci na akciu */ /* Okraje */ --sk-border: var(--sk-line-200); /* karty, panely */ --sk-border-soft: var(--sk-line-100); /* deliace čiary vnútri */ --sk-border-input: var(--sk-line-300); /* polia formulárov */ --sk-border-strong: var(--sk-line-400); /* obrysové tlačidlá */ --sk-border-info: var(--sk-blue-200-bg); /* Značka a akcie */ --sk-brand: var(--sk-blue-600); --sk-brand-hover: var(--sk-blue-800); --sk-brand-ink: var(--sk-blue-500); /* text/ikona na svetlom podklade */ --sk-brand-link: var(--sk-blue-400); --sk-brand-accent: var(--sk-blue-300); --sk-brand-gradient: linear-gradient(135deg, var(--sk-blue-500), var(--sk-blue-200)); /* STAVY SÚŤAŽE — platia na celom webe rovnako */ --sk-state-open-fg: var(--sk-green-600); /* prihlasovanie otvorené */ --sk-state-open-bg: var(--sk-green-100); --sk-state-closing-fg: var(--sk-amber-600); /* uzávierka do 24 h */ --sk-state-closing-bg: var(--sk-amber-100); --sk-state-live-fg: var(--sk-red-600); /* prebieha dnes */ --sk-state-live-bg: var(--sk-red-100); --sk-state-closed-fg: var(--sk-ink-soft); /* po uzávierke / ukončené */ --sk-state-closed-bg: var(--sk-line-100); /* ROLY POUŽÍVATEĽOV */ --sk-role-owner-fg: var(--sk-gold-700); --sk-role-owner-bg: var(--sk-gold-100); --sk-role-admin-fg: var(--sk-violet-600); --sk-role-admin-bg: var(--sk-violet-100); --sk-role-writer-fg: var(--sk-green-700); --sk-role-writer-bg: var(--sk-green-100); --sk-role-pending-fg: var(--sk-amber-600); --sk-role-pending-bg: var(--sk-amber-100); /* ── TVAR ──────────────────────────────────────────────────────────── */ --sk-radius-sm: 10px; /* malé ikony */ --sk-radius-md: 12px; /* ikonové dlaždice, alerty */ --sk-radius-lg: 15px; /* karty */ --sk-radius-xl: 18px; /* panely */ --sk-radius-row: 11px; /* zvýraznený riadok v zozname */ --sk-radius-pill: 999px; --sk-shadow-sm: 0 4px 16px rgba(31, 75, 111, .055); --sk-shadow-md: 0 8px 24px rgba(31, 75, 111, .07); --sk-shadow-lg: 0 6px 16px rgba(29, 112, 163, .24); /* pod akcentom */ /* ── TYPOGRAFIA ────────────────────────────────────────────────────── */ --sk-weight-heading: 750; /* charakteristický rez nadpisov */ --sk-weight-bold: 700; --sk-tracking-tight: -.035em; /* nadpisy */ --sk-tracking-wide: .045em; /* verzálkové mikropopisky */ --sk-size-h1: clamp(1.7rem, 3vw, 2.35rem); --sk-size-h2: 1.14rem; --sk-size-label: .72rem; /* VERZÁLKOVÝ POPISOK */ --sk-size-small: .8rem; --sk-size-meta: .88rem; /* ── OVLÁDANIE ─────────────────────────────────────────────────────── */ --sk-control-height: 43px; /* polia a tlačidlá vo formulároch */ --sk-touch-target: 48px; /* minimálny dotykový terč na mobile */ --sk-focus-ring: 0 0 0 3px rgba(17, 105, 155, .35); } /* ============================================================================ TMAVÝ REŽIM — pripravené miesto. Prepíšu sa TU len významové tokeny, komponenty sa nemenia. Zatiaľ zámerne prázdne, aby sa nemenil súčasný vzhľad. ========================================================================== */ /* @media (prefers-color-scheme: dark) { :root { ... } } */