1package theme
2
3// generateWebRTCPermissionIndicatorCSS creates styles for the top-right
4// WebRTC permission activity indicator.
5// The dot anchors top-right; on hover the card expands left and down
6// using a GtkRevealer (slide-down) for the details panel.
7func generateWebRTCPermissionIndicatorCSS(p Palette) string {
8 _ = p
9 return `/* ===== WebRTC Permission Indicator ===== */
10
11.webrtc-indicator-outer {
12 margin-top: 0.125em;
13 margin-right: 0.125em;
14}
15
16/* Card container: transparent when collapsed, styled when expanded.
17 Right-aligned so the dot stays top-right and content grows leftward. */
18.webrtc-indicator-card {
19 background-color: transparent;
20 border: 0.0625em solid transparent;
21 border-radius: 999px;
22 padding: 0;
23 transition: background-color 180ms ease-in-out,
24 border-color 180ms ease-in-out,
25 box-shadow 180ms ease-in-out;
26}
27
28.webrtc-indicator-card.expanded {
29 background-color: alpha(var(--surface-variant), 0.96);
30 border-color: alpha(var(--border), 0.8);
31 border-radius: 0.375em;
32 box-shadow: 0 0.25em 1em alpha(black, 0.28),
33 0 0.0625em 0.25em alpha(black, 0.12);
34 padding: 0.4em 0.5em;
35}
36
37/* Summary dot - small colored circle, right-aligned */
38.webrtc-indicator-dot {
39 min-width: 0.5em;
40 min-height: 0.5em;
41 border-radius: 999px;
42 background-color: var(--muted);
43 border: 0.0625em solid alpha(var(--border), 0.6);
44 transition: background-color 200ms ease-in-out,
45 border-color 200ms ease-in-out,
46 box-shadow 200ms ease-in-out;
47}
48
49/* Origin label shown next to the dot. */
50.webrtc-indicator-origin {
51 font-size: 0.6875em;
52 font-weight: 600;
53 letter-spacing: 0.02em;
54 padding: 0 0.4em 0 0;
55 color: var(--muted);
56}
57
58/* Details section inside the revealer (permission rows only) */
59.webrtc-indicator-details {
60 margin-top: 0.3em;
61 padding-top: 0.3em;
62 border-top: 0.0625em solid alpha(var(--border), 0.5);
63}
64
65/* Permission row buttons */
66.webrtc-indicator-row {
67 font-size: 0.6875em;
68 font-weight: 500;
69 padding: 0.25em 0.4em;
70 margin-top: 0.15em;
71 border-radius: 0.25em;
72 border-left: 0.1875em solid transparent;
73 border-top: none;
74 border-right: none;
75 border-bottom: none;
76 background-color: alpha(var(--bg), 0.35);
77 background-image: none;
78 color: var(--muted);
79 text-align: left;
80 transition: background-color 150ms ease-in-out,
81 border-color 150ms ease-in-out,
82 color 150ms ease-in-out;
83}
84
85.webrtc-indicator-row:hover {
86 background-color: alpha(var(--bg), 0.55);
87 background-image: none;
88}
89
90/* ---- State: idle ---- */
91.webrtc-indicator-dot.state-idle {
92 background-color: var(--muted);
93 border-color: alpha(var(--border), 0.6);
94}
95
96.webrtc-indicator-row.state-idle {
97 color: var(--muted);
98 border-left-color: alpha(var(--muted), 0.4);
99}
100
101/* ---- State: requesting (amber) ---- */
102.webrtc-indicator-dot.state-requesting {
103 background-color: var(--warning);
104 border-color: alpha(var(--warning), 0.6);
105 box-shadow: 0 0 0.4em alpha(var(--warning), 0.5);
106}
107
108.webrtc-indicator-row.state-requesting {
109 color: var(--warning);
110 border-left-color: var(--warning);
111 background-color: alpha(var(--warning), 0.08);
112}
113
114.webrtc-indicator-row.state-requesting:hover {
115 background-color: alpha(var(--warning), 0.14);
116 background-image: none;
117}
118
119/* ---- State: allowed (green) ---- */
120.webrtc-indicator-dot.state-allowed {
121 background-color: var(--success);
122 border-color: alpha(var(--success), 0.6);
123 box-shadow: 0 0 0.35em alpha(var(--success), 0.35);
124}
125
126.webrtc-indicator-row.state-allowed {
127 color: var(--success);
128 border-left-color: var(--success);
129 background-color: alpha(var(--success), 0.06);
130}
131
132.webrtc-indicator-row.state-allowed:hover {
133 background-color: alpha(var(--success), 0.12);
134 background-image: none;
135}
136
137/* ---- State: blocked (red) ---- */
138.webrtc-indicator-dot.state-blocked {
139 background-color: var(--destructive);
140 border-color: alpha(var(--destructive), 0.6);
141 box-shadow: 0 0 0.35em alpha(var(--destructive), 0.35);
142}
143
144.webrtc-indicator-row.state-blocked {
145 color: var(--destructive);
146 border-left-color: var(--destructive);
147 background-color: alpha(var(--destructive), 0.06);
148}
149
150.webrtc-indicator-row.state-blocked:hover {
151 background-color: alpha(var(--destructive), 0.12);
152 background-image: none;
153}
154
155/* ---- Locked row modifier ---- */
156.webrtc-indicator-row.row-locked {
157 font-weight: 600;
158}
159`
160}