/* ════════════════════════════════════════════════════════════════════════════ AGP CMS — central stylesheet Covers all pages: login.php, index.php (Bilder), albums.php (Alben). ────────────────────────────────────────────────────────────────────────── 1. Tokens & reset 2. CMS navigation 3. Buttons 4. List view (Alben overview + FAB) 5. Edit view (album form) 6. Genre tabs (Bilder) 7. Image list (shared: Bilder + album images) 8. Album rows (Alben overview) 9. Genre pills (album form) 10. Toast 11. Login 12. Responsive ════════════════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens & reset ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { color-scheme: light; /* Colour */ --bg: #ffffff; --surface: #fafafa; --border: #e2e2e2; --text: #1a1917; --muted: #9a9690; --accent: #1a1917; --danger: #c0392b; /* Abgeleitete Rollen (Port aus ../agp/agcms). Diese Werte standen vorher hart im Regelwerk verstreut (#fff, rgba(255,255,255,…), #f0ede8 …) — im Dunkelmodus wären das weiße Flächen mitten in einer dunklen Oberfläche gewesen. */ --on-accent: #ffffff; /* Text/Icon AUF --accent bzw. --danger */ --fill-subtle: rgba(0, 0, 0, 0.06); /* zarte Flächen: Ghost-Buttons, Handles */ --bar-bg: rgba(255, 255, 255, 0.75);/* klebrige Leisten mit backdrop-filter */ --chip-bg: rgba(255, 255, 255, 0.85);/* Bedienelemente, die auf Fotos liegen */ --chip-bg-hover: #ffffff; --on-accent-dim: rgba(255, 255, 255, 0.25); --badge-bg: #f0ede8; /* Status-Pillen */ --badge-danger-bg: #fbe9e7; --badge-ok-bg: #e7f0e9; /* € = Verkaufsgalerie */ --badge-ok-text: #2e6b45; --shadow: 0 2px 12px rgba(0, 0, 0, 0.25); /* Typography */ --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* Fluid type scale — xs/s fixed; the rest scale from ~390px to 1280px */ --text-xs: 12px; --text-s: 13px; --text-base: clamp(16px, calc(0.9rem + 0.375vw), 19px); --text-m: clamp(18px, calc(1.05rem + 0.5vw), 22px); --text-l: clamp(19px, calc(1.2rem + 0.3vw), 22px); --text-xl: clamp(26px, calc(1.5rem + 1vw), 34px); --text-xxl: clamp(34px, calc(1.8rem + 1.5vw), 48px); /* Shape */ --radius: 20px; --radius-pill: 999px; } /* ── Dunkelmodus (Port aus ../agp/agcms) ────────────────────────────────────── Umgeschaltet über .dark auf , gesetzt vom blockierenden Skript in _header.php (bzw. overview.php/login.php) VOR dem ersten Paint — sonst blitzt die helle Oberfläche auf. Deshalb hier bewusst KEINE @media-Abfrage: die Systemvorliebe wertet das Skript aus, damit es nur eine Quelle der Wahrheit gibt. --accent ist im Hellen die Textfarbe und dient überall als "starke Fläche" (Buttons, aktive Pillen, Toasts). Im Dunklen dreht sich das Paar um: helle Fläche, dunkle Schrift über --on-accent. */ .dark { color-scheme: dark; --bg: #161613; --surface: #201f1c; --border: #35332e; --text: #ece9e3; --muted: #8d8880; --accent: #ece9e3; --danger: #e8705f; /* aufgehellt — #c0392b hat auf Dunkel zu wenig Kontrast */ --on-accent: #161613; --fill-subtle: rgba(255, 255, 255, 0.06); --bar-bg: rgba(22, 22, 19, 0.75); --chip-bg: rgba(22, 22, 19, 0.82); --chip-bg-hover: #161613; --on-accent-dim: rgba(22, 22, 19, 0.28); --badge-bg: rgba(255, 255, 255, 0.09); --badge-danger-bg: rgba(232, 112, 95, 0.18); --badge-ok-bg: rgba(126, 196, 148, 0.18); --badge-ok-text: #8fd0a6; --shadow: 0 2px 16px rgba(0, 0, 0, 0.6); } html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--text-base); line-height: 1.6; } /* ── 2. CMS navigation ──────────────────────────────────────────────────────── */ .cms-nav { margin-bottom: 28px; border-bottom: 1px solid var(--border); } .cms-mainnav { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; max-width: 960px; margin: 0 auto; } .cms-mainnav-links { display: flex; align-items: center; gap: 24px; } .cms-mainnav-right { display: flex; align-items: center; gap: 16px; } .cms-main-link { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s; } .cms-main-link:hover { color: var(--text); } .cms-main-link.active { color: var(--text); font-weight: 700; } .cms-exclude, .cms-logout { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); text-decoration: none; transition: color .15s; } .cms-exclude:hover, .cms-logout:hover { color: var(--text); } /* Hell/Dunkel-Umschalter (Port aus ../agp/agcms). Icon als Maske, damit es die Textfarbe erbt: Mond im Hellen ("es wird dunkel"), Sonne im Dunklen. */ .cms-theme { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); transition: color .15s; } .cms-theme:hover { color: var(--text); } .cms-theme-icon { width: 14px; height: 14px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E"); } .dark .cms-theme-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cg%3E%3Crect x='11.2' y='0.6' width='1.6' height='4' rx='.8'/%3E%3Crect x='11.2' y='19.4' width='1.6' height='4' rx='.8'/%3E%3Crect x='0.6' y='11.2' width='4' height='1.6' rx='.8'/%3E%3Crect x='19.4' y='11.2' width='4' height='1.6' rx='.8'/%3E%3Crect x='3.4' y='4.5' width='1.6' height='4' rx='.8' transform='rotate(-45 4.2 6.5)'/%3E%3Crect x='19' y='15.5' width='1.6' height='4' rx='.8' transform='rotate(-45 19.8 17.5)'/%3E%3Crect x='4.2' y='15.5' width='1.6' height='4' rx='.8' transform='rotate(45 5 17.5)'/%3E%3Crect x='19.8' y='4.5' width='1.6' height='4' rx='.8' transform='rotate(45 20.6 6.5)'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cg%3E%3Crect x='11.2' y='0.6' width='1.6' height='4' rx='.8'/%3E%3Crect x='11.2' y='19.4' width='1.6' height='4' rx='.8'/%3E%3Crect x='0.6' y='11.2' width='4' height='1.6' rx='.8'/%3E%3Crect x='19.4' y='11.2' width='4' height='1.6' rx='.8'/%3E%3Crect x='3.4' y='4.5' width='1.6' height='4' rx='.8' transform='rotate(-45 4.2 6.5)'/%3E%3Crect x='19' y='15.5' width='1.6' height='4' rx='.8' transform='rotate(-45 19.8 17.5)'/%3E%3Crect x='4.2' y='15.5' width='1.6' height='4' rx='.8' transform='rotate(45 5 17.5)'/%3E%3Crect x='19.8' y='4.5' width='1.6' height='4' rx='.8' transform='rotate(45 20.6 6.5)'/%3E%3C/g%3E%3C/svg%3E"); } @media (max-width: 599px) { .cms-theme-label { display: none; } } /* Sub-nav — fixed height so the nav block keeps a constant position */ .cms-subnav { display: flex; align-items: center; height: 34px; max-width: 960px; margin: 0 auto; padding: 0 20px; } .cms-sub-link { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); text-decoration: none; transition: color .15s; margin-right: 18px; padding-bottom: 8px; border-bottom: 2px solid transparent; } .cms-sub-link:last-child { margin-right: 0; } .cms-sub-link:hover { color: var(--text); } .cms-sub-link.active { color: var(--text); border-bottom-color: var(--text); } /* ── 3. Buttons ─────────────────────────────────────────────────────────────── */ .btn { padding: 7px 16px; border: none; cursor: pointer; font-family: var(--sans); font-size: var(--text-m); border-radius: var(--radius-pill); transition: opacity 0.15s; white-space: nowrap; } .btn:hover { opacity: 0.75; } .btn-ghost { background: var(--fill-subtle); color: var(--text); text-decoration: none; line-height: normal; } .btn-danger { background: var(--fill-subtle); color: var(--text); display: inline-flex; align-items: center; gap: 6px; } .btn-danger:hover { background: rgba(192, 57, 43, 0.1); color: var(--danger); opacity: 1; } .icon-trash { display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-image: url('../img/trash-2.svg'); mask-image: url('../img/trash-2.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; flex-shrink: 0; } /* Auge auf/zu für sichtbare bzw. ausgeblendete Bilder. Wie .icon-trash als Maske, damit das Icon die Textfarbe des Buttons erbt (weiß auf rot, wenn ausgeblendet). Quelle sind die geteilten Engine-Assets — die Pfade gehen bewusst über /engine, nicht über eine Kopie in cms/assets: auf dem ams-Host wie lokal landet ../../../engine/assets/img/ auf demselben Docroot. */ .icon-eye, .icon-eye-off { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; flex-shrink: 0; } .icon-eye { -webkit-mask-image: url('../../../engine/assets/img/eye.svg'); mask-image: url('../../../engine/assets/img/eye.svg'); } .icon-eye-off { -webkit-mask-image: url('../../../engine/assets/img/eye-off.svg'); mask-image: url('../../../engine/assets/img/eye-off.svg'); } /* ── 4. List view (Alben overview) ──────────────────────────────────────────── */ #listView { max-width: 960px; margin: 0 auto; padding: 20px 20px 96px; } .empty-msg { font-family: var(--mono); font-size: var(--text-s); color: var(--muted); padding: 24px 0; } /* Floating action button ("+ Neues Album") */ .fab { position: fixed; bottom: 24px; right: 24px; height: 48px; padding: 0 2em; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); border: none; font-family: var(--sans); font-size: var(--text-l); font-weight: 500; cursor: pointer; display: none; align-items: center; gap: 8px; box-shadow: var(--shadow); transition: all 0.15s; z-index: 50; white-space: nowrap; } .fab:hover { opacity: 0.8; } .fab.visible { display: flex; } /* Während des Speicherns ist der Knopf gesperrt — sichtbar machen, sonst sieht der Klick nach „nichts passiert“ aus. */ .fab:disabled { opacity: .45; cursor: progress; } /* ── 5. Edit view (album form) ──────────────────────────────────────────────── */ #editView { display: none; flex-direction: column; min-height: 100vh; } #editView.active { display: flex; } .edit-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 16px 16px; background: var(--bar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .spacer { flex: 1; } .edit-body { flex: 1; padding: 24px 16px 96px; max-width: 960px; width: 100%; margin: 0 auto; } .meta-fields { display: flex; flex-direction: column; gap: 30px; margin-bottom: 24px; } .field-title input { width: 100%; font-family: var(--sans); font-size: var(--text-l); font-weight: 600; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); padding: 4px 0; outline: none; line-height: 1.3; } .field-title input::placeholder { color: var(--border); } .field-title input:focus { border-bottom-color: var(--accent); } .field-description { display: flex; flex-direction: column; gap: 4px; } .field-description label { font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .field-description textarea { font-family: var(--mono); font-size: var(--text-s); border: 1px solid var(--border); background: transparent; color: var(--text); padding: 6px 8px; outline: none; border-radius: var(--radius); resize: vertical; line-height: 1.5; } .field-description textarea:focus { border-color: var(--accent); } /* Album-Slug: reine Anzeige, geändert wird bewusst über den Knopf. */ .field-slug .slug-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .field-slug code { font-family: var(--mono); font-size: var(--text-s); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 12px; } /* Einzeiliges Feld im selben Gewand wie die Textarea (z. B. Verkaufsgalerie-Link). Das Auswahlfeld (Sichtbarkeit) teilt sich die Regel und bekommt nur die Breite vom Inhalt statt der vollen Spalte. */ .field-description input, .field-description select { font-family: var(--mono); font-size: var(--text-s); border: 1px solid var(--border); background: transparent; color: var(--text); padding: 6px 8px; outline: none; border-radius: var(--radius); line-height: 1.5; } .field-description input:focus, .field-description select:focus { border-color: var(--accent); } .field-description input::placeholder { color: var(--border); } .field-description select { cursor: pointer; align-self: flex-start; } .field-label { font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; padding-top: 1rem; display: block; } /* Visibility row: checkbox + preview-link button */ .field-visibility { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .field-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--text-m); color: var(--text); user-select: none; } .field-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } /* Bilder header: label on the left, "sort by capture time" button on the right */ .img-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 1rem; } .img-head .field-label { margin-bottom: 0; padding-top: 0; } /* ── 6. Genre tabs (Bilder) ─────────────────────────────────────────────────── */ .genre-pane { display: none; } .genre-pane.active { display: block; } .pane-wrap { max-width: 960px; margin: 0 auto; padding: 24px 20px 80px; } /* ── 7. Image list (shared: Bilder + album images) ──────────────────────────── */ .upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 70px 24px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; color: var(--muted); font-family: var(--mono); font-size: var(--text-s); text-transform: uppercase; letter-spacing: 0.06em; user-select: none; margin-block: 16px; background: var(--fill-subtle); } /* Kein .drag-active mehr: das Drop-Ziel ist die ganze Seite (.drop-overlay). */ .upload-zone:hover { border-color: var(--accent); background: var(--surface); color: var(--text); } /* Laufender Upload: Zone gesperrt — der Fortschritt selbst steht im Toast. */ .upload-zone.is-uploading { cursor: default; border-style: solid; border-color: var(--accent); background: var(--surface); color: var(--text); } /* Ganzseitiges Drop-Ziel. pointer-events:none ist Absicht: der Overlay darf keine Drag-Events schlucken, sonst feuert beim Einblenden sofort ein dragleave (Overlay schiebt sich unter den Zeiger) und er flackert. Gedroppt wird auf document, nicht hier. */ .drop-overlay { position: fixed; inset: 0; z-index: 200; /* über dem Toast (100) */ display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.15s; } .drop-overlay.show { opacity: 1; } .drop-overlay span { border: 2px dashed rgba(255, 255, 255, 0.8); border-radius: var(--radius); padding: 48px 64px; color: #fff; font-family: var(--mono); font-size: var(--text-s); text-transform: uppercase; letter-spacing: 0.06em; } .img-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; } .img-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); transition: border-color 0.15s, background 0.15s; } .img-item.drag-over { border-color: var(--accent); background: var(--surface); } .img-item.dragging { opacity: 0.4; } .drag-handle { cursor: grab; color: var(--muted); font-size: 18px; line-height: 1; user-select: none; flex-shrink: 0; padding: 2px 4px; } .drag-handle:active { cursor: grabbing; } .img-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface); } .img-name { flex: 1; font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); word-break: break-all; min-width: 0; } .img-alt { font-family: var(--mono); font-size: var(--text-xs); border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text); padding: 4px 10px; outline: none; width: 200px; transition: border-color 0.15s; flex-shrink: 0; } .img-alt:focus { border-color: var(--accent); } .img-alt::placeholder { color: var(--muted); } /* ── 7b. Album image grid (album form) ─────────────────────────────────────── 3-column, frontend-like preview: thumbs in their original proportions so the album page is easy to compose. Reorder / alt / delete behave as before. */ .img-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 4px; /* masonry unit row — JS sets each tile's span */ column-gap: 14px; margin-bottom: 24px; } /* Tiles reuse .img-item (for the drag JS) but drop the row chrome. Tile height equals the image height (alt is an absolute overlay), so the masonry packs exactly like the public gallery. padding-bottom is the gutter (in the span). */ .img-grid .img-item { position: relative; padding: 0 0 14px; border: none; background: transparent; } .img-grid .img-item.dragging { opacity: 0.4; } .img-grid .img-item.drag-over .img-fig { outline: 2px solid var(--accent); outline-offset: 2px; } .img-fig { position: relative; line-height: 0; cursor: grab; } .img-fig:active { cursor: grabbing; } /* Proportional thumb — natural aspect ratio, not square. */ .img-grid .img-thumb { width: 100%; height: auto; object-fit: fill; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); display: block; } /* Drag handle + delete float over the image corners. */ .img-grid .drag-handle { position: absolute; top: 6px; left: 6px; padding: 0 6px; background: var(--chip-bg); border-radius: 6px; color: var(--text); font-size: 16px; line-height: 1.4; } .img-grid .img-makefirst { position: absolute; top: 34px; left: 6px; padding: 0 6px; background: var(--chip-bg); border-radius: 6px; font-size: 14px; line-height: 1.6; color: var(--text); border: none; cursor: pointer; } .img-grid .img-makefirst:hover { background: var(--chip-bg-hover); } .img-grid .img-item:first-child .img-makefirst { display: none; } .img-grid .img-del { position: absolute; top: 6px; right: 6px; padding: 6px; background: var(--chip-bg); border-radius: 8px; } .img-grid .img-del:hover { background: var(--chip-bg-hover); } /* "Big" toggle — marks a photo for maximum size in the home free layout. */ .img-grid .img-big { position: absolute; top: 40px; right: 6px; padding: 2px 7px; background: var(--chip-bg); border: none; border-radius: 6px; color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.5; cursor: pointer; } .img-grid .img-big:hover { background: var(--chip-bg-hover); opacity: 1; } .img-grid .img-big.active { background: var(--accent); color: var(--on-accent); } .img-grid .img-big.active:hover { background: var(--accent); } /* Alt field overlays the bottom of the image so it adds no tile height. */ .img-grid .img-alt { position: absolute; left: 6px; right: 6px; bottom: 6px; width: auto; padding: 3px 10px; background: var(--chip-bg); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* First image = hero: pulled out of the grid, full width, centred — mirrors the album page where image 1 is the standalone hero above the gallery. */ .img-grid .img-item:first-child { grid-column: 1 / -1; padding-bottom: 24px; /* extra breathing room below the hero (folded into span) */ } .img-grid .img-item:first-child .img-fig { width: fit-content; max-width: 100%; margin: 0 auto; } .img-grid .img-item:first-child .img-thumb { width: auto; max-width: 100%; max-height: 35vh; } @media (max-width: 600px) { .img-grid { column-gap: 10px; } } /* ── 8. Album rows (Alben overview) ─────────────────────────────────────────── */ /* Genre filter bar above the album list (reuses .genre-pills styling) */ .album-filter { margin-bottom: 20px; } .album-list { display: flex; flex-direction: column; gap: 8px; } .album-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .album-row:hover { border-color: var(--accent); } .album-row.drag-over { border-color: var(--accent); background: var(--surface); } .album-row.dragging { opacity: 0.4; } .album-handle { cursor: grab; color: var(--muted); font-size: 18px; line-height: 1; user-select: none; } .album-handle:active { cursor: grabbing; } /* Filtered rows aren't draggable; keep the handle's slot to preserve alignment */ .album-handle.placeholder { visibility: hidden; cursor: default; } .album-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .album-thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 22px; } .album-info { flex: 1; min-width: 0; } .album-name { font-size: var(--text-l); font-weight: bold; line-height: 1.2; } .album-name.untitled { color: var(--muted); font-weight: normal; font-style: italic; } .album-sub { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .album-genre-badge { background: var(--badge-bg); color: var(--muted); border-radius: var(--radius-pill); padding: 1px 8px; text-transform: uppercase; letter-spacing: 0.05em; } .album-hidden-badge { background: var(--badge-danger-bg); color: var(--danger); border-radius: var(--radius-pill); padding: 1px 8px; text-transform: uppercase; letter-spacing: 0.05em; } /* € = Verkaufsgalerie hinterlegt. Rund und schmal, damit das eine Zeichen neben den Text-Pillen nicht wie ein abgeschnittenes Wort aussieht. */ .album-shop-badge { background: var(--badge-ok-bg); color: var(--badge-ok-text); border-radius: var(--radius-pill); padding: 1px 7px; font-weight: 700; cursor: help; } /* Album-Sichtbarkeit (.album.json -> visibility). "nur Admin" in der Akzentfarbe, "unsichtbar" in derselben Warnfarbe wie die versteckten Bilder. (Regel war vorher .album-xl-badge und wurde nirgends benutzt.) */ .album-vis-badge { background: var(--accent); color: var(--on-accent); border-radius: var(--radius-pill); padding: 1px 8px; letter-spacing: 0.05em; font-weight: 600; } .album-vis-badge.is-hidden { background: var(--badge-danger-bg); color: var(--danger); } /* "ansehen →" bei einem im Front-End ausgeblendeten Album: der Link bleibt (er zeigt ehrlich die 404-Seite), tritt aber optisch zurück. */ .btn.is-muted { opacity: 0.45; } /* ── 9. Genre pills (album form) ────────────────────────────────────────────── */ .genre-pills { display: flex; flex-wrap: wrap; gap: 8px; } .genre-pill { font-family: var(--sans); font-size: var(--text-m); border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--muted); padding: 6px 16px; cursor: pointer; transition: all 0.15s; text-transform: capitalize; } .genre-pill:hover { border-color: var(--accent); color: var(--text); } .genre-pill.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* ── 10. Toast ──────────────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); font-family: var(--sans); font-size: var(--text-base); background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: var(--radius-pill); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 100; white-space: nowrap; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.error { background: var(--danger); } /* Undo toast — carries a clickable action, so it must accept pointer events. */ .toast-undo { display: flex; align-items: center; gap: 16px; pointer-events: auto; } .toast-undo button { background: none; border: none; color: var(--on-accent); cursor: pointer; font-family: var(--sans); font-size: var(--text-base); font-weight: 700; text-decoration: underline; padding: 0; white-space: nowrap; } .toast-undo button:hover { opacity: 0.75; } /* Bild-Infos beim Hover über eine Kachel. `position: fixed` (top/left setzt das JS), damit der Tooltip nicht im Raster abgeschnitten wird; `pointer-events: none`, sonst läge er unter dem Zeiger und löste sofort das mouseleave der Kachel aus. */ .img-tip { position: fixed; top: 0; left: 0; z-index: 150; display: none; flex-direction: column; gap: 2px; max-width: 340px; padding: 9px 13px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: var(--text-xs); line-height: 1.5; white-space: nowrap; pointer-events: none; } .img-tip.show { display: flex; } .img-tip span { overflow: hidden; text-overflow: ellipsis; } .img-tip-name { font-weight: 700; } /* Fortschritts-Toast (Upload): bleibt stehen, bis der Lauf durch ist. Balken im .bar-track/.bar-fill-Vokabular, aber hell — der Toast ist dunkel. */ .toast-progress { display: flex; flex-direction: column; gap: 8px; min-width: 240px; } .toast-progress-text { font-variant-numeric: tabular-nums; } .toast-progress .bar-track { background: var(--on-accent-dim); } .toast-progress .bar-fill { background: var(--on-accent); width: 0; transition: width 0.15s linear; } /* ── 11. Login ──────────────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-box { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 24px; } .login-heading { font-size: var(--text-xxl); font-weight: bold; line-height: 1.1; } .login-form { display: flex; flex-direction: column; gap: 8px; } .login-form input[type="password"] { width: 100%; font-family: var(--sans); font-size: 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text); padding: 10px 16px; outline: none; transition: border-color 0.15s; } .login-form input[type="password"]:focus { border-color: var(--accent); } .login-submit { width: 100%; padding: 11px 16px; border: none; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-family: var(--sans); font-size: 16px; font-weight: 500; cursor: pointer; transition: opacity 0.15s; } .login-submit:hover { opacity: 0.8; } .login-error { font-size: 14px; color: var(--danger); } /* ── 12. Responsive ─────────────────────────────────────────────────────────── */ @media (min-width: 600px) { #listView { padding: 32px 24px 96px; } .edit-body { padding: 40px 32px 96px; } .edit-header { padding: 24px 24px; } .field-title { flex: 1; } } @media (max-width: 720px) { .cms-mainnav { padding: 8px 14px; flex-wrap: wrap; gap: 6px; } .cms-mainnav-links { gap: 16px; } .cms-main-link { font-size: 13px; } .cms-mainnav-right { gap: 10px; } .cms-exclude { display: none; } /* hide "Site →" on mobile */ .cms-subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; height: auto; padding: 0 14px 2px; gap: 4px; } .cms-subnav::-webkit-scrollbar { display: none; } .cms-sub-link { white-space: nowrap; padding-bottom: 6px; margin-right: 14px; font-size: 10px; } #listView { padding: 14px 14px 80px; } .pane-wrap { padding: 16px 14px 80px; } .img-thumb { width: 60px; height: 60px; } } @media (max-width: 600px) { .img-alt { width: 100px; } } @media (max-width: 500px) { .cms-mainnav { padding: 8px 12px; } .cms-mainnav-links { gap: 12px; } .cms-main-link { font-size: 12px; } .cms-logout { font-size: 10px; } } /* ── 13. Statistics dashboard (stats.php) ───────────────────────────────────── */ .stats-wrap { max-width: 960px; margin: 0 auto; padding: 0 20px 96px; } .stat-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; } .range-buttons { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); } .range-btn { padding: 6px 14px; border-radius: var(--radius-pill); color: var(--muted); text-decoration: none; font-size: var(--text-s); white-space: nowrap; } .range-btn:hover { color: var(--text); } .range-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 600; } .bots-toggle { color: var(--muted); text-decoration: none; font-size: var(--text-s); } .bots-toggle:hover, .bots-toggle.active { color: var(--text); } /* auto-fit statt fester 4er-Reihe: die Kacheln (aktuell 5) füllen die Breite selbst */ .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 28px; } .stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); } .tile-label { font-size: var(--text-s); color: var(--muted); } .tile-value { font-size: var(--text-xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .tile-sub { font-size: var(--text-xs); color: var(--muted); } .stat-chart { padding: 20px; margin-bottom: 28px; border: 1px solid var(--border); border-radius: var(--radius); } .chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .chart-head h2 { font-size: var(--text-m); font-weight: 600; } .chart-gran { font-size: var(--text-xs); color: var(--muted); } .chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 150px; margin-bottom: 22px; border-bottom: 1px solid var(--border); } .chart-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .chart-bar { width: 100%; max-width: 34px; background: var(--accent); border-radius: 4px 4px 0 0; transition: opacity .15s; } .chart-col:hover .chart-bar { opacity: 0.65; } .chart-xlabel { position: absolute; top: 100%; margin-top: 6px; font-size: 10px; color: var(--muted); white-space: nowrap; } .chart-xlabel.hide { display: none; } .stat-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .stat-panel { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); } .stat-panel h2 { font-size: var(--text-m); font-weight: 600; margin-bottom: 14px; } .bar-list { list-style: none; display: flex; flex-direction: column; gap: 9px; } .bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; } .bar-label { font-size: var(--text-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { height: 8px; background: var(--surface); border-radius: 4px; overflow: hidden; } .bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; } .bar-count { font-size: var(--text-s); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } /* Bild-Ranglisten (Top Bilder/Downloads): Vorschau-Thumbnail, verlinkt aufs große Bild. */ .bar-row.with-thumb { grid-template-columns: 34px minmax(0, 1fr) 90px auto; } .bar-thumb { display: block; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); } .bar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Progressive Reveal: Zeilen jenseits der ersten 20 stehen im DOM, aber verborgen — der Knopf blendet sie portionsweise ein (Skript in cms/auswertung.php). */ .bar-row.is-more { display: none; } .bar-more { margin-top: 12px; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--muted); font-family: var(--sans); font-size: var(--text-xs); cursor: pointer; } .bar-more:hover { border-color: var(--accent); color: var(--text); } .bar-more-rest { font-variant-numeric: tabular-nums; opacity: .7; } .stat-empty { color: var(--muted); font-size: var(--text-s); } .stat-cap { margin-top: 10px; } .stat-empty-big { padding: 40px 0; text-align: center; color: var(--muted); } .stat-note { margin-top: 24px; font-size: var(--text-xs); color: var(--muted); } .stat-note + .stat-note { margin-top: 10px; } /* Zwischenüberschrift zwischen den Panel-Blöcken (Journeys / Inhalte & Technik) */ .stat-section { margin: 34px 0 16px; font-size: var(--text-s); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .stat-section + .stat-tiles { margin-bottom: 20px; } @media (max-width: 760px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } .stat-cols { grid-template-columns: 1fr; } } /* ── 14. SBS: Site-Umschalter, Dashboard, Einstellungen ──────────────────────── */ .cms-siteswitch { display: flex; align-items: center; gap: 6px; } .cms-siteswitch select { font-family: var(--sans); font-size: 13px; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text); padding: 5px 10px; cursor: pointer; outline: none; } .cms-newevent { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cms-newevent:hover { border-color: var(--accent); color: var(--text); } /* Dashboard */ .dash-head { max-width: 960px; margin: 0 auto 24px; } .dash-title { font-size: var(--text-xxl); font-weight: bold; line-height: 1.1; } .dash-sub { font-family: var(--mono); font-size: var(--text-s); color: var(--muted); margin-top: 6px; } .dash-sub a { color: var(--text); text-decoration: none; } .dash-sub a:hover { text-decoration: underline; } .dash-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } /* Einstellungen-Formular */ /* Die Einstellungen laufen im normalen Seitenspiegel (.pane-wrap, 960px) — vorher waren sie als einzige Seite auf 640px eingezogen und standen damit nicht auf der Flucht mit Navigation und den übrigen Seiten. Damit die Felder in der breiteren Spalte nicht auseinanderlaufen, begrenzt .set-input sie separat. */ .settings-body .set-input { max-width: 460px; } .settings-body .set-textarea { max-width: 640px; } .settings-form { display: flex; flex-direction: column; } .set-section { font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .set-hint { text-transform: none; letter-spacing: 0; } .set-row { display: flex; align-items: center; gap: 14px; margin: 10px 0; } .set-label { flex: 0 0 190px; font-size: var(--text-s); color: var(--text); } .set-input { flex: 1; min-width: 0; font-family: var(--sans); font-size: var(--text-base); border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text); padding: 7px 14px; outline: none; transition: border-color .15s; } .set-input:focus { border-color: var(--accent); } select.set-input { cursor: pointer; } .set-color-wrap { flex: 1; display: flex; align-items: center; gap: 10px; } .set-color { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: transparent; cursor: pointer; padding: 2px; flex-shrink: 0; } .set-check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .set-check-row .set-label { flex: 1; } .set-textarea-row { align-items: flex-start; } .set-textarea { border-radius: var(--radius); padding: 10px 14px; line-height: 1.4; resize: vertical; min-height: 120px; } .set-hero { flex: 1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .set-hero img { max-width: 100%; max-height: 180px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); } /* „Speichern“ ist ein FAB (.fab) — der frühere .settings-save-Block entfällt, Farben kommen bereits aus .fab. Der Platz unten steckt in .pane-wrap (80px). */ @media (max-width: 600px) { .set-row { flex-direction: column; align-items: stretch; gap: 6px; } .set-label { flex-basis: auto; } .set-check-row { flex-direction: row; align-items: center; } } /* Album-Editor: gleichmäßiges Raster (kein Hero-Ausriss beim 1. Bild) + Cover/Ausblenden */ .img-grid .img-item:first-child { grid-column: auto; padding-bottom: 14px; } .img-grid .img-item:first-child .img-fig { width: auto; max-width: none; margin: 0; } .img-grid .img-item:first-child .img-thumb { width: 100%; max-width: none; max-height: none; } .img-grid .img-cover, .img-grid .img-hide { position: absolute; left: 6px; padding: 0 7px; background: var(--chip-bg); border: none; border-radius: 6px; color: var(--text); font-size: 14px; line-height: 1.7; cursor: pointer; } .img-grid .img-cover { top: 34px; } .img-grid .img-hide { top: 64px; } .img-grid .img-cover:hover, .img-grid .img-hide:hover { background: var(--chip-bg-hover); } .img-grid .img-cover.active { background: var(--accent); color: var(--on-accent); } .img-grid .img-item.is-hidden .img-thumb { opacity: .35; } .img-grid .img-item.is-hidden .img-hide { background: var(--danger); color: var(--on-accent); } /* Verschieben-Button (links, unter Cover/Ausblenden) + Album-Auswahl-Popover */ .img-grid .img-move { position: absolute; left: 6px; top: 94px; padding: 0 7px; background: var(--chip-bg); border: none; border-radius: 6px; color: var(--text); font-size: 14px; line-height: 1.7; cursor: pointer; } .img-grid .img-move:hover { background: var(--chip-bg-hover); } .move-menu { position: fixed; z-index: 120; min-width: 190px; max-width: 280px; max-height: 320px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; } .move-menu-title { font-size: var(--text-xs); color: var(--muted); padding: 4px 8px 6px; } .move-menu-body { display: flex; flex-direction: column; } .move-menu-item { text-align: left; padding: 8px 8px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: var(--text-s); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .move-menu-item:hover { background: var(--surface); } /* ── Übersicht / Event-Auswahl (Startseite nach dem Login) ── */ .ov-brand { font-weight: 700; letter-spacing: .04em; font-size: var(--text-m); } .ov-main { max-width: 960px; margin: 0 auto; padding: 20px 20px 96px; } .ov-title { font-size: var(--text-xl); margin: 4px 0 22px; } .site-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .site-card { display: block; text-decoration: none; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .site-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--muted); } .site-card-img { aspect-ratio: 3 / 2; background: var(--surface); } .site-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-card-img.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 46px; } .site-card-body { padding: 14px 16px 16px; } .site-card-name { font-size: var(--text-l); font-weight: 600; line-height: 1.2; } .site-card-sub { margin-top: 7px; color: var(--muted); font-size: var(--text-s); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .site-card-slug { margin-left: auto; font-family: var(--mono); font-size: var(--text-xs); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--muted); } /* Marker auf Event-Karten, die nicht öffentlich sind (site.json "public": false) */ .site-card-flag { font-family: var(--mono); font-size: var(--text-xs); font-weight: normal; vertical-align: middle; white-space: nowrap; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--muted); background: var(--surface); } @media (max-width: 560px) { .site-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .site-card-body { padding: 10px 12px 12px; } }