/* Components — handoff §7, §8, §10–§14, §16, §17 */ /* ---- brand ---- */ .brand { display: flex; align-items: center; min-width: 0; } .brand-logo { height: 40px; background: #fff; border-radius: var(--radius-sm); padding: 3px 8px; display: block; } /* ---- top navigation ---- */ .topbar-nav { display: flex; justify-content: center; gap: var(--space-2); } .nav-item { height: 38px; display: inline-flex; align-items: center; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: transparent; color: rgba(255, 255, 255, 0.82); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .nav-item.active { background: rgba(24, 31, 19, 0.38); color: #fff; } .nav-item:focus-visible { outline: 3px solid rgba(126, 140, 84, 0.55); outline-offset: 2px; } .topbar-actions { display: flex; align-items: center; gap: var(--space-4); font-size: 13px; font-weight: 400; white-space: nowrap; } .topbar-actions #live-info { opacity: 0.92; font-size: 12.5px; } .panel-size-label { opacity: 0.72; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: -8px; } #panel-size label { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; cursor: pointer; font-size: 12.5px; } #panel-size input { accent-color: #fff; cursor: pointer; } .menu-btn { display: none; background: rgba(255,255,255,.1); color: #fff; border: 0; } /* ---- sidebar internals ---- */ #sidebar label { display: block; margin: var(--space-5) 0 var(--space-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-ink-muted); } #sidebar label:first-child { margin-top: 0; } /* Dash 4 dropdowns: the closed control renders in place, but the options popup is PORTALED to (Radix), so #sidebar-scoped rules never reach it. Style both globally with explicit colors — the controls are always on white surfaces, so dark ink is correct everywhere. !important beats the component's injected stylesheet and any inherited white from dark panels. */ .dash-dropdown, .dash-dropdown *, #sidebar .Select, #sidebar .Select * { color: var(--ink-900) !important; } .dash-dropdown { background: var(--surface-panel); border-radius: var(--radius-sm); } .dash-dropdown-content, .dash-dropdown-content * { color: var(--ink-900) !important; } .dash-dropdown-content { background: var(--surface-panel); } .dash-dropdown-placeholder, .dash-dropdown-placeholder * { color: var(--ink-500) !important; } :root { --Dash-Fill-Interactive-Strong: var(--brand-600); } /* custom date range picker (react-dates) */ #custom-range-wrap { margin-top: var(--space-2); } #custom-range-wrap .DateRangePickerInput { background: #fff; border: 0; border-radius: var(--radius-sm); display: flex; align-items: center; width: 100%; } #custom-range-wrap .DateInput { width: 74px; background: transparent; } #custom-range-wrap .DateInput_input { font-size: 12.5px; color: var(--ink-900); padding: 7px 6px; border-bottom: 2px solid transparent; } #custom-range-wrap .DateInput_input__focused { border-bottom-color: var(--brand-500); } #custom-range-wrap .DateRangePickerInput_arrow svg { fill: var(--ink-500); } #custom-range-wrap .CalendarDay__selected, #custom-range-wrap .CalendarDay__selected:hover { background: var(--brand-600); border-color: var(--brand-600); } #custom-range-wrap .CalendarDay__selected_span { background: var(--brand-200); border-color: var(--brand-200); color: var(--ink-900); } #sensor-pick label, #follow-live label { display: flex; gap: var(--space-2); margin: 5px 0; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; color: var(--sidebar-ink); cursor: pointer; } #sensor-pick input, #follow-live input, .pt-check input { accent-color: var(--brand-400); } .side-hint { font-size: 11.5px; color: var(--sidebar-ink-muted); margin: var(--space-1) 0; } .point-row { display: flex; align-items: center; gap: 6px; margin: 5px 0; } .point-row .pt-check label { margin: 0; } .point-row .dot, #points-table .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; } .pt-name { flex: 1; min-width: 0; background: var(--sidebar-field); border: 1px solid var(--sidebar-border); color: var(--sidebar-ink); border-radius: var(--radius-sm); padding: 3px 6px; font-size: 13px; transition: border-color 120ms ease, box-shadow 120ms ease; } .pt-name:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(126, 140, 84, 0.22); } .del-btn { border: none; background: none; color: var(--danger); cursor: pointer; font-size: 13px; } /* ---- cards ---- */ .card { background: var(--surface-panel); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-3); } /* ---- frame viewer (right details panel) ---- */ #frame-img { width: 100%; border-radius: var(--radius-sm); display: block; margin-top: var(--space-2); min-height: 100px; background: var(--surface-muted); } #frame-caption { font-size: 12px; color: var(--ink-500); margin-top: var(--space-2); } .hint { font-size: 12px; color: var(--ink-500); margin-bottom: 6px; line-height: 1.4; } #microscope { margin-top: var(--space-2); } #microscope label { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-700); margin: 0; cursor: pointer; } #microscope input { accent-color: var(--brand-500); } #points-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: var(--space-2); } #points-table th { text-align: left; color: var(--ink-500); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 6px; border-bottom: 1px solid var(--border-default); } #points-table td { padding: 4px 6px; border-bottom: 1px solid var(--surface-muted); } /* ---- microscope tooltip ---- */ #scope-tip { position: fixed; z-index: 1000; display: none; pointer-events: none; background: var(--ink-900); color: #fff; font-size: 12.5px; font-family: var(--font-mono); padding: 4px 8px; border-radius: var(--radius-sm); box-shadow: var(--shadow-float); white-space: nowrap; } /* ---- shared buttons ---- */ .btn-primary, #sv-saveas, #tr-save, #al-save { border: 1px solid var(--brand-600); background: var(--brand-600); color: #fff; font-weight: 600; font-size: 13.5px; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 120ms ease; } .btn-primary:hover, #sv-saveas:hover, #tr-save:hover, #al-save:hover { background: var(--brand-700); } .btn-quiet, .sv-btnrow button, .al-btnrow button, #al-pad button { border: 1px solid var(--border-strong); background: var(--surface-panel); color: var(--ink-700); border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; transition: background-color 120ms ease, border-color 120ms ease; } .btn-quiet:hover, .sv-btnrow button:hover, .al-btnrow button:hover, #al-pad button:hover { background: var(--brand-100); border-color: var(--brand-200); color: var(--brand-700); } button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(126, 140, 84, 0.35); outline-offset: 2px; } button:disabled { opacity: 0.45; cursor: not-allowed; } /* ---- auth & user management ---- */ .nav-hidden { display: none !important; } #user-info { font-size: 12.5px; opacity: 0.85; } #logout-btn { height: 32px; padding: 0 12px; font-size: 12px; } #login-wrap, #denied-wrap { display: flex; justify-content: center; padding: 12vh var(--space-4); } #login-card { width: 320px; padding: var(--space-6); } #login-logo { width: 170px; display: block; margin: 0 auto var(--space-5); } #login-card label, #um-wrap label { display: block; margin: var(--space-4) 0 var(--space-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); } #login-card label:first-of-type { margin-top: 0; } #login-card input, #um-card input, #pw-card input { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13.5px; margin-bottom: var(--space-2); background: var(--surface-panel); } #login-btn { width: 100%; padding: 10px 0; margin-top: var(--space-2); } #login-status { min-height: 1.5em; color: var(--danger); margin-top: var(--space-2); } #denied-card { width: 280px; padding: var(--space-6); text-align: center; } #denied-icon { font-size: 34px; margin-bottom: var(--space-2); } #um-wrap { display: flex; gap: var(--space-4); justify-content: center; align-items: flex-start; padding: var(--space-6) var(--space-4); } #um-card { width: 420px; padding: var(--space-4); } #pw-card { width: 300px; padding: var(--space-4); } #um-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: var(--space-2); } #um-table th { text-align: left; color: var(--ink-500); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 6px; border-bottom: 1px solid var(--border-default); } #um-table td { padding: 5px 6px; border-bottom: 1px solid var(--surface-muted); } #um-create, #pw-save { margin-top: var(--space-2); padding: 8px 20px; } #um-status, #pw-status { min-height: 1.5em; margin-top: var(--space-2); } #magic-btn { width: 100%; padding: 9px 0; margin-top: var(--space-2); } #tf-block { margin-top: var(--space-1); } #tf-block input { width: 100%; margin: var(--space-2) 0; } #tf-block button { padding: 8px 16px; } #tf-qr { width: 170px; display: block; margin: var(--space-2) auto; border: 1px solid var(--border-default); border-radius: var(--radius-sm); } #act-card { width: 460px; padding: var(--space-4); } #act-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-family: var(--font-mono); } #act-table th { text-align: left; color: var(--ink-500); font-weight: 600; font-size: 10.5px; text-transform: uppercase; padding: 3px 5px; border-bottom: 1px solid var(--border-default); } #act-table td { padding: 3px 5px; border-bottom: 1px solid var(--surface-muted); word-break: break-all; } /* ---- sensors (views) page ---- */ #sv-side { width: 280px; flex: none; font-size: 13.5px; padding: var(--space-4); } #sv-main { flex: 1; max-width: 560px; font-size: 13.5px; padding: var(--space-4); } #sv-wrap label, #tr-card label { display: block; margin: var(--space-4) 0 var(--space-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); } #sv-wrap label:first-child, #tr-card label:first-child { margin-top: 0; } #sv-name { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 9px; font-size: 13.5px; background: var(--surface-panel); } #sv-name:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(126,140,84,.22); } .sv-btnrow { display: flex; gap: var(--space-2); margin-top: var(--space-3); } .sv-btnrow button { flex: 1; padding: 8px 0; } #sv-sensors label { display: flex; gap: var(--space-2); margin: 5px 0; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; color: var(--ink-900); cursor: pointer; } #sv-sensors input { accent-color: var(--brand-500); } #sv-status { min-height: 1.5em; color: var(--success); } /* ---- trigger page ---- */ #tr-card { width: 440px; font-size: 13.5px; padding: var(--space-4); } #tr-auto { width: 130px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 9px; font-size: 13.5px; } #tr-save { display: block; margin-top: var(--space-4); padding: 9px 26px; } #tr-live { margin-top: var(--space-3); font-size: 13px; background: var(--brand-100); color: var(--brand-700); border-radius: var(--radius-sm); padding: 8px 10px; } /* ---- alignment page ---- */ #al-stage-card { padding: var(--space-3); } #al-stage { position: relative; overflow: hidden; line-height: 0; border-radius: var(--radius-sm); background: var(--surface-muted); } #al-stage img { image-rendering: pixelated; display: block; } #al-thermal { position: absolute; left: 0; top: 0; } #al-ctrl { width: 260px; flex: none; font-size: 13.5px; padding: var(--space-4); } #al-ctrl label { display: block; margin: var(--space-4) 0 var(--space-1); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); } #al-ctrl label:first-of-type { margin-top: 0; } #al-ctrl input[type=range] { width: 100%; accent-color: var(--brand-500); } #al-ctrl select { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 8px; background: var(--surface-panel); } #al-pad { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; justify-content: center; margin: var(--space-2) 0; } #al-pad button { height: 40px; font-size: 17px; } #al-readout { font-size: 13px; background: var(--surface-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: var(--space-2); line-height: 1.6; } #al-readout b { font-family: var(--font-mono); font-weight: 600; } .al-btnrow { display: flex; gap: var(--space-2); margin-top: var(--space-3); } .al-btnrow button { flex: 1; padding: 9px 0; } #al-status { margin-top: var(--space-3); font-size: 12.5px; color: var(--ink-700); min-height: 2.5em; } #al-auto5 { margin-top: var(--space-2); } #al-auto5 label { display: flex !important; gap: 6px; align-items: center; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 400 !important; margin: 0 !important; color: var(--ink-700) !important; cursor: pointer; }