, ne v hlavičce — pravidla psaná pro |
by ho jinak minula a poslední řádek by měl čáru jen pod půlkou. */
.table.table-setup tr:last-child th { border-bottom: 0; }
.table.table-setup tbody tr:hover th { background: var(--surface-2); }
/* Hodnota a tlačítko vedle sebe; tlačítko se nesmí zmenšovat, hodnota ano. */
.record-row { display: flex; align-items: flex-start; gap: .4rem; margin-bottom: .25rem; }
.record-row:last-child { margin-bottom: 0; }
.record-row code { flex: 1 1 auto; min-width: 0; }
/* Ikona místo slova — u čtyř řádků pod sebou zabíral text víc místa než
hodnota, kvůli které tam tlačítko je. */
.copy {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface-2);
color: var(--muted);
cursor: pointer;
}
.copy:hover { color: var(--text); }
.copy svg { width: .9rem; height: .9rem; }
.copy .hotovo { display: none; }
.copy[data-done] { color: #4ade80; border-color: currentColor; }
.copy[data-done] .ikona { display: none; }
.copy[data-done] .hotovo { display: block; }
/* Přidělené schránky se nevybírají ze seznamu stovek položek, ale přidávají
po jedné s našeptáváním. */
.grant-list { list-style: none; padding: 0; margin: 0 0 .7rem; }
.grant-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.grant-list li:last-child { border-bottom: 0; }
/* --- formulář jako tabulka ----------------------------------------------- */
/* Nette vykresluje formulář do tabulky, takže popisek je v | . Výchozí svislé
zarovnání je na střed a u víceřádkových prvků - zaškrtávátek nebo pole
s vysvětlivkou - pak popisek plave uprostřed místo u prvního řádku.
Odsazení shora dorovnává vnitřní odsazení vstupního pole, aby text popisku
seděl na stejné účaří jako první řádek prvku. */
form table th {
vertical-align: top;
padding-top: .45rem;
font-weight: 400;
color: var(--muted);
font-size: .82rem;
}
form table td { vertical-align: top; }
/* Vysvětlivka patří pod prvek, ne za něj. Bez tohohle se u seznamu zaškrtávátek
nalepí za poslední položku a vypadá jako její součást. */
form table td small,
form table td .description { display: block; margin-top: .3rem; color: var(--muted); font-size: .78rem; }
/* --- přepínače ------------------------------------------------------------ */
/* Zaškrtávátko nese v administraci vždycky stav „zapnuto / vypnuto", ne výběr
z možností - přepínač to řekne na první pohled a barva odpoví na otázku
„je to aktivní?" dřív, než člověk přečte popisek.
Červená u vypnutého je záměr: většina těch přepínačů něco povoluje, takže
vypnutý stav je ten, který stojí za povšimnutí. */
input[type='checkbox'] {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 2.2rem;
height: 1.2rem;
margin: 0 .45rem 0 0;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--bad);
position: relative;
cursor: pointer;
vertical-align: -.28rem;
transition: background .15s ease;
}
input[type='checkbox']::after {
content: '';
position: absolute;
top: 50%;
left: 2px;
width: .9rem;
height: .9rem;
border-radius: 50%;
background: #fff;
transform: translateY(-50%);
transition: left .15s ease;
}
input[type='checkbox']:checked { background: var(--ok); }
input[type='checkbox']:checked::after { left: calc(100% - .9rem - 2px); }
input[type='checkbox'][disabled] { opacity: .5; cursor: default; }
/* Týž přepínač jako odkaz. Ve výpisu schránek není formulář, do kterého by
zaškrtávátko patřilo, a odkaz na signál funguje i bez JavaScriptu. Vypadat
musí stejně jako přepínače ve formulářích, aby se nemusel učit podruhé:
dráha je ::before, kolečko ::after a stav řídí aria-checked — tedy právě
ten atribut, který stav hlásí i čtečkám, ne třída vedle něj. */
.switch {
display: inline-flex;
align-items: center;
gap: .45rem;
position: relative;
text-decoration: none;
color: var(--muted);
font-size: .82rem;
}
.switch:hover { text-decoration: none; }
.switch::before {
content: '';
flex: 0 0 auto;
width: 2.2rem;
height: 1.2rem;
border-radius: 999px;
background: var(--bad);
transition: background .15s ease;
}
.switch::after {
content: '';
position: absolute;
top: 50%;
left: 2px;
width: .9rem;
height: .9rem;
border-radius: 50%;
background: #fff;
transform: translateY(-50%);
transition: left .15s ease;
}
.switch[aria-checked='true']::before { background: var(--ok); }
.switch[aria-checked='true']::after { left: calc(2.2rem - .9rem - 2px); }
/* --- dlaždice s podrobnostmi ---------------------------------------------- */
/* Seznam, kde má každá položka víc údajů, než se vejde do řádku tabulky —
FTP účet má jméno, poznámku, cestu, stav, poslední přihlášení a tři akce.
V tabulce by se cesta zalomila a akce slepily k sobě. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tile {
padding: .7rem .8rem;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--surface-2);
}
.tile.is-inactive { opacity: .7; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tile p { margin: .3rem 0 0; }
/* Popisek a hodnota vedle sebe. Sloupec s popisky je úzký a pevný, ať se
hodnoty pod sebou dají číst jedním pohledem. */
.tile-facts { display: grid; grid-template-columns: 6rem 1fr; gap: .2rem .6rem; margin: .45rem 0 0; }
.tile-facts dt { color: var(--muted); font-size: .8rem; padding-top: .1rem; }
/* Hodnota a tlačítko na zkopírování na jednom řádku. `flex` kvůli tomu, aby
tlačítko zůstalo u konce hodnoty i tam, kde se hodnota zalomí. */
.tile-facts dd {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .1rem .35rem;
margin: 0;
min-width: 0;
font-size: .88rem;
}
.tile .buttons { margin: .6rem 0 0; }
/* --- dialog --------------------------------------------------------------- */
/* Ze serveru chodí otevřený, aby formulář uvnitř fungoval i bez JavaScriptu —
do té doby vypadá jako obyčejný blok v dlaždici, ne jako okno. Teprve
`showModal()` z něj udělá okno; `::backdrop` platí jen na modální dialog. */
.modal {
width: 100%;
max-width: 26rem;
margin: .6rem 0 0;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
color: var(--text);
}
.modal[open] { display: block; }
.modal h3 { margin: 0 0 .35rem; }
.modal form { max-width: none; margin: 0; }
.modal .buttons { margin: .9rem 0 0; }
/* Okno uprostřed obrazovky. `:modal` chytne jen dialog otevřený přes
showModal(), takže tenhle blok se netýká toho, co drží šablona otevřené. */
.modal:modal {
margin: auto;
box-shadow: 0 12px 40px rgb(0 0 0 / .35);
}
.modal::backdrop { background: rgb(0 0 0 / .5); }
/* --- výběr složek pro zálohu ---------------------------------------------- */
/* Strom složek projektu, u každé přepínač „zálohovat / nezálohovat".
ODSAZENÍ NESE PROMĚNNÁ --level PŘÍMO NA ŘÁDKU. Hloubka je vlastnost dat,
ne pár tříd pro každou úroveň zvlášť — a hlubší výpis si o nové pravidlo
v CSS neřekne.
VÝPIS SE NEROLUJE. Je to celý výběr toho, co se zálohuje, takže se v něm
hledá očima po stránce, ne v okénku s vlastním posuvníkem — a při hledání
se posuvník uvnitř karty plete s tím od stránky. Že je seznam dlouhý, je
rozhodnutí člověka: základní výpis jde do tří úrovní a hlubší se vyžádá
odkazem pod ním. */
.dirtree {
list-style: none;
margin: 0 0 .9rem;
padding: .35rem 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-2);
}
.dirtree li {
display: flex;
align-items: center;
gap: .4rem;
padding: .12rem .7rem .12rem calc(.7rem + var(--level, 0) * 1.3rem);
font-size: .9rem;
}
.dirtree input[type='checkbox'] { margin-right: 0; }
.dirtree label { display: inline-flex; align-items: center; min-width: 0; margin: 0; }
/* Dlouhé jméno složky se zalomí. Ve výpisu bez posuvníku není kam ho odsunout
a vodorovný posuvník uvnitř karty je totéž, čemu se výpis vyhýbá svisle. */
.dirtree code { background: none; padding: 0; overflow-wrap: anywhere; }
.dirtree-size { margin-left: auto; color: var(--muted); font-size: .78rem; white-space: nowrap; }
/* Cesta, která v seznamu je, ale na disku už ne. Přeškrtnutí to řekne dřív,
než člověk dočte odznak vedle. */
.dirtree li.is-missing code { color: var(--bad); text-decoration: line-through; }
.dirtree li.is-excluded code, .dirtree li.is-blocked code { color: var(--muted); }
/* Odznaky o vynechání jsou v HTML pořád a ukazuje je až třída na řádku:
přepínáním se mění a dopisovat je v JavaScriptu by znamenalo držet tytéž
texty na dvou místech. */
.dirtree .badge-excluded, .dirtree .badge-blocked { display: none; }
.dirtree li.is-excluded .badge-excluded { display: inline-block; }
.dirtree li.is-blocked .badge-blocked { display: inline-block; }
/* --- zálohy na NASu -------------------------------------------------------- */
/* Seznam snapshotů, ze kterých jde obnovovat. Vypadá jako strom složek vedle
něj schválně: je to zase výběr jednoho řádku v ohraničeném seznamu, jen
místo přepínačů má přepínač jediné volby. */
.snapshots {
list-style: none;
margin: 0 0 .9rem;
padding: .35rem 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-2);
}
.snapshots li {
display: flex;
align-items: center;
gap: .5rem;
padding: .25rem .7rem;
font-size: .9rem;
}
/* Kolečko v hodnotě, jakou má výběr na přihlašovací obrazovce (.choice) —
výchozí velikost prohlížeče je vedle přepínačů ve stromu složek drobek
a míří se na ni myší. */
.snapshots input[type='radio'] {
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.snapshots label { display: inline-flex; align-items: center; min-width: 0; margin: 0; cursor: pointer; }
.snapshot-time { white-space: nowrap; }
.snapshot-id { background: none; padding: 0; color: var(--muted); font-size: .78rem; }
/* Co v záloze je. Bývá to ve všech řádcích totéž, takže se vejde vpravo
nadrobno — a když se seznam cest za ta léta měnil, je rozdíl vidět. Celý
výčet drží title, do řádku se vejde zkrácený. */
.snapshot-paths {
margin-left: auto;
overflow: hidden;
color: var(--muted);
font-size: .78rem;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Adresa je jeden údaj ve dvou prvcích, tak ať tak i vypadá: bez mezery,
se zaoblením jen na krajích a jedinou dělicí čárou uprostřed.
`width: auto` je nutné - obecné pravidlo dává poli i nabídce `width: 100 %`
a bez přepsání by se každý postavil na vlastní řádek i uvnitř flexu. */
.addr-input { display: flex; align-items: stretch; max-width: 26rem; }
.addr-input input[type='text'] {
flex: 1 1 9rem;
width: auto;
min-width: 0;
max-width: none;
border-radius: 7px 0 0 7px;
border-right: 0;
}
.addr-input select {
flex: 1 1 11rem;
width: auto;
min-width: 0;
max-width: none;
border-radius: 0 7px 7px 0;
}
/* Obrys při zaostření musí být nad sousedem, jinak ho druhý prvek překryje. */
.addr-input input:focus-visible, .addr-input select:focus-visible { position: relative; z-index: 1; }
/* QR kód pro Authenticator. Knihovna ho kreslí černě na průhledném pozadí,
takže i v tmavém motivu musí mít světlý podklad — na tmavém by ho čtečka
v telefonu nenašla. */
.qr { background: #fff; padding: .6rem; border-radius: 8px; width: max-content; margin: 0 0 .9rem; }
.qr svg { display: block; }
/* Stav ověřování v přehledu účtu. */
.mfa-state { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
/* Výběr způsobu ověřování.
Terčem je celá karta, ne kolečko vedle textu: vybírá se to skoro vždycky na
telefonu, jednou rukou. Minimální výška 3.25rem drží plochu nad hranicí, na
kterou se dá trefit palcem, a `label` obalující `input` znamená, že kliknutí
kamkoliv do karty volbu přepne — i bez JavaScriptu.
Vybraná karta se pozná i bez kolečka (rámeček a podbarvení), protože na
malém displeji je stav prvku to první, co zanikne. */
.choices { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.choice {
display: flex;
align-items: center;
gap: .75rem;
min-height: 3.25rem;
padding: .7rem .85rem;
border: 1px solid var(--border-strong);
border-radius: 10px;
background: var(--surface-2);
cursor: pointer;
/* Bez tohohle čeká prohlížeč na dvojité ťuknutí a volba se přepne se zpožděním. */
touch-action: manipulation;
transition: border-color .15s ease, background .15s ease;
}
.choice:hover { border-color: var(--accent); }
.choice input[type='radio'] {
flex: none;
width: 1.25rem;
height: 1.25rem;
margin: 0;
accent-color: var(--accent);
/* Kliká se na kartu, ne na kolečko — samo o sobě je jen ukazatel stavu. */
pointer-events: none;
}
.choice-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.choice-title { font-weight: 600; line-height: 1.25; }
.choice-note { font-size: .82rem; color: var(--muted); line-height: 1.3; }
/* :has() umí všechny prohlížeče, ve kterých tahle administrace běží; kdyby ne,
výběr funguje dál, jen se karta nezvýrazní. */
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Potvrzovací tlačítko pod výběrem má být stejně dobře trefitelné jako volby. */
.btn-wide {
display: block;
width: 100%;
min-height: 2.9rem;
font-size: .95rem;
}
/* Hláška u tlačítka pro otisk. Chyba z dialogu prohlížeče se nesmí ztratit
v konzoli — člověk musí vědět, jestli se čeká na jeho prst, nebo to selhalo. */
.passkey-stav { margin: .5rem 0 0; font-size: .85rem; }
.passkey-stav.bad { color: var(--bad); }
/* Dělítko mezi přihlášením otiskem a heslem. */
.delic { display: flex; align-items: center; gap: .6rem; margin: .9rem 0; font-size: .8rem; }
.delic::before, .delic::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* Rám s výpisem phpinfo. Je to cizí dokument s vlastními styly, takže jde do
iframu — ale nemá vypadat jako vložený rám: bez rámečku a s pozadím, které si
dokument uvnitř sladí s kartou (styl mu dopisuje PhpInfoPresenter).
Výšku dorovnává app.js podle obsahu, aby v rámu nebyl vlastní posuvník uvnitř
stránky, která se posouvá taky. Hodnota tady je jen pro případ, že JavaScript
neběží — pak zůstane posuvník, ale výpis je vidět celý. */
.phpinfo {
display: block;
width: 100%;
height: 75vh;
border: 0;
background: transparent;
}
/* Blok na polovinu šířky, přesně jako jeden sloupec v .grid-2 — pro sekce,
které vedle sebe nikoho nemají a přes celou stránku by jen zbytečně roztahovaly
krátký formulář nebo úzkou tabulku.
Pod hranicí, kde se mřížka láme do jednoho sloupce, se roztáhne taky; jinak
by na telefonu zůstal proužek vedle prázdna. */
.card.half { width: calc(50% - .5rem); }
@media (max-width: 42rem) {
.card.half { width: 100%; }
.grid-2.halves { grid-template-columns: 1fr; }
}
/* --- seznam databází ------------------------------------------------------ */
/* Základní .table dává první sloupec „na zbytek šířky" — u domén to sedí, protože
za jménem je jen pár krátkých odznaků. Tady mají sloupce podobně dlouhý obsah,
takže by jméno viselo uprostřed prázdna a zbytek by se mačkal u pravého okraje.
Rozdělují se proto pevně.
Jméno má nejvíc, je to identita řádku a klika, na kterou se míří; čísla vpravo
naopak jen tolik, kolik potřebují. Šířky platí z hlavičky (table-layout: fixed),
takže stačí popsat th — a když sloupec „Založil" chybí, protože se nedívá správce,
zbylé se roztáhnou samy. */
.table-databases { table-layout: fixed; }
.table-databases th:nth-child(1) { width: 30%; }
.table-databases th:nth-child(2) { width: 22%; }
.table-databases th:nth-child(3) { width: 22%; }
.table-databases th:nth-child(4) { width: 12%; }
.table-databases th:nth-child(5) { width: 14%; }
/* --- obsazenost schránek -------------------------------------------------- */
/* Pruh má vlastní sloupec bez popisku — co znamená, říkají procenta nad ním.
Šířku nestačí držet na buňce: tabulka se rozvrhuje automaticky, `width` je pro
ni jen přání a sloupec, ve kterém není žádný text, smačkne na nulu. Pevnou
šířku má proto sám pruh — ta se počítá do minimální šířky sloupce a tabulka
ji dodržet musí. */
.table td.usage, .table th.usage { width: 7rem; }
.table td.usage .meter { width: 7rem; height: .4rem; margin: .15rem 0 0; max-width: none; }
/* Procenta stojí uprostřed nad pruhem — patří k němu, ne k číslu v sousedním
sloupci. Blok má stejnou šířku jako pruh, takže střed sedí na jeho střed. */
.usage-value { display: block; width: 7rem; text-align: center; font-size: .6rem; line-height: 1.1; }
.usage-value.warn { color: var(--warn); }
.usage-value.bad { color: var(--bad); }
/* --- proxy ---------------------------------------------------------------- */
/* Záložky uvnitř sekce. Nabídka v postranním panelu ukazuje na jednu položku
„Proxy" a rozpad na routery, služby a middlewary patří až dovnitř — v panelu
by ze čtyř řádků udělal skupinu velkou jako pošta. */
.tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border); }
.tabs a {
padding: .4rem .8rem;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 6px 6px 0 0;
color: var(--muted);
font-size: .9rem;
text-decoration: none;
margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); background: var(--surface-2); }
.tabs a.active {
color: var(--text);
background: var(--surface);
border-color: var(--border);
border-bottom-color: var(--surface);
}
/* Výběr typu middlewaru. Je jich přes dvacet a v rozbalovátku by z nich byl
jen seznam zkratek — jako dlaždice se vejde i věta o tom, k čemu typ je. */
.cards-types { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.type-card { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: inherit; }
.type-card:hover { border-color: var(--accent); }
.type-card code { align-self: flex-start; font-size: .75rem; }
/* Tabulky v sekci Proxy mají pevné rozvržení a sloupce s odkazy jako pilulky.
Obecné pravidlo výš dává prvnímu sloupci `width: 100%` a ostatním `nowrap`.
Tady to nefunguje: middleware `allow-lan` používá jedenáct routerů, ten
sloupec se nezalomil, roztáhl tabulku a jméno v prvním sloupci se pak lámalo
po slabikách. Pevné šířky drží rozvržení bez ohledu na to, kolik odkazů kde
je, a pilulky se zalomí do dalšího řádku. */
.table-proxy { table-layout: fixed; }
.table-proxy td, .table-proxy th { white-space: normal; width: auto; }
.table-proxy td:first-child, .table-proxy th:first-child { width: auto; }
.table-proxy th:last-child, .table-proxy td:last-child { text-align: right; }
.table-routers th:nth-child(1) { width: 26%; }
.table-routers th:nth-child(2) { width: 17%; }
.table-routers th:nth-child(3) { width: 7%; }
.table-routers th:nth-child(4) { width: 9%; }
.table-routers th:nth-child(5) { width: 28%; }
.table-routers th:nth-child(6) { width: 13%; }
.table-services th:nth-child(1) { width: 24%; }
.table-services th:nth-child(2) { width: 44%; }
.table-services th:nth-child(3) { width: 18%; }
.table-services th:nth-child(4) { width: 14%; }
.table-middlewares th:nth-child(1) { width: 26%; }
.table-middlewares th:nth-child(2) { width: 19%; }
.table-middlewares th:nth-child(3) { width: 42%; }
.table-middlewares th:nth-child(4) { width: 13%; }
.table-transports th:nth-child(1) { width: 26%; }
.table-transports th:nth-child(2) { width: 61%; }
.table-transports th:nth-child(3) { width: 13%; }
/* Jména routerů a služeb v buňce. Je jich klidně dvanáct, takže se musí zalomit
jako celá slova — uvnitř jedné pilulky se ale lámat nesmí, jinak z ní není
poznat, kde jméno začíná a končí. */
.pills { display: flex; flex-wrap: wrap; gap: .25rem; }
.pill {
display: inline-block;
max-width: 100%;
padding: .08rem .45rem;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--border);
font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
font-size: .74rem;
line-height: 1.5;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Adresa serveru se do pilulky nevejde a zkrátit se nesmí — je to jediné místo,
kde je vidět port. Zalomí se proto uvnitř. */
.pill-wide { white-space: normal; word-break: break-all; text-align: left; }
/* Pilulka pro doplňkovou hodnotu — vstupní body vedle služby. Stejný tvar, aby
spolu v jedné buňce ladily, ale bez výplně: služba je to podstatné, entrypoint
jen upřesňuje, kudy se tam chodí. */
.pill-soft { background: none; color: var(--muted); font-size: .7rem; }
/* Jméno položky a popisek pod ním. Popisek je delší věta, takže se láme; jméno
ne — rozlámané jméno v úzkém sloupci je nečitelné. */
.cell-name strong, .cell-name a { display: block; word-break: break-word; }
/* Popisek nad jménem položky.
Nahoře je schválně: při hledání v seznamu je první otázka „k čemu to je", ne
„jak se to jmenuje" — jméno je technický klíč, který se hodí až potom. Musí
být taky na vlastním řádku; jako inline `.muted` splýval s pravidlem pod sebou
v jeden šedý odstavec a vypadal jako pokračování jména. */
.cell-name .note {
display: block;
margin-bottom: .15rem;
font-size: .82rem;
line-height: 1.35;
color: var(--text);
}
/* Pravidlo routeru je technická hodnota, ne věta — monospace ji odliší od
popisku nad ním a dlouhý výraz se zalomí, místo aby roztáhl sloupec. */
.cell-name .rule {
display: block;
margin-top: .15rem;
font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
font-size: .74rem;
line-height: 1.4;
color: var(--muted);
word-break: break-word;
}
/* Definiční tabulka: popisek v | vlevo, hodnota v | vpravo, bez hlavičky.
Obecné pravidlo pro tabulky výš platí pro seznamy — první sloupec nese jméno
a bere zbývající místo, ostatní se smrští na obsah a nezalomí se. V definiční
tabulce je to přesně obráceně: popisek je krátký a pevný, hodnota může být celý
odstavec. Bez tohohle dostal popisek `width: 100%`, hodnota `nowrap` a dlouhý
text přetekl z karty ven (vysvětlivka u otisku zařízení).
Pozná se podle toho, že | je v tbody, ne v thead — seznamy mají hlavičku,
definiční tabulky ne. Platí to tedy i pro ty, které teprve vzniknou. */
.table tbody > tr > th:first-child {
width: 1%;
white-space: nowrap;
vertical-align: top;
padding: .45rem .55rem;
}
.table tbody > tr > th:first-child ~ td {
width: auto;
white-space: normal;
vertical-align: top;
}
/* --- seznam uživatelů ------------------------------------------------------ */
/* Účet má vedle jména ještě čtyři výčty: druhý faktor, spravované domény,
přidělené schránky a e-mail. Obecné pravidlo drží všechny sloupce kromě
prvního na jednom řádku, takže se tabulka roztahovala tak dlouho, dokud se
nejdelší výčet nevešel — u účtu se třemi faktory přetekla z karty ven.
Rozvržení je proto pevné a výčty se zalomí. Šířky platí z hlavičky
(table-layout: fixed), takže stačí popsat th. Nejvíc má účet a druhý faktor:
účet je identita řádku a klika, na kterou se míří, faktory jsou nejdelší text.
Vyšší specificita (.table.table-users) je tu schválně, stejně jako u tabulek
výš: obecná pravidla mají stejnou váhu a přebila by to. */
.table-users { table-layout: fixed; }
.table.table-users th, .table.table-users td { white-space: normal; overflow-wrap: anywhere; }
.table.table-users th:nth-child(1) { width: 17%; }
.table.table-users th:nth-child(2) { width: 15%; }
.table.table-users th:nth-child(3) { width: 14%; }
.table.table-users th:nth-child(4) { width: 16%; }
.table.table-users th:nth-child(5) { width: 15%; }
.table.table-users th:nth-child(6) { width: 14%; }
.table.table-users th:nth-child(7) { width: 9%; }
/* Řádek je vysoký podle nejdelšího výčtu; na střed zarovnaný účet by se pak
vznášel uprostřed prázdna vedle něj. */
.table.table-users td { vertical-align: top; }
/* Buňka účtu má tři patra: přihlašovací jméno, pod ním celé jméno a teprve pak
odznaky. Odkaz je blokem už z .cell-name, blokem musí být i jméno — odznak
vedle něj se čte jako přípona jména, přitom mluví o stavu účtu. */
.table.table-users .cell-name .muted { display: block; }
/* Pilulka si tu nechává tvar, ale ne strojové písmo: jinde je v ní jméno routeru
nebo služby, tady věta pro člověka. A dlouhý název se radši zalomí, než aby
zmizel pod výpustkou — jméno faktoru je celé, nebo k ničemu. */
.table.table-users .pill { font-family: inherit; font-size: .78rem; white-space: normal; }
/* Barva odliší faktory od sebe na první pohled — ve výpisu se pak dá porovnávat
po sloupci, aniž by se každý řádek četl. Rámeček i text, výplň ne: pilulka je
štítek, ne tlačítko. */
.pill-sms { color: var(--factor-sms); border-color: var(--factor-sms); }
.pill-email { color: var(--factor-email); border-color: var(--factor-email); }
.pill-totp { color: var(--factor-totp); border-color: var(--factor-totp); }
/* Telefon je jedno číslo a rozlomit se nesmí — předvolba na samostatném řádku
vypadá jako dvě čísla. Když se do sloupce přesto nevejde (úzké okno, delší
předvolba), utne ho výpustka: nezalomené číslo jinak vyteče přes sousední
sloupec a překryje ho. */
.table.table-users td:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Akce se pod sebe zalomit můžou, jméno akce ne: „nové“ a „heslo“ na dvou
řádcích už není odkaz, ale hádanka. */
.table.table-users td:last-child a { white-space: nowrap; }
|