kantarciandClaude Opus 5
99bad61179
"Wieviel wann wo wie die Seite benutzt" - naheliegend wäre ein Analysewerkzeug gewesen, das eine Einwilligung braucht und damit genau die Besucher verliert, die ablehnen. Also andersherum: eine Messung, die niemanden wiedererkennt. Gespeichert wird ein Zähler je (Tag, Stunde, Pfad, Status, Verweis-Domain), kein Datensatz je Aufruf. Keine IP-Adresse, keine Kennung, kein Cookie - auch nicht gehasht, denn der Hash einer IP-Adresse bleibt ein Personenbezug. Ein Test liest die Spaltenliste der Tabelle und vergleicht sie mit dieser Zusage, damit sie beim nächsten Ausbau nicht unbemerkt fällt. Vom Verweis bleibt nur der Host: die volle Adresse kann einen Suchbegriff oder einen Namen tragen. Gezählt wird auf kernel.terminate, nach der Antwort - die Messung darf keine Anfrage verlangsamen, und ein Fehler beim Zählen kostet einen Zähler, nicht eine Seite. Nur GET auf HTML mit 200 oder 404; Verwaltung, Assets, Feed, Sitemap und Einwilligungsseite sind ausgenommen, erkennbare Maschinen über ihre Kennung. Das ist eine Heuristik, deshalb heißt die Zahl auf dem Bildschirm nicht "Besucher". Erfundene Crawler-Adressen laufen gesammelt unter (sonstige), sonst wächst die Tabelle mit jedem geprobten Pfad. Die Diagramme zeichnet der Server als SVG mit Klassen statt Stilattributen: kein Diagrammwerkzeug, kein Skript, und die Richtlinie bleibt streng. Die Zahlen stehen zusätzlich in einer Tabelle, weil ein Balken für einen Screenreader nichts ist. Was die Zahlen nicht sagen, steht auf dem Bildschirm: Aufrufe statt Besucher, keine Verweildauer, keine Absprungrate, kein Klickweg, kein Land. Das ist die Folge der Entscheidung, nicht eine Lücke. Aufbewahrung: nach 60 Tagen werden die Stunden eines Tages verschmolzen, nach 425 Tagen gelöscht - gut ein Jahr, damit der Vorjahresmonat vergleichbar bleibt. cms:stats:prune macht beides und gehört in einen Cronjob. 279 PHP-Tests / 1119 Assertions unter PHP 8.2.12 und 8.4.22, axe auf zwölf Verwaltungsbildschirmen ohne Verstöße. Dabei kam eine PHP-8.4-Verwarnung zu fputcsv() heraus, jetzt mit ausdrücklichem Escape-Parameter. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
581 lines
23 KiB
CSS
581 lines
23 KiB
CSS
/* Administration: shared foundation and the management screens.
|
||
The editor has its own stylesheet (editor.css) that only the editor and the media page load. */
|
||
|
||
:root {
|
||
/* One family of greens. The sidebar is the dark end of it, so the administration reads as one
|
||
place instead of a set of forms. */
|
||
--ink: #1b2a24;
|
||
--muted: #5d6b64;
|
||
--line: #e2e7e1;
|
||
--paper: #fff;
|
||
--ground: #f3f5f1;
|
||
--shell: #16241e;
|
||
--shell-ink: #e7eee8;
|
||
--shell-muted: #9fb0a6;
|
||
--mint: #e5f0b6;
|
||
--accent: #2c6b4f;
|
||
--ring: #b55b12;
|
||
--danger: #8b2f22;
|
||
/* System fonts: nothing to download, and the administration looks native on the machine it
|
||
runs on. Google Fonts are for the website itself, where Umut picks them. */
|
||
font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
||
color: var(--ink);
|
||
background: var(--ground);
|
||
font-synthesis: none;
|
||
}
|
||
|
||
* { box-sizing: border-box }
|
||
body { margin: 0 }
|
||
a { color: inherit; text-underline-offset: 4px }
|
||
button, input, select, textarea { font: inherit }
|
||
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent }
|
||
button { cursor: pointer }
|
||
button:disabled { cursor: default; opacity: .48 }
|
||
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
|
||
textarea:focus-visible, summary:focus-visible, iframe:focus-visible {
|
||
outline: 3px solid var(--ring);
|
||
outline-offset: 3px;
|
||
}
|
||
h1, h2, h3, p { margin-top: 0 }
|
||
h1 { font-size: 27px; font-weight: 650; letter-spacing: -.7px; line-height: 1.2; margin-bottom: 0 }
|
||
h2 { font-size: 17px; letter-spacing: -.3px }
|
||
h3 { font-size: 15px }
|
||
[hidden] { display: none !important }
|
||
|
||
.muted { color: var(--muted); line-height: 1.6 }
|
||
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.7px; color: var(--accent); margin-bottom: 14px }
|
||
.footnote { font-size: 11px; color: var(--muted); margin: 34px 0 0 }
|
||
.count { font-size: 12px; font-weight: 600; color: var(--muted) }
|
||
.danger-text { color: var(--danger) }
|
||
.visually-hidden {
|
||
position: absolute; width: 1px; height: 1px; padding: 0;
|
||
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
|
||
}
|
||
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--ink); color: #fff; padding: 15px }
|
||
.skip-link:focus { top: 10px }
|
||
|
||
/* ---- fields ---------------------------------------------------------------------------- */
|
||
|
||
input, textarea, select {
|
||
width: 100%;
|
||
border: 1px solid #c3cec7;
|
||
border-radius: 8px;
|
||
background: var(--paper);
|
||
color: var(--ink);
|
||
padding: 10px 12px;
|
||
min-height: 42px;
|
||
}
|
||
input:hover, textarea:hover, select:hover { border-color: #a9b8af }
|
||
textarea { resize: vertical; min-height: 110px; line-height: 1.6 }
|
||
label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600 }
|
||
.field-help { font-size: 11px; line-height: 1.55; color: var(--muted); margin: 7px 0 0 }
|
||
.field-help code, .card code { background: #eef2ea; padding: 1px 5px; border-radius: 4px; font-size: .95em }
|
||
.check-label { display: flex; align-items: center; gap: 8px; font-weight: 500 }
|
||
.check-label input { width: 16px; min-height: 16px }
|
||
/* A grid of fields that becomes one column when there is no room. */
|
||
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px }
|
||
.fields > div > label:first-child, .field > label:first-child { margin-top: 14px }
|
||
|
||
/* ---- buttons --------------------------------------------------------------------------- */
|
||
|
||
.primary, .secondary, .subtle, .text-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 9px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 10px 16px;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
background: var(--paper);
|
||
color: var(--ink);
|
||
white-space: nowrap;
|
||
min-height: 40px;
|
||
}
|
||
.primary { background: var(--accent); color: #fff; border-color: var(--accent) }
|
||
.primary:hover:not(:disabled) { background: #22553e }
|
||
.secondary:hover:not(:disabled) { background: #eef2ea; border-color: #cfd8d1 }
|
||
.subtle, .text-button { border-color: transparent; background: transparent }
|
||
.subtle:hover:not(:disabled) { background: #e8ede6 }
|
||
.text-button { padding: 4px 8px; min-height: 28px; font-size: 12px }
|
||
.full-width { width: 100% }
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
button, a, summary { transition: background-color .12s, border-color .12s, color .12s }
|
||
}
|
||
|
||
/* ---- the shell: one sidebar, always the same, so every screen is one click away --------- */
|
||
|
||
.admin-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100dvh }
|
||
|
||
.shell-nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: 20px 14px;
|
||
background: var(--shell);
|
||
color: var(--shell-ink);
|
||
position: sticky;
|
||
top: 0;
|
||
height: 100dvh;
|
||
overflow: auto;
|
||
}
|
||
.shell-nav .brand { color: #fff; margin: 4px 6px 22px }
|
||
.shell-nav .brand-icon { background: var(--mint); color: var(--shell) }
|
||
.nav-label {
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: 1.6px;
|
||
color: var(--shell-muted);
|
||
margin: 18px 8px 7px;
|
||
}
|
||
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
|
||
.nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 11px;
|
||
padding: 9px 10px;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
color: var(--shell-ink);
|
||
}
|
||
.nav-item:hover { background: #21362d }
|
||
.nav-item[aria-current=page] { background: #2b4a3b; color: #fff; font-weight: 650 }
|
||
.nav-item[aria-current=page] .nav-icon { color: var(--mint) }
|
||
.nav-icon { width: 19px; text-align: center; font-size: 14px; color: var(--shell-muted); flex-shrink: 0 }
|
||
.nav-out::after { content: '↗'; margin-left: auto; color: var(--shell-muted); font-size: 11px }
|
||
|
||
.shell-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid #2a3d35; display: grid; gap: 6px }
|
||
.shell-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12px }
|
||
.shell-user strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
||
.shell-avatar {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 28px; height: 28px;
|
||
border-radius: 50%;
|
||
background: #2b4a3b;
|
||
color: var(--mint);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
.shell-foot form { margin: 0 }
|
||
.shell-foot button {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
color: var(--shell-muted);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
min-height: 34px;
|
||
padding: 6px 10px;
|
||
}
|
||
.shell-foot button:hover { background: #21362d; color: var(--shell-ink) }
|
||
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
letter-spacing: -1.1px;
|
||
gap: 2px;
|
||
}
|
||
.brand > span:last-child { font-weight: 400 }
|
||
.brand-icon {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 31px; height: 31px;
|
||
background: var(--ink);
|
||
color: var(--mint);
|
||
border-radius: 9px;
|
||
margin-right: 7px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* ---- the screen itself ----------------------------------------------------------------- */
|
||
|
||
.shell-main { min-width: 0; display: flex; flex-direction: column }
|
||
.shell-top {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 20px 30px;
|
||
flex-wrap: wrap;
|
||
padding: 30px 38px 24px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: var(--paper);
|
||
}
|
||
.shell-heading { min-width: 0 }
|
||
.shell-heading p { font-size: 13px; margin: 7px 0 0; max-width: 62ch }
|
||
.shell-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
|
||
.shell-body { padding: 30px 38px 60px; max-width: 1180px; width: 100% }
|
||
.stack { display: grid; gap: 20px }
|
||
|
||
.notice { padding: 13px 17px; border-radius: 8px; line-height: 1.6; font-size: 13px; margin: 0 }
|
||
.notice.ok { background: #edf3dc; color: #2c5340; border: 1px solid #c5d89a }
|
||
.error, .notice.error { background: #fff0eb; color: var(--danger); border: 1px solid #e2b2a7 }
|
||
.shell-body > .notice { margin-bottom: 4px }
|
||
|
||
/* ---- cards and sections ---------------------------------------------------------------- */
|
||
|
||
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px }
|
||
.card-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 8px 20px;
|
||
flex-wrap: wrap;
|
||
padding: 19px 22px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.card-head h2, .card-head h3 { margin: 0 }
|
||
.card-head .muted { font-size: 12px }
|
||
.card-body { padding: 8px 22px 24px }
|
||
/* A heading for a group of rows, outside any card. */
|
||
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: 16px 2px -6px }
|
||
.section-head h2 { margin: 0 }
|
||
.section-head .muted { font-size: 12px }
|
||
.card-body > p:first-child { margin-top: 14px }
|
||
.card-body .primary, .card-body .secondary { margin-top: 22px }
|
||
.card-foot { padding: 16px 22px; border-top: 1px solid var(--line); background: #fafbf8; border-radius: 0 0 12px 12px }
|
||
|
||
/* A card that opens: used for everything secondary, so a screen starts calm. */
|
||
details.card > summary {
|
||
padding: 17px 22px;
|
||
font-size: 13px;
|
||
font-weight: 650;
|
||
cursor: pointer;
|
||
border-radius: 12px;
|
||
list-style: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
details.card > summary::before { content: '+'; color: var(--accent); font-size: 16px; width: 12px }
|
||
details.card[open] > summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0 }
|
||
details.card[open] > summary::before { content: '–' }
|
||
details.card > summary:hover { background: #fafbf8 }
|
||
|
||
/* ---- rows: one line per page, menu, area or file ---------------------------------------- */
|
||
|
||
.rows { display: grid; gap: 9px }
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
padding: 14px 18px;
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 11px;
|
||
}
|
||
.row-top { align-items: flex-start }
|
||
/* A row that carries its own disclosure is a stack, not a line. */
|
||
.row-stack { display: block; padding: 0 }
|
||
.row-line { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap }
|
||
.row-icon {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 38px; height: 38px;
|
||
border-radius: 9px;
|
||
background: #eef3e7;
|
||
color: var(--accent);
|
||
font-size: 17px;
|
||
flex-shrink: 0;
|
||
}
|
||
.row-main { flex: 1; min-width: 170px }
|
||
.row-main h3 { margin: 0; font-size: 14px; font-weight: 650 }
|
||
.row-main h3 a { text-decoration: none }
|
||
.row-main h3 a:hover { text-decoration: underline }
|
||
.row-main p { margin: 4px 0 0; font-size: 12px; color: var(--muted) }
|
||
.row-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap }
|
||
.row-actions .secondary, .row-actions .text-button { font-size: 12px; padding: 8px 12px; min-height: 36px }
|
||
/* The hierarchy of the page tree. A class, not a style attribute: the administration forbids
|
||
inline styles, so an attribute would be dropped and the tree would look flat. */
|
||
.row.depth-1 { margin-left: 26px }
|
||
.row.depth-2 { margin-left: 52px }
|
||
.row.depth-3 { margin-left: 78px }
|
||
|
||
.pill {
|
||
font-size: 11px;
|
||
font-weight: 650;
|
||
padding: 5px 11px;
|
||
border-radius: 20px;
|
||
white-space: nowrap;
|
||
background: #eef2ea;
|
||
color: #4a5751;
|
||
}
|
||
.pill-live { background: #e7f0d6; color: #2c5340 }
|
||
.pill-draft { background: #fff2d9; color: #6f4e18 }
|
||
.pill-off { background: #f1f2f0; color: #5a635e }
|
||
|
||
/* The per-row settings. One disclosure that opens in place, instead of six competing popovers
|
||
that clip each other at the edge of the card. */
|
||
.sheet { border-top: 1px solid var(--line) }
|
||
.row > .sheet:first-of-type { border-top: 0 }
|
||
.sheet > summary {
|
||
list-style: none;
|
||
cursor: pointer;
|
||
padding: 11px 18px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--muted);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.sheet > summary::before { content: '⚙'; font-size: 13px }
|
||
.sheet > summary:hover { color: var(--ink); background: #fafbf8 }
|
||
.sheet[open] > summary { color: var(--ink); border-bottom: 1px solid var(--line) }
|
||
.sheet-body { padding: 4px 18px 22px; background: #fafbf8; border-radius: 0 0 11px 11px }
|
||
.sheet-body form { margin: 0 }
|
||
.sheet-part { padding-top: 14px; margin-top: 18px; border-top: 1px solid var(--line) }
|
||
.sheet-part:first-child { padding-top: 0; margin-top: 0; border-top: 0 }
|
||
.sheet-part > h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .3px }
|
||
.sheet-part > p { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 7px 0 0 }
|
||
.sheet-part .primary, .sheet-part .secondary { margin-top: 18px }
|
||
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
|
||
.sheet-actions form { margin: 0 }
|
||
|
||
/* ---- the media library, rendered as a page rather than fetched ------------------------- */
|
||
|
||
.library-grid {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
gap: 14px;
|
||
}
|
||
.library-tile {
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 11px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.library-tile > a { display: block; background: #eef1ed; line-height: 0 }
|
||
.library-tile img { width: 100%; height: 160px; object-fit: cover }
|
||
.library-body { padding: 12px 14px; display: grid; gap: 3px; flex: 1 }
|
||
.library-body strong { font-size: 13px; overflow-wrap: anywhere }
|
||
.library-body span { font-size: 11px }
|
||
.library-body code { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; background: #f2f4f0; padding: 2px 5px; border-radius: 4px; justify-self: start }
|
||
.library-tile .sheet { margin-top: auto }
|
||
.library-tile .sheet > summary { padding: 9px 14px }
|
||
.library-tile .sheet-body { padding: 2px 14px 18px }
|
||
.library-tile .sheet-body label:first-of-type { margin-top: 12px }
|
||
|
||
/* The upload field: a drop area instead of the browser's file widget. The input itself stays a
|
||
real, focusable file input - the ring is drawn on the area via :focus-within. */
|
||
.dropzone {
|
||
position: relative;
|
||
border: 2px dashed #c3cec7;
|
||
border-radius: 12px;
|
||
background: #fafbf8;
|
||
margin-top: 8px;
|
||
}
|
||
.dropzone:hover { border-color: var(--accent); background: #f5f8f1 }
|
||
.dropzone.is-dragging { border-color: var(--accent); background: #eef4e3 }
|
||
.dropzone:focus-within { outline: 3px solid var(--ring); outline-offset: 3px }
|
||
.dropzone-label {
|
||
display: grid;
|
||
justify-items: center;
|
||
gap: 5px;
|
||
margin: 0;
|
||
padding: 30px 20px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
}
|
||
.dropzone-label strong { font-size: 14px; font-weight: 650 }
|
||
.dropzone-icon { font-size: 24px; color: var(--accent); line-height: 1 }
|
||
.dropzone-hint { font-size: 12px; color: var(--muted) }
|
||
/* Hidden from sight, not from the keyboard or from assistive technology. */
|
||
.dropzone-input {
|
||
position: absolute;
|
||
width: 1px; height: 1px;
|
||
padding: 0;
|
||
opacity: 0;
|
||
inset-inline-start: 50%;
|
||
inset-block-start: 50%;
|
||
}
|
||
.dropzone-chosen { font-size: 12px; line-height: 1.55; color: var(--ink); margin: 10px 0 0 }
|
||
|
||
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 10px }
|
||
.pager .muted { font-size: 12px }
|
||
|
||
/* ---- tables ---------------------------------------------------------------------------- */
|
||
|
||
/* A table scrolls sideways instead of pushing the card out of the screen. As a block it also
|
||
stops stretching its columns to the full width. */
|
||
.table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; font-size: 13px }
|
||
.table th {
|
||
text-align: left;
|
||
font-size: 11px;
|
||
letter-spacing: .4px;
|
||
color: var(--muted);
|
||
padding: 0 10px 9px 0;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
.table td { padding: 5px 10px 5px 0; vertical-align: top }
|
||
.table tbody tr + tr td { border-top: 1px solid #eef1ed }
|
||
.table input, .table select { font-size: 12px; min-height: 38px; padding: 8px 10px }
|
||
.table .check-cell { text-align: center }
|
||
.table .check-cell input { width: 18px; min-height: 18px }
|
||
.table-new input, .table-new select { background: #fafbf8 }
|
||
.table form { margin: 0 }
|
||
/* Column widths per screen: the two tables carry different things. */
|
||
.menu-table td:first-child input { width: 82px }
|
||
.menu-table td:nth-child(2) select { width: 148px }
|
||
.menu-table td:nth-child(3) input { min-width: 170px }
|
||
.menu-table td:nth-child(4) select { width: 108px }
|
||
.menu-table td:nth-child(5) select { min-width: 190px }
|
||
.menu-table td:nth-child(6) input { width: 130px }
|
||
.menu-table td:nth-child(7) input { min-width: 190px }
|
||
.field-table td:first-child input { width: 140px }
|
||
.field-table td:nth-child(2) select { width: 150px }
|
||
.field-table td:nth-child(3) input { min-width: 170px }
|
||
.field-table td:nth-child(5) input { min-width: 180px }
|
||
.field-table td:nth-child(6) input { min-width: 170px }
|
||
.theme-table td input { width: 190px }
|
||
.theme-table td select { width: 150px }
|
||
.theme-table td input[type=color] { width: 52px }
|
||
.theme-table .weights-cell { white-space: nowrap }
|
||
.redirect-table td { padding: 8px 12px 8px 0; font-size: 12px }
|
||
/* Headings inside a card separate its parts without a second border. */
|
||
.card-body .section-head { margin: 28px 0 12px }
|
||
.card-body .section-head:first-child { margin-top: 14px }
|
||
.card-body > .primary, .card-body > .secondary { margin-top: 24px }
|
||
|
||
/* A screen made of several equal sections (menu slots, form definitions). */
|
||
.stack-section { display: grid; gap: 10px }
|
||
.menu-form > label:first-of-type, .form-def > label:first-of-type { margin-top: 16px }
|
||
.menu-form > input[name=name] { max-width: 420px }
|
||
.menu-form .table, .form-def .table { margin-top: 22px }
|
||
.menu-form .primary, .form-def .primary { margin-top: 20px }
|
||
|
||
.empty {
|
||
padding: 34px;
|
||
border: 1px dashed #cfd8d1;
|
||
border-radius: 12px;
|
||
background: var(--paper);
|
||
text-align: center;
|
||
}
|
||
.empty h3 { margin-bottom: 8px }
|
||
.empty p { margin: 0; font-size: 13px; color: var(--muted) }
|
||
|
||
/* ---- contrast hints on the design screen ----------------------------------------------- */
|
||
|
||
.contrast-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 7px; font-size: 12px; line-height: 1.5; font-weight: 600 }
|
||
.contrast-ok { background: #edf3dc; color: #2c5340; border: 1px solid #c5d89a }
|
||
.contrast-warn { background: #fff6e2; color: #6f4e18; border: 1px solid #e6cf9c }
|
||
.contrast-bad { background: #fff0eb; color: var(--danger); border: 1px solid #e2b2a7 }
|
||
.theme-form .theme-swatch { width: 52px; min-height: 38px; padding: 2px; cursor: pointer }
|
||
.theme-form .weights-cell { white-space: nowrap }
|
||
.theme-form .weights-cell label { display: inline-flex; align-items: center; gap: 4px; margin: 0 9px 0 0; font-size: 11px; font-weight: 400 }
|
||
.theme-form .weights-cell input { width: 14px; min-height: 14px }
|
||
|
||
/* ---- submissions ----------------------------------------------------------------------- */
|
||
|
||
.submission-data { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 0; font-size: 12px }
|
||
.submission-data dt { font-weight: 600; color: var(--muted) }
|
||
.submission-data dd { margin: 0; overflow-wrap: anywhere }
|
||
|
||
/* ---- login ----------------------------------------------------------------------------- */
|
||
|
||
.login-body {
|
||
min-height: 100dvh;
|
||
display: grid;
|
||
place-items: center;
|
||
background: radial-gradient(ellipse at 20% 0%, #dfeab0, transparent 60%), var(--ground);
|
||
padding: 30px;
|
||
}
|
||
.login-card {
|
||
width: 100%;
|
||
max-width: 430px;
|
||
padding: 40px;
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 16px;
|
||
box-shadow: 0 20px 60px #1b2a2411;
|
||
}
|
||
.login-card .brand { margin-bottom: 38px }
|
||
.login-card h1 { font-size: 26px }
|
||
.login-card .muted { font-size: 14px; margin-top: 8px }
|
||
.login-card .primary { margin-top: 26px }
|
||
.login-card .notice { margin: 22px 0 0 }
|
||
.quiet-link { display: block; font-size: 12px; text-align: center; margin-top: 24px; color: var(--muted) }
|
||
|
||
/* ---- narrow screens: the sidebar becomes a strip above the content --------------------- */
|
||
|
||
@media (max-width: 1000px) {
|
||
.admin-shell { grid-template-columns: 1fr }
|
||
.shell-nav {
|
||
position: static;
|
||
height: auto;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
gap: 6px;
|
||
padding: 11px 14px;
|
||
}
|
||
.shell-nav .brand { margin: 0 10px 0 0; font-size: 0 }
|
||
.shell-nav .brand-icon { margin: 0; font-size: 15px }
|
||
.nav-label { display: none }
|
||
.nav-list { display: flex; gap: 4px }
|
||
.nav-item { white-space: nowrap; padding: 8px 12px }
|
||
.shell-foot { margin: 0 0 0 auto; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid #2a3d35; display: flex; align-items: center }
|
||
.shell-user strong { display: none }
|
||
.shell-foot button { width: auto }
|
||
.shell-top { padding: 22px 20px 18px }
|
||
.shell-body { padding: 20px 20px 48px }
|
||
}
|
||
|
||
@media (max-width: 620px) {
|
||
h1 { font-size: 23px }
|
||
.row-line { padding: 13px 14px; gap: 10px }
|
||
.row-actions { width: 100%; justify-content: flex-start }
|
||
.card-head, .sheet > summary { padding-inline: 16px }
|
||
.card-body, .sheet-body { padding-inline: 16px }
|
||
.row.depth-1, .row.depth-2, .row.depth-3 { margin-left: 14px }
|
||
.login-card { padding: 26px }
|
||
.login-body { padding: 16px }
|
||
}
|
||
|
||
/* A group of related checkboxes needs a name of its own, not just a label per box. */
|
||
.field-set { border: 1px solid var(--line); border-radius: 10px; padding: 4px 16px 16px; margin: 18px 0 0 }
|
||
.field-set > legend { font-size: 12px; font-weight: 700; padding: 0 6px }
|
||
.field-set .check-label { margin-top: 14px }
|
||
|
||
/* ---- statistics: charts drawn by the server, styled by class ---------------------------- */
|
||
|
||
.range-switch { display: flex; gap: 8px; flex-wrap: wrap }
|
||
.range-switch a { font-size: 12px; padding: 8px 14px; min-height: 36px }
|
||
.chart { display: block; width: 100%; height: 180px; overflow: visible }
|
||
.chart-bar { fill: var(--accent) }
|
||
.chart-bar:hover { fill: #1c4735 }
|
||
.chart-axis { stroke: var(--line); stroke-width: 1 }
|
||
.chart-legend { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 11px; color: var(--muted) }
|
||
.chart-table { margin-top: 18px }
|
||
.chart-table > summary { cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 0 }
|
||
.table-wrap { max-height: 320px; overflow: auto; margin-top: 10px }
|
||
.stats-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px }
|
||
.stats-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: rank }
|
||
.stats-list li {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 8px 0;
|
||
border-top: 1px solid #eef1ed;
|
||
font-size: 13px;
|
||
}
|
||
.stats-list li:first-child { border-top: 0 }
|
||
.stats-list span, .stats-list a { overflow-wrap: anywhere; min-width: 0 }
|
||
.stats-list strong { font-variant-numeric: tabular-nums; white-space: nowrap }
|