kantarciandClaude Opus 5
464f52b147
Neunzig Eigenschaften in acht zugeklappten Gruppen: "wo ist die Rahmenstaerke" ist eine berechtigte Frage. Jetzt filtert ein Suchfeld die Eigenschaften, oeffnet die passenden Gruppen und sagt, wie viele Treffer es gibt - und wenn keine, wo eigenes CSS zu finden ist. Getestet: "rahmen" laesst die Gruppen Rahmen und Bild stehen, 14 Treffer. Neu im Ausbauplan, Paket O: Sicherung und Wiederherstellung als Funktion statt als Disziplin. Heute entstehen Sicherungen nur als Nebenprodukt des Updaters und weil ich vor jeder Migration von Hand eine Kopie lege. Geplant sind Datenbank per VACUUM INTO statt copy (eine Kopie waehrend eines Schreibvorgangs kann unbrauchbar sein), Medienordner, ein Manifest mit Fassung, Migrationsstand und Pruefsummen - und ohne .env, weil darin APP_SECRET steht und eine Sicherung den Server verlaesst. Dazu Rotation, damit die Platte nicht vollaeuft und die naechste Sicherung nicht genau dann scheitert, wenn man sie braucht. Die Abnahme ist die Wiederherstellung, nicht die Sicherung: eine Seite loeschen, zurueckspielen, pruefen dass sie wieder da ist. Eine Sicherungsfunktion, deren Wiederherstellung nie gelaufen ist, ist eine Vermutung. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
212 lines
16 KiB
CSS
212 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}
|
||
.row-library{display:grid;gap:6px;margin-bottom:14px}
|
||
.row-library button{display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:#f7f9f2;color:var(--ink);font-size:11px}
|
||
.row-library button:hover:not(:disabled){border-color:var(--accent)}
|
||
.row-library span{letter-spacing:-2px;font-size:13px}
|
||
#design-search{font-size:12px;min-height:36px;padding:9px}
|