stsL/argo
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

UI improvements, and control softening

Browse Source
This commit is contained in:
PitresAli
2026-08-27 20:11:37 +02:00
parent 84ec93543b
commit 73c20a0ff2
14 changed files with 374 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SUB Control/web/styles.css
+26 -10
View File
@@ -1,5 +1,19 @@
/* SUB Control UI – Desktop Layout */
/* Isolated pointer lighting: no layout or input interception. */
.controls-workspace { position:relative; isolation:isolate; }
.workspace-light { position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:0; background:radial-gradient(600px circle at var(--light-x) var(--light-y),rgba(255,255,255,.35),transparent 75%); transition:opacity .35s ease-out; }
.workspace-light.lit { opacity:1; }
.light-surface { position:relative; }
.cursor-light { position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; }
.cursor-light::before,.cursor-light::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease-out; }
.cursor-light.pill-light::before { background:radial-gradient(240px circle at var(--light-x) var(--light-y),rgba(110,190,235,.08),transparent 80%); }
.cursor-light::after { padding:1px; background:linear-gradient(var(--light-angle,315deg),transparent 30%,rgba(255,255,255,.13) 65%,rgba(255,255,255,.50) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.cursor-light.lit::before,.cursor-light.near::after { opacity:1; }
.joystick > .cursor-light { inset:7%; border-radius:50%; }
#engage > .cursor-light::after { display:none; }
@media (prefers-reduced-motion:reduce) { .workspace-light,.cursor-light::before,.cursor-light::after { transition:none; } }
:root {
color-scheme: dark;
--bg: #0c1012;
@@ -14,7 +28,7 @@
--amber: #f2c675;
--red: #f0958b;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
@@ -1039,7 +1053,7 @@ body #connect, body #connect:hover, body #connect.is-connected, body #connect.is
}
body #connect .btn-label { animation:none; }
.telemetry-zone { gap:20px; }
.rov-stage { height:clamp(180px,32vh,250px); min-height:180px; touch-action:none; }
.rov-stage { flex:1; height:auto; min-height:0; width:100%; touch-action:none; border-radius:31px; overflow:hidden; background:transparent; }
.model-card { justify-content:flex-start; }
.rov-stage::before { display:none; }
.model-tools button { font-size:12px; padding:7px 11px; }
@@ -1052,24 +1066,25 @@ body #connect .btn-label { animation:none; }
.activity-history li { font-size:12px; font-weight:300; line-height:1.25; color:#999; overflow-wrap:anywhere; }
.activity-history #status-text { color:#fff; font-size:12px; font-weight:300; }
.activity-history li[hidden] { display:none; }
.controls-workspace { padding:8px 20px 16px; background:#f6f6f6; }
.controls-workspace { padding:8px 20px 16px; background:#ededed; }
.primary-control-zone { grid-template-rows:120px minmax(0,1fr) 52px; }
.engage-header-zone { display:block; position:relative; height:120px; min-height:0; margin:0; padding:0; }
body #engage { width:calc(100% + 40px); margin-left:-20px; height:104px; padding:0 20px; border:0; border-radius:0; background:transparent; box-shadow:none; }
body #engage:hover, body #engage.pending, body #engage.danger { background:transparent; border:0; }
#engage::before, #engage::after { display:none; }
body #engage { align-items:flex-end; padding-bottom:12px; }
.engage-face > span { font-family:"Segoe UI Variable Display","Segoe UI",Arial,sans-serif; font-size:clamp(64px,7.3vw,90px); font-weight:200; letter-spacing:.015em; line-height:1; padding-bottom:.22em; margin-bottom:-.22em; }
.engage-face > span { font-family:inherit; font-size:clamp(64px,7.3vw,90px); font-weight:200; letter-spacing:.015em; line-height:1; padding-bottom:.22em; margin-bottom:-.22em; }
#engage { --engage-green:#4cce73; --engage-glow:drop-shadow(0 0 2px rgba(76,206,115,.3)); }
#engage .engage-label { color:#777; background:none; animation:none; }
.engage-sheen-label { color:#fff; pointer-events:none; opacity:0; mask-image:linear-gradient(105deg,transparent 40%,#000 49%,#000 51%,transparent 60%); mask-size:300% 100%; mask-repeat:no-repeat; -webkit-mask-image:linear-gradient(105deg,transparent 40%,#000 49%,#000 51%,transparent 60%); -webkit-mask-size:300% 100%; -webkit-mask-repeat:no-repeat; }
#engage:is(.arm,.danger):not(:disabled):not(.charging):not(.canceling):not(.state-transition) .engage-sheen-label { opacity:1; animation:engage-sweep 2.2s linear infinite; }
@keyframes engage-sweep { from {mask-position:100% 0;-webkit-mask-position:100% 0} to {mask-position:0% 0;-webkit-mask-position:0% 0} }
.engage-progress-label { color:#4cce73; clip-path:none; filter:drop-shadow(0 0 2px rgba(76,206,115,.3)); mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); -webkit-mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); }
.engage-progress-label { color:var(--engage-green); clip-path:none; filter:var(--engage-glow); mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); -webkit-mask-image:linear-gradient(to right,#000 calc(var(--engage-progress) - 8%),transparent var(--engage-progress)); }
#engage.charged .engage-progress-label { mask-image:none; -webkit-mask-image:none; }
#engage.pending .engage-label { color:#5a8753; background:none; }
#engage.danger .engage-label { color:#171717; }
#engage.pending .engage-label { color:var(--engage-green); filter:var(--engage-glow); background:none; }
#engage.danger .engage-label { color:#777; }
#engage:focus-visible { outline:2px solid #8d9991; outline-offset:-6px; }
.control-status { position:absolute; z-index:2; top:100%; left:0; right:0; margin:0; min-height:0; text-align:center; font-size:12px; max-height:48px; overflow:auto; background:#f6f6f6; }
.control-status { position:absolute; z-index:2; top:100%; left:0; right:0; margin:0; min-height:0; text-align:center; font-size:12px; max-height:48px; overflow:auto; background:transparent; }
.control-status[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) {
.engage-sheen-label { display:none; }
@@ -1094,10 +1109,11 @@ body #engage { align-items:flex-end; padding-bottom:12px; }
.heave-fill { left:22px; right:22px; background:#999; }
.control-toolbar { display:flex; justify-content:center; align-items:center; gap:16px; padding-top:12px; }
.control-toolbar .output-limit { width:auto; flex-direction:row; align-items:center; font-size:13px; gap:12px; color:#777; }
.control-toolbar .output-limit span { flex:0 0 128px; width:128px; gap:8px; align-items:baseline; justify-content:space-between; }
.control-toolbar .output-limit > span { flex:0 0 128px; width:128px; gap:8px; align-items:baseline; justify-content:space-between; }
.control-toolbar .output-limit b { display:inline-block; flex:0 0 4ch; width:4ch; text-align:right; color:#333; font-variant-numeric:tabular-nums; }
.control-toolbar .range-pill { width:175px; grid-template-columns:28px 1fr 28px; height:40px; background:#e7e7e7; border:0; }
.control-toolbar .range-pill button { width:28px; height:40px; color:#666; font-size:22px; }
.control-toolbar .range-pill button { width:28px; height:40px; padding:0; display:grid; place-items:center; color:#666; line-height:1; }
.control-toolbar .range-pill button svg { width:24px; height:24px; display:block; }
.control-toolbar .range-pill input[type="range"] { background:#c4c4c4; height:20px; background-clip:content-box; padding:8px 0; }
.control-toolbar .range-pill input[type="range"]::-webkit-slider-thumb { width:18px; height:18px; background:#858585; }
.control-toolbar .config-btn { width:auto; height:40px; padding:0 18px; font-size:13px; background:#e7e7e7; color:#444; border:0; border-radius:999px; }