/* editor.css — App shell, workspaces, and editor-specific UI patterns. * Tokens (CSS vars) live in tokens.css. Reusable components live in components.css. * This file owns: body/reset, topbar, activity rail, workspace layouts, * region tree, history panel, context menu, inspector/detail. */ /* ── reset ── */ * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } /* Ported from the reference's `body {}` rule. Scoped to `.editor-page` because the Blazor WASM app shares one across all routes (dashboard, editor, …); the editor's shell is the full-screen wrapper instead. This is the only adaptation to the ported editor.css. */ .editor-page { font-family: ui-monospace, monospace; font-size: var(--font-lg); background: var(--bg-base); color: var(--text-bright); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════════ TOP BAR ══════════════════════════════════════════════════════════════════════════ */ .topbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 14px; background: var(--bg-panel); border-bottom: 1px solid var(--border); flex-shrink: 0; position: relative; } .topbar-breadcrumb-home { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); text-decoration: none; font-size: var(--font-md); white-space: nowrap; } .topbar-breadcrumb-home:hover { color: var(--text-strong); } .topbar-sep { color: var(--text-muted); font-size: var(--font-base); user-select: none; } .topbar-crumb { font-size: var(--font-md); color: var(--text-primary); white-space: nowrap; } .topbar-crumb--dim { color: var(--text-secondary); } /* The drawing is not in the studio. Loud on purpose: it is the only thing between an author and losing every edit made since the last save the server took. */ .topbar-crumb--warn { color: var(--color-warning); font-weight: 600; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } /* Wizard save indicator (ND4): quiet text in the topbar — Saved · Saving… · Unsaved. */ .topbar-save-status { font-size: var(--font-sm); color: var(--text-muted); white-space: nowrap; } /* Sketch topbar export actions */ .topbar-actions { display: flex; align-items: center; gap: var(--space-2); } .topbar-changes-badge { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-sm); color: var(--color-warning); white-space: nowrap; } .topbar-changes-badge svg { width: var(--icon-xs); height: var(--icon-xs); flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════════════ EDITOR PAGE — main layout ══════════════════════════════════════════════════════════════════════════ */ .app-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } .activity-viewport { display: flex; flex: 1; min-width: 0; overflow: hidden; } /* A phase's flow-bar + body, stacked so the flow-bar is a flush strip under the topbar (no gaps, like the editor shell): tight against the topbar + rail, the workspace tight against it. Shared by the Configure wizard (see new-map-authoring.md §12) and the Edit activities with steps (Setup, Build). */ .phase-body { display: flex; flex-direction: column; flex: 1; min-width: 0; } .flow-bar--flush { flex-shrink: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; } .phase-body > .workspace { flex: 1; min-height: 0; } /* ── App footer (dashboard shell — bottom counterpart to the topbar) ── */ .app-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-shrink: 0; padding: var(--space-2) 14px; background: var(--bg-panel); border-top: 1px solid var(--border); font-size: var(--font-base); } .app-footer-brand { color: var(--text-muted); user-select: none; } .app-footer-links { display: flex; align-items: center; gap: var(--space-4); } .app-footer-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-secondary); text-decoration: none; } .app-footer-link:hover { color: var(--text-strong); } .app-footer-link svg { width: var(--icon-sm); height: var(--icon-sm); } /* ── sidebar resize handles ── */ .sidebar-handle { width: 9px; flex-shrink: 0; cursor: ew-resize; background: var(--bg-panel); position: relative; touch-action: none; /* a touch-drag resizes the panel rather than scrolling the page */ } .sidebar-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; background: var(--border); transition: background var(--transition-fast); } .sidebar-handle:hover::before, .sidebar-handle--dragging::before { background: var(--accent); } /* ── SVG areas ── */ .svg-area { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; background: var(--bg-canvas); position: relative; /* anchors the 2-D world surface below the svg (see .world-canvas-2d) */ } /* The painted world layers of a hybrid surface: a