3392 lines
95 KiB
CSS
3392 lines
95 KiB
CSS
/* ==========================================================================
|
|
Craft.js Site Builder — Dark Theme
|
|
Base: #16161a | Accent: #3b82f6 | Text: #e4e4e7 | Border: #2d2d3a
|
|
========================================================================== */
|
|
|
|
/* --------------------------------------------------------------------------
|
|
CSS Variables
|
|
-------------------------------------------------------------------------- */
|
|
:root {
|
|
--color-bg-base: #16161a;
|
|
--color-bg-surface: #1c1c24;
|
|
--color-bg-elevated: #22222c;
|
|
--color-bg-canvas: #0f0f14;
|
|
--color-bg-hover: #3f3f46;
|
|
--color-bg-active: #2d2d3a;
|
|
--color-border: #2d2d3a;
|
|
--color-border-light: #3f3f46;
|
|
--color-text: #e4e4e7;
|
|
--color-text-muted: #8b8b96;
|
|
--color-text-dim: #6e6e78;
|
|
--color-accent: #3b82f6;
|
|
--color-accent-hover: #2563eb;
|
|
--color-accent-subtle: rgba(59, 130, 246, 0.12);
|
|
--color-danger: #ef4444;
|
|
--color-success: #10b981;
|
|
--topbar-height: 50px;
|
|
--panel-left-width: 260px;
|
|
--panel-right-width: 320px;
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
--transition-fast: 0.15s ease;
|
|
--transition-normal: 0.25s ease;
|
|
/* Phase A (mobile): fixed bottom tab bar height, used to size
|
|
.editor-container and the safe-area padding math below. */
|
|
--mobile-tabbar-height: 58px;
|
|
/* Phase B fast-follow item 4: rendered height of `.mobile-selection-toolbar`
|
|
(44px min-height content + 4px top/bottom padding + 1px border) -- used
|
|
to pad the canvas scroll area clear of it while it's visible, see
|
|
`.editor-canvas.has-mobile-selection-toolbar` below. */
|
|
--mobile-selection-toolbar-height: 53px;
|
|
|
|
/* Mobile-A2: explicit overlay layer scale (was ad-hoc numbers scattered
|
|
across the mobile block + Modal.tsx, causing accidental stacking --
|
|
e.g. the Templates modal getting trapped under the tab bar inside
|
|
.topbar's own stacking context). Higher = closer to the user.
|
|
--z-selection-toolbar is reserved for Phase B's selection toolbar. */
|
|
--z-sheet-backdrop: 400;
|
|
--z-tabbar: 500;
|
|
--z-selection-toolbar: 600;
|
|
--z-modal: 5000;
|
|
--z-overflow: 10000;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Modals (shared by Modal.tsx -- TemplateModal, HeadCodeModal, SitesmithModal)
|
|
-------------------------------------------------------------------------- */
|
|
.modal-backdrop {
|
|
z-index: var(--z-modal);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Reset & Base
|
|
-------------------------------------------------------------------------- */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 13px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-base);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Editor App — Full Viewport
|
|
-------------------------------------------------------------------------- */
|
|
.editor-app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: var(--color-bg-base);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Top Navigation Bar
|
|
-------------------------------------------------------------------------- */
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: var(--topbar-height);
|
|
min-height: var(--topbar-height);
|
|
padding: 0 12px;
|
|
background: var(--color-bg-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
z-index: 100;
|
|
gap: 12px;
|
|
/* Positioned ancestor for .publish-warnings (position: absolute; top:
|
|
100%), which is rendered as this <nav>'s first child in both the
|
|
desktop and mobile branches -- without this, it would anchor to the
|
|
viewport instead of sitting directly under the topbar. */
|
|
position: relative;
|
|
}
|
|
|
|
.topbar-left,
|
|
.topbar-center,
|
|
.topbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.topbar-left {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topbar-center {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.topbar-right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.topbar-title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.topbar-domain {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
font-size: 11px;
|
|
color: var(--color-text-muted);
|
|
background: var(--color-bg-active);
|
|
border-radius: 10px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 180px;
|
|
}
|
|
|
|
/* Top Bar Buttons */
|
|
.topbar-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background var(--transition-fast), border-color var(--transition-fast),
|
|
color var(--transition-fast);
|
|
text-decoration: none;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.topbar-btn:hover {
|
|
background: var(--color-bg-hover);
|
|
border-color: var(--color-border-light);
|
|
}
|
|
|
|
.topbar-btn:active {
|
|
background: var(--color-bg-active);
|
|
}
|
|
|
|
.topbar-btn:disabled {
|
|
opacity: 0.35;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.topbar-btn:disabled:hover {
|
|
background: transparent;
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
.topbar-btn.primary {
|
|
background: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.topbar-btn.primary:hover {
|
|
background: var(--color-accent-hover);
|
|
border-color: var(--color-accent-hover);
|
|
}
|
|
|
|
.topbar-btn.primary:active {
|
|
background: #1d4ed8;
|
|
}
|
|
|
|
.topbar-btn.back-btn {
|
|
border-color: transparent;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.topbar-btn.back-btn:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-bg-hover);
|
|
}
|
|
|
|
/* Top Bar Divider */
|
|
.topbar-divider {
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 24px;
|
|
background: var(--color-border);
|
|
margin: 0 4px;
|
|
}
|
|
|
|
/* Icon-only topbar buttons (Show Guides, Code, Preview) -- square-ish
|
|
footprint instead of the label+icon pill, tooltip via [data-tooltip]. */
|
|
.topbar-btn.icon-only {
|
|
gap: 0;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.topbar-btn.guides-toggle.active {
|
|
color: var(--color-accent);
|
|
background: var(--color-accent-subtle);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Device Switcher
|
|
-------------------------------------------------------------------------- */
|
|
.device-switcher {
|
|
display: flex;
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.device-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 32px;
|
|
font-size: 14px;
|
|
color: var(--color-text-muted);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
|
|
.device-btn:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-bg-hover);
|
|
}
|
|
|
|
.device-btn.active {
|
|
color: var(--color-accent);
|
|
background: var(--color-accent-subtle);
|
|
}
|
|
|
|
.device-btn + .device-btn {
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Editor Container (3-column layout)
|
|
-------------------------------------------------------------------------- */
|
|
.editor-container {
|
|
display: flex;
|
|
flex: 1;
|
|
height: calc(100vh - var(--topbar-height));
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Left Panel
|
|
-------------------------------------------------------------------------- */
|
|
.panel-left {
|
|
width: var(--panel-left-width);
|
|
min-width: var(--panel-left-width);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-bg-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Right Panel
|
|
-------------------------------------------------------------------------- */
|
|
.panel-right {
|
|
width: var(--panel-right-width);
|
|
min-width: var(--panel-right-width);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-bg-surface);
|
|
border-left: 1px solid var(--color-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Panel Tabs
|
|
-------------------------------------------------------------------------- */
|
|
.panel-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-bg-surface);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.panel-tab {
|
|
flex: 1;
|
|
padding: 10px 0;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-muted);
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
transition: color var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.panel-tab:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.panel-tab.active {
|
|
color: var(--color-accent);
|
|
border-bottom-color: var(--color-accent);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Panel Content
|
|
-------------------------------------------------------------------------- */
|
|
.panel-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Panel Placeholder
|
|
-------------------------------------------------------------------------- */
|
|
.panel-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 120px;
|
|
color: var(--color-text-dim);
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Canvas Area
|
|
-------------------------------------------------------------------------- */
|
|
.editor-canvas {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background: var(--color-bg-canvas);
|
|
padding: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
.canvas-device-frame {
|
|
background: #ffffff;
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.4);
|
|
border-radius: 2px;
|
|
min-height: 100%;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
CANVAS = PUBLISHED BASE RESET
|
|
Published pages and Preview ship a reset in the document head
|
|
(utils/css-reset.ts CSS_RESET: `*{margin:0;padding:0}`, img{display:block},
|
|
a{color:inherit}, body line-height 1.6 / colour #1f2937 / 16px). The editor
|
|
canvas lives inside the editor document, whose own body is 13px editor
|
|
chrome with no such reset, so content looked different (default h1-h6/p/ul
|
|
margins, `normal` line-height, 13px inherited text). This block gives the
|
|
canvas FRAME -- the <body> stand-in -- and everything inside it the same
|
|
defaults.
|
|
Rules:
|
|
- Every selector is ZERO specificity (:where). The published reset is `*`
|
|
(specificity 0), so component inline styles and class rules beat it; a
|
|
plain `.canvas-device-frame *` (0,1,0) would instead beat component
|
|
<style> class rules and editor chrome rules. Do NOT remove the :where().
|
|
- Scoped to the frame, never body/:root, so panels, toolbars and Craft
|
|
overlays (all rendered outside the frame) are untouched. Editor-only
|
|
elements inside the frame style themselves with classes / inline styles,
|
|
which outrank this block.
|
|
- Declarations come from utils/css-reset.ts; css-reset.test.ts fails if
|
|
this block and that module drift apart. The font-family / colour tokens
|
|
are layered on top by CanvasTokenStyle exactly as the published head
|
|
layers them over the reset.
|
|
========================================================================== */
|
|
.canvas-device-frame {
|
|
font-size: 16px; /* UA default a published <body> gets; editor body is 13px */
|
|
font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
|
|
line-height:1.6;
|
|
color:#1f2937;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
:where(.canvas-device-frame) :where(*),
|
|
:where(.canvas-device-frame) ::before,
|
|
:where(.canvas-device-frame) ::after {
|
|
box-sizing:border-box;margin:0;padding:0;
|
|
}
|
|
:where(.canvas-device-frame) :where(img) {
|
|
max-width:100%;height:auto;display:block;
|
|
}
|
|
:where(.canvas-device-frame) :where(a) {
|
|
color:inherit;
|
|
}
|
|
/* END CANVAS = PUBLISHED BASE RESET */
|
|
|
|
/* --------------------------------------------------------------------------
|
|
No Selection Message
|
|
-------------------------------------------------------------------------- */
|
|
.no-selection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--color-text-dim);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.no-selection i {
|
|
display: block;
|
|
font-size: 28px;
|
|
margin-bottom: 12px;
|
|
opacity: 0.25;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.no-selection p {
|
|
margin: 0;
|
|
max-width: 180px;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Guided Styles
|
|
-------------------------------------------------------------------------- */
|
|
.guided-styles {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.guided-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.guided-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.guided-section-label {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.guided-type-header {
|
|
margin-bottom: 16px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.guided-type-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-elevated);
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.guided-type-badge i {
|
|
color: var(--color-accent);
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* Preset grid: 4 columns for swatches/buttons */
|
|
.preset-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.preset-grid.align-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.preset-grid.gradient-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
/* Circular/square color swatch */
|
|
.preset-swatch {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
border-radius: var(--radius-sm);
|
|
border: 2px solid var(--color-border);
|
|
cursor: pointer;
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
padding: 0;
|
|
font-size: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.preset-swatch:hover {
|
|
border-color: #a1a1aa;
|
|
}
|
|
|
|
.preset-swatch.active {
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 0 0 2px var(--color-accent);
|
|
}
|
|
|
|
.preset-swatch.gradient-swatch {
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
color: #a1a1aa;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Text preset button */
|
|
.preset-btn {
|
|
padding: 6px 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-bg-elevated);
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.preset-btn:hover {
|
|
border-color: #a1a1aa;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-hover);
|
|
}
|
|
|
|
.preset-btn.active {
|
|
border-color: var(--color-accent);
|
|
background: var(--color-accent);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.preset-btn.apply-btn {
|
|
flex-shrink: 0;
|
|
padding: 6px 12px;
|
|
background: var(--color-accent);
|
|
color: #ffffff;
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.preset-btn.apply-btn:hover {
|
|
background: #2563eb;
|
|
}
|
|
|
|
/* Guided input field */
|
|
.guided-input {
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
background: var(--color-bg-elevated);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
outline: none;
|
|
transition: border-color var(--transition-fast);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.guided-input:focus {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.guided-input::placeholder {
|
|
color: var(--color-text-dim);
|
|
}
|
|
|
|
/* Input row with Apply button */
|
|
.guided-input-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.guided-input-row .guided-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Save status indicator in topbar */
|
|
.save-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
padding: 4px 8px;
|
|
border-radius: var(--radius-sm);
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
.save-indicator.saved {
|
|
color: #10b981;
|
|
}
|
|
|
|
.save-indicator.error {
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* Publish button */
|
|
.topbar-btn.publish {
|
|
background: #10b981;
|
|
border-color: #10b981;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.topbar-btn.publish:hover {
|
|
background: #059669;
|
|
border-color: #059669;
|
|
}
|
|
|
|
.topbar-btn.publish:active {
|
|
background: #047857;
|
|
}
|
|
|
|
.topbar-btn.publish:disabled {
|
|
background: #6b7280;
|
|
border-color: #6b7280;
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Draft/Published badge */
|
|
.publish-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.3px;
|
|
text-transform: uppercase;
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
.publish-badge.draft {
|
|
background: rgba(245, 158, 11, 0.15);
|
|
color: #f59e0b;
|
|
border: 1px solid rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.publish-badge.published {
|
|
background: rgba(16, 185, 129, 0.15);
|
|
color: #10b981;
|
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-2px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Block Categories
|
|
-------------------------------------------------------------------------- */
|
|
.block-category {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.block-category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm);
|
|
transition: background var(--transition-fast);
|
|
user-select: none;
|
|
}
|
|
|
|
.block-category-header:hover {
|
|
background: var(--color-bg-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.block-category-header .chevron {
|
|
font-size: 10px;
|
|
transition: transform var(--transition-fast);
|
|
}
|
|
|
|
.block-category-header.collapsed .chevron {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.block-category-items {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.block-category-items.collapsed {
|
|
display: none;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Block Grid
|
|
-------------------------------------------------------------------------- */
|
|
.block-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px;
|
|
padding: 4px 0 12px;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Block Item (draggable card)
|
|
-------------------------------------------------------------------------- */
|
|
.block-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 12px 8px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
cursor: grab;
|
|
transition: border-color var(--transition-fast), background var(--transition-fast),
|
|
box-shadow var(--transition-fast);
|
|
user-select: none;
|
|
}
|
|
|
|
.block-item:hover {
|
|
border-color: var(--color-accent);
|
|
background: var(--color-accent-subtle);
|
|
box-shadow: 0 0 0 1px var(--color-accent);
|
|
}
|
|
|
|
.block-item:active {
|
|
cursor: grabbing;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.block-item-icon {
|
|
font-size: 20px;
|
|
color: var(--color-text-muted);
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.block-item:hover .block-item-icon {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.block-item-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--color-text-muted);
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.block-item:hover .block-item-label {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Color Preset Buttons
|
|
-------------------------------------------------------------------------- */
|
|
.color-presets {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.color-preset {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-border);
|
|
cursor: pointer;
|
|
transition: border-color var(--transition-fast), transform var(--transition-fast),
|
|
box-shadow var(--transition-fast);
|
|
position: relative;
|
|
}
|
|
|
|
.color-preset:hover {
|
|
border-color: var(--color-text-muted);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.color-preset.active {
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 0 0 2px var(--color-accent-subtle);
|
|
}
|
|
|
|
.color-preset::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 2px;
|
|
border-radius: 50%;
|
|
background: inherit;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Size Preset Buttons
|
|
-------------------------------------------------------------------------- */
|
|
.size-presets {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.size-preset {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 36px;
|
|
height: 30px;
|
|
padding: 0 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--color-text-muted);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.size-preset:hover {
|
|
color: var(--color-text);
|
|
border-color: var(--color-border-light);
|
|
background: var(--color-bg-hover);
|
|
}
|
|
|
|
.size-preset.active {
|
|
color: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
background: var(--color-accent-subtle);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Gradient Presets
|
|
-------------------------------------------------------------------------- */
|
|
.gradient-presets {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.gradient-preset {
|
|
width: 100%;
|
|
aspect-ratio: 1.6;
|
|
border-radius: var(--radius-sm);
|
|
border: 2px solid var(--color-border);
|
|
cursor: pointer;
|
|
transition: border-color var(--transition-fast), transform var(--transition-fast);
|
|
}
|
|
|
|
.gradient-preset:hover {
|
|
border-color: var(--color-text-muted);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.gradient-preset.active {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Font Family Presets
|
|
-------------------------------------------------------------------------- */
|
|
.font-presets {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.font-preset {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 6px 8px;
|
|
font-size: 12px;
|
|
color: var(--color-text-muted);
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.font-preset:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-bg-hover);
|
|
}
|
|
|
|
.font-preset.active {
|
|
color: var(--color-accent);
|
|
background: var(--color-accent-subtle);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Form Controls
|
|
-------------------------------------------------------------------------- */
|
|
.control-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.control-label {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--color-text-muted);
|
|
margin-bottom: 6px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.control-input {
|
|
width: 100%;
|
|
padding: 7px 10px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
outline: none;
|
|
transition: border-color var(--transition-fast);
|
|
}
|
|
|
|
.control-input:focus {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.control-input::placeholder {
|
|
color: var(--color-text-dim);
|
|
}
|
|
|
|
.control-select {
|
|
width: 100%;
|
|
padding: 7px 10px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
outline: none;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 8px center;
|
|
padding-right: 28px;
|
|
}
|
|
|
|
.control-select:focus {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Slider Control
|
|
-------------------------------------------------------------------------- */
|
|
.control-slider {
|
|
width: 100%;
|
|
height: 4px;
|
|
appearance: none;
|
|
background: var(--color-bg-active);
|
|
border-radius: 2px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.control-slider::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
border: 2px solid var(--color-bg-surface);
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.control-slider::-moz-range-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
border: 2px solid var(--color-bg-surface);
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Toggle Switch
|
|
-------------------------------------------------------------------------- */
|
|
.toggle-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 36px;
|
|
height: 20px;
|
|
}
|
|
|
|
.toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-track {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--color-bg-active);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
.toggle-track::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
transition: transform var(--transition-fast);
|
|
}
|
|
|
|
.toggle-switch input:checked + .toggle-track {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.toggle-switch input:checked + .toggle-track::after {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Editor Visual Guides — dashed outlines for real drop targets only
|
|
-------------------------------------------------------------------------- */
|
|
|
|
/* Only actual Craft.js droppable containers get a guide outline -- these are
|
|
tagged with `data-craft-node` in RenderNode.tsx (the `<Editor onRender>`
|
|
override) based on `node.data.isCanvas`, not a blanket tag selector. A
|
|
component's own internal wrapper `<div>`s (e.g. Section's inner max-width
|
|
container) are real DOM elements but not Craft nodes, so they never get
|
|
this attribute and never get a guide outline -- this is what stops
|
|
finished sections from showing 3-4 nested dashed boxes. */
|
|
.canvas-device-frame [data-craft-node] {
|
|
outline: 1px dashed rgba(148, 163, 184, 0.2);
|
|
outline-offset: -1px;
|
|
transition: outline-color 0.15s;
|
|
}
|
|
|
|
/* Rows (flex containers) get a slightly more visible border */
|
|
.canvas-device-frame [data-craft-node][style*="display: flex"],
|
|
.canvas-device-frame [data-craft-node][style*="display:flex"] {
|
|
outline: 1px dashed rgba(148, 163, 184, 0.35);
|
|
}
|
|
|
|
/* Empty containers: more visible + minimum height so they're clickable */
|
|
.canvas-device-frame [data-craft-node]:empty {
|
|
outline: 2px dashed rgba(148, 163, 184, 0.4);
|
|
min-height: 60px;
|
|
}
|
|
|
|
/* Hover highlights */
|
|
.canvas-device-frame [data-craft-node]:hover {
|
|
outline-color: rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
/* `data-craft-hovered` is set (presence, no value) in RenderNode.tsx,
|
|
mirroring Craft's own `hovered` node event. Craft.js's `connectors.connect()`
|
|
(called by every component) wires that event to a native
|
|
mouseover/mouseleave listener on each node's dom internally, so this
|
|
rule is a real mouse-hover highlight for any node (container or leaf).
|
|
Scoped under `.canvas-device-frame` and suppressed by `.guides-off` so
|
|
"Show guides: off" stays airtight. */
|
|
.canvas-device-frame [data-craft-hovered] {
|
|
outline: 2px dashed var(--color-accent) !important;
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
/* `data-layer-hovered` is set directly by the Layers panel (LayersPanel.tsx)
|
|
on its own row hover/focus -- a separate producer (writing straight to the
|
|
target's dom rather than through Craft's `hovered` event, since the
|
|
action that drives it is stripped from the public `useEditor()` API at
|
|
runtime) that drives a highlight when hovering a layer row. This is a
|
|
deliberate locator action (not a structural drop-target guide), so it
|
|
uses a SOLID outline -- visually distinct from the dashed structural
|
|
guides -- and is intentionally NOT suppressed by `.guides-off`: hiding
|
|
guides shouldn't blind the Layers-panel hover→canvas locator. */
|
|
.canvas-device-frame [data-layer-hovered] {
|
|
outline: 2px solid var(--color-accent) !important;
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
/* "Show guides" topbar toggle (TopBar.tsx) -- flips this class on
|
|
.canvas-device-frame to hide structural drop-target guides and the
|
|
mouse-hover highlight at once. Default ON. `[data-layer-hovered]` is
|
|
deliberately excluded -- see rule above. */
|
|
.canvas-device-frame.guides-off [data-craft-node],
|
|
.canvas-device-frame.guides-off [data-craft-hovered] {
|
|
outline: none !important;
|
|
}
|
|
|
|
/* Header/footer zone-preview separator (Canvas.tsx ZonePreview) -- a neutral
|
|
dashed rule marking where the editable page meets the read-only
|
|
header/footer preview. It's a structural guide, so it hides with the
|
|
rest when "Show guides" is off. */
|
|
.canvas-device-frame.guides-off .zone-preview-sep {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Craft.js Selection Indicator
|
|
-------------------------------------------------------------------------- */
|
|
.craftjs-renderer [data-selected="true"] {
|
|
outline: 2px solid var(--color-accent) !important;
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
/* Component indicator badge (floats over the selected node via a portal --
|
|
position/top/left are set inline per-node, see RenderNode.tsx) */
|
|
.component-indicator {
|
|
position: absolute;
|
|
top: -22px;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 2px 6px 2px 8px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
background: var(--color-accent);
|
|
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.component-indicator-parent-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 2px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: #ffffff;
|
|
font-size: 8px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
.component-indicator-parent-btn:hover {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Scrollbar Styling
|
|
-------------------------------------------------------------------------- */
|
|
.panel-left ::-webkit-scrollbar,
|
|
.panel-right ::-webkit-scrollbar,
|
|
.editor-canvas ::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.panel-left ::-webkit-scrollbar-track,
|
|
.panel-right ::-webkit-scrollbar-track,
|
|
.editor-canvas ::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.panel-left ::-webkit-scrollbar-thumb,
|
|
.panel-right ::-webkit-scrollbar-thumb,
|
|
.editor-canvas ::-webkit-scrollbar-thumb {
|
|
background: var(--color-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.panel-left ::-webkit-scrollbar-thumb:hover,
|
|
.panel-right ::-webkit-scrollbar-thumb:hover,
|
|
.editor-canvas ::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-border-light);
|
|
}
|
|
|
|
/* Firefox scrollbar */
|
|
.panel-left,
|
|
.panel-right,
|
|
.editor-canvas {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-border) transparent;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Pages Panel — Header/Footer zone rows (Item 11)
|
|
Compact rows in the same neutral surface language as the page list, with
|
|
a pencil hint that only appears on hover instead of a permanently-loud
|
|
"Editing" pill.
|
|
-------------------------------------------------------------------------- */
|
|
.zone-row-pencil {
|
|
opacity: 0;
|
|
transition: opacity var(--transition-fast);
|
|
}
|
|
|
|
.zone-row:hover .zone-row-pencil {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Tooltip
|
|
-------------------------------------------------------------------------- */
|
|
[data-tooltip] {
|
|
position: relative;
|
|
}
|
|
|
|
[data-tooltip]::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
bottom: calc(100% + 6px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 4px 8px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
background: #27272a;
|
|
border-radius: var(--radius-sm);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity var(--transition-fast);
|
|
z-index: 1000;
|
|
}
|
|
|
|
[data-tooltip]:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Topbar sits flush against the top of the viewport (`body { overflow:
|
|
hidden }`), so the default "tooltip above the trigger" placement gets
|
|
clipped off-screen for topbar buttons -- flip those to render below
|
|
instead. Left-panel/canvas tooltips keep the default above placement,
|
|
which has room to render there. */
|
|
.topbar [data-tooltip]::after {
|
|
bottom: auto;
|
|
top: calc(100% + 6px);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Notifications / Toasts
|
|
-------------------------------------------------------------------------- */
|
|
.toast-container {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
right: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.toast {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 16px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
animation: toast-slide-in 0.25s ease;
|
|
}
|
|
|
|
.toast.success {
|
|
border-left: 3px solid var(--color-success);
|
|
}
|
|
|
|
.toast.error {
|
|
border-left: 3px solid var(--color-danger);
|
|
}
|
|
|
|
@keyframes toast-slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Drag & Drop Visual Cues
|
|
-------------------------------------------------------------------------- */
|
|
.editor-app.is-dragging .canvas-device-frame [data-drop-target] {
|
|
outline: 2px solid var(--color-accent) !important;
|
|
outline-offset: -2px;
|
|
background: var(--color-accent-subtle);
|
|
}
|
|
|
|
.editor-app.is-dragging .canvas-device-frame [data-drop-target][data-drop-error] {
|
|
outline-color: var(--color-danger) !important;
|
|
background: rgba(239, 68, 68, 0.12);
|
|
}
|
|
|
|
.editor-app.is-dragging .canvas-device-frame [data-drop-empty] {
|
|
position: relative;
|
|
}
|
|
|
|
.editor-app.is-dragging .canvas-device-frame [data-drop-empty]::after {
|
|
content: 'Drop here';
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-accent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.editor-app.is-dragging .canvas-device-frame [data-drop-error][data-drop-empty]::after {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
/* Craft's insertion bar (restyled via the Editor `indicator` prop) above content */
|
|
.wsb-drop-line {
|
|
z-index: 50;
|
|
}
|
|
|
|
/* While dragging only the drop target glows */
|
|
.editor-app.is-dragging [data-craft-hovered] {
|
|
outline: none !important;
|
|
}
|
|
|
|
/* #43 */
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Empty Canvas State
|
|
-------------------------------------------------------------------------- */
|
|
.empty-canvas-hint {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
color: var(--color-text-dim);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
gap: 12px;
|
|
/* Overlays the drop area without intercepting drags/clicks meant for the
|
|
underlying (empty) canvas root -- see Canvas.tsx. */
|
|
pointer-events: none;
|
|
}
|
|
|
|
.empty-canvas-hint i.fa-cubes {
|
|
font-size: 32px;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.empty-canvas-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.empty-canvas-btn {
|
|
pointer-events: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 14px;
|
|
font-size: 13px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border-light);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.empty-canvas-btn:hover {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.empty-canvas-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Settings Tabs (General / Style / Advanced)
|
|
-------------------------------------------------------------------------- */
|
|
.settings-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 0 8px;
|
|
background: var(--color-bg-surface);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.settings-tabs button {
|
|
flex: 1;
|
|
padding: 8px 4px;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
color: var(--color-text-muted);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
transition: color var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.settings-tabs button.active {
|
|
color: var(--color-accent);
|
|
border-bottom-color: var(--color-accent);
|
|
}
|
|
|
|
.settings-tabs button:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.settings-content {
|
|
padding: 12px;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Responsive: Collapse Panels on Narrow Screens
|
|
-------------------------------------------------------------------------- */
|
|
@media (max-width: 1024px) {
|
|
.panel-left {
|
|
width: 220px;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.panel-right {
|
|
width: 260px;
|
|
min-width: 260px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/* ------------------------------------------------------------------------
|
|
Phase A -- Mobile Editor Chrome
|
|
Gated entirely behind this breakpoint; desktop styles above are
|
|
untouched. See useIsMobile() (same 768px breakpoint) for the React-side
|
|
equivalent that swaps LeftPanel/RightPanel for MobilePanelBar, and
|
|
collapses TopBar.
|
|
------------------------------------------------------------------------ */
|
|
|
|
/* Side panels are not rendered on mobile (EditorShell swaps them for the
|
|
bottom tab bar) -- kept as a defensive fallback in case either is ever
|
|
mounted at this width. */
|
|
.panel-left,
|
|
.panel-right {
|
|
display: none;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
Viewport sizing -- dynamic viewport height accounts for mobile
|
|
browsers' collapsing URL bar; the unconditional 100vh set earlier in
|
|
this file is the fallback for browsers without dvh support.
|
|
-------------------------------------------------------------------- */
|
|
.editor-app {
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
padding-top: env(safe-area-inset-top, 0px);
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
padding-right: env(safe-area-inset-right, 0px);
|
|
}
|
|
|
|
.editor-container {
|
|
height: calc(100vh - var(--topbar-height) - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0px));
|
|
height: calc(100dvh - var(--topbar-height) - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
/* Full-width canvas, safe-area-aware bottom padding so content never
|
|
sits flush against the fixed bottom tab bar. */
|
|
.editor-canvas {
|
|
padding: 12px;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
Topbar collapse (TopBar.tsx renders a distinct `.topbar-mobile` markup
|
|
branch -- this is purely the styling for it)
|
|
-------------------------------------------------------------------- */
|
|
.topbar-mobile {
|
|
padding: 0 8px;
|
|
padding-left: calc(8px + env(safe-area-inset-left, 0px));
|
|
padding-right: calc(8px + env(safe-area-inset-right, 0px));
|
|
gap: 4px;
|
|
}
|
|
|
|
.topbar-mobile .topbar-left {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.topbar-mobile .topbar-right {
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
}
|
|
|
|
.topbar-mobile .topbar-btn.icon-only {
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.topbar-mobile .topbar-divider {
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.topbar-btn.overflow-toggle.active {
|
|
color: var(--color-accent);
|
|
background: var(--color-accent-subtle);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
Full-screen modals (Modal.tsx -- TemplateModal/HeadCodeModal/
|
|
SitesmithModal share `.modal-backdrop`). Same tab-bar cutout as
|
|
`.mobile-sheet-backdrop` below, and for the same reason: without it,
|
|
the backdrop's default `inset: 0` sits ABOVE the tab bar (--z-modal >
|
|
--z-tabbar) and swallows every tap there, so "open Templates -> tap a
|
|
bottom tab" would silently just close Templates (a tap on the
|
|
backdrop) instead of ALSO opening the tapped sheet. `!important`
|
|
because Modal.tsx sets `bottom` via an inline style, which otherwise
|
|
beats this class rule. The modal's own content still sits above the
|
|
tab bar (it's a commit/cancel moment) -- only the dismiss-affordance
|
|
backdrop stops short, exactly like the sheet backdrop.
|
|
-------------------------------------------------------------------- */
|
|
.modal-backdrop {
|
|
bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px)) !important;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
"⋯" overflow menu (TopBarOverflowMenu.tsx)
|
|
-------------------------------------------------------------------- */
|
|
.topbar-overflow-menu {
|
|
position: fixed;
|
|
top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 6px);
|
|
right: calc(8px + env(safe-area-inset-right, 0px));
|
|
z-index: var(--z-overflow);
|
|
min-width: 220px;
|
|
max-width: calc(100vw - 16px);
|
|
max-height: calc(100dvh - var(--topbar-height) - 24px);
|
|
overflow-y: auto;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.topbar-overflow-section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 6px 8px 10px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.topbar-overflow-label {
|
|
font-size: 12px;
|
|
color: var(--color-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.topbar-overflow-section .device-switcher {
|
|
height: 44px;
|
|
}
|
|
|
|
.topbar-overflow-section .device-btn {
|
|
width: 44px;
|
|
height: 42px;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.topbar-overflow-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
min-height: 44px;
|
|
padding: 8px 10px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.topbar-overflow-item:hover,
|
|
.topbar-overflow-item:active {
|
|
background: var(--color-bg-hover);
|
|
}
|
|
|
|
.topbar-overflow-item.active {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.topbar-overflow-sitesmith {
|
|
padding: 6px 4px 0;
|
|
}
|
|
|
|
.topbar-overflow-sitesmith .sitesmith-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
Bottom tab bar (MobilePanelBar.tsx)
|
|
-------------------------------------------------------------------- */
|
|
.mobile-tab-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
/* Above .mobile-sheet-backdrop (400) -- the tab bar must stay clickable
|
|
even while a sheet is open so tapping a different tab swaps sheets
|
|
directly, instead of requiring a close-then-reopen round trip. The
|
|
backdrop itself stops short of the tab bar (see its `bottom` offset
|
|
below) so this is mostly belt-and-suspenders for the boundary. */
|
|
z-index: var(--z-tabbar);
|
|
display: flex;
|
|
height: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px));
|
|
background: var(--color-bg-surface);
|
|
border-top: 1px solid var(--color-border);
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
padding-right: env(safe-area-inset-right, 0px);
|
|
}
|
|
|
|
.mobile-tab-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
min-height: 44px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--color-text-muted);
|
|
background: transparent;
|
|
border: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.mobile-tab-btn i {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.mobile-tab-btn.active {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
Mobile selection toolbar (MobileSelectionToolbar.tsx, Phase B item 2)
|
|
Bottom-fixed just above the tab bar -- simplest, robust positioning
|
|
that never has to track a scrolling/resizing node's DOM rect. Sits at
|
|
--z-selection-toolbar (600), above the tab bar (500) and sheet backdrop
|
|
(400) so it's never occluded by either, but well below --z-modal
|
|
(5000). Hidden entirely (component returns null) whenever a sheet is
|
|
open, so it never has to fight the sheet for the same screen space.
|
|
-------------------------------------------------------------------- */
|
|
.mobile-selection-toolbar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px));
|
|
z-index: var(--z-selection-toolbar);
|
|
display: flex;
|
|
background: var(--color-bg-elevated);
|
|
border-top: 1px solid var(--color-border);
|
|
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
|
|
padding: 4px calc(2px + env(safe-area-inset-right, 0px)) 4px calc(2px + env(safe-area-inset-left, 0px));
|
|
}
|
|
|
|
.mobile-selection-toolbar-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
min-height: 44px;
|
|
padding: 4px 2px;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.mobile-selection-toolbar-btn i {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.mobile-selection-toolbar-btn:disabled {
|
|
color: var(--color-text-dim);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.mobile-selection-toolbar-btn.danger {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
.mobile-selection-toolbar-btn.danger.confirming {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
}
|
|
|
|
/* Fast-follow item 4: while the toolbar above is visible, give the canvas
|
|
scroll area enough extra bottom padding to clear it (on top of the
|
|
regular 12px `.editor-canvas` padding, not replacing it), so the last
|
|
section of a short page is still reachable by scrolling instead of
|
|
sitting permanently underneath the fixed toolbar. */
|
|
.editor-canvas.has-mobile-selection-toolbar {
|
|
padding-bottom: calc(12px + var(--mobile-selection-toolbar-height));
|
|
}
|
|
|
|
/* Fast-follow item 3: while the Styles sheet is open with a node selected,
|
|
`MobileSelectionToolbar`'s scroll-into-view effect needs somewhere to
|
|
scroll THE NODE TO even when it's the last thing on the page -- without
|
|
extra room below it, the canvas is already at its max scrollTop and the
|
|
node's top can't be brought up past wherever it naturally landed
|
|
(verified live: the last section stayed stuck under the sheet). A full
|
|
extra viewport's worth of bottom padding guarantees any node's top can
|
|
always reach the very top of the canvas. Temporary/cosmetic cost (a
|
|
stretch of blank canvas below the real content while this is active) is
|
|
an acceptable trade for the node never being permanently unreachable.
|
|
-------------------------------------------------------------------- */
|
|
.editor-canvas.has-mobile-styles-sheet {
|
|
padding-bottom: 100vh;
|
|
padding-bottom: 100dvh;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
Bottom sheet (BottomSheet.tsx)
|
|
-------------------------------------------------------------------- */
|
|
.mobile-sheet-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
/* Stop above the bottom tab bar (rather than a full-viewport `inset: 0`)
|
|
so the tab bar is never covered/blocked by the backdrop -- tapping a
|
|
different tab while a sheet is open swaps sheets directly instead of
|
|
being swallowed by the overlay sitting on top of it.
|
|
`--keyboard-inset` (item 5, Phase B) is set inline by BottomSheet.tsx
|
|
from `useVisualViewportInsets` -- 0px when no on-screen keyboard is
|
|
open (the default below is the no-JS/unsupported-browser fallback),
|
|
otherwise the keyboard's height, so the whole sheet lifts clear of it
|
|
instead of the keyboard covering its lower portion. */
|
|
bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px));
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: var(--z-sheet-backdrop);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.mobile-sheet {
|
|
width: 100%;
|
|
/* Capped a second time by the keyboard inset so the sheet's own
|
|
max-height shrinks along with the lifted backdrop -- without this the
|
|
sheet could still try to be 65dvh tall from its new (higher) bottom
|
|
edge and overflow off the top of the screen. */
|
|
max-height: calc(65vh - var(--keyboard-inset, 0px));
|
|
max-height: calc(65dvh - var(--keyboard-inset, 0px));
|
|
background: var(--color-bg-surface);
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
border: 1px solid var(--color-border);
|
|
border-bottom: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mobile-sheet-handle-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 8px 0 4px;
|
|
flex-shrink: 0;
|
|
/* Swipe-to-dismiss (item 4, Phase B) tracks its own touchmove here --
|
|
`none` stops the browser's native scroll/rubber-band gesture from
|
|
competing with it. */
|
|
touch-action: none;
|
|
}
|
|
|
|
.mobile-sheet-handle {
|
|
width: 36px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: var(--color-border-light);
|
|
}
|
|
|
|
.mobile-sheet-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 4px 12px 10px 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
/* Swipe-to-dismiss (item 4, Phase B) -- see .mobile-sheet-handle-row. */
|
|
touch-action: none;
|
|
}
|
|
|
|
.mobile-sheet-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.mobile-sheet-close {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
color: var(--color-text-muted);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.mobile-sheet-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
Touch ergonomics inside sheets -- 16px inputs kill iOS's auto-zoom on
|
|
focus; touch-action speeds up tap response on chrome that doesn't need
|
|
native scroll-gesture handling.
|
|
|
|
`!important` is required here: GuidedStyles/StylePanel inputs (see
|
|
`inputStyle` in `panels/right/styles/shared.tsx`) carry an INLINE
|
|
`font-size: 12px`, which otherwise beats this class rule on the
|
|
Styles sheet -- the most-used mobile surface -- and iOS zooms in on
|
|
focus. `.sitesmith-textarea` (ChatInput.tsx, inline font-size: 14)
|
|
has the same problem even though the Sitesmith modal isn't a sheet.
|
|
-------------------------------------------------------------------- */
|
|
.mobile-sheet-body button,
|
|
.mobile-sheet-body .block-item {
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.mobile-sheet-body input,
|
|
.mobile-sheet-body select,
|
|
.mobile-sheet-body textarea,
|
|
.guided-input,
|
|
.control-input,
|
|
.control-select,
|
|
.topbar input,
|
|
.topbar textarea,
|
|
.topbar select,
|
|
.sitesmith-textarea {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.mobile-sheet-body .settings-tabs button {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.mobile-sheet-body .color-preset {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
/* Layers panel rows (item 4) -- the reliable fallback selection path when
|
|
a node is hard to hit precisely on the canvas by touch. Bumped to the
|
|
44px touch-target minimum; tapping a row already selects (LayerNode's
|
|
`handleActivate`), unchanged. */
|
|
.mobile-sheet-body .layer-node-row {
|
|
min-height: 44px;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------
|
|
Templates modal: category tabs stay horizontally scrollable and never
|
|
shrink below a comfortable touch target; close button enlarged to the
|
|
44px minimum (overriding its 32px inline style).
|
|
-------------------------------------------------------------------- */
|
|
.template-modal-tabbar {
|
|
gap: 8px;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.template-modal-tab-btn {
|
|
flex-shrink: 0;
|
|
min-height: 44px;
|
|
padding: 8px 16px !important;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.template-modal-close-btn {
|
|
width: 44px !important;
|
|
height: 44px !important;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Publish warnings banner -- non-blocking; the site DID publish. Anchored
|
|
to .topbar's `position: relative` (see above) so it drops down directly
|
|
beneath the bar in both the desktop and mobile branches.
|
|
-------------------------------------------------------------------------- */
|
|
.publish-warnings {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 40;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
background: #422006;
|
|
border-bottom: 1px solid #a16207;
|
|
color: #fde68a;
|
|
font-size: 12px;
|
|
}
|
|
.publish-warnings ul { margin: 0; padding-left: 16px; flex: 1; }
|
|
.publish-warnings li { margin: 2px 0; }
|
|
.publish-warnings button {
|
|
background: none;
|
|
border: none;
|
|
color: #fde68a;
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Layers: display-only rows derived from a composite's array props
|
|
(Features Grid features, Tabs tabs, ...). Dimmer than real node rows and
|
|
with no disclosure column, so they don't read as draggable Craft nodes.
|
|
-------------------------------------------------------------------------- */
|
|
.layer-virtual-row:hover {
|
|
background: var(--color-bg-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* Blocking overlay while the initial project load runs / has failed. Covers
|
|
everything below the topbar so nothing is editable behind it. */
|
|
.load-gate {
|
|
position: fixed;
|
|
top: var(--topbar-height);
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: var(--z-modal);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
background: rgba(15, 23, 42, 0.92);
|
|
color: #e2e8f0;
|
|
font-size: 14px;
|
|
}
|
|
.load-gate p { margin: 0; }
|
|
|
|
.empty-save-banner {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 41;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
background: #450a0a;
|
|
border-bottom: 1px solid #b91c1c;
|
|
color: #fecaca;
|
|
font-size: 12px;
|
|
}
|
|
.empty-save-banner-text { flex: 1; }
|
|
.empty-save-banner button {
|
|
background: none;
|
|
border: 1px solid #fecaca;
|
|
border-radius: 4px;
|
|
color: #fecaca;
|
|
cursor: pointer;
|
|
padding: 2px 10px;
|
|
}
|
|
|
|
/* Persistent save-state pill in the topbar */
|
|
.save-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 3px 9px;
|
|
border-radius: 10px;
|
|
white-space: nowrap;
|
|
border: 1px solid transparent;
|
|
}
|
|
.save-pill.unsaved { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
|
|
.save-pill.saving { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
|
|
.save-pill.saved { background: rgba(16, 185, 129, 0.12); color: #10b981; border-color: rgba(16, 185, 129, 0.25); }
|
|
.save-pill.published { background: rgba(16, 185, 129, 0.2); color: #34d399; border-color: rgba(16, 185, 129, 0.4); }
|
|
.save-pill.failed { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.4); }
|
|
.save-pill.new { background: rgba(161, 161, 170, 0.12); color: #a1a1aa; border-color: rgba(161, 161, 170, 0.3); }
|
|
.topbar-mobile .save-pill { padding: 3px 6px; font-size: 10px; }
|
|
|
|
/* Error toast: fixed, stays until dismissed */
|
|
.error-notice {
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
z-index: 60;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
max-width: min(420px, calc(100vw - 32px));
|
|
padding: 10px 12px;
|
|
background: #450a0a;
|
|
border: 1px solid #b91c1c;
|
|
border-radius: 6px;
|
|
color: #fecaca;
|
|
font-size: 12px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.error-notice-text { flex: 1; word-break: break-word; }
|
|
.error-notice button {
|
|
background: none;
|
|
border: none;
|
|
color: #fecaca;
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.conflict-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: var(--z-modal);
|
|
display: flex;
|
|
padding: 16px;
|
|
background: rgba(15, 23, 42, 0.7);
|
|
}
|
|
/* Another-tab conflict modal */
|
|
.conflict-modal {
|
|
max-width: 420px;
|
|
margin: auto;
|
|
padding: 20px;
|
|
background: #1e293b;
|
|
border: 1px solid #475569;
|
|
border-radius: 8px;
|
|
color: #e2e8f0;
|
|
font-size: 14px;
|
|
}
|
|
.conflict-modal h3 { margin: 0 0 8px; font-size: 16px; }
|
|
.conflict-modal p { margin: 0 0 8px; }
|
|
.conflict-modal-error { color: #fecaca; }
|
|
.conflict-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
|
|
.conflict-modal-actions button {
|
|
background: none;
|
|
border: 1px solid #94a3b8;
|
|
border-radius: 4px;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
padding: 4px 12px;
|
|
}
|
|
.conflict-modal-actions button:disabled { opacity: 0.5; cursor: default; }
|
|
|
|
/* W0-tokens: token swatches */
|
|
.token-swatch-row {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.token-swatch-label {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--color-text-muted);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.token-swatches {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.token-swatch {
|
|
width: 22px;
|
|
height: 22px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-border);
|
|
cursor: pointer;
|
|
transition: border-color var(--transition-fast), transform var(--transition-fast),
|
|
box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.token-swatch:hover {
|
|
border-color: var(--color-text-muted);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.token-swatch.active {
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 0 0 2px var(--color-accent-subtle);
|
|
}
|
|
|
|
.token-swatch:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
/* W0-commands: topbar command menu */
|
|
.topbar-command-menu { position: relative; display: inline-flex; }
|
|
.topbar-command-btn {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
color: inherit;
|
|
border-radius: var(--radius-lg);
|
|
padding: 4px 10px;
|
|
cursor: pointer;
|
|
}
|
|
.topbar-command-btn:hover, .topbar-command-btn[aria-expanded="true"] { border-color: var(--color-border); }
|
|
.topbar-command-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
z-index: var(--z-overflow, 1000);
|
|
min-width: 240px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
|
|
padding: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.topbar-command-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
background: transparent;
|
|
border: 0;
|
|
color: inherit;
|
|
text-align: left;
|
|
padding: 8px 10px;
|
|
border-radius: var(--radius-md, 6px);
|
|
cursor: pointer;
|
|
}
|
|
.topbar-command-item:hover:not(:disabled) { background: var(--color-bg-hover); }
|
|
.topbar-command-item:disabled { opacity: 0.45; cursor: default; }
|
|
.topbar-command-shortcut { font-size: 12px; opacity: 0.6; }
|
|
.topbar-command-empty { padding: 8px 10px; font-size: 12px; opacity: 0.6; }
|
|
/* Notice stack (state/NoticeContext + editor/NoticeHost): bottom-left, so it
|
|
never collides with TopBar's bottom-right ErrorNotice. */
|
|
.notice-host {
|
|
position: fixed;
|
|
left: 16px;
|
|
bottom: 16px;
|
|
z-index: 60;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-width: min(420px, calc(100vw - 32px));
|
|
}
|
|
.notice-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-left: 3px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.notice-item.success { border-left-color: var(--color-success); }
|
|
.notice-item.error { border-left-color: var(--color-danger); }
|
|
.notice-text { flex: 1; word-break: break-word; }
|
|
.notice-action, .notice-dismiss {
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
}
|
|
.notice-action { font-weight: 600; text-decoration: underline; }
|
|
@media (max-width: 768px) {
|
|
.notice-host {
|
|
bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 12px);
|
|
}
|
|
}
|
|
|
|
/* #36 right panel tabs */
|
|
.right-panel-placeholder {
|
|
padding: 24px 12px;
|
|
text-align: center;
|
|
color: var(--color-text-muted);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.right-panel-placeholder p {
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.right-panel-placeholder-hint {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
#38 block search
|
|
-------------------------------------------------------------------------- */
|
|
.block-search {
|
|
padding: 0 0 10px;
|
|
}
|
|
|
|
.block-search-input {
|
|
width: 100%;
|
|
padding: 7px 10px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
outline: none;
|
|
transition: border-color var(--transition-fast);
|
|
}
|
|
|
|
.block-search-input:focus {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.block-search-empty {
|
|
padding: 16px 4px;
|
|
font-size: 12px;
|
|
color: var(--color-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
#37 device emulation
|
|
The exported viewport media queries cannot fire inside a narrowed frame,
|
|
so the frame carries data-device and these rules mirror them. Selectors
|
|
for stacking match the exporter verbatim. !important: styles are inline.
|
|
-------------------------------------------------------------------------- */
|
|
.canvas-device-frame[data-device="desktop"] [data-hide-desktop]:not([data-craft-selected]),
|
|
.canvas-device-frame[data-device="tablet"] [data-hide-tablet]:not([data-craft-selected]),
|
|
.canvas-device-frame[data-device="mobile"] [data-hide-mobile]:not([data-craft-selected]) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* A hidden-for-this-device node that is selected stays reachable, dimmed. */
|
|
.canvas-device-frame[data-device="desktop"] [data-hide-desktop][data-craft-selected],
|
|
.canvas-device-frame[data-device="tablet"] [data-hide-tablet][data-craft-selected],
|
|
.canvas-device-frame[data-device="mobile"] [data-hide-mobile][data-craft-selected] {
|
|
opacity: 0.35;
|
|
outline: 2px dashed var(--color-warning, #f59e0b);
|
|
}
|
|
|
|
/* Published stacking matches the DESKTOP inline style; a node with a
|
|
flexDirection/display override carries data-wsb-base-stack (RenderNode). */
|
|
.canvas-device-frame[data-device="mobile"] [style*="display: flex"][style*="flex-direction: row"]:not([data-wsb-base-stack]),
|
|
.canvas-device-frame[data-device="mobile"] [style*="display:flex"][style*="flex-direction:row"]:not([data-wsb-base-stack]),
|
|
.canvas-device-frame[data-device="mobile"] [data-wsb-base-stack="1"] {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
/* Columns stack on phones by default in the published head (`[class^="cols_"]`); a mobile `flexDirection:row`
|
|
override (resolved inline style) is the opt-out, exactly as published. */
|
|
.canvas-device-frame[data-device="mobile"] [data-wsb-cols]:not([style*="flex-direction: row"]) {
|
|
flex-direction: column !important;
|
|
align-items: stretch !important;
|
|
}
|
|
|
|
.canvas-device-frame:not([data-device="desktop"]) [data-fullwidth] {
|
|
width: 100% !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.canvas-device-frame[data-device="tablet"],
|
|
.canvas-device-frame[data-device="mobile"] {
|
|
position: relative;
|
|
}
|
|
.canvas-device-frame[data-device="tablet"]::before,
|
|
.canvas-device-frame[data-device="mobile"]::before {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
padding: 2px 8px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
line-height: 16px;
|
|
color: #fff;
|
|
background: rgba(15, 23, 42, 0.75);
|
|
border-bottom-left-radius: 4px;
|
|
pointer-events: none;
|
|
}
|
|
.canvas-device-frame[data-device="tablet"]::before { content: "Tablet \00b7 768px"; }
|
|
.canvas-device-frame[data-device="mobile"]::before { content: "Mobile \00b7 375px"; }
|
|
/* #41 empty container add */
|
|
.empty-container-add {
|
|
position: fixed;
|
|
z-index: 45;
|
|
width: 28px;
|
|
height: 28px;
|
|
margin: -14px 0 0 -14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
font-size: 13px;
|
|
color: #fff;
|
|
background: var(--color-accent);
|
|
border: 0;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
|
cursor: pointer;
|
|
/* Only the button is interactive; it never sits in Craft's drop path. */
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.empty-container-add-pop {
|
|
position: fixed;
|
|
z-index: 46;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 4px;
|
|
padding: 6px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border-light);
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.empty-container-add-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
min-width: 64px;
|
|
padding: 8px 6px;
|
|
font-size: 11px;
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.empty-container-add-item:hover,
|
|
.empty-container-add-item:focus-visible {
|
|
border-color: var(--color-accent);
|
|
outline: none;
|
|
}
|
|
|
|
/* #34 breadcrumb */
|
|
.canvas-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
flex: 0 0 28px;
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
background: var(--color-bg-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.canvas-breadcrumb-sep {
|
|
color: var(--color-text-dim);
|
|
user-select: none;
|
|
}
|
|
|
|
.canvas-breadcrumb-crumb {
|
|
padding: 2px 6px;
|
|
font: inherit;
|
|
color: var(--color-text-muted);
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.canvas-breadcrumb-crumb:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-bg-hover);
|
|
}
|
|
|
|
.canvas-breadcrumb-crumb[aria-current='true'] {
|
|
color: var(--color-text);
|
|
background: var(--color-accent-subtle);
|
|
cursor: default;
|
|
}
|
|
|
|
/* #46 rich text toolbar -- floating B/I/U/Link bar over a canvas text selection */
|
|
.rt-toolbar {
|
|
position: fixed;
|
|
z-index: var(--z-selection-toolbar);
|
|
transform: translate(-50%, -100%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 3px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border-light);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.rt-toolbar-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rt-toolbar-btn:hover,
|
|
.rt-toolbar-btn:focus-visible {
|
|
background: var(--color-bg-hover);
|
|
outline: none;
|
|
}
|
|
|
|
.rt-toolbar-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.rt-toolbar-input {
|
|
width: 220px;
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
outline: none;
|
|
}
|
|
|
|
.rt-toolbar-input:focus {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.rt-toolbar-input.is-invalid {
|
|
border-color: var(--color-danger);
|
|
}
|
|
|
|
/* #44 palettes */
|
|
.token-chip {
|
|
flex: none;
|
|
padding: 1px 6px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
line-height: 16px;
|
|
color: var(--color-accent);
|
|
background: var(--color-accent-subtle);
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: 999px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.palette-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.palette-preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 4px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
color: var(--color-text-muted);
|
|
font-size: 10px;
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.palette-preview:hover { border-color: var(--color-text-muted); }
|
|
|
|
.palette-preview.active {
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 0 0 2px var(--color-accent-subtle);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.palette-dots { display: flex; }
|
|
|
|
.palette-dot {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--color-border);
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.palette-dot:first-child { margin-left: 0; }
|
|
|
|
/* ---- #39 shortcuts modal ---- */
|
|
.shortcuts-modal {
|
|
width: min(560px, calc(100vw - 32px));
|
|
max-height: calc(100vh - 64px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-bg-surface);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg, 8px);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
|
}
|
|
.shortcuts-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.shortcuts-modal-title { margin: 0; font-size: 15px; font-weight: 600; }
|
|
.shortcuts-modal-close {
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
padding: 4px 6px;
|
|
}
|
|
.shortcuts-modal-close:hover { color: var(--color-text); }
|
|
.shortcuts-modal-body { padding: 8px 16px 16px; overflow-y: auto; }
|
|
.shortcuts-group-title {
|
|
margin: 14px 0 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-dim);
|
|
}
|
|
.shortcuts-list { list-style: none; margin: 0; padding: 0; }
|
|
.shortcuts-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 5px 0;
|
|
font-size: 13px;
|
|
}
|
|
.shortcuts-row-keys { display: inline-flex; gap: 6px; flex-shrink: 0; }
|
|
.shortcuts-row-keys kbd {
|
|
font: inherit;
|
|
font-size: 12px;
|
|
padding: 1px 7px;
|
|
color: var(--color-text-muted);
|
|
background: var(--color-bg-hover);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
/* ---- end #39 shortcuts modal ---- */
|
|
|
|
/* ==== #47 layers: drag reorder, rename, hide/show, collapse ==== */
|
|
.layer-node-row .layer-eye-btn {
|
|
margin-left: auto;
|
|
padding: 0 4px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--color-text-dim);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
opacity: 0.55;
|
|
flex-shrink: 0;
|
|
}
|
|
.layer-node-row:hover .layer-eye-btn,
|
|
.layer-node-row .layer-eye-btn:focus-visible,
|
|
.layer-node-row.layer-hidden .layer-eye-btn {
|
|
opacity: 1;
|
|
}
|
|
.layer-node-row.layer-hidden > .layer-name,
|
|
.layer-node-row.layer-hidden > i.fa {
|
|
opacity: 0.45;
|
|
text-decoration: line-through;
|
|
}
|
|
.layer-node-row.layer-dragging {
|
|
opacity: 0.4;
|
|
}
|
|
.layer-node-row[data-drop='before'] {
|
|
box-shadow: inset 0 2px 0 var(--color-accent);
|
|
}
|
|
.layer-node-row[data-drop='after'] {
|
|
box-shadow: inset 0 -2px 0 var(--color-accent);
|
|
}
|
|
.layer-node-row[data-drop='inside'] {
|
|
outline: 1px dashed var(--color-accent);
|
|
outline-offset: -2px;
|
|
background: var(--color-accent-subtle);
|
|
}
|
|
.layer-rename-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font: inherit;
|
|
padding: 0 4px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* #45 overrides */
|
|
.wsb-override-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-left: 6px;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.wsb-override-dot.is-set {
|
|
background: var(--color-accent);
|
|
border: 1px solid var(--color-accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wsb-override-dot.is-set:hover,
|
|
.wsb-override-dot.is-set:focus-visible {
|
|
background: var(--color-danger);
|
|
border-color: var(--color-danger);
|
|
outline: none;
|
|
}
|
|
|
|
.wsb-override-dot.is-inherited {
|
|
background: transparent;
|
|
border: 1px solid var(--color-text-dim);
|
|
}
|
|
|
|
.wsb-device-banner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px 8px;
|
|
margin: 0 0 8px;
|
|
padding: 8px 10px;
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
color: var(--color-text);
|
|
background: var(--color-accent-subtle);
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.wsb-device-banner > span {
|
|
flex: 1 1 180px;
|
|
}
|
|
|
|
.wsb-device-banner-back {
|
|
padding: 0;
|
|
font: inherit;
|
|
font-weight: 600;
|
|
color: var(--color-accent);
|
|
background: none;
|
|
border: 0;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.wsb-stack-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* #50 multi-select: mixed-type selection actions */
|
|
.multi-select-hint {
|
|
margin: 0 0 8px;
|
|
font-size: 11px;
|
|
color: var(--color-text-muted, #a1a1aa);
|
|
}
|
|
.multi-select-buttons {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px;
|
|
}
|
|
.multi-select-btn {
|
|
padding: 6px 8px;
|
|
font-size: 11px;
|
|
color: var(--color-text);
|
|
background: var(--color-surface-2, #27272a);
|
|
border: 1px solid var(--color-border, #3f3f46);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
.multi-select-btn:hover { border-color: var(--color-accent); }
|
|
|
|
/* #48 presets */
|
|
.wsb-presets-popover {
|
|
min-width: 200px;
|
|
max-width: 260px;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.wsb-presets-label { font-size: 11px; color: var(--color-text-dim); }
|
|
.wsb-presets-input {
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm, 4px);
|
|
}
|
|
.wsb-presets-btn {
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-hover);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm, 4px);
|
|
cursor: pointer;
|
|
}
|
|
.wsb-presets-btn:disabled { opacity: 0.5; cursor: default; }
|
|
.wsb-presets-empty { padding: 4px; color: var(--color-text-dim); }
|
|
.wsb-presets-list { margin: 0; padding: 0; list-style: none; }
|
|
.wsb-presets-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
|
|
.wsb-presets-apply {
|
|
flex: 1;
|
|
padding: 6px 8px;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: var(--radius-sm, 4px);
|
|
cursor: pointer;
|
|
}
|
|
.wsb-presets-apply:hover { background: var(--color-bg-hover); }
|
|
.wsb-presets-delete {
|
|
padding: 4px 6px;
|
|
color: var(--color-danger);
|
|
background: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* #49 palette */
|
|
.wsb-palette {
|
|
width: 100%;
|
|
background: var(--color-surface, #1e1e24);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wsb-palette-input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 14px 16px;
|
|
font: inherit;
|
|
font-size: 15px;
|
|
color: inherit;
|
|
background: transparent;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
|
|
outline: none;
|
|
}
|
|
|
|
.wsb-palette-list {
|
|
max-height: 340px;
|
|
margin: 0;
|
|
padding: 4px;
|
|
overflow-y: auto;
|
|
list-style: none;
|
|
}
|
|
|
|
.wsb-palette-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
font-size: 13px;
|
|
border-radius: var(--radius-sm, 4px);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wsb-palette-item.is-active {
|
|
background: var(--color-accent-subtle);
|
|
}
|
|
|
|
.wsb-palette-group {
|
|
flex: 0 0 84px;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.wsb-palette-title {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wsb-palette-sub {
|
|
font-size: 11px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.wsb-palette-kbd {
|
|
font: inherit;
|
|
font-size: 11px;
|
|
padding: 1px 6px;
|
|
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.2));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.wsb-palette-empty {
|
|
padding: 12px;
|
|
font-size: 13px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.wsb-palette-tip {
|
|
padding: 8px 14px;
|
|
font-size: 11px;
|
|
opacity: 0.7;
|
|
border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
|
|
}
|
|
|
|
/* ==== #51 version history ==== */
|
|
.wsb-history-modal {
|
|
width: min(640px, calc(100vw - 32px));
|
|
max-height: calc(100vh - 64px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-bg-surface);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg, 8px);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
|
}
|
|
.wsb-history-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.wsb-history-title { margin: 0; font-size: 15px; font-weight: 600; }
|
|
.wsb-history-close { background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer; padding: 4px 6px; }
|
|
.wsb-history-close:hover { color: var(--color-text); }
|
|
.wsb-history-body { padding: 8px 16px 16px; overflow-y: auto; }
|
|
.wsb-history-empty { color: var(--color-text-muted); font-size: 13px; }
|
|
.wsb-history-day-title {
|
|
margin: 14px 0 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-dim);
|
|
}
|
|
.wsb-history-list, .wsb-history-pages { list-style: none; margin: 0; padding: 0; }
|
|
.wsb-history-row { padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
|
|
.wsb-history-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
.wsb-history-badge {
|
|
font-size: 11px;
|
|
padding: 1px 8px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text-muted);
|
|
}
|
|
.wsb-history-badge-publish { color: var(--color-accent); border-color: var(--color-accent); }
|
|
.wsb-history-time { color: var(--color-text); }
|
|
.wsb-history-actions { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
|
|
.wsb-history-modal button:not(.wsb-history-close) {
|
|
font: inherit;
|
|
font-size: 12px;
|
|
padding: 3px 9px;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-hover);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
.wsb-history-modal button:disabled { opacity: 0.5; cursor: default; }
|
|
.wsb-history-modal .wsb-history-primary { border-color: var(--color-accent); }
|
|
.wsb-history-pending { margin-top: 8px; padding: 8px 10px; background: var(--color-bg-hover); border-radius: var(--radius-sm); }
|
|
.wsb-history-pending p { margin: 0 0 8px; }
|
|
.wsb-history-pending > button { margin-right: 6px; }
|
|
.wsb-history-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
|
|
|
|
/* #54: pre-publish checklist */
|
|
.publish-checklist { max-width: 520px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; }
|
|
.publish-checklist-body { overflow-y: auto; margin: 4px 0; }
|
|
.publish-checklist-group h4 { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
|
|
.publish-checklist-group ul { list-style: none; margin: 0; padding: 0; }
|
|
.publish-check { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #334155; }
|
|
.publish-check-warn .publish-check-msg::before { content: '\26A0\00a0'; color: #fbbf24; }
|
|
.publish-check-info .publish-check-msg::before { content: '\2139\00a0'; color: #7dd3fc; }
|
|
.publish-check-fix { flex: none; background: none; border: 1px solid #94a3b8; border-radius: 4px; color: inherit; cursor: pointer; padding: 2px 10px; }
|
|
.publish-checklist-note { margin: 8px 0 0; color: #94a3b8; font-size: 12px; }
|
|
|
|
/* #56 on-canvas padding handles */
|
|
.spacing-handles {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 40;
|
|
}
|
|
.spacing-handle {
|
|
position: fixed;
|
|
pointer-events: auto;
|
|
background: var(--color-accent);
|
|
opacity: 0.35;
|
|
border-radius: 3px;
|
|
transform: translate(-50%, -50%);
|
|
transition: opacity 0.12s;
|
|
}
|
|
.spacing-handle-top,
|
|
.spacing-handle-bottom { width: 44px; height: 6px; cursor: ns-resize; }
|
|
.spacing-handle-left,
|
|
.spacing-handle-right { width: 6px; height: 44px; cursor: ew-resize; }
|
|
.spacing-handle:hover,
|
|
.spacing-handle.is-active { opacity: 0.9; }
|
|
.spacing-band {
|
|
position: fixed;
|
|
background: var(--color-accent);
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
}
|
|
.spacing-readout {
|
|
position: fixed;
|
|
transform: translate(-50%, -140%);
|
|
padding: 1px 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: var(--color-accent);
|
|
border-radius: 3px;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* #53 menus that follow pages: read-only page-link rows, sub-link editor,
|
|
page-settings Menu section, hidden-from-menu badge */
|
|
.nav-page-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px dashed var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.nav-page-link--child { margin: 4px 0 0 16px; }
|
|
|
|
.nav-page-link > .fa { color: var(--color-text-muted); font-size: 10px; }
|
|
|
|
.nav-page-link__label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-page-link__source { font-size: 10px; color: var(--color-text-muted); }
|
|
|
|
.nav-page-link__hide {
|
|
padding: 2px 6px;
|
|
background: none;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.nav-page-link__hide:hover { color: var(--color-text); border-color: var(--color-text-muted); }
|
|
|
|
.nav-sublinks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-left: 12px;
|
|
padding-left: 8px;
|
|
border-left: 2px solid var(--color-border);
|
|
}
|
|
|
|
.nav-sublink { display: flex; flex-direction: column; gap: 3px; }
|
|
|
|
.nav-sublink-add {
|
|
padding: 4px;
|
|
background: none;
|
|
border: 1px dashed var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.nav-sublink-add:hover { color: var(--color-text); }
|
|
|
|
.page-menu-settings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin: 0;
|
|
padding: 12px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.page-menu-settings > legend { padding: 0 4px; margin-bottom: 0; }
|
|
|
|
.page-menu-hidden-badge { font-size: 10px; color: var(--color-text-muted); flex-shrink: 0; }
|
|
|
|
/* ---------- #52 Section library ---------- */
|
|
.section-lib {
|
|
background: var(--color-bg-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md, 8px);
|
|
padding: 16px;
|
|
max-height: 86vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
color: var(--color-text);
|
|
}
|
|
.section-lib-head { display: flex; align-items: center; justify-content: space-between; }
|
|
.section-lib-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
|
|
.section-lib-close { background: none; border: 0; color: var(--color-text-muted); cursor: pointer; font-size: 16px; }
|
|
.section-lib-controls, .section-lib-save { display: flex; gap: 8px; align-items: center; }
|
|
.section-lib-search {
|
|
flex: 1;
|
|
padding: 7px 10px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text);
|
|
font-size: 13px;
|
|
}
|
|
.section-lib-save-btn {
|
|
padding: 7px 12px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.section-lib-save-btn:disabled { opacity: 0.5; cursor: default; }
|
|
.section-lib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.section-lib-chip {
|
|
padding: 4px 10px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 999px;
|
|
color: var(--color-text-muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.section-lib-chip.active { border-color: var(--color-accent); color: var(--color-text); background: var(--color-accent-subtle); }
|
|
.section-lib-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 12px;
|
|
overflow-y: auto;
|
|
min-height: 120px;
|
|
}
|
|
.section-lib-card { position: relative; }
|
|
.section-lib-pick {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 6px;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.section-lib-pick:hover, .section-lib-pick:focus-visible { border-color: var(--color-accent); }
|
|
.section-lib-thumb { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; background: #fff; }
|
|
.section-lib-frame {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1200px;
|
|
height: 600px;
|
|
border: 0;
|
|
transform: scale(0.2);
|
|
transform-origin: 0 0;
|
|
pointer-events: none;
|
|
}
|
|
.section-lib-name { font-size: 12px; font-weight: 500; }
|
|
.section-lib-delete {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
color: var(--color-danger);
|
|
cursor: pointer;
|
|
padding: 3px 6px;
|
|
}
|
|
.section-lib-empty { grid-column: 1 / -1; color: var(--color-text-muted); font-size: 13px; padding: 24px 0; text-align: center; }
|
|
.block-browse-sections { display: block; width: calc(100% - 16px); margin: 0 8px 8px; }
|
|
|
|
/* ---------- #55 media search, stock photos, focal point ---------- */
|
|
.asset-filter { display: flex; flex-direction: column; gap: 6px; }
|
|
.asset-filter-input { width: 100%; font-size: 11px; box-sizing: border-box; }
|
|
.asset-filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
|
|
.asset-filter-chip {
|
|
padding: 2px 8px; font-size: 10px; border-radius: 999px; cursor: pointer;
|
|
border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted);
|
|
}
|
|
.asset-filter-chip:hover { border-color: var(--color-text-muted); }
|
|
.asset-filter-chip.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
|
|
|
|
.asset-picker-tabs { display: flex; gap: 2px; margin-top: 8px; border-bottom: 1px solid var(--color-border); }
|
|
.asset-picker-tab {
|
|
flex: 1; padding: 5px 4px; font-size: 11px; cursor: pointer; background: transparent;
|
|
border: none; border-bottom: 2px solid transparent; color: var(--color-text-muted);
|
|
}
|
|
.asset-picker-tab.active { color: var(--color-text); border-bottom-color: var(--color-accent); }
|
|
|
|
.stock-tab { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
|
|
.stock-grid { column-count: 2; column-gap: 4px; max-height: 240px; overflow-y: auto; }
|
|
.stock-thumb {
|
|
display: block; width: 100%; margin: 0 0 4px; padding: 0; break-inside: avoid; cursor: pointer;
|
|
border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: var(--color-bg-base);
|
|
}
|
|
.stock-thumb.selected { border-color: var(--color-accent); }
|
|
.stock-thumb img { display: block; width: 100%; height: auto; }
|
|
.stock-credit, .stock-footer { font-size: 10px; color: var(--color-text-dim); }
|
|
.stock-credit a, .stock-footer a { color: inherit; text-decoration: underline; }
|
|
.stock-status { font-size: 11px; color: var(--color-text-dim); text-align: center; padding: 10px 0; }
|
|
.stock-status.error { color: var(--color-danger); }
|
|
|
|
/* ===== #58 Sitesmith business profile ===== */
|
|
.sitesmith-wiz {
|
|
width: min(480px, 92vw);
|
|
background: var(--color-bg-elevated);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 12px;
|
|
padding: 20px 22px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.sitesmith-wiz-dots { display: flex; gap: 6px; justify-content: center; }
|
|
.sitesmith-wiz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
|
|
.sitesmith-wiz-dot.done { background: var(--color-text-muted); }
|
|
.sitesmith-wiz-dot.active { background: var(--color-accent); }
|
|
.sitesmith-wiz-body { display: flex; flex-direction: column; gap: 8px; min-height: 170px; }
|
|
.sitesmith-wiz-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
|
|
.sitesmith-wiz-label { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
|
|
.sitesmith-wiz-hint { margin: 0; font-size: 12px; color: var(--color-text-muted); }
|
|
.sitesmith-wiz-input {
|
|
background: var(--color-bg-base);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 8px 10px;
|
|
font-size: 14px;
|
|
}
|
|
.sitesmith-wiz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.sitesmith-wiz-chip {
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
background: var(--color-accent-subtle); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px;
|
|
}
|
|
.sitesmith-wiz-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; }
|
|
.sitesmith-wiz-tones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.sitesmith-wiz-tone {
|
|
display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
|
|
background: var(--color-bg-base); color: var(--color-text);
|
|
border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px;
|
|
}
|
|
.sitesmith-wiz-tone span { font-size: 12px; color: var(--color-text-muted); }
|
|
.sitesmith-wiz-tone.active { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-subtle); }
|
|
.sitesmith-wiz-error { font-size: 12px; color: var(--color-danger); }
|
|
.sitesmith-wiz-footer { display: flex; align-items: center; gap: 8px; }
|
|
.sitesmith-wiz-btn { border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13px; cursor: pointer; border: 1px solid var(--color-border); }
|
|
.sitesmith-wiz-btn.ghost { background: transparent; color: var(--color-text-muted); }
|
|
.sitesmith-wiz-btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600; }
|
|
|
|
.sitesmith-profile-line {
|
|
display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a1a1aa; margin-bottom: 8px;
|
|
}
|
|
.sitesmith-profile-edit, .sitesmith-profile-open {
|
|
background: transparent; border: 1px solid #3f3f46; color: inherit; border-radius: 4px; padding: 2px 8px; font-size: 12px; cursor: pointer;
|
|
}
|
|
.sitesmith-profile-open { width: 100%; padding: 7px 10px; color: var(--color-text); border-color: var(--color-border); }
|
|
.sitesmith-regenerate-btn {
|
|
align-self: flex-start; margin-bottom: 10px; background: #7c3aed; color: #fff; border: none;
|
|
border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
|
|
}
|
|
.sitesmith-regenerate-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
|
|
/* ---- #57 Global sections ---- */
|
|
/* Instance root: dashed accent outline on the canvas (editor-only attribute). */
|
|
.canvas-device-frame [data-wsb-global] { outline: 2px dashed #8b5cf6; outline-offset: -2px; }
|
|
.canvas-device-frame [data-wsb-global-inner][data-craft-hovered] { outline-color: #8b5cf6; cursor: text; }
|
|
.canvas-device-frame.guides-off [data-wsb-global] { outline: none; }
|
|
.component-indicator-global {
|
|
display: inline-flex; align-items: center; gap: 3px;
|
|
background: #7c3aed; color: #fff; border-radius: 3px; padding: 0 5px; margin-left: -4px;
|
|
}
|
|
.component-indicator-lock { opacity: 0.85; }
|
|
.global-master-banner {
|
|
display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 11px; font-weight: 600;
|
|
color: #a78bfa; background: rgba(139, 92, 246, 0.1); border-bottom: 1px solid rgba(139, 92, 246, 0.35);
|
|
}
|
|
.global-master-banner-text { flex: 1; min-width: 0; }
|
|
.global-master-banner-done {
|
|
flex-shrink: 0; border: none; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 11px; font-weight: 600;
|
|
color: #fff; background: #7c3aed; cursor: pointer;
|
|
}
|
|
.global-master-banner-done:hover { background: #6d28d9; }
|
|
.global-instance-panel { display: flex; flex-direction: column; gap: 8px; }
|
|
.global-instance-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a78bfa; }
|
|
.global-instance-head strong { color: var(--color-text); }
|
|
.global-instance-actions { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.global-instance-btn {
|
|
display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12px; cursor: pointer;
|
|
color: var(--color-text); background: var(--color-bg-base); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
|
|
}
|
|
.global-instance-btn:hover { border-color: #8b5cf6; }
|
|
.global-instance-hint { margin: 0; font-size: 11px; color: var(--color-text-muted); }
|
|
.global-override-fields { display: flex; flex-direction: column; gap: 6px; }
|
|
.global-override-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); }
|
|
.global-override-badge {
|
|
margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 500;
|
|
color: #a78bfa; background: rgba(139, 92, 246, 0.15); border-radius: 999px; padding: 1px 6px;
|
|
}
|
|
.global-override-field { display: flex; flex-direction: column; gap: 3px; }
|
|
.global-override-label { font-size: 11px; color: var(--color-text-muted); }
|
|
.global-override-input {
|
|
width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 12px;
|
|
color: var(--color-text); background: var(--color-bg-base); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
|
|
}
|
|
.section-lib-chip-global i { margin-right: 3px; }
|
|
.section-lib-usage { display: block; font-size: 11px; color: var(--color-text-muted); }
|
|
|
|
/* #followups -- integration follow-ups (#58 Regenerate button in the type header) */
|
|
.guided-regenerate-btn {
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
padding: 4px 8px; font-size: 11px; font-weight: 600;
|
|
color: var(--color-text); background: transparent;
|
|
border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer;
|
|
}
|
|
.guided-regenerate-btn:hover { background: var(--color-bg-hover); }
|
|
.guided-regenerate-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
|
|
/* /#followups */
|