/* ============================================================================ * WebsiteEZI V2 - editor chrome. Theme-aware: Bootstrap components + only the * CORE --bs-* tokens (see docs/PROJECT_GUIDE.md "Build theme-aware UI"). * Never hardcode structural colours. Author: Claude / Bill Created: 18-07-26 * ========================================================================== */ .wsv2-app { display: flex; flex-direction: column; height: calc(100vh - 120px); min-height: 520px; background: var(--bs-body-bg); color: var(--bs-body-color); } .wsv2-toolbar { background: rgba(var(--bs-body-color-rgb), .03); } /* Outline-secondary buttons (section palette, rich-text toolbar, device/code/view toolbar) inherit the THEME'S secondary colour, which is low-contrast on dark themes (e.g. Darkly's secondary is #444 → grey-on-dark, near-invisible). Re-base the builder's ones on --bs-body-color (the only token that contrasts on light AND dark), via Bootstrap 5.3's button CSS vars. Semantic buttons (primary/success/…) keep their own colours. */ .wsv2-app .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: rgba(var(--bs-body-color-rgb), .35); --bs-btn-hover-color: var(--bs-body-bg); --bs-btn-hover-bg: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-body-color); --bs-btn-active-color: var(--bs-body-bg); --bs-btn-active-bg: var(--bs-body-color); --bs-btn-active-border-color: var(--bs-body-color); } /* muted labels/hints (e.g. the "View" device-bar label) — the theme's secondary text colour can wash out on dark themes; base it on body-color instead. */ .wsv2-app .text-secondary, .wsv2-app .text-muted { color: rgba(var(--bs-body-color-rgb), .65) !important; } .wsv2-body { flex: 1 1 auto; min-height: 0; } .wsv2-left, .wsv2-right { width: 240px; flex: 0 0 240px; overflow-y: auto; background: rgba(var(--bs-body-color-rgb), .02); } /* Drag-to-resize handles either side of the canvas (Pages/Sections <-> canvas <-> Properties) - saveWidths()/loadWidths() (editor.js) persist the chosen widths per-browser (localStorage), so the split stays put next time this user opens the editor. Widened hit target (10px) over a thin visible line (2px) - a bare 2px strip is hard to grab precisely with a mouse. */ .wsv2-resizer { flex: 0 0 10px; width: 10px; cursor: col-resize; position: relative; background: transparent; z-index: 3; } .wsv2-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: var(--bs-border-color); } .wsv2-resizer:hover::after, .wsv2-resizer.wsv2-resizing::after { background: var(--bs-primary); } /* Slide-out panel mode (Settings popup, editor.js applyEditorSettings()) - an alternative to the default docked layout above. The panel leaves normal flex flow (so .wsv2-center reclaims its width for free, same as a resize) and sits as an overlay that slides in from its edge on demand via an edge-tab handle button. Docked mode (no .wsv2-slideout class) is untouched by any of this. */ .wsv2-left.wsv2-slideout, .wsv2-right.wsv2-slideout { position: absolute; top: 0; bottom: 0; z-index: 15; box-shadow: 0 0 24px rgba(0, 0, 0, .25); transition: transform .2s ease; /* Docked mode's default background (rgba(--bs-body-color-rgb, .02), just above) is a near-transparent tint - fine sitting on a solid ancestor background, but as an overlay it let the canvas iframe underneath (the WEBSITE's own theme, not the editor's) show straight through. Needs to be fully opaque here, using the editor's own --bs-body-bg (the same token .wsv2-slideout-handle already uses) so the panel always reflects the WEZI editor's theme, never the site's. */ background: var(--bs-body-bg); } .wsv2-left.wsv2-slideout { left: 0; transform: translateX(-100%); } .wsv2-right.wsv2-slideout { right: 0; transform: translateX(100%); } .wsv2-left.wsv2-slideout.wsv2-open, .wsv2-right.wsv2-slideout.wsv2-open { transform: translateX(0); } .wsv2-slideout-handle { display: none; /* shown only for the side currently in slideout mode - see applyEditorSettings() */ position: absolute; top: 50%; transform: translateY(-50%); z-index: 14; width: 28px; height: 48px; padding: 0; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); opacity: .85; } .wsv2-slideout-handle:hover { opacity: 1; } .wsv2-slideout-handle-left { left: 0; border-radius: 0 6px 6px 0; border-left: 0; } .wsv2-slideout-handle-right { right: 0; border-radius: 6px 0 0 6px; border-right: 0; } /* Pin button (each panel's own head, editor.js togglePanelMode()) - same effect as Settings' panel-mode dropdown, right where the panel is. Pinned (docked) reads as "engaged" (tinted, upright pin); slide-out is the plain default with the pin rotated 45deg, the common "unpinned" idiom. */ .wsv2-pin-btn i { transition: transform .15s ease; } .wsv2-pin-btn:not(.wsv2-pinned) i { transform: rotate(45deg); } .wsv2-pin-btn.wsv2-pinned { background: rgba(var(--bs-primary-rgb), .15); border-color: var(--bs-primary); color: var(--bs-primary); } .wsv2-center { min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; /* a fixed-height tablet/phone frame (.wsv2-canvas-wrap.wsv2-device) can be taller than the visible editor - scroll rather than clip it */ padding: 12px 16px; background: rgba(var(--bs-body-color-rgb), .05); } .wsv2-rte { flex: 0 0 auto; } /* Moved from above the canvas into the (narrow, 240px) Properties panel - stays pinned to the top of that panel's own scroll area rather than scrolling out of view with the rest of Properties, and wraps onto extra rows (Bootstrap's .btn-toolbar is flex-wrap:wrap already) instead of overflowing the panel width. */ .wsv2-right .wsv2-rte { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); } .wsv2-center > .wsv2-canvas-wrap { flex: 1 1 auto; min-height: 0; } .wsv2-panel { border-bottom: 1px solid var(--bs-border-color); } .wsv2-panel-head { padding: .5rem .75rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-body-color); /* body-color contrasts on any theme; secondary/-emphasis do not */ opacity: .85; border-bottom: 1px solid var(--bs-border-color); } /* Navigator: page-structure tree docked above Properties (systemEZI_website_v2.asp). Kept deliberately compact - small text, tight rows, capped height with its own scroll so a long page's section list never pushes Properties out of reach. */ .wsv2-navigator { max-height: 180px; overflow-y: auto; border-bottom: 1px solid var(--bs-border-color); font-size: .78rem; } .wsv2-nav-node { display: flex; align-items: center; gap: .3rem; padding: .2rem .5rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wsv2-nav-node:hover { background: rgba(var(--bs-body-color-rgb), .06); } .wsv2-nav-node.wsv2-nav-active { background: rgba(var(--bs-primary-rgb), .15); color: var(--bs-primary); font-weight: 600; } .wsv2-nav-caret { width: 12px; font-size: .7rem; opacity: .7; flex: 0 0 auto; } .wsv2-nav-icon { width: 14px; text-align: center; opacity: .8; flex: 0 0 auto; } .wsv2-nav-item { padding-left: 1.6rem; opacity: .9; } .wsv2-nav-item-dash { font-size: .5rem; opacity: .6; flex: 0 0 auto; } /* subtle "click to add" hint beside the Sections heading (theme-aware via body-color) */ .wsv2-panel-hint { margin-left: .45rem; font-size: .72rem; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .6; } .wsv2-page-list { display: flex; flex-direction: column; gap: 2px; } .wsv2-page-item { cursor: pointer; font-size: .9rem; color: var(--bs-body-color); /* keep page names readable on light AND dark themes */ } .wsv2-page-item:hover { background: rgba(var(--bs-body-color-rgb), .10); } /* active = tint + accent bar; text stays body-color (some themes' --bs-primary is dark, e.g. Slate) ⚠ The BAR is deliberately not --bs-primary. It sits on a rgba(--bs-primary,.20) tint — the same hue at two saturations — which is the "more of the same veil" failure PROJECT_GUIDE warns about. Measured 2026-08-21 across 12 Bootswatch themes: worst case 1.20, failing 3:1 on SIX (darkly, slate, vapor, morph, quartz, minty — note morph and minty are LIGHT). Two tones cannot fail: for any backdrop one of black/white clears 3:1. The tint stays as the colour accent; the bar is the cue you can rely on. See PROJECT_GUIDE "Build theme-aware UI". */ .wsv2-page-item.active { background: rgba(var(--bs-primary-rgb), .20); color: var(--bs-body-color); font-weight: 600; box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, .9), inset 4px 0 0 0 rgba(255, 255, 255, .9); } /* nested drag-and-drop page tree (reorder + one-level sub-menu nesting) */ #wsv2-page-tree { display: flex; flex-direction: column; gap: 2px; } .wsv2-page-node { display: flex; flex-direction: column; } .wsv2-page-children { display: flex; flex-direction: column; gap: 2px; padding-left: 1.25rem; min-height: 6px; /* keeps an EMPTY sub-menu strip a real, visible drop target */ } .wsv2-page-drag { cursor: grab; } .wsv2-page-drag:active { cursor: grabbing; } .wsv2-page-item .fa-eye-slash { opacity: .7; } .wsv2-page-node.sortable-ghost { opacity: .4; } .wsv2-page-node.sortable-chosen .wsv2-page-item { outline: 1px dashed rgba(var(--bs-primary-rgb), .5); } .wsv2-canvas-wrap { width: 100%; max-width: 100%; background: #fff; /* the site being edited owns its own theme */ box-shadow: 0 0 0 1px var(--bs-border-color), 0 6px 24px rgba(0,0,0,.12); transition: max-width .2s ease; } .wsv2-canvas { width: 100%; height: 100%; border: 0; display: block; } /* device-preview frame (phone/tablet) — a dark bezel around the canvas. flex: 0 0 auto overrides .wsv2-center > .wsv2-canvas-wrap's flex:1 1 auto - a real tablet/phone has a FIXED height, it doesn't stretch to fill whatever vertical space the editor window happens to have (the previous bug). */ .wsv2-canvas-wrap.wsv2-device { flex: 0 0 auto; padding: 12px; border-radius: 22px; background: #1b1b1d; box-shadow: 0 8px 30px rgba(0,0,0,.35); } .wsv2-canvas-wrap.wsv2-device .wsv2-canvas { border-radius: 12px; } .wsv2-code-wrap { height: 100%; display: flex; flex-direction: column; min-height: 0; } .wsv2-code-head { padding: 6px 10px; color: var(--bs-secondary-color); background: rgba(var(--bs-body-color-rgb), .04); border-bottom: 1px solid var(--bs-border-color); } /* code editors carry their own dark scheme regardless of app theme (readability) */ .wsv2-code-pre { flex: 1 1 auto; min-height: 0; margin: 0; overflow: auto; background: #1e1e1e; color: #d4d4d4; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.5; padding: 12px 14px; tab-size: 2; white-space: pre; } .wsv2-code-pre .wc-tag { color: #569cd6; } .wsv2-code-pre .wc-attr { color: #9cdcfe; } .wsv2-code-pre .wc-str { color: #ce9178; } .wsv2-code-pre .wc-com { color: #6a9955; font-style: italic; } /* CodeMirror (per-section HTML editor) fills the code panel */ .wsv2-code-wrap .CodeMirror { flex: 1 1 auto; min-height: 0; height: 100%; font-size: .82rem; } /* editable per-section code box (fallback when CodeMirror is unavailable) */ .wsv2-code-ta { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; resize: none; outline: none; background: #1e1e1e; color: #d4d4d4; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.5; padding: 12px 14px; tab-size: 2; white-space: pre; } /* SEO Site Audit report panel - same show/hide convention as .wsv2-code-wrap (toggleCode()) via a new sibling #wsv2-seo-wrap; header+chips+recommendations stay fixed, only the issues list scrolls. */ .wsv2-seo-wrap { height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--bs-body-bg); } .wsv2-seo-loading { height: 100%; padding: 2rem; } /* Site Health score: just the NUMBER lives inside the ring (a 72px circle trying to also fit a 2-line "Site Health" label had nowhere to put it and visibly overflowed the border - matches the reference screenshots, which put that label OUTSIDE/below the ring, not inside it). */ .wsv2-seo-scorecircle-wrap { flex: 0 0 auto; } .wsv2-seo-scorecircle { width: 80px; height: 80px; border-radius: 50%; border-width: 4px !important; display: flex; align-items: center; justify-content: center; } .wsv2-seo-scorenum { font-size: 1.5rem; font-weight: 700; line-height: 1; } /* Smaller variant for the 4-up PageSpeed Insights scores (renderPageSpeedResult, editor.js) - same ring styling as the main Site Health circle above, just sized to sit four-across in a popup instead of alone in the panel header. */ .wsv2-seo-scorecircle-sm { width: 56px; height: 56px; border-radius: 50%; border-width: 3px !important; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .wsv2-seo-scorecircle-sm .wsv2-seo-scorenum { font-size: 1.1rem; } .wsv2-seo-chips { border-bottom: 1px solid var(--bs-border-color); } .wsv2-seo-chip { font-size: .85rem; } .wsv2-seo-chip strong { font-size: 1rem; } .wsv2-seo-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 1rem; } /* Both accordions in this panel (issue-group and per-page) reuse Bootstrap's stock .accordion-flush markup (sectionTypeGridHtml's own convention) - trimmed down here to fit this narrow side panel, which the default accordion-button padding/size was built for a full-width page, not a ~380px drawer. */ .wsv2-seo-scroll .accordion-button { font-size: .85rem; padding: .6rem .75rem; } .wsv2-seo-scroll .accordion-button:not(.collapsed) { box-shadow: none; } .wsv2-seo-scroll .accordion-body { padding: .5rem 0; } /* PageSpeed score badges (Perf/A11y/BP/SEO) + every other status/position badge in this panel (Fixed/Ignored, In title/In heading/...) inherit Bootstrap's default .badge size, which is sized relative to the surrounding text - fine in a full-width page, oversized sitting in a ~380px accordion header next to compact page-name text (reported live 2026-08-30). */ .wsv2-seo-scroll .badge { font-size: .68rem; padding: .3em .5em; font-weight: 600; } .wsv2-seo-issue { padding: .6rem 1rem; border-bottom: 1px solid var(--bs-border-color); } .wsv2-seo-issue-body { margin-top: .15rem; } /* Pages & Keywords: one row per keyword, same hover convention as .wsv2-nav-node/.wsv2-website-row - makes it obvious which keyword the delete button on the right edge of the row belongs to. */ .wsv2-kw-row { padding: .15rem .3rem; margin: 0 -.3rem .1rem; border-radius: .25rem; } .wsv2-kw-row:hover { background: rgba(var(--bs-body-color-rgb), .06); } .wsv2-seo-pagelist { margin: .5rem 0 0; } /* per-page action cluster (Auto Fix / Fix / Open page / Ignore) can be up to 3 buttons - a touch more vertical room + wrap-friendly gap than the old single- button-per-row layout needed. */ .wsv2-seo-pagelist li { padding: .4rem 0; border-top: 1px dashed var(--bs-border-color); gap: .5rem; } .wsv2-seo-pagelist li:first-child { border-top: 0; } .wsv2-seo-row-fixed, .wsv2-seo-row-dismissed { opacity: .55; } /* Website picker (toolbar): current-website label + dropdown-toggle, with New/AI Build/Import + the full site list inside the menu (was a flat row of buttons + a