1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Waybar redesign — dupre instrument console</title>
<style>
:root{
--ground:#151311; --panel:#100f0f; --well:#0a0c0d; --raise:#1a1917;
--gold:#dab53d; --gold-hi:#ffd75f; --silver:#bfc4d0; --cream:#f3e7c5;
--steel:#969385; --dim:#7c838a; --slate:#424f5e; --slate-hi:#54677d;
--wash:#2c2f32; --pass:#74932f; --fail:#cb6b4d;
--mono:"BerkeleyMono Nerd Font","Berkeley Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground)}
body{font-family:var(--mono);color:var(--silver);padding:2.4rem 2rem 5rem;line-height:1.45;
background:radial-gradient(1200px 600px at 70% -10%,#1c1915 0%,transparent 60%),var(--ground)}
.wrap{max-width:1400px;margin:0 auto}
.eyebrow{color:var(--steel);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase}
h1{color:var(--gold);font-size:1.5rem;margin:.35rem 0 .4rem}
.masthead p{color:var(--dim);font-size:.86rem;max-width:88ch}
.masthead p b{color:var(--silver);font-weight:700}
/* each variation sits on a "desk" — a strip of desktop so the bar reads as a
real top bar floating over a window, exactly how it looks on-screen */
.desk{margin:1.9rem 0 0;border-radius:14px;overflow:hidden;
border:1px solid #211e1a;
background:
linear-gradient(180deg,#0e0d0c 0 62px,transparent 62px),
repeating-linear-gradient(135deg,#191613 0 14px,#171512 14px 28px);
position:relative}
.desk-label{display:flex;align-items:baseline;gap:.7rem;padding:.5rem .2rem .1rem}
.desk-label .n{color:var(--gold);font-size:.82rem;letter-spacing:.08em}
.desk-label .d{color:var(--dim);font-size:.76rem}
.desk-window{position:absolute;inset:70px 26px 22px;border:1px solid #262320;border-radius:10px;
background:linear-gradient(180deg,#131110,#0e0d0c);opacity:.6}
.desk-window::before{content:"emacs — instrument-console.el";position:absolute;top:8px;left:14px;
color:#3a3630;font-size:.72rem}
/* the bar frame: matches waybar's -54 top strip. two clusters, gold-bordered,
floating with a gap between them (modules-center is empty in the real config) */
.bar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;
gap:1rem;padding:10px 12px;height:132px}
.cluster{display:flex;align-items:center;gap:2px;
background:var(--panel);border:1.4px solid var(--gold);border-radius:15px;
padding:2px 9px;box-shadow:0 4px 9px rgba(0,0,0,.5)}
.mod{display:flex;align-items:center;gap:7px;color:var(--silver);
padding:7px 9px;border-radius:11px;font-size:14px;cursor:default;white-space:nowrap;position:relative}
.mod .g{font-size:16px;line-height:1}
.mod .g.xl{font-size:19px}
.mod:hover{background:var(--wash)}
.val{font-variant-numeric:tabular-nums}
.cream{color:var(--cream)}.gold{color:var(--gold)}.dim{color:var(--dim)}
.fail{color:var(--fail)}.pass{color:var(--pass)}.steel{color:var(--steel)}
/* workspaces — circular tokens like the real ws-icons */
.ws{display:flex;gap:5px;padding:0 3px}
.ws b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;
color:var(--silver);border:1.4px solid var(--slate);background:#141210}
.ws b.on{color:var(--panel);background:var(--gold);border-color:var(--gold);font-weight:700;
box-shadow:0 0 8px 1px rgba(218,181,61,.4)}
.ws b.busy{border-color:var(--steel);color:var(--cream)}
.menu{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--gold);
font-size:17px;background:linear-gradient(180deg,#211e19,#151210);border:1px solid #33302b}
.title{color:var(--dim);font-size:13px;max-width:230px;overflow:hidden;text-overflow:ellipsis}
/* collapse arrows — recessed dim wells, per the current design */
.arrow{color:var(--dim);font-size:12px;background:rgba(0,0,0,.35);
box-shadow:inset 0 1px 2px rgba(0,0,0,.7);border-radius:7px;padding:8px 7px}
/* lamp — the panel's signature status dot, glow and all */
.lamp{width:8px;height:8px;border-radius:50%;background:var(--pass);flex:0 0 auto;
box-shadow:0 0 6px 1px rgba(116,147,47,.55)}
.lamp.gold{background:var(--gold);box-shadow:0 0 6px 1px rgba(218,181,61,.6)}
.lamp.red{background:var(--fail);box-shadow:0 0 6px 1px rgba(203,107,77,.55)}
.lamp.off{background:var(--wash);box-shadow:none}
/* engraved hairline divider between functional groups (echoes .engrave rules) */
.sep{width:1px;align-self:stretch;margin:6px 3px;
background:linear-gradient(180deg,transparent,var(--wash) 22%,var(--wash) 78%,transparent)}
.notes{margin-top:2.4rem;display:flex;gap:2rem;flex-wrap:wrap}
.note{flex:1 1 300px;min-width:280px}
.note h3{color:var(--steel);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 .5rem}
.note ul{list-style:none}
.note li{font-size:.82rem;padding:.24rem 0 .24rem 1.1rem;position:relative;color:var(--silver)}
.note li::before{content:"·";color:var(--gold);position:absolute;left:.25rem}
.note li b{color:var(--cream);font-weight:700}
.note li em{color:var(--dim);font-style:normal}
.rec{border:1px dashed var(--wash);border-radius:10px;padding:.9rem 1.1rem;margin-top:1.1rem;
font-size:.83rem;color:var(--silver)}
.rec b{color:var(--gold)}
/* ============ V1 · FACEPLATE ============ */
/* machined faceplate: vertical gradient + a 1px top highlight + deeper shadow.
otherwise the current layout — lowest-risk, faithful to GTK CSS. */
.v1 .cluster{background:linear-gradient(180deg,var(--raise),var(--panel));
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 14px rgba(0,0,0,.55)}
.v1 .val.clock{color:var(--cream)}
/* ============ V2 · INSTRUMENT SEGMENTS ============ */
/* each functional group is its own recessed sub-faceplate with an engraved unit
label underneath, lamps on status modules, gold-hi active values */
.v2 .cluster{background:linear-gradient(180deg,var(--raise),var(--panel));padding:3px 6px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 14px rgba(0,0,0,.55)}
.v2 .seg{display:flex;flex-direction:column;align-items:center;gap:2px;
background:var(--well);border:1px solid #232019;border-radius:10px;padding:3px 5px 2px;margin:0 2px}
.v2 .seg .row{display:flex;align-items:center;gap:6px}
.v2 .seg .unit{color:var(--steel);font-size:.52rem;letter-spacing:.24em;text-transform:uppercase}
.v2 .mod{padding:5px 7px}
.v2 .mod:hover{background:var(--wash)}
.v2 .menu{background:linear-gradient(180deg,#2a251d,#161310);border-color:var(--gold)}
/* mini gauge for sysmon — a squat needle echoing the panel meters */
.gauge{width:26px;height:15px;position:relative;overflow:hidden}
.gauge .arc{position:absolute;inset:0 0 -26px 0;border:1.5px solid var(--wash);border-radius:50%}
.gauge .ndl{position:absolute;left:50%;bottom:0;width:1.5px;height:13px;background:var(--gold-hi);
transform-origin:50% 100%;transform:rotate(18deg);border-radius:1px;
box-shadow:0 0 4px rgba(255,215,95,.5)}
.gauge .hub{position:absolute;left:50%;bottom:-2px;width:5px;height:5px;margin-left:-2.5px;
border-radius:50%;background:var(--gold)}
/* ============ V3 · FULL CONSOLE ============ */
/* every module a recessed well with a lamp; console-key toggles with full
physical-key gradient + inset; sysmon as twin analog gauges; cream clock */
.v3 .cluster{background:linear-gradient(180deg,#0d0c0b,#080807);border-width:1.8px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.6);padding:3px 8px}
.v3 .mod{background:var(--well);border:1px solid #201d17;border-radius:9px;margin:0 2px;padding:6px 9px}
.v3 .mod:hover{background:#141210;border-color:var(--slate)}
/* console-key toggles — the physical key from the panels' .c-btn */
.v3 .key{background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;
border-bottom-color:#0c0b0a;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 3px rgba(0,0,0,.4)}
.v3 .key.engaged{color:var(--gold);border-color:var(--gold)}
.v3 .key.off{color:var(--fail)}
.v3 .menu{background:linear-gradient(180deg,#2a251d,#141110);border:1px solid var(--gold);
box-shadow:0 0 8px rgba(218,181,61,.25)}
.v3 .ws b{background:var(--well);border-color:#201d17}
.v3 .ws b.on{background:var(--gold);border-color:var(--gold)}
.v3 .val.clock{color:var(--cream);font-weight:700}
.v3 .tz{color:var(--steel);font-size:.55rem;letter-spacing:.2em}
.v3 .twin{display:flex;gap:6px}
.v3 .gauge2{width:22px;height:14px;position:relative;overflow:hidden}
.v3 .gauge2 .arc{position:absolute;inset:0 0 -22px 0;border:1.5px solid var(--wash);border-radius:50%}
.v3 .gauge2 .ndl{position:absolute;left:50%;bottom:0;width:1.5px;height:12px;transform-origin:50% 100%;
border-radius:1px;background:var(--gold-hi);box-shadow:0 0 4px rgba(255,215,95,.5)}
.v3 .gauge2 .ndl.warn{background:var(--gold)}
.v3 .gauge2 .hub{position:absolute;left:50%;bottom:-2px;width:4px;height:4px;margin-left:-2px;
border-radius:50%;background:var(--gold)}
</style>
</head>
<body>
<div class="wrap">
<header class="masthead">
<div class="eyebrow">archsetup · dupre panel family · waybar</div>
<h1>Waybar — three ways to spruce it</h1>
<p>The bar already runs the dupre palette and a gold border. These three push it toward the
<b>instrument-console faceplate</b> language of the net + bluetooth panels — machined
gradient plates, engraved unit labels, glowing status lamps, physical console keys, analog
gauges — dialing the intensity up from left-touch to full console. Same real module set in
each so you're comparing <b>treatment, not content</b>. All three stay inside what GTK3 CSS
(waybar's engine) can actually render.</p>
</header>
<!-- ============ CURRENT (reference) ============ -->
<div class="desk">
<div class="bar" style="padding-top:14px">
<div class="cluster">
<span class="menu"></span>
<span class="ws"><b class="on">1</b><b class="busy">2</b><b>3</b></span>
<span class="mod"><span class="g"></span></span>
<span class="title">instrument-console.el</span>
<span class="mod arrow"></span>
</div>
<div class="cluster">
<span class="mod arrow"></span>
<span class="mod"><span class="g gold"></span></span>
<span class="mod"><span class="g xl"></span></span>
<span class="mod"><span class="g xl"></span> <span class="val">62%</span></span>
<span class="mod"><span class="g"></span></span>
<span class="mod"><span class="g"></span></span>
<span class="mod"><span class="g"></span></span>
<span class="mod"><span class="g"></span></span>
<span class="mod"><span class="g"></span> <span class="val">8%</span></span>
<span class="mod"><span class="g"></span> <span class="val">24:10</span></span>
<span class="mod"><span class="g"></span> <span class="val">Fri Jul 3</span></span>
</div>
</div>
<div class="desk-window"></div>
</div>
<div class="desk-label"><span class="n">current</span><span class="d">— flat pills, colour-only states. the baseline these three build on.</span></div>
<!-- ============ V1 · FACEPLATE ============ -->
<div class="desk v1">
<div class="bar" style="padding-top:14px">
<div class="cluster">
<span class="menu"></span>
<span class="ws"><b class="on">1</b><b class="busy">2</b><b>3</b></span>
<span class="sep"></span>
<span class="mod"><span class="g"></span></span>
<span class="title">instrument-console.el</span>
<span class="mod arrow"></span>
</div>
<div class="cluster">
<span class="mod arrow"></span>
<span class="mod"><span class="lamp gold"></span><span class="g gold"></span></span>
<span class="sep"></span>
<span class="mod"><span class="g xl"></span></span>
<span class="mod"><span class="g xl"></span> <span class="val cream">62%</span></span>
<span class="sep"></span>
<span class="mod"><span class="g"></span></span>
<span class="mod"><span class="g"></span></span>
<span class="mod"><span class="g gold"></span></span>
<span class="mod"><span class="lamp"></span><span class="g"></span></span>
<span class="sep"></span>
<span class="mod"><span class="g"></span> <span class="val">8%</span></span>
<span class="mod"><span class="g gold"></span> <span class="val gold">24:10</span></span>
<span class="sep"></span>
<span class="mod"><span class="g dim"></span> <span class="val clock">Fri Jul 3</span></span>
</div>
</div>
<div class="desk-window"></div>
</div>
<div class="desk-label"><span class="n">variation 1 · faceplate</span><span class="d">— machined gradient + top highlight, engraved hairline dividers, status lamps on net/bt, cream clock. Nearest to today; drop-in GTK CSS.</span></div>
<!-- ============ V2 · INSTRUMENT SEGMENTS ============ -->
<div class="desk v2">
<div class="bar" style="padding-top:12px">
<div class="cluster">
<span class="menu"></span>
<span class="seg"><span class="row ws"><b class="on">1</b><b class="busy">2</b><b>3</b></span><span class="unit">wksp</span></span>
<span class="seg"><span class="row"><span class="g"></span><span class="title" style="max-width:180px">instrument-console.el</span></span><span class="unit">layout · window</span></span>
<span class="mod arrow"></span>
</div>
<div class="cluster">
<span class="mod arrow"></span>
<span class="seg"><span class="row"><span class="lamp gold"></span><span class="g gold"></span><span class="gold">CAPTIVE</span></span><span class="unit">net</span></span>
<span class="seg"><span class="row"><span class="g xl"></span><span class="g xl"></span><span class="val cream">62%</span></span><span class="unit">sound</span></span>
<span class="seg"><span class="row"><span class="g"></span><span class="g"></span><span class="g gold"></span></span><span class="unit">toggles</span></span>
<span class="seg"><span class="row"><span class="lamp"></span><span class="g"></span><span class="dim">M650</span></span><span class="unit">bt</span></span>
<span class="seg"><span class="row"><span class="gauge"><span class="arc"></span><span class="ndl"></span><span class="hub"></span></span><span class="val">8%</span></span><span class="unit">cpu</span></span>
<span class="seg"><span class="row"><span class="g gold"></span><span class="val gold">24:10</span></span><span class="unit">timer</span></span>
<span class="seg"><span class="row"><span class="val cream">Fri Jul 3</span><span class="val">11:23</span></span><span class="unit">clock</span></span>
</div>
</div>
<div class="desk-window"></div>
</div>
<div class="desk-label"><span class="n">variation 2 · instrument segments</span><span class="d">— each group a recessed sub-plate with an engraved unit label; a squat needle gauge for cpu. Reads like a row of instruments. Taller; label row costs a few px.</span></div>
<!-- ============ V3 · FULL CONSOLE ============ -->
<div class="desk v3">
<div class="bar" style="padding-top:12px">
<div class="cluster">
<span class="menu"></span>
<span class="ws"><b class="on">1</b><b class="busy">2</b><b>3</b></span>
<span class="sep"></span>
<span class="mod key"><span class="g"></span></span>
<span class="title">instrument-console.el</span>
<span class="mod arrow"></span>
</div>
<div class="cluster">
<span class="mod arrow"></span>
<span class="mod"><span class="lamp gold"></span><span class="g gold"></span> <span class="gold">CAPTIVE</span></span>
<span class="sep"></span>
<span class="mod key"><span class="g xl"></span></span>
<span class="mod"><span class="g xl"></span> <span class="val cream">62%</span></span>
<span class="sep"></span>
<span class="mod key engaged"><span class="g"></span></span>
<span class="mod key"><span class="g"></span></span>
<span class="mod key engaged"><span class="g"></span></span>
<span class="mod"><span class="lamp"></span><span class="g"></span> <span class="dim val">72%</span></span>
<span class="sep"></span>
<span class="mod"><span class="twin">
<span class="gauge2"><span class="arc"></span><span class="ndl"></span><span class="hub"></span></span>
<span class="gauge2"><span class="arc"></span><span class="ndl warn" style="transform:rotate(38deg)"></span><span class="hub"></span></span>
</span></span>
<span class="mod key"><span class="g gold"></span> <span class="val gold">24:10</span></span>
<span class="sep"></span>
<span class="mod"><span class="g dim"></span> <span class="val clock">Fri Jul 3</span> <span class="val clock">11:23</span><span class="tz"> EDT</span></span>
</div>
</div>
<div class="desk-window"></div>
</div>
<div class="desk-label"><span class="n">variation 3 · full console</span><span class="d">— every module a recessed well, physical console keys for toggles (gold when engaged, terracotta when off), twin cpu/mem gauges, cream tabular clock with engraved TZ. Furthest from today; closest to the panels.</span></div>
<!-- ============ NOTES ============ -->
<div class="notes">
<div class="note">
<h3>What carries over from the panels</h3>
<ul>
<li><b>Lamps</b> — the glowing status dot lands on net + bt so health reads at a glance, not just by glyph colour <em>(gold = captive/engaged, green = ok, red = fail, dim = off)</em>.</li>
<li><b>Machined faceplate</b> — the cluster gets the b-face vertical gradient + 1px top highlight + deeper shadow, so it looks milled rather than printed.</li>
<li><b>Engraved dividers</b> — hairline separators group the right cluster into net · sound · toggles · system · clock, echoing the panels' engraved section rules.</li>
<li><b>Console keys</b> — the toggles (touchpad, dim, caffeine) borrow .c-btn: gradient fill, inset highlight, gold border when engaged.</li>
<li><b>Gauges</b> — sysmon becomes a squat needle (or twin needles for cpu/mem), the same instrument the panels use for throughput and battery.</li>
<li><b>Cream + tabular</b> — the clock and live values shift to cream with tabular-nums, matching the panels' readouts.</li>
</ul>
</div>
<div class="note">
<h3>GTK3 translation caveats</h3>
<ul>
<li><b>Dividers</b> need real separator modules or per-module borders — waybar can't inject <em>::before</em> content between modules the way this HTML does.</li>
<li><b>Lamps</b> render as a small pango glyph (● with colour + text-shadow glow) prepended in each script, or a tiny bordered box widget — both are GTK-safe.</li>
<li><b>Gauges</b> are the real work: GTK CSS can't draw a rotating needle. Options — a Cairo/GTK drawing area in a custom module, or fake it with a unicode gauge glyph that steps by load band. V2's single gauge is cheaper than V3's twin.</li>
<li><b>V2's unit labels</b> raise the bar height (the label row). Fine at 54px reserved, but worth eyeballing against the -54 margin strip.</li>
<li>Gradients, inset box-shadow, border colour states, tabular-nums — all already proven in the current stylesheet.</li>
</ul>
</div>
<div class="note">
<h3>My read</h3>
<div class="rec">
<b>Variation 1 (faceplate)</b> is the one I'd ship first: it lands ~80% of the instrument-console feel — lamps, milled plates, engraved grouping, cream clock — for pure CSS plus a lamp glyph in the net/bt scripts. No custom drawing, no height risk.
<br><br>
<b>Variation 3</b> is the aspirational target once a gauge-drawing module exists (it'd also upgrade the sysmon popup). <b>Variation 2</b> is the middle path if you want the unit labels' legibility but not the full recessed-well density. They're not exclusive — 1 can grow into 3.
</div>
</div>
</div>
</div>
</body>
</html>
|
