kantarciandClaude Opus 5
22e4ada830
Abgleich mit dem Flatsome UX Builder (docs/FLATSOME-ABGLEICH.md): die Gestaltung ist Flatsome voraus, die Luecken liegen beim Elementkatalog und bei der Bedienung. Umuts Entscheidung: Bedienung zuerst, Shop-Elemente ausgelassen. Erste Haelfte der Bedienung: - Werkzeugleiste am Element in der Vorschau. Sie nennt das Element, auf das sie wirkt - die Seitenleiste hat dieselben fuenf Aktionen, und zwei gleichnamige Bedienelemente auf einem Bildschirm sind fuer eine Sprachausgabe nicht unterscheidbar. Beide Wege rufen dieselben Funktionen auf. - Auswahl- und Ueberfahrrahmen mit Beschriftung. - Einfuegepunkte an Ober- und Unterkante: das naechste Element landet dort statt am Ende. - Ziehen aus dem Werkzeugkasten in die Vorschau, mit Ablegemarke zwischen den Elementen und Rahmen um einen aufnehmenden Behaelter. Der Strukturbaum zieht in dieselbe Flaeche. Die Ebene liegt ueber dem Rahmen, nicht darin: die Vorschau wird bei jeder Aenderung ersetzt, eingezeichnete Bedienelemente waeren weg und stuenden in der Auszeichnung, die die Vorschau wahrheitsgetreu zeigen soll. Leiste und Pluszeichen werden gegenskaliert und bleiben in der Mobilvorschau fingergross. Im Modell neu: insertBlockAt, moveBlockTo, dropList. Dabei behoben: die Ebene war aria-hidden und enthielt fokussierbare Schaltflaechen; canContain zerbrach an einem fehlenden Block beim Ziehen aus dem Werkzeugkasten; beim Verschieben ans Listenende wurde der Index begrenzt, bevor die Entnahme verrechnet war. Geprueft: npm test 22/22, phpunit 434/434, npm run test:editor vollstaendig mit neuem Abschnitt und ohne axe-Verstoss. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
249 lines
20 KiB
CSS
249 lines
20 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}
|
||
|
||
/* --------------------------------------------------------------------------------------------
|
||
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]{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}}
|