From f6e5695ef9fce72394157d53b9b9f47d6958bc3c Mon Sep 17 00:00:00 2001 From: stepan Date: Wed, 18 Mar 2026 22:17:33 +0100 Subject: [PATCH] =?UTF-8?q?[ui]=20Aktualizov=C3=A1n=20CSS=20styl=20?= =?UTF-8?q?=E2=80=93=20sekce=20odd=C4=9Bleny=20mezerou=20m=C3=ADsto=20hr,?= =?UTF-8?q?=20tmav=C5=A1=C3=AD=20=C4=8Derven=C3=A1=20jako=20pozad=C3=AD,?= =?UTF-8?q?=20Barlow=20Condensed=20+=20Source=20Serif=204,=20mezera=20labe?= =?UTF-8?q?l=E2=86=92input=20odstran=C4=9Bna?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/auth-styl.css | 377 ++++++++++++++++++++++++++-------------------- 1 file changed, 210 insertions(+), 167 deletions(-) diff --git a/css/auth-styl.css b/css/auth-styl.css index e942fdd..1989d6f 100644 --- a/css/auth-styl.css +++ b/css/auth-styl.css @@ -11,38 +11,48 @@ ============================================================ */ +/* ------------------------------------------------------------ + GOOGLE FONTS + Barlow Condensed – moderní bezpatkové, kapitálky pro nadpisy + Source Serif 4 – moderní patkové pro tělo textu + ------------------------------------------------------------ */ +@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;1,300&display=swap'); + + /* ------------------------------------------------------------ PROMĚNNÉ – barvy a rozměry ------------------------------------------------------------ */ :root { /* Pozadí */ - --bg-hlavni: #1a1a1a; /* hlavní pozadí stránky */ - --bg-obsah: #222222; /* pozadí obsahového pruhu */ + --bg-hlavni: #141414; /* hlavní pozadí stránky – tmavší = "mezera" mezi sekcemi */ + --bg-obsah: #222222; /* pozadí obsahových bloků (světlejší) */ --bg-prvek: #2c2c2c; /* pozadí inputů, tabulek, textarea */ --bg-prvek-focus: #333333; /* inputy při focusu */ /* Písmo */ --text-hlavni: #d4d4d4; /* hlavní text */ - --text-jemny: #888888; /* pomocný text (span, popisky síly hesla) */ + --text-jemny: #888888; /* pomocný text */ --text-nadpis: #f0f0f0; /* nadpisy */ /* Akcent – tmavě červená */ - --akcent: #8b1a1a; /* primární akcent */ - --akcent-svetly: #c0392b; /* hover, aktivní stav */ - --akcent-okraj: #6b1414; /* okraj akcentových prvků */ + --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ů */ /* Doplňková barva – ocelová šedá */ - --ocel: #4a5568; /* okraje, oddělovače */ - --ocel-svetly: #718096; /* jemnější prvky */ + --ocel: #3a4455; /* okraje, oddělovače */ + --ocel-svetly: #718096; /* jemnější prvky, labely */ /* Stavy */ - --chyba-text: #fc8181; /* text chybové hlášky */ - --uspech-text: #68d391; /* text úspěšné hlášky */ + --chyba-text: #fc8181; + --uspech-text: #68d391; /* Rozměry */ - --pruh-max: 640px; /* maximální šířka obsahového pruhu */ - --mezera: 1.5rem; /* základní mezera */ - --polomer: 3px; /* zaoblení rohů */ + --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; } @@ -63,30 +73,43 @@ html { body { background-color: var(--bg-hlavni); color: var(--text-hlavni); - font-family: 'Georgia', 'Times New Roman', serif; + font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; + font-weight: 300; line-height: 1.7; min-height: 100vh; - padding: var(--mezera); + display: flex; + flex-direction: column; + align-items: center; + padding: 0; } /* ------------------------------------------------------------ - OBSAHOVÝ PRUH – centrovaný, užší + FONT PRO NADPISY + ------------------------------------------------------------ */ +h1, h2, h3, +table th, +label { + font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; +} + + +/* ------------------------------------------------------------ + OBSAHOVÝ PRUH – všechny přímé potomky body ------------------------------------------------------------ */ body > * { + width: 100%; max-width: var(--pruh-max); - margin-left: auto; - margin-right: auto; } -/* Hlavní obal obsahu – vizuální karta */ -body { - display: flex; - flex-direction: column; - align-items: center; -} +/* ------------------------------------------------------------ + SEKCE – vizuální bloky oddělené mezerou v barvě pozadí + ------------------------------------------------------------ */ + +/* Každý přímý potomek body dostane světlejší pozadí + a vnitřní odsazení – tvoří "blok obsahu" */ body > h1, body > h2, body > h3, @@ -94,14 +117,65 @@ body > p, body > form, body > table, body > section, -body > hr, body > ol, body > ul, -body > textarea, -body > pre, -body > code { - width: 100%; - max-width: var(--pruh-max); +body > textarea { + background-color: var(--bg-obsah); + padding-left: var(--sekce-padding); + padding-right: var(--sekce-padding); +} + +body > h1 { padding-top: var(--sekce-padding); } +body > h2 { padding-top: 0.4rem; } +body > h3 { padding-top: var(--sekce-padding); } +body > p { padding-top: 0.5rem; } +body > form { padding-top: 0.5rem; padding-bottom: var(--sekce-padding); } +body > table { padding-top: 0.5rem; 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: 0.5rem; padding-bottom: 0.7rem; } +body > textarea { padding-top: 0.3rem; 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-bottom: var(--sekce-padding); + 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 */ +body > h1 + h2 { + margin-top: 0; + padding-bottom: var(--sekce-padding); +} + +/* Elementy uvnitř formuláře nebo sekce – bez extra pozadí */ +form > *, +section > * { + background-color: transparent; } @@ -110,61 +184,49 @@ body > code { ------------------------------------------------------------ */ h1 { color: var(--akcent-svetly); - font-size: 1.8rem; - font-weight: normal; - letter-spacing: 0.03em; - margin-top: calc(var(--mezera) * 1.5); - margin-bottom: 0.3rem; - border-bottom: 1px solid var(--akcent-okraj); - padding-bottom: 0.4rem; + font-size: 2rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + border: none; + padding-bottom: 0; } h2 { - color: var(--text-nadpis); - font-size: 1.2rem; - font-weight: normal; - letter-spacing: 0.05em; - text-transform: uppercase; - margin-top: var(--mezera); - margin-bottom: 0.8rem; 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.05rem; - font-weight: bold; - margin-top: calc(var(--mezera) * 1.2); - margin-bottom: 0.6rem; + font-size: 1.1rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--akcent-okraj); } p { - margin-top: 0.7rem; - margin-bottom: 0.3rem; - max-width: var(--pruh-max); - width: 100%; + padding-bottom: 0.4rem; } strong { color: var(--text-nadpis); - font-weight: bold; + font-weight: 600; } -/* Chybové hlášky – "Chyba: ..." */ +/* Chybové hlášky */ p > strong:first-child { color: var(--chyba-text); } -/* Úspěšné hlášky – "OK: ..." nebo "Registrace proběhla..." */ -p > strong:first-child:not([style]) { - /* Heuristika: pokud strong začíná "OK" nebo "Registrace" nebo "Instalace", - probarvíme zeleně. Protože CSS neumí inspektovat obsah, - použijeme specifické selektory kde je to možné */ -} - -/* Explicitní zelená pro úspěch v install.php a ostatních */ -p strong { - color: var(--text-nadpis); +em { + color: var(--text-jemny); + font-style: italic; } @@ -187,40 +249,32 @@ a:focus { /* ------------------------------------------------------------ - ODDĚLOVAČE - ------------------------------------------------------------ */ -hr { - border: none; - border-top: 1px solid var(--ocel); - margin: calc(var(--mezera) * 1.2) auto; - width: 100%; - max-width: var(--pruh-max); -} - - -/* ------------------------------------------------------------ - FORMULÁŘE – obecně + FORMULÁŘE ------------------------------------------------------------ */ form { width: 100%; max-width: var(--pruh-max); - margin-top: 0.5rem; } form p { - margin-bottom: 0.8rem; + background-color: transparent; + padding-left: 0; + padding-right: 0; + margin-bottom: 0.75rem; } label { display: block; - font-size: 0.88rem; - letter-spacing: 0.06em; + font-size: 0.82rem; + font-weight: 600; + letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocel-svetly); - margin-bottom: 0.3rem; + margin-bottom: 0; /* žádná mezera mezi labelem a inputem */ + line-height: 1.4; } -/* Inline label pro checkbox – nepřepisujeme display */ +/* Inline label pro checkbox */ label:has(input[type="checkbox"]) { display: inline-flex; align-items: center; @@ -228,8 +282,10 @@ label:has(input[type="checkbox"]) { text-transform: none; letter-spacing: normal; font-size: 0.95rem; + font-weight: 300; color: var(--text-hlavni); cursor: pointer; + font-family: 'Source Serif 4', Georgia, serif; } @@ -245,12 +301,13 @@ input[type="password"] { color: var(--text-hlavni); border: 1px solid var(--ocel); border-radius: var(--polomer); - padding: 0.55rem 0.75rem; + padding: 0.45rem 0.7rem; font-size: 1rem; - font-family: inherit; + font-family: 'Source Serif 4', Georgia, serif; + font-weight: 300; transition: border-color 0.15s, background-color 0.15s; outline: none; - margin-top: 0.2rem; + margin-top: 0; /* žádná mezera mezi labelem a inputem */ } input[type="text"]:focus, @@ -271,8 +328,9 @@ input[type="password"]::placeholder { table input[type="password"] { width: auto; display: inline-block; - padding: 0.3rem 0.5rem; - font-size: 0.9rem; + padding: 0.25rem 0.45rem; + font-size: 0.88rem; + margin-top: 0; } input[type="checkbox"] { @@ -292,7 +350,7 @@ textarea { width: 100%; max-width: var(--pruh-max); background-color: var(--bg-prvek); - color: #a8d8a8; /* zelenkavá pro SQL kód */ + color: #a8d8a8; border: 1px solid var(--ocel); border-radius: var(--polomer); padding: 0.75rem; @@ -301,7 +359,7 @@ textarea { line-height: 1.5; resize: vertical; outline: none; - margin-top: 0.5rem; + margin-top: 0.4rem; } textarea:focus { @@ -314,14 +372,16 @@ textarea:focus { ------------------------------------------------------------ */ button[type="submit"], button[type="button"] { - background-color: var(--akcent); + background-color: var(--akcent); /* tmavší červená */ color: #f0f0f0; border: 1px solid var(--akcent-okraj); border-radius: var(--polomer); padding: 0.5rem 1.2rem; - font-size: 0.95rem; - font-family: inherit; - letter-spacing: 0.04em; + font-size: 0.9rem; + font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; margin-top: 0.3rem; @@ -329,8 +389,8 @@ button[type="button"] { button[type="submit"]:hover, button[type="button"]:hover { - background-color: var(--akcent-svetly); - border-color: var(--akcent-svetly); + background-color: var(--akcent-hover); + border-color: var(--akcent-hover); } button[type="submit"]:focus, @@ -339,72 +399,77 @@ button[type="button"]:focus { outline-offset: 2px; } -/* Zakázané tlačítko (čeká na dostatečné heslo) */ button:disabled { - background-color: var(--bg-prvek); + background-color: #1e1e1e; color: var(--ocel-svetly); border-color: var(--ocel); cursor: not-allowed; } button:disabled:hover { - background-color: var(--bg-prvek); + background-color: #1e1e1e; border-color: var(--ocel); } -/* Inline formulář (odhlášení v $auth_logout_html a tabulce admina) */ +/* Inline formuláře (odhlášení, smazání v tabulce) */ form[style*="display:inline"], form[style*="display: inline"] { display: inline; width: auto; margin: 0; + padding: 0; + background-color: transparent; } form[style*="display:inline"] button, form[style*="display: inline"] button { margin-top: 0; - padding: 0.25rem 0.7rem; - font-size: 0.88rem; + padding: 0.2rem 0.6rem; + font-size: 0.82rem; } /* ------------------------------------------------------------ - INDIKÁTOR SÍLY HESLA (span#heslo-sila) + INDIKÁTOR SÍLY HESLA ------------------------------------------------------------ */ -#heslo-sila { +#heslo-sila, +#novy-heslo-sila { display: inline-block; - font-size: 0.82rem; + font-size: 0.8rem; + font-family: 'Barlow Condensed', sans-serif; + letter-spacing: 0.04em; color: var(--text-jemny); - margin-top: 0.3rem; + margin-top: 0.25rem; } -/* Vysvětlení proč je tlačítko zakázané (span#tlacitko-duvod) */ #tlacitko-duvod, #novy-tlacitko-duvod { - font-size: 0.82rem; + font-size: 0.8rem; + font-family: 'Barlow Condensed', sans-serif; color: var(--text-jemny); margin-left: 0.4rem; + letter-spacing: 0.02em; } /* ------------------------------------------------------------ - TABULKY (admin.php – seznam uživatelů, konfigurace) + TABULKY ------------------------------------------------------------ */ table { width: 100%; - max-width: var(--pruh-max); border-collapse: collapse; - margin-top: 0.8rem; - font-size: 0.92rem; + margin-top: 0.5rem; + font-size: 0.9rem; } table th { - background-color: var(--akcent); + background-color: var(--akcent); /* tmavší červená */ color: #f0f0f0; text-align: left; - padding: 0.5rem 0.7rem; - font-size: 0.82rem; - letter-spacing: 0.05em; + padding: 0.45rem 0.7rem; + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--akcent-okraj); } @@ -412,25 +477,21 @@ table th { table td { background-color: var(--bg-prvek); color: var(--text-hlavni); - padding: 0.45rem 0.7rem; + padding: 0.4rem 0.7rem; border: 1px solid var(--ocel); vertical-align: middle; + font-family: 'Source Serif 4', Georgia, serif; + font-weight: 300; } table tr:nth-child(even) td { - background-color: #2a2a2a; + background-color: #272727; } table tr:hover td { - background-color: #303030; + background-color: #2e2e2e; } -/* Hodnota "ANO" v tabulce admina */ -table td:has(> *:only-child) { - /* nelze cílit na obsah v CSS, necháme obecný styl */ -} - -/* Kurzívní poznámka v tabulce – "(první uživatel systému – nelze smazat)" */ table td em { color: var(--text-jemny); font-style: italic; @@ -439,13 +500,13 @@ table td em { /* ------------------------------------------------------------ - KÓDOVÉ ELEMENTY (code v admin.php) + KÓDOVÉ ELEMENTY ------------------------------------------------------------ */ code { background-color: var(--bg-prvek); color: #a8d8a8; font-family: 'Courier New', Courier, monospace; - font-size: 0.88em; + font-size: 0.85em; padding: 0.1em 0.35em; border-radius: var(--polomer); border: 1px solid var(--ocel); @@ -453,14 +514,14 @@ code { /* ------------------------------------------------------------ - SEZNAMY (ol, ul v install.php) + SEZNAMY ------------------------------------------------------------ */ ol, ul { - width: 100%; - max-width: var(--pruh-max); padding-left: 1.5rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; + margin-top: 0.3rem; + margin-bottom: 0.3rem; + font-family: 'Source Serif 4', Georgia, serif; + font-weight: 300; } ol li, ul li { @@ -469,46 +530,29 @@ ol li, ul li { } -/* ------------------------------------------------------------ - $auth_logout_html – badge s emailem a odhlášením - (vkládán jako inline HTML, bez wrapperu) - Cílíme na přímé potomky body nebo na libovolné umístění - ------------------------------------------------------------ */ - -/* Odkaz "Administrace" v logout_html */ -a[href$="admin.php"] { - color: var(--akcent-svetly); - font-size: 0.9rem; - letter-spacing: 0.03em; -} - - /* ------------------------------------------------------------ RESPONSIVNÍ DESIGN ------------------------------------------------------------ */ @media (max-width: 680px) { :root { --pruh-max: 100%; - } - - body { - padding: 0.75rem; + --sekce-padding: 1rem; + --sekce-mezera: 1.2rem; } h1 { - font-size: 1.4rem; + font-size: 1.6rem; } table { - font-size: 0.82rem; + font-size: 0.8rem; } table th, table td { - padding: 0.35rem 0.4rem; + padding: 0.3rem 0.35rem; } - /* Na mobilu se inline formuláře v tabulce přesunou pod sebe */ table td form[style*="display:inline"], table td form[style*="display: inline"] { display: block; @@ -523,10 +567,9 @@ a[href$="admin.php"] { input[type="text"], input[type="email"], input[type="password"] { - font-size: 1rem; /* zabrání zoomu na iOS */ + font-size: 1rem; /* zabrání zoomu na iOS */ } - /* Inline inputy pro heslo v tabulce – na mobilu plná šířka */ table input[type="password"] { display: block; width: 100%; @@ -536,7 +579,7 @@ a[href$="admin.php"] { @media (max-width: 400px) { h1 { - font-size: 1.2rem; + font-size: 1.3rem; } button[type="submit"], @@ -547,26 +590,26 @@ a[href$="admin.php"] { /* ------------------------------------------------------------ - DROBNÉ DETAILY A DOLADĚNÍ + ŠÍŘKA OBSAHU – jemný lem na širších obrazovkách ------------------------------------------------------------ */ - -/* Vizuální oddělení stránky od kraje – jemný svislý ohraničující - efekt na širších obrazovkách */ @media (min-width: 700px) { body { background-image: linear-gradient(to right, - transparent calc(50% - 340px), - #252525 calc(50% - 340px), - #252525 calc(50% + 340px), - transparent calc(50% + 340px) + var(--bg-hlavni) calc(50% - 340px), + #1c1c1c calc(50% - 340px), + #1c1c1c calc(50% + 340px), + var(--bg-hlavni) calc(50% + 340px) ); } } -/* Přechod pro plynulejší načtení */ + +/* ------------------------------------------------------------ + PŘECHOD PŘI NAČTENÍ + ------------------------------------------------------------ */ body { - animation: fadein 0.2s ease-in; + animation: fadein 0.18s ease-in; } @keyframes fadein {