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