1/*
2 * SPDX-FileCopyrightText: Amolith <amolith@secluded.site>
3 *
4 * SPDX-License-Identifier: AGPL-3.0-or-later
5 */
6
7:root {
8 color-scheme: light dark;
9
10 /* Light theme (default) */
11 --bg-page: #f5f5f5;
12 --bg-surface: white;
13 --bg-header-code: #e8f5e0;
14
15 --text-primary: #333;
16 --text-on-accent: white;
17
18 --accent: #5a8c3a;
19 --accent-hover: #4a7230;
20 --accent-dark: #2d5016;
21 --accent-danger: #b22222;
22
23 --border: #ddd;
24 --border-accent: #5a8c3a;
25 --shadow: rgba(0, 0, 0, 0.1);
26}
27
28@media (prefers-color-scheme: dark) {
29 :root {
30 --bg-page: #1a1a1a;
31 --bg-surface: #2a2a2a;
32 --bg-header-code: #3a4a34;
33
34 --text-primary: #e0e0e0;
35 --text-on-accent: white;
36
37 --accent: #7ab859;
38 --accent-hover: #8cc96f;
39 --accent-dark: #5a8c3a;
40 --accent-danger: #d84444;
41
42 --border: #444;
43 --border-accent: #7ab859;
44 --shadow: rgba(0, 0, 0, 0.3);
45 }
46}
47
48* {
49 box-sizing: border-box;
50 margin: 0;
51 padding: 0;
52}
53
54body {
55 font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
56 background: var(--bg-page);
57 color: var(--text-primary);
58 line-height: 1.6;
59 -webkit-font-smoothing: antialiased;
60 -moz-osx-font-smoothing: grayscale;
61}
62
63#app {
64 max-width: 800px;
65 margin: 0 auto;
66 padding: 2rem 1rem;
67}
68
69.hidden {
70 display: none !important;
71}
72
73/* Start screen */
74#start-screen {
75 text-align: center;
76 padding: 4rem 2rem;
77}
78
79#start-screen h1 {
80 margin-bottom: 3rem;
81 color: var(--accent-dark);
82}
83
84.buttons {
85 display: flex;
86 flex-direction: column;
87 gap: 1rem;
88 align-items: center;
89}
90
91.join-section {
92 display: flex;
93 gap: 0.5rem;
94}
95
96button {
97 padding: 0.75rem 1.5rem;
98 background: var(--accent);
99 color: var(--text-on-accent);
100 border: none;
101 border-radius: 6px;
102 cursor: pointer;
103 font-size: 1rem;
104 transition: background 0.2s, transform 0.05s, box-shadow 0.2s;
105}
106
107button:hover {
108 background: var(--accent-hover);
109}
110
111button:active {
112 transform: translateY(1px);
113}
114
115button:focus-visible,
116input:focus-visible,
117textarea:focus-visible {
118 outline: 2px solid var(--border-accent);
119 outline-offset: 2px;
120}
121
122input, textarea {
123 padding: 0.75rem;
124 border: 1px solid var(--border);
125 border-radius: 6px;
126 font-size: 1rem;
127 font-family: inherit;
128 background: var(--bg-surface);
129 color: var(--text-primary);
130}
131
132input::placeholder,
133textarea::placeholder {
134 color: color-mix(in srgb, var(--text-primary) 50%, transparent);
135}
136
137#join-code {
138 width: 200px;
139 text-transform: uppercase;
140 letter-spacing: 0.08em;
141}
142
143#join-code::placeholder {
144 text-transform: none;
145}
146
147.expiry-notice {
148 font-size: 0.85rem;
149 color: color-mix(in srgb, var(--text-primary) 60%, transparent);
150 margin-top: 1rem;
151}
152
153#start-screen .expiry-notice {
154 text-align: center;
155}
156
157#list-screen .expiry-notice {
158 margin: 0.5rem 0 0 0;
159 font-size: 0.8rem;
160}
161
162/* List screen */
163#list-screen header {
164 display: flex;
165 justify-content: space-between;
166 align-items: center;
167 margin-bottom: 2rem;
168 padding-bottom: 1rem;
169 border-bottom: 2px solid var(--border-accent);
170}
171
172#list-screen header h2 {
173 margin-bottom: 0.25rem;
174}
175
176.connection-status {
177 display: flex;
178 align-items: center;
179 gap: 0.5rem;
180 font-size: 0.85rem;
181 color: color-mix(in srgb, var(--text-primary) 70%, transparent);
182}
183
184.status-dot {
185 width: 8px;
186 height: 8px;
187 border-radius: 50%;
188 background: #888;
189}
190
191.status-dot.connected {
192 background: #4caf50;
193 box-shadow: 0 0 4px #4caf50;
194}
195
196.status-dot.connecting {
197 background: #ff9800;
198 animation: pulse 1.5s ease-in-out infinite;
199}
200
201.status-dot.disconnected {
202 background: #f44336;
203}
204
205@keyframes pulse {
206 0%, 100% { opacity: 1; }
207 50% { opacity: 0.5; }
208}
209
210.header-actions {
211 display: flex;
212 gap: 0.5rem;
213}
214
215#room-code {
216 font-family: monospace;
217 background: var(--bg-header-code);
218 padding: 0.25rem 0.5rem;
219 border-radius: 6px;
220}
221
222#copy-btn, #copy-link-btn, #set-title-btn, #reset-votes-btn {
223 background: transparent;
224 color: var(--text-primary);
225 border: 1px solid var(--border);
226 width: 40px;
227 height: 40px;
228 padding: 0;
229 border-radius: 999px;
230 display: grid;
231 place-items: center;
232}
233
234#copy-btn:hover, #copy-link-btn:hover, #set-title-btn:hover, #reset-votes-btn:hover {
235 background: var(--bg-header-code);
236 border-color: var(--border-accent);
237}
238
239.header-actions button svg {
240 width: 20px;
241 height: 20px;
242 display: block;
243}
244
245#leave-btn {
246 background: transparent;
247 color: var(--accent-dark);
248 border: 1px solid var(--border-accent);
249}
250
251#leave-btn:hover {
252 background: var(--bg-header-code);
253}
254
255.add-section {
256 display: flex;
257 gap: 0.5rem;
258 margin-bottom: 1rem;
259}
260
261.add-section input {
262 flex: 1;
263}
264
265.bulk-section {
266 margin-bottom: 2rem;
267}
268
269.bulk-section textarea {
270 width: 100%;
271 min-height: 100px;
272 margin-bottom: 0.5rem;
273 resize: vertical;
274}
275
276/* List items */
277#list-container.disabled {
278 pointer-events: none;
279 opacity: 0.6;
280}
281
282.list-item {
283 background: var(--bg-surface);
284 padding: 1rem;
285 margin-bottom: 0.5rem;
286 border-radius: 8px;
287 box-shadow: 0 1px 3px var(--shadow);
288 display: flex;
289 justify-content: space-between;
290 align-items: center;
291 transition: transform 0.3s ease, box-shadow 0.2s ease;
292 border-left: 3px solid transparent;
293}
294
295.list-item:hover {
296 transform: translateY(-1px);
297 box-shadow: 0 4px 12px var(--shadow);
298}
299
300.list-item.selected {
301 outline: 2px solid var(--border-accent);
302 outline-offset: 2px;
303}
304
305.list-item.vetoed {
306 opacity: 0.4;
307 max-height: 3rem;
308 overflow: hidden;
309}
310
311.list-item:has(.vote-btn.active) {
312 border-left-color: var(--accent);
313}
314
315.list-item:has(.vote-btn.veto-active) {
316 border-left-color: var(--accent-danger);
317}
318
319.list-item-text {
320 flex: 1;
321 padding-right: 1rem;
322 cursor: pointer;
323 user-select: none;
324}
325
326.list-item-text:hover {
327 opacity: 0.9;
328}
329
330.edit-input {
331 flex: 1;
332 margin-right: 1rem;
333}
334
335.list-item-actions {
336 display: flex;
337 gap: 0.5rem;
338 flex-shrink: 0;
339}
340
341.vote-btn {
342 padding: 0.5rem;
343 font-size: 0.9rem;
344}
345
346.delete-btn {
347 padding: 0.5rem;
348 font-size: 0.9rem;
349 background: var(--accent-danger);
350 opacity: 0.7;
351 transition: opacity 0.2s, background 0.2s;
352}
353
354.delete-btn:hover {
355 opacity: 1;
356 background: var(--accent-danger);
357}
358
359.vote-btn.active {
360 background: var(--accent-dark);
361}
362
363.vote-btn.veto-active {
364 background: var(--accent-danger);
365}
366
367.vote-btn svg, .delete-btn svg {
368 width: 16px;
369 height: 16px;
370 display: block;
371}
372
373.score {
374 min-width: 40px;
375 text-align: center;
376 font-weight: bold;
377 color: var(--accent);
378 background: var(--bg-header-code);
379 padding: 0.25rem 0.5rem;
380 border-radius: 999px;
381}
382
383/* Modal */
384.modal {
385 position: fixed;
386 top: 0;
387 left: 0;
388 width: 100%;
389 height: 100%;
390 background: rgba(0, 0, 0, 0.5);
391 display: flex;
392 align-items: center;
393 justify-content: center;
394 z-index: 1000;
395}
396
397.modal-content {
398 background: var(--bg-surface);
399 padding: 2rem;
400 border-radius: 8px;
401 max-width: 500px;
402 width: 90%;
403 max-height: 80vh;
404 overflow-y: auto;
405 box-shadow: 0 4px 20px var(--shadow);
406}
407
408.modal-header {
409 display: flex;
410 justify-content: space-between;
411 align-items: center;
412 margin-bottom: 1.5rem;
413 padding-bottom: 0.5rem;
414 border-bottom: 2px solid var(--border);
415}
416
417.modal-header h3 {
418 margin: 0;
419 color: var(--accent-dark);
420}
421
422.modal-close {
423 background: transparent;
424 color: var(--text-primary);
425 border: none;
426 font-size: 2rem;
427 line-height: 1;
428 padding: 0;
429 width: 2rem;
430 height: 2rem;
431 cursor: pointer;
432}
433
434.modal-close:hover {
435 color: var(--accent-danger);
436}
437
438.modal-body h4 {
439 color: var(--accent);
440 margin-top: 1rem;
441 margin-bottom: 0.5rem;
442}
443
444.modal-body h4:first-child {
445 margin-top: 0;
446}
447
448.modal-body ul {
449 margin: 0;
450 padding-left: 1.5rem;
451}
452
453.modal-body li {
454 margin-bottom: 0.5rem;
455}
456
457kbd {
458 display: inline-block;
459 padding: 0.2rem 0.4rem;
460 font-size: 0.85rem;
461 font-family: monospace;
462 background: var(--bg-header-code);
463 border: 1px solid var(--border);
464 border-radius: 4px;
465 box-shadow: 0 1px 2px var(--shadow);
466}
467
468/* Screen reader only */
469.sr-only {
470 position: absolute;
471 width: 1px;
472 height: 1px;
473 padding: 0;
474 margin: -1px;
475 overflow: hidden;
476 clip: rect(0, 0, 0, 0);
477 white-space: nowrap;
478 border-width: 0;
479}
480
481@media (prefers-reduced-motion: reduce) {
482 * {
483 transition: none !important;
484 animation: none !important;
485 }
486}