Clean up UI windows and strengthen settings workflows
This commit is contained in:
+167
@@ -539,6 +539,7 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
|
||||
margin-left: auto;
|
||||
}
|
||||
.logs-link:hover { color: #f1f4f2; }
|
||||
.activity-actions { display:flex; align-items:center; gap:12px; }
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
PRIMARY CONTROL ZONE (Workspace)
|
||||
@@ -554,6 +555,59 @@ body[data-app-state="link_degraded"] .status-line .status-dot {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Active MAVLink link test ── */
|
||||
.link-quality {
|
||||
display: grid;
|
||||
grid-template-columns: 8px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
min-height: 48px;
|
||||
padding: 3px 0;
|
||||
color: #eef2f0;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 9px;
|
||||
transition: background-color .18s ease;
|
||||
}
|
||||
.link-quality:hover,.link-quality:focus-visible { background:rgba(255,255,255,.055); outline:none; }
|
||||
.link-quality-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #667074;
|
||||
}
|
||||
.link-quality span:not(.link-quality-dot) { display:flex; flex-direction:column; gap:1px; min-width:0; }
|
||||
.link-quality small { color:#8d979a; font-size:10px; font-weight:400; }
|
||||
.link-quality strong { font-size:14px; font-weight:500; line-height:1.15; }
|
||||
.link-quality i {
|
||||
grid-column: 2;
|
||||
min-width: 0;
|
||||
color: #aab2b4;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
font-style: normal;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.link-quality i span { display:block; }
|
||||
.link-quality[data-grade="excellent"] .link-quality-dot { background:#bce96c; box-shadow:0 0 8px rgba(188,233,108,.35); }
|
||||
.link-quality[data-grade="good"] .link-quality-dot { background:#85c7e8; }
|
||||
.link-quality[data-grade="fair"] .link-quality-dot { background:#e7bf69; }
|
||||
.link-quality[data-grade="poor"] .link-quality-dot { background:#f07f78; box-shadow:0 0 8px rgba(240,127,120,.3); }
|
||||
.link-quality[data-grade="testing"] .link-quality-dot { background:#aab3b6; }
|
||||
.quality-modal { width:min(520px,calc(100vw - 32px)); }
|
||||
.heavy-test-panel { margin-top:18px; padding-top:14px; border-top:1px solid rgba(128,145,145,.2); }
|
||||
.heavy-quality-status { font-size:14px; font-weight:500; }
|
||||
.heavy-quality-results { display:grid; gap:6px; margin-top:12px; }
|
||||
.heavy-result-row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:7px 10px; border-radius:10px; background:rgba(120,140,140,.08); font-size:12px; }
|
||||
.heavy-result-row strong { flex:none; }
|
||||
.heavy-result-row span { text-align:right; color:var(--muted); }
|
||||
.primary-control-zone {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
@@ -1025,6 +1079,37 @@ body[data-app-state="link_degraded"] button[data-open="motors-modal"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.console-modal {
|
||||
width: min(1040px, calc(100vw - 64px));
|
||||
max-width: 1040px;
|
||||
}
|
||||
.console-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; min-width:0; }
|
||||
.console-split section { min-width:0; }
|
||||
.console-split header { display:flex; align-items:center; gap:7px; margin:0 2px 7px; }
|
||||
.console-split header i { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
|
||||
.console-split header .rx-dot { background:#79c8eb; }
|
||||
.console-split header .tx-dot { background:#bce96c; }
|
||||
.console-split header span { color:#303836; font-size:12px; font-weight:600; }
|
||||
.console-split header small { margin-left:auto; color:#7d8683; font-size:10px; }
|
||||
.console-split pre {
|
||||
height: min(55vh, 480px);
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
overflow: auto;
|
||||
border: 1px solid #d9ddda;
|
||||
border-radius: 12px;
|
||||
background: #171b1d;
|
||||
color: #dce4e1;
|
||||
font: 11px/1.45 Consolas, "SFMono-Regular", monospace;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
user-select: text;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.console-split { grid-template-columns:1fr; }
|
||||
.console-split pre { height:220px; }
|
||||
}
|
||||
|
||||
/* A pending or unknown armed state must stay legible, even without a link. */
|
||||
#engage.danger:disabled, #engage.pending:disabled { opacity:1 !important; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -1131,3 +1216,85 @@ body:not([data-controls-enabled="true"]) .controls-grid { opacity:.65; }
|
||||
.telemetry-zone { gap:12px; }
|
||||
.activity-history { gap:4px; }
|
||||
}
|
||||
|
||||
/* Settings windows: readable fields, predictable spacing, one action hierarchy. */
|
||||
.modal {
|
||||
color-scheme: light;
|
||||
width: min(560px, calc(100vw - 32px));
|
||||
max-height: calc(100dvh - 32px);
|
||||
padding: 28px;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
border: 1px solid #dedfdf;
|
||||
border-radius: 20px;
|
||||
background: #f6f6f6;
|
||||
box-shadow: 0 24px 80px rgba(0,0,0,.24);
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.modal[open] { animation: dialog-in .16s ease-out; }
|
||||
.modal.closing { animation: dialog-out .12s ease-in forwards; }
|
||||
.modal::backdrop { background: rgba(15,19,22,.4); backdrop-filter: blur(3px); }
|
||||
.modal > small { display:block; color:#73787b; font-size:12px; font-weight:400; margin:0 42px 6px 0; }
|
||||
.modal h2 { margin:0 40px 18px 0; font-size:28px; letter-spacing:-.025em; font-weight:400; }
|
||||
.modal h3 { margin:0 0 10px; font-size:14px; font-weight:500; color:#454b4e; }
|
||||
.modal .note { font-size:13px; line-height:1.5; margin:8px 0 0; color:#676e71; }
|
||||
.modal-close { top:16px; right:16px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#e9ebec; color:#555c60; font-size:25px; line-height:1; }
|
||||
.modal-close:hover { background:#dfe3e5; }
|
||||
.settings-section { margin-top:22px; }
|
||||
.settings-section + .settings-section { border-top:1px solid #e0e3e4; padding-top:20px; }
|
||||
.modal .form-grid { gap:16px; margin-top:10px; }
|
||||
.modal .form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
.modal label { min-width:0; font-size:13px; line-height:1.35; font-weight:400; color:#50585c; }
|
||||
.modal label > span { display:block; margin-bottom:7px; }
|
||||
.modal input,.modal select { width:100%; min-width:0; height:42px; padding:0 13px; border:1px solid #d7dcde; border-radius:999px; background:#fff; color:#272c2f; font-size:14px; font-weight:400; }
|
||||
.modal select { padding-right:28px; }
|
||||
.modal :is(button,input,select,summary,pre):focus-visible { outline:2px solid #6598b5; outline-offset:3px; }
|
||||
.modal .number-pill { height:42px; grid-template-columns:36px minmax(0,1fr) 36px; background:#fff; border:1px solid #d7dcde; }
|
||||
.modal .number-pill button { width:36px; height:40px; font-size:24px; color:#5b666b; }
|
||||
.modal .number-pill input { border:0; padding:0; height:40px; appearance:textfield; -moz-appearance:textfield; }
|
||||
.modal .number-pill input::-webkit-inner-spin-button { appearance:none; }
|
||||
.modal .number-pill:focus-within { border-color:#6598b5; }
|
||||
.custom-port-label { display:block; margin-top:16px; }
|
||||
.custom-port-row { display:flex; gap:8px; }
|
||||
.custom-port-row input { flex:1; }
|
||||
.modal .button { min-height:42px; height:auto; padding:10px 18px; font-size:14px; font-weight:400; border-radius:999px; white-space:normal; }
|
||||
.modal .button.subtle { background:#e9ebec; border:0; color:#424b50; }
|
||||
.modal .modal-primary { background:#333e44; color:#fff; border:0; }
|
||||
.modal .modal-primary:hover { background:#455660; }
|
||||
.modal .modal-actions { margin-top:24px; gap:10px; align-items:center; }
|
||||
.modal .form-feedback { margin:16px 0 0; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.5; color:#9b392e; background:#f5e6e3; }
|
||||
.modal [hidden] { display:none !important; }
|
||||
.modal [data-busy="true"] { cursor:progress; }
|
||||
.motor-modal { width:min(650px,calc(100vw - 32px)); }
|
||||
.modal .motor-head,.modal .motor-row { grid-template-columns:78px minmax(100px,1fr) 94px 86px; font-size:13px; gap:10px; padding:10px 0; }
|
||||
.modal .motor-head { margin-top:18px; color:#727b80; font-size:12px; font-weight:400; }
|
||||
.motor-row strong { font-size:12px; font-weight:500; }
|
||||
.motor-row > span { font-size:12px; color:#727b80; }
|
||||
.modal .motor-row .button { min-height:36px; font-size:12px; padding:8px 12px; }
|
||||
.motor-other { margin-top:16px; }
|
||||
.motor-other summary { cursor:pointer; padding:12px 0; color:#697278; font-size:13px; }
|
||||
.quality-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
|
||||
.quality-summary div { border-radius:14px; background:#e9ebec; padding:14px 12px; min-width:0; }
|
||||
.quality-summary span { display:block; font-size:12px; color:#697278; margin-bottom:8px; }
|
||||
.quality-summary strong { font-size:20px; font-weight:400; font-variant-numeric:tabular-nums; }
|
||||
.modal .heavy-quality-status { padding:12px; background:#e9ebec; border-radius:12px; font-size:14px; margin-top:14px; }
|
||||
.modal .heavy-result-row { font-size:13px; padding:10px 12px; font-variant-numeric:tabular-nums; }
|
||||
.console-modal { width:min(1020px,calc(100vw - 32px)); }
|
||||
.console-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
|
||||
.console-toolbar .note { margin:0; }
|
||||
.modal .console-split header small { font-size:12px; }
|
||||
.modal .console-split pre { height:clamp(180px,48vh,430px); padding:14px; font-size:12px; line-height:1.55; border-radius:12px; }
|
||||
@keyframes dialog-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
|
||||
@keyframes dialog-out { to { opacity:0; transform:translateY(5px); } }
|
||||
@media (max-width:520px) {
|
||||
.modal { padding:22px 18px; }
|
||||
.modal .form-grid.two { grid-template-columns:1fr; }
|
||||
.modal .motor-head,.modal .motor-row { grid-template-columns:56px minmax(80px,1fr) 74px 66px; gap:5px; font-size:12px; }
|
||||
.modal .motor-row .button { padding:8px 6px; }
|
||||
.quality-summary { gap:6px; }
|
||||
.quality-summary div { padding:12px 8px; }
|
||||
.quality-summary strong { font-size:17px; }
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce) {
|
||||
.modal[open],.modal.closing { animation:none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user