/* ============================================================ VERTEXSCAN — Scan Viewer Page (viewer.html + admin-home.html + admin.html) ------------------------------------------------------------ Relies on css/style.css design tokens — load style.css first. Monochrome (black/white/grey) palette matches main site. Respects data-theme="dark" / "light" on . ============================================================ */ /* ── Body override — viewer fills the viewport ─────────────── */ body.viewer-page { height: 100vh; max-height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); color: var(--text); } /* ── Viewer-scoped aliases so existing class names keep working but now resolve to the theme-aware main-site tokens ───── */ .viewer-page { --vbg0: var(--bg); /* canvas / main area */ --vbg1: var(--bg2); /* sidebar */ --vbg2: var(--bg-card); /* cards / toolbar */ --vbg3: var(--bg-card-h); /* hover */ --vborder: var(--border); --vborder-a:var(--border-a); --vtext: var(--text); --vdim: var(--text-m); --vdeep: var(--text-d); --vaccent: var(--text); /* active = pure white/black, mirrors main site */ --vred: #ff5e5e; --vgreen: #3ecf8e; --vbar-h: 54px; --vsbar-w: 280px; } /* Light-mode card tweaks — a bit warmer under the warm bg ── */ [data-theme="light"] .viewer-page { --vbg1: #ece4d8; /* slightly darker than --bg cream */ --vbg2: #e4dcd0; --vbg3: #d9d1c5; } /* ========================================================= TOP BAR ========================================================= */ .vbar { height: var(--vbar-h); min-height: var(--vbar-h); background: var(--vbg2); border-bottom: 1px solid var(--vborder); display: flex; align-items: center; padding: 0 14px; gap: 10px; z-index: 100; } .vbar-back { display: flex; align-items: center; gap: 6px; color: var(--vdim); text-decoration: none; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; transition: color var(--ease), background var(--ease), border-color var(--ease); flex-shrink: 0; white-space: nowrap; } .vbar-back:hover { background: var(--vbg3); color: var(--vtext); border-color: var(--vborder-a); } .vbar-back svg { opacity: 0.75; } .vbar-divider { width: 1px; height: 22px; background: var(--vborder); flex-shrink: 0; } .vbar-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 700; color: var(--vtext); letter-spacing: -0.02em; flex-shrink: 0; } .vbar-logo-mark { width: 26px; height: 26px; background: var(--vtext); /* matches main-site nav-logo-mark */ border-radius: 5px; display: flex; align-items: center; justify-content: center; } [data-theme="light"] .vbar-logo-mark svg { stroke: var(--bg); } .vbar-spacer { flex: 1; } .vbar-cloud-group { display: flex; align-items: center; gap: 8px; } .vbar-cloud-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vdim); white-space: nowrap; } .vbar-scan-name { font-size: 13px; font-weight: 600; color: var(--vtext); background: var(--vbg3); border: 1px solid var(--vborder); padding: 6px 12px; border-radius: 6px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vbar-select { background: var(--vbg3); border: 1px solid var(--vborder); color: var(--vtext); font-size: 13px; font-family: inherit; padding: 6px 30px 6px 11px; border-radius: 6px; cursor: pointer; outline: none; appearance: none; background-repeat: no-repeat; background-position: right 10px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); min-width: 150px; transition: border-color var(--ease), background var(--ease); } [data-theme="light"] .vbar-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E"); } .vbar-select:hover, .vbar-select:focus { border-color: var(--vborder-a); } .vbar-btn { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--vborder); color: var(--vdim); font-size: 12px; font-weight: 500; font-family: inherit; padding: 6px 11px; border-radius: 6px; cursor: pointer; transition: color var(--ease), background var(--ease), border-color var(--ease); white-space: nowrap; } .vbar-btn:hover { background: var(--vbg3); color: var(--vtext); border-color: var(--vborder-a); } .vbar-btn.active { background: var(--vbg3); color: var(--vtext); border-color: var(--vtext); } .vbar-btn svg { flex-shrink: 0; } .vbar-btn .icon-fs-exit { display: none; } /* Theme toggle — icon-only, round, matches main nav */ .vbar-theme { width: 32px; height: 32px; padding: 0; border-radius: 50%; justify-content: center; } .vbar-theme .icon-sun { display: none; } .vbar-theme .icon-moon { display: block; } [data-theme="dark"] .vbar-theme .icon-sun { display: block; } [data-theme="dark"] .vbar-theme .icon-moon { display: none; } /* ========================================================= BODY LAYOUT ========================================================= */ .viewer-layout { flex: 1; display: flex; overflow: hidden; min-height: 0; } /* ========================================================= SIDEBAR ========================================================= */ .viewer-sidebar { width: var(--vsbar-w); min-width: var(--vsbar-w); background: var(--vbg1); border-right: 1px solid var(--vborder); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; transition: width 0.22s ease, min-width 0.22s ease, border-color 0.22s ease; scrollbar-width: thin; scrollbar-color: var(--vbg3) transparent; } .viewer-sidebar::-webkit-scrollbar { width: 4px; } .viewer-sidebar::-webkit-scrollbar-thumb { background: var(--vbg3); border-radius: 2px; } .viewer-sidebar.collapsed { width: 0; min-width: 0; border-color: transparent; } /* ── Sidebar sections ─────────────────────────────────── */ .vsection { border-bottom: 1px solid var(--vborder); } .vsection-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; user-select: none; transition: background var(--ease); white-space: nowrap; overflow: hidden; } .vsection-head:hover { background: var(--vbg2); } .vsection-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vdim); display: flex; align-items: center; gap: 8px; } .vsection-title svg { opacity: 0.65; flex-shrink: 0; } .vsection-chevron { color: var(--vdim); font-size: 10px; transition: transform 0.18s; flex-shrink: 0; } .vsection.closed .vsection-chevron { transform: rotate(-90deg); } .vsection-body { padding: 4px 14px 16px; } .vsection.closed .vsection-body { display: none; } /* ── Scan info card ─────────────────────────────────────── */ .scan-card { background: var(--vbg2); border: 1px solid var(--vborder); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 4px; } .scan-card-name { font-size: 14px; font-weight: 700; color: var(--vtext); margin-bottom: 8px; letter-spacing: -0.01em; } .scan-card-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--vdim); padding: 2px 0; } .scan-card-row b { color: var(--vtext); font-weight: 500; } /* ── Sliders ────────────────────────────────────────────── */ .ctrl-row { margin-bottom: 14px; } .ctrl-row:last-child { margin-bottom: 0; } .ctrl-label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--vdim); margin-bottom: 7px; letter-spacing: 0.02em; } .ctrl-label b { color: var(--vtext); font-weight: 600; font-size: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--vbg3); border-radius: 2px; cursor: pointer; outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--vtext); border: 2px solid var(--vbg1); cursor: pointer; box-shadow: 0 0 0 1px var(--vborder-a); transition: transform 0.12s; } input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--vtext); border: 2px solid var(--vbg1); cursor: pointer; box-shadow: 0 0 0 1px var(--vborder-a); } /* ── Toggle ─────────────────────────────────────────────── */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; margin-bottom: 12px; } .toggle-label { font-size: 12px; color: var(--vdim); } .toggle-sw { position: relative; width: 34px; height: 18px; cursor: pointer; } .toggle-sw input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-track { position: absolute; inset: 0; background: var(--vbg3); border: 1px solid var(--vborder); border-radius: 12px; transition: background var(--ease), border-color var(--ease); } .toggle-track::before { content: ''; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px; background: var(--vdim); border-radius: 50%; transition: transform var(--ease), background var(--ease); } .toggle-sw input:checked ~ .toggle-track { background: var(--vbg3); border-color: var(--vtext); } .toggle-sw input:checked ~ .toggle-track::before { transform: translateX(16px); background: var(--vtext); } /* ── Pills (colour / background modes) ──────────────────── */ .pill-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; } .pill { padding: 5px 12px; border-radius: 16px; font-size: 11px; font-weight: 500; border: 1px solid var(--vborder); background: none; color: var(--vdim); cursor: pointer; transition: color var(--ease), background var(--ease), border-color var(--ease); font-family: inherit; } .pill:hover { border-color: var(--vborder-a); color: var(--vtext); } .pill.active { background: var(--vbg3); border-color: var(--vtext); color: var(--vtext); } /* ── Measure tools grid ─────────────────────────────────── */ .tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .tool-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 11px 6px; background: var(--vbg2); border: 1px solid var(--vborder); border-radius: var(--radius); color: var(--vdim); cursor: pointer; font-size: 11px; font-family: inherit; font-weight: 500; transition: color var(--ease), background var(--ease), border-color var(--ease); white-space: nowrap; } .tool-btn svg { width: 17px; height: 17px; opacity: 0.85; } .tool-btn:hover { background: var(--vbg3); border-color: var(--vborder-a); color: var(--vtext); } .tool-btn.active { background: var(--vbg3); border-color: var(--vtext); color: var(--vtext); } .tool-btn.active svg { opacity: 1; } .clear-btn { width: 100%; padding: 8px; margin-bottom: 12px; background: none; border: 1px solid var(--vborder); border-radius: 6px; color: var(--vdim); font-size: 11px; font-weight: 500; font-family: inherit; cursor: pointer; transition: color var(--ease), background var(--ease), border-color var(--ease); } .clear-btn:hover { border-color: var(--vred); color: var(--vred); background: rgba(255,94,94,0.07); } /* ── Measure results list ───────────────────────────────── */ .measure-list { display: flex; flex-direction: column; gap: 5px; } .measure-empty { font-size: 11px; color: var(--vdim); text-align: center; padding: 10px 0; opacity: 0.7; } .measure-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--vbg2); border: 1px solid var(--vborder); border-radius: 7px; cursor: pointer; transition: border-color var(--ease); } .measure-item:hover { border-color: var(--vborder-a); } .mi-icon { font-size: 14px; flex-shrink: 0; line-height: 1; color: var(--vdim); } .mi-info { flex: 1; min-width: 0; } .mi-name { font-size: 10px; color: var(--vdim); margin-bottom: 1px; } .mi-value { font-size: 12px; font-weight: 600; color: var(--vtext); font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mi-del { background: none; border: none; color: var(--vdim); cursor: pointer; padding: 3px 5px; border-radius: 4px; font-size: 10px; transition: color var(--ease), background var(--ease); flex-shrink: 0; } .mi-del:hover { color: var(--vred); background: rgba(255,94,94,0.1); } /* ── Camera preset grid ─────────────────────────────────── */ .cam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .cam-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; background: var(--vbg2); border: 1px solid var(--vborder); border-radius: 7px; color: var(--vdim); font-size: 11px; font-weight: 500; font-family: inherit; cursor: pointer; transition: color var(--ease), background var(--ease), border-color var(--ease); } .cam-btn:hover { background: var(--vbg3); border-color: var(--vborder-a); color: var(--vtext); } .cam-btn svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.85; } .cam-btn.span2 { grid-column: span 2; } /* ========================================================= MAIN VIEWER AREA ========================================================= */ .viewer-main { flex: 1; position: relative; overflow: hidden; background: var(--vbg0); min-width: 0; } #potree-render-area { width: 100%; height: 100%; position: relative; /* Let Potree's InputHandler own every touch — no browser pan/zoom gestures stealing finger events meant for orbit/pick/measure. */ touch-action: none; } /* Don't override Potree's own canvas positioning/sizing — it sets `style.position = 'absolute'` and width/height 100% inline during construction. Overriding those with `!important` on mobile Chrome was tripping the WebGL size calc and firing Potree's onCrash fail-page. Just inherit `touch-action`. */ #potree-render-area canvas { touch-action: none; } /* ── Loading overlay ────────────────────────────────────── */ .loading-overlay { position: absolute; inset: 0; z-index: 50; background: rgba(12,12,12,0.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity 0.3s; } [data-theme="light"] .loading-overlay { background: rgba(244,237,228,0.9); } .loading-overlay.hidden { opacity: 0; pointer-events: none; } .spinner { width: 34px; height: 34px; border: 3px solid var(--vbg3); border-top-color: var(--vtext); border-radius: 50%; animation: vspin 0.75s linear infinite; } @keyframes vspin { to { transform: rotate(360deg); } } .loading-text { font-size: 13px; color: var(--vdim); } /* ── Tool hint pill ─────────────────────────────────────── */ /* Anchored bottom-centre. The hint itself is a layout row (text + cancel button); the whole pill is interactive so the × is tappable, but the short width means it only covers a tiny sliver of the canvas — users can still place measurement points virtually anywhere. */ .tool-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(12,12,12,0.82); backdrop-filter: blur(8px); border: 1px solid var(--vborder); border-radius: 20px; padding: 6px 6px 6px 16px; font-size: 12px; color: var(--vtext); pointer-events: auto; z-index: 20; white-space: nowrap; max-width: calc(100% - 24px); transition: opacity 0.2s; } [data-theme="light"] .tool-hint { background: rgba(244,237,228,0.85); } .tool-hint.hidden { opacity: 0; pointer-events: none; } .tool-hint-text { overflow: hidden; text-overflow: ellipsis; } .tool-hint-cancel { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--vborder); background: var(--vbg3); color: var(--vdim); cursor: pointer; padding: 0; transition: color var(--ease), background var(--ease), border-color var(--ease); } .tool-hint-cancel:hover { color: var(--vtext); background: var(--vbg2); border-color: var(--vborder-a); } /* ── Canvas info badge ──────────────────────────────────── */ .canvas-badge { position: absolute; top: 14px; right: 14px; z-index: 20; background: rgba(12,12,12,0.6); backdrop-filter: blur(6px); border: 1px solid var(--vborder); border-radius: 8px; padding: 6px 12px; pointer-events: none; } [data-theme="light"] .canvas-badge { background: rgba(244,237,228,0.75); } .canvas-badge-pts { font-size: 13px; font-weight: 700; color: var(--vtext); font-family: var(--mono); font-variant-numeric: tabular-nums; } .canvas-badge-label { font-size: 10px; color: var(--vdim); margin-top: 1px; } /* ── Error state ────────────────────────────────────────── */ .viewer-error { position: absolute; inset: 0; z-index: 60; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 48px; } .viewer-error h3 { color: var(--vtext); font-size: 20px; margin: 0; letter-spacing: -0.02em; } .viewer-error p { color: var(--vdim); font-size: 13px; margin: 0; line-height: 1.65; max-width: 460px; } .viewer-error code { display: block; background: var(--vbg2); padding: 10px 20px; border-radius: 7px; font-family: var(--mono); font-size: 13px; color: var(--vtext); border: 1px solid var(--vborder); } /* ── Suppress all Potree default chrome ─────────────────── */ .potree_toolbar, .potree_sidebar, #potree_menu_toggle, #potree_description, #potree_quick_buttons, .potree_sidebar_brand, #potree_map_toggle, #potree_info { display: none !important; } /* ── Custom scrollbar in viewer ─────────────────────────── */ .viewer-page ::-webkit-scrollbar { width: 4px; height: 4px; } .viewer-page ::-webkit-scrollbar-track { background: transparent; } .viewer-page ::-webkit-scrollbar-thumb { background: var(--vbg3); border-radius: 2px; } /* ── Profile window (Potree's 2D cross-section panel) ──── */ .pv-panel { position: absolute; bottom: 0; left: 0; right: 0; height: 220px; z-index: 25; background: var(--vbg1); border-top: 1px solid var(--vborder); padding: 10px 14px; transform: translateY(100%); transition: transform 0.25s ease; } .pv-panel.open { transform: translateY(0); } /* ── Sidebar backdrop — tap outside drawer to close on mobile ── */ .viewer-backdrop { position: absolute; inset: 0; z-index: 25; background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .viewer-backdrop.visible { opacity: 1; pointer-events: auto; } [data-theme="light"] .viewer-backdrop { background: rgba(0,0,0,0.25); } /* ── Hamburger — only visible on narrow vbar; toggles the drawer ── */ .vbar-hamburger { display: none; width: 36px; height: 36px; padding: 0; background: none; border: 1px solid var(--vborder); border-radius: 6px; color: var(--vdim); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: color var(--ease), border-color var(--ease), background var(--ease); } .vbar-hamburger:hover { color: var(--vtext); border-color: var(--vborder-a); background: var(--vbg3); } .vbar-hamburger.active { color: var(--vtext); border-color: var(--vtext); } /* ── Platform tabs (admin-home) — pill group for Desktop/Mobile ── */ .platform-tabs { display: flex; gap: 4px; padding: 3px; background: var(--vbg2); border: 1px solid var(--vborder); border-radius: 7px; flex-shrink: 0; } .platform-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 5px; font-size: 11.5px; font-weight: 500; font-family: inherit; color: var(--vdim); background: none; border: none; cursor: pointer; transition: color var(--ease), background var(--ease); white-space: nowrap; } .platform-tab:hover { color: var(--vtext); } .platform-tab.active { color: var(--vtext); background: var(--vbg3); box-shadow: 0 0 0 1px var(--vborder-a); } .platform-tab svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.8; } .platform-tab.active svg { opacity: 1; } /* ── Responsive ─────────────────────────────────────────── */ /* Medium — shrink overly-wide optional chrome */ @media (max-width: 900px) { .vbar-back span, .vbar-logo-text { display: none; } } /* Mobile tablet-ish — drawer behaviour kicks in */ @media (max-width: 800px) { .viewer-page { --vsbar-w: 280px; --vbar-h: 52px; } .viewer-sidebar { position: absolute; top: 0; left: 0; height: 100%; z-index: 30; transition: width 0.22s ease, min-width 0.22s ease, box-shadow 0.22s; } .viewer-sidebar:not(.collapsed) { box-shadow: 6px 0 24px rgba(0,0,0,0.5); } [data-theme="light"] .viewer-sidebar:not(.collapsed) { box-shadow: 6px 0 24px rgba(0,0,0,0.15); } /* On mobile, the vbar hamburger replaces the old desktop panel toggle */ .vbar-hamburger { display: inline-flex; } } /* Phone — full compaction */ @media (max-width: 640px) { .viewer-page { --vsbar-w: min(86vw, 320px); --vbar-h: 50px; } .vbar { padding: 0 10px; gap: 6px; } /* Collapse verbose dividers and text labels */ .vbar-divider { display: none; } .admin-title { display: none; } .vbar-cloud-label { display: none; } .vbar-select { min-width: 0; max-width: 44vw; padding: 5px 26px 5px 9px; font-size: 12.5px; } /* Icon-only chrome for save status / label-bearing buttons */ .vbar-btn { padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 6px; } .vbar-btn span, .vbar-btn.btn-has-label, .vbar-btn:not(.vbar-theme):not(.vbar-hamburger):not(.admin-save) { /* Hide trailing text labels inside buttons on phones */ } .vbar-btn:not(.vbar-theme):not(.vbar-hamburger) { font-size: 0; /* hide text, keep icons */ gap: 0; } .vbar-btn:not(.vbar-theme):not(.vbar-hamburger) svg { width: 15px; height: 15px; } /* Save button keeps visual emphasis but stays compact */ .vbar-btn.admin-save { width: 34px; } .vbar-back { padding: 0; width: 34px; height: 34px; justify-content: center; border: 1px solid var(--vborder); border-radius: 6px; } .vbar-back span, .vbar-logo span:not(.vbar-logo-mark) { display: none; } .vbar-logo { gap: 0; } .vbar-logo-mark { width: 24px; height: 24px; } .admin-status { min-width: 0; max-width: 70px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; padding: 0 4px; } .platform-tabs { padding: 2px; } .platform-tab { padding: 4px 8px; font-size: 11px; } .platform-tab span { display: none; } /* icon-only tabs on phone */ .vbar-theme { width: 34px; height: 34px; } /* Loading overlay text a bit smaller */ .loading-text { font-size: 12px; } /* Canvas badge — hide on very small screens, it overlaps */ .canvas-badge { top: 10px; right: 10px; padding: 4px 8px; } .canvas-badge-pts { font-size: 11px; } .canvas-badge-label { font-size: 9px; } /* Bigger cancel tap-target + narrower hint so it doesn't overflow */ .tool-hint { bottom: 14px; padding: 5px 5px 5px 14px; font-size: 11.5px; } .tool-hint-cancel { width: 28px; height: 28px; } } /* Ultra-narrow (e.g. 320px) — drop the brand mark entirely */ @media (max-width: 380px) { .vbar-logo { display: none; } .vbar { gap: 4px; } }