/* ============================================================ Atlantist UI Overhaul — ArchiCAD-style toolbar, Sheet component, dark/light mode, mobile-first modals. Imports and extends brand-tokens.css and app.css. Does NOT override Three.js viewport styles. ============================================================ */ /* ── 1. LIGHT MODE THEME TOKENS ────────────────────────────── When data-theme="light" is on , these override the dark defaults in app.css :root. */ html[data-theme="light"] { --bg-app: #f0f0ec; --bg-panel: #fafaf8; --bg-panel-hover: #f0efeb; --bg-panel-active: #e0edf8; --bg-viewport: #e8e8e4; --bg-modal: #ffffff; --border: #d8d6d0; --border-accent: #1d5fa6; --text-primary: #0f1923; --text-secondary: #3d3a35; --text-muted: #8a8680; --text-accent: #1d5fa6; --text-success: #16a34a; --text-warn: #d97706; --text-error: #dc2626; --accent: #1d5fa6; --accent-hover: #3479c4; --accent-active: #134a84; } /* ── 2. LAYOUT SHELL ───────────────────────────────────────── Full-height flex column: topbar → toolbar → main-layout */ html, body { height: 100%; overflow: hidden; } body { display: flex; flex-direction: column; background: var(--bg-app); color: var(--text-primary); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 13px; -webkit-font-smoothing: antialiased; } /* ── 3. TOPBAR ─────────────────────────────────────────────── 44px brand bar: logo · view controls · right actions */ #app-topbar { height: 44px; min-height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #0c1420; border-bottom: 1px solid rgba(255,255,255,0.06); z-index: 200; position: relative; } html[data-theme="light"] #app-topbar { background: #1a2b40; } #topbar-logo { display: flex; align-items: center; gap: 8px; color: #cfe3f5; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 15px; letter-spacing: -0.3px; min-width: 130px; flex-shrink: 0; text-decoration: none; } #view-controls { display: flex; gap: 2px; margin-left: 8px; } .view-btn { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s; font-family: 'DM Sans', system-ui, sans-serif; } .view-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); } .view-btn.active { background: rgba(74,125,189,0.25); border-color: rgba(74,125,189,0.6); color: #7abaef; } #topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* Theme toggle in topbar */ #btn-theme-toggle { width: 32px; height: 32px; border-radius: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background 0.15s; } #btn-theme-toggle:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); } /* DAG status pill */ #dag-status { font-size: 11px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 5px; } #dag-label { color: rgba(255,255,255,0.6); font-weight: 500; } /* ── 4. ARCHICAD-STYLE TOOLBAR ─────────────────────────────── Horizontal strip of icon buttons grouped by function. 44-48px minimum hit targets. Active tool highlighted. Overflow handled by horizontal scroll on narrow widths. */ #toolbar { height: 48px; min-height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 0; padding: 0 6px; background: var(--bg-panel); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; z-index: 100; scrollbar-width: none; } #toolbar::-webkit-scrollbar { display: none; } /* ── Tool groups: visual separators ── */ .tg { display: flex; align-items: center; gap: 1px; padding: 0 4px; border-right: 1px solid var(--border); height: 100%; } .tg:last-of-type { border-right: none; } /* ── Individual tool button ── */ .tb-btn, .tool-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 40px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; gap: 2px; flex-shrink: 0; position: relative; } .tb-btn svg, .tool-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Icon-only variant (no label) */ .tb-btn.icon-only, .tool-btn.icon-only { width: 40px; } .tb-btn.icon-only .tb-label, .tool-btn.icon-only .tb-label { display: none; } .tb-btn:hover, .tool-btn:hover { background: var(--bg-panel-hover); border-color: var(--border); color: var(--text-primary); } .tb-btn.active, .tb-btn[aria-pressed="true"], .tool-btn.active, .tool-btn[aria-pressed="true"] { background: var(--bg-panel-active); border-color: var(--border-accent); color: var(--text-accent); } .tb-btn.active svg, .tool-btn.active svg { stroke: var(--text-accent); } /* Tooltip on hover */ .tb-btn[title]:hover::after, .tool-btn[title]:hover::after { content: attr(title); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #111; color: #e8e8e8; font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 500; pointer-events: none; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 12px rgba(0,0,0,0.4); } /* Toolbar spacer */ .tg-spacer { flex: 1; } /* MEP sub-toolbar (shown when MEP mode active) */ #mep-toolbar { display: none; gap: 1px; align-items: center; padding: 0 4px; } #mep-toolbar.visible { display: flex; } .mep-tool-btn { height: 32px; padding: 0 10px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; font-size: 11px; cursor: pointer; transition: background 0.12s; } .mep-tool-btn:hover { background: var(--bg-panel-hover); color: var(--text-primary); } .mep-tool-btn.active { background: var(--bg-panel-active); border-color: var(--border-accent); color: var(--text-accent); } /* Annotation sub-toolbar */ #annotation-toolbar { display: none; gap: 1px; align-items: center; padding: 0 4px; } #annotation-toolbar:not(.hidden) { display: flex; } .ann-tool-btn { height: 32px; padding: 0 10px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; font-size: 11px; cursor: pointer; transition: background 0.12s; } .ann-tool-btn:hover { background: var(--bg-panel-hover); color: var(--text-primary); } .ann-tool-btn.active { background: var(--bg-panel-active); border-color: var(--border-accent); color: var(--text-accent); } /* ── 5. MAIN LAYOUT ────────────────────────────────────────── Horizontal flex: sidebar-left · viewport · sidebar-right */ #main-layout { flex: 1; display: flex; overflow: hidden; min-height: 0; } .sidebar { flex-shrink: 0; background: var(--bg-panel); display: flex; flex-direction: column; overflow: hidden; transition: width 0.2s ease; } #sidebar-left { width: 200px; border-right: 1px solid var(--border); } #sidebar-right { width: 280px; border-left: 1px solid var(--border); } #sidebar-left.collapsed { width: 0; } #sidebar-right.collapsed { width: 0; } #viewport-area { flex: 1; min-width: 0; position: relative; background: var(--bg-viewport); display: flex; flex-direction: column; } .canvas-wrap { flex: 1; position: relative; } /* ── 6. PROPERTIES PANEL ───────────────────────────────────── Right sidebar redesigned with grouped sections. */ #props-header { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } #props-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } #btn-close-props { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 3px; } #btn-close-props:hover { color: var(--text-error); } #properties-content { padding: 0; overflow-y: auto; flex: 1; } /* Props section groups */ .props-group { border-bottom: 1px solid var(--border); } .props-group-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; cursor: pointer; user-select: none; background: rgba(255,255,255,0.02); transition: background 0.12s; } .props-group-header:hover { background: var(--bg-panel-hover); } .props-group-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .props-group-chevron { font-size: 8px; color: var(--text-muted); transition: transform 0.2s; } .props-group.collapsed .props-group-chevron { transform: rotate(-90deg); } .props-group.collapsed .props-group-body { display: none; } /* Binding indicator */ .prop-binding { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-left: auto; margin-right: 4px; } .prop-binding.bound { background: var(--text-accent); } .prop-binding.unbound { background: var(--border); } /* ── 7. SHEET COMPONENT ────────────────────────────────────── Single shared component: desktop = centered modal, mobile (<768px) = bottom sheet with drag handle. */ /* Overlay backdrop */ .sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sheet-overlay.hidden { display: none; } /* Desktop: centered modal */ .sheet-dialog { background: var(--bg-modal); border: 1px solid var(--border); border-radius: 12px; max-width: 640px; width: calc(100% - 48px); max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.5); animation: sheetFadeIn 0.18s ease; } @keyframes sheetFadeIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .sheet-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .sheet-title { font-size: 15px; font-weight: 700; color: var(--text-primary); flex: 1; } .sheet-close { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.12s, color 0.12s; } .sheet-close:hover { background: var(--bg-panel-hover); color: var(--text-error); } .sheet-body { padding: 16px 20px; overflow-y: auto; flex: 1; } .sheet-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; } /* ── 8. MODAL FORM ELEMENTS ────────────────────────────────── Unified form styles for all dialogs. */ .form-grid { display: grid; gap: 12px; } .form-grid.col-2 { grid-template-columns: 1fr 1fr; } .form-grid.col-3 { grid-template-columns: 1fr 1fr 1fr; } .form-grid.col-4 { grid-template-columns: repeat(4, 1fr); } .form-field { display: flex; flex-direction: column; gap: 4px; } .form-label { font-size: 11px; font-weight: 500; color: var(--text-muted); } .form-input, .form-select { width: 100%; padding: 8px 10px; background: var(--bg-viewport); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 13px; font-family: 'DM Sans', system-ui, sans-serif; outline: none; transition: border-color 0.15s; box-sizing: border-box; } .form-input:focus, .form-select:focus { border-color: var(--accent); } .form-select { cursor: pointer; } .btn-cancel { flex: 1; padding: 10px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); cursor: pointer; font-size: 13px; transition: border-color 0.15s, color 0.15s; } .btn-cancel:hover { border-color: var(--accent); color: var(--text-primary); } .btn-confirm { flex: 1; padding: 10px; background: var(--accent); border: none; border-radius: 8px; color: white; cursor: pointer; font-size: 13px; font-weight: 600; transition: background 0.15s; } .btn-confirm:hover { background: var(--accent-hover); } /* ── 9. MOBILE BOTTOM TOOLBAR ──────────────────────────────── Fixed bottom bar on mobile. Primary 5 tools + overflow. Shown below 768px width. Hidden on desktop. */ #mobile-toolbar { display: none; } /* Long-press reveals sub-tool popover */ .mobile-tool-popover { position: fixed; bottom: 68px; background: var(--bg-modal); border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: flex; gap: 4px; z-index: 900; box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: popoverIn 0.15s ease; } @keyframes popoverIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .mobile-tool-popover.hidden { display: none; } .mob-tool-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; gap: 3px; font-size: 9px; font-weight: 600; transition: background 0.12s; } .mob-tool-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .mob-tool-btn:hover, .mob-tool-btn:active { background: var(--bg-panel-hover); color: var(--text-primary); } .mob-tool-btn.active { background: var(--bg-panel-active); border-color: var(--border-accent); color: var(--text-accent); } /* Safe-area inset for devices with home indicator */ #mobile-toolbar { padding-bottom: env(safe-area-inset-bottom, 0px); } /* ── 10. MOBILE BOTTOM SHEET ───────────────────────────────── On mobile, sheet-dialog becomes a bottom sheet. */ @media (max-width: 767px) { #toolbar { display: none; } #mobile-toolbar { display: flex; align-items: center; justify-content: space-around; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: var(--bg-panel); border-top: 1px solid var(--border); z-index: 300; padding: 0 8px; padding-bottom: env(safe-area-inset-bottom, 0px); } #main-layout { /* Make room for mobile bottom bar */ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } /* Properties panel becomes full-width bottom panel on mobile */ #sidebar-right { position: fixed; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; width: 100% !important; height: 50vh; border-left: none; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; z-index: 200; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 -8px 40px rgba(0,0,0,0.4); } #sidebar-right.open { transform: translateY(0); } /* Drag handle for mobile bottom sheet */ #sidebar-right::before { content: ''; display: block; width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 10px auto 4px; flex-shrink: 0; } #sidebar-left { display: none; } /* Sheet dialogs become bottom sheets on mobile */ .sheet-overlay { align-items: flex-end; backdrop-filter: none; -webkit-backdrop-filter: none; } .sheet-dialog { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; border-bottom: none; animation: sheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1); padding-bottom: env(safe-area-inset-bottom, 0px); } @keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Drag handle on mobile bottom sheets */ .sheet-dialog::before { content: ''; display: block; width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; } .form-grid.col-4 { grid-template-columns: 1fr 1fr; } .form-grid.col-3 { grid-template-columns: 1fr 1fr; } /* Account modal — full-width on mobile */ .modal-account-dialog { max-width: 100%; } } /* Tablet adjustments */ @media (max-width: 1024px) and (min-width: 768px) { #sidebar-left { width: 168px; } #sidebar-right { width: 240px; } .tb-btn, .tool-btn { width: 38px; } .tg { padding: 0 2px; } } /* ── 11. LEGACY MODAL COMPAT ───────────────────────────────── Existing