kantarciandClaude Opus 5
4841bf65bc
Jede Verwaltungsseite trug bisher ihre eigene Kopfzeile und ihre eigene, unvollständige Liste von Links auf die anderen Seiten - die Seitenübersicht verlinkte sieben Bereiche, das Menü fünf, die Fassungen drei. Wo man war, stand nirgends. Jetzt gibt es einen Rahmen für alle: eine feste Seitenleiste mit der Navigation, der aktive Eintrag über aria-current markiert, und eine Kopfzeile mit Titel, einem Satz Erklärung und Platz für die Hauptaktion. Jede Seite füllt nur noch heading, lead, actions und content. Auf schmalen Fenstern wird die Seitenleiste zu einer scrollbaren Leiste, ohne JavaScript. Die Seitenübersicht zeigt je Seite eine Zeile mit dem Alltäglichen und einem Aufklappfeld "Einstellungen", das darunter an seinem Platz öffnet - vorher waren es sechs Aufklappfelder, deren Inhalt als absolut positionierter Kasten über den Rand der Karte hinausragte. Tabellen scrollen seitlich, statt die Karte aus dem Fenster zu schieben. Das Stylesheet ist geteilt: die Editorregeln stehen in editor.css, das nur Editor und Mediathek laden; admin.css ist neu geschrieben und lesbar. Der Editor behält seinen Aufbau und übernimmt die neue Gestaltung - Systemschrift, gleiche Radien, gleiche Schaltflächen, und ein paar Panelgrößen, die zum Lesen zu klein waren. Beim Zerlegen des Stylesheets schnitt mein Skript am Ende jedes @media-Blocks alle schließenden Klammern ab statt nur einer. editor.css war damit ab dem ersten Medienblock ungültig: der Browser behielt 29 von 202 Regeln. Gefunden hat das der Browsertest, an einer Vorschaubreite von 1236 statt 1240 Pixeln - vier Pixel als einziges Anzeichen dafür, dass dreiviertel des Stylesheets fehlte. 201 PHP-Tests / 716 Assertions unter PHP 8.2.12 und 8.4.22, Playwright- Editortest mit axe ohne Verstöße auf Anmeldung, Seitenübersicht und Editor, öffentliche Browserprüfung grün. Zwei Testselektoren zeigten auf umbenannte Klassen und prüfen dieselbe Sache nun über den neuen Namen. Nicht geprüft: kein Screenreader, und die Bildschirme Menüs, Formulare, Bereiche, Design, Einstellungen und Fassungen sind nur von Hand bedient, nicht automatisiert geprüft. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
207 lines
16 KiB
CSS
207 lines
16 KiB
CSS
/* The editor and the media library. Only the editor and the media screen load this; the
|
||
management screens get by with admin.css alone. Rules moved out of admin.css unchanged. */
|
||
dialog{max-width:450px;width:calc(100% - 40px);padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);box-shadow:0 20px 80px #1b2a2433}
|
||
dialog::backdrop{background:#172e2966}
|
||
dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
|
||
.editor-page-name h1{font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
|
||
.canvas-scroll:focus-visible{outline:3px solid #b55b12;outline-offset:-3px}
|
||
|
||
.media-launch{margin-top:12px;white-space:normal}
|
||
.media-dialog{width:calc(100% - 32px);max-width:1100px;max-height:calc(100dvh - 32px);overflow:auto}
|
||
.media-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}
|
||
.media-heading h2{margin:0}
|
||
.media-heading .eyebrow{margin-bottom:8px}
|
||
.media-tools{display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
||
.media-tools label{margin-top:10px}
|
||
.media-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
|
||
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;align-content:start;max-height:430px;overflow:auto;padding:4px}
|
||
.media-card{border:2px solid var(--line);border-radius:9px;padding:7px;background:white;color:var(--ink);display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0}
|
||
.media-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}
|
||
.media-card img{width:100%;height:115px;object-fit:cover;border-radius:5px}
|
||
.media-card strong{font-size:12px;overflow-wrap:anywhere}
|
||
.media-card span{font-size:11px;color:var(--muted)}
|
||
.media-details{padding-left:22px;border-left:1px solid var(--line)}
|
||
.media-details button,.media-details a{margin-top:12px;display:block}
|
||
.media-details input{font-size:13px}
|
||
.media-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
|
||
.media-footer label{margin:0;font-size:12px}
|
||
#media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}
|
||
#media-status{font-size:12px;margin-block:15px}
|
||
.media-dialog> .panel-hint{margin-top:20px}
|
||
.media-details>p{font-size:12px}
|
||
@media(max-width:650px){.media-dialog{padding:18px}.media-tools,.media-layout{grid-template-columns:1fr}.media-details{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.media-grid{max-height:280px;grid-template-columns:repeat(2,minmax(0,1fr))}.media-footer{align-items:stretch;flex-direction:column}.media-heading{gap:8px}}
|
||
.icon-button,.block-actions button,.viewport-controls button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--line);border-radius:7px;padding:11px 15px;text-decoration:none;font-size:12px;font-weight:600;background:white;color:var(--ink);white-space:nowrap;min-height:40px}
|
||
.editor-message{padding:14px 18px;border-radius:7px;line-height:1.6;font-size:13px}
|
||
.editor-body{overflow:hidden}
|
||
#editor{height:100dvh;display:flex;flex-direction:column}
|
||
.editor-header{display:flex;align-items:center;gap:20px;min-height:76px;padding:13px 20px;border-bottom:1px solid var(--line);background:white;z-index:1}
|
||
.back-link{display:flex;gap:9px;text-decoration:none;font-size:12px;padding-right:20px;border-right:1px solid var(--line)}
|
||
.editor-page-name{min-width:0;flex:1;display:grid;gap:5px}
|
||
.editor-page-name strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.editor-page-name>span{font-size:10px;color:var(--muted)}
|
||
.history-actions,.save-actions{display:flex;align-items:center;gap:8px}
|
||
.icon-button{font-size:21px;min-width:36px;padding:3px 9px}
|
||
.save-actions>span{font-size:10px;color:var(--muted);max-width:130px;margin-right:8px}
|
||
.editor-layout{display:grid;grid-template-columns:258px minmax(200px,1fr) 280px;flex:1;min-height:0}
|
||
.left-panel,.right-panel{background:white;overflow:auto}
|
||
.left-panel{border-right:1px solid var(--line)}
|
||
.right-panel{border-left:1px solid var(--line)}
|
||
.panel-section{padding:23px 18px;border-bottom:1px solid var(--line)}
|
||
.panel-section .eyebrow{margin-bottom:10px}
|
||
.panel-section h2{font-size:14px;margin-bottom:12px}
|
||
.panel-hint{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:17px}
|
||
.library{display:grid;grid-template-columns:1fr 1fr;gap:7px}
|
||
.library button{min-height:64px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:10px}
|
||
.library button:hover:not(:disabled){border-color:var(--accent);background:#f3f7e8}
|
||
.library button span{font-size:19px;line-height:1}
|
||
.panel-title{display:flex;justify-content:space-between;align-items:center}
|
||
.panel-title h2{margin-bottom:0}
|
||
.panel-title+.panel-hint{margin-top:10px}
|
||
.structure-list{list-style:none;margin:0;padding:0}
|
||
.structure-list .structure-list{padding-left:13px;border-left:1px solid #e5e9e3;margin-left:8px}
|
||
.tree-item{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:1px solid transparent;background:none;color:#42584b;border-radius:5px;padding:9px 7px;font-size:11px;min-height:34px}
|
||
.tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.tree-item:hover{background:#f3f6ef}
|
||
.tree-item[aria-pressed=true]{background:#eaf1d5;border-color:#c5d89a;color:#203b34;font-weight:600}
|
||
.tree-icon{font-size:12px;min-width:15px}
|
||
.drop-target{outline:2px dashed #315b49}
|
||
.block-actions{display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid var(--line);padding-top:13px;margin-top:16px}
|
||
.block-actions button{font-size:10px;padding:7px 9px;min-height:33px}
|
||
.block-actions .danger-text{color:#943a2e}
|
||
.canvas-panel{min-width:0;display:flex;flex-direction:column;background:#e9ede7;overflow:hidden}
|
||
.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 20px;background:#f6f8f2;border-bottom:1px solid var(--line);min-height:59px}
|
||
.canvas-label{font-size:9px;font-weight:700;letter-spacing:1.2px;color:#57655d}
|
||
.viewport-controls{display:flex;gap:3px;background:#e8eee1;border-radius:7px;padding:3px}
|
||
.viewport-controls button{padding:5px 9px;font-size:10px;min-height:28px;border:0;background:transparent}
|
||
.viewport-controls [aria-pressed=true]{background:white;box-shadow:0 1px 3px #00000012}
|
||
.canvas-toolbar>a{text-decoration:none;font-size:18px}
|
||
.canvas-scroll{flex:1;min-height:0;overflow:auto;padding:22px;display:flex;justify-content:center;align-items:flex-start}
|
||
#preview{background:white;border:0;box-shadow:0 3px 20px #203b3410;min-height:600px;height:100%;flex-shrink:0}
|
||
.viewport-desktop{width:100%}
|
||
.viewport-tablet{width:768px;max-width:100%}
|
||
.viewport-mobile{width:390px;max-width:100%}
|
||
.preview-status{font-size:10px;padding:9px 20px;color:#52614f;margin:0;min-height:30px;background:#f3f5ed}
|
||
.right-panel label{font-size:11px}
|
||
.right-panel input,.right-panel select,.right-panel textarea{font-size:12px}
|
||
.right-panel textarea{min-height:150px}
|
||
|
||
.panel-note{font-size:11px;color:var(--muted);line-height:1.7;padding:20px}
|
||
|
||
|
||
.editor-message{border-radius:0;background:#fff0e9;color:#873e24;border-bottom:1px solid #e6c3b2;flex-shrink:0;padding:9px 20px;font-size:12px}
|
||
.recovery-bar{display:flex;gap:12px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line);background:#fff;font-size:12px;flex-wrap:wrap}
|
||
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
|
||
@media(max-width:1150px){.editor-layout{grid-template-columns:215px minmax(200px,1fr) 240px}.editor-header{gap:12px;padding-inline:14px}.save-actions>span{display:none}.panel-section{padding:18px 14px}.canvas-scroll{padding:12px}.canvas-label{display:none}}
|
||
@media(max-width:850px){.editor-body{overflow:auto}#editor{height:auto;min-height:100dvh}.editor-header{flex-wrap:wrap}.editor-page-name{min-width:180px}.save-actions{width:100%;justify-content:flex-end}.save-actions>span{display:block;margin-right:auto}.editor-layout{display:flex;flex-wrap:wrap}.canvas-panel{order:0;width:100%;height:680px}.left-panel{order:1;width:45%;max-height:650px}.right-panel{order:2;width:55%;max-height:650px}.canvas-label{display:block}.editor-header .back-link{padding-right:12px}.editor-message{font-size:11px}.editor-layout .panel-hint{font-size:10px}}
|
||
.left-panel{display:flex;flex-direction:column;overflow:hidden}
|
||
.left-panel>.panel-section:first-child{max-height:45%;overflow:auto;flex-shrink:0}
|
||
.structure-section{display:flex;flex-direction:column;flex:1;min-height:0}
|
||
.structure-section #structure{overflow:auto;flex:1;min-height:90px;padding:3px}
|
||
.structure-section .block-actions{flex-shrink:0;background:white}
|
||
.structure-section .panel-hint{margin:8px 0}
|
||
.search-label{font-size:11px;margin:12px 0 6px}
|
||
#tree-search{font-size:11px;padding:9px;min-height:36px}
|
||
.tree-tools{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
|
||
.tree-tools .text-button{font-size:10px;padding:5px}
|
||
.structure-list li{position:relative}
|
||
.tree-item{padding-left:23px}
|
||
.tree-toggle{position:absolute;top:5px;left:0;width:22px;height:25px;z-index:1;border:0;background:transparent;color:var(--ink);border-radius:4px}
|
||
.preset-heading{font-size:12px;margin:22px 0 8px}
|
||
.preset-library{display:grid;gap:6px}
|
||
.preset-library button{display:flex;gap:10px;text-align:left;align-items:center;min-height:40px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:#f7f9f2;color:var(--ink);font-size:11px}
|
||
.preset-library button:hover:not(:disabled){border-color:var(--accent)}
|
||
.preset-library span{font-size:18px}
|
||
.property-tabs{display:flex;background:#edf1e7;padding:4px;border-radius:8px;gap:4px}
|
||
.property-tabs button{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);border-radius:6px;padding:10px;font-size:12px;font-weight:600}
|
||
.property-tabs [aria-pressed=true]{background:white;box-shadow:0 1px 3px #0001}
|
||
.design-scope{font-size:12px;font-weight:600;line-height:1.6;margin:18px 0 8px;padding:10px;border-left:3px solid var(--accent);background:#f1f5e7}
|
||
.design-reset{margin-top:24px;white-space:normal;width:100%}
|
||
.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-height:35px;padding:3px 14px;background:#f6f8f2;border-top:1px solid var(--line)}
|
||
.breadcrumbs .text-button{font-size:10px;white-space:normal}
|
||
.breadcrumbs button+button:before{content:'›';color:var(--muted)}
|
||
.breadcrumbs [aria-current=location]{font-weight:700;background:#e5edda}
|
||
.canvas-scroll{display:block}
|
||
.canvas-scroll #preview-stage{position:relative;margin:0 auto}
|
||
#preview{position:absolute;top:0;left:0;transform-origin:top left;max-width:none;min-height:0}
|
||
.right-panel select{padding-inline:7px;text-overflow:ellipsis}
|
||
.right-panel .panel-section{min-width:0}
|
||
@media(max-width:850px){.left-panel,.right-panel{height:650px}.left-panel>.panel-section:first-child{max-height:40%}.structure-section{padding:12px 7px}.tree-item{font-size:10px;gap:3px}.tree-icon{min-width:10px}.structure-list .structure-list{padding-left:5px;margin-left:4px}.block-actions button{padding:6px;white-space:normal}.property-tabs button{padding:9px 4px;font-size:11px}.canvas-scroll{padding:12px}.right-panel label{line-height:1.5}.tree-tools .text-button{white-space:normal}}
|
||
.design-group{border:1px solid var(--line);border-radius:9px;margin-top:10px;background:#fff}
|
||
.design-group>summary{cursor:pointer;padding:12px 14px;font-size:12px;font-weight:700;letter-spacing:.3px;list-style:none;display:flex;justify-content:space-between;align-items:center}
|
||
.design-group>summary::after{content:'+';font-size:17px}
|
||
.design-group[open]>summary{border-bottom:1px solid var(--line)}
|
||
.design-group[open]>summary::after{content:'–'}
|
||
.design-group-body{padding:6px 14px 16px}
|
||
.design-group-label{font-size:11px;font-weight:700;color:var(--muted);margin:18px 0 6px;letter-spacing:.3px}
|
||
.design-row{margin-top:14px}
|
||
.design-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
|
||
.design-row-head label{margin:0;font-size:11px}
|
||
.design-own .design-row-head label{color:#2f5d4a;font-weight:700}
|
||
.design-own .design-row-head label::before{content:'● ';color:var(--accent)}
|
||
.design-reset-one{font-size:14px;padding:2px 6px;min-height:24px;line-height:1}
|
||
.design-inherited{font-size:10px;color:var(--muted);margin:5px 0 0;line-height:1.45}
|
||
.color-control{display:grid;grid-template-columns:38px 1fr;gap:6px;align-items:center}
|
||
.color-control input[type=color]{padding:2px;min-height:38px;width:38px;border-radius:6px;cursor:pointer}
|
||
.color-control .color-text{font-size:12px;min-height:38px}
|
||
.color-control .color-palette{grid-column:1 / -1;font-size:11px;min-height:34px}
|
||
.length-control{display:grid;grid-template-columns:1fr 74px;gap:6px}
|
||
.length-control input,.length-control select{font-size:12px;min-height:38px}
|
||
.length-control.is-inherited input{color:var(--muted)}
|
||
.number-control{display:grid;grid-template-columns:1fr 74px;gap:8px;align-items:center}
|
||
.number-control input[type=range]{width:100%;min-height:24px;padding:0;accent-color:#437754}
|
||
.number-control input[type=number]{font-size:12px;min-height:38px}
|
||
.side-wrap{margin-bottom:6px}
|
||
.side-control{display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||
.side-cell label{margin:0 0 4px;font-size:10px;color:var(--muted)}
|
||
.side-all{font-size:10px;margin-top:8px;padding:4px 6px}
|
||
.design-actions{display:grid;gap:8px;margin-top:22px}
|
||
.design-actions button{width:100%}
|
||
|
||
|
||
|
||
|
||
.media-control{display:grid;gap:8px}
|
||
.media-chosen{margin:0;font-size:11px;color:var(--muted)}
|
||
.design-reuse{display:grid;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
|
||
.design-reuse button,.design-reuse select{width:100%}
|
||
#preset-dialog label{margin-top:18px}
|
||
#preset-dialog .field-error{margin:10px 0 0;font-size:12px;color:#8b2f22;font-weight:600}
|
||
.rich-text{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
|
||
.rt-bar{display:flex;flex-wrap:wrap;gap:2px;padding:5px;border-bottom:1px solid var(--line);background:#fafbf8}
|
||
.rt-button{min-width:30px;min-height:30px;padding:2px 7px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink);font-size:12px;line-height:1}
|
||
.rt-button:hover{background:#eef2e7;border-color:var(--line)}
|
||
.rt-toggle{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.5px}
|
||
.rt-toggle[aria-pressed=true]{background:var(--ink);color:#fff}
|
||
.rt-link{display:flex;gap:6px;padding:6px;border-bottom:1px solid var(--line);background:#fff6e2}
|
||
.rt-link input{font-size:11px;min-height:30px}
|
||
.rt-surface{min-height:120px;max-height:340px;overflow:auto;padding:11px 12px;font-size:13px;line-height:1.65}
|
||
.rt-surface:focus-visible{outline:2px solid #b55b12;outline-offset:-2px}
|
||
.rt-surface ul,.rt-surface ol{margin:0 0 8px;padding-left:20px}
|
||
.rt-surface a{color:#a4510f}
|
||
.rt-source{min-height:150px;border:0;border-radius:0;font-family:ui-monospace,monospace;font-size:12px;line-height:1.6}
|
||
.own-code{font-family:ui-monospace,monospace;font-size:12px;line-height:1.6;min-height:110px}
|
||
.own-code[readonly]{background:#f4f5f1;color:var(--muted)}
|
||
/* Bringing the editor chrome in line with the new administration: same radii, same restraint,
|
||
and a few sizes that were simply too small to read comfortably. The layout is unchanged. */
|
||
.editor-header{min-height:70px}
|
||
.back-link{font-size:12px;font-weight:600;gap:7px;align-items:center}
|
||
.editor-page-name h1{font-size:14px}
|
||
.panel-section h2{font-size:13px;letter-spacing:0}
|
||
.panel-section .eyebrow{font-size:9px;letter-spacing:1.4px}
|
||
.library{gap:8px}
|
||
.library button{min-height:68px;border-radius:9px;font-size:11px;gap:7px}
|
||
.library button span{font-size:20px}
|
||
.tree-item{font-size:12px;border-radius:6px}
|
||
.right-panel label{font-size:12px}
|
||
.right-panel input,.right-panel select,.right-panel textarea{font-size:12px;border-radius:7px}
|
||
.property-tabs{padding:3px;border-radius:9px}
|
||
.property-tabs button{border-radius:7px;font-size:12px}
|
||
.viewport-controls{border-radius:8px}
|
||
.viewport-controls button{border-radius:6px;font-size:11px}
|
||
.design-group{border-radius:10px}
|
||
.design-scope{border-radius:0 7px 7px 0}
|
||
#preview{box-shadow:0 6px 28px #1b2a2414}
|
||
.canvas-panel{background:#e7ebe5}
|
||
.canvas-toolbar,.breadcrumbs,.preview-status{background:#f5f7f2}
|
||
.icon-button{border-radius:8px}
|