Spaces:
Sleeping
Sleeping
| /* ============================================================ | |
| Modernist Change Detection theme (from the Claude Design | |
| redesign). Scoped entirely to #tab-detect so the rest of the | |
| app keeps its existing look until/unless it gets redesigned | |
| too: flat surfaces, hairline dividers, sharp corners, one | |
| accent color, Archivo for headings. Tokens (--dm-*) are | |
| shared, declared once at :root in dda.css — reused here, not | |
| redeclared. Pure visual/layout reskin: no ids/classes that | |
| compare.js/tree.js/pairs.js/result.js/map.js select on are | |
| renamed, and no RBAC (`data-requires-permission`) attributes | |
| are touched. | |
| ============================================================ */ | |
| /* --- Page header (mirrors the mockup's title + subtitle) --------------- */ | |
| #tab-detect .dda-detect-hero { margin-bottom: 1.25rem; } | |
| #tab-detect .dda-detect-hero h1 { margin: 0 0 0.2rem; font-weight: 800; letter-spacing: -0.01em; } | |
| #tab-detect .dda-detect-hero .sub { margin: 0; color: var(--dm-ink-muted); } | |
| /* --- Typography -------------------------------------------------------- */ | |
| #tab-detect h1, | |
| #tab-detect .card-title, | |
| #tab-detect .card-header h3, | |
| #tab-detect .dda-run-bar-title { | |
| font-family: var(--dm-font); | |
| } | |
| #tab-detect .card-header h3 { font-weight: 800; letter-spacing: -0.005em; } | |
| /* --- Flat, hairline-bordered surfaces instead of soft shadow cards ----- */ | |
| #tab-detect .card, | |
| #tab-detect .dda-modal-panel, | |
| #tab-detect .dda-slot, | |
| #tab-detect .dda-roi-controls, | |
| #tab-detect .dda-upload-progress .dda-progress-bar { | |
| background: var(--dm-surface); | |
| border: 1px solid var(--dm-line); | |
| border-radius: 0; | |
| box-shadow: none; | |
| } | |
| #tab-detect .dda-slot { border-style: dashed; } | |
| #tab-detect .dda-slot.filled { border-style: solid; border-color: var(--dm-accent); } | |
| #tab-detect .dda-slot.drag-over { border-color: var(--dm-accent); background: var(--dm-accent-100); } | |
| /* --- Buttons — flat accent instead of the app-wide purple gradient ----- */ | |
| #tab-detect .btn { border-radius: 0; font-family: var(--dm-font); font-weight: 700; } | |
| #tab-detect .btn-primary { background: var(--dm-accent); border-color: var(--dm-accent); } | |
| #tab-detect .btn-primary:hover:not(:disabled) { background: var(--dm-accent-hover); filter: none; box-shadow: none; } | |
| #tab-detect .btn-secondary { background: transparent; border-color: var(--dm-line); color: var(--dm-ink); } | |
| #tab-detect .btn-secondary:hover:not(:disabled) { background: var(--dm-bg); border-color: var(--dm-line); } | |
| #tab-detect .btn-ghost { color: var(--dm-accent); } | |
| #tab-detect .btn-ghost:hover:not(:disabled) { background: var(--dm-accent-100); color: var(--dm-accent-hover); } | |
| /* --- Layout breathing room (mirrors the mockup's 20px card gaps) ------- */ | |
| #tab-detect.dda-panel { display: flex; flex-direction: column; gap: 0; } | |
| #tab-detect .dda-layout { gap: 1.25rem; } | |
| #tab-detect .dda-main { display: flex; flex-direction: column; gap: 1.25rem; } | |
| #tab-detect .card { padding: 1.25rem; } | |
| #tab-detect .dda-sidebar.card { padding: 1rem; } | |
| /* --- Folder tree sidebar ------------------------------------------------ */ | |
| #tab-detect .dda-folder-path { color: var(--dm-ink-muted); } | |
| #tab-detect .dda-search { | |
| border: 1px solid var(--dm-line); | |
| border-radius: 0; | |
| background: var(--dm-bg); | |
| color: var(--dm-ink); | |
| } | |
| #tab-detect .dda-search:focus { outline: none; border-color: var(--dm-accent); } | |
| #tab-detect .dda-tree-all, | |
| #tab-detect .dda-tree-node-btn, | |
| #tab-detect .dda-tree-year, | |
| #tab-detect .dda-tree-village { | |
| border-radius: 0; | |
| color: var(--dm-ink-muted); | |
| } | |
| #tab-detect .dda-tree-all:hover, #tab-detect .dda-tree-all.active, | |
| #tab-detect .dda-tree-node-btn:hover, #tab-detect .dda-tree-node-btn.active, | |
| #tab-detect .dda-tree-year:hover, #tab-detect .dda-tree-year.active, | |
| #tab-detect .dda-tree-village:hover, #tab-detect .dda-tree-village.active { | |
| background: var(--dm-accent-100); | |
| color: var(--dm-accent-hover); | |
| } | |
| #tab-detect .dda-tree-zone > button { border-radius: 0; color: var(--dm-ink); } | |
| #tab-detect .dda-tree-zone > button:hover { background: var(--dm-accent-100); } | |
| #tab-detect .dda-tree-children { border-left-color: var(--dm-line); } | |
| /* --- Detection options form -------------------------------------------- */ | |
| #tab-detect .dda-detect-options select, | |
| #tab-detect .dda-auto-compare select, | |
| #tab-detect .dda-image-select { | |
| border: 1px solid var(--dm-line); | |
| border-radius: 0; | |
| background: var(--dm-surface); | |
| color: var(--dm-ink); | |
| } | |
| #tab-detect .dda-detect-options select:focus, | |
| #tab-detect .dda-auto-compare select:focus, | |
| #tab-detect .dda-image-select:focus { outline: none; border-color: var(--dm-accent); box-shadow: none; } | |
| #tab-detect .dda-sensitivity-field em { color: var(--dm-accent); font-weight: 700; } | |
| #tab-detect .dda-sensitivity-field input[type="range"] { accent-color: var(--dm-accent); } | |
| #tab-detect .dda-stepper-wrap { | |
| border: 1px solid var(--dm-line); | |
| border-radius: 0; | |
| background: var(--dm-surface); | |
| } | |
| #tab-detect .dda-stepper-wrap:focus-within { border-color: var(--dm-accent); box-shadow: none; } | |
| #tab-detect .dda-stepper-btn:first-child { border-right-color: var(--dm-line); } | |
| #tab-detect .dda-stepper-btn:last-child { border-left-color: var(--dm-line); } | |
| #tab-detect .dda-stepper-btn:hover:not(:disabled) { background: var(--dm-accent-100); color: var(--dm-accent-hover); } | |
| #tab-detect .dda-input-suffix { color: var(--dm-ink-dim); } | |
| #tab-detect .dda-input-suffix-wrap input[type="number"]:focus + .dda-input-suffix { color: var(--dm-accent); } | |
| #tab-detect .dda-check { color: var(--dm-ink-muted); } | |
| #tab-detect .dda-check input[type="checkbox"] { accent-color: var(--dm-accent); } | |
| #tab-detect .dda-notify-email { | |
| border: 1px solid var(--dm-line); | |
| border-radius: 0; | |
| background: var(--dm-surface); | |
| color: var(--dm-ink); | |
| } | |
| #tab-detect .dda-field-hint { color: var(--dm-accent); } | |
| /* Region-shape segmented toggle — flat, dark-ink active state (matches | |
| the mockup's "seg"/"seg-opt" control) instead of the app-wide blue. */ | |
| #tab-detect .dda-shape-toggle, | |
| #tab-detect .dda-mode-toggle { | |
| border: 1px solid var(--dm-line); | |
| border-radius: 0; | |
| overflow: hidden; | |
| } | |
| #tab-detect .dda-shape-btn, | |
| #tab-detect .dda-mode-btn { | |
| border-radius: 0; | |
| color: var(--dm-ink); | |
| font-family: var(--dm-font); | |
| font-weight: 600; | |
| } | |
| #tab-detect .dda-shape-btn + .dda-shape-btn, | |
| #tab-detect .dda-mode-btn + .dda-mode-btn { border-left-color: var(--dm-line); } | |
| #tab-detect .dda-shape-btn:hover, | |
| #tab-detect .dda-mode-btn:hover { background: var(--dm-bg); } | |
| #tab-detect .dda-shape-btn.is-active, | |
| #tab-detect .dda-mode-btn.is-active { background: var(--dm-ink); color: #fff; } | |
| #tab-detect .dda-roi-controls { padding: 0.6rem 0.85rem; color: var(--dm-ink-muted); } | |
| #tab-detect .dda-progress-fill { background: var(--dm-accent); } | |
| /* --- Automatic-mode area picker + schedule ------------------------------ */ | |
| #tab-detect .dda-auto-field input { | |
| border: 1px solid var(--dm-line); | |
| border-radius: 0; | |
| background: var(--dm-surface); | |
| color: var(--dm-ink); | |
| } | |
| #tab-detect .dda-auto-field input:focus { outline: none; border-color: var(--dm-accent); } | |
| #tab-detect .dda-auto-schedule { color: var(--dm-ink-muted); } | |
| /* --- Before/After compare slots ----------------------------------------- */ | |
| #tab-detect .dda-slot-label { | |
| font-size: 0.72rem; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--dm-ink-muted); | |
| } | |
| #tab-detect .dda-slot-preview { border-radius: 0; background: var(--dm-bg); } | |
| #tab-detect .dda-slot-meta { color: var(--dm-ink-muted); } | |
| /* --- Same-area pairs + library grid -------------------------------------- */ | |
| #tab-detect .dda-compare-card, | |
| #tab-detect .dda-picker-item { | |
| border-radius: 0; | |
| border-color: var(--dm-line); | |
| } | |
| #tab-detect .dda-compare-card.selected-t1 { border-color: var(--dm-accent); box-shadow: inset 0 0 0 1px var(--dm-accent); } | |
| #tab-detect .dda-compare-card.selected-t2 { border-color: var(--dm-ink); box-shadow: inset 0 0 0 1px var(--dm-ink); } | |
| #tab-detect .dda-compare-assign { border-top-color: var(--dm-line); } | |
| #tab-detect .dda-compare-assign .btn { border-radius: 0; } | |
| #tab-detect .pagination .btn, | |
| #tab-detect .pagination button { border-radius: 0; } | |
| /* --- Run bar — dark flat bar with the accent primary button ------------- */ | |
| #tab-detect .dda-run-bar { | |
| border-radius: 0; | |
| background: var(--dm-ink); | |
| color: #fff; | |
| border: none; | |
| } | |
| #tab-detect .dda-run-bar .dim, | |
| #tab-detect .dda-run-bar #dda-run-bar-hint { color: rgba(255, 255, 255, 0.65); } | |
| /* --- Modals (preflight / image picker) ---------------------------------- */ | |
| #tab-detect .dda-modal-panel { border-radius: 0; } | |
| #tab-detect .dda-picker-grid .dda-picker-item:hover { border-color: var(--dm-accent); } | |
| #tab-detect .dda-preflight-list li.fail { border-left: 3px solid var(--dm-accent); } | |