/* Reddit Suite — pracovny list, nie aplikacia. Hustota dat pred dekoraciou; farba je stav, nikdy ozdoba. */ :root { --ground: #fcfcfd; --surface: #ffffff; --sunken: #f4f4f5; --line: #e4e4e7; --line-str: #c3c3ca; /* okraj pola musi byt vidno aj bez fokusu */ --ink: #18181b; --ink-2: #52525b; /* 4.71:1 na groundu — sekundarny text nesie skoro vsetok obsah obrazoviek, takze musi prejst kontrastom, nie len vyzerat tlmene. */ --ink-3: #71717a; --bad: #b91c1c; --bad-bg: #fef2f2; --ok: #15803d; --ok-bg: #f0fdf4; --r: 5px; --r-pill: 99px; /* len scrollbar thumb — jedina oblá vec v systeme */ --ink-hover: #000000; /* o stupen tmavsie nez --ink, len pre stav tlacidla */ --bad-line: #fecaca; --ok-line: #bbf7d0; --tien: 24, 24, 27; /* RGB tiena; v tmavom rezime cierna */ color-scheme: light; --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; } /* Tmavy rezim. Predvolene sa riadi systemom; rucna volba v paneli ulozi data-tema na a vyhrava nad systemom oboma smermi. Tie iste tokeny, ina hodnota — komponenty o rezime nevedia nic. Primarne tlacidlo sa tak samo otoci na svetle s tmavym textom: stale je to najsilnejsi ton na obrazovke, len opacnym smerom. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) { --ground: #111113; --surface: #18181b; --sunken: #232327; --line: #2e2e33; --line-str: #4a4a52; --ink: #f4f4f5; --ink-2: #b4b4bc; --ink-3: #8e8e97; /* 5.8:1 na groundu, 4.8:1 na sunken — AA */ --bad: #f87171; --bad-bg: #2a1515; --bad-line: #5c2323; --ok: #4ade80; --ok-bg: #0f2417; --ok-line: #1f4d2f; --ink-hover: #ffffff; --tien: 0, 0, 0; color-scheme: dark; } } :root[data-tema="dark"] { --ground: #111113; --surface: #18181b; --sunken: #232327; --line: #2e2e33; --line-str: #4a4a52; --ink: #f4f4f5; --ink-2: #b4b4bc; --ink-3: #8e8e97; /* 5.8:1 na groundu, 4.8:1 na sunken — AA */ --bad: #f87171; --bad-bg: #2a1515; --bad-line: #5c2323; --ok: #4ade80; --ok-bg: #0f2417; --ok-line: #1f4d2f; --ink-hover: #ffffff; --tien: 0, 0, 0; color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font: 400 14px/1.5 var(--ui); -webkit-font-smoothing: antialiased; } /* Povrchy, ktore kresli prehliadac — bez nich vyzera stranka poskladana, nie postavena. */ ::selection { background: var(--ink); color: var(--surface); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; } :focus:not(:focus-visible) { outline: none; } * { scrollbar-width: thin; scrollbar-color: var(--line-str) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line-str); border-radius: var(--r-pill); border: 3px solid var(--ground); } *::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } *::-webkit-scrollbar-track { background: transparent; } a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-str); } a:hover { text-decoration-color: var(--ink); } h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; } h2 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.008em; } /* ---------------------------------------------------------------- panel */ /* Bocny panel namiesto hornej listy: modelka je nadradena svojim obrazovkam, a to sa da ukazat len stromom, nie radom rovnocennych kariet. */ body:not(.prihlasenie) { display: grid; grid-template-columns: 216px minmax(0, 1fr); } .panel { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); padding: 14px 10px; } .panel > summary { list-style: none; padding: 4px 8px 16px; pointer-events: none; display: flex; justify-content: center; } .panel > summary::-webkit-details-marker { display: none; } .panel .znacka { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14.5px; letter-spacing: -0.015em; } /* Logo je jedina farba mimo stavov — Davidova znacka, nie akcent. Nesmie sa z neho stat paleta: tlacidla a odkazy ostavaju cierne. */ .panel .logo { height: 28px; width: auto; display: block; } /* Logo bez textu, vycentrovane — nadpis stranky nesie alt obrazka. */ .logo-login { margin: 4px 0 16px; text-align: center; line-height: 0; } .logo-login img { height: 40px; width: auto; } .prihlasenie .podnadpis { text-align: center; } /* Tri urovne, kazda inym tvarom — inak panel splyva do jedneho stlpca rovnakeho sedeho textu (prva verzia, David: "splyvaju fonty"): 1. nadpis skupiny: 10.5px, velke pismena, tlmeny, vzduch nad nim 2. polozka: 13.5px, 500, takmer cierna 3. obrazovka modelky: 13px, 400, sekundarna — o stupen tichsia Aktivna modelka je orámovany blok, takze jej obrazovky k nej patria ocividne, nie len odsadenim. */ .panel nav { display: flex; flex-direction: column; gap: 2px; } .panel nav a { padding: 6px 10px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; } .panel nav a:hover { background: var(--sunken); } /* Ikona pred polozkou: tlmena, kym polozka nie je aktivna alebo pod mysou — inak by rad ikon hlucnejsi nez text, ktory nesie vyznam. */ .panel nav a { display: flex; align-items: center; gap: 10px; } .panel nav .ikona { flex: 0 0 16px; color: var(--ink-3); } .panel nav a:hover .ikona, .panel nav a[aria-current="page"] .ikona { color: var(--ink); } .panel nav a[aria-current="page"] { background: var(--sunken); } .panel .skupina { margin: 22px 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); } .panel nav > a:first-child + .skupina { margin-top: 18px; } /* Meno modelky je Reddit identita — mono, rovnako ako v zoznamoch. */ .panel .modelka, .panel .meno-modelky { font-family: var(--mono); font-size: 13px; } .panel .modelka.aktivna { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); } .panel .meno-modelky { padding: 6px 8px 5px; color: var(--ink); font-weight: 600; } .panel nav a.pod { font-family: var(--ui); font-size: 13px; font-weight: 400; color: var(--ink-2); padding: 5px 8px 5px 12px; } .panel nav a.pod .ikona { width: 15px; height: 15px; } .panel nav a.pod:hover { color: var(--ink); background: var(--sunken); } .panel nav a.pod[aria-current="page"] { color: var(--ink); font-weight: 500; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } /* Ucet je pripnuty k spodku panelu. Obsah
nie je flex kontajner, takze margin-top: auto tu nefunguje — preto absolutne v sticky paneli a spodny padding, aby strom pod neho nezaliezol. */ .panel { padding-bottom: 64px; } .panel .ucet { position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 10px 4px 0 8px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); background: var(--surface); } .panel .ucet .kto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel .ucet b { font-weight: 500; color: var(--ink-2); } .panel .odhlasit, .panel .tema { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r); color: var(--ink-3); text-decoration: none; } .panel .odhlasit:hover, .panel .tema:hover { background: var(--sunken); color: var(--ink); } /* Tlacidlo temy vyzera ako odkaz odhlasenia vedla neho, nie ako tlacidlo. */ .panel .tema { border: 0; background: transparent; padding: 0; cursor: pointer; height: 30px; } /* Ukazuje sa rezim, na ktory sa prepne: v svetlom mesiac, v tmavom slnko. */ .panel .tema .slnko { display: none; } :root[data-tema="dark"] .panel .tema .slnko { display: block; } :root[data-tema="dark"] .panel .tema .mesiac { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) .panel .tema .slnko { display: block; } :root:not([data-tema="light"]) .panel .tema .mesiac { display: none; } } @media (max-width: 720px) { body:not(.prihlasenie) { display: block; } .panel { position: sticky; top: 0; z-index: 10; height: auto; max-height: 100vh; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 10px; } .panel > summary { display: flex; align-items: center; height: 48px; padding: 0 8px; pointer-events: auto; cursor: pointer; } .panel .menu-slovo { margin-left: auto; font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-str); } .panel .menu-slovo::after { content: "Menu"; } .panel[open] .menu-slovo::after { content: "Zavriet"; } .panel nav { padding-bottom: 8px; } .panel nav a { padding: 10px 8px; } .panel nav a.pod { padding-left: 20px; } .panel { padding-bottom: 0; } .panel .ucet { position: static; margin: 0 0 10px; padding: 10px 4px 0 8px; } .panel .odhlasit, .panel .tema { width: 40px; height: 40px; } } /* ------------------------------------------------------------ rozvrhnutie */ /* width: 100% je nutnost: main je bunka mriezky vedla panelu a s margin: auto by sa zmrstil na sirku obsahu — kazda stranka by mala inu sirku. */ main { width: 100%; max-width: 880px; margin: 0 auto; padding: 28px 20px 64px; } .hlava { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; } .hlava .akcia { margin-left: auto; align-self: center; } .suhrn { margin: 0 0 20px; color: var(--ink-3); font-size: 13px; } .suhrn b { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; } /* Nad nadpisom viac miesta nez pod nim — sekcia patri k tomu, co nasleduje. */ section { margin-top: 30px; } section > h2 { margin-bottom: 9px; } /* ---------------------------------------------------------------- zoznam */ .zoznam { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; } .zoznam > * + * { border-top: 1px solid var(--line); } .riadok { display: flex; align-items: center; gap: 14px; padding: 11px 14px; min-height: 44px; } .riadok:hover { background: var(--ground); } /* Meno modelky je Reddit identita, teda identifikator ako subreddit — mono vsade, nech ten isty udaj nema dve tvare na roznych obrazovkach. */ .riadok .meno { font-family: var(--mono); font-size: 13px; font-weight: 500; } .riadok .meno a { text-decoration: none; } .riadok .meno a:hover { text-decoration: underline; text-decoration-color: var(--ink); } /* Pevne sirky stlpcov, nie flex s auto marginom: inak x-pozicia kazdeho cisla zavisi od dlzky susedneho textu a stlpce sa nedaju porovnat ocami. */ .riadok .udaje { margin-left: auto; display: flex; align-items: center; color: var(--ink-3); font-size: 13px; } .riadok .udaje > * { text-align: right; } .riadok .udaje .st-subov { flex: 0 0 132px; } .riadok .udaje .st-postov { flex: 0 0 96px; } .riadok .udaje .st-kedy { flex: 0 0 132px; } .riadok .cislo { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-2); } .riadok form { display: flex; gap: 6px; align-items: center; margin: 0; } .prazdno { padding: 28px 14px; text-align: center; color: var(--ink-3); font-size: 13px; } .prazdno p { margin: 0 0 12px; } .prazdno p:last-child { margin-bottom: 0; } .riadok.den { align-items: flex-start; } .riadok.den .datum { flex: 0 0 52px; padding-top: 3px; color: var(--ink-3); } /* Subreddit, datum, pocet — vzdy monospace, aby sa dali porovnavat ocami. `.id` je to iste pre identifikator vnutri prozy (meno modelky vo volbe). */ .sub, .id { font-family: var(--mono); font-size: 12.5px; } .znacky { display: flex; flex-wrap: wrap; gap: 5px; } .znacka-sub { font-family: var(--mono); font-size: 11.5px; line-height: 1; padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-2); background: var(--surface); white-space: nowrap; /* inak sa token rozpadne na orámované kusy */ } /* Karta je obal na formular. `.zoznam` kresli linku medzi kazde dve deti, takze vo formulari by nakreslila hairline, ktora nic neoddeluje. */ .karta { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px; } /* Posledne pole v karte uz nema co oddelovat od nasledujuceho. */ .karta > .pole:last-child { margin-bottom: 0; } /* Prazdny stav vnutri fieldsetu nesie vlastny vzduch fieldset, nie on sam. */ fieldset > .prazdno { padding: 12px 0; } /* Napoveda pod skupinou volieb patri k nim, preto vacsi odstup zhora. */ fieldset > .napoveda { display: block; margin: 8px 0 0; font-size: 12px; color: var(--ink-3); } /* Samostatny prepinac mimo skupiny sa zarovnava s okrajom sekcie. */ .volba.samostatna { padding-left: 0; } /* ------------------------------------------------------------- nahravanie */ /* Formular ma rovnake hrany ako mriezka pod nim. Uzsia karta nad sirokym obsahom vyzera ako nedokoncena stranka — pozri DESIGN.md. */ .nahravanie { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 16px; } .nahravanie .pole { margin: 0; } .nahravanie .subory { flex: 1 1 auto; min-width: 0; } .nahravanie .kat { flex: 0 0 200px; } /* Vyska sa drzi textoveho pola, inak v karte vedla seba nesedia ani popisky nad nimi — prehliadac kresli suborove pole vyssie nez textove. */ input[type="file"] { width: 100%; height: 35px; padding: 0 9px; font: 400 13px/33px var(--ui); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-str); border-radius: var(--r); } input[type="file"]::file-selector-button { margin-right: 9px; height: 24px; padding: 0 10px; font: 500 12.5px/1 var(--ui); color: var(--ink); background: var(--sunken); border: 1px solid var(--line-str); border-radius: var(--r); cursor: pointer; vertical-align: middle; } input[type="file"]::file-selector-button:hover { border-color: var(--ink-3); } @media (max-width: 720px) { .nahravanie { flex-direction: column; align-items: stretch; } .nahravanie .kat { flex: 1 1 auto; } } /* Premenovanie kategorie: pole vyzera ako text, kym nan nesiahnes — ten isty vzor ako `.premenuj` pri menach modeliek. Musi stat az za definiciou poli. */ .premenuj-kat { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--ink-3); } .premenuj-kat.riadkovy { margin-bottom: 0; } .premenuj-kat label { color: var(--ink-2); font-weight: 500; font-size: 12.5px; white-space: nowrap; } .premenuj-kat input[type="text"] { flex: 0 1 220px; padding: 5px 7px; font-family: var(--mono); font-size: 12.5px; border-color: var(--line); background: var(--surface); } .premenuj-kat input[type="text"]:focus { border-color: var(--ink); } .premenuj-kat button { visibility: hidden; } .premenuj-kat.zmenene button { visibility: visible; } .premenuj-kat .napoveda { font-size: 12px; color: var(--ink-3); } @media (max-width: 720px) { .premenuj-kat { flex-wrap: wrap; } .premenuj-kat .napoveda { flex: 1 1 100%; } .premenuj-kat button { visibility: visible; } /* bez hoveru niet co odhalit */ } .popisovanie { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .popisovanie p { margin: 0; font-size: 13px; color: var(--ink-2); } .popisovanie p b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .popisovanie .tlacidla { display: flex; gap: 8px; margin-left: auto; } @media (max-width: 720px) { .popisovanie { flex-direction: column; align-items: stretch; } .popisovanie .tlacidla { margin-left: 0; } .popisovanie .tlacidla button { flex: 1; } } /* ---------------------------------------------------------------- priebeh */ /* Menovane fazy, nie jeden neurcity pruh: pri davke padne takmer cely cas na jednu z nich a bez rozdelenia to vyzera ako zaseknutie. */ .priebeh { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px 14px; margin-bottom: 16px; } /* Beziaci beh plava nad obsahom. Je to jedina vec na obrazovke, ktora nestoji v rozvrhnuti, takze tien je tu na mieste — oddeluje ju od toho, cez co lezi (rovnaky tien ako prihlasovacia karta). */ .priebeh.bezi { position: fixed; right: 20px; bottom: 20px; z-index: 20; width: 340px; max-width: calc(100vw - 40px); margin: 0; border-color: var(--line-str); box-shadow: 0 1px 2px rgba(var(--tien), .04), 0 8px 24px -12px rgba(var(--tien), .12); } /* Panel je uzsi nez obsahova sirka, takze sa riadok fazy musi zalomit — inak pruh pretecie von a odreze sa. */ .priebeh.bezi .faza { flex-wrap: wrap; } .priebeh.bezi .pruh { flex: 1 1 100%; } .priebeh .faza { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; } .priebeh .stav-znak { flex: 0 0 52px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .priebeh .faza.hotovo .stav-znak { color: var(--ok); } .priebeh .faza.chyba .stav-znak { color: var(--bad); } .priebeh .faza.bezi .stav-znak { color: var(--ink); } .priebeh .faza.caka { color: var(--ink-3); } .priebeh .nazov { flex: 0 0 auto; } .priebeh .pocet { margin-left: auto; color: var(--ink-3); font-size: 12.5px; } /* Odhad pod pruhom: pocita sa z aktualneho odstupu, takze pri skrteni narastie — prave vtedy, ked by pevny odhad klamal. */ .priebeh .pozn { flex-basis: 100%; padding-left: 52px; color: var(--ink-3); font-size: 12px; } .planovac .pole.siroke { flex: 1 1 200px; } /* var(--r) na 4 px vysokom pruhu prehliadac aj tak orezhe na polovicu vysky, takze vlastna hodnota mimo skaly by nic nepridala. */ .priebeh .pruh { flex: 0 0 120px; height: 4px; border-radius: var(--r); background: var(--sunken); overflow: hidden; } .priebeh .vyplna { display: block; height: 100%; background: var(--ink); } .priebeh .zhrnutie { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); } .priebeh .zhrnutie.zle { color: var(--bad); } .priebeh .zhrnutie b { font-weight: 500; color: var(--ink); } /* Poznamky behu su to, preco je v plane 4 postov namiesto 6. Bez nich skonci beh ticho a o den neskor sa to uz nema kde dozvediet. */ .priebeh .poznamky { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); } .priebeh .poznamky li { margin-bottom: 3px; } .priebeh .log { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); } @media (max-width: 720px) { .priebeh .faza { flex-wrap: wrap; } .priebeh .pruh { flex: 1 1 100%; } /* Na telefone nema roh zmysel — pruh cez celu sirku pri spodku. */ .priebeh.bezi { right: 0; left: 0; bottom: 0; width: auto; max-width: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; } } /* ---------------------------------------------------------------- filtre */ /* Rovnaky slovnik ako navigacia v liste: nic nove sa neucis, len to tu filtruje namiesto toho, aby to presuvalo. */ .filtre { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 8px -9px; } .filtre + .filtre { margin-bottom: 16px; } .filtre a { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 9px; border-radius: var(--r); font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap; } .filtre a:hover { background: var(--sunken); color: var(--ink); } .filtre a[aria-current] { background: var(--sunken); color: var(--ink); font-weight: 500; } .filtre .cislo { color: var(--ink-3); } .filtre a[aria-current] .cislo { color: var(--ink-2); } /* --------------------------------------------------------------- mriezka */ /* Nahlady maju pevny pomer stran. Bez neho sa stranka pri dopĺňaní obrazkov trha, lebo kazdy z nich az po nacitani povie, aky je vysoky. */ .mriezka { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .dlazdica { position: relative; } .nahlad { display: block; text-decoration: none; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } /* Zaskrtavatko lezi nad rohom nahladu. Ciel je cely roh, nie 14 px stvorcek — na telefone sa do samotneho policka trafis tazko. */ .dlazdica .vyber { position: absolute; top: 0; left: 0; z-index: 1; padding: 7px 10px 10px 7px; cursor: pointer; line-height: 0; } .dlazdica .vyber input { width: 16px; height: 16px; margin: 0; background: var(--surface); border-radius: 3px; box-shadow: 0 0 0 1px var(--line-str), 0 1px 2px rgba(var(--tien), .25); } /* Vybrana dlazdica musi byt vidiet aj ked sa pozeras na mriezku zhora. */ .dlazdica:has(.vyber input:checked) .nahlad { border-color: var(--ink); } .dlazdica:has(.vyber input:checked) .nahlad img { opacity: .72; } /* ------------------------------------------------------------ hromadne */ .lista-vyberu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunken); font-size: 13px; } .lista-vyberu .vsetky { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; } .lista-vyberu .akcie-vyberu { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; } .lista-vyberu input[type="text"] { width: 150px; padding: 5px 8px; font-family: var(--mono); font-size: 12.5px; } .lista-vyberu .vyzaduje-vyber { display: flex; align-items: center; gap: 6px; } /* Tlmia sa len akcie, ktore bez vyberu nemaju na com pracovat. Popisovanie a zopakovanie bez neho platia na vsetky, ktorych sa tyka — zosednut ich by znamenalo schovat prave tu akciu, ktoru clovek hlada najcastejsie. */ .lista-vyberu:not(.nieco) .vyzaduje-vyber { opacity: .45; pointer-events: none; } /* Zakladna napoveda. Doteraz bola definovana len vnutri `.pole` a `fieldset`, takze mimo nich sa kreslila ako bezny text. Tie dve podrobnejsie pravidla su specifickejsie, takze ostavaju platit. */ .napoveda { font-size: 12px; color: var(--ink-3); } .napoveda.pod-listou { margin: -4px 0 12px; } /* Na telefone je mriezka dlha. Lista ostava pri palci, inak by si po zaskrtnuti fotky niekde v polovici musel rolovat celou stranou hore. */ @media (max-width: 720px) { .lista-vyberu { position: sticky; bottom: 0; z-index: 5; margin: 0 -14px 10px; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; border-top-color: var(--line-str); background: var(--surface); } .lista-vyberu .akcie-vyberu { width: 100%; margin-left: 0; } .lista-vyberu .akcie-vyberu input[type="text"] { flex: 1; width: auto; } } .nahlad:hover { border-color: var(--line-str); } .nahlad img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--sunken); } .nahlad .spodok { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); } .nahlad .spodok .id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; } .nahlad .znak { margin-left: auto; white-space: nowrap; } .nahlad .znak.chyba { color: var(--bad); } .nahlad .znak.pouzita { color: var(--ink-2); } /* "Bez popisu" nie je porucha, len este nedokoncena praca — tlmena, nie cervena. */ .nahlad .znak.bezpopisu { color: var(--ink-3); } .strany { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--ink-3); } .strany .kde { margin: 0 auto; } .strany a { color: var(--ink-2); } .priebeh .zastav { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } /* ---------------------------------------------------------- detail fotky */ .foto-detail { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 320px; } /* align-self: start — bunka mriezky sa inak natiahne na vysku praveho stlpca a pod fotkou ostane sivy pas pozadia, ked je popis dlhsi nez fotka vysoka. */ .foto-detail .plat { display: block; align-self: start; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunken); overflow: hidden; } .foto-detail .plat img { display: block; width: 100%; height: auto; } .foto-detail .pole { margin-bottom: 11px; } .foto-detail .pole:last-child { margin-bottom: 0; } .popis { margin: 0; font-size: 13.5px; line-height: 1.55; } .popis.caka, .popis.chybny { color: var(--ink-3); } .popis.chybny { color: var(--bad); } .lomitelny { overflow-wrap: anywhere; } @media (max-width: 720px) { .foto-detail { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------ plan */ .planovac { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; } .planovac .pole { margin: 0; flex: 0 0 140px; } .planovac .pole:first-child { flex: 0 0 170px; } .volne-suby .znacka-sub .kat { margin-left: 5px; color: var(--ink-3); } /* Zbalitelny podklad. `
` je na to natives — bez JavaScriptu, ovladatelne klavesnicou, a pocet ostava v summary, takze nerozklikavas naslepo. */ /* Suhrn je riadok textu, nie dalsia karta: orámovaný pás cez celu sirku pod zoznamom planov citas ako pokazeny riadok toho zoznamu. Inline-flex drzi aj fokusovy ram okolo slov namiesto cez celu obrazovku. */ .rozbalit { margin: 18px 0 12px; } .rozbalit > summary { display: inline-flex; align-items: baseline; gap: 8px; padding: 2px 0; cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--ink-2); } .rozbalit > summary::-webkit-details-marker { display: none; } .rozbalit > summary:hover { color: var(--ink); } .rozbalit > summary .cislo { color: var(--ink-3); } /* Stav sa hovori slovom, nie sipkou: tento build je bez ikon a jeho afordancie su slova (DESIGN.md). Text sa meni cez CSS, takze rozbalovanie nepotrebuje ziadny JavaScript. */ .rozbalit > summary .prepnut { font-weight: 400; font-size: 12.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-str); } .rozbalit > summary .prepnut::after { content: "zobrazit"; } .rozbalit[open] > summary .prepnut::after { content: "skryt"; } .rozbalit > summary:hover .prepnut { color: var(--ink-2); text-decoration-color: currentColor; } .rozbalit > summary + * { margin-top: 8px; } .rozbalit > .znacky { padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } /* Karta postu: nahlad vlavo, obsah vpravo. Je to jedine miesto v systeme, kde ma karta zmysel — kazdy post je samostatna jednotka, s ktorou clovek pracuje zvlast a odskrtava ju. */ .plan-posty { display: flex; flex-direction: column; gap: 12px; } .post { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; } .post-hlava { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--ground); } .post-hlava .zaradit { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; } .post-hlava .sub { font-size: 13.5px; font-weight: 500; } .post-hlava .kat { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .post-hlava .kopiruj { margin-left: auto; height: 26px; padding: 0 9px; font-size: 12px; } /* Fotka sedi na stred bloku: pri desiatich captionoch je stlpec vysoky a nahlad prilepeny hore necha pod sebou prazdne miesto. */ .post-telo { display: flex; gap: 14px; padding: 12px; align-items: center; } .post-telo .foto { flex: 0 0 110px; align-self: center; } .post-telo .foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); background: var(--sunken); } .post-obsah { flex: 1; min-width: 0; } .post-obsah .preco { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); } .captiony { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; } .captiony li { font-size: 13.5px; line-height: 1.5; } .captiony li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; } .captiony .text { overflow-wrap: anywhere; } .captiony .kopiruj { height: 22px; padding: 0 7px; font-size: 11.5px; margin-left: 6px; vertical-align: 1px; } button.kopiruj.hotovo { color: var(--ok); border-color: var(--ok); } /* Obrazovka toho, kto postuje: jedna veta a dve akcie. Fotka je tu vacsia nez v pláne — je to vec, ktoru clovek nahráva, nie ilustracia riadku. */ .postovanie .post-telo .foto { flex: 0 0 150px; } /* Title je to, co postujuci prepisuje do Redditu — preto najvacsi text karty a oznaceny rovnakym slovom, ake ukazuje Reddit pri postovani. */ .stitok-title { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .title-postu { margin: 0 0 12px; font-size: 16.5px; font-weight: 500; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; } /* Fotka zvacsena nad strankou. Vyska obrazka sa drzi obrazovky, aby title pod nim bol vzdy vidiet bez posuvania. */ .okno-fotky { width: min(92vw, 720px); max-height: 94vh; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px -16px rgba(var(--tien), .45); } .okno-fotky::backdrop { background: rgba(0, 0, 0, .6); } .okno-hlava { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); } .okno-fotky img { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: var(--ground); } .okno-fotky .title-postu { margin: 0; padding: 14px 16px 16px; font-size: 18px; user-select: text; } .postovanie .foto { cursor: zoom-in; } .title-chyba { margin: 0 0 12px; font-size: 14px; color: var(--bad); } .akcie-postu { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Vyber captionu: radio pri kazdom riadku, cely riadok je klikatelny. Nevybrane captiony ostavaju citatelne — su to alternativy, nie sum. */ .captiony.vyber { padding-left: 0; list-style: none; } .captiony.vyber li { display: flex; align-items: flex-start; gap: 6px; } .volba-captionu { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; } .volba-captionu input { margin: 3px 0 0; flex: 0 0 auto; } .volba-captionu input:checked + .text { color: var(--ink); font-weight: 500; } .captiony.vyber .text { color: var(--ink-2); } /* Na dotyk sa tlacidlo v riadku captionu neschovava — bez hoveru by si ho nemal ako najst, a kopirovanie je tu hlavna praca. */ @media (hover: hover) and (pointer: fine) { .captiony .kopiruj { opacity: 0; transition: opacity .12s ease; } .captiony li:hover .kopiruj, .captiony li:focus-within .kopiruj { opacity: 1; } } @media (max-width: 720px) { .planovac .pole, .planovac .pole:first-child { flex: 1 1 130px; } .post-telo { flex-direction: column; } .post-telo .foto { flex: 0 0 auto; max-width: 160px; } } /* --------------------------------------------------------------- historia */ .presun { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; } .presun .pole { margin: 0; flex: 0 0 170px; } .presun .volba { padding-left: 0; } .vratit { margin: -8px 0 16px; } .hlavicka-varovania { color: var(--ink-2); font-size: 13px; background: var(--ground); } /* Zapis v historii sa da zaskrtnut na zmazanie — znacka subu je zaroven ciel kliku, takze musi vyzerat ako ciel. */ .znacka-sub.volitelna { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .znacka-sub.volitelna:hover { border-color: var(--line-str); } .znacka-sub.volitelna input { width: 13px; height: 13px; margin: 0; } /* ------------------------------------------------------------ subreddity */ .pridat-suby { margin-bottom: 16px; } .pridat-suby .pole { margin-bottom: 10px; } .pridat-suby textarea { font-family: var(--mono); font-size: 12.5px; } /* --------------------------------------------------------------- tabulka */ .tabulka-obal { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--ground); white-space: nowrap; } td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--ground); } td.cislo, th.cislo { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; } .dim-bunka { color: var(--ink-3); } /* --------------------------------------------------------------- formular */ form { margin: 0; } .pole { display: block; margin-bottom: 14px; } .pole > span { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; } /* Generator captionov: zoznam subov vlavo, pocet a tlacidlo vpravo dole. */ .generator-form { display: grid; gap: 14px; margin-bottom: 8px; grid-template-columns: minmax(0, 1fr) 170px; align-items: end; } .generator-form .pole { margin: 0; } .generator-form textarea { width: 100%; resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 1.5; } .generator-form .bok { display: flex; flex-direction: column; gap: 10px; align-self: stretch; justify-content: flex-end; } .hlava-sekcie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .sub-captiony { margin-bottom: 12px; } .sub-hlava { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sub-hlava .kopiruj { margin-left: auto; } .sub-captiony .hlaska { margin: 0; } @media (max-width: 720px) { .generator-form { grid-template-columns: 1fr; } } /* Formular scrapera: hore co a kolko, dole keywords na celu sirku. */ .scraper-form { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 110px 150px auto; align-items: end; margin-bottom: 8px; } .scraper-form .pole { margin: 0; } .scraper-form .keywords { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; border: 0; padding: 12px 0 0; margin: 0; background: none; min-width: 0; border-top: 1px solid var(--line); } .scraper-form .keywords legend { float: left; margin: 0 4px 0 0; padding: 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); } /* Segmentovy prepinac z dvoch radii: vybrany segment je biely cip na zapustenom podklade, rovnako ako aktivna polozka v paneli. */ .prepinac { display: inline-flex; flex: 0 0 auto; padding: 2px; border-radius: var(--r); background: var(--sunken); } .prepinac label { position: relative; cursor: pointer; } .prepinac input { position: absolute; opacity: 0; pointer-events: none; } .prepinac span { display: block; padding: 5px 12px; border-radius: 4px; font-size: 13px; color: var(--ink-2); } .prepinac input:checked + span { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line); } .prepinac input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; } .scraper-form .vlastne-kw { flex: 1 1 auto; min-width: 0; } /* Automaticky rezim: pole ostava na mieste (formular neskace), len je zasednute a neklikatelne. Server ho v tomto rezime aj tak ignoruje. */ .keywords:has(input[value="auto"]:checked) .vlastne-kw { opacity: .45; pointer-events: none; } .pouzite-kw { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -8px 0 16px; } .stitok-kw { font-size: 12.5px; color: var(--ink-3); } @media (max-width: 720px) { .scraper-form { grid-template-columns: 1fr 1fr; } .scraper-form .zdroj, .scraper-form > button { grid-column: 1 / -1; } .scraper-form .keywords { flex-wrap: wrap; } .scraper-form .vlastne-kw { flex-basis: 100%; } } .pole .napoveda { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-3); font-weight: 400; } input[type="text"], input[type="password"], input[type="number"], input[type="date"], select, textarea { width: 100%; padding: 7px 9px; font: 400 13.5px/1.4 var(--ui); color: var(--ink); background: var(--surface); border: 1px solid var(--line-str); border-radius: var(--r); transition: border-color .12s ease, box-shadow .12s ease; } input:hover, select:hover, textarea:hover { border-color: var(--ink-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(var(--tien), .08); } input::placeholder { color: var(--ink-3); } textarea { min-height: 88px; resize: vertical; font-family: var(--mono); font-size: 12.5px; } fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 0 0 14px; background: var(--surface); } /* Poznamka v nadpise skupiny prav je veta, nie stitok — bez velkych pismen. */ .skupina-prav legend .co { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; } legend { padding: 0 5px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .volby { display: grid; gap: 2px; } .volba { display: flex; align-items: flex-start; gap: 8px; padding: 5px 6px; border-radius: 4px; cursor: pointer; font-size: 13.5px; } .volba:hover { background: var(--ground); } .volba input { margin: 2px 0 0; } .volba .co { color: var(--ink-3); font-size: 12.5px; } input[type="radio"] { accent-color: var(--ink); } input[type="checkbox"] { accent-color: var(--ink); width: 14px; height: 14px; cursor: pointer; } /* --------------------------------------------------------------- tlacidla */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; font: 500 13px/1 var(--ui); color: var(--surface); background: var(--ink); border: 1px solid var(--ink); border-radius: var(--r); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .12s ease, border-color .12s ease; } button:hover, .btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); } button:active, .btn:active { transform: translateY(0.5px); } button:disabled { opacity: .45; cursor: not-allowed; } button.tichy, .btn.tichy { color: var(--ink); background: var(--surface); border-color: var(--line-str); } button.tichy:hover, .btn.tichy:hover { background: var(--sunken); border-color: var(--ink-3); } button.zle { color: var(--bad); background: var(--surface); border-color: var(--line-str); } button.zle:hover { background: var(--bad-bg); border-color: var(--bad); } .akcie { display: flex; gap: 8px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .akcie .vpravo { margin-left: auto; } /* Meno v zozname sa da prepisat, ale nevyzera ako formular, kym nan nesiahnes. Musi stat AZ ZA definiciou poli — inac ho prepise `input[type=text]` s rovnakou specificitou a zo zoznamu sa stane rad bielych boxov. */ .premenuj { display: flex; gap: 6px; align-items: center; flex: 1; max-width: 300px; } .premenuj input[type="text"] { border-color: transparent; background: transparent; font-family: var(--mono); font-size: 13px; font-weight: 500; padding: 5px 7px; } .premenuj input[type="text"]:hover { border-color: var(--line); background: var(--surface); } .premenuj input[type="text"]:focus { border-color: var(--ink); background: var(--surface); } .premenuj button { visibility: hidden; } .premenuj.zmenene button { visibility: visible; } /* Pridavanie je prvy riadok zoznamu, nie karta vedla neho. Pole tak stoji presne tam, kde stoja mena pod nim, a tlacidlo tam, kde stoji akcia riadku — jeden stlpec namiesto dvoch roznych sirok nad sebou. */ .riadok.pridat { background: var(--ground); } .riadok.pridat input[type="text"] { flex: 1; max-width: 300px; border-color: transparent; background: transparent; font-family: var(--mono); font-size: 13px; font-weight: 500; padding: 5px 7px; } .riadok.pridat input[type="text"]:hover { border-color: var(--line); background: var(--surface); } .riadok.pridat input[type="text"]:focus { border-color: var(--ink); background: var(--surface); } .riadok.pridat button { margin-left: auto; } /* Mazanie je najtichsia akcia v riadku, nie najhlasnejsia: objavi sa az pri prejdeni mysou. Musi platit `pointer: fine` — samotne `hover: hover` hlasi true aj na dotykovych a emulovanych zariadeniach, a tam by sa tlacidlo schovalo bez sance vyvolat ho, len s prazdnym miestom po nom. */ @media (hover: hover) and (pointer: fine) { .riadok .zmaz { opacity: 0; transition: opacity .12s ease; } .riadok:hover .zmaz, .riadok:focus-within .zmaz { opacity: 1; } } /* Dotykove zariadenia potrebuju vacsie ciele nez mys. */ @media (pointer: coarse) { button, .btn { height: 40px; padding: 0 14px; } input, select { padding: 10px; font-size: 16px; } /* 16px = iOS nezooomuje */ .volba { padding: 9px 6px; } /* Filtre su odkazy, nie tlacidla, takze ich pravidlo pre tlacidla minie. Prstom sa do 26 px vysokeho ciela trafis az na treti pokus. */ .filtre a { min-height: 40px; align-items: center; padding: 0 10px; } } /* ----------------------------------------------------------------- hlasky */ .hlaska { display: flex; gap: 8px; padding: 9px 12px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 13px; } .hlaska.error { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); } .hlaska.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); } /* ------------------------------------------------------------- prihlasenie */ .prihlasenie { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .prihlasenie form { width: 100%; max-width: 312px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 24px; box-shadow: 0 1px 2px rgba(var(--tien), .04), 0 8px 24px -12px rgba(var(--tien), .12); } .prihlasenie h1 { margin-bottom: 3px; } .prihlasenie .podnadpis { margin: 0 0 20px; color: var(--ink-3); font-size: 13px; } .prihlasenie button { width: 100%; } /* Prihlasenie nema panel, takze tu main nema drzat plnu sirku — inak by sa karta prestala centrovat a uhla by k lavemu okraju 880px stlpca. */ .prihlasenie main { width: auto; } /* ------------------------------------------------------------------ mobil */ @media (max-width: 720px) { main { padding: 20px 14px 56px; } /* Akcia ostava vpravo pri nadpise, nie ako cierny pruh cez celu sirku medzi nadpisom a vetou, ktora stranku vysvetluje. */ .hlava { flex-wrap: wrap; gap: 8px 10px; } .hlava .akcia { margin-left: auto; } .riadok { flex-wrap: wrap; gap: 8px 14px; } .riadok .udaje { margin-left: 0; width: 100%; gap: 14px; } .riadok .udaje > * { flex: 0 1 auto; text-align: left; } /* Pridavaci riadok nema co zalomit — pole a tlacidlo patria na jeden riadok aj na uzkej obrazovke. */ .riadok.pridat { flex-wrap: nowrap; } .riadok.pridat input[type="text"] { max-width: none; } /* Tabulka sa na uzkej obrazovke rozpadne na riadky. Vodorovne rolovanie by odstrihlo posledny stlpec bez akehokolvek naznaku, ze tam este nieco je. */ .tabulka-obal table, .tabulka-obal tbody, .tabulka-obal tr, .tabulka-obal td { display: block; width: 100%; } .tabulka-obal thead { display: none; } .tabulka-obal tr { padding: 11px 14px; border-bottom: 1px solid var(--line); } .tabulka-obal tr:last-child { border-bottom: 0; } .tabulka-obal td { border: 0; padding: 2px 0; display: flex; gap: 8px; } .tabulka-obal td::before { content: attr(data-stlpec); flex: 0 0 104px; color: var(--ink-3); font-size: 12px; } .tabulka-obal td:first-child::before { content: none; } .tabulka-obal td:first-child { font-weight: 500; margin-bottom: 4px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }