From 78be7ec1c2e93a1f85241a04cc24f752617fa184 Mon Sep 17 00:00:00 2001 From: stepan Date: Wed, 18 Mar 2026 23:03:29 +0100 Subject: [PATCH] =?UTF-8?q?[ui]=20CSS=20=E2=80=93=20Montserrat=20100=20ve?= =?UTF-8?q?=20t=C5=99ech=20velikostech,=20IBM=20Plex=20Serif=200.78rem,=20?= =?UTF-8?q?zaoblen=C3=AD=20blok=C5=AF=20a=20st=C3=ADny?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/auth-styl.css | 429 ++++++++++++++++++++++++---------------------- 1 file changed, 228 insertions(+), 201 deletions(-) diff --git a/css/auth-styl.css b/css/auth-styl.css index 9da0475..91a363b 100644 --- a/css/auth-styl.css +++ b/css/auth-styl.css @@ -13,51 +13,68 @@ /* ------------------------------------------------------------ GOOGLE FONTS - Montserrat – moderní bezpatkové, kapitálky pro nadpisy - IBM Plex Serif – moderní patkové pro tělo textu + Montserrat 100 – tři velikosti (viz níže) + IBM Plex Serif 300 – jedna velikost pro veškerý text ------------------------------------------------------------ */ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=IBM+Plex+Serif:ital,wght@0,300;0,400;1,300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=IBM+Plex+Serif:ital,wght@0,300;1,300&display=swap'); /* ------------------------------------------------------------ - PROMĚNNÉ – barvy a rozměry + TYPOGRAFICKÁ STUPNICE MONTSERRAT + ============================================================ + Velikost A – 2.2rem ... hlavní nadpis stránky (h1), jednou + Velikost B – 0.88rem ... nadpisy sekcí (h2, h3) + Velikost C – 0.78rem ... nejmenší = IBMPlexSerif velikost + (th, button, label, span#heslo-sila) + IBM Plex Serif ... 0.78rem pro veškerý ostatní text + ------------------------------------------------------------ */ + + +/* ------------------------------------------------------------ + PROMĚNNÉ ------------------------------------------------------------ */ :root { /* Pozadí */ - --bg-hlavni: #141414; /* hlavní pozadí stránky = barva oddělovačů mezi bloky */ - --bg-obsah: #222222; /* pozadí obsahových bloků (světlejší) */ - --bg-prvek: #2c2c2c; /* pozadí inputů, tabulek, textarea */ - --bg-prvek-focus: #333333; /* inputy při focusu */ + --bg-hlavni: #141414; /* tělo stránky = barva mezer mezi bloky */ + --bg-obsah: #222222; /* světlejší bloky obsahu */ + --bg-prvek: #2a2a2a; /* inputy, tabulky, textarea */ + --bg-prvek-focus: #313131; /* input při focusu */ /* Písmo */ - --text-hlavni: #d4d4d4; /* hlavní text */ - --text-jemny: #888888; /* pomocný text */ - --text-nadpis: #f0f0f0; /* nadpisy */ + --text-hlavni: #d0d0d0; + --text-jemny: #7a7a7a; + --text-nadpis: #eeeeee; /* Akcent – tmavě červená */ - --akcent: #5c1010; /* primární akcent – pozadí buttonů, th (tmavší) */ - --akcent-hover: #7a1515; /* hover stav buttonů */ - --akcent-svetly: #c0392b; /* červená pro text, odkazy, h1 */ - --akcent-okraj: #4a0d0d; /* okraj akcentových prvků */ + --akcent: #5c1010; /* pozadí tlačítek, th */ + --akcent-hover: #7a1515; /* hover tlačítek */ + --akcent-svetly: #c0392b; /* text, h1, h3, odkazy */ + --akcent-okraj: #4a0d0d; /* okraje akcentových prvků */ - /* Doplňková barva – ocelová šedá */ - --ocel: #3a4455; /* okraje, oddělovače */ - --ocel-svetly: #718096; /* jemnější prvky, labely */ + /* Ocelová šedá */ + --ocel: #3a4455; /* okraje inputů, tabulek */ + --ocel-svetly: #6a7a90; /* labely, h2, pomocný text */ /* Stavy */ - --chyba-text: #fc8181; + --chyba-text: #f08080; --uspech-text: #68d391; /* Rozměry */ - --pruh-max: 640px; - --sekce-mezera: 1.8rem; /* svislá mezera mezi sekcemi (vyplněna bg-hlavni) */ - --sekce-padding: 1.4rem; /* vnitřní odsazení bloků obsahu */ - --polomer: 3px; + --pruh-max: 620px; + --sekce-mezera: 1.6rem; /* výška tmavé mezery mezi bloky */ + --sekce-padding: 1.4rem; /* vnitřní odsazení bloků */ + --polomer-blok: 6px; /* zaoblení rohů bloků */ + --polomer-prvek: 4px; /* zaoblení inputů, tlačítek */ + + /* Stíny */ + --stin-blok: 0 2px 12px rgba(0, 0, 0, 0.45); + --stin-input: inset 0 1px 3px rgba(0, 0, 0, 0.3); + --stin-input-focus: 0 0 0 2px rgba(192, 57, 43, 0.25); } /* ------------------------------------------------------------ - ZÁKLAD – reset a tělo stránky + ZÁKLAD ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; @@ -74,29 +91,20 @@ body { background-color: var(--bg-hlavni); color: var(--text-hlavni); font-family: 'IBM Plex Serif', Georgia, serif; - font-size: 1rem; + font-size: 0.78rem; /* jedna velikost pro všechen IBM Plex Serif text */ font-weight: 300; - line-height: 1.7; + line-height: 1.75; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0; + animation: fadein 0.2s ease-in; } /* ------------------------------------------------------------ - FONT PRO NADPISY - ------------------------------------------------------------ */ -h1, h2, h3, -table th, -label { - font-family: 'Montserrat', 'Arial Narrow', sans-serif; -} - - -/* ------------------------------------------------------------ - OBSAHOVÝ PRUH – všechny přímé potomky body + OBSAHOVÝ PRUH ------------------------------------------------------------ */ body > * { width: 100%; @@ -105,11 +113,8 @@ body > * { /* ------------------------------------------------------------ - SEKCE – vizuální bloky oddělené mezerou v barvě pozadí + BLOKY OBSAHU – světlejší pozadí, zaoblení, stín ------------------------------------------------------------ */ - -/* Každý přímý potomek body dostane světlejší pozadí - a vnitřní odsazení – tvoří "blok obsahu" */ body > h1, body > h2, body > h3, @@ -123,100 +128,121 @@ body > textarea { background-color: var(--bg-obsah); padding-left: var(--sekce-padding); padding-right: var(--sekce-padding); -} - -body > h1 { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } -body > h2 { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } -body > h3 { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } -body > p { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } -body > form { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } -body > table { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); - padding-left: 0; padding-right: 0; } -body > section { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } -body > ol, -body > ul { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } -body > textarea { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } - -/* Nadpisy h1/h2 začínají nový vizuální blok – mezera nahoře */ -body > h1 { - margin-top: var(--sekce-mezera); -} - -body > h2 { - margin-top: var(--sekce-mezera); -} - -body > h3 { - margin-top: calc(var(--sekce-mezera) * 0.8); -} - -/* Poslední prvek dostane spodní padding a spodní mezeru */ -body > *:last-child { + padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); + border-radius: var(--polomer-blok); + box-shadow: var(--stin-blok); +} + +/* Tabulka – padding jen nahoře/dole, šířku řídí buňky */ +body > table { + padding-left: 0; + padding-right: 0; + overflow: hidden; /* zaoblení se projeví i na th/td */ +} + +/* Mezery – každý blok dostane mezeru nahoře */ +body > h1, +body > h2, +body > h3, +body > p, +body > form, +body > table, +body > section, +body > ol, +body > ul, +body > textarea { + margin-top: var(--sekce-mezera); +} + +/* hr = čistá tmavá mezera, žádná čára */ +body > hr { + border: none; + background: transparent; + height: 0; + padding: 0; + margin: 0; + box-shadow: none; +} + +/* h2 těsně za h1 – stejný blok, bez mezery nahoře */ +body > h1 + h2 { + margin-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + padding-top: 0; +} + +/* h1 když za ním následuje h2 – zaoblení jen nahoře */ +body > h1:has(+ h2) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding-bottom: 0.3rem; + box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.45); /* stín jen nahoře */ +} + +/* Spodní mezera za posledním blokem */ +body > *:last-child { margin-bottom: var(--sekce-mezera); } -/* hr – tmavá mezera mezi sekcemi místo čáry */ -body > hr { - background-color: transparent; - border: none; - height: var(--sekce-mezera); - padding: 0; - margin: 0; - /* hr nemá bg-obsah, takže tvoří "tmavou mezeru" */ -} - -/* h2 hned za h1 patří ke stejné hlavičce – bez mezery nahoře */ -body > h1 + h2 { - margin-top: 0; - padding-top: 0; - padding-bottom: var(--sekce-padding); -} - -/* Elementy uvnitř formuláře nebo sekce – bez extra pozadí */ +/* Elementy uvnitř formuláře a sekcí – bez extra pozadí a stínu */ form > *, section > * { background-color: transparent; + box-shadow: none; + border-radius: 0; + margin-top: 0; + padding-left: 0; + padding-right: 0; } /* ------------------------------------------------------------ - TYPOGRAFIE + TYPOGRAFIE – MONTSERRAT ------------------------------------------------------------ */ + +/* === VELIKOST A: hlavní nadpis stránky, jednou === */ h1 { + font-family: 'Montserrat', sans-serif; + font-weight: 100; + font-size: 2.2rem; + letter-spacing: 0.14em; + text-transform: uppercase; color: var(--akcent-svetly); - font-size: 2rem; - font-weight: 700; - letter-spacing: 0.08em; + line-height: 1.2; +} + +/* === VELIKOST B: nadpisy sekcí === */ +h2, +h3 { + font-family: 'Montserrat', sans-serif; + font-weight: 100; + font-size: 0.88rem; + letter-spacing: 0.18em; text-transform: uppercase; } h2 { color: var(--ocel-svetly); - font-size: 0.95rem; - font-weight: 600; - letter-spacing: 0.12em; - text-transform: uppercase; } h3 { color: var(--akcent-svetly); - font-size: 1.1rem; - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; } +/* === VELIKOST C: th, button, label, indikátory === + (shodná s IBM Plex Serif = 0.78rem, aby text vypadal stejně velký) */ + p { - padding-bottom: 0.4rem; + font-size: 0.78rem; /* IBM Plex Serif velikost */ } strong { color: var(--text-nadpis); - font-weight: 600; + font-weight: 400; /* IBM Plex Serif nemá bold 300→400 */ } -/* Chybové hlášky */ p > strong:first-child { color: var(--chyba-text); } @@ -254,35 +280,38 @@ form { } form p { - background-color: transparent; - padding-left: 0; - padding-right: 0; - margin-bottom: 0.75rem; + padding: 0; + margin-bottom: 0.9rem; + box-shadow: none; + border-radius: 0; + margin-top: 0; } +/* === VELIKOST C: label === */ label { display: block; - font-size: 0.82rem; - font-weight: 600; - letter-spacing: 0.09em; + font-family: 'Montserrat', sans-serif; + font-weight: 100; + font-size: 0.78rem; + letter-spacing: 0.1em; text-transform: uppercase; color: var(--ocel-svetly); - margin-bottom: 0; /* žádná mezera mezi labelem a inputem */ - line-height: 1.4; + margin-bottom: 0; + line-height: 1.5; } -/* Inline label pro checkbox */ +/* Inline label pro checkbox – jiný styl */ label:has(input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 0.5rem; + font-family: 'IBM Plex Serif', Georgia, serif; + font-weight: 300; + font-size: 0.78rem; text-transform: none; letter-spacing: normal; - font-size: 0.95rem; - font-weight: 300; color: var(--text-hlavni); cursor: pointer; - font-family: 'IBM Plex Serif', Georgia, serif; } @@ -297,14 +326,15 @@ input[type="password"] { background-color: var(--bg-prvek); color: var(--text-hlavni); border: 1px solid var(--ocel); - border-radius: var(--polomer); + border-radius: var(--polomer-prvek); padding: 0.45rem 0.7rem; - font-size: 1rem; + font-size: 0.78rem; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 300; - transition: border-color 0.15s, background-color 0.15s; + box-shadow: var(--stin-input); + transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; outline: none; - margin-top: 0; /* žádná mezera mezi labelem a inputem */ + margin-top: 0; } input[type="text"]:focus, @@ -312,27 +342,28 @@ input[type="email"]:focus, input[type="password"]:focus { background-color: var(--bg-prvek-focus); border-color: var(--akcent-svetly); + box-shadow: var(--stin-input), var(--stin-input-focus); } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder { color: var(--ocel-svetly); - opacity: 0.7; + opacity: 0.6; } -/* Inline inputy pro heslo v tabulce admin.php */ +/* Inline inputy v tabulce admin.php */ table input[type="password"] { width: auto; display: inline-block; - padding: 0.25rem 0.45rem; - font-size: 0.88rem; + padding: 0.2rem 0.4rem; + font-size: 0.78rem; margin-top: 0; } input[type="checkbox"] { - width: 1rem; - height: 1rem; + width: 0.85rem; + height: 0.85rem; accent-color: var(--akcent-svetly); cursor: pointer; flex-shrink: 0; @@ -340,75 +371,79 @@ input[type="checkbox"] { /* ------------------------------------------------------------ - TEXTAREA (install.php – SQL výpis) + TEXTAREA ------------------------------------------------------------ */ textarea { display: block; width: 100%; - max-width: var(--pruh-max); background-color: var(--bg-prvek); - color: #a8d8a8; + color: #98c898; /* terminálová zelená pro SQL */ border: 1px solid var(--ocel); - border-radius: var(--polomer); + border-radius: var(--polomer-prvek); padding: 0.75rem; font-family: 'Courier New', Courier, monospace; - font-size: 0.82rem; - line-height: 1.5; + font-size: 0.75rem; + line-height: 1.55; resize: vertical; outline: none; - margin-top: 0.4rem; + box-shadow: var(--stin-input); } textarea:focus { border-color: var(--akcent-svetly); + box-shadow: var(--stin-input), var(--stin-input-focus); } /* ------------------------------------------------------------ - TLAČÍTKA + TLAČÍTKA – VELIKOST C (0.78rem Montserrat) ------------------------------------------------------------ */ button[type="submit"], button[type="button"] { - background-color: var(--akcent); /* tmavší červená */ - color: #f0f0f0; + background-color: var(--akcent); + color: #e8e8e8; border: 1px solid var(--akcent-okraj); - border-radius: var(--polomer); - padding: 0.5rem 1.2rem; - font-size: 0.9rem; - font-family: 'Montserrat', 'Arial Narrow', sans-serif; - font-weight: 600; - letter-spacing: 0.08em; + border-radius: var(--polomer-prvek); + padding: 0.48rem 1.1rem; + font-family: 'Montserrat', sans-serif; + font-weight: 100; + font-size: 0.78rem; + letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; - transition: background-color 0.15s, border-color 0.15s; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; margin-top: 0.3rem; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } button[type="submit"]:hover, button[type="button"]:hover { background-color: var(--akcent-hover); border-color: var(--akcent-hover); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } button[type="submit"]:focus, button[type="button"]:focus { - outline: 2px solid var(--akcent-svetly); - outline-offset: 2px; + outline: none; + box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.4); } button:disabled { - background-color: #1e1e1e; - color: var(--ocel-svetly); - border-color: var(--ocel); + background-color: #1c1c1c; + color: var(--text-jemny); + border-color: #2a2a2a; cursor: not-allowed; + box-shadow: none; } button:disabled:hover { - background-color: #1e1e1e; - border-color: var(--ocel); + background-color: #1c1c1c; + border-color: #2a2a2a; + box-shadow: none; } -/* Inline formuláře (odhlášení, smazání v tabulce) */ +/* Inline formuláře – odhlášení, smazání v tabulce */ form[style*="display:inline"], form[style*="display: inline"] { display: inline; @@ -416,36 +451,40 @@ form[style*="display: inline"] { margin: 0; padding: 0; background-color: transparent; + box-shadow: none; + border-radius: 0; } form[style*="display:inline"] button, form[style*="display: inline"] button { margin-top: 0; - padding: 0.2rem 0.6rem; - font-size: 0.82rem; + padding: 0.2rem 0.55rem; + font-size: 0.78rem; } /* ------------------------------------------------------------ - INDIKÁTOR SÍLY HESLA + INDIKÁTOR SÍLY HESLA – VELIKOST C ------------------------------------------------------------ */ #heslo-sila, #novy-heslo-sila { display: inline-block; - font-size: 0.8rem; font-family: 'Montserrat', sans-serif; - letter-spacing: 0.04em; + font-weight: 100; + font-size: 0.78rem; + letter-spacing: 0.06em; color: var(--text-jemny); - margin-top: 0.25rem; + margin-top: 0.2rem; } #tlacitko-duvod, #novy-tlacitko-duvod { - font-size: 0.8rem; font-family: 'Montserrat', sans-serif; + font-weight: 100; + font-size: 0.78rem; + letter-spacing: 0.04em; color: var(--text-jemny); margin-left: 0.4rem; - letter-spacing: 0.02em; } @@ -455,44 +494,46 @@ form[style*="display: inline"] button { table { width: 100%; border-collapse: collapse; - margin-top: 0.5rem; - font-size: 0.9rem; + font-size: 0.78rem; } +/* === VELIKOST C: záhlaví tabulky === */ table th { - background-color: var(--akcent); /* tmavší červená */ - color: #f0f0f0; - text-align: left; - padding: 0.45rem 0.7rem; + font-family: 'Montserrat', sans-serif; + font-weight: 100; font-size: 0.78rem; - font-weight: 700; - letter-spacing: 0.08em; + letter-spacing: 0.1em; text-transform: uppercase; + background-color: var(--akcent); + color: #e8e8e8; + text-align: left; + padding: 0.5rem 0.75rem; border: 1px solid var(--akcent-okraj); } table td { background-color: var(--bg-prvek); color: var(--text-hlavni); - padding: 0.4rem 0.7rem; + padding: 0.4rem 0.75rem; border: 1px solid var(--ocel); vertical-align: middle; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 300; + font-size: 0.78rem; } table tr:nth-child(even) td { - background-color: #272727; + background-color: #262626; } table tr:hover td { - background-color: #2e2e2e; + background-color: #2d2d2d; + transition: background-color 0.1s; } table td em { color: var(--text-jemny); font-style: italic; - font-size: 0.85rem; } @@ -501,11 +542,11 @@ table td em { ------------------------------------------------------------ */ code { background-color: var(--bg-prvek); - color: #a8d8a8; + color: #98c898; font-family: 'Courier New', Courier, monospace; font-size: 0.85em; padding: 0.1em 0.35em; - border-radius: var(--polomer); + border-radius: var(--polomer-prvek); border: 1px solid var(--ocel); } @@ -514,16 +555,15 @@ code { SEZNAMY ------------------------------------------------------------ */ ol, ul { - padding-left: 1.5rem; - margin-top: 0.3rem; - margin-bottom: 0.3rem; + padding-left: 1.4rem; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 300; + font-size: 0.78rem; } ol li, ul li { - margin-bottom: 0.3rem; - line-height: 1.6; + margin-bottom: 0.25rem; + line-height: 1.65; } @@ -534,20 +574,16 @@ ol li, ul li { :root { --pruh-max: 100%; --sekce-padding: 1rem; - --sekce-mezera: 1.2rem; + --sekce-mezera: 1rem; + --polomer-blok: 0px; /* na mobilu bez zaoblení – bloky jdou od kraje */ } h1 { font-size: 1.6rem; } - table { - font-size: 0.8rem; - } - - table th, - table td { - padding: 0.3rem 0.35rem; + h2, h3 { + font-size: 0.82rem; } table td form[style*="display:inline"], @@ -561,22 +597,25 @@ ol li, ul li { width: 100%; } + /* iOS: font-size ≥ 16px zabrání zoomu při focusu */ input[type="text"], input[type="email"], input[type="password"] { - font-size: 1rem; /* zabrání zoomu na iOS */ + font-size: 1rem; } table input[type="password"] { display: block; width: 100%; margin-bottom: 0.3rem; + font-size: 1rem; } } @media (max-width: 400px) { h1 { font-size: 1.3rem; + letter-spacing: 0.08em; } button[type="submit"], @@ -586,22 +625,10 @@ ol li, ul li { } -/* ------------------------------------------------------------ - ŠÍŘKA OBSAHU – jemný lem na širších obrazovkách - ------------------------------------------------------------ */ -/* Na širších obrazovkách je body #141414 po celé šířce. - Světlejší bloky obsahu jsou omezeny na --pruh-max šířku, - takže po stranách přirozeně zůstává tmavé pozadí. */ - - /* ------------------------------------------------------------ PŘECHOD PŘI NAČTENÍ ------------------------------------------------------------ */ -body { - animation: fadein 0.18s ease-in; -} - @keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } + from { opacity: 0; transform: translateY(4px); } + to { opacity: 1; transform: translateY(0); } } \ No newline at end of file