/* Theme variables. The `data-theme` attribute on selects the palette. */ :root, [data-theme="dark"] { --bg: #1e1e1e; --bg-elevated: #252526; --bg-input: #3c3c3c; --border: #3c3c3c; --text: #d4d4d4; --text-dim: #9a9a9a; --accent: #0e639c; --accent-hover: #1177bb; --status-ok: #4ec94e; --status-err: #f14c4c; --status-warn: #d7a843; } [data-theme="light"] { --bg: #ffffff; --bg-elevated: #f3f3f3; --bg-input: #ffffff; --border: #cccccc; --text: #1e1e1e; --text-dim: #6a6a6a; --accent: #0e639c; --accent-hover: #1177bb; --status-ok: #2ea02e; --status-err: #d11a1a; --status-warn: #b07e10; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; background: var(--bg); color: var(--text); } .hidden { display: none !important; } /* App layout: top bar, terminal (flex-grow), status bar. */ .app { display: flex; flex-direction: column; height: 100%; } .top-bar, .status-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .status-bar { border-bottom: none; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12px; } .spacer { flex: 1; } .terminal { flex: 1; min-height: 0; padding: 4px; background: var(--bg); } /* Controls. */ .btn { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px; cursor: pointer; font-size: 13px; } .btn:hover { border-color: var(--accent); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { background: var(--accent-hover); } .field { display: flex; align-items: center; gap: 6px; } .field > span { color: var(--text-dim); } .checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; } input[type="text"], input.baud-input, select { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font-size: 13px; } .baud-input { width: 90px; } /* Settings panel. */ .settings-panel { padding: 10px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); } .settings-grid { display: flex; flex-wrap: wrap; gap: 16px; } .settings-note { margin: 8px 0 0; color: var(--text-dim); font-size: 12px; } /* Status bar items. */ .status-item { white-space: nowrap; } .status-conn { font-weight: 600; } .status-conn[data-state="connected"] { color: var(--status-ok); } .status-conn[data-state="connecting"] { color: var(--status-warn); } .status-conn[data-state="error"] { color: var(--status-err); } .status-conn[data-state="disconnected"] { color: var(--text-dim); } /* Unsupported-browser screen and dialogs. */ .unsupported, .dialog { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); z-index: 10; } .unsupported-box, .dialog-box { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 24px; max-width: 460px; text-align: center; } .dialog-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }