/* -------------------------------------------------------------------------- Theme palette. Dark is the default; light is opted in with . Only neutral surfaces/text/borders are themed — the saturated accents (green button, red danger, status dots) read fine on both, and blue-on-surface text uses --accent-info so it stays legible. -------------------------------------------------------------------------- */ :root { --bg: #0b141a; --well: #0b141a; /* sunken wells: code output, lists, insets */ --surface: #111b21; /* cards, modals, console */ --surface-2: #202c33; /* raised panels: header, modal head/foot, chips */ --input-bg: #2a3942; --input-border: #111b21; --border: #202c33; /* hairlines between surfaces */ --border-2: #2a3942; /* control outlines */ --border-strong: #000; --border-hover: #2f4552; --hover: #182229; /* row hover */ --text: #e9edef; --muted: #8696a0; --accent-info: #53bdeb; /* blue text sitting on a surface */ --me-bg: #14231c; /* "me" message bubble tint */ --shadow: rgba(0, 0, 0, 0.25); --shadow-strong: rgba(0, 0, 0, 0.5); --backdrop: rgba(0, 0, 0, 0.6); } :root[data-theme="light"] { --bg: #f0f2f5; --well: #f6f8fa; --surface: #ffffff; --surface-2: #eef1f4; --input-bg: #ffffff; --input-border: #ccd0d5; --border: #d9dde1; --border-2: #ccd0d5; --border-strong: #d0d5da; --border-hover: #b3bcc4; --hover: #eef1f4; --text: #111b21; --muted: #667781; --accent-info: #1a73c7; --me-bg: #e7f9ee; --shadow: rgba(0, 0, 0, 0.1); --shadow-strong: rgba(0, 0, 0, 0.22); --backdrop: rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; transition: background-color 0.2s ease, color 0.2s ease; } body.modal-open { overflow: hidden; } header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); flex-wrap: wrap; } header h1 { font-size: 18px; margin: 0; } .status { color: var(--muted); font-size: 12px; margin-top: 4px; } .head-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .icon-tools { display: flex; align-items: center; gap: 12px; } #create { display: flex; gap: 8px; } .lang { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); border-radius: 6px; padding: 8px 10px; font: inherit; cursor: pointer; } input, textarea, select { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); border-radius: 6px; padding: 8px 10px; font: inherit; } button { background: #25d366; color: #0b141a; border: 0; border-radius: 6px; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; } button:hover { filter: brightness(1.08); } button.ghost { background: var(--input-bg); color: var(--text); } button.primary { background: #53bdeb; color: #0b141a; } button.danger { background: #f15c6d; color: #0b141a; } button.sm { padding: 5px 9px; font-size: 12px; } /* Theme toggle: quiet icon button in the header. */ .icon-toggle { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: 6px; padding: 7px 10px; font-size: 15px; line-height: 1; } .icon-toggle:hover { filter: none; background: var(--border-2); } /* Advanced/simple UI mode. The mode toggle stays highlighted while advanced is on; every .adv-only control is hidden in simple mode (the default). */ .icon-toggle.active { background: var(--border-2); box-shadow: inset 0 0 0 2px var(--input-border); } :root[data-mode="simple"] .adv-only { display: none !important; } main { padding: 24px; } #cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .card:hover { border-color: var(--border-hover); box-shadow: 0 6px 20px var(--shadow); } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .card h3 { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; flex: 1; } .card-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card .meta { color: var(--muted); font-size: 12px; word-break: break-all; margin: 0; line-height: 1.7; } .card .icon-btn.del { flex: none; color: var(--muted); font-size: 14px; padding: 2px 6px; } .card .icon-btn.del:hover { color: #f8a5af; } /* Primary features: 2×2 grid of icon buttons. */ .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tools .tool { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 12px; font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); } .tools .tool:hover { background: var(--border-2); border-color: var(--border-hover); filter: none; } .tools .tool .ico { font-size: 15px; line-height: 1; } .tools .tool .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Secondary session controls: quiet, even 2-column grid so wrapped rows keep equal widths instead of stretching. */ .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); } /* In simple mode the secondary controls are all .adv-only (hidden), leaving an empty row. Drop its divider/padding so no stray bar shows under the tools — unless an always-visible button (e.g. a deferred device's Load) is present. */ :root[data-mode="simple"] .controls:not(:has(> button:not(.adv-only))) { padding-top: 0; border-top: 0; } .controls button { padding: 6px 8px; font-size: 12px; font-weight: 500; background: transparent; color: var(--muted); border: 1px solid var(--border-2); } .controls button:hover { background: var(--surface-2); color: var(--text); filter: none; } /* A deferred device's primary Load action sits on its own full-width row. */ .controls .load { grid-column: 1 / -1; background: #25d366; color: #0b141a; border-color: #25d366; font-weight: 600; } .controls .load:hover { background: #25d366; color: #0b141a; filter: brightness(1.08); } .dot { width: 10px; height: 10px; border-radius: 50%; background: #f0b232; flex: none; } .dot.loaded { background: #25d366; box-shadow: 0 0 6px rgba(37, 211, 102, 0.6); } .dot.failed { background: #f15c6d; } .badge { font-size: 11px; color: var(--muted); margin-inline-start: auto; flex: none; } #console { margin-top: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; } #console h2 { font-size: 15px; margin: 0 0 10px; } #console-target { color: #25d366; } #code { width: 100%; min-height: 90px; font-family: "Cascadia Code", Consolas, monospace; } #console .row { display: flex; gap: 8px; margin: 10px 0; } #result { background: var(--well); border-radius: 6px; padding: 12px; white-space: pre-wrap; word-break: break-all; min-height: 40px; margin: 0; } .empty, .muted { color: var(--muted); } .muted.err, .err { color: #f8a5af; } /* -------------------------------------------------------------------------- Clean Groups modal -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: var(--backdrop); } .modal-card { position: relative; width: min(920px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px var(--shadow-strong); } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); } .modal-head h2 { margin: 0; font-size: 17px; } .modal-sub { color: var(--muted); font-size: 12px; margin-top: 4px; } #clean-device { color: var(--accent-info); } .icon-btn { background: transparent; color: var(--muted); padding: 4px 8px; font-size: 16px; } .icon-btn:hover { color: var(--text); filter: none; } .modal-body { padding: 16px 20px; overflow: auto; } .clean-config { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .switch { display: flex; align-items: center; gap: 8px; cursor: pointer; } .switch input { width: 18px; height: 18px; accent-color: #25d366; } .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; } .field input { width: 120px; max-width: 100%; } .clean-lastrun { color: var(--muted); font-size: 12px; margin-inline-start: auto; } .clean-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .clean-col { min-width: 0; } .clean-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .clean-col-head h3 { margin: 0; font-size: 14px; } .clean-col-actions { display: flex; gap: 6px; flex-wrap: wrap; } .clean-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .clean-filter #clean-search { flex: 1; min-width: 140px; } .switch.sm { font-size: 12px; color: var(--muted); white-space: nowrap; } .switch.sm input { width: 15px; height: 15px; } .clean-list { background: var(--well); border: 1px solid var(--border); border-radius: 8px; max-height: 46vh; overflow: auto; padding: 6px; } .group-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; } .group-row:hover { background: var(--hover); } .group-row input { width: 18px; height: 18px; accent-color: #25d366; flex: none; } .group-info { min-width: 0; } .group-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; } .tag { font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 1px 8px; } .tag.unread { background: #144d37; color: #7ee2b8; } .tag.muted { background: #3a2f14; color: #e6c86a; } .tag.archived { background: #2a2140; color: #c4b5f5; } .log { font-size: 13px; } .log-row { display: flex; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--hover); } .log-row:last-child { border-bottom: 0; } .log-time { color: var(--muted); flex: none; font-variant-numeric: tabular-nums; } .log-text.ok { color: #2fa66c; } .log-text.err { color: #d9534f; } .modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--surface-2); border-top: 1px solid var(--border-strong); flex-wrap: wrap; } .modal-foot .spacer { flex: 1; } .clean-msg { font-size: 13px; color: var(--muted); } .clean-msg.ok { color: #2fa66c; } .clean-msg.err { color: #d9534f; } /* -------------------------------------------------------------------------- RTL (Hebrew) -------------------------------------------------------------------------- */ [dir="rtl"] .badge, [dir="rtl"] .clean-lastrun { margin-inline-start: auto; } [dir="rtl"] #code, [dir="rtl"] #result { direction: ltr; text-align: left; } /* code stays LTR */ /* -------------------------------------------------------------------------- Responsive Layered from wide → narrow so every part and dialog reflows gracefully: tablet (≤980) collapses the two-column dialog bodies, phone (≤720) makes dialogs full-screen and stacks the header, very-narrow (≤440) tightens dense controls, and a short/landscape query reclaims vertical space. -------------------------------------------------------------------------- */ /* Tablet / small window: the side-by-side dialog columns get cramped well before the phone breakpoint, so collapse them first. */ @media (max-width: 980px) { .clean-cols { grid-template-columns: 1fr; } #cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } /* Phone / narrow window. */ @media (max-width: 720px) { header { flex-direction: column; align-items: stretch; } .head-tools { justify-content: space-between; width: 100%; } #create { flex: 1 1 220px; } #create input { flex: 1; min-width: 0; } main { padding: 16px; } #cards { grid-template-columns: 1fr; } #console { padding: 14px; } .modal { padding: 0; } .modal-card { width: 100%; height: 100%; max-height: 100%; border-radius: 0; } .modal-body { padding: 14px 16px; } .modal-head, .modal-foot { padding-inline: 16px; } .clean-list { max-height: 38vh; } .clean-config { gap: 12px; } .clean-lastrun { margin-inline-start: 0; width: 100%; } .clean-col-head { flex-wrap: wrap; gap: 6px; } /* Keep the action bar reachable and let its buttons fill the width. */ .modal-foot { position: sticky; bottom: 0; } .modal-foot .spacer { display: none; } .modal-foot button { flex: 1 1 auto; } .clean-msg { flex-basis: 100%; } } /* Very narrow: phones in portrait / tiny windows. Tighten the densest bits. */ @media (max-width: 440px) { header { padding: 12px 16px; } .head-tools { flex-direction: column; align-items: stretch; gap: 8px; } /* Keep the name input and its button side by side — the button hugs its label, the input takes the rest, so the field doesn't blow up full-width. */ #create { flex: 0 0 auto; } #create input { flex: 1; } #create button { flex: none; white-space: nowrap; } .lang, #quit { width: 100%; } /* Keep the VNC / forwarder / theme buttons on one shared row instead of each stretching to a full row of its own. */ .icon-tools > .icon-toggle { flex: 1; } /* One column of feature buttons reads better than truncated 2×2. */ .tools { grid-template-columns: 1fr; } .field, .field input { width: 100%; } .auth-methods { gap: 14px; } .auth-code-row { flex-wrap: wrap; } .auth-code-row #auth-phone { flex-basis: 100%; } .auth-code-row button { flex: 1; } .modal-head h2 { font-size: 16px; } } /* Short / landscape windows: give the scrollable body room instead of letting the two stacked lists eat the whole viewport. */ @media (max-height: 560px) { .modal { padding: 0; } .modal-card { max-height: 100%; height: 100%; border-radius: 0; } .clean-list { max-height: 60vh; } .modal-foot { position: sticky; bottom: 0; } } /* Message Logger: captured-message rows + contact filter. */ .log-filter { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); border-radius: 6px; padding: 4px 8px; font-size: 12px; max-width: 160px; } .msg-row { padding: 7px 9px; border-radius: 6px; margin-bottom: 4px; background: var(--hover); border-inline-start: 3px solid var(--accent-info); } .msg-row.me { border-inline-start-color: #25d366; background: var(--me-bg); } .msg-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; } .msg-who { font-weight: 600; font-size: 12px; color: var(--accent-info); } .msg-row.me .msg-who { color: #2fa66c; } .msg-time { color: var(--muted); font-size: 11px; flex: none; font-variant-numeric: tabular-nums; } .msg-text { white-space: pre-wrap; word-break: break-word; } .chat-preview { color: var(--muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Conversation viewer: clickable single-select chat rows. */ .chat-row { padding: 8px; border-radius: 6px; cursor: pointer; min-width: 0; border-inline-start: 3px solid transparent; } .chat-row:hover { background: var(--hover); } .chat-row.active { background: var(--hover); border-inline-start-color: var(--accent-info); } /* Authorize device: card button + login modal. */ .card .icon-btn.auth-btn { flex: none; color: var(--accent-info); font-size: 14px; padding: 2px 6px; } .card .icon-btn.auth-btn:hover { filter: brightness(1.2); } .card .icon-btn.auth-btn.needs { animation: authPulse 1.6s ease-in-out infinite; } @keyframes authPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .auth-card { width: min(440px, 100%); } .auth-methods { display: flex; gap: 20px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .auth-methods .switch input { width: 16px; height: 16px; } .auth-panel { display: flex; flex-direction: column; gap: 12px; } .auth-qr-box { align-self: center; display: flex; align-items: center; justify-content: center; width: min(264px, 72vw); aspect-ratio: 1; max-width: 100%; padding: 12px; background: #fff; border-radius: 10px; } .auth-qr-box .muted { color: #667781; } #auth-qr-img { width: 100%; height: 100%; image-rendering: pixelated; } .auth-code-row { display: flex; gap: 8px; } .auth-code-row #auth-phone { flex: 1; direction: ltr; } .auth-code-out { align-self: center; max-width: 100%; text-align: center; font-family: "Cascadia Code", Consolas, monospace; font-size: clamp(22px, 7vw, 30px); font-weight: 700; letter-spacing: 4px; color: #1a9e4b; background: var(--well); border: 1px solid var(--border); border-radius: 10px; padding: 12px clamp(12px, 4vw, 20px); direction: ltr; } /* Message Forwarder: read-only global env panel. */ .fwd-env { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; } .fwd-env code { background: var(--well); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 6px; color: var(--accent-info); word-break: break-all; } .fwd-env .muted { margin: 4px 0 0; }