Shared palette for the wizard and installer page
Warm grey text on near-black, amber #c28947, dark brown solid buttons. The wizard strip no longer labels LEDs before the LED count is known. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Jackson AndresandClaude Opus 5.5 committed
1 parent
87a0abca57
commit
5bc298375c
4 files changed
+2759
-2750
No files matched your search
+18
-16
@@ -61,11 +61,12 @@
|
||||
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
|
||||
@font-face{font-family:"IBM Plex Mono";font-weight:500 600;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
|
||||
:root{
|
||||
--bg:#0a0a0b; --panel:#0e0e10;
|
||||
--ink:#ece8df; --ink-2:rgba(236,232,223,.62); --ink-3:rgba(236,232,223,.36); --ink-4:rgba(236,232,223,.14);
|
||||
--line:rgba(236,232,223,.1); --line-2:rgba(236,232,223,.2);
|
||||
--warm:#ffb35a; --warm-2:#ffd6a0;
|
||||
--bad:#ff8a7a;
|
||||
--bg:#07090a; --panel:#0e0e10;
|
||||
--ink:#dfd8c9; --ink-2:rgba(223,216,201,.62); --ink-3:rgba(223,216,201,.36); --ink-4:rgba(223,216,201,.14);
|
||||
--line:rgba(223,216,201,.1); --line-2:rgba(223,216,201,.2);
|
||||
--warm:#c28947; --warm-2:#c2a37a;
|
||||
--fill:#2e281b; --fill-ink:#dddad6; --fill-hover:#3a3324; /* solid buttons, toast, progress */
|
||||
--bad:#c2695d;
|
||||
--sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
||||
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
|
||||
color-scheme:dark;
|
||||
@@ -104,7 +105,7 @@ button,input{font:inherit;color:inherit}
|
||||
.draw{position:relative;background:var(--panel);border-right:1px solid var(--line);overflow:hidden;
|
||||
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
|
||||
background-size:32px 32px;background-position:-1px -1px}
|
||||
.draw::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(10,10,11,.85) 100%);pointer-events:none}
|
||||
.draw::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(7,9,10,.85) 100%);pointer-events:none}
|
||||
.draw canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
|
||||
.draw .crop{position:absolute;width:14px;height:14px;border-color:var(--ink-3);border-style:solid;border-width:0;pointer-events:none}
|
||||
.crop.tl{left:12px;top:12px;border-left-width:1px;border-top-width:1px}
|
||||
@@ -136,7 +137,7 @@ button,input{font:inherit;color:inherit}
|
||||
.opt:hover b{color:var(--ink)}
|
||||
.opt.sel b{color:var(--ink)}
|
||||
.opt.sel svg{opacity:1;color:var(--ink)}
|
||||
.opt.sel i{background:var(--warm);border-color:var(--warm);box-shadow:0 0 10px rgba(255,179,90,.6)}
|
||||
.opt.sel i{background:var(--warm);border-color:var(--warm);box-shadow:0 0 10px rgba(194,137,71,.6)}
|
||||
.opt .val{font:13px/1 var(--mono);color:var(--ink-3)}
|
||||
.opt.sel .val{color:var(--warm-2)}
|
||||
|
||||
@@ -151,9 +152,9 @@ button,input{font:inherit;color:inherit}
|
||||
.num output small{font-size:11px;color:var(--ink-3);margin-left:3px}
|
||||
|
||||
/* buttons */
|
||||
.go{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;background:var(--ink);color:#111;
|
||||
.go{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;background:var(--fill);color:var(--fill-ink);
|
||||
padding:13px 18px;font:500 14px/1 var(--sans);letter-spacing:.01em;cursor:pointer;border-radius:3px}
|
||||
.go:hover{background:#fff}
|
||||
.go:hover{background:var(--fill-hover)}
|
||||
.go:disabled{background:var(--ink-4);color:var(--ink-3);cursor:default}
|
||||
.go.wide{width:100%;padding:16px}
|
||||
.go.rec{background:var(--warm);color:#1b1006}
|
||||
@@ -201,14 +202,14 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--bg);
|
||||
|
||||
/* footer */
|
||||
.bar{position:fixed;left:0;right:0;bottom:0;height:73px;display:flex;align-items:center;gap:14px;padding:0 20px env(safe-area-inset-bottom);
|
||||
border-top:1px solid var(--line);background:rgba(10,10,11,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:5}
|
||||
border-top:1px solid var(--line);background:rgba(7,9,10,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:5}
|
||||
.prog{flex:1;display:flex;flex-direction:column;gap:7px;align-items:center}
|
||||
.prog .count{font:11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3)}
|
||||
.prog .ticks{display:flex;gap:4px}
|
||||
.prog .ticks i{width:18px;height:2px;background:var(--ink-4)}
|
||||
.prog .ticks i.done{background:var(--ink-3)}
|
||||
.prog .ticks i.on{background:var(--ink)}
|
||||
.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,8px);opacity:0;background:var(--ink);color:#111;padding:10px 14px;
|
||||
.prog .ticks i.on{background:var(--fill)}
|
||||
.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,8px);opacity:0;background:var(--fill);color:var(--fill-ink);padding:10px 14px;
|
||||
font-size:13.5px;border-radius:3px;transition:.2s;pointer-events:none;z-index:9;white-space:nowrap}
|
||||
.toast.show{opacity:1;transform:translate(-50%,0)}
|
||||
|
||||
@@ -980,8 +981,8 @@ function ledAt(d, a) {
|
||||
}
|
||||
|
||||
// ---------- drawing ----------
|
||||
const ink = a => `rgba(236,232,223,${a})`;
|
||||
const WARM = a => `rgba(255,179,90,${a})`;
|
||||
const ink = a => `rgba(223,216,201,${a})`;
|
||||
const WARM = a => `rgba(194,137,71,${a})`;
|
||||
const MONO = (px, wt = 400) => `${wt} ${px}px "IBM Plex Mono", ui-monospace, monospace`;
|
||||
function fit(cv) {
|
||||
const r = cv.getBoundingClientRect(), dpr = window.devicePixelRatio || 1;
|
||||
@@ -1114,10 +1115,11 @@ function drawStrip(lit, marks) {
|
||||
const {ctx, w, h} = fit($('strip')), n = S.ledCount, cw = w / n, by = 6, bh = 10;
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
ctx.fillStyle = ink(.07); ctx.fillRect(0, by, w, bh);
|
||||
if (!n) return; // LED count not known yet: empty strip, no labels
|
||||
ctx.save(); ctx.shadowColor = WARM(.9); ctx.shadowBlur = 10;
|
||||
for (let i = 1; i <= n; i++) {
|
||||
const v = lit(i); if (v <= .004) continue;
|
||||
ctx.fillStyle = `rgba(255,${200 + 30 * v | 0},${140 + 60 * v | 0},${v})`;
|
||||
ctx.fillStyle = `rgba(194,${137 + 26 * v | 0},${71 + 51 * v | 0},${v})`; // --warm to --warm-2
|
||||
ctx.fillRect((i - 1) * cw, by, Math.max(cw - (cw > 3 ? 1 : 0), 1), bh);
|
||||
}
|
||||
ctx.restore();
|
||||
@@ -1673,7 +1675,7 @@ function frame(now) {
|
||||
const d0 = clamp(g.center - g.half, dB, dT), d1 = clamp(g.center + g.half, dB, dT), pts2 = [];
|
||||
for (let d = d0; d <= d1; d += 25) pts2.push(wallPoint(tp, mapAlong(d, rp.feats, tp.feats)));
|
||||
ctx.save(); ctx.lineCap = 'round'; ctx.lineJoin = 'round';
|
||||
ctx.shadowColor = WARM(g.alpha); ctx.shadowBlur = 22; ctx.strokeStyle = `rgba(255,214,160,${g.alpha})`; ctx.lineWidth = 4;
|
||||
ctx.shadowColor = WARM(g.alpha); ctx.shadowBlur = 22; ctx.strokeStyle = `rgba(194,163,122,${g.alpha})`; ctx.lineWidth = 4;
|
||||
polyline(ctx, V, pts2); ctx.stroke(); ctx.restore();
|
||||
}
|
||||
const a = anchors(rp, true);
|
||||
|
||||
Reference in new issue
Block a user