kantarciandClaude Fable 5.1
a1f8b905cd
The editor follows the Flatsome UX Builder: dark top bar with the device switch, one sidebar with tabs for elements, structure and page, an element view with breadcrumbs, property tabs and actions, element cards, a context menu in the preview and keyboard shortcuts that also work inside the preview. Entrance and hover effects play for every visitor unless the website chooses to respect the browser's reduced-motion preference (setting "motion", class "motion-respect" on <html>). Waiting blocks stay hidden until they scroll into view and are shown at once when the reader jumps past them. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
293 lines
26 KiB
CSS
293 lines
26 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. */
|
||
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}
|
||
|
||
/* ---- media library dialog (unchanged) ---------------------------------------------------- */
|
||
.media-launch{margin-top:14px;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}}
|
||
|
||
/* ---- 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}
|
||
.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}
|
||
.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. */
|
||
.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%}
|
||
.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}
|
||
/* 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}
|
||
@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))}
|
||
}
|