/* КІСА — веб-адмінка. Ідіома взята з проєкту wgadmin (компактні картки, таблиці, теги стану), але вся палітра зведена до змінних: там кольори на кшталт #fff стояли просто в правилах, і темна тема була б неможлива без переписування. Теми: авто (за системою) / світла / темна. 'Авто' — це відсутність data-theme на ; явний вибір ставить data-theme="light|dark" і має перемагати системну настройку в ОБИДВА боки. */ :root { /* Разом із кольорами, тими самими трьома селекторами: інакше смуги прокрутки й рідні контроли браузера лишаються світлими на темній сторінці. */ color-scheme: light; --bg: #f6f7f9; --surface: #ffffff; --surface-2: #fafbfc; --fg: #1c2024; --muted: #6b7280; --line: #d8dce2; --accent: #1f5eff; --ok: #0a7a41; --err: #b42318; --warn: #b45309; --on-fill: #0b8043; --off-fill: #c62a21; --warn-fill: #b45309; --idle-fill: #eceef2; --idle-fg: #4a5162; --flash-ok-bg: #e6f6ec; --flash-err-bg: #fdeceb; --pre-bg: #0f1419; --pre-fg: #e6e6e6; --shadow: 0 1px 2px rgba(16, 32, 51, .04); } /* Темні значення тримаємо в одному місці, щоб не розходились між системною темою і явним вибором. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0f1216; --surface: #171b21; --surface-2: #1d222a; --fg: #e4e7ea; --muted: #9099a5; --line: #2b323c; --accent: #6fc7f0; --ok: #4ac47f; --err: #ff7b6b; --warn: #e0a341; --on-fill: #14713d; --off-fill: #9e2b23; --warn-fill: #8a5a10; --idle-fill: #262c35; --idle-fg: #aab3c0; --flash-ok-bg: #102b1c; --flash-err-bg: #331613; --pre-bg: #0a0d11; --pre-fg: #d7dbe0; --shadow: none; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1216; --surface: #171b21; --surface-2: #1d222a; --fg: #e4e7ea; --muted: #9099a5; --line: #2b323c; --accent: #6fc7f0; --ok: #4ac47f; --err: #ff7b6b; --warn: #e0a341; --on-fill: #14713d; --off-fill: #9e2b23; --warn-fill: #8a5a10; --idle-fill: #262c35; --idle-fg: #aab3c0; --flash-ok-bg: #102b1c; --flash-err-bg: #331613; --pre-bg: #0a0d11; --pre-fg: #d7dbe0; --shadow: none; } * { box-sizing: border-box; } /* Без цього правила посилання в картках і таблицях брали браузерний дефолт (#0000EE, на темному тлі 2.0:1 — нечитабельно), а змінна --accent до них не доходила взагалі. У світлій темі це не впадало в око, бо синій на білому читається. :visited свідомо НЕ додаємо: a:visited має специфічність (0,1,1) і перебив би nav a (0,0,2) — відвідані пункти меню перефарбувались би. */ a { color: var(--accent); } body { margin: 0; font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--fg); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- навігація --- */ nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); } nav a { color: var(--fg); text-decoration: none; padding: 2px 0; } nav a:hover { color: var(--accent); } nav a.active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } nav .brand { font-weight: 700; margin-right: 8px; letter-spacing: .04em; } nav .right { margin-left: auto; display: flex; gap: 12px; align-items: center; } nav .whoami { white-space: nowrap; } .nav-menu { position: relative; } .nav-menu summary { cursor: pointer; list-style: none; color: var(--fg); padding: 2px 0; } .nav-menu summary::-webkit-details-marker { display: none; } .nav-menu summary::after { content: " ▾"; color: var(--muted); font-size: 11px; } .nav-menu summary:hover, .nav-menu summary.active { color: var(--accent); } .nav-menu summary.active { box-shadow: inset 0 -2px 0 var(--accent); } .nav-menu-items { position: absolute; z-index: 100; top: calc(100% + 8px); left: -10px; min-width: 170px; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); } .nav-menu-items a { display: block; padding: 7px 9px; border-radius: 5px; } .nav-menu-items a:hover { background: var(--surface-2); } .theme select { display: inline-block; width: auto; margin: 0; padding: 4px 8px; font-size: 13px; } main { max-width: 1100px; margin: 0 auto; padding: 20px; } h1 { font-size: 22px; margin: 0 0 14px; } h2 { font-size: 17px; margin: 18px 0 8px; } h3 { font-size: 14px; margin: 14px 0 4px; color: var(--muted); } /* --- картки --- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow); } .card.narrow { max-width: 420px; margin-inline: auto; } .card-head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; margin-bottom: 12px; } .card-head h2 { margin: 0; } /* Один доступний tooltip-компонент для таблиць і коротких приміток. Fixed-позиція не дає довгому тексту вилізти за viewport у крайніх th. */ .tip { position: relative; border-bottom: 1px dotted var(--line); cursor: help; outline-offset: 3px; } .tip::after { content: attr(data-tip); position: fixed; z-index: 1000; left: 50%; bottom: 20px; width: max-content; max-width: min(440px, calc(100vw - 32px)); padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow); white-space: normal; line-height: 1.4; text-align: left; font-size: 13px; font-weight: 400; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 6px); transition: opacity .12s, transform .12s, visibility .12s; } .tip:hover::after, .tip:focus::after, .tip:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .page-note { margin: 8px 0 18px; } /* --- лічильники стану --- */ .stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .stat { flex: 1 1 120px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow); } .stat .label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .stat strong { font-size: 24px; font-weight: 650; line-height: 1.3; } .stat.ok strong { color: var(--ok); } .stat.warn strong { color: var(--warn); } /* --- форми --- */ label { display: block; margin: 10px 0; font-size: 13px; color: var(--muted); } label.inline { display: inline-block; margin-right: 14px; color: var(--fg); } input, select, textarea { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; font-size: 14px; font-family: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } label.inline input { display: inline-block; width: auto; margin: 0 4px 0 0; } fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin: 14px 0; } legend { font-size: 13px; color: var(--muted); padding: 0 6px; } button { padding: 7px 14px; font-size: 14px; font-family: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; } button:hover { border-color: var(--accent); color: var(--accent); } button.link { border: none; background: none; padding: 2px 4px; color: var(--accent); } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } button.primary:hover { color: #fff; filter: brightness(1.08); } button.danger { color: var(--err); } button[disabled] { opacity: .5; cursor: not-allowed; } form { margin: 0; } .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .inline-form { display: inline-flex; gap: 4px; align-items: center; } .inline-form input { width: auto; display: inline-block; margin: 0; } .source-actions { align-items: center; justify-content: space-between; } .updates-target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .updates-target-grid label { margin-top: 0; } .access-grant-form { align-items: flex-end; } .access-grant-form label { flex: 1 1 260px; margin: 0; } /* --- таблиці --- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } th, td { text-align: left; padding: 8px 10px; font-size: 14px; border-bottom: 1px solid var(--line); vertical-align: top; } th { background: var(--surface-2); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } tr:last-child td { border-bottom: none; } td.empty { text-align: center; color: var(--muted); padding: 22px 10px; } .mono, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .meta { color: var(--muted); font-size: 12px; } /* --- мітки стану --- */ .tag { display: inline-block; padding: 3px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap; } .tag.online { background: var(--on-fill); color: #fff; } .tag.stale { background: var(--warn-fill); color: #fff; } /* offline — стан більшості рядків, тому лишається спокійним: якщо кричатимуть усі мітки, жодна не помітна */ .tag.offline { background: var(--idle-fill); color: var(--idle-fg); } .tag.ok { background: var(--on-fill); color: #fff; } .tag.denied { background: var(--off-fill); color: #fff; } .tag.error { background: var(--warn-fill); color: #fff; } /* idle — «є такий стан, і це нормально». Свідомо НЕ error: 2FA необовʼязкова, і червоний значок навпроти кожного акаунта привчав би не помічати справжні попередження. */ .tag.idle { background: var(--idle-fill); color: var(--idle-fg); } /* --- повідомлення --- */ .flash, .notice { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 14px; } .flash.ok { background: var(--flash-ok-bg); color: var(--ok); } .flash.err, .notice.error { background: var(--flash-err-bg); color: var(--err); border-left: 3px solid var(--err); } .notice { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } pre { background: var(--pre-bg); color: var(--pre-fg); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; } dl { display: grid; grid-template-columns: 190px 1fr; gap: 4px 12px; margin: 14px 0; } dt { color: var(--muted); font-size: 13px; } dd { margin: 0; word-break: break-all; } /* --- сторінка входу --- */ .login-wrap { display: flex; align-items: center; justify-content: center; min-height: 80vh; } .login-wrap .card { width: 100%; max-width: 380px; margin: 0; } .login-wrap h1 { font-size: 20px; } .hint { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); } .totp-qr { margin: 20px 0; text-align: center; } .totp-qr img { display: block; width: min(240px, 100%); height: auto; margin: 0 auto 8px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .totp-qr p { margin: 0; } @media (max-width: 700px) { nav { gap: 10px; } nav .right { width: 100%; margin-left: 0; } dl { grid-template-columns: 1fr; } } /* Стани завдань керуючої площини (ADR-003) */ .tag.queued { background: var(--idle-fill); color: var(--idle-fg); } .tag.running { background: var(--accent); color: #fff; } .tag.done { background: var(--on-fill); color: #fff; } .tag.failed { background: var(--off-fill); color: #fff; } .tag.rejected{ background: var(--warn-fill); color: #fff; } /* Журнал виконання: довгий, тому з обмеженою висотою і власною прокруткою */ #log { max-height: 60vh; overflow-y: auto; white-space: pre-wrap; } /* ============================================================ Відеоогляд (задача 4) ============================================================ */ .wall { display: grid; gap: 10px; margin-bottom: 18px; } .wall-1 { grid-template-columns: 1fr; } .wall-2 { grid-template-columns: repeat(2, 1fr); } .wall-3 { grid-template-columns: repeat(3, 1fr); } .wall-4 { grid-template-columns: repeat(4, 1fr); } .wall-5 { grid-template-columns: repeat(5, 1fr); } /* Понад місткість сітки плитки ховаємо, а їх потоки зупиняє JS — інакше невидима плитка й далі декодувала б відео. */ .wall-1 .tile:nth-child(n + 2), .wall-2 .tile:nth-child(n + 5), .wall-3 .tile:nth-child(n + 10), .wall-4 .tile:nth-child(n + 17), .wall-5 .tile:nth-child(n + 26) { display: none; } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); } .tile-head, .tile-foot { display: flex; align-items: center; gap: 8px; padding: 6px 10px; } .variant-select { gap: .3rem; margin: 0; } .variant-select .variant { padding: .25rem .45rem; font-size: .78rem; } .variant-select .variant.active { border-color: var(--accent); color: var(--accent); } .tile-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .tile-foot .variant-select { grid-column: 1; grid-row: 1; } .tile-foot .stop { grid-column: 2; grid-row: 1; } .tile-foot .status { grid-column: 1 / -1; grid-row: 2; min-height: 1.25em; margin-top: 2px; } .tile-head { border-bottom: 1px solid var(--line); } .tile-head .fullscreen { margin-left: auto; padding: .2rem .45rem; font-size: 1rem; line-height: 1; } .tile:fullscreen { width: 100vw; height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 0; border-radius: 0; background: var(--surface); } .tile:fullscreen .tile-body { aspect-ratio: auto; min-height: 0; } .tile-body { position: relative; aspect-ratio: 16 / 9; background: #000; } .tile-body video { width: 100%; height: 100%; object-fit: contain; display: block; } .tile-map { position: absolute; right: 8px; bottom: 7px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 4px; color: #fff; background: rgba(0, 0, 0, .62); font-size: 12px; font-variant-numeric: tabular-nums; } .tile-map a { color: #7fd5ff; font-size: 17px; line-height: 1; text-decoration: none; } .tile-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .tile-overlay[hidden] { display: none; } .err-text { color: var(--err); } .ground-live-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 18px; } .control-form { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; align-items: end; gap: 10px; } .control-form label { margin: 0; } .inline-action { display: flex; gap: 6px; align-items: center; } .inline-action select { min-width: 130px; margin: 0; } .archive-action { margin-top: 8px; font-size: 12px; color: var(--muted); } .archive-action form { min-width: 260px; padding-top: 6px; } #telemetry-table th { width: 55%; } /* Робоче місце оператора: огляд усієї наземки. Обидва блоки задають display, тому [hidden] треба перекривати явно — інакше прихований режим лишався б на екрані. */ .ground-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin-bottom: 18px; } .ground-overview[hidden], .ground-live-grid[hidden] { display: none; } .mode-switch { display: flex; gap: 6px; } .mode-switch .mode.active { border-color: var(--accent); color: var(--accent); } .ground-workspace-head { align-items: center; } .ground-workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .ground-workspace-grid .card { margin-bottom: 18px; } .ground-workspace-info .ground-station-line { justify-content: flex-start; } .ground-station-lines { display: grid; gap: 8px; margin-top: 12px; } .ground-actions-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ground-actions-title h2 { margin: 0; } .ground-workspace-actions > .mode-switch { margin-bottom: 10px; } .ground-action-status { min-height: 1.4em; margin: 12px 0 0; } .ground-workspace-title { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; } .ground-workspace-title h1 { margin: 0; } .ground-station-line { min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; } /* Активний дрон наземки видно з першого погляду — це головний борт зміни. */ .tile.mini.is-active { border-color: var(--accent); } .tile.mini .tile-head .right { margin-left: auto; } .tile-activate { margin: 0; } .tile-activate .activate-drone { min-width: 26px; padding: 2px 5px; color: var(--accent); border-color: var(--accent); } .tile.mini .tile-body.no-video { display: flex; align-items: center; justify-content: center; background: var(--surface); } .mini-telemetry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 7px 10px; border-top: 1px solid var(--line); font-size: 12px; } .mini-row { display: flex; justify-content: space-between; gap: 6px; } .mini-row .k { color: var(--muted); } /* tabular-nums: без нього значення смикаються на кожному оновленні (1 Гц). */ .mini-row .v { font-variant-numeric: tabular-nums; white-space: nowrap; } .mini-row .u { color: var(--muted); } @media (max-width: 700px) { .wall-2, .wall-3, .wall-4, .wall-5 { grid-template-columns: 1fr; } .ground-live-grid, .control-form, .ground-workspace-grid { grid-template-columns: 1fr; } .ground-overview { grid-template-columns: 1fr; } .updates-target-grid { grid-template-columns: 1fr; gap: 0; } .ground-workspace-head { align-items: stretch; flex-direction: column; } .ground-station-line { justify-content: flex-start; } } /* Компактні стани й дії в адміністративних таблицях. Колір не є єдиним сигналом: кожен значок має title/aria-label. */ .status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } .status-dot.on { background: var(--on-fill); } .status-dot.off { background: var(--off-fill); } .account-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .google-link-icon { display: inline-block; margin-right: 4px; font-size: 12px; } .icon-button { min-width: 32px; padding: 4px 7px; font-weight: 700; line-height: 1.2; } .icon-button.enable { color: var(--ok); border-color: var(--ok); } .icon-button.disable { color: var(--err); border-color: var(--err); } .icon-button.save { color: var(--accent); border-color: var(--accent); } .modal { width: min(430px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: var(--surface); color: var(--fg); box-shadow: 0 18px 60px rgba(0, 0, 0, .35); } .modal::backdrop { background: rgba(0, 0, 0, .55); } .modal .card-head h2 { margin: 0; } /* Значок алертів у меню (P1) */ .badge { display: inline-block; min-width: 18px; margin-left: 5px; padding: 1px 6px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; background: var(--warn-fill); color: #fff; } .badge.crit { background: var(--off-fill); } .badge[hidden] { display: none; } /* Заглушений алерт лишається у списку, але не тягне на себе увагу */ tr.archived { opacity: .55; } /* Кнопка входу через Google (ADR-004, етап 2) */ .btn-google { display: block; width: 100%; padding: 10px 16px; text-align: center; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; } .btn-google:hover { border-color: var(--accent); color: var(--accent); } .video-portal-head { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--surface); } .video-portal-head .meta { margin-left: auto; } .video-portal-head form { margin: 0; } .portal-autoplay { margin-left: auto; } .three-cols { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } .row.compact { margin: 4px 0; } .account-tabs { display: flex; gap: 6px; margin: 0 0 14px; border-bottom: 1px solid var(--line); } .account-tabs a { padding: 9px 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; } .account-tabs a.active { color: var(--fg); border-bottom-color: var(--accent); } .account-tabs a span { margin-left: 5px; color: var(--muted); font-size: 12px; } .account-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .account-filters label { margin: 0; min-width: 150px; } .account-filters .grow { flex: 1 1 260px; } .account-filters button, .account-filters .button-link { height: 35px; } .button-link { display: inline-flex; align-items: center; padding: 0 14px; color: var(--fg); text-decoration: none; border: 1px solid var(--line); border-radius: 5px; } .pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 13px; } .pagination a { color: var(--accent); text-decoration: none; } .pagination .prev { grid-column: 1; justify-self: start; } .pagination .next { grid-column: 3; justify-self: end; } .pagination span { grid-column: 2; } .account-access-col { width: 155px; max-width: 180px; } .account-google-col { min-width: 330px; white-space: nowrap; } .account-google-col .inline-form { flex-wrap: nowrap; } .account-google-col input[type="email"] { min-width: 245px; } .contour-editor { min-width: 135px; } .contour-editor summary { cursor: pointer; color: var(--accent); } .contour-editor form { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; } .contour-checks { display: grid; gap: 5px; margin-bottom: 8px; } .contour-checks label.inline { margin: 0; white-space: nowrap; } .invite-contours { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; } .invite-contours label.inline { display: block; margin: 0; } .contour-create-form { align-items: flex-end; } .contour-create { height: 35px; align-self: flex-end; } .contour-member { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; margin: 4px 0; } .contour-member code { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 900px) { .three-cols { grid-template-columns: 1fr; } }