/* ============================================================ OpScreen v2 — Observatory Control Room Theme Dual light/dark theme for LWA operations monitoring Toggle via data-theme attribute on ============================================================ */ /* --- Light Theme (Default) --- */ :root { --bg-primary: #f7f4ee; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f2ede4; --border-card: #d6cfc3; --border-subtle: #eae4da; --text-primary: #1a1d24; --text-secondary: #5a6478; --text-muted: #8892a6; --accent: #c08b3e; --accent-dim: #a87432; --accent-glow: rgba(192, 139, 62, 0.12); --status-booting: #2563ab; --status-normal: #1a7a42; --status-warning: #aa8d2e; --status-error: #a63d3d; --status-shutdown: #5a6577; --status-booting-bg: rgba(37, 99, 235, 0.08); --status-normal-bg: rgba(22, 163, 74, 0.08); --status-warning-bg: rgba(202, 138, 4, 0.08); --status-error-bg: rgba(220, 38, 38, 0.08); --status-shutdown-bg: rgba(107, 114, 128, 0.06); --header-bg: #0b1a2e; --header-text: #e8ecf2; --header-border: #1a2d4a; --font-mono: 'SFMono-Regular', 'Menlo', 'Consolas', 'Courier New', monospace; --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; --font-heading: 'DM Sans', 'Georgia', serif; --radius: 6px; --radius-lg: 10px; --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--border-card); --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.1); --transition: 0.2s ease; } /* --- Dark Theme --- */ [data-theme="dark"] { --bg-primary: #070e1e; --bg-secondary: #0b1a2e; --bg-card: #122240; --bg-card-hover: #152035; --border-card: #1a2d4a; --border-subtle: #162038; --text-primary: #dfe6f0; --text-secondary: #7e8da6; --text-muted: #4a5872; --accent: #d9a24e; --accent-dim: #c08b3e; --accent-glow: rgba(217, 162, 78, 0.15); --status-booting: #93b8f7; --status-normal: #7dcea0; --status-warning: #d4a94a; --status-error: #e48a8a; --status-shutdown: #8893a4; --status-booting-bg: rgba(59, 130, 246, 0.12); --status-normal-bg: rgba(34, 197, 94, 0.1); --status-warning-bg: rgba(234, 179, 8, 0.1); --status-error-bg: rgba(239, 68, 68, 0.1); --status-shutdown-bg: rgba(107, 114, 128, 0.12); --header-bg: #0b1a2e; --header-text: #dfe6f0; --header-border: #1a2d4a; --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-card); --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.5); } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: 56px; } body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; line-height: 1.6; margin: 0; padding: 0; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-dim); } [data-theme="dark"] a:hover { color: #e6c47a; } img { max-width: 100%; height: auto; border-radius: var(--radius); } .zoomWrapperImage img { max-width: none; border-radius: 0; border: none; } /* --- Typography --- */ h1 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; padding: 0; } h2 { color: var(--accent); font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 16px 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-card); } h3 { color: var(--text-primary); font-family: var(--font-heading); font-size: 1rem; font-weight: 600; margin: 20px 0 10px 0; } pre { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; color: var(--text-primary); line-height: 1.5; } div > pre { padding: 14px; border: 1px solid var(--border-card); border-radius: var(--radius); background: var(--bg-secondary); } /* --- Theme Toggle Button --- */ .theme-toggle { position: relative; z-index: 1001; flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius); padding: 5px 10px; cursor: pointer; font-family: var(--font-mono); font-size: 14px; color: var(--text-secondary); transition: all var(--transition); line-height: 1; display: flex; align-items: center; gap: 6px; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .theme-icon { font-size: 16px; line-height: 1; } /* --- Fixed Top Header Strip --- */ .fixedtopheader { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; background: var(--header-bg); border-bottom: 1px solid var(--header-border); box-shadow: var(--shadow-header); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 48px; gap: 12px; } .fixedtopheader h1 { color: var(--header-text); font-size: 1rem; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .fixedtopheader .header-clocks { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* --- Main Header Bar --- */ div#headerbar { background: var(--header-bg); border-bottom: 1px solid var(--header-border); box-shadow: var(--shadow-header); margin: 0; padding: 48px 0 0 0; margin-left: 48px; text-align: left; float: none; display: block; } /* Spacer no longer needed — fixedtopheader is outside headerbar */ div#headerbar h1 { color: var(--header-text); font-size: 1rem; text-shadow: none; margin: 0 0 6px 0; padding: 0; display: block; } div#headerbar div { margin: 0; padding: 0; float: none; text-align: left; } div#headerbar div:before { content: none; } /* --- Clock Display --- */ span.clock { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.75); text-decoration: none; margin: 0; display: inline-block; padding: 3px 9px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; } /* Clocks inside content cards use theme-aware colors */ div.content span.clock { color: var(--text-primary); background: var(--bg-primary); border-color: var(--border-card); } /* --- Hamburger Button --- */ .nav-hamburger { display: none; position: relative; z-index: 1001; flex-shrink: 0; background: none; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius); padding: 6px 9px; cursor: pointer; color: var(--header-text); font-size: 18px; line-height: 1; transition: all var(--transition); margin-left: 8px; } .nav-hamburger:hover { border-color: var(--accent); color: var(--accent); } /* --- Side Navigation Panel --- */ .side-nav { position: fixed; top: 48px; left: 0; width: 48px; height: calc(100% - 48px); background: var(--header-bg); border-right: 1px solid var(--header-border); box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); z-index: 999; overflow-y: auto; overflow-x: hidden; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .side-nav-overlay { display: none; position: fixed; top: 48px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 998; } .side-nav a.btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: 0; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); font-size: 15px; border-radius: var(--radius); position: relative; } .side-nav a.btn i { margin: 0; opacity: 1; } .side-nav a.btn:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--accent); color: var(--accent); } .side-nav a.btn:hover::after { content: attr(title); position: absolute; left: 44px; top: 50%; transform: translateY(-50%); background: #1e293b; color: #e8ecf2; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius); white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); z-index: 1010; pointer-events: none; } /* --- Navigation Buttons in Header (table layout) — hidden, sidebar replaces --- */ div#headerbar > table.nav-table { display: none; } /* --- Content Cards --- */ div.content { display: block; text-align: left; max-width: 900px; width: calc(100% - 32px); margin: 20px 16px 20px 64px; background: var(--bg-card); box-shadow: var(--shadow-card); border-radius: var(--radius-lg); padding: 24px; border: none; clear: both; min-width: 0; transition: background-color 0.3s ease, box-shadow 0.3s ease; animation: cardIn 0.4s ease both; } div.content:first-of-type { margin-top: 24px; } div#last { margin-bottom: 40px; } @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } div.content:nth-of-type(1) { animation-delay: 0.05s; } div.content:nth-of-type(2) { animation-delay: 0.1s; } div.content:nth-of-type(3) { animation-delay: 0.15s; } div.content:nth-of-type(4) { animation-delay: 0.2s; } div.content:nth-of-type(5) { animation-delay: 0.25s; } div.content:nth-of-type(6) { animation-delay: 0.3s; } div.content:nth-of-type(7) { animation-delay: 0.35s; } div.content:nth-of-type(8) { animation-delay: 0.4s; } div.content:nth-of-type(9) { animation-delay: 0.45s; } div.content:nth-of-type(10) { animation-delay: 0.5s; } /* --- Tables --- */ table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 13px; } td, th { border: 1px solid var(--border-card); padding: 8px 12px; text-align: left; vertical-align: top; } th { background: var(--bg-primary); color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } td { color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; transition: background-color var(--transition); } /* --- Status Colors (td classes used by JS) --- */ td.booting, td.spectrometer { background: var(--status-booting-bg); color: var(--status-booting); border-left: 3px solid var(--status-booting); } td.normal, td.record { background: var(--status-normal-bg); color: var(--status-normal); border-left: 3px solid var(--status-normal); } td.warning, td.copy { background: var(--status-warning-bg); color: var(--status-warning); border-left: 3px solid var(--status-warning); } td.error { background: var(--status-error-bg); color: var(--status-error); border-left: 3px solid var(--status-error); } td.shutdown { background: var(--status-shutdown-bg); color: var(--status-shutdown); border-left: 3px solid var(--status-shutdown); } td.unknown, td.idle { background: var(--status-shutdown-bg); color: var(--text-secondary); } td.weather { background: var(--bg-secondary); color: var(--text-primary); } td.clean { color: var(--text-primary); background: transparent; border: none; padding: 3px; width: auto; } /* --- eLWA Running Blink --- */ .elwa_running { opacity: 0.5; } /* --- Truncated "Additional Info" Tooltips --- */ .fullinfo { max-width: 18ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; float: none; text-align: left; vertical-align: middle; cursor: help; } .fullinfo-expanded { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; cursor: pointer; } /* --- Buttons --- */ .btn { display: inline-block; padding: 7px 14px; margin-bottom: 0; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center; vertical-align: middle; cursor: pointer; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-card); border-radius: var(--radius); transition: all var(--transition); text-shadow: none; box-shadow: none; background-image: none; filter: none; } .btn:hover { background: var(--bg-card-hover); border-color: var(--accent-dim); color: var(--accent); text-decoration: none; background-position: 0 0; } .btn:active, .btn.active { background: var(--bg-primary); border-color: var(--accent); background-image: none; } .btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .btn.disabled, .btn[disabled] { cursor: default; opacity: 0.4; background: var(--bg-secondary); background-image: none; } .btn i { margin-right: 4px; opacity: 0.7; } .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; box-sizing: border-box; } .btn-block + .btn-block { margin-top: 4px; } .btn-large { padding: 11px 19px; font-size: 15px; border-radius: var(--radius); } .btn-small { padding: 3px 10px; font-size: 12px; } .btn-mini { padding: 2px 6px; font-size: 11px; } /* Colored button variants (kept for compatibility) */ .btn-primary { background: var(--status-booting); border-color: var(--status-booting); color: #fff; } .btn-primary:hover { background: #2563eb; color: #fff; } .btn-success { background: var(--status-normal); border-color: var(--status-normal); color: #fff; } .btn-success:hover { background: #16a34a; color: #fff; } .btn-warning { background: var(--status-warning); border-color: var(--status-warning); color: #000; } .btn-warning:hover { background: #ca8a04; color: #000; } .btn-danger { background: var(--status-error); border-color: var(--status-error); color: #fff; } .btn-danger:hover { background: #dc2626; color: #fff; } .btn-info { background: #0ea5e9; border-color: #0ea5e9; color: #fff; } .btn-info:hover { background: #0284c7; color: #fff; } .btn-inverse { background: var(--status-shutdown); border-color: var(--status-shutdown); color: #fff; } .btn-inverse:hover { background: #374151; color: #fff; } .btn-link { background: transparent; border-color: transparent; color: var(--accent); box-shadow: none; } .btn-link:hover { color: var(--accent-dim); text-decoration: underline; background: transparent; } /* Input group compatibility */ .input-prepend .add-on:first-child, .input-prepend .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); } .input-append .add-on:last-child, .input-append .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; } /* --- Progress Bars --- */ .progress { height: 24px; margin-bottom: 16px; overflow: hidden; background: var(--bg-primary); border-radius: var(--radius); border: 1px solid var(--border-card); } .progress-bar { float: left; width: 0; height: 100%; font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 24px; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; transition: width 0.6s ease; box-shadow: none; } .progress-bar-normal { background: var(--status-normal); color: #fff; } .progress-bar-booting { background: var(--status-booting); color: #fff; } .progress-bar-warning { background: var(--status-warning); color: #000; } .progress-bar-error { background: var(--status-error); color: #fff; } .progress-bar-shutdown { background: var(--status-shutdown); color: #fff; } /* --- Tooltips (Bootstrap-style) --- */ .tooltip { position: absolute; z-index: 1070; display: block; font-family: var(--font-mono); font-size: 12px; font-style: normal; font-weight: normal; line-height: 1.5; text-align: left; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal; opacity: 0; filter: alpha(opacity=0); line-break: auto; } .tooltip.in { opacity: 0.95; filter: alpha(opacity=95); } .tooltip.top { padding: 5px 0; margin-top: -3px; } .tooltip.right { padding: 0 5px; margin-left: 3px; } .tooltip.bottom { padding: 5px 0; margin-top: 3px; } .tooltip.left { padding: 0 5px; margin-left: -3px; } .tooltip-inner { max-width: 260px; padding: 8px 12px; color: #fff; text-align: left; background: #1e293b; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #1e293b; } .tooltip.top-left .tooltip-arrow { right: 5px; bottom: 0; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #1e293b; } .tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #1e293b; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #1e293b; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #1e293b; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #1e293b; } .tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #1e293b; } .tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #1e293b; } /* --- Form Elements --- */ select, input[type="text"] { font-family: var(--font-mono); font-size: 13px; padding: 6px 10px; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-card); border-radius: var(--radius); outline: none; transition: border-color var(--transition); } select:focus, input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); } button { font-family: var(--font-body); font-size: 13px; font-weight: 500; padding: 6px 14px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-card); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); } button:hover { background: var(--bg-card-hover); border-color: var(--accent-dim); color: var(--accent); } /* --- Responsive Images --- */ div.content img { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border-card); } #orville-spec-image { border: none; border-radius: 0; } /* --- Responsive Design --- */ @media (max-width: 960px) { /* Sidebar becomes a slide-out drawer on mobile */ .side-nav { left: -60px; width: 48px; box-shadow: none; transition: left 0.25s ease; } .side-nav.open { left: 0; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25); } .side-nav-overlay.open { display: block; } /* Remove sidebar margin from content */ div#headerbar { margin-left: 0; padding: 48px 0 0 0; } div.content { width: calc(100% - 16px); margin: 12px 8px; padding: 16px; } span.clock { font-size: 11px; padding: 2px 6px; } h2 { font-size: 1rem; } table { font-size: 12px; } td, th { padding: 6px 8px; } /* Show hamburger */ .nav-hamburger { display: block; } /* Ensure theme toggle and hamburger don't get squeezed */ .fixedtopheader h1 { display: none; } .fixedtopheader .header-clocks { flex: 1; min-width: 0; overflow: hidden; } } @media (max-width: 600px) { .fixedtopheader { height: 42px; padding: 0 8px; gap: 6px; } .theme-toggle { padding: 4px 8px; font-size: 12px; } span.clock { font-size: 10px; padding: 2px 4px; } div#headerbar { padding: 48px 0 0 0; } div.content { width: calc(100% - 8px); margin: 8px 4px; padding: 12px; border-radius: var(--radius); } h2 { font-size: 0.85rem; } td, th { padding: 4px 6px; font-size: 11px; } .btn { font-size: 12px; padding: 5px 10px; } .fullinfo { max-width: 10ch; } } /* --- Scrollbar Styling (dark theme) --- */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-card); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }