/* ===================================================================== cloudstrg — základ: písmo, farebné tokeny, prvky formulárov a niekoľko spoločných komponentov. Načítava sa ako prvé; dizajn.css za ním nesie shell a obrazovkové komponenty. Farebný systém: layout vypíše na :root sadu tokenov (--brand, --ink, --line…) vypočítanú z jedinej značkovej farby cez dizajn_tokeny(). Hodnoty nižšie sú len záloha pre prípad, že by sa stránka vykreslila bez layoutu — vo zvyšku CSS sa hex farba nepíše nikdy priamo. Režim (dark/light) prepína atribút data-theme na ; server ho nastaví z profilu používateľa ešte pred vykreslením, takže stránka nikdy neblikne opačnou témou. ===================================================================== */ :root { /* Fallback tokeny — layout ich prepíše presnými hodnotami palety. Predvolený je SVETLÝ režim; tmavý sa nasadzuje atribútom data-theme="dark" na . */ --brand: #2563EB; --on-brand: #FFFFFF; --brand-ink: #2563EB; --brand-soft: #2563EB1A; --page-bg: radial-gradient(circle at 30% -8%, #2563EB1f, transparent 34rem), #F6F8FC; --side: #FFFFFF; --side-bg: linear-gradient(180deg, #2563EB0d, rgba(255, 255, 255, 0) 16rem), #FFFFFF; --card: #FFFFFF; --card-sheen: #FFFFFF; --soft: #F4F7FC; --hover: #EAF0FA; --line: rgba(15, 23, 42, .10); --ink: #0F172A; --dim: rgba(15, 23, 42, .62); --faint: rgba(15, 23, 42, .42); --ok: #15803D; --ok-bg: #E9F7EF; --bad: #C0392B; --bad-bg: #FCECEA; --warn: #B45309; --warn-bg: #FDF4E4; --spend: #C2410C; --spend-bg: #FDF0E7; --tien: 0 18px 40px -18px rgba(15, 23, 42, .20); --tien-maly: 0 8px 20px -10px rgba(15, 23, 42, .16); --tien-karta: 0 1px 2px rgba(15, 23, 42, .05); /* rádiusy — dizajn je zámerne hranatý, pilulky len pri indikátoroch */ --r-karta: 10px; --r-kpi: 9px; --r-blok: 8px; --r-prvok: 6px; /* hustota tabuliek: compact 9 / balanced 13 / airy 17 */ --bunka-y: 13px; --bunka-x: 10px; /* jednotný easing pre všetky pohyby */ --e: cubic-bezier(.2, .8, .2, 1); } :root[data-theme="dark"] { --brand-ink: #3287FF; --brand-soft: #2563EB2E; --page-bg: radial-gradient(circle at 30% -8%, #2563EB24, transparent 34rem), #070B12; --side: #0C111C; --side-bg: linear-gradient(180deg, #2563EB14, rgba(0, 0, 0, 0) 12rem), #0C111C; --card: #161C29; --card-sheen: linear-gradient(145deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, 0) 44%), #161C29; --soft: #111826; --hover: #1D2534; --line: rgba(255, 255, 255, .09); --ink: #EDF1F7; --dim: rgba(237, 241, 247, .62); --faint: rgba(237, 241, 247, .38); --ok: #5FD08A; --ok-bg: rgba(95, 208, 138, .16); --bad: #FF8A7A; --bad-bg: rgba(255, 138, 122, .16); --warn: #F0C05A; --warn-bg: rgba(240, 192, 90, .16); --spend: #FF9A4D; --spend-bg: rgba(255, 154, 77, .16); --tien: 0 24px 50px -18px rgba(0, 0, 0, .55); --tien-maly: 0 10px 24px -8px rgba(0, 0, 0, .5); --tien-karta: none; } /* hustotu tabuliek si používateľ zatiaľ neprepína — atribút je pripravený na , aby sa dala doplniť bez zásahu do komponentov */ :root[data-hustota="compact"] { --bunka-y: 9px; } :root[data-hustota="airy"] { --bunka-x: 12px; --bunka-y: 17px; } /* ── Písmo ─────────────────────────────────────────────────────────────── Manrope, variabilný rez (200–800) v jedinom woff2 na podsety latin a latin-ext. Súbory sú na vlastnom serveri — stránka nezávisí na Google Fonts a neposiela tam IP návštevníkov. Preload latinského podsetu je v hlavičkách rozložení, font-display:swap drží text čitateľný hneď. */ @font-face{ font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap; src:url('../fonts/manrope/manrope-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113, U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap; src:url('../fonts/manrope/manrope-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308, U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ===================================================================== ZÁKLADNÉ PRVKY ===================================================================== */ * { box-sizing: border-box; } /* Atribút hidden musí platiť aj na prvkoch, ktorým dávame vlastný display. Pravidlo prehliadača ([hidden] { display: none }) má nižšiu prioritu než ktorékoľvek autorské pravidlo s triedou, takže napr. skryté tlačidlo s .t3-btn (inline-flex) by sa inak zobrazilo. */ [hidden] { display: none !important; } body { margin: 0; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 13px; font-weight: 500; background: var(--page-bg); background-attachment: fixed; color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* čísla v tabuľkách sa musia zvisle zarovnať — inak sa počty a kódy „vlnia" a stĺpec sa nedá prebehnúť očami */ .suma, .cislo, td, th, kbd, input[type="number"], input[type="date"], .tabular { font-variant-numeric: tabular-nums; } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; } h1 { font-size: 25px; letter-spacing: -.04em; } h2 { font-size: 15px; } h3 { font-size: 13.5px; } a { color: var(--brand-ink); } code { background: var(--soft); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; } .muted { color: var(--dim); } /* ===================================================================== FORMULÁRE ===================================================================== */ label { display: block; margin: 1rem 0 0.35rem; font-size: 11.5px; font-weight: 600; color: var(--dim); } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="date"], input[type="number"], select, textarea { width: 100%; padding: 8px 11px; border-radius: var(--r-prvok); border: 1px solid var(--line); background: var(--soft); color: var(--ink); font-size: 12.5px; font-weight: 500; font-family: inherit; transition: border-color .2s var(--e), background .2s var(--e); } input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--brand); background: var(--card); } input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; } textarea { resize: vertical; font-family: inherit; } input[type="checkbox"] { accent-color: var(--brand); } /* ===================================================================== SPOLOČNÉ KOMPONENTY ===================================================================== */ .app-body { background: var(--page-bg); } .auth-body { display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .container { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; } .card { background: var(--card-sheen); border: 1px solid var(--line); border-radius: var(--r-karta); box-shadow: var(--tien-karta); padding: 18px; } .card h1 { margin-top: 0; } .card-center { text-align: center; } /* ── hlášky ──────────────────────────────────────────────────────────── */ .alert { padding: 0.7rem 1rem; border-radius: var(--r-blok); margin: 1rem 0 0; font-size: 12.5px; } .alert-error { background: var(--bad-bg); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); } .alert-ok { background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); } .alert-pozor { background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); } .alert a { color: inherit; text-decoration: underline; } /* ── skip-link: skrytý, kým naň klávesnica neskočí ───────────────────── */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: .6rem 1rem; background: var(--brand); color: var(--on-brand); border-radius: 0 0 var(--r-blok) 0; font-weight: 700; } .skip-link:focus { left: 0; } /* ── rýchle hľadanie (Ctrl+K) ────────────────────────────────────────── */ .hladat-pozadie { position: fixed; inset: 0; background: color-mix(in srgb, #0F172A 55%, transparent); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 1rem 1rem; } .hladat-pozadie[hidden] { display: none; } .hladat-okno { width: 100%; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--tien); overflow: hidden; } .hladat-okno input[type="search"] { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--card); color: var(--ink); padding: .95rem 1.1rem; font-size: 15px; } .hladat-okno input[type="search"]:focus { outline: none; background: var(--card); } .hladat-vysledky { max-height: 55vh; overflow-y: auto; padding-bottom: .4rem; } .hladat-skupina { margin: .7rem 1rem .25rem; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); } .hladat-polozka { display: block; padding: .5rem 1rem; text-decoration: none; color: var(--ink); } .hladat-polozka:hover { background: var(--hover); text-decoration: none; } /* ===================================================================== PREPÍNAČ JAZYKA `
` namiesto vlastného JS — funguje aj bez skriptu a ovláda sa klávesnicou. Používa ho shell appky aj verejný web. ===================================================================== */ .j-prepinac { position: relative; } .j-prepinac > summary { list-style: none; cursor: pointer; } .j-prepinac > summary::-webkit-details-marker { display: none; } .j-prepinac-tlacidlo { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-prvok); background: var(--card); color: var(--ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; } .j-prepinac[open] > summary .j-prepinac-tlacidlo, .j-prepinac > summary:hover .j-prepinac-tlacidlo { border-color: var(--brand); } .j-prepinac-kod { letter-spacing: .04em; } .j-zoznam { position: absolute; right: 0; top: calc(100% + 6px); z-index: 90; min-width: 11rem; padding: 4px; display: grid; gap: 1px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-blok); box-shadow: var(--tien); } .j-polozka { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-prvok); color: var(--ink); text-decoration: none; font-size: 13px; } .j-polozka:hover { background: var(--hover); text-decoration: none; } .j-polozka.je-aktivny { color: var(--brand-ink); font-weight: 700; background: var(--brand-soft); } /* v pätičke webu sa rozbaľuje nahor, inak by zoznam vyšiel mimo stránku */ .j-prepinac-hore .j-zoznam { top: auto; bottom: calc(100% + 6px); } /* na prihlasovacej obrazovke stojí prepínač pod kartou a je na stred — karta je jediné, čo na telefóne vidno, a prepínač sa k nej nemá tlačiť */ .j-prepinac-auth { margin: 18px auto 0; } .j-prepinac-auth .j-zoznam { right: auto; left: 50%; transform: translateX(-50%); } /* zvolený jazyk v Nastaveniach — tlačidlo, nie položka zoznamu */ .t3-btn.je-aktivny { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }