kantarciandClaude Opus 5
7225ae052e
Drei Bedienungen, die Flatsome an jeder Option hat und die hier fehlten. Geraeteschalter je Option. Bisher entschied ein einziger Schalter ueber der Vorschau, welches Geraet das ganze Bedienfeld bearbeitet; "ist die Ueberschrift auf dem Telefon kleiner" liess sich nur durch Umschalten und Hinsehen beantworten. Jetzt traegt jede Option drei Chips (D, T, M): sie zeigen, wo ein eigener Wert liegt, und ein Klick wechselt dorthin. Bedienfeld und Vorschau wechseln gemeinsam - einen Wert fuer ein Geraet zu setzen, das man nicht ansieht, ist blindes Aendern. Abstand als Rahmen. Vier Felder untereinander, beschriftet "Oben, Rechts, Unten, Links", zwangen zum Lesen. Jetzt sitzt jedes Feld an seiner Kante, die Lage ist die Beschriftung; in der Mitte verkettet ein Schalter alle vier. Er startet aus: er ersetzt den frueheren Knopf "Alle Seiten gleich setzen", und das war eine bewusste Handlung. Seiten mit unterschiedlichen Einheiten gelten als "gemischt" und bleiben unangetastet - ein gespeichertes 2rem wird nicht still zu 2px. Ziehfelder. Zahlenfelder lassen sich seitwaerts ziehen, Umschalt grob, Alt fein. Tippen und Pfeiltasten bleiben unveraendert. Nur fuer Maus und Stift: auf einem Tippgeraet ist ein seitliches Ziehen ueber ein Feld die Art, wie das Bedienfeld gescrollt wird. Dabei behoben: der Zug war nach einem Pixel zu Ende, weil jede Aenderung das Bedienfeld neu zeichnete und damit das Feld ersetzte, an dem der Zeiger hing (keepPanel). Der Kettenschalter verlor aus demselben Grund seinen Zustand. Und das Gleichziehen nahm den Wert des ersten Feldes, auch wenn es leer war - ein Druck auf die Kette loeschte damit die Seiten, die einen Wert hatten. Geprueft: npm test 27/27, phpunit 452/452, npm run test:editor vollstaendig mit neuem Abschnitt und ohne axe-Verstoss. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
283 lines
23 KiB
CSS
283 lines
23 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}
|
||
.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:10px}
|
||
/* Each field sits on the edge it controls, so the position is the label. */
|
||
.side-box{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:4px;align-items:center;justify-items:center;padding:7px;border:1px dashed var(--line);border-radius:8px;background:#fbfcf8}
|
||
.side-top{grid-area:1/2}.side-left{grid-area:2/1}.side-right{grid-area:2/3}.side-bottom{grid-area:3/2}
|
||
.side-box-corners .side-topLeft{grid-area:1/1}.side-box-corners .side-topRight{grid-area:1/3}
|
||
.side-box-corners .side-bottomLeft{grid-area:3/1}.side-box-corners .side-bottomRight{grid-area:3/3}
|
||
.side-cell{width:100%}
|
||
.side-field{width:100%;min-width:0;text-align:center;padding:5px 2px;font-size:11px;min-height:30px}
|
||
.side-field.is-inherited{color:var(--muted)}
|
||
.side-link{grid-area:2/2;width:26px;height:26px;display:grid;place-items:center;padding:0;min-height:0;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:12px;line-height:1;color:var(--muted);cursor:pointer}
|
||
.side-link[aria-pressed=true]{border-color:var(--accent);background:#eef5e6;color:var(--accent)}
|
||
.side-unit{display:flex;align-items:center;gap:7px;margin-top:7px}
|
||
.side-unit label{margin:0;font-size:10px;color:var(--muted)}
|
||
.side-unit-select{flex:1;min-width:0}
|
||
|
||
/* The device chips on a single option: which devices carry an own value, and switch to one. */
|
||
.device-chips{display:flex;gap:2px;margin-left:auto}
|
||
.device-chip{width:19px;height:19px;display:grid;place-items:center;padding:0;min-height:0;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--muted);font:700 9px/1 system-ui,sans-serif;cursor:pointer}
|
||
.device-chip:hover{border-color:var(--accent)}
|
||
.device-chip-own{background:#eef5e6;border-color:var(--accent);color:var(--accent)}
|
||
.device-chip[aria-pressed=true]{outline:2px solid var(--ring,#b55b12);outline-offset:1px}
|
||
.design-side-head{margin-bottom:5px}
|
||
.design-side-head .design-group-label{margin:0}
|
||
|
||
/* A number field that can be dragged sideways. The cursor is the only announcement it needs. */
|
||
.scrubbable{cursor:ew-resize}
|
||
.scrubbable:focus{cursor:text}
|
||
.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}
|
||
.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}
|
||
#design-search{font-size:12px;min-height:36px;padding:9px}
|
||
|
||
/* --------------------------------------------------------------------------------------------
|
||
The working layer above the preview.
|
||
|
||
It sits in the editor document, not in the preview, and carries the same scale transform as
|
||
the frame - so a rectangle measured inside the frame can be used here without conversion. The
|
||
layer itself lets the mouse through; only the controls on it catch a click, and each of them
|
||
is counter-scaled from JavaScript so it stays finger-sized when the preview is shrunk.
|
||
-------------------------------------------------------------------------------------------- */
|
||
.canvas-overlay{position:absolute;top:0;left:0;transform-origin:top left;pointer-events:none;overflow:hidden;z-index:2}
|
||
.ov-box{position:absolute;pointer-events:none}
|
||
.ov-hover{outline:1px dashed #7c8a80;outline-offset:-1px}
|
||
.ov-select{outline:2px solid var(--ring,#b55b12);outline-offset:-2px}
|
||
.ov-label{position:absolute;left:0;top:0;transform-origin:left bottom;background:var(--ring,#b55b12);color:#fff;font:700 10px/1 system-ui,sans-serif;letter-spacing:.3px;padding:4px 6px;border-radius:3px 3px 0 0;white-space:nowrap;translate:0 -100%}
|
||
.ov-label{background:#5c6b62;font-weight:600}
|
||
.ov-toolbar{position:absolute;display:flex;align-items:center;gap:2px;padding:3px;background:#243029;border-radius:7px;box-shadow:0 3px 12px #0000003d;pointer-events:auto}
|
||
.ov-toolbar-name{color:#e7ece8;font:700 10px/1 system-ui,sans-serif;letter-spacing:.4px;padding:0 7px 0 5px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #ffffff24;margin-right:2px;align-self:stretch;display:flex;align-items:center}
|
||
.ov-tool{width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:#e7ece8;font-size:13px;line-height:1;cursor:pointer;padding:0;min-height:0}
|
||
.ov-tool:hover:not(:disabled){background:#3b4c42}
|
||
.ov-tool:focus-visible{outline:2px solid #fff;outline-offset:-2px}
|
||
.ov-tool-danger:hover:not(:disabled){background:#8d2f24}
|
||
.ov-insert{position:absolute;display:grid;place-items:center;padding:0;min-height:0;border:2px solid #fff;border-radius:50%;background:var(--ring,#b55b12);color:#fff;font:700 14px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 7px #0000003d;pointer-events:auto;opacity:.55;transition:opacity .12s}
|
||
.ov-insert:hover,.ov-insert:focus-visible{opacity:1}
|
||
.ov-drop{position:absolute;background:var(--ring,#b55b12);border-radius:2px;box-shadow:0 0 0 1px #fff8;pointer-events:none}
|
||
.ov-drop-inside{background:color-mix(in srgb, var(--ring,#b55b12) 15%, transparent);border:2px dashed var(--ring,#b55b12);box-shadow:none}
|
||
/* While something is being dragged the outlines would only add noise. */
|
||
.canvas-overlay.is-dragging .ov-hover,.canvas-overlay.is-dragging .ov-toolbar,.canvas-overlay.is-dragging .ov-insert{display:none}
|
||
|
||
#library button[draggable=true]{cursor:grab}
|
||
#library button[draggable=true]:active{cursor:grabbing}
|
||
.insert-hint{background:color-mix(in srgb, var(--ring,#b55b12) 9%, #fff);border:1px solid var(--ring,#b55b12);border-radius:7px;padding:9px 11px;font-size:11px;line-height:1.5;margin:0 0 12px}
|
||
.insert-hint .text-button{margin-left:4px}
|
||
#toolbox.awaiting-insert .library button[data-add]:not(:disabled){box-shadow:inset 0 0 0 1px var(--ring,#b55b12)}
|
||
|
||
/* The reduced-motion setting is honoured: nothing here animates by itself anyway, but the
|
||
fade on the insert points is a transition and is switched off with the rest. */
|
||
@media(prefers-reduced-motion:reduce){.ov-insert{transition:none;opacity:1}}
|
||
|
||
/* --------------------------------------------------------------------------------------------
|
||
The toolbox, grouped the way a page is built.
|
||
|
||
The first group is the scaffolding, the rest goes inside it. What does not fit where the next
|
||
element would land is disabled and carries the reason in its title, so the rule is learned
|
||
rather than merely enforced.
|
||
-------------------------------------------------------------------------------------------- */
|
||
.library-group + .library-group{margin-top:16px}
|
||
.library-group-title{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
|
||
.library-group-hint{font-size:10px;line-height:1.5;color:var(--muted);margin:-3px 0 8px}
|
||
.library-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
|
||
.library-buttons button{display:flex;align-items:center;gap:7px;text-align:left;min-height:38px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#f7f9f2;color:var(--ink);font-size:11px;line-height:1.25}
|
||
.library-buttons button>span:first-child{flex:none;width:14px;text-align:center;font-size:13px;color:var(--accent)}
|
||
.library-buttons button:hover:not(:disabled){border-color:var(--accent);background:#fff}
|
||
.library-buttons button:disabled{opacity:.4;background:transparent;cursor:not-allowed}
|
||
.library-buttons button:disabled>span:first-child{color:var(--muted)}
|
||
/* A row is offered by column count, so its glyph shows the count - and needs the room for it,
|
||
instead of the fixed single-glyph width the other entries share. */
|
||
.library-buttons button>span.library-row-glyph{width:auto;letter-spacing:0;font-size:10px;color:var(--accent)}
|
||
.library-buttons button[data-row]{grid-column:span 2}
|
||
@media(max-width:1150px){.library-buttons{grid-template-columns:1fr}.library-buttons button[data-row]{grid-column:span 1}}
|