kantarciandClaude Opus 5
106f84dfd5
- The site icon is no longer a select at the end of the company data. It has its own section: a button opens the media library (upload included), then a square is dragged, resized by its corner, a slider or +/-, and previewed at 180 and 32 px. The crop is stored as fractions (faviconCrop) and the PNGs are cut from it; faviconVersion changes the link so browsers pick up a new cut. Icons without a crop keep their old link. - openMedia() takes needsAlt: false, since the icon never appears as content. The dialog styles moved from editor.css to media-dialog.css so the dialog works outside the editor. - Privacy page and imprint are chosen with the content search, like the 404 page. The picker can store the path instead of the id (valueKey/data-value). - The page and post lists in the administration sort newest first; the subpage indentation is gone there, as it would point at the wrong parent. Tests: 581 PHPUnit, 35 node, test:editor green (the consent step now picks the privacy page by search). test:admin --admin-only fails only at the known nested-interactive menu summaries. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
288 lines
25 KiB
CSS
288 lines
25 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.
|
||
|
||
The layout follows the Flatsome UX Builder: a dark bar on top, one sidebar on the left that
|
||
shows one thing at a time, and the page itself filling the rest. */
|
||
/* Die Farbe fuer "hier steht ein eigener Wert". Dunkler als der Fokusring, damit weisse
|
||
Schrift darauf die Kontrastschwelle sicher nimmt (5,6:1). */
|
||
:root{--used:#9d4e0d}
|
||
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)}
|
||
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
||
|
||
|
||
/* ---- shell ------------------------------------------------------------------------------- */
|
||
html:has(>.editor-body){overflow:hidden;height:100%}
|
||
.editor-body{overflow:hidden;height:100dvh}
|
||
#editor{height:100dvh;display:flex;flex-direction:column;background:#e3e7e1}
|
||
.editor-header{display:flex;align-items:center;gap:12px;height:52px;padding:0 12px;background:var(--ink);color:#fff;flex-shrink:0;z-index:5}
|
||
.back-link{display:flex;gap:7px;align-items:center;color:#cfd9d3;text-decoration:none;font-size:12px;font-weight:600;padding:8px 14px 8px 4px;border-right:1px solid #ffffff22;white-space:nowrap}
|
||
.back-link:hover{color:#fff}
|
||
.editor-page-name{min-width:0;width:230px;display:grid;gap:1px}
|
||
.editor-page-name h1{font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;color:#fff}
|
||
.editor-page-name>span{font-size:11px;color:#9fb1a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;text-decoration:none;font-size:14px;line-height:1}
|
||
.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||
.editor-header .icon-button{color:#d5ded8}
|
||
.editor-header .icon-button:hover:not(:disabled){background:#ffffff1a;color:#fff}
|
||
.editor-header .icon-button[aria-pressed=true]{background:#fff;color:var(--ink)}
|
||
.viewport-controls{display:flex;gap:2px;margin:0 auto;padding:3px;background:#ffffff14;border-radius:9px}
|
||
.viewport-controls button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#c9d4cd;padding:0 11px;min-height:30px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
|
||
.viewport-controls button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||
.viewport-controls button:hover:not(:disabled){color:#fff}
|
||
.editor-header .viewport-controls button[aria-pressed=true]{background:#fff;color:var(--ink)}
|
||
.history-actions{display:flex;gap:2px}
|
||
.save-actions{display:flex;align-items:center;gap:8px}
|
||
.save-actions>span{font-size:11px;color:#9fb1a7;max-width:150px;text-align:right;line-height:1.3}
|
||
.editor-header .secondary{background:transparent;color:#fff;border:1px solid #ffffff4d;font-size:12px;padding:0 13px;min-height:34px;white-space:nowrap}
|
||
.editor-header .secondary:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff99}
|
||
.editor-header .primary{font-size:12px;padding:0 15px;min-height:34px;white-space:nowrap}
|
||
.editor-message{border-radius:0;background:#fff0e9;color:#873e24;border-bottom:1px solid #e6c3b2;flex-shrink:0;padding:9px 16px;font-size:12px;line-height:1.6}
|
||
.recovery-bar{display:flex;gap:12px;align-items:center;padding:10px 16px;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}
|
||
/* The single row is capped at the space left under the header, so the sidebar and the canvas
|
||
scroll inside themselves instead of stretching the workspace. */
|
||
.editor-layout{display:grid;grid-template-columns:330px minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1;min-height:0}
|
||
|
||
/* ---- sidebar ----------------------------------------------------------------------------- */
|
||
.sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--line)}
|
||
.sidebar-head{flex:none;border-bottom:1px solid var(--line);background:#fff}
|
||
.sidebar-nav{display:flex}
|
||
.sidebar-nav [role=tab]{flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.2px;padding:0 6px;min-height:46px;border-radius:0}
|
||
.sidebar-nav [role=tab]:hover:not(:disabled){color:var(--ink);background:#f7f9f5}
|
||
.sidebar-nav [aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
|
||
.sidebar-element{display:flex;align-items:center;gap:4px;padding:7px 8px 7px 6px;border-top:1px solid var(--line);background:#f7f9f5}
|
||
.sidebar-element .icon-button{color:var(--ink);flex:none}
|
||
.sidebar-element .icon-button:hover:not(:disabled){background:#eef2ea}
|
||
.sidebar-element-name{flex:1;min-width:0;padding:0 4px}
|
||
.sidebar-element-name h2{margin:0;font-size:14px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
|
||
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:1px;min-height:0;line-height:1.3}
|
||
.breadcrumbs:empty{display:none}
|
||
.crumb{border:0;background:none;padding:0;min-height:0;font-size:10.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
|
||
.crumb:hover{color:var(--accent);text-decoration:underline}
|
||
.crumb+.crumb::before{content:'›';margin:0 4px;color:#b7c2bb}
|
||
.property-tabs{display:flex;gap:4px;padding:0 8px 8px}
|
||
.property-tabs button{flex:1;min-width:0;border:1px solid var(--line);background:#f5f7f2;color:var(--ink);border-radius:7px;padding:0 6px;min-height:32px;font-size:12px;font-weight:600}
|
||
.property-tabs button:hover:not(:disabled){border-color:#b9c6bd}
|
||
.property-tabs [aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
|
||
.sidebar-body{flex:1;min-height:0;overflow:auto;overflow-x:hidden;padding:14px 14px 28px;container-type:inline-size}
|
||
.sidebar-view>:first-child{margin-top:0}
|
||
.sidebar-foot{flex:none;display:flex;gap:6px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);background:#fff}
|
||
.sidebar-foot .icon-button{border-color:var(--line);color:var(--ink)}
|
||
.sidebar-foot .icon-button:hover:not(:disabled){background:#eef2ea}
|
||
.sidebar-foot .secondary{flex:1;font-size:12px;padding:0 8px;min-height:34px;white-space:nowrap}
|
||
.sidebar-foot .danger-text{color:#943a2e}
|
||
.sidebar-note{flex:none;font-size:11px;line-height:1.5;color:#873e24;background:#fff4ec;border-top:1px solid #e6c3b2;margin:0;padding:10px 14px}
|
||
.panel-hint{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 12px}
|
||
.panel-note{font-size:11px;color:var(--muted);line-height:1.7;padding:12px 0}
|
||
.sidebar label{font-size:12px;margin:16px 0 6px}
|
||
.sidebar input,.sidebar select,.sidebar textarea{font-size:12px;border-radius:7px;min-width:0;max-width:100%}
|
||
.sidebar textarea{min-height:120px}
|
||
.sidebar select{padding-inline:7px;text-overflow:ellipsis}
|
||
.sidebar .field-help{font-size:11px;line-height:1.5}
|
||
.sidebar .full-width{width:100%}
|
||
.sidebar .secondary,.sidebar .primary{font-size:12px;min-height:36px}
|
||
|
||
/* ---- element library --------------------------------------------------------------------- */
|
||
#library-search,#tree-search{font-size:12px;min-height:38px;padding:8px 11px;margin:0 0 4px}
|
||
#library-found{margin:0 0 8px;min-height:0}
|
||
#library-found:empty{display:none}
|
||
.library-group+.library-group{margin-top:18px}
|
||
.library-group-title{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
|
||
.library-group:first-child .library-group-title{margin-top:8px}
|
||
.library-group-hint{font-size:11px;line-height:1.5;color:var(--muted);margin:-4px 0 8px}
|
||
.library-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
|
||
.library-buttons button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:74px;padding:10px 5px 9px;border:1px solid var(--line);border-radius:9px;background:#fbfcfa;color:var(--ink);font-size:11px;line-height:1.2;text-align:center;overflow-wrap:anywhere;min-width:0}
|
||
.library-preview{display:grid;place-items:center;width:40px;height:27px;color:var(--accent)}
|
||
.library-preview svg{width:40px;height:27px}
|
||
.library-name{min-width:0}
|
||
.library-buttons button:hover:not(:disabled){border-color:var(--accent);background:#fff;box-shadow:0 2px 10px #1b2a2414}
|
||
.library-buttons button:focus-visible{outline:2px solid #b55b12;outline-offset:1px}
|
||
.library-buttons button:disabled{opacity:.35;cursor:not-allowed}
|
||
.library-buttons button:disabled .library-preview{color:var(--muted)}
|
||
#library button[draggable=true]{cursor:grab}
|
||
#library button[draggable=true]:active{cursor:grabbing}
|
||
@container(max-width:260px){.library-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
||
.insert-hint{background:color-mix(in srgb, var(--ring,#b55b12) 9%, #fff);border:1px solid var(--ring,#b55b12);border-radius:8px;padding:9px 11px;font-size:11.5px;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)}
|
||
.preset-library{display:grid;gap:6px}
|
||
.preset-library button{display:flex;gap:10px;text-align:left;align-items:center;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fbfcfa;color:var(--ink);font-size:12px}
|
||
.preset-library button:hover:not(:disabled){border-color:var(--accent);background:#fff}
|
||
.preset-library span{font-size:16px;color:var(--accent)}
|
||
|
||
/* ---- structure --------------------------------------------------------------------------- */
|
||
.tree-tools{display:flex;flex-wrap:wrap;gap:2px;margin:4px 0 8px}
|
||
.tree-tools .text-button{font-size:11px;padding:4px 7px;min-height:26px}
|
||
.structure-list{list-style:none;margin:0;padding:0}
|
||
.structure-list .structure-list{padding-left:12px;border-left:1px solid #e5e9e3;margin-left:9px}
|
||
.structure-list li{position:relative}
|
||
.tree-item{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:1px solid transparent;background:none;color:#42584b;border-radius:6px;padding:8px 7px 8px 24px;font-size:12px;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;padding-right:84px}
|
||
.tree-icon{font-size:12px;min-width:15px}
|
||
.tree-visibility{margin-left:auto;max-width:95px;font-size:10px;font-weight:400;line-height:1.3;color:#42584b;white-space:normal}
|
||
.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;min-height:0;padding:0}
|
||
.tree-edit{position:absolute;top:5px;right:4px;z-index:1;min-height:0;padding:4px 8px;border:1px solid #c5d89a;border-radius:6px;background:#fff;color:var(--accent);font-size:11px;font-weight:700}
|
||
.tree-edit:hover{background:var(--accent);color:#fff}
|
||
.drop-target{outline:2px dashed #315b49}
|
||
|
||
/* ---- canvas ------------------------------------------------------------------------------ */
|
||
.canvas-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:#e3e7e1;overflow:hidden}
|
||
.canvas-scroll{flex:1;min-height:0;overflow:auto;padding:16px}
|
||
.canvas-scroll:focus-visible{outline:3px solid #b55b12;outline-offset:-3px}
|
||
#preview-stage{position:relative;margin:0 auto;background:#fff;box-shadow:0 8px 30px #1b2a2418;border-radius:6px;overflow:hidden}
|
||
#preview{position:absolute;top:0;left:0;border:0;background:#fff;transform-origin:top left;max-width:none;min-height:0}
|
||
.preview-status{flex:none;font-size:11px;padding:6px 14px;color:#52614f;margin:0;background:#f5f7f2;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.resizing-panels iframe{pointer-events:none}
|
||
|
||
/* ---- context menu ------------------------------------------------------------------------ */
|
||
.context-menu{position:fixed;z-index:60;min-width:210px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 40px #1b2a2433;display:grid}
|
||
.context-menu button{border:0;background:transparent;text-align:left;padding:8px 11px;min-height:0;border-radius:6px;font-size:12px;color:var(--ink);white-space:nowrap}
|
||
.context-menu button:hover,.context-menu button:focus-visible{background:#eef2ea;outline:0}
|
||
.context-menu .danger-text{color:#943a2e}
|
||
.context-menu .danger-text:hover{background:#fbeae6}
|
||
|
||
/* ---- properties -------------------------------------------------------------------------- */
|
||
.accordion-entry-list{display:grid;gap:7px;margin:12px 0}
|
||
.accordion-entry-choice{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#f7f9f3;color:var(--ink);font-size:12px;line-height:1.5;text-align:left;overflow-wrap:anywhere}
|
||
.accordion-entry-choice:hover{border-color:var(--accent);background:#edf3e7}
|
||
.design-scope{font-size:12px;font-weight:600;line-height:1.6;margin:0 0 8px;padding:9px 10px;border-left:3px solid var(--accent);background:#f1f5e7;border-radius:0 7px 7px 0}
|
||
.design-reset{margin-top:24px;white-space:normal;width:100%}
|
||
.design-group{border:1px solid var(--line);border-radius:10px;margin-top:10px;background:#fff}
|
||
.design-group>summary{cursor:pointer;padding:11px 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::-webkit-details-marker{display:none}
|
||
.design-group>summary::after{content:'+';font-size:17px;color:var(--muted)}
|
||
.design-group[open]>summary{border-bottom:1px solid var(--line)}
|
||
.design-group[open]>summary::after{content:'–'}
|
||
.design-group-body{padding:4px 14px 16px}
|
||
.design-group-body>label:first-child{margin-top:10px}
|
||
.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;line-height:1.5;flex:1;min-width:0}
|
||
/* Belegte Zeilen tragen dieselbe Farbe wie die belegten Geraetechips - eine Farbe, eine
|
||
Bedeutung: hier steht ein eigener Wert und nicht der geerbte. */
|
||
.design-own .design-row-head label{color:var(--used);font-weight:700}
|
||
.design-own .design-row-head label::before{content:'● ';color:var(--used)}
|
||
.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}
|
||
.length-control{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:6px}
|
||
.length-control input,.length-control select{font-size:12px;min-height:38px}
|
||
.length-control.is-inherited input{color:var(--muted)}
|
||
.length-mode{grid-column:1/-1}
|
||
.number-control{display:grid;grid-template-columns:minmax(0,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.
|
||
|
||
Zwei Zustaende, zwei Mittel. "Belegt" - dieses Geraet traegt einen eigenen Wert - ist die
|
||
Auskunft, die man ueber die ganze Liste hinweg sucht, und bekommt deshalb die kraeftige Farbe.
|
||
"Gerade bearbeitet" ist ein Rahmen, und zwar ein Rahmen INNEN: ein `outline` liegt ausserhalb
|
||
des Kaestchens, laeuft bei 2 px Abstand unter den Nachbarn und wird von der seitlich
|
||
beschnittenen Spalte gekappt - es sah aus wie ein abgeschnittener roter Kasten. */
|
||
.device-chips{display:flex;flex:none;gap:6px;margin-left:auto}
|
||
.device-chip{width:22px;height:22px;display:grid;place-items:center;padding:0;min-height:0;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--muted);font:700 10px/1 system-ui,sans-serif;cursor:pointer}
|
||
.device-chip:hover{border-color:var(--ink)}
|
||
.device-chip-own{background:var(--used);border-color:var(--used);color:#fff}
|
||
.device-chip[aria-pressed=true]{border-width:2px;border-color:var(--ink)}
|
||
.device-chip-own[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px #fff}
|
||
/* Der Fokusring bleibt innerhalb der Luecke zwischen zwei Chips - nichts liegt uebereinander. */
|
||
.device-chip:focus-visible{outline-width:2px;outline-offset:0}
|
||
.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%}
|
||
.design-context-toggle{margin:10px 0;width:100%;white-space:normal}
|
||
#design-search{font-size:12px;min-height:36px;padding:9px}
|
||
.search-label{font-size:11px;margin:12px 0 6px}
|
||
.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;flex-wrap:wrap;align-items:center;gap:6px;padding:6px;border-bottom:1px solid var(--line);background:#fff6e2}
|
||
.rt-link input{font-size:11px;min-height:30px}
|
||
.rt-link>input{flex:1 0 100%;min-width:0}.rt-link .check-label{margin:0;font-size:12px}.rt-link input[type=checkbox]{min-height:0;width:auto}
|
||
.selected-media-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.selected-media-list .selected-media-preview img{height:90px}.selected-media-list .text-button{font-size:11px;padding:6px}
|
||
.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)}
|
||
.image-width-control{padding:14px;margin-bottom:20px;border:1px solid var(--line);border-radius:10px;background:#f5f8f1}
|
||
.image-width-control>label{margin-top:0}.image-width-inputs{display:grid;grid-template-columns:minmax(0,1fr) 76px;align-items:center;gap:12px}
|
||
.image-width-inputs input[type=range]{width:100%;min-width:0;margin:0;padding:0;accent-color:var(--accent);min-height:36px}.image-width-control .field-help{margin:8px 0}.image-width-control .text-button{margin-top:4px}.image-width-error{color:#a62424}
|
||
|
||
/* --------------------------------------------------------------------------------------------
|
||
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:#5c6b62;color:#fff;font:600 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-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}
|
||
.ov-drop-label{position:absolute;pointer-events:none;background:#2c634a;color:#fff;border-radius:5px;padding:6px 9px;font:600 12px/1.4 system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 7px #0002}
|
||
/* The border between two columns of the selected row: a grab area with a short bar in it. */
|
||
.ov-resize{position:absolute;display:grid;place-items:center;padding:0;min-height:0;border:0;background:transparent;cursor:col-resize;pointer-events:auto;touch-action:none}
|
||
.ov-resize::before{content:"";width:4px;height:40px;max-height:60%;border-radius:2px;background:var(--ring,#b55b12);box-shadow:0 0 0 1px #fff8;opacity:.55;transition:opacity .12s}
|
||
.ov-resize:hover::before,.ov-resize:focus-visible::before,.canvas-overlay.is-resizing .ov-resize::before{opacity:1}
|
||
.ov-resize:focus-visible{outline:2px solid var(--ring,#b55b12);outline-offset:-2px}
|
||
.canvas-overlay.is-resizing .ov-hover,.canvas-overlay.is-resizing .ov-toolbar,.canvas-overlay.is-resizing .ov-insert{display: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,.canvas-overlay.is-dragging .ov-resize{display:none}
|
||
@media(prefers-reduced-motion:reduce){.ov-insert{transition:none;opacity:1}}
|
||
|
||
/* ---- narrow screens ---------------------------------------------------------------------- */
|
||
@media(max-width:1100px){.editor-layout{grid-template-columns:290px minmax(0,1fr)}.editor-page-name{width:150px}.save-actions>span{display:none}.viewport-controls button span{display:none}.viewport-controls button{padding:0 9px}}
|
||
@media(max-width:850px){
|
||
.editor-body{overflow:auto}#editor{height:auto;min-height:100dvh}
|
||
.editor-header{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}.editor-page-name{flex:1;width:auto}.viewport-controls{order:6;margin:0}.save-actions{margin-left:auto}
|
||
.editor-layout{display:flex;flex-direction:column}
|
||
.canvas-panel{height:62vh;flex:none}.sidebar{height:62vh;flex:none;border-right:0;border-top:1px solid var(--line)}
|
||
.library-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
|
||
}
|