/* Generic flyout-panel base - shared by #daynight-panel / #render-settings-panel. Same recipe as #bathymetry-panel (src/ui/bathymetry-panel.css), factored out so new panels only need to add their own placement/z-index line below. Content classes (.bathy-head/.bathy-section/.bathy-grid/.bathy-toggle/etc.) are reused directly from bathymetry-panel.css, already linked in - they're plain unscoped classes, not #bathymetry-panel-prefixed. */ .flyout-panel { position: absolute; z-index: 50; width: 310px; max-height: calc(100vh - 58px); overflow: auto; padding: 14px; border: 1px solid rgba(0, 180, 255, .28); border-radius: 4px; color: rgba(190, 225, 245, .9); background: rgba(2, 8, 20, .94); box-shadow: 0 18px 55px rgba(0, 0, 0, .44); backdrop-filter: blur(18px); font: 10px/1.4 "Courier New", monospace; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; scrollbar-width: thin; scrollbar-color: rgba(0, 180, 255, .3) transparent; } .flyout-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .flyout-panel::-webkit-scrollbar { width: 4px; } .flyout-panel::-webkit-scrollbar-thumb { background: rgba(0, 180, 255, .3); } /* #daynight-panel positioning rule removed (Task 17) — daynight-panel.js is deleted, superseded by the header weather flyout (Task 13). */ #render-settings-panel { top: 60px; /* below the new 56px-tall #dc-header (design-tokens.css --dc-header-h), was 44px under the old 36px #status-bar */ right: 12px; } /* ── Settings panel category tabs ────────────────────────────────────────── Splits the panel's sections (quality/reflections/post-processing vs. sun+sky/atmosphere vs. audio) into separately-selectable groups instead of one long scrolling list - the flat section stack read as one undifferen- tiated pile once Audio joined it. */ .rs-tabs { display: flex; gap: 4px; margin: 12px 0 4px; border-bottom: 1px solid rgba(0, 180, 255, .18); } .rs-tab-btn { flex: 1; padding: 7px 4px; background: transparent; border: none; border-bottom: 2px solid transparent; color: rgba(150, 200, 235, .6); font: 700 9px/1 "Courier New", monospace; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .rs-tab-btn:hover { color: rgba(200, 230, 255, .85); } .rs-tab-btn.active { color: #00d4ff; border-bottom-color: #00d4ff; } .rs-tab-panel[hidden] { display: none; } /* ── Weather tab's data-source badge ────────────────────────────────────── */ .ws-source-badge { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: middle; background: rgba(150, 170, 190, .15); color: rgba(150, 200, 235, .6); border: 1px solid rgba(150, 170, 190, .3); } .ws-source-badge[data-source="live"] { background: rgba(34, 204, 102, .15); color: #44dd88; border-color: rgba(34, 204, 102, .4); } .ws-source-badge[data-source="cached"] { background: rgba(255, 170, 34, .15); color: #ffaa44; border-color: rgba(255, 170, 34, .4); } /* #daynight-clock / .dn-clock-* / .dn-badge / .dn-wx-* / .dn-fc-* rules removed (Task 17) — daynight-panel.js and its #status-bar trigger are deleted, superseded by the header weather flyout (Task 13, header-weather-flyout.js), which is styled inline rather than through this stylesheet. Confirmed via repo-wide grep that no live code references any of these selectors any more before removing them. */ /* ── Settings gear trigger - matches #bathymetry-menu-btn. Both buttons now live in the new header (Task 17), reusing these ID-scoped rules as-is. ── */ #settings-gear-btn { height: 26px; padding: 0 11px; border: 1px solid var(--dc-control-border); border-radius: 3px; color: var(--dc-body); background: var(--dc-panel-secondary); font-family: var(--dc-font-mono); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #settings-gear-btn:hover, #settings-gear-btn.active { color: var(--dc-cyan); border-color: var(--dc-cyan); background: var(--dc-cyan-tint-3); } @media (max-width: 760px) { .flyout-panel { left: 8px; right: 8px; width: auto; } }