/** * Inline editor styles. * -------------------------------------------------------------- * Loaded ONLY when document.documentElement has data-edit-mode="true". * Every selector is scoped under [data-edit-mode] so this stylesheet * adds zero rules to the public page even if it leaks in by mistake. * * Themed against --accent-rgb (set by themeConfig.js), so the editor * tinting follows the brand accent the operator is previewing. */ [data-edit-mode] { /* Re-declare a local fallback so accents work even before themeConfig paints CSS vars on . */ --inline-accent-rgb: var(--accent-rgb, 225 29 72); --inline-outline: rgba(var(--inline-accent-rgb), 0.55); --inline-outline-strong: rgba(var(--inline-accent-rgb), 0.95); --inline-bg: rgba(8, 8, 10, 0.96); --inline-fg: #f5f5f7; --inline-fg-muted: rgba(255, 255, 255, 0.62); --inline-radius: 10px; --inline-ease: cubic-bezier(.4, .2, .2, 1); } /* ============================================================== Hide the bottom-right FAB in edit mode. Inline toolbar's "Advanced" button is the single entry point to the drawer here. ============================================================== */ [data-edit-mode] #demo-customize-fab { display: none !important; } /* ============================================================== Top toolbar - fixed, top-right, accent-tinted, premium dark ============================================================== */ .inline-editor-toolbar { position: fixed; top: 14px; right: 14px; z-index: 9998; /* below the drawer (9999) so the drawer covers it */ display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 7px 12px; border: 1px solid rgba(var(--inline-accent-rgb), 0.45); border-radius: 999px; background: linear-gradient(120deg, rgba(var(--inline-accent-rgb), 0.18), rgba(255, 255, 255, 0.04)), var(--inline-bg); color: var(--inline-fg); font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.04em; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .inline-editor-toolbar-label { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; text-transform: uppercase; } .inline-editor-site-chip { max-width: min(260px, 26vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; color: var(--inline-fg-muted); font-size: 11px; line-height: 1; letter-spacing: 0.02em; border-left: 1px solid rgba(255, 255, 255, 0.12); } .inline-editor-toolbar-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--inline-accent-rgb), 0.95); box-shadow: 0 0 0 3px rgba(var(--inline-accent-rgb), 0.18); animation: inline-editor-pulse 1.8s ease-in-out infinite; } @keyframes inline-editor-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .inline-editor-toolbar-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--inline-fg); font: inherit; cursor: pointer; transition: border-color .18s var(--inline-ease), background .18s var(--inline-ease), color .18s var(--inline-ease); } .inline-editor-toolbar-btn:hover { border-color: rgba(var(--inline-accent-rgb), 0.7); background: rgba(var(--inline-accent-rgb), 0.15); } .inline-editor-toolbar-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--inline-accent-rgb), 0.35); } .inline-editor-toolbar-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .inline-editor-toolbar-btn.is-exit { border-color: rgba(255, 255, 255, 0.12); color: var(--inline-fg-muted); } .inline-editor-toolbar-btn.is-exit:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: var(--inline-fg); } /* Save status indicator - fades in briefly after each write. */ .inline-editor-toast { position: fixed; top: 60px; right: 14px; z-index: 9998; padding: 7px 12px; border: 1px solid rgba(var(--inline-accent-rgb), 0.4); border-radius: 999px; background: linear-gradient(120deg, rgba(var(--inline-accent-rgb), 0.18), rgba(255, 255, 255, 0.04)), var(--inline-bg); color: var(--inline-fg); font: 600 11px/1 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s var(--inline-ease), transform .2s var(--inline-ease); } .inline-editor-toast.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================== Builder-style editor shell ============================================================== */ [data-edit-mode] { --editor-sidebar-width: clamp(360px, 25vw, 408px); --editor-sidebar-collapsed-width: 44px; --editor-settings-width: clamp(360px, 26vw, 430px); --editor-topbar-height: 64px; --editor-mobile-sidebar-height: 48dvh; --editor-shell-bg: #07080a; --editor-shell-panel: #0b0c0f; --editor-shell-panel-2: #111217; --editor-shell-ink: #f4f4f6; --editor-shell-muted: rgba(244, 244, 246, .58); --editor-shell-line: rgba(255, 255, 255, .09); --editor-shell-row-h: 32px; --editor-shell-icon-btn: 24px; --editor-shell-drag-w: 22px; --editor-shell-action-w: 30px; } [data-edit-mode] body { padding: 0; overflow: hidden; background: var(--editor-shell-bg); transition: none; } .editor-site-canvas { position: fixed; z-index: 1; top: var(--editor-topbar-height); left: var(--editor-sidebar-width); right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; padding: 14px; background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px), #050608; background-size: 28px 28px; transition: right .24s var(--inline-ease); transition-property: left, right; } body.editor-settings-open .editor-site-canvas { right: var(--editor-settings-width); } body.editor-sidebar-collapsed .editor-site-canvas { left: var(--editor-sidebar-collapsed-width); } .editor-site-canvas-stage { --editor-canvas-scale: 1; width: 1280px; min-height: 100%; margin: 0 auto; overflow: visible; background: var(--bg-0, #050608); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 22px 60px rgba(0,0,0,.52); transform-origin: top center; zoom: var(--editor-canvas-scale); } .editor-page-frame { --editor-canvas-scale: 1; display: block; width: 1280px; height: calc((100dvh - var(--editor-topbar-height) - 34px) / var(--editor-canvas-scale)); min-height: 760px; margin: 0 auto; border: 0; border-radius: 0; overflow: auto; background: var(--bg-0, #050608); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 22px 60px rgba(0,0,0,.52); transform-origin: top center; zoom: var(--editor-canvas-scale); } .editor-page-frame[hidden] { display: none; } body.editor-external-page .inline-editor-overlay-layer, body.editor-external-page .inline-editor-section-controls { display: none !important; } [data-edit-mode] .editor-site-canvas-stage .site-header, [data-edit-mode] .editor-site-canvas-stage header.site-header[data-v2] { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin: 0 0 calc(var(--header-h, 76px) * -1) !important; transform: none !important; } .editor-shell-topbar.inline-editor-toolbar { top: 0; right: 0; left: var(--editor-sidebar-width); height: var(--editor-topbar-height); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--editor-shell-line); border-radius: 0; background: radial-gradient(circle at 0% 0%, rgba(var(--inline-accent-rgb), .14), transparent 34%), rgba(9, 10, 13, .94); color: var(--editor-shell-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .32); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); letter-spacing: 0; transition: left .24s var(--inline-ease), right .24s var(--inline-ease); } [data-edit-mode] body.editor-settings-open .editor-shell-topbar.inline-editor-toolbar { right: var(--editor-settings-width); } [data-edit-mode] body.editor-sidebar-collapsed .editor-shell-topbar.inline-editor-toolbar { left: var(--editor-sidebar-collapsed-width); } .editor-shell-topbar-left, .editor-shell-topbar-center, .editor-shell-topbar-right { display: flex; align-items: center; min-width: 0; } .editor-shell-topbar-center { justify-content: center; gap: 10px; } .editor-shell-topbar-right { justify-content: flex-end; gap: 8px; } .editor-shell-topbar .inline-editor-site-chip { max-width: min(460px, 40vw); padding: 0; border-left: 0; color: var(--editor-shell-ink); font-size: 13px; font-weight: 800; } .editor-shell-page-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .62); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; } .editor-shell-page-select { min-width: 174px; max-width: 230px; height: 34px; padding: 0 34px 0 12px; border: 1px solid var(--editor-shell-line); border-radius: 8px; color: var(--editor-shell-ink); background: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.72) 50%) calc(100% - 17px) 50% / 6px 6px no-repeat, linear-gradient(135deg, rgba(255,255,255,.72) 50%, transparent 50%) calc(100% - 12px) 50% / 6px 6px no-repeat, rgba(255, 255, 255, .055); font-size: 12px; font-weight: 800; outline: none; appearance: none; -webkit-appearance: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } .editor-shell-page-select:hover, .editor-shell-page-select:focus { border-color: rgba(var(--inline-accent-rgb), .42); background-color: rgba(var(--inline-accent-rgb), .1); } .editor-shell-page-select option { color: #f5f5f5; background: #101115; } .editor-shell-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 850; color: #ffd99a; background: rgba(251, 176, 52, .12); border: 1px solid rgba(251, 176, 52, .32); } .editor-shell-status[data-editor-save-status="active"] { color: #9af3c3; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .32); } .editor-shell-topbar .inline-editor-toolbar-btn { height: 34px; border-radius: 8px; border-color: var(--editor-shell-line); background: rgba(255, 255, 255, .055); color: var(--editor-shell-ink); font-size: 12px; font-weight: 800; letter-spacing: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } .editor-shell-topbar .inline-editor-toolbar-btn:hover { border-color: rgba(var(--inline-accent-rgb), .35); background: rgba(var(--inline-accent-rgb), .12); } .editor-shell-topbar .inline-editor-toolbar-btn.is-iconic { width: 34px; padding: 0; justify-content: center; } .editor-shell-topbar .inline-editor-toolbar-btn.is-dashboard { padding: 0 12px 0 10px; gap: 7px; border-color: rgba(var(--inline-accent-rgb), .32); background: rgba(var(--inline-accent-rgb), .10); } .editor-shell-topbar .inline-editor-toolbar-btn svg { width: 15px; height: 15px; } .editor-shell-save { min-width: 88px; border-color: rgba(var(--inline-accent-rgb), .75) !important; background: rgb(var(--inline-accent-rgb)) !important; color: #fff !important; } .editor-shell-topbar .inline-editor-toolbar-btn[disabled], .editor-shell-topbar .inline-editor-toolbar-btn[disabled="true"] { opacity: .48; cursor: not-allowed; } .editor-shell-sidebar { position: fixed; z-index: 10005; inset: 0 auto 0 0; width: var(--editor-sidebar-width); display: flex; flex-direction: column; border-right: 1px solid var(--editor-shell-line); background: radial-gradient(circle at 0% 0%, rgba(var(--inline-accent-rgb), .13), transparent 28%), linear-gradient(180deg, #101115 0%, #08090b 100%); color: var(--editor-shell-ink); box-shadow: 20px 0 50px -30px rgba(0, 0, 0, .88), inset -1px 0 0 rgba(var(--inline-accent-rgb), .12); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transform: translateX(0); transition: transform .24s var(--inline-ease), box-shadow .24s var(--inline-ease); pointer-events: auto; } .editor-shell-sidebar button, .editor-shell-sidebar a, .editor-shell-sidebar input { pointer-events: auto; } body.editor-sidebar-collapsed .editor-shell-sidebar { transform: translateX(calc(-100% + var(--editor-sidebar-collapsed-width))); box-shadow: 14px 0 36px -28px rgba(0, 0, 0, .88), inset -1px 0 0 rgba(var(--inline-accent-rgb), .16); } body.editor-sidebar-collapsed .editor-shell-sidebar-head, body.editor-sidebar-collapsed .editor-shell-section-list { opacity: 0; pointer-events: none; transition: opacity .14s var(--inline-ease); } .editor-shell-sidebar-collapse { position: absolute; z-index: 3; top: 72px; right: 6px; width: 32px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .10); border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)), rgba(10, 11, 14, .94); color: rgba(255, 255, 255, .72); box-shadow: 0 10px 26px rgba(0, 0, 0, .32); cursor: pointer; transition: border-color .18s var(--inline-ease), background .18s var(--inline-ease), color .18s var(--inline-ease), transform .24s var(--inline-ease); } .editor-shell-sidebar-collapse:hover { border-color: rgba(var(--inline-accent-rgb), .38); background: rgba(var(--inline-accent-rgb), .12); color: #fff; } .editor-shell-sidebar-collapse svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .24s var(--inline-ease); } body.editor-sidebar-collapsed .editor-shell-sidebar-collapse svg { transform: rotate(-90deg); } .editor-shell-settings-panel { position: fixed; z-index: 10006; top: var(--editor-topbar-height); right: 0; bottom: 0; width: var(--editor-settings-width); display: flex; flex-direction: column; border-left: 1px solid var(--editor-shell-line); background: radial-gradient(circle at 100% 0%, rgba(var(--inline-accent-rgb), .13), transparent 30%), linear-gradient(180deg, #101115 0%, #090a0d 100%); color: var(--editor-shell-ink); box-shadow: -24px 0 54px -34px rgba(0, 0, 0, .92), inset 1px 0 0 rgba(var(--inline-accent-rgb), .10); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transform: translateX(102%); transition: transform .24s var(--inline-ease); pointer-events: none; } .editor-shell-settings-panel.is-open { transform: translateX(0); pointer-events: auto; } .editor-shell-settings-panel button, .editor-shell-settings-panel input, .editor-shell-settings-panel select, .editor-shell-settings-panel textarea { pointer-events: auto; } .editor-shell-settings-head { flex: 0 0 auto; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--editor-shell-line); background: rgba(10, 11, 14, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .editor-shell-settings-title-wrap { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; } .editor-shell-settings-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--inline-accent-rgb), .25); border-radius: 9px; background: rgba(var(--inline-accent-rgb), .09); color: rgb(var(--inline-accent-rgb)); } .editor-shell-settings-icon svg, .editor-shell-settings-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .editor-shell-settings-kicker { color: var(--editor-shell-muted); font-size: 9.5px; font-weight: 900; letter-spacing: .085em; text-transform: uppercase; } .editor-shell-settings-head h3 { min-width: 0; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--editor-shell-ink); font: 850 16px/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .editor-shell-settings-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.10); border-radius: 8px; background: rgba(255,255,255,.045); color: rgba(244,244,246,.72); cursor: pointer; } .editor-shell-settings-close:hover { border-color: rgba(var(--inline-accent-rgb), .36); background: rgba(var(--inline-accent-rgb), .10); color: #fff; } .editor-shell-settings-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; scrollbar-width: thin; scrollbar-color: rgba(var(--inline-accent-rgb), .45) rgba(255,255,255,.05); } .editor-shell-settings-empty { min-height: 160px; display: grid; place-content: center; gap: 6px; padding: 22px; border: 1px dashed rgba(255,255,255,.11); border-radius: 12px; color: var(--editor-shell-muted); text-align: center; font-size: 12px; line-height: 1.45; } .editor-shell-settings-empty strong { color: var(--editor-shell-ink); font-size: 13px; } .editor-shell-sidebar-head { position: relative; flex: 0 0 auto; z-index: 2; min-height: 0; padding: 12px 14px 12px; border-bottom: 1px solid var(--editor-shell-line); background: radial-gradient(circle at 0% 0%, rgba(var(--inline-accent-rgb), .12), transparent 40%), rgba(10, 11, 14, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .editor-shell-sidebar-kicker { color: var(--editor-shell-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .editor-shell-sidebar h2 { margin: 2px 0 0; color: var(--editor-shell-ink); font: 850 16px/1.12 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; } .editor-shell-sidebar-tools { display: grid; gap: 8px; margin-top: 10px; } .editor-shell-search { min-height: 34px; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 8px; background: rgba(255, 255, 255, .045); color: var(--editor-shell-muted); } .editor-shell-search:focus-within { border-color: rgba(var(--inline-accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--inline-accent-rgb), .12); } .editor-shell-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; } .editor-shell-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--editor-shell-ink); font: 740 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .editor-shell-search input::placeholder { color: rgba(244, 244, 246, .38); } .editor-shell-global-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .editor-shell-mini-action { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 7px; background: rgba(255, 255, 255, .045); color: var(--editor-shell-ink); text-decoration: none; font-size: 10.5px; font-weight: 850; cursor: pointer; } .editor-shell-mini-action:hover { border-color: rgba(var(--inline-accent-rgb), .38); background: rgba(var(--inline-accent-rgb), .10); } .editor-shell-mini-action svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; } .editor-shell-section-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 9px 12px; scrollbar-width: thin; scrollbar-color: rgba(var(--inline-accent-rgb), .45) rgba(255,255,255,.05); } .editor-shell-group { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.045); } .editor-shell-single-group { margin-bottom: 7px; padding: 1px 0 7px; } .editor-shell-group-title { width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 18px; align-items: center; gap: 7px; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--editor-shell-muted); font-size: 10.5px; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; text-align: left; cursor: pointer; box-shadow: none; } .editor-shell-group-title:hover { background: rgba(255, 255, 255, .04); color: var(--editor-shell-ink); } .editor-shell-group-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; } .editor-shell-group-count { min-width: 22px; padding: 1px 5px; border-radius: 999px; background: rgba(255,255,255,.065); color: rgba(244,244,246,.62); text-align: center; font-size: 9.5px; letter-spacing: 0; justify-self: end; } .editor-shell-group-chevron { display: inline-flex; align-items: center; justify-content: center; justify-self: end; width: 18px; height: 18px; transform: rotate(-90deg); transition: transform .18s var(--inline-ease); } .editor-shell-group.is-open .editor-shell-group-chevron { transform: rotate(0deg); } .editor-shell-group-body { display: grid; gap: 2px; padding: 2px 0 0 0; } .editor-shell-single-group .editor-shell-group-body { padding-top: 0; } .editor-shell-group-body[hidden] { display: none; } .editor-shell-group-title svg, .editor-shell-section-icon svg, .editor-shell-icon-btn svg, .editor-shell-child-toggle svg, .editor-shell-drag-handle svg, .editor-shell-section-reset svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .editor-shell-section-wrap { position: relative; border: 1px solid transparent; border-radius: 8px; } .editor-shell-section-wrap.is-selected, .editor-shell-section-wrap.is-expanded { border-color: rgba(var(--inline-accent-rgb), .20); background: rgba(var(--inline-accent-rgb), .045); } .editor-shell-child-section { margin-left: 26px; } .editor-shell-child-section::before { content: ""; position: absolute; left: -14px; top: -5px; bottom: 50%; width: 12px; border-left: 1px solid rgba(255,255,255,.11); border-bottom: 1px solid rgba(255,255,255,.11); border-bottom-left-radius: 7px; pointer-events: none; } .editor-shell-section-row { display: grid; grid-template-columns: var(--editor-shell-drag-w) minmax(0, 1fr) var(--editor-shell-action-w); gap: 3px; align-items: center; min-height: var(--editor-shell-row-h); padding: 0 3px; border-radius: 8px; } .editor-shell-section-row:hover { background: rgba(255,255,255,.036); } .editor-shell-section-wrap.is-dragging { opacity: .46; } .editor-shell-section-wrap.is-drop-before::before, .editor-shell-section-wrap.is-drop-after::after { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 999px; background: rgb(var(--inline-accent-rgb)); box-shadow: 0 0 14px rgba(var(--inline-accent-rgb), .55); z-index: 3; } .editor-shell-section-wrap.is-drop-before::before { top: -2px; } .editor-shell-section-wrap.is-drop-after::after { bottom: -2px; } .editor-shell-section-row.is-hidden { opacity: .58; } .editor-shell-section-main { display: flex; align-items: center; gap: 8px; min-width: 0; height: 31px; padding: 0 5px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } .editor-shell-section-main:hover { color: #fff; } .editor-shell-drag-handle, .editor-shell-child-toggle, .editor-shell-drag-placeholder { width: var(--editor-shell-drag-w); height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: rgba(244,244,246,.32); } .editor-shell-child-toggle { cursor: pointer; } .editor-shell-child-toggle svg { transition: transform .18s var(--inline-ease), color .18s var(--inline-ease); } .editor-shell-section-wrap.children-open > .editor-shell-section-row .editor-shell-child-toggle svg { transform: rotate(180deg); } .editor-shell-child-toggle:hover { color: rgba(244,244,246,.82); background: rgba(255,255,255,.055); } .editor-shell-drag-handle { cursor: grab; touch-action: none; } .editor-shell-drag-handle:active { cursor: grabbing; } .editor-sidebar-dragging, .editor-sidebar-dragging * { cursor: grabbing !important; user-select: none !important; } .editor-shell-drag-handle:hover { color: rgba(244,244,246,.82); background: rgba(255,255,255,.055); } .editor-shell-child-rail { width: var(--editor-shell-drag-w); height: 30px; display: inline-flex; align-items: center; justify-content: center; } .editor-shell-child-rail::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: rgba(244,244,246,.28); } .editor-shell-section-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 720; } .editor-shell-child-section .editor-shell-section-main { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; height: auto; min-height: 31px; padding-top: 4px; padding-bottom: 4px; } .editor-shell-child-section .editor-shell-section-icon { grid-row: 1 / span 2; } .editor-shell-section-subtitle { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(244,244,246,.48); font-size: 10px; font-weight: 620; letter-spacing: .01em; } .editor-shell-section-icon { display: inline-flex; flex: 0 0 16px; color: var(--editor-shell-muted); } .editor-shell-section-actions { width: var(--editor-shell-action-w); display: grid; grid-auto-flow: column; grid-auto-columns: var(--editor-shell-icon-btn); align-items: center; justify-content: end; gap: 1px; opacity: .68; transition: opacity .16s var(--inline-ease); } .editor-shell-section-row:hover .editor-shell-section-actions, .editor-shell-section-wrap.is-expanded .editor-shell-section-actions, .editor-shell-section-wrap.is-selected .editor-shell-section-actions { opacity: 1; } .editor-shell-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--editor-shell-icon-btn); height: var(--editor-shell-icon-btn); border: 1px solid transparent; border-radius: 6px; background: transparent; color: rgba(244,244,246,.54); cursor: pointer; } .editor-shell-icon-btn:hover { border-color: rgba(var(--inline-accent-rgb), .35); background: rgba(var(--inline-accent-rgb), .10); color: var(--editor-shell-ink); } .editor-shell-lock { flex: 0 0 auto; min-width: 0; padding: 1px 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: rgba(244,244,246,.42); background: rgba(255,255,255,.025); font-size: 8.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; text-align: center; } .editor-shell-section-editor { margin: 0; padding: 0; border-top: 0; } .editor-shell-section-editor .demo-block-content { display: grid; gap: 10px; } .editor-shell-section-editor .demo-section, .editor-shell-section-editor .demo-grouped-section, .editor-shell-section-editor .demo-block-fields, .editor-shell-section-editor .demo-block-controls { border-radius: 10px; background: rgba(255,255,255,.026); border: 1px solid rgba(255,255,255,.065); padding: 10px; } .editor-shell-section-editor .demo-section + .demo-section { margin-top: 8px; } .editor-shell-section-editor .demo-section-label, .editor-shell-section-editor .demo-block-fields .demo-section-label, .editor-shell-section-editor .demo-block-controls > .demo-section-label { color: rgba(255,255,255,.78); } .editor-shell-section-editor-footer { position: sticky; bottom: -12px; z-index: 2; margin: 12px -12px -12px; padding: 10px 12px 12px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(9,10,13,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .editor-shell-section-reset { width: 100%; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.82); font-size: 10.5px; font-weight: 850; cursor: pointer; } .editor-shell-section-reset:hover { border-color: rgba(var(--inline-accent-rgb), .42); color: #fff; background: rgba(var(--inline-accent-rgb), .10); } .editor-shell-empty-settings { padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: var(--editor-shell-muted); background: rgba(255,255,255,.035); font-size: 12px; line-height: 1.45; } .editor-page-content-editor { display: grid; gap: 12px; } .editor-page-content-context, .editor-page-content-note { display: grid; gap: 3px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.035); color: rgba(244,244,246,.62); font-size: 11px; line-height: 1.35; } .editor-page-content-context span { color: rgba(244,244,246,.42); font-size: 9.5px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .editor-page-content-context strong { color: #fff; font-size: 13px; } .editor-page-content-field { display: grid; gap: 7px; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.026); } .editor-page-content-field > span { color: rgba(244,244,246,.64); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .editor-page-content-field input, .editor-page-content-field textarea { width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.045); color: #fff; font: 700 13px/1.35 Inter, system-ui, sans-serif; padding: 11px 12px; resize: vertical; } .editor-page-content-field input:focus, .editor-page-content-field textarea:focus { outline: none; border-color: rgba(var(--inline-accent-rgb), .58); box-shadow: 0 0 0 3px rgba(var(--inline-accent-rgb), .12); } .editor-page-content-field small { color: rgba(244,244,246,.42); font-size: 10.5px; } .editor-page-content-media-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .editor-page-content-media-tools input[type="file"], .editor-page-content-media-tools select { min-height: 38px; font-size: 11px; } .editor-page-content-media-tools select { grid-column: 1 / -1; } .editor-shell-mini-btn { min-height: 38px; border: 1px solid rgba(var(--inline-accent-rgb), .34); border-radius: 9px; background: rgba(var(--inline-accent-rgb), .12); color: #fff; font: 850 11px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 0 12px; } .editor-shell-mini-btn:disabled { opacity: .55; } .editor-page-content-preview { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.035); } .editor-page-content-preview img { width: 100%; height: 100%; display: block; object-fit: cover; } .editor-shell-add-section { width: calc(100% - 8px); min-height: 25px; margin: 4px 4px 2px; border: 1px dashed rgba(255,255,255,.09); border-radius: 7px; background: transparent; color: rgba(244,244,246,.38); font-size: 10.5px; font-weight: 780; } .editor-shell-add-section:hover { border-color: rgba(var(--inline-accent-rgb), .24); color: rgba(244,244,246,.58); } [data-edit-mode] #demo-customize-panel, [data-edit-mode] #demo-customize-backdrop, [data-edit-mode] .demo-panel-toggle { display: none !important; } [data-edit-mode] .leads-panel-toggle { top: auto; right: 18px; bottom: 18px; z-index: 9997; } [data-edit-mode] .backup-panel-toggle { top: auto; right: 18px; bottom: 64px; z-index: 9997; } [data-edit-mode] .leads-panel, [data-edit-mode] .backup-panel { z-index: 10001; } .inline-editor-toast { top: calc(var(--editor-topbar-height) + 10px); right: 18px; } /* ============================================================== Editable text - hover outline + pencil affordance ============================================================== */ [data-edit-mode] [data-page-editor-hotspot] { cursor: pointer; outline: 1px dashed transparent; outline-offset: 4px; border-radius: 5px; } [data-edit-mode] [data-page-editor-hotspot]:hover, [data-edit-mode] [data-page-editor-hotspot]:focus-visible { outline-color: var(--inline-outline); background-color: rgba(var(--inline-accent-rgb), 0.05); } [data-edit-mode] [data-inline-editable] { position: relative; outline: 1px dashed transparent; outline-offset: 3px; border-radius: 4px; transition: outline-color .15s var(--inline-ease), background-color .15s var(--inline-ease); cursor: text; } [data-edit-mode] [data-inline-editable]:hover { outline-color: var(--inline-outline); background-color: rgba(var(--inline-accent-rgb), 0.04); } [data-edit-mode] [data-inline-editable].is-editing { outline: 2px solid var(--inline-outline-strong); outline-offset: 3px; background-color: rgba(var(--inline-accent-rgb), 0.07); cursor: text; } [data-edit-mode] [data-inline-editable]:focus { outline: 2px solid var(--inline-outline-strong); outline-offset: 3px; } /* Pencil glyph in the top-right of any hovered editable. Absolutely positioned so it never affects layout. */ [data-edit-mode] [data-inline-editable]::after { content: ''; position: absolute; top: -10px; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--inline-accent-rgb), 0.95) url("data:image/svg+xml;utf8,") center / 11px no-repeat; opacity: 0; transform: scale(.6); transition: opacity .15s var(--inline-ease), transform .15s var(--inline-ease); pointer-events: none; } [data-edit-mode] [data-inline-editable]:hover::after, [data-edit-mode] [data-inline-editable].is-editing::after { opacity: 1; transform: scale(1); } /* When live-editing, allow line breaks but lock the element so the page reflows don't jump under the caret. */ [data-edit-mode] [data-inline-editable][contenteditable="true"] { white-space: pre-wrap; min-height: 1.2em; user-select: text; } /* Token chips - rendered when an editable shows its template (e.g. "Premium tint in {city}, {state}"). These are styled inside the raw text via a span wrapper. */ [data-edit-mode] .inline-editor-token { display: inline-block; padding: 0 6px; margin: 0 1px; border-radius: 4px; background: rgba(var(--inline-accent-rgb), 0.22); color: rgba(var(--inline-accent-rgb), 1); font-weight: 700; font-size: 0.92em; letter-spacing: 0.01em; } /* ============================================================== Section hover state - just an outline now. The controls are NOT inside the section anymore - they live in a body-level overlay layer (.inline-editor-overlay-layer) so they always render above sticky headers, transformed cards, and overflow:hidden frames. ============================================================== */ [data-edit-mode] [data-inline-section] { position: relative; transition: box-shadow .18s var(--inline-ease); } [data-edit-mode] [data-inline-section]:hover { box-shadow: inset 0 0 0 2px var(--inline-outline); } /* Item-level hotspots: focused edit buttons for repeated cards/list entries. These stay inside the item so they move with the exact target and only appear on hover/focus. */ [data-edit-mode] [data-editor-item] { position: relative; transition: box-shadow .16s var(--inline-ease); } [data-edit-mode] [data-editor-item]:hover, [data-edit-mode] [data-editor-item]:focus-within { box-shadow: inset 0 0 0 1px rgba(var(--inline-accent-rgb), 0.45), 0 18px 42px -34px rgba(var(--inline-accent-rgb), 0.55); } .inline-item-settings { position: absolute; top: 10px; right: 10px; z-index: 24; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(var(--inline-accent-rgb), 0.5); border-radius: 11px; background: linear-gradient(145deg, rgba(var(--inline-accent-rgb), 0.22), rgba(255, 255, 255, 0.06)), rgba(7, 7, 9, 0.96); color: var(--inline-fg); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(255,255,255,.04) inset; opacity: 0; transform: translateY(-2px) scale(.96); pointer-events: none; cursor: pointer; transition: opacity .14s var(--inline-ease), transform .14s var(--inline-ease), border-color .14s var(--inline-ease), background .14s var(--inline-ease); } [data-editor-item]:hover > .inline-item-settings, [data-editor-item]:focus-within > .inline-item-settings, .inline-item-settings:focus-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .inline-item-settings:hover { border-color: rgba(var(--inline-accent-rgb), 0.85); background: linear-gradient(145deg, rgba(var(--inline-accent-rgb), 0.34), rgba(255, 255, 255, 0.08)), rgba(7, 7, 9, 0.98); } .inline-item-settings:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--inline-accent-rgb), 0.36), 0 14px 34px -18px rgba(0, 0, 0, 0.82); } .inline-item-settings svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* The overlay layer is a single fixed-position container appended to . It's pointer-events:none so the layer itself never blocks page clicks - only the .inline-section-controls inside it (which override pointer-events) catch clicks. */ .inline-editor-overlay-layer { position: fixed; inset: 0; z-index: 9990; pointer-events: none; } .inline-section-controls { position: fixed; /* top/right are set inline by JS via getBoundingClientRect */ display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 8px; border: 1px solid rgba(var(--inline-accent-rgb, 225 29 72), 0.58); border-radius: 14px; background: linear-gradient(145deg, rgba(var(--inline-accent-rgb, 225 29 72), 0.2), rgba(255, 255, 255, 0.055)), rgba(7, 7, 9, 0.98); color: #f5f5f7; font: 600 10px/1 system-ui, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0; transform: translateY(0); pointer-events: none; transition: opacity .14s var(--inline-ease), border-color .14s var(--inline-ease), box-shadow .14s var(--inline-ease); box-shadow: 0 18px 42px -20px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255,255,255,.04) inset; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } .inline-section-controls.is-visible { opacity: 1; pointer-events: auto; } .inline-section-tag { max-width: 168px; padding: 0 8px 0 3px; color: rgba(255,255,255,.78); letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inline-section-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: var(--inline-fg); cursor: pointer; transition: background .15s var(--inline-ease), color .15s var(--inline-ease), border-color .15s var(--inline-ease); } .inline-section-btn:hover { background: rgba(var(--inline-accent-rgb), 0.25); border-color: rgba(var(--inline-accent-rgb), 0.45); color: #fff; } .inline-section-btn[disabled], .inline-section-btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .inline-section-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--inline-accent-rgb), 0.35); } .inline-section-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .inline-section-btn.is-danger:hover { background: rgba(255, 80, 80, 0.3); } /* Visually-hidden helper for icon-only buttons. */ .inline-editor-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Hidden state for sections disabled via the inline editor: render them dimmed + show a "Hidden" tag instead of fully removing. */ [data-edit-mode] [data-inline-section][data-inline-disabled="true"] { opacity: 0.42; filter: grayscale(0.5); } [data-edit-mode] [data-inline-section][data-inline-disabled="true"]::before { content: 'Hidden in public site'; position: absolute; top: 10px; left: 14px; z-index: 8; padding: 4px 9px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: rgba(255, 255, 255, 0.8); font: 700 10px/1 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; } /* ============================================================== Editable images - "Replace" button on hover ============================================================== */ [data-edit-mode] [data-inline-image] { position: relative; } [data-edit-mode] [data-inline-image]::before { content: ''; position: absolute; inset: 0; border: 2px dashed transparent; border-radius: inherit; pointer-events: none; transition: border-color .15s var(--inline-ease); } [data-edit-mode] [data-inline-image]:hover::before { border-color: var(--inline-outline); } [data-edit-mode] [data-inline-image]:hover .inline-image-replace, [data-edit-mode] [data-inline-image].is-uploading .inline-image-replace { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .inline-image-replace { position: absolute; top: 12px; left: 50%; transform: translate(-50%, -4px); z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid rgba(var(--inline-accent-rgb), 0.5); border-radius: 999px; background: linear-gradient(120deg, rgba(var(--inline-accent-rgb), 0.18), rgba(255, 255, 255, 0.04)), var(--inline-bg); color: var(--inline-fg); font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0.04em; opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .15s var(--inline-ease), transform .15s var(--inline-ease); } .inline-image-replace svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .inline-image-replace input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* ============================================================== Mobile ============================================================== */ @media (max-width: 640px) { .inline-editor-toolbar { top: 10px; right: 10px; left: 10px; max-width: calc(100vw - 20px); overflow-x: auto; padding: 6px 6px 6px 10px; font-size: 10.5px; } .inline-editor-site-chip { display: none; } .inline-editor-toolbar-btn { height: 26px; padding: 0 9px; white-space: nowrap; } [data-edit-mode] [data-inline-section] > .inline-section-controls { top: 6px; right: 8px; padding: 4px 5px; } .inline-section-btn { width: 24px; height: 24px; } .inline-item-settings { top: 8px; right: 8px; width: 32px; height: 32px; } } @media (prefers-reduced-motion: reduce) { [data-edit-mode] [data-inline-editable], [data-edit-mode] [data-inline-image]::before, [data-edit-mode] [data-inline-section], .inline-editor-toolbar, .inline-editor-toolbar-btn, .inline-editor-toolbar-dot, .inline-editor-toast, .inline-section-btn, .inline-item-settings, .inline-image-replace, [data-edit-mode] [data-inline-editable]::after { transition: none !important; animation: none !important; } } /* ============================================================ Phase 2 additions ------------------------------------------------------------ */ /* Iconic toolbar button: square, 32x32, just the SVG icon. Used for undo, redo, command-palette opener. */ .inline-editor-toolbar-btn.is-iconic { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .inline-editor-toolbar-btn.is-iconic > span:not([aria-hidden]) { display: none; } .inline-editor-toolbar-btn[disabled], .inline-editor-toolbar-btn[disabled="true"] { opacity: 0.34; cursor: not-allowed; pointer-events: none; } /* Active section glow: when the per-section popup is open for a section, mark it visually so the user keeps the context. Outline-only - we DON'T touch the section's own background. */ [data-inline-section].is-editor-active { position: relative; } [data-inline-section].is-editor-active::after { content: ""; position: absolute; inset: -6px; z-index: 5; pointer-events: none; border-radius: 12px; border: 2px solid rgba(var(--accent-rgb, 225 29 72), 0.55); box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 225 29 72), 0.2), 0 0 24px rgba(var(--accent-rgb, 225 29 72), 0.18); animation: inline-active-pulse 2.4s ease-in-out infinite; } @keyframes inline-active-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 225 29 72), 0.2), 0 0 24px rgba(var(--accent-rgb, 225 29 72), 0.18); } 50% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 225 29 72), 0.3), 0 0 32px rgba(var(--accent-rgb, 225 29 72), 0.28); } } @media (prefers-reduced-motion: reduce) { [data-inline-section].is-editor-active::after { animation: none; } } @media (max-width: 900px) { [data-edit-mode] { --editor-sidebar-width: 0px; --editor-settings-width: min(100vw, 430px); --editor-topbar-height: 58px; --editor-mobile-sidebar-height: min(48dvh, 430px); } [data-edit-mode] body { padding: 0; } [data-edit-mode] .editor-site-canvas-stage .site-header, [data-edit-mode] .editor-site-canvas-stage header.site-header[data-v2] { left: 0; top: 0; width: 100%; margin-bottom: calc(var(--header-h-mobile, 60px) * -1) !important; } .editor-site-canvas { left: 0; right: 0; top: calc(var(--editor-topbar-height) + 42px + var(--editor-mobile-sidebar-height)); padding: 10px; } body.editor-sidebar-collapsed .editor-site-canvas { left: 0; top: calc(var(--editor-topbar-height) + 42px + var(--editor-sidebar-collapsed-width)); } body.editor-settings-open .editor-site-canvas { right: 0; } .editor-shell-topbar.inline-editor-toolbar { top: 0; right: 0; left: 0; max-width: none; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 0 10px; overflow: visible; } [data-edit-mode] body.editor-sidebar-collapsed .editor-shell-topbar.inline-editor-toolbar { left: 0; } [data-edit-mode] body.editor-settings-open .editor-shell-topbar.inline-editor-toolbar { right: 0; } .editor-shell-topbar-center { justify-content: flex-start; } .editor-shell-page-label { display: none; } .editor-shell-page-select { min-width: 138px; max-width: 42vw; height: 32px; font-size: 11px; } .editor-shell-topbar-right { position: fixed; top: var(--editor-topbar-height); left: 0; right: 0; height: 42px; justify-content: flex-start; overflow-x: auto; padding: 4px 8px; border-bottom: 1px solid var(--editor-shell-line); background: rgba(9,10,13,.96); } .editor-shell-sidebar { top: calc(var(--editor-topbar-height) + 42px); right: 0; bottom: auto; width: auto; height: var(--editor-mobile-sidebar-height); border-right: 0; border-bottom: 1px solid var(--editor-shell-line); } body.editor-sidebar-collapsed .editor-shell-sidebar { transform: translateY(calc(-100% + var(--editor-sidebar-collapsed-width))); } .editor-shell-sidebar-collapse { top: auto; right: 10px; bottom: 6px; width: 40px; height: 32px; } .editor-shell-sidebar-collapse svg { transform: rotate(180deg); } body.editor-sidebar-collapsed .editor-shell-sidebar-collapse svg { transform: rotate(0deg); } .editor-shell-settings-panel { top: calc(var(--editor-topbar-height) + 42px); height: var(--editor-mobile-sidebar-height); bottom: auto; max-width: 100vw; border-left: 0; border-bottom: 1px solid var(--editor-shell-line); box-shadow: 0 18px 46px rgba(0,0,0,.52); } .editor-shell-settings-head { min-height: 54px; padding: 9px 10px; } .editor-shell-settings-body { padding: 10px; } .editor-shell-section-editor-footer { margin: 10px -10px -10px; padding: 10px; } .editor-shell-sidebar-head { min-height: auto; padding: 10px; } .editor-shell-sidebar-head h2, .editor-shell-sidebar-kicker { display: none; } .editor-shell-sidebar-tools { margin-top: 0; grid-template-columns: minmax(0, 1fr); } .editor-shell-section-list { padding: 8px; } .editor-shell-global-actions { grid-template-columns: 1fr 1fr; } [data-edit-mode] #demo-customize-panel { left: 0; top: var(--editor-topbar-height); } }