/** * MapLibre GL LiDAR Control Styles */ /* ==================================================================== * Theme tokens * * All colors are driven by these `--lidar-*` custom properties so the * control adapts to light/dark themes. The defaults below are the light * theme. The dark values are applied either automatically (when the OS / * browser reports `prefers-color-scheme: dark`) or explicitly when the * host adds the `lidar-theme-dark` class to (done by the control * when constructed with `theme: 'dark'`). * * Variables are defined on :root so that panels and modals which are * appended to (metadata panel, chart popup, tooltip) inherit them. * ==================================================================== */ :root { --lidar-bg: #ffffff; --lidar-bg-muted: #f8f9fa; --lidar-bg-subtle: #f0f0f0; --lidar-bg-code: #f5f5f5; --lidar-hover: #e0e0e0; --lidar-active: #d0d0d0; --lidar-border: #e0e0e0; --lidar-border-input: #dddddd; --lidar-border-strong: #cccccc; --lidar-border-hover: #bbbbbb; --lidar-border-subtle: rgba(0, 0, 0, 0.15); --lidar-border-dashed: #dddddd; --lidar-text: #333333; --lidar-text-strong: #1f2a37; --lidar-text-secondary: #555555; --lidar-text-tertiary: #666666; --lidar-text-muted: #888888; --lidar-text-faint: #999999; --lidar-accent: #159895; --lidar-accent-hover: #128784; --lidar-accent-border: #128583; --lidar-accent-dark: #0f6d6b; --lidar-accent-darker: #0b5b59; --lidar-accent-soft: #f0faf9; --lidar-accent-ring: rgba(21, 152, 149, 0.15); --lidar-on-accent: #ffffff; --lidar-shadow: rgba(0, 0, 0, 0.1); --lidar-shadow-modal: rgba(0, 0, 0, 0.3); --lidar-backdrop: rgba(0, 0, 0, 0.5); --lidar-overlay: rgba(255, 255, 255, 0.95); --lidar-toggle-hover: rgba(0, 0, 0, 0.05); --lidar-scrollbar: rgba(0, 0, 0, 0.3); --lidar-scrollbar-hover: rgba(0, 0, 0, 0.5); --lidar-tooltip-bg: rgba(0, 0, 0, 0.85); --lidar-tooltip-text: #ffffff; --lidar-error-bg: #fff5f5; --lidar-error-border: #ffcdd2; --lidar-error-text: #c62828; --lidar-danger: #dc3545; --lidar-danger-bg: #fff5f5; --lidar-danger-on: #ffffff; --lidar-info-bg: #e3f2fd; --lidar-info-text: #1565c0; --lidar-info-border: #90caf9; --lidar-resize-grip: #cccccc; --lidar-resize-grip-hover: #999999; /* Canvas chart tokens (read from JS via getComputedStyle) */ --lidar-chart-bg: #f8f8f8; --lidar-chart-grid: #dddddd; --lidar-chart-axis: #333333; --lidar-chart-text: #333333; --lidar-chart-muted: #888888; --lidar-chart-highlight: #000000; } /* Dark theme values, shared by auto-detection and the forced class. */ @media (prefers-color-scheme: dark) { :root:not(.lidar-theme-light) { --lidar-bg: #1f2127; --lidar-bg-muted: #2a2d35; --lidar-bg-subtle: #313640; --lidar-bg-code: #14161a; --lidar-hover: #3a3f4a; --lidar-active: #454b58; --lidar-border: #3a3f4a; --lidar-border-input: #454b58; --lidar-border-strong: #4f5662; --lidar-border-hover: #5a626f; --lidar-border-subtle: rgba(255, 255, 255, 0.15); --lidar-border-dashed: #4f5662; --lidar-text: #e6e8ec; --lidar-text-strong: #f2f4f7; --lidar-text-secondary: #c3c8d1; --lidar-text-tertiary: #a7adb8; --lidar-text-muted: #8b919c; --lidar-text-faint: #757b86; --lidar-accent: #1bb3af; --lidar-accent-hover: #19a3a0; --lidar-accent-border: #17928f; --lidar-accent-dark: #2bc7c3; --lidar-accent-darker: #3ad4d0; --lidar-accent-soft: rgba(27, 179, 175, 0.18); --lidar-accent-ring: rgba(27, 179, 175, 0.3); --lidar-on-accent: #ffffff; --lidar-shadow: rgba(0, 0, 0, 0.5); --lidar-shadow-modal: rgba(0, 0, 0, 0.6); --lidar-backdrop: rgba(0, 0, 0, 0.65); --lidar-overlay: rgba(25, 27, 31, 0.95); --lidar-toggle-hover: rgba(255, 255, 255, 0.08); --lidar-scrollbar: rgba(255, 255, 255, 0.25); --lidar-scrollbar-hover: rgba(255, 255, 255, 0.4); --lidar-tooltip-bg: rgba(0, 0, 0, 0.9); --lidar-tooltip-text: #ffffff; --lidar-error-bg: rgba(198, 40, 40, 0.15); --lidar-error-border: rgba(198, 40, 40, 0.5); --lidar-error-text: #f1a9a9; --lidar-danger: #e5546a; --lidar-danger-bg: rgba(220, 53, 69, 0.15); --lidar-danger-on: #ffffff; --lidar-info-bg: rgba(21, 101, 192, 0.22); --lidar-info-text: #7fb6f0; --lidar-info-border: rgba(144, 202, 249, 0.4); --lidar-resize-grip: #5a626f; --lidar-resize-grip-hover: #8b919c; --lidar-chart-bg: #1a1c20; --lidar-chart-grid: #3a3f4a; --lidar-chart-axis: #c3c8d1; --lidar-chart-text: #c3c8d1; --lidar-chart-muted: #8b919c; --lidar-chart-highlight: #ffffff; } } /* Forced dark theme (theme: 'dark'), overrides OS preference. */ :root.lidar-theme-dark { --lidar-bg: #1f2127; --lidar-bg-muted: #2a2d35; --lidar-bg-subtle: #313640; --lidar-bg-code: #14161a; --lidar-hover: #3a3f4a; --lidar-active: #454b58; --lidar-border: #3a3f4a; --lidar-border-input: #454b58; --lidar-border-strong: #4f5662; --lidar-border-hover: #5a626f; --lidar-border-subtle: rgba(255, 255, 255, 0.15); --lidar-border-dashed: #4f5662; --lidar-text: #e6e8ec; --lidar-text-strong: #f2f4f7; --lidar-text-secondary: #c3c8d1; --lidar-text-tertiary: #a7adb8; --lidar-text-muted: #8b919c; --lidar-text-faint: #757b86; --lidar-accent: #1bb3af; --lidar-accent-hover: #19a3a0; --lidar-accent-border: #17928f; --lidar-accent-dark: #2bc7c3; --lidar-accent-darker: #3ad4d0; --lidar-accent-soft: rgba(27, 179, 175, 0.18); --lidar-accent-ring: rgba(27, 179, 175, 0.3); --lidar-on-accent: #ffffff; --lidar-shadow: rgba(0, 0, 0, 0.5); --lidar-shadow-modal: rgba(0, 0, 0, 0.6); --lidar-backdrop: rgba(0, 0, 0, 0.65); --lidar-overlay: rgba(25, 27, 31, 0.95); --lidar-toggle-hover: rgba(255, 255, 255, 0.08); --lidar-scrollbar: rgba(255, 255, 255, 0.25); --lidar-scrollbar-hover: rgba(255, 255, 255, 0.4); --lidar-tooltip-bg: rgba(0, 0, 0, 0.9); --lidar-tooltip-text: #ffffff; --lidar-error-bg: rgba(198, 40, 40, 0.15); --lidar-error-border: rgba(198, 40, 40, 0.5); --lidar-error-text: #f1a9a9; --lidar-danger: #e5546a; --lidar-danger-bg: rgba(220, 53, 69, 0.15); --lidar-danger-on: #ffffff; --lidar-info-bg: rgba(21, 101, 192, 0.22); --lidar-info-text: #7fb6f0; --lidar-info-border: rgba(144, 202, 249, 0.4); --lidar-resize-grip: #5a626f; --lidar-resize-grip-hover: #8b919c; --lidar-chart-bg: #1a1c20; --lidar-chart-grid: #3a3f4a; --lidar-chart-axis: #c3c8d1; --lidar-chart-text: #c3c8d1; --lidar-chart-muted: #8b919c; --lidar-chart-highlight: #ffffff; } /* Container - matches maplibregl-ctrl styling. The selector is intentionally more specific than MapLibre's `.maplibregl-ctrl-group` so the themed background always wins regardless of stylesheet import order, keeping the toggle icon's contrast correct. */ .lidar-control, .maplibregl-ctrl-group.lidar-control { background: var(--lidar-bg); border-radius: 4px; box-shadow: 0 0 0 2px var(--lidar-shadow); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Toggle button - 29x29 to match navigation control. Scoped under .lidar-control so the icon color reliably overrides MapLibre's default button styling and keeps strong contrast against the themed background. */ .lidar-control .lidar-control-toggle { background: none; border: none; padding: 0; width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; color: var(--lidar-text-strong); } .lidar-control .lidar-control-toggle:hover { background-color: var(--lidar-toggle-hover); } .lidar-control-toggle .lidar-control-icon { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; line-height: 0; } .lidar-control-toggle .lidar-control-icon svg { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; } /* Panel - positioned dynamically by JavaScript for floating behavior */ .lidar-control-panel { position: absolute; /* Position is set dynamically by _updatePanelPosition() */ background: var(--lidar-bg); border-radius: 4px; box-shadow: 0 0 0 2px var(--lidar-shadow); width: 380px; /* Panel is a flex column: header stays fixed, content scrolls. overflow is hidden so the resize handle stays pinned to the corner and rounded corners clip cleanly. Horizontal padding lives on the header and content (not the panel) so the content's scrollbar sits flush to the panel edge instead of overlapping the inner components. */ overflow: hidden; z-index: 1000; padding: 0; font-size: 12px; line-height: 1.4; display: none; flex-direction: column; box-sizing: border-box; color: var(--lidar-text); } .lidar-control-panel::-webkit-scrollbar { width: 6px; } .lidar-control-panel::-webkit-scrollbar-track { background: transparent; } .lidar-control-panel::-webkit-scrollbar-thumb { background-color: var(--lidar-scrollbar); border-radius: 3px; } .lidar-control-panel::-webkit-scrollbar-thumb:hover { background-color: var(--lidar-scrollbar-hover); } .lidar-control-panel.expanded { display: flex; } /* Resize handles - one fixed in each bottom corner. The bottom-right handle grows the panel rightward, the bottom-left handle leftward; both grow it downward. */ .lidar-control-resize-handle { position: absolute; bottom: 0; width: 16px; height: 16px; z-index: 3; touch-action: none; } .lidar-control-resize-handle::after { content: ''; position: absolute; bottom: 3px; width: 7px; height: 7px; border-color: var(--lidar-resize-grip); border-style: solid; opacity: 0.7; } .lidar-control-resize-handle:hover::after { border-color: var(--lidar-resize-grip-hover); opacity: 1; } .lidar-control-resize-right { right: 0; cursor: nwse-resize; } .lidar-control-resize-right::after { right: 3px; border-width: 0 2px 2px 0; } .lidar-control-resize-left { left: 0; cursor: nesw-resize; } .lidar-control-resize-left::after { left: 3px; border-width: 0 0 2px 2px; } /* Panel header */ .lidar-control-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; color: var(--lidar-text); padding: 12px 8px 8px 8px; border-bottom: 1px solid var(--lidar-border); margin-bottom: 8px; flex-shrink: 0; } .lidar-control-title { flex: 1 1 auto; font-size: 13px; } .lidar-control-close { width: 20px; height: 20px; border: none; background: transparent; color: var(--lidar-text-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; transition: color 0.2s ease; display: flex; align-items: center; justify-content: center; } .lidar-control-close:hover { color: var(--lidar-text); } /* Content */ .lidar-control-content { /* Grow to fill the panel; scroll vertically only when content overflows. Flex column so the share section can be pushed to the bottom edge. The side/bottom padding keeps the (possibly overlay) scrollbar clear of the inner components. */ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 8px 0 8px; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-width: thin; scrollbar-color: var(--lidar-scrollbar) transparent; } /* Keep content sections at their natural height (no flex squish) so the panel scrolls when content overflows instead of compressing the controls. */ .lidar-control-content > * { flex-shrink: 0; } .lidar-control-content::-webkit-scrollbar { width: 6px; } .lidar-control-content::-webkit-scrollbar-track { background: transparent; } .lidar-control-content::-webkit-scrollbar-thumb { background-color: var(--lidar-scrollbar); border-radius: 3px; } .lidar-control-content::-webkit-scrollbar-thumb:hover { background-color: var(--lidar-scrollbar-hover); } /* Sections */ .lidar-control-section { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--lidar-border); } .lidar-control-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .lidar-control-section-header { font-weight: 600; font-size: 11px; color: var(--lidar-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } /* Form elements */ .lidar-control-group { margin-bottom: 10px; } .lidar-control-group:last-child { margin-bottom: 0; } .lidar-control-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500; color: var(--lidar-text-secondary); } .lidar-control-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .lidar-control-value { font-size: 11px; color: var(--lidar-text-tertiary); font-weight: 500; } .lidar-control-input { width: 100%; padding: 6px 8px; font-size: 12px; border: 1px solid var(--lidar-border-input); border-radius: 4px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; background: var(--lidar-bg); color: var(--lidar-text); } .lidar-control-input:focus { border-color: var(--lidar-accent); box-shadow: 0 0 0 2px var(--lidar-accent-ring); } /* Sample-data dropdown (custom, so the menu themes correctly in dark mode) */ .lidar-sample-dropdown { position: relative; } .lidar-sample-trigger { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; font-size: 12px; font-family: inherit; text-align: left; border: 1px solid var(--lidar-border-input); border-radius: 4px; background: var(--lidar-bg); color: var(--lidar-text-muted); cursor: pointer; outline: none; } .lidar-sample-trigger:hover, .lidar-sample-trigger.open, .lidar-sample-trigger:focus-visible { border-color: var(--lidar-accent); } .lidar-sample-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lidar-sample-caret { flex: 0 0 auto; font-size: 10px; } .lidar-sample-menu { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 10; display: flex; flex-direction: column; gap: 2px; padding: 4px; box-sizing: border-box; background: var(--lidar-bg); border: 1px solid var(--lidar-border); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); max-height: 220px; overflow-y: auto; } .lidar-sample-menu[hidden] { display: none; } .lidar-sample-option { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 12px; font-family: inherit; text-align: left; border: none; border-radius: 3px; background: none; color: var(--lidar-text); cursor: pointer; } .lidar-sample-option:hover, .lidar-sample-option:focus-visible { outline: none; background: var(--lidar-hover); } .lidar-control-select { width: 100%; padding: 6px 8px; font-size: 12px; border: 1px solid var(--lidar-border-input); border-radius: 4px; outline: none; background: var(--lidar-bg); color: var(--lidar-text); cursor: pointer; } .lidar-control-select:focus { border-color: var(--lidar-accent); box-shadow: 0 0 0 2px var(--lidar-accent-ring); } /* Slider */ .lidar-control-slider { width: 100%; height: 4px; border-radius: 2px; background: var(--lidar-hover); outline: none; -webkit-appearance: none; margin-top: 4px; } .lidar-control-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--lidar-accent); cursor: pointer; border: 2px solid var(--lidar-bg); box-shadow: 0 1px 3px var(--lidar-shadow-modal); } .lidar-control-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--lidar-accent); cursor: pointer; border: 2px solid var(--lidar-bg); box-shadow: 0 1px 3px var(--lidar-shadow-modal); } /* Button */ .lidar-control-button { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--lidar-on-accent); background: var(--lidar-accent); border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.15s; } .lidar-control-button:hover { background: var(--lidar-accent-hover); } .lidar-control-button:disabled { background: var(--lidar-border-strong); cursor: not-allowed; } .lidar-control-button.secondary { background: var(--lidar-bg-subtle); color: var(--lidar-text); } .lidar-control-button.secondary:hover { background: var(--lidar-hover); } .lidar-share-section { display: flex; flex-direction: column; gap: 6px; position: sticky; bottom: 0; z-index: 2; background: var(--lidar-bg); padding-top: 10px; padding-bottom: 8px; /* Pin to the bottom of the panel when content does not fill the height. The solid background and full-height footer keep scrolled content from peeking through beneath the sticky button. */ margin-top: auto; } .lidar-share-button { width: 100%; } .lidar-share-status { min-height: 16px; color: var(--lidar-text-secondary); font-size: 11px; text-align: center; } /* File input styling */ .lidar-file-input-wrapper { position: relative; overflow: hidden; display: block; width: 100%; } .lidar-file-input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; top: 0; left: 0; } .lidar-file-input-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: var(--lidar-bg-muted); border: 2px dashed var(--lidar-border-dashed); border-radius: 4px; cursor: pointer; transition: border-color 0.15s, background 0.15s; color: var(--lidar-text-tertiary); font-size: 12px; text-align: center; } .lidar-file-input-label:hover, .lidar-file-input-label.drag-over { border-color: var(--lidar-accent); background: var(--lidar-accent-soft); } .lidar-file-input-label svg { color: var(--lidar-text-faint); } /* Point cloud list */ .lidar-pointclouds-section { min-height: 40px; } .lidar-pointclouds-list { max-height: 150px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .lidar-pointclouds-empty { color: var(--lidar-text-faint); font-size: 11px; font-style: italic; text-align: center; padding: 12px 0; } .lidar-pointcloud-item { display: flex; align-items: center; justify-content: space-between; padding: 8px; background: var(--lidar-bg-muted); border-radius: 4px; margin-bottom: 4px; } .lidar-pointcloud-item:last-child { margin-bottom: 0; } .lidar-pointcloud-info { flex: 1; min-width: 0; margin-right: 8px; } .lidar-pointcloud-name { font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lidar-pointcloud-details { font-size: 10px; color: var(--lidar-text-muted); margin-top: 2px; } .lidar-pointcloud-actions { display: flex; gap: 4px; } .lidar-control-panel .lidar-pointcloud-action { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; font-size: 10px; background: var(--lidar-bg-subtle); border: 1px solid var(--lidar-border-strong); border-radius: 3px; cursor: pointer; color: var(--lidar-text); font-weight: 500; width: 64px; height: auto; line-height: 1.2; white-space: nowrap; box-sizing: border-box; } .lidar-control-panel .lidar-pointcloud-action:hover { background: var(--lidar-hover); border-color: var(--lidar-border-hover); } .lidar-control-panel .lidar-pointcloud-action.remove { background: var(--lidar-danger-bg); color: var(--lidar-danger); border-color: var(--lidar-danger); } .lidar-control-panel .lidar-pointcloud-action.remove:hover { background: var(--lidar-danger); color: var(--lidar-danger-on); } /* Loading state */ .lidar-loading { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; color: var(--lidar-text-tertiary); font-size: 12px; background: var(--lidar-overlay); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; border-radius: 4px; } .lidar-loading.active { display: flex; } .lidar-loading-spinner { width: 32px; height: 32px; border: 3px solid var(--lidar-hover); border-top-color: var(--lidar-accent); border-radius: 50%; animation: lidar-spin 0.8s linear infinite; margin-bottom: 12px; } .lidar-loading-text { font-size: 13px; font-weight: 500; color: var(--lidar-text); margin-bottom: 8px; } .lidar-loading-progress { font-size: 11px; color: var(--lidar-text-tertiary); } .lidar-loading-bar { width: 200px; height: 4px; background: var(--lidar-hover); border-radius: 2px; margin-top: 12px; overflow: hidden; } .lidar-loading-bar-fill { height: 100%; background: var(--lidar-accent); border-radius: 2px; transition: width 0.2s ease; width: 0%; } @keyframes lidar-spin { to { transform: rotate(360deg); } } /* Error state */ .lidar-error { padding: 8px; background: var(--lidar-error-bg); border: 1px solid var(--lidar-error-border); border-radius: 4px; color: var(--lidar-error-text); font-size: 11px; margin-top: 8px; word-wrap: break-word; overflow-wrap: break-word; max-height: 120px; overflow-y: auto; } /* Flex utilities */ .lidar-control-flex { display: flex; gap: 8px; align-items: center; } .lidar-control-flex-col { display: flex; flex-direction: column; gap: 8px; } /* Scrollbar styling for pointclouds list */ .lidar-pointclouds-list { scrollbar-width: thin; scrollbar-color: var(--lidar-scrollbar) transparent; } .lidar-pointclouds-list::-webkit-scrollbar { width: 6px; } .lidar-pointclouds-list::-webkit-scrollbar-track { background: transparent; } .lidar-pointclouds-list::-webkit-scrollbar-thumb { background-color: var(--lidar-scrollbar); border-radius: 3px; } /* Classification Legend */ .lidar-classification-legend { margin-top: 8px; border: 1px solid var(--lidar-border); border-radius: 4px; overflow: hidden; } .lidar-classification-legend-header { display: flex; gap: 8px; padding: 6px 8px; background: var(--lidar-bg-muted); border-bottom: 1px solid var(--lidar-border); } .lidar-legend-action-btn { flex: 1; padding: 4px 8px; font-size: 10px; font-weight: 500; background-color: var(--lidar-accent); border: 1px solid var(--lidar-accent-border); border-radius: 3px; cursor: pointer; color: var(--lidar-on-accent); transition: background-color 0.15s, border-color 0.15s; } .lidar-control-panel .lidar-legend-action-btn { background-color: var(--lidar-accent); border: 1px solid var(--lidar-accent-border); color: var(--lidar-on-accent); } .lidar-legend-action-btn:hover, .lidar-legend-action-btn:focus-visible { background-color: var(--lidar-accent-dark); border-color: var(--lidar-accent-darker); color: var(--lidar-on-accent); } .lidar-control-panel .lidar-classification-legend-header button.lidar-legend-action-btn:hover, .lidar-control-panel .lidar-classification-legend-header button.lidar-legend-action-btn:focus-visible { background-color: var(--lidar-accent-dark); border-color: var(--lidar-accent-darker); color: var(--lidar-on-accent); } .lidar-classification-legend-list { max-height: 180px; overflow-y: auto; padding: 4px 0; scrollbar-width: thin; scrollbar-color: var(--lidar-scrollbar) transparent; } .lidar-classification-legend-list::-webkit-scrollbar { width: 6px; } .lidar-classification-legend-list::-webkit-scrollbar-track { background: transparent; } .lidar-classification-legend-list::-webkit-scrollbar-thumb { background-color: var(--lidar-scrollbar); border-radius: 3px; } .lidar-classification-legend-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; } .lidar-classification-legend-item:hover { background: var(--lidar-bg-muted); } .lidar-classification-legend-item input[type="checkbox"] { margin: 0; cursor: pointer; flex-shrink: 0; } .lidar-classification-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--lidar-border-subtle); flex-shrink: 0; } .lidar-classification-label { font-size: 11px; color: var(--lidar-text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lidar-classification-empty { padding: 12px 8px; text-align: center; color: var(--lidar-text-muted); font-size: 11px; font-style: italic; } /* Colormap Selector */ .lidar-colormap-group { margin-bottom: 10px; } .lidar-colormap-row { display: flex; align-items: center; gap: 8px; } .lidar-colormap-select { flex: 1; padding: 6px 8px; font-size: 12px; border: 1px solid var(--lidar-border-input); border-radius: 4px; outline: none; background: var(--lidar-bg); color: var(--lidar-text); cursor: pointer; } .lidar-colormap-select:focus { border-color: var(--lidar-accent); box-shadow: 0 0 0 2px var(--lidar-accent-ring); } .lidar-colormap-preview { width: 50px; height: 14px; border-radius: 2px; border: 1px solid var(--lidar-border-subtle); flex-shrink: 0; } /* Colorbar Legend */ .lidar-colorbar { margin: 8px 0; } .lidar-colorbar-label { font-size: 11px; font-weight: 500; color: var(--lidar-text-secondary); margin-bottom: 4px; } .lidar-colorbar-gradient { width: 100%; height: 14px; border-radius: 2px; border: 1px solid var(--lidar-border-subtle); display: block; } .lidar-colorbar-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--lidar-text-tertiary); margin-top: 2px; } .lidar-colorbar-min, .lidar-colorbar-max { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace; } /* Color Range Control */ .lidar-color-range { margin: 8px 0; } .lidar-color-range-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .lidar-range-reset-btn { padding: 2px 8px; font-size: 10px; background: var(--lidar-bg-subtle); border: 1px solid var(--lidar-border-strong); border-radius: 3px; cursor: pointer; color: var(--lidar-text-secondary); } .lidar-range-reset-btn:hover { background: var(--lidar-hover); border-color: var(--lidar-text-faint); } .lidar-range-reset-btn:active { background: var(--lidar-active); } .lidar-range-mode { display: flex; gap: 16px; margin-bottom: 8px; } .lidar-range-mode label { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 11px; color: var(--lidar-text-secondary); } .lidar-range-mode input[type="radio"] { margin: 0; cursor: pointer; } /* Info button for point cloud items */ .lidar-control-panel .lidar-pointcloud-action.info { background: var(--lidar-info-bg); color: var(--lidar-info-text); border-color: var(--lidar-info-border); } .lidar-control-panel .lidar-pointcloud-action.info:hover { background: var(--lidar-info-text); color: var(--lidar-on-accent); } /* ==================== Metadata Panel ==================== */ .lidar-metadata-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--lidar-backdrop); z-index: 10000; } .lidar-metadata-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--lidar-bg); border-radius: 8px; box-shadow: 0 10px 40px var(--lidar-shadow-modal); width: 500px; max-width: 90vw; max-height: 80vh; overflow: hidden; z-index: 10001; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; color: var(--lidar-text); } .lidar-metadata-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--lidar-border); background: var(--lidar-bg-muted); } .lidar-metadata-title { font-size: 16px; font-weight: 600; color: var(--lidar-text); } .lidar-metadata-close { background: none; border: none; font-size: 24px; color: var(--lidar-text-faint); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .lidar-metadata-close:hover { background: var(--lidar-hover); color: var(--lidar-text); } .lidar-metadata-content { padding: 16px 20px; max-height: calc(80vh - 65px); overflow-y: auto; } .lidar-metadata-section { margin-bottom: 12px; border: 1px solid var(--lidar-border); border-radius: 4px; overflow: hidden; } .lidar-metadata-section:last-child { margin-bottom: 0; } .lidar-metadata-section-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--lidar-bg-muted); cursor: pointer; user-select: none; font-weight: 600; font-size: 12px; color: var(--lidar-text-secondary); } .lidar-metadata-section-header:hover { background: var(--lidar-bg-subtle); } .lidar-metadata-section-toggle { font-size: 10px; color: var(--lidar-text-muted); } .lidar-metadata-section-title { flex: 1; } .lidar-metadata-section-body { padding: 12px; border-top: 1px solid var(--lidar-border); } .lidar-metadata-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; } .lidar-metadata-label { color: var(--lidar-text-tertiary); font-weight: 500; } .lidar-metadata-value { color: var(--lidar-text); text-align: right; max-width: 60%; word-break: break-all; } .lidar-metadata-subheader { font-size: 11px; font-weight: 600; color: var(--lidar-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 12px 0 6px 0; padding-top: 8px; border-top: 1px dashed var(--lidar-border); } .lidar-metadata-subheader:first-child { margin-top: 0; padding-top: 0; border-top: none; } .lidar-metadata-wkt { margin-top: 8px; } .lidar-metadata-copy-btn { display: block; margin-bottom: 8px; padding: 6px 12px; font-size: 11px; font-weight: 500; background: var(--lidar-accent); color: var(--lidar-on-accent); border: none; border-radius: 4px; cursor: pointer; } .lidar-metadata-copy-btn:hover { background: var(--lidar-accent-hover); } .lidar-metadata-code { background: var(--lidar-bg-code); border: 1px solid var(--lidar-border); border-radius: 4px; padding: 10px; font-family: 'Monaco', 'Consolas', monospace; font-size: 10px; max-height: 200px; overflow: auto; white-space: pre; margin: 0; color: var(--lidar-text); } .lidar-metadata-table { width: 100%; border-collapse: collapse; font-size: 11px; } .lidar-metadata-table th, .lidar-metadata-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--lidar-border); } .lidar-metadata-table th { background: var(--lidar-bg-muted); font-weight: 600; color: var(--lidar-text-secondary); } .lidar-metadata-table tr:last-child td { border-bottom: none; } /* ==================== Cross-Section Panel ==================== */ .lidar-crosssection-section { margin-top: 8px; } .lidar-section-collapsible { display: flex; align-items: center; gap: 6px; } .lidar-section-toggle { font-size: 10px; color: var(--lidar-text-muted); width: 12px; } .lidar-section-body { padding: 8px 0; } .lidar-crosssection-panel { padding: 8px 0; } .lidar-crosssection-header { font-size: 12px; font-weight: 600; color: var(--lidar-text-secondary); margin-bottom: 8px; display: none; /* Hide since section header already shows title */ } .lidar-crosssection-controls { display: flex; gap: 8px; margin-bottom: 10px; } .lidar-crosssection-draw, .lidar-crosssection-clear { flex: 1; padding: 6px 12px; font-size: 11px; } .lidar-crosssection-draw.active { background: var(--lidar-info-bg); color: var(--lidar-info-text); border: 1px solid var(--lidar-info-border); } .lidar-crosssection-chart { border: 1px solid var(--lidar-border); border-radius: 4px; margin: 10px 0; overflow: hidden; } .lidar-profile-chart-container { position: relative; background: var(--lidar-bg); } .lidar-profile-chart { display: block; } .lidar-profile-tooltip { position: absolute; background: var(--lidar-tooltip-bg); color: var(--lidar-tooltip-text); padding: 6px 10px; border-radius: 4px; font-size: 11px; pointer-events: none; z-index: 100; white-space: nowrap; line-height: 1.5; } .lidar-crosssection-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 8px; background: var(--lidar-bg-muted); border-radius: 4px; font-size: 11px; } .lidar-crosssection-stat { display: flex; justify-content: space-between; } .lidar-crosssection-stat-label { color: var(--lidar-text-tertiary); } .lidar-crosssection-stat-value { font-weight: 500; color: var(--lidar-text); } /* ==================== Chart Popup ==================== */ .lidar-chart-popup-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--lidar-backdrop); z-index: 10000; display: flex; align-items: center; justify-content: center; } .lidar-chart-popup { position: relative; background: var(--lidar-bg); border-radius: 8px; box-shadow: 0 10px 40px var(--lidar-shadow-modal); width: 750px; height: 520px; max-width: 95vw; max-height: 95vh; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--lidar-text); } .lidar-chart-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--lidar-border); background: var(--lidar-bg-muted); border-radius: 8px 8px 0 0; flex-shrink: 0; } .lidar-chart-popup-title { font-size: 14px; font-weight: 600; color: var(--lidar-text); } .lidar-chart-popup-close { background: none; border: none; font-size: 24px; color: var(--lidar-text-faint); cursor: pointer; padding: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; line-height: 1; } .lidar-chart-popup-close:hover { background: var(--lidar-hover); color: var(--lidar-text); } .lidar-chart-popup-content { flex: 1; padding: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .lidar-chart-popup-stats { display: flex; gap: 24px; padding: 12px 16px; background: var(--lidar-bg-muted); border-top: 1px solid var(--lidar-border); font-size: 13px; color: var(--lidar-text-secondary); flex-shrink: 0; flex-wrap: wrap; } .lidar-chart-popup-stats span { white-space: nowrap; } .lidar-chart-popup-resize { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--lidar-resize-grip) 50%, var(--lidar-resize-grip) 60%, transparent 60%, transparent 70%, var(--lidar-resize-grip) 70%, var(--lidar-resize-grip) 80%, transparent 80%); border-radius: 0 0 8px 0; } .lidar-chart-popup-resize:hover { background: linear-gradient(135deg, transparent 50%, var(--lidar-resize-grip-hover) 50%, var(--lidar-resize-grip-hover) 60%, transparent 60%, transparent 70%, var(--lidar-resize-grip-hover) 70%, var(--lidar-resize-grip-hover) 80%, transparent 80%); } /*$vite$:1*/