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 transition: background-color 150ms ease-in-out,
80 border-color 150ms ease-in-out,
81 color 150ms ease-in-out;
82}
83
84.webrtc-indicator-row:hover {
85 background-color: alpha(var(--bg), 0.55);
86 background-image: none;
87}
88
89/* ---- State: idle ---- */
90.webrtc-indicator-dot.state-idle {
91 background-color: var(--muted);
92 border-color: alpha(var(--border), 0.6);
93}
94
95.webrtc-indicator-row.state-idle {
96 color: var(--muted);
97 border-left-color: alpha(var(--muted), 0.4);
98}
99
100/* ---- State: requesting (amber) ---- */
101.webrtc-indicator-dot.state-requesting {
102 background-color: var(--warning);
103 border-color: alpha(var(--warning), 0.6);
104 box-shadow: 0 0 0.4em alpha(var(--warning), 0.5);
105}
106
107.webrtc-indicator-row.state-requesting {
108 color: var(--warning);
109 border-left-color: var(--warning);
110 background-color: alpha(var(--warning), 0.08);
111}
112
113.webrtc-indicator-row.state-requesting:hover {
114 background-color: alpha(var(--warning), 0.14);
115 background-image: none;
116}
117
118/* ---- State: allowed (green) ---- */
119.webrtc-indicator-dot.state-allowed {
120 background-color: var(--success);
121 border-color: alpha(var(--success), 0.6);
122 box-shadow: 0 0 0.35em alpha(var(--success), 0.35);
123}
124
125.webrtc-indicator-row.state-allowed {
126 color: var(--success);
127 border-left-color: var(--success);
128 background-color: alpha(var(--success), 0.06);
129}
130
131.webrtc-indicator-row.state-allowed:hover {
132 background-color: alpha(var(--success), 0.12);
133 background-image: none;
134}
135
136/* ---- State: blocked (red) ---- */
137.webrtc-indicator-dot.state-blocked {
138 background-color: var(--destructive);
139 border-color: alpha(var(--destructive), 0.6);
140 box-shadow: 0 0 0.35em alpha(var(--destructive), 0.35);
141}
142
143.webrtc-indicator-row.state-blocked {
144 color: var(--destructive);
145 border-left-color: var(--destructive);
146 background-color: alpha(var(--destructive), 0.06);
147}
148
149.webrtc-indicator-row.state-blocked:hover {
150 background-color: alpha(var(--destructive), 0.12);
151 background-image: none;
152}
153
154/* ---- Locked row modifier ---- */
155.webrtc-indicator-row.row-locked {
156 font-weight: 600;
157}
158`
159}