stepan/MSPPPPaM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ui] CSS – Montserrat + IBM Plex Serif, oddělovače jako mezery #141414, symetrické padding bloků, odstraněny veškeré hr čáry

Browse Source
This commit is contained in:
stepan
2026-03-18 22:32:49 +01:00
parent f6e5695ef9
commit 52bb0208a9
1 changed files with 26 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/auth-styl.css
+26 -37
View File
@@ -13,10 +13,10 @@
/* ------------------------------------------------------------
GOOGLE FONTS
Barlow Condensed – moderní bezpatkové, kapitálky pro nadpisy
Source Serif 4 – moderní patkové pro tělo textu
Montserrat – moderní bezpatkové, kapitálky pro nadpisy
IBM Plex Serif – 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');
@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');
/* ------------------------------------------------------------
@@ -24,7 +24,7 @@
------------------------------------------------------------ */
:root {
/* Pozadí */
--bg-hlavni: #141414; /* hlavní pozadí stránky – tmavší = "mezera" mezi sekcemi */
--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 */
@@ -73,7 +73,7 @@ html {
body {
background-color: var(--bg-hlavni);
color: var(--text-hlavni);
font-family: 'Source Serif 4', Georgia, serif;
font-family: 'IBM Plex Serif', Georgia, serif;
font-size: 1rem;
font-weight: 300;
line-height: 1.7;
@@ -91,7 +91,7 @@ body {
h1, h2, h3,
table th,
label {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-family: 'Montserrat', 'Arial Narrow', sans-serif;
}
@@ -125,17 +125,17 @@ body > textarea {
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);
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: 0.5rem; padding-bottom: 0.7rem; }
body > textarea { padding-top: 0.3rem; padding-bottom: var(--sekce-padding); }
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 {
@@ -166,9 +166,10 @@ body > hr {
/* hr nemá bg-obsah, takže tvoří "tmavou mezeru" */
}
/* h2 hned za h1 patří ke stejné hlavičce – bez mezery */
/* 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);
}
@@ -188,8 +189,6 @@ h1 {
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border: none;
padding-bottom: 0;
}
h2 {
@@ -206,8 +205,6 @@ h3 {
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--akcent-okraj);
}
p {
@@ -285,7 +282,7 @@ label:has(input[type="checkbox"]) {
font-weight: 300;
color: var(--text-hlavni);
cursor: pointer;
font-family: 'Source Serif 4', Georgia, serif;
font-family: 'IBM Plex Serif', Georgia, serif;
}
@@ -303,7 +300,7 @@ input[type="password"] {
border-radius: var(--polomer);
padding: 0.45rem 0.7rem;
font-size: 1rem;
font-family: 'Source Serif 4', Georgia, serif;
font-family: 'IBM Plex Serif', Georgia, serif;
font-weight: 300;
transition: border-color 0.15s, background-color 0.15s;
outline: none;
@@ -378,7 +375,7 @@ button[type="button"] {
border-radius: var(--polomer);
padding: 0.5rem 1.2rem;
font-size: 0.9rem;
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-family: 'Montserrat', 'Arial Narrow', sans-serif;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
@@ -436,7 +433,7 @@ form[style*="display: inline"] button {
#novy-heslo-sila {
display: inline-block;
font-size: 0.8rem;
font-family: 'Barlow Condensed', sans-serif;
font-family: 'Montserrat', sans-serif;
letter-spacing: 0.04em;
color: var(--text-jemny);
margin-top: 0.25rem;
@@ -445,7 +442,7 @@ form[style*="display: inline"] button {
#tlacitko-duvod,
#novy-tlacitko-duvod {
font-size: 0.8rem;
font-family: 'Barlow Condensed', sans-serif;
font-family: 'Montserrat', sans-serif;
color: var(--text-jemny);
margin-left: 0.4rem;
letter-spacing: 0.02em;
@@ -480,7 +477,7 @@ table td {
padding: 0.4rem 0.7rem;
border: 1px solid var(--ocel);
vertical-align: middle;
font-family: 'Source Serif 4', Georgia, serif;
font-family: 'IBM Plex Serif', Georgia, serif;
font-weight: 300;
}
@@ -520,7 +517,7 @@ ol, ul {
padding-left: 1.5rem;
margin-top: 0.3rem;
margin-bottom: 0.3rem;
font-family: 'Source Serif 4', Georgia, serif;
font-family: 'IBM Plex Serif', Georgia, serif;
font-weight: 300;
}
@@ -592,17 +589,9 @@ ol li, ul li {
/* ------------------------------------------------------------
ŠÍŘKA OBSAHU – jemný lem na širších obrazovkách
------------------------------------------------------------ */
@media (min-width: 700px) {
body {
background-image:
linear-gradient(to right,
var(--bg-hlavni) calc(50% - 340px),
#1c1c1c calc(50% - 340px),
#1c1c1c calc(50% + 340px),
var(--bg-hlavni) calc(50% + 340px)
);
}
}
/* 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í. */
/* ------------------------------------------------------------