kantarciandClaude Opus 5
68380c6295
Das Auswahlfeld des Browsers sah aus wie das Auswahlfeld des Browsers. Hochgeladen wird jetzt über eine Ablagefläche: Bilder hineinziehen oder klicken, darunter steht, welche Dateien gewählt sind und welche übersprungen wurden. Darunter liegt weiter ein echtes input[type=file] - unsichtbar, aber fokussierbar, mit der Fläche als label und dem Fokusring über :focus-within. Ohne JavaScript bleibt genau das übrig: ein Dateifeld mit Beschriftung. Das Skript ergänzt Ziehen und benennt die Auswahl; abgeschickt wird nie von selbst. Kein "required", weil der Browser seine Meldung nicht an etwas Unsichtbares hängen kann - der Server weist einen leeren Upload mit einem lesbaren Satz ab. docs/UPDATE.md plant das Update über einen Git-Tag: Vorprüfung, Sicherung, Wartungszustand mit 503 für die Website und offenem /admin, Checkout, composer, Migration, Cache, Rauchtest, Protokoll - und den Rückweg in derselben Reihenfolge rückwärts. Migrationen bleiben nicht umkehrbar, der Rückweg ist die Sicherung. Kein Updater, der eine Adresse aus dem Formular zieht, und kein automatisches Update im Hintergrund. Zwei Entscheidungen hängen am Hosting: Composer auf dem Server oder vendor/ im Tag, und ob es Shell-Zugriff gibt. Gebaut ist davon nichts. 219 PHP-Tests / 881 Assertions unter PHP 8.4.22, darunter Upload über das Formular mit zwei Dateien, CSRF-Pflicht, Versionskonflikt, Archivfilter und Blättern mit 26 Bildern. Playwright prüft die Ablagefläche am echten Dateifeld; axe bleibt auf elf Bildschirmen ohne Verstöße. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
549 lines
21 KiB
CSS
549 lines
21 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 }
|
||
}
|