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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PTT waybar indicator — prototype</title>
<style>
:root{
--ground:#151311; --panel:#100f0f; --bar:#0d0c0b; --well:#0a0c0d; --raise:#1a1917;
--gold:#dab53d; --gold-hi:#ffd75f; --silver:#bfc4d0; --cream:#f3e7c5;
--steel:#969385; --dim:#7c838a; --wash:#2c2f32; --pass:#74932f; --fail:#cb6b4d;
--mono:"BerkeleyMono Nerd Font","Berkeley Mono","JetBrainsMono Nerd Font",monospace;
}
*{box-sizing:border-box}
body{font-family:var(--mono);color:var(--silver);margin:0;padding:2.6rem 2rem 5rem;line-height:1.5;
background:radial-gradient(1200px 600px at 70% -10%,#1c1915 0%,transparent 60%),var(--ground)}
h1{font-size:1.05rem;letter-spacing:.02em;color:var(--cream);font-weight:700;margin:0 0 .3rem}
.sub{color:var(--dim);font-size:.82rem;margin:0 0 2rem;max-width:60ch}
h2{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);
margin:2.2rem 0 .8rem;display:flex;align-items:center;gap:10px}
h2::after{content:"";height:1px;background:var(--wash);flex:1}
/* a slice of the real waybar: dark rounded bar, right-aligned modules */
.bar{display:inline-flex;align-items:center;gap:2px;background:var(--bar);
border:1px solid #201d17;border-radius:10px;padding:5px 8px;
box-shadow:0 2px 10px rgba(0,0,0,.45)}
.mod{display:flex;align-items:center;gap:7px;padding:4px 9px;border-radius:7px;color:var(--silver);
font-size:14px}
.mod .g{font-size:17px;line-height:1}
.mod.muted .g{color:var(--fail)}
.mod.live .g{color:var(--silver)}
.sep{width:1px;height:16px;background:#26231d;margin:0 2px}
.neighbor{color:var(--dim);font-size:13px;padding:4px 8px}
/* the PTT tag — outline only, ALWAYS present (so the bar never reflows), and
click-to-toggle. Off = barely-visible grey; on = glowing gold; transmitting
= brighter gold. Like the gallery 2.4G ghost tag, lit when engaged. */
.badge{font-size:15px;line-height:1;border-radius:4px;padding:3px 7px;
background:transparent;border:1px solid #2a2723;color:#54585c;
text-shadow:none;box-shadow:none;cursor:pointer;transition:all .15s ease}
.badge.txt{font-size:.62rem;letter-spacing:.18em;font-weight:700;padding:2px 7px}
.badge.on{color:var(--gold);border-color:var(--gold);
text-shadow:0 0 6px rgba(218,181,61,.75);
box-shadow:0 0 6px rgba(218,181,61,.28),inset 0 0 5px rgba(218,181,61,.15)}
.badge.talk{color:var(--gold-hi);border-color:var(--gold-hi);
text-shadow:0 0 10px rgba(255,215,95,.95);
box-shadow:0 0 11px rgba(255,215,95,.5),inset 0 0 6px rgba(255,215,95,.2)}
.badge.ghost{border-color:var(--wash);color:var(--dim)}
.row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:10px 0}
.label{width:16rem;color:var(--dim);font-size:.8rem}
.label b{color:var(--cream);font-weight:700}
.note{color:var(--dim);font-size:.78rem;margin:.6rem 0 0;max-width:70ch}
.opt{margin:2.4rem 0 0;padding:14px 16px;border:1px solid #262320;border-radius:10px;
background:linear-gradient(180deg,var(--raise),var(--panel));max-width:70ch}
.opt h3{margin:0 0 .5rem;color:var(--cream);font-size:.86rem;letter-spacing:.04em}
.opt p{margin:.3rem 0;color:var(--silver);font-size:.82rem}
.k{color:var(--gold);font-weight:700}
</style>
</head>
<body>
<h1>Push-to-talk — waybar indicator</h1>
<p class="sub">How the bar reads in each state, so you can tell at a glance whether you're in PTT mode.
Two elements move together: the <b>mic glyph</b> (live vs muted, the module you already have) and a
<b>PTT tag</b> — an outline flag that's <b>always present</b> (dim grey when off, so the bar never jumps),
glows gold when PTT is engaged, and is itself <b>click-to-toggle</b> for PTT mode.</p>
<h2>Not in PTT mode — the tag sits dim (present, barely visible)</h2>
<div class="row">
<div class="label"><b>Mic live.</b> Tag dim grey.</div>
<div class="bar">
<span class="neighbor"></span><span class="sep"></span>
<div class="mod live"><span class="badge">󰗋</span> <span class="g"></span></div>
<span class="neighbor">85%</span>
</div>
</div>
<div class="row">
<div class="label"><b>Mic muted</b> (plain mic-toggle). Tag still dim.</div>
<div class="bar">
<span class="neighbor"></span><span class="sep"></span>
<div class="mod muted"><span class="badge">󰗋</span> <span class="g"></span></div>
<span class="neighbor">85%</span>
</div>
</div>
<p class="note">The tag is <b>always there</b> — dim grey when off — so the bar never reflows when PTT flips.
<b>Click the tag to toggle PTT mode</b> (same as Super+Shift+A). A plain mic-mute leaves the tag dim; only PTT lights it gold.</p>
<h2>In PTT mode — the tag lights gold</h2>
<div class="row">
<div class="label"><b>Armed, not talking.</b> Mic muted, tag glows gold.</div>
<div class="bar">
<span class="neighbor"></span><span class="sep"></span>
<div class="mod muted"><span class="badge on">󰗋</span> <span class="g"></span></div>
<span class="neighbor">85%</span>
</div>
</div>
<div class="row">
<div class="label"><b>Holding the key — transmitting.</b> Mic live, tag brightens.</div>
<div class="bar">
<span class="neighbor"></span><span class="sep"></span>
<div class="mod live"><span class="badge talk">󰗋</span> <span class="g"></span></div>
<span class="neighbor">85%</span>
</div>
</div>
<p class="note">Only the letters and outline change colour — the box holds its place, so nothing shifts. While you hold to talk the mic flips live and the tag brightens, so you see you're transmitting, not just armed.</p>
<h2>The four states side by side — the tag never moves</h2>
<div class="row">
<div class="bar">
<div class="mod live"><span class="badge">󰗋</span> <span class="g"></span></div><span class="sep"></span>
<div class="mod muted"><span class="badge">󰗋</span> <span class="g"></span></div><span class="sep"></span>
<div class="mod muted"><span class="badge on">󰗋</span> <span class="g"></span></div><span class="sep"></span>
<div class="mod live"><span class="badge talk">󰗋</span> <span class="g"></span></div>
</div>
</div>
<p class="note">left → right: off + live · off + muted · PTT armed · PTT transmitting. The tag holds its position through all four — no jump.</p>
<div class="opt">
<h3>Variants to consider</h3>
<p>• <span class="k">Tag icon</span> — the account-voice glyph (shown). Alternatives if it doesn't read right: radio-handheld , broadcast , or plain "PTT"/"TALK" text.</p>
<p>• <span class="k">Tag colour</span> — gold (shown, matches the panel's PUSH·TALK lamp). A red tag would read more like "mic hot/muted"; gold reads "mode engaged".</p>
<p>• <span class="k">Tag placement</span> — left of the mic glyph (shown) so the flag leads. Could sit right of it instead.</p>
<p>• <span class="k">Transmit cue</span> — brighten + glow the tag while holding (shown), or leave the tag steady and let only the mic glyph carry the live/muted change.</p>
</div>
</body>
</html>
|
