kantarciandClaude Opus 5.5
b982cb8944
The mail page under System tries SMTP, PHP mail() and both sendmail modes one by one or all at once, and saves the chosen way to .env without ever showing the password. IONOS answers everything under /.well-known/ itself with 403, so the address and HTTPS checks never reached the installation; the probe now lives at /kantsites-origin (ADR 122). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1106 lines
63 KiB
CSS
1106 lines
63 KiB
CSS
/* Der Strich aller Symbole aus icon.html.twig, wie auf der Website (site.css). */
|
||
svg.block-icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
|
||
/* 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 }
|
||
/* Nur Häkchen und Text sind klickbar: über die volle Breite schaltete ein Klick in die leere Mitte
|
||
der Zeile das Häkchen um - in der Menüverwaltung klappten so die Button-Einstellungen zu. */
|
||
.check-label { display: flex; align-items: center; gap: 8px; font-weight: 500; width: fit-content; max-width: 100% }
|
||
.check-label input { width: 16px; min-height: 16px }
|
||
/* Eine Gruppe von Häkchen nebeneinander, die auf schmalen Bildschirmen umbricht (Sprachen). */
|
||
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 20px; border: 0; padding: 0; margin: 0 0 12px; min-width: 0 }
|
||
.check-grid legend { font-weight: 600; margin-bottom: 8px; padding: 0 }
|
||
/* 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: 18px; height: 18px; color: var(--shell-muted); flex-shrink: 0 }
|
||
.nav-out::after { content: '↗'; margin-left: auto; color: var(--shell-muted); font-size: 11px }
|
||
|
||
/* Der Fuss der Leiste: Kontokarte, Abmeldesymbol, Fassung. Eine Einheit statt dreier Zeilen. */
|
||
.shell-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #2a3d35; display: grid; gap: 8px }
|
||
.shell-account {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 5px;
|
||
border-radius: 13px;
|
||
background: #ffffff0b;
|
||
border: 1px solid #ffffff10;
|
||
}
|
||
.shell-user {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 5px 7px;
|
||
border-radius: 9px;
|
||
text-decoration: none;
|
||
color: var(--shell-ink);
|
||
}
|
||
.shell-user:hover, .shell-user[aria-current=page] { background: #ffffff12 }
|
||
.shell-user[aria-current=page] .shell-avatar { box-shadow: 0 0 0 2px var(--mint) }
|
||
.shell-user-text { display: grid; min-width: 0; line-height: 1.3 }
|
||
.shell-user-text strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
||
.shell-user-text span { font-size: 11px; color: var(--shell-muted) }
|
||
.shell-avatar {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 32px; height: 32px;
|
||
border-radius: 50%;
|
||
background: var(--mint);
|
||
color: var(--shell);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
.shell-foot form { margin: 0 }
|
||
.shell-logout {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 38px; height: 38px;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 9px;
|
||
background: transparent;
|
||
color: var(--shell-muted);
|
||
}
|
||
.shell-logout .nav-icon { color: inherit }
|
||
.shell-logout:hover { background: #ffffff14; color: #fff }
|
||
.shell-logout:focus-visible { outline-color: var(--mint); outline-offset: -2px }
|
||
.shell-version { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0 8px 2px; font-size: 11px; color: var(--shell-muted) }
|
||
.shell-version a { text-decoration: none }
|
||
.shell-version > a:hover { color: var(--shell-ink); text-decoration: underline }
|
||
|
||
.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% }
|
||
/* Eine Spalte, die nie breiter wird als der Bildschirm: ohne `minmax(0, 1fr)` waechst
|
||
die automatische Rasterspalte auf die Mindestbreite ihres breitesten Inhalts - auf dem
|
||
Handy schiebt eine einzige lange Pfadangabe dann die ganze Seite zur Seite. */
|
||
.stack { display: grid; grid-template-columns: minmax(0, 1fr); 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 }
|
||
|
||
/* Der Hinweisstreifen ueber jedem Verwaltungsbildschirm: eine Sache, die getan werden will, und
|
||
gleich daneben der Knopf, der sie tut. Warm statt rot - es ist eine Aufgabe, kein Fehler. */
|
||
.shell-notice {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px 18px;
|
||
margin: 0 0 4px;
|
||
padding: 12px 14px 12px 17px;
|
||
border: 1px solid #e3cf9b;
|
||
border-radius: 10px;
|
||
background: #fdf6e4;
|
||
color: #5b4412;
|
||
line-height: 1.6;
|
||
font-size: 13px;
|
||
}
|
||
.shell-notice > span { min-width: 0; flex: 1 1 260px }
|
||
.shell-notice .secondary { flex: none; border-color: #dcc48a; background: var(--paper); color: #5b4412 }
|
||
.shell-notice .secondary:hover { background: #fbeecd; border-color: #cbb072 }
|
||
|
||
/* ---- 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; min-width: 0 }
|
||
.card-body code { overflow-wrap: anywhere }
|
||
/* Das Kleingedruckte einer Karte: zugeklappt, damit auf einem Handy der Knopf oben bleibt. */
|
||
.hint { margin: 12px 0 0 }
|
||
.hint > summary { font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 44px; display: flex; align-items: center }
|
||
.hint[open] > summary { margin-bottom: 2px }
|
||
/* 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 menu table carries text, links and switches. */
|
||
.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 }
|
||
.redirect-table td { padding: 8px 12px 8px 0; font-size: 12px }
|
||
/* Der Aufgabenplan: die erste Spalte traegt Text, die schmalen tragen Zahlen und Schalter. */
|
||
.tasks-table td:first-child { min-width: 220px; max-width: 340px }
|
||
.tasks-table td input[type=number] { width: 92px }
|
||
.tasks-table td .field-help { margin-top: 4px }
|
||
.tasks-table .row-actions, .tasks-table td:last-child { white-space: nowrap }
|
||
/* 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). */
|
||
.stack-section { display: grid; gap: 10px }
|
||
.menu-form > label:first-of-type { margin-top: 16px }
|
||
.menu-form > input[name=name] { max-width: 420px }
|
||
.menu-form .table { margin-top: 22px }
|
||
.menu-form .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 }
|
||
|
||
/* ---- 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) {
|
||
/* minmax(0, 1fr), nicht 1fr: sonst nimmt die Spalte die Mindestbreite der Leiste an und
|
||
schiebt die ganze Seite ueber den rechten Rand hinaus. */
|
||
.admin-shell { grid-template-columns: minmax(0, 1fr) }
|
||
.shell-nav {
|
||
position: static;
|
||
height: auto;
|
||
min-width: 0;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
overflow: visible;
|
||
gap: 6px;
|
||
padding: 11px 14px;
|
||
}
|
||
/* Nur die Liste wischt; Konto und Abmelden bleiben rechts im Bild. */
|
||
.shell-menu { flex: 1 1 auto; min-width: 0; overflow-x: auto }
|
||
.shell-foot { flex: none }
|
||
.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 12px; border-top: 0; border-left: 1px solid #2a3d35; display: flex; align-items: center; gap: 10px }
|
||
.shell-account { padding: 3px; gap: 2px }
|
||
.shell-user { padding: 3px }
|
||
.shell-user-text { display: none }
|
||
.shell-version { padding: 0 }
|
||
.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 }
|
||
/* Zwei Rasterspalten aus Bezeichner und Wert sind auf einem Handy eine Spalte zu viel. */
|
||
.facts { grid-template-columns: minmax(0, 1fr); gap: 2px }
|
||
.facts dt { margin-top: 10px }
|
||
.facts dt:first-child { margin-top: 0 }
|
||
/* Eine sechsspaltige Tabelle passt auf kein Handy. Jede Zeile wird zu einem Block, und die
|
||
Spaltenueberschrift steht als Bezeichner vor ihrem Wert. */
|
||
.table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
|
||
.table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100% }
|
||
.table-stack tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 10px }
|
||
.table-stack tbody tr + tr td { border-top: 0 }
|
||
.table-stack td { display: flex; gap: 14px; justify-content: space-between; align-items: baseline; padding: 5px 0; text-align: right }
|
||
.table-stack td::before { content: attr(data-label); color: var(--muted); text-align: left; flex: none }
|
||
}
|
||
|
||
/* 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: tiles, charts drawn by the server, ranked lists ------------------------ */
|
||
|
||
/* Der Zeitraum als eine Leiste mit einem gedrueckten Knopf, nicht vier lose Schaltflaechen. */
|
||
.range-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper) }
|
||
.range-switch a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 13px; border-radius: 7px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--muted) }
|
||
.range-switch a:hover { color: var(--ink); background: #eef2ea }
|
||
.range-switch a[aria-current=page] { background: var(--shell); color: #fff }
|
||
/* Die Kennzahlen: eine grosse dunkle Kachel fuer die Summe, kleine helle fuer alles, was sie einordnet. */
|
||
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 12px }
|
||
.stat-tile { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px }
|
||
.stat-tile-main { grid-column: span 2; background: var(--shell); border-color: var(--shell); color: var(--shell-ink) }
|
||
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted) }
|
||
.stat-value { font-size: 28px; font-weight: 650; letter-spacing: -.8px; line-height: 1.1; font-variant-numeric: tabular-nums }
|
||
.stat-note { font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere }
|
||
.stat-tile-main .stat-label, .stat-tile-main .stat-note { color: var(--shell-muted) }
|
||
.stat-tile-main .stat-value { font-size: 40px; color: #fff }
|
||
.stat-tile-main .stat-up { color: #bfe3a5 }
|
||
.stat-tile-main .stat-down { color: #f3b9a8 }
|
||
.chart { display: block; width: 100%; height: 190px; overflow: visible }
|
||
.chart-hours, .chart-weekdays { height: 150px }
|
||
.chart-bar { fill: var(--accent) }
|
||
.chart-bar:hover { fill: #1c4735 }
|
||
.chart-bar-peak { fill: var(--ring) }
|
||
.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3 }
|
||
.chart-axis { stroke: #c3cec7; stroke-width: 1 }
|
||
.chart-legend { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 0; font-size: 11px; color: var(--muted) }
|
||
.chart-legend-even span { flex: 1; text-align: center }
|
||
.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-columns-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }
|
||
/* Rang, Name, Anteil am Spitzenwert als Balken, Zahl. */
|
||
.stats-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px }
|
||
.stats-list li {
|
||
display: grid;
|
||
grid-template-columns: 22px minmax(0, 1fr) 72px auto;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 7px 0;
|
||
border-top: 1px solid #eef1ed;
|
||
font-size: 13px;
|
||
}
|
||
.stats-list li:first-child { border-top: 0 }
|
||
.stats-rank { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center }
|
||
.stats-list span:not(.stats-rank), .stats-list a { overflow-wrap: anywhere; min-width: 0 }
|
||
.stats-share { display: block; width: 100%; height: 6px; overflow: visible }
|
||
.stats-share-bar { fill: var(--accent); opacity: .5 }
|
||
.stats-list li:first-child .stats-share-bar { opacity: 1 }
|
||
.stats-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right }
|
||
@media (max-width: 620px) {
|
||
.stat-tile-main { grid-column: 1 / -1 }
|
||
.stats-list li { grid-template-columns: 22px minmax(0, 1fr) auto }
|
||
.stats-share { display: none }
|
||
}
|
||
|
||
/* ---- system: preflight, update steps, log ---------------------------------------------- */
|
||
|
||
.facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 20px; margin: 14px 0 0; font-size: 13px }
|
||
.facts dt { color: var(--muted) }
|
||
.facts dd { margin: 0; overflow-wrap: anywhere }
|
||
/* Die Adresse der Website auf der Systemseite: Feld und Knopf in einer Zeile, am Telefon untereinander. */
|
||
.origin-form { margin-top: 4px; max-width: 560px }
|
||
.origin-form label:first-of-type { margin-top: 10px }
|
||
.origin-row { display: flex; flex-wrap: wrap; gap: 8px }
|
||
.origin-row input { flex: 1 1 240px; width: auto; box-sizing: border-box; min-height: 40px; height: 40px }
|
||
.card-body .origin-row .secondary { margin: 0 }
|
||
.https-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
|
||
.card-body .https-actions .secondary { margin: 0 }
|
||
.origin-form .check-label { margin-top: 10px }
|
||
.link-button { border: 0; background: none; padding: 0; min-height: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer }
|
||
.check-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13px; line-height: 1.55 }
|
||
.check-list li { display: flex; gap: 11px; align-items: flex-start }
|
||
.check-list li > span { min-width: 0; overflow-wrap: anywhere }
|
||
.check-mark {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 20px; height: 20px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.check-ok .check-mark { background: #e7f0d6; color: #2c5340 }
|
||
.check-bad .check-mark { background: #fff0eb; color: var(--danger) }
|
||
.check-bad { color: var(--danger) }
|
||
.log-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px }
|
||
.log-list code { font-size: 11px; overflow-wrap: anywhere }
|
||
.mail-result { margin-top: 14px }
|
||
#mail .facts { margin-top: 0 }
|
||
.mail-result p { margin: 0 0 6px }
|
||
.mail-result p:last-child { margin-bottom: 0 }
|
||
.mail-result pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; margin: 6px 0 0 }
|
||
/* Unterpunkte im Menü: eingerückt auf die Höhe des Textes, ohne Symbol. */
|
||
.nav-sub { list-style: none; margin: 2px 0 4px; padding: 0 }
|
||
.nav-sub .nav-item { padding-left: 42px; font-size: 13px }
|
||
.mail-form { margin-top: 18px; max-width: 640px }
|
||
.mail-form fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0 }
|
||
.mail-form legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0 }
|
||
.mail-form .check-label { display: flex; gap: 8px; align-items: baseline; margin: 4px 0 }
|
||
.mail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px }
|
||
.mail-grid label { margin-top: 0 }
|
||
.mail-grid input { width: 100%; box-sizing: border-box }
|
||
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px }
|
||
.mail-actions button { margin: 0 }
|
||
/* Ohne SMTP brauchen die Felder niemand; wo :has() fehlt, bleiben sie einfach sichtbar. */
|
||
.mail-form:has(input[name=weg]:checked:not([value=smtp])) .smtp-fields { display: none }
|
||
|
||
/* ---- the installer: six screens on an otherwise empty server ---------------------------- */
|
||
|
||
.install-body {
|
||
min-height: 100dvh;
|
||
display: grid;
|
||
place-items: start center;
|
||
background: radial-gradient(ellipse at 20% 0%, #dfeab0, transparent 60%), var(--ground);
|
||
padding: 40px 20px 60px;
|
||
}
|
||
.install-shell { width: 100%; max-width: 640px }
|
||
.install-shell .card { margin-top: 18px }
|
||
.install-shell h1 { font-size: 24px }
|
||
.install-shell form { margin-top: 4px }
|
||
.install-shell .sheet-actions { margin-top: 24px }
|
||
.install-shell h2 { font-size: 15px; margin: 30px 0 0 }
|
||
|
||
/* The step list is the only orientation there is: no navigation exists yet. */
|
||
.install-steps {
|
||
list-style: none;
|
||
margin: 14px 0 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 16px;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
.install-steps li { display: flex; align-items: center; gap: 7px }
|
||
.install-steps .current { color: var(--ink); font-weight: 700 }
|
||
.install-step-number {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 19px; height: 19px;
|
||
border-radius: 50%;
|
||
background: #e4e9df;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
.install-steps .current .install-step-number { background: var(--accent); color: #fff }
|
||
.install-steps .done .install-step-number { background: #e7f0d6; color: #2c5340 }
|
||
|
||
/* A finding that is worth saying but does not block anything. */
|
||
.check-warn .check-mark { background: #f3f0e2; color: #6b6550 }
|
||
|
||
.button-link { text-decoration: none }
|
||
.install-details { margin-top: 18px; border: 1px solid var(--line); border-radius: 10px; padding: 0 16px 16px }
|
||
.install-details > summary { padding: 14px 0; font-size: 13px; font-weight: 600; cursor: pointer }
|
||
.install-details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 6px }
|
||
|
||
.favicon-field{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
|
||
.favicon-current{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
|
||
.favicon-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
|
||
.favicon-preview{border-radius:6px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
|
||
.favicon-editor{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:start;margin-top:14px}
|
||
.favicon-editor[hidden]{display:none}
|
||
.favicon-stage{position:relative;justify-self:start;max-width:100%;line-height:0;background:repeating-conic-gradient(#eef1eb 0% 25%,#fff 0% 50%) 0 0/16px 16px;user-select:none;touch-action:none}
|
||
.favicon-stage img{display:block;max-width:100%;max-height:360px;width:auto;height:auto}
|
||
.favicon-frame{position:absolute;box-sizing:border-box;border:2px solid #fff;outline:1px solid rgba(0,0,0,.6);box-shadow:0 0 0 9999px rgba(20,30,25,.55);cursor:move}
|
||
.favicon-stage{overflow:hidden}
|
||
.favicon-frame:focus-visible{outline:3px solid var(--accent);outline-offset:0}
|
||
.favicon-handle{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#fff;border:1px solid rgba(0,0,0,.6);border-radius:3px;cursor:nwse-resize}
|
||
.favicon-side input[type=range]{width:100%}
|
||
.favicon-samples{display:flex;align-items:flex-end;gap:16px;margin:12px 0}
|
||
.favicon-samples figure{margin:0;text-align:center;font-size:11px;color:var(--muted)}
|
||
.favicon-samples canvas{display:block;margin:0 auto 6px;border-radius:8px;background:repeating-conic-gradient(#eef1eb 0% 25%,#fff 0% 50%) 0 0/12px 12px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
|
||
.favicon-sample-large{width:90px;height:90px}
|
||
.favicon-sample-small{width:32px;height:32px;border-radius:4px!important}
|
||
@media(max-width:700px){.favicon-editor{grid-template-columns:1fr}}
|
||
|
||
.color-field { display: flex; gap: 8px; align-items: center }
|
||
.color-field input[type="text"], .color-field > input:not([type="color"]) { flex: 1; min-width: 0 }
|
||
.color-field-swatch { width: 46px; min-height: 38px; padding: 2px; flex: 0 0 auto; cursor: pointer }
|
||
.color-field-palette { flex: 0 0 auto; max-width: 40% }
|
||
/* Die Verwaltung auf dem Telefon.
|
||
|
||
Bis 1000px stand die Navigation als waagerechte Wischleiste da - zwei Listen untereinander,
|
||
also zwei Zeilen, und der letzte Eintrag ausserhalb des Bildes. Auf einem Telefon ist ein
|
||
Klappmenue ehrlicher: eine Zeile im Ruhezustand, aufgeklappt die vollstaendige Liste mit
|
||
Flaechen, die ein Daumen trifft. Das details-Element macht das ohne Skript. */
|
||
/* Der Schalter traegt seine Gestalt hier, nicht erst im Telefonabschnitt: am Schreibtisch
|
||
wird er ausgeblendet, aber nur dort, wo der Inhalt sicher sichtbar ist. */
|
||
.shell-menu > summary {
|
||
display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
|
||
min-height: 44px; padding: 0 14px; border-radius: 10px;
|
||
background: #ffffff14; color: #fff; font-weight: 600; font-size: 15px;
|
||
}
|
||
.shell-menu > summary::-webkit-details-marker { display: none }
|
||
.shell-menu > summary:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px }
|
||
.shell-menu[open] > summary { margin-bottom: 8px }
|
||
.shell-menu-icon { font-size: 17px }
|
||
/* Am Schreibtisch steht die Liste dauerhaft da. Ein geschlossenes details-Element versteckt
|
||
seinen Inhalt aber von sich aus - der Schalter allein auszublenden loescht die Navigation.
|
||
Erst ::details-content holt sie zurueck. Kennt ein Browser die Regel nicht, faellt die
|
||
ganze Gruppe weg und der Schalter bleibt stehen: die Liste ist dann einen Klick entfernt
|
||
statt gar nicht da. */
|
||
@supports selector(::details-content) {
|
||
.shell-menu > summary { display: none }
|
||
.shell-menu::details-content { content-visibility: visible; block-size: auto }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.shell-nav { flex-wrap: wrap; padding: 10px 14px; gap: 10px; overflow: visible }
|
||
.shell-menu { flex: 1 1 100%; order: 3 }
|
||
.shell-menu > summary { display: flex }
|
||
.shell-menu nav { display: block }
|
||
.shell-menu:not([open]) nav { display: none }
|
||
.shell-menu:not([open])::details-content { content-visibility: hidden; block-size: 0 }
|
||
.nav-label { display: block; margin: 12px 4px 6px; font-size: 11px; letter-spacing: 1.4px; color: #9db3a8 }
|
||
.nav-list { display: grid; gap: 2px }
|
||
/* Vierundvierzig Pixel: die Flaeche, die ein Daumen zuverlaessig trifft. */
|
||
.nav-item { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; white-space: normal }
|
||
.shell-foot { margin-left: auto; border-left: 0; padding-left: 0 }
|
||
.shell-version { display: none }
|
||
}
|
||
|
||
/* Search and forms share usable widths throughout administration. */
|
||
.field-wide{grid-column:1/-1;min-width:0}.field-wide textarea{width:100%;min-height:100px;resize:vertical}
|
||
.selected-media-preview{margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff;min-width:0}.selected-media-preview img{display:block;width:100%;height:140px;object-fit:contain;background:repeating-conic-gradient(#eef1eb 0% 25%,#fff 0% 50%) 0 0/16px 16px}.selected-media-preview figcaption{font-size:12px;line-height:1.5;overflow-wrap:anywhere;margin-top:8px;color:var(--muted)}
|
||
.live-search-ready .search-submit{display:none}.search-status{min-height:20px;margin:-12px 0 0}#list-results{scroll-margin-top:16px}#list-results>.section-head{margin-top:0}#list-results:focus-visible{outline:2px solid var(--accent);outline-offset:5px}#search-error p{margin-top:0}
|
||
.list-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:14px;padding:18px;margin:24px 0;background:var(--paper,#fff);border:1px solid var(--line,#dce3da);border-radius:12px}
|
||
.list-toolbar>div{min-width:140px}.list-toolbar .list-search{flex:1;min-width:220px}.list-toolbar input,.list-toolbar select{width:100%}
|
||
.content-picker{position:relative;min-width:0}.picker-input{display:flex;gap:6px}.picker-input input{width:100%;min-width:0}.picker-input button{flex:none}
|
||
.picker-results{position:absolute;z-index:30;top:100%;left:0;right:0;min-width:220px;max-height:300px;overflow-y:auto;background:white;border:1px solid #a7b9af;border-radius:8px;box-shadow:0 10px 30px #18382b24;padding:5px}
|
||
.picker-results[hidden]{display:none}.picker-results button{display:flex;flex-direction:column;align-items:start;width:100%;padding:10px;text-align:left;color:#163d30;background:white;border:0;border-radius:5px}
|
||
.picker-results button:hover,.picker-results button[aria-selected=true]{background:#e8f2e9}.picker-results span{font-size:12px;color:#496458;overflow-wrap:anywhere}.picker-status:empty{display:none}
|
||
@media(max-width:650px){.list-toolbar>div,.list-toolbar .list-search{min-width:0;flex-basis:100%}.picker-results{min-width:0}.picker-input button{min-width:44px;min-height:44px}}
|
||
|
||
/* One menu at a time: content picker on the left, ordered structure on the right. */
|
||
.menu-slots{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}.menu-slots a{padding:10px 16px;border:1px solid var(--line);border-radius:8px;text-decoration:none;background:white}.menu-slots a[aria-current=page]{background:var(--shell);color:white;border-color:var(--shell)}
|
||
.menu-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.menu-add{display:grid;gap:16px;position:sticky;top:20px}.menu-add .card{margin:0}.menu-add .content-picker{margin-bottom:16px}.menu-structure{min-width:0}.menu-items{list-style:none;padding:0;margin:24px 0;display:grid;gap:12px}.menu-entry{border:1px solid var(--line);border-radius:9px;background:#fff;min-width:0}.menu-entry.menu-child{margin-left:32px;border-left:3px solid #8eaa99}.menu-entry summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;cursor:pointer}.menu-entry summary::after{content:'⌄';font-size:18px}.menu-entry-title{overflow-wrap:anywhere;flex:1}.menu-entry-fields{padding:0 16px 16px}.menu-entry-fields .content-picker{margin-top:14px}.menu-entry-actions{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px;border-top:1px solid var(--line);background:#f7f9f6;border-radius:0 0 9px 9px}.menu-entry-actions button{min-height:36px}.menu-entry-actions .danger-text{margin-left:auto}.menu-save{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}.menu-save [role=status]{font-size:13px;color:var(--muted)}
|
||
@media(max-width:1100px){.menu-workspace{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}}
|
||
@media(max-width:850px){.menu-workspace{grid-template-columns:1fr}.menu-add{position:static;grid-template-columns:1fr 1fr}.menu-add>p{grid-column:1/-1}}
|
||
@media(max-width:560px){.menu-add{grid-template-columns:1fr}.menu-entry.menu-child{margin-left:18px}.menu-entry-actions button{min-height:44px}.menu-slots a{flex:1;min-width:130px}}
|
||
|
||
/* Field definitions stay editable on narrow screens instead of stretching the entire page. */
|
||
.form-def{min-width:0;margin:0}
|
||
|
||
.version-update{display:inline-block;padding:4px 8px;border:1px solid #679576;border-radius:6px;color:#17452c;background:#e8f4e8;font-size:11px;font-weight:700;text-decoration:none}
|
||
|
||
.menu-entry summary::after{content:none}.menu-entry summary{list-style:none;gap:10px;padding:10px 14px}.menu-entry summary::-webkit-details-marker{display:none}.menu-drag-handle{display:grid;place-items:center;width:36px;min-width:36px;height:40px;padding:0;border:0;background:transparent;color:#576e60;cursor:grab;touch-action:none}.menu-drag-handle:active{cursor:grabbing}.menu-chevron{flex:none;color:#52665a;transition:transform .15s}.menu-entry details[open] .menu-chevron{transform:rotate(180deg)}.menu-entry-kind{font-size:11px;border:1px solid #dae4dc;border-radius:5px;padding:3px 6px;color:#506659;background:#f7f9f6;white-space:nowrap}.menu-entry-title{display:flex;align-items:center;gap:8px;min-width:0}.menu-entry-title svg{width:19px;height:19px;flex:none}.menu-dragging{opacity:.6;box-shadow:0 4px 16px #203b3426;border-color:#2c6b4f}.menu-icon-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}@media(max-width:560px){.menu-entry summary{padding:8px}.menu-entry-kind{display:none}.menu-icon-fields{grid-template-columns:1fr}}
|
||
|
||
/* ---- the form editor: a card per field, the look, and a preview beside it -------------- */
|
||
|
||
.form-screens { display: grid; gap: 20px }
|
||
.form-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 20px 36px; padding-top: 2px }
|
||
.form-editor-main { min-width: 0 }
|
||
.form-part { margin: 26px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--muted) }
|
||
.form-editor-main > .form-part:first-child, .form-editor-preview .form-part, .type-preview-column .form-part { margin-top: 14px }
|
||
.form-fields-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px }
|
||
.form-fields-head .form-part { margin: 0 }
|
||
.card-body .form-fields-head .secondary, .card-body .list-actions .secondary { margin: 0; min-height: 36px; padding: 6px 12px; font-size: 12px }
|
||
.form-fields-head .secondary .nav-icon, .list-actions .secondary .nav-icon { width: 15px; height: 15px; color: var(--accent) }
|
||
.field-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px }
|
||
.field-card { position: relative; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8 }
|
||
.field-card.is-open { padding-bottom: 14px; background: #fff; box-shadow: 0 1px 6px #203b3414 }
|
||
.field-card-new { border-style: dashed; background: var(--paper) }
|
||
.field-card-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) 170px auto auto 34px; gap: 0 10px; align-items: center }
|
||
.field-card-head input, .field-card-head select { min-height: 36px }
|
||
.field-card-index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e4ebe2; color: var(--accent); font-size: 12px; font-weight: 700 }
|
||
.field-card label { margin-top: 12px }
|
||
.field-card-head .field-card-required { margin: 0; font-size: 13px; white-space: nowrap }
|
||
.field-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--accent); font-size: 12px; font-weight: 650; white-space: nowrap }
|
||
.field-toggle:hover { background: #eef3ec }
|
||
.field-toggle .form-chevron { transition: transform .15s }
|
||
.field-card.is-open .field-toggle .form-chevron { transform: rotate(180deg) }
|
||
.field-card-meta { margin: 4px 0 0 34px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
||
.field-card-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; padding-left: 34px }
|
||
.field-card-body[hidden] { display: none }
|
||
.field-translation { grid-column: 1 / -1; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line) }
|
||
.field-translation summary { cursor: pointer; font-size: 13px; font-weight: 650 }
|
||
/* Ein Formular je zuklappbarer Karte, Abschnitte darin ebenfalls zuklappbar. */
|
||
.form-card > .form-card-summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none }
|
||
details.form-card > summary.form-card-summary::before, details.form-card[open] > summary.form-card-summary::before { content: none }
|
||
.form-card > .form-card-summary::-webkit-details-marker, .form-section > summary::-webkit-details-marker { display: none }
|
||
.form-card-name { font-size: 16px; font-weight: 700 }
|
||
.form-card > .form-card-summary { cursor: default; border-bottom: 1px solid var(--line) }
|
||
.form-list-name { margin: 0; font-size: 15px; font-weight: 650 }
|
||
.form-list-name a { text-decoration: none }
|
||
.form-list-name a:hover { text-decoration: underline }
|
||
.form-list .row { align-items: center }
|
||
.back-to-list { display: inline-block; margin-top: 4px }
|
||
.form-card-facts { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
||
.form-chevron { flex: none; color: #52665a; transition: transform .15s }
|
||
.form-card[open] > .form-card-summary { border-bottom: 1px solid var(--line) }
|
||
.form-card[open] > .form-card-summary > .form-chevron, .form-section[open] > summary > .form-chevron { transform: rotate(180deg) }
|
||
.form-section { border-bottom: 1px solid var(--line); padding-bottom: 12px }
|
||
.form-section > summary { display: flex; align-items: center; gap: 10px; padding: 14px 0 2px; cursor: pointer; list-style: none }
|
||
.form-section > summary .form-part { margin: 0 }
|
||
.form-section-hint { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
||
.field-card-body .field-help { margin-top: 5px }
|
||
.field-card-flags { align-self: end; padding-bottom: 11px }
|
||
.field-card-flags .check-label { margin: 12px 0 0 }
|
||
.field-remove { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 2px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted) }
|
||
.field-remove .nav-icon { width: 17px; height: 17px; color: inherit }
|
||
.field-remove:hover { background: #fff0eb; border-color: #e2b2a7; color: var(--danger) }
|
||
/* Die Vorschau bleibt beim Blaettern durch lange Feldlisten im Bild. */
|
||
.form-editor-preview { min-width: 0; position: sticky; top: 16px; align-self: start }
|
||
/* Die Vorschau uebernimmt Text- und Seitenfarbe der Website per Skript; die Felder lesen dieselben
|
||
Variablen wie auf der Website selbst. */
|
||
.form-preview { display: grid; gap: 16px; margin-top: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.5 }
|
||
.form-preview-field { display: grid; gap: 6px }
|
||
.form-preview-label { font-weight: 600 }
|
||
.form-preview-input { display: block; min-height: 40px; padding: 9px 12px; border: 1px solid var(--form-border, currentColor); border-radius: 8px; background: var(--form-bg, #fff); color: inherit }
|
||
.form-preview-select { display: flex; align-items: center; justify-content: space-between }
|
||
.form-preview-select::after { content: '⌄'; font-size: 16px; line-height: 1 }
|
||
.form-preview-area { min-height: 92px }
|
||
.form-preview-check { display: flex; align-items: flex-start; gap: 9px }
|
||
.form-preview-box { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--form-border, currentColor); border-radius: 4px; background: var(--form-bg, #fff) }
|
||
.form-preview-help { font-size: 12px }
|
||
.form-preview-step { padding-top: 6px; border-top: 1px solid var(--line); display: grid; gap: 2px }
|
||
.form-preview-step-title { font-weight: 700; font-size: 15px }
|
||
.form-preview-radio { border-radius: 50% }
|
||
.form-preview-number { display: flex; align-items: center; justify-content: flex-end; opacity: .7 }
|
||
.form-preview-conditional { padding-left: 10px; border-left: 2px dashed var(--line) }
|
||
.field-card-number { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px }
|
||
.field-card-condition { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px }
|
||
.field-card-condition .field-help { grid-column: 1 / -1 }
|
||
.field-card-images { grid-column: 1 / -1 }
|
||
.field-image-pickers { display: grid; gap: 6px; margin-top: 6px }
|
||
.field-image-picker { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13px }
|
||
.field-image-picker-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #eef1eb }
|
||
.field-image-picker-thumb[hidden] { display: block; visibility: hidden }
|
||
.field-image-picker-name { color: var(--muted); overflow-wrap: anywhere; min-width: 0 }
|
||
@media (max-width: 767px) { .field-image-picker { grid-template-columns: 64px minmax(0, 1fr); } .field-image-picker-option { grid-column: 1 / -1; font-weight: 650 } }
|
||
.field-condition-picker { display: grid; gap: 6px; grid-column: 1 / -1 }
|
||
.field-condition-values { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px }
|
||
.field-condition-values legend { font-size: 13px; font-weight: 650; margin-bottom: 4px; padding: 0 }
|
||
.form-preview-empty { margin: 0; font-size: 13px }
|
||
.form-preview + .contrast-note { margin-top: 10px }
|
||
.form-preview .cms-button { justify-self: start; pointer-events: none }
|
||
.form-editor-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
|
||
.form-editor-foot .muted { font-size: 12px }
|
||
.form-look .color-control { margin-top: 0 }
|
||
@media (max-width: 1100px) { .form-editor { grid-template-columns: 1fr } }
|
||
@media (max-width: 700px) {
|
||
.field-card-head { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px }
|
||
.field-card-title { grid-column: 2 / 4; padding-right: 36px }
|
||
.field-card-type { grid-column: 2 }
|
||
.field-card-head .field-card-required { grid-column: 3 }
|
||
.field-toggle { grid-column: 2 }
|
||
.field-card-head .field-remove { position: absolute; top: 8px; right: 8px }
|
||
.field-card-meta { margin-left: 0 }
|
||
.field-card-body { padding-left: 0 }
|
||
.form-card-facts { white-space: normal }
|
||
.form-card > .form-card-summary { flex-wrap: wrap; padding: 14px 16px }
|
||
}
|
||
|
||
/* ---- design: palette cards, ready-made palettes, font cards, typography preview -------- */
|
||
|
||
.theme-form > .card { margin: 0 }
|
||
.palette-presets { margin-top: 14px }
|
||
.palette-presets-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600 }
|
||
.palette-preset-row { display: flex; flex-wrap: wrap; gap: 8px }
|
||
.palette-preset { display: grid; gap: 6px; justify-items: center; padding: 8px 10px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 600 }
|
||
.palette-preset svg { display: block; width: 90px; height: 24px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px #203b3426 }
|
||
.palette-preset:hover { border-color: var(--accent); background: #f5f8f1 }
|
||
.palette-presets .field-help { margin-top: 10px }
|
||
.swatch-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px }
|
||
.swatch-card { position: relative; display: grid; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden }
|
||
.swatch-card-new { border-style: dashed }
|
||
/* Der Farbwaehler ist die Flaeche selbst: nichts liegt dazwischen. */
|
||
.swatch-well { position: relative; display: grid; margin: 0; cursor: pointer }
|
||
.swatch-input { display: block; width: 100%; height: 76px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer }
|
||
.swatch-input::-webkit-color-swatch-wrapper { padding: 0 }
|
||
.swatch-input::-webkit-color-swatch { border: 0; border-radius: 0 }
|
||
.swatch-input::-moz-color-swatch { border: 0 }
|
||
.swatch-hex { position: absolute; left: 10px; bottom: 8px; padding: 2px 7px; border-radius: 5px; background: #ffffffe6; color: var(--ink); font-size: 11px; box-shadow: 0 1px 2px #0000001f }
|
||
.swatch-fields { display: grid; padding: 0 12px 12px }
|
||
.swatch-fields label { margin: 10px 0 4px; font-size: 11px }
|
||
.swatch-fields input { min-height: 36px; padding: 6px 10px; font-size: 13px }
|
||
.swatch-card .field-remove { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; background: #ffffffe6 }
|
||
.list-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px }
|
||
.list-actions .field-help { flex: 1 1 300px; margin: 0 }
|
||
.font-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px }
|
||
.font-card { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden }
|
||
.font-card-new { border-style: dashed }
|
||
/* Die Probe steht in der Schrift selbst - das Skript setzt die Familie, die Datei liegt auf dem Server. */
|
||
.font-sample { display: flex; align-items: center; gap: 18px; min-height: 88px; padding: 18px 60px 18px 22px; background: #fafbf8; border-bottom: 1px solid var(--line) }
|
||
.font-sample-big { flex: none; font-size: 44px; line-height: 1; font-weight: 500 }
|
||
.font-sample-line { display: grid; gap: 6px; min-width: 0 }
|
||
.font-sample-text { font-size: 19px; line-height: 1.3; overflow-wrap: anywhere }
|
||
.font-sample-weights { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted) }
|
||
.font-weight-100 { font-weight: 100 } .font-weight-200 { font-weight: 200 } .font-weight-300 { font-weight: 300 }
|
||
.font-weight-400 { font-weight: 400 } .font-weight-500 { font-weight: 500 } .font-weight-600 { font-weight: 600 }
|
||
.font-weight-700 { font-weight: 700 } .font-weight-800 { font-weight: 800 } .font-weight-900 { font-weight: 900 }
|
||
.font-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 16px; padding: 0 22px 18px }
|
||
.font-fields label { margin-top: 12px }
|
||
.font-weights { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; padding: 0; border: 0 }
|
||
.font-weights legend { float: left; margin-right: 8px; padding: 0; font-size: 12px; font-weight: 600 }
|
||
.chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); font-size: 12px; font-weight: 500; cursor: pointer }
|
||
.chip input { width: 14px; min-height: 14px; margin: 0 }
|
||
.chip:has(input:checked) { border-color: var(--accent); background: #edf4e8; color: #22553e }
|
||
.font-card .field-remove { position: absolute; top: 10px; right: 10px }
|
||
.type-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px 36px }
|
||
.type-fields { min-width: 0 }
|
||
.type-colors .color-control { margin-top: 0 }
|
||
.type-preview-column { min-width: 0 }
|
||
.type-preview { margin-top: 12px; padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden }
|
||
.type-preview p { margin: 0 }
|
||
.type-preview .type-preview-h1 { margin-bottom: 10px; font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px }
|
||
.type-preview .type-preview-h2 { margin-bottom: 14px; font-size: 26px; font-weight: 600; line-height: 1.2 }
|
||
.type-preview-p { font-size: 17px; line-height: 1.6 }
|
||
.type-preview-link { text-decoration: underline; text-underline-offset: 3px }
|
||
.theme-save { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
|
||
.theme-save .muted { font-size: 12px }
|
||
.theme-form .button-defaults { margin: 0; background: var(--paper) }
|
||
@media (max-width: 1000px) { .type-layout { grid-template-columns: 1fr } }
|
||
/* Ein Dokument in der Mediathek: drei Buchstaben statt eines Zeichens. */
|
||
.row-icon-text { font-size: 11px; font-weight: 700; letter-spacing: .04em }
|
||
/* Ein Bild der Mediathek als Formularfeld: Vorschau, Name, Wählen und Entfernen. */
|
||
.media-field-label { display: block; font-weight: 650; font-size: 13px; margin-bottom: 6px }
|
||
.media-field { min-width: 0 }
|
||
.media-field-current { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #fff }
|
||
.media-field-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #eef1eb }
|
||
.media-field-name { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; min-width: 0 }
|
||
.media-field-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px }
|
||
/* Ein Linkfeld: die Adresse zum Tippen, darunter Seite oder PDF zum Wählen. */
|
||
.link-field-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px }
|
||
.link-field-actions .text-button { padding: 4px 0; font-size: 13px }
|
||
/* Vorhandene Kategorien und Schlagwörter zum Anklicken. */
|
||
.term-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
|
||
.term-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer }
|
||
.term-chip[aria-pressed="true"] { background: #edf4dc; border-color: var(--accent); font-weight: 650 }
|
||
.term-chip[aria-pressed="true"]::before { content: '✓ '; }
|
||
/* Der Ziehknopf eines Menüeintrags liegt über der linken Ecke der Zusammenfassung, gehört aber
|
||
nicht zu ihr - sonst stünde ein Knopf in einem Knopf. */
|
||
.menu-entry { position: relative }
|
||
.menu-entry > .menu-drag-handle { position: absolute; left: 14px; top: 10px; z-index: 1 }
|
||
.menu-entry summary { padding-left: 58px; min-height: 60px }
|
||
@media (max-width: 560px) { .menu-entry > .menu-drag-handle { left: 8px; top: 8px } .menu-entry summary { padding-left: 50px; min-height: 56px } }
|
||
/* Texte der Website in weiteren Sprachen (Einstellungen → Sprachen, ADR 111). */
|
||
.language-texts { margin-top: 24px; padding-top: 16px; border-top: 1px solid #dfe5e1 }
|
||
.language-texts h3 { margin: 0 0 6px; font-size: 15px }
|
||
.language-text-group { display: grid; gap: 6px; border: 1px solid #dfe5e1; border-radius: 8px; padding: 12px 16px; margin: 12px 0; min-width: 0 }
|
||
.language-text-group legend { font-weight: 600; padding: 0 4px }
|
||
/* ---- Update mit einem Klick (ADR 113), nach dem Vorbild von reiseSoft --------------------- */
|
||
.update-wait, .update-aktuell { display: flex; align-items: center; gap: 10px; margin: 0 0 12px }
|
||
.update-spinner { width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: update-dreh .8s linear infinite }
|
||
@keyframes update-dreh { to { transform: rotate(360deg) } }
|
||
@media (prefers-reduced-motion: reduce) { .update-spinner { animation-duration: 2.4s } }
|
||
.update-neu { border: 1px solid #b9d7c2; background: #f1f8f2; border-radius: 10px; padding: 16px 18px; margin: 0 0 14px; display: grid; gap: 6px; justify-items: start }
|
||
.update-neu h3 { margin: 0; font-size: 17px }
|
||
.update-neu .muted { margin: 0 }
|
||
.update-neu-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1f6b45 }
|
||
.update-notizen { max-height: 220px; overflow: auto; width: 100%; font-size: 13px; line-height: 1.55; color: #33413a; background: #fff; border: 1px solid #dfe5e1; border-radius: 8px; padding: 10px 12px; margin: 6px 0 10px }
|
||
.update-lauf { background: #1f2d27; color: #e9efe9; border-radius: 12px; padding: 18px 20px; margin: 0 0 14px; display: grid; gap: 12px; justify-items: start }
|
||
.update-lauf-kopf { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 650 }
|
||
.update-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100% }
|
||
.update-schritt { display: flex; align-items: center; gap: 10px; font-size: 14px }
|
||
.update-marke { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid #5e6f66; font-size: 12px; font-weight: 700 }
|
||
.update-schritt.is-erledigt .update-marke { background: #3fa46a; border-color: #3fa46a; color: #fff }
|
||
.update-schritt.is-aktiv .update-marke { border-color: #f2c14e; box-shadow: 0 0 0 4px #f2c14e33; animation: update-puls 1.2s ease-in-out infinite }
|
||
.update-schritt.is-offen { color: #8f9e96 }
|
||
.update-schritt.is-fehler .update-marke { background: #d4553f; border-color: #d4553f; color: #fff }
|
||
@keyframes update-puls { 50% { box-shadow: 0 0 0 8px #f2c14e11 } }
|
||
@media (prefers-reduced-motion: reduce) { .update-schritt.is-aktiv .update-marke { animation: none } }
|
||
.update-meldung { margin: 0; font-size: 13px; color: #c9d4cd }
|
||
.update-meldung.is-ok { color: #9fdcb5 }
|
||
.update-meldung.is-fehler { color: #ffb4a6 }
|
||
.update-lauf .secondary { background: transparent; color: #fff; border-color: #ffffff66 }
|
||
.update-letztes { margin: 0 0 12px }
|
||
.update-manual { margin-top: 6px }
|
||
.update-dialog { max-width: 460px; border: 0; border-radius: 12px; padding: 24px 26px; box-shadow: 0 18px 48px #0003 }
|
||
.update-dialog::backdrop { background: #1f2d2766 }
|
||
.update-dialog h2 { margin: 0 0 10px; font-size: 18px }
|
||
.update-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px }
|