slack status without the slack
status.zzstoatzz.io/
zzstoatzz.io
quickslice
1:root {
2 --bg: #0a0a0a;
3 --bg-card: #1a1a1a;
4 --text: #ffffff;
5 --text-secondary: #888;
6 --accent: #4a9eff;
7 --border: #2a2a2a;
8 --radius: 12px;
9 --font-family: ui-monospace, "SF Mono", Monaco, monospace;
10}
11
12[data-theme="light"] {
13 --bg: #ffffff;
14 --bg-card: #f5f5f5;
15 --text: #1a1a1a;
16 --text-secondary: #666;
17 --border: #e0e0e0;
18}
19
20* {
21 margin: 0;
22 padding: 0;
23 box-sizing: border-box;
24}
25
26/* Theme-aware scrollbars */
27::-webkit-scrollbar {
28 width: 8px;
29 height: 8px;
30}
31
32::-webkit-scrollbar-track {
33 background: var(--bg);
34}
35
36::-webkit-scrollbar-thumb {
37 background: var(--border);
38 border-radius: 4px;
39}
40
41::-webkit-scrollbar-thumb:hover {
42 background: var(--text-secondary);
43}
44
45/* Firefox */
46* {
47 scrollbar-width: thin;
48 scrollbar-color: var(--border) var(--bg);
49}
50
51body {
52 font-family: var(--font-family);
53 background: var(--bg);
54 color: var(--text);
55 line-height: 1.6;
56 min-height: 100vh;
57}
58
59#app {
60 max-width: 600px;
61 margin: 0 auto;
62 padding: 2rem 1rem;
63}
64
65header {
66 display: flex;
67 justify-content: space-between;
68 align-items: center;
69 margin-bottom: 2rem;
70 padding-bottom: 1rem;
71 border-bottom: 1px solid var(--border);
72}
73
74header h1 {
75 font-size: 1.5rem;
76 font-weight: 600;
77}
78
79nav {
80 display: flex;
81 gap: 1rem;
82 align-items: center;
83}
84
85nav a {
86 color: var(--text-secondary);
87 text-decoration: none;
88}
89
90nav a:hover {
91 color: var(--accent);
92}
93
94.nav-btn {
95 display: flex;
96 align-items: center;
97 justify-content: center;
98 padding: 0.5rem;
99 border-radius: 8px;
100 transition: background 0.15s, color 0.15s;
101 color: var(--text-secondary);
102 background: none;
103 border: none;
104 cursor: pointer;
105}
106
107.nav-btn:hover {
108 background: var(--bg-card);
109 color: var(--accent);
110}
111
112.nav-btn.active {
113 color: var(--accent);
114}
115
116.nav-btn svg {
117 display: block;
118}
119
120#theme-toggle {
121 background: none;
122 border: 1px solid var(--border);
123 border-radius: 8px;
124 padding: 0.5rem;
125 cursor: pointer;
126 font-size: 1rem;
127}
128
129#theme-toggle .sun { display: none; }
130#theme-toggle .moon { display: inline; color: var(--text); }
131[data-theme="light"] #theme-toggle .sun { display: inline; color: var(--text); }
132[data-theme="light"] #theme-toggle .moon { display: none; }
133
134.hidden { display: none !important; }
135.center { text-align: center; padding: 2rem; }
136
137/* Login form */
138#login-form {
139 display: flex;
140 gap: 0.5rem;
141 margin-top: 1rem;
142 justify-content: center;
143}
144
145#login-form input {
146 padding: 0.75rem 1rem;
147 border: 1px solid var(--border);
148 border-radius: var(--radius);
149 background: var(--bg-card);
150 color: var(--text);
151 font-family: inherit;
152 font-size: 1rem;
153 width: 200px;
154}
155
156#login-form button, button[type="submit"] {
157 padding: 0.75rem 1.5rem;
158 background: var(--accent);
159 color: white;
160 border: none;
161 border-radius: var(--radius);
162 cursor: pointer;
163 font-family: inherit;
164 font-size: 1rem;
165}
166
167#login-form button:hover, button[type="submit"]:hover {
168 opacity: 0.9;
169}
170
171/* Profile card */
172.profile-card {
173 background: var(--bg-card);
174 border: 1px solid var(--border);
175 border-radius: var(--radius);
176 padding: 2rem;
177 margin-bottom: 1.5rem;
178}
179
180.current-status {
181 display: flex;
182 flex-direction: column;
183 align-items: center;
184 gap: 1rem;
185 text-align: center;
186}
187
188.big-emoji {
189 font-size: 4rem;
190 line-height: 1;
191}
192
193.big-emoji img {
194 width: 4rem;
195 height: 4rem;
196 object-fit: contain;
197}
198
199.status-info {
200 display: flex;
201 flex-direction: column;
202 gap: 0.25rem;
203}
204
205#current-text {
206 font-size: 1.25rem;
207}
208
209.meta {
210 color: var(--text-secondary);
211 font-size: 0.875rem;
212}
213
214/* Status form */
215.status-form {
216 background: var(--bg-card);
217 border: 1px solid var(--border);
218 border-radius: var(--radius);
219 padding: 1rem;
220 margin-bottom: 1.5rem;
221}
222
223.emoji-input-row {
224 display: flex;
225 gap: 0.5rem;
226 margin-bottom: 0.75rem;
227}
228
229.emoji-input-row input {
230 flex: 1;
231 padding: 0.75rem;
232 border: 1px solid var(--border);
233 border-radius: 8px;
234 background: var(--bg);
235 color: var(--text);
236 font-family: inherit;
237 font-size: 1rem;
238}
239
240#emoji-input {
241 max-width: 150px;
242}
243
244.form-actions {
245 display: flex;
246 gap: 0.5rem;
247 justify-content: flex-end;
248}
249
250.form-actions select {
251 padding: 0.75rem;
252 border: 1px solid var(--border);
253 border-radius: 8px;
254 background: var(--bg);
255 color: var(--text);
256 font-family: inherit;
257}
258
259.custom-datetime {
260 padding: 0.75rem;
261 border: 1px solid var(--border);
262 border-radius: 8px;
263 background: var(--bg);
264 color: var(--text);
265 font-family: inherit;
266}
267
268/* History */
269.history {
270 margin-bottom: 2rem;
271}
272
273.history h2 {
274 font-size: 0.875rem;
275 text-transform: uppercase;
276 letter-spacing: 0.05em;
277 color: var(--text-secondary);
278 margin-bottom: 1rem;
279}
280
281#history-list {
282 display: flex;
283 flex-direction: column;
284 gap: 0.75rem;
285}
286
287/* Feed list */
288.feed-list {
289 display: flex;
290 flex-direction: column;
291 gap: 1rem;
292}
293
294/* Status item (used in both history and feed) */
295.status-item {
296 display: flex;
297 gap: 1rem;
298 padding: 1rem;
299 background: var(--bg-card);
300 border: 1px solid var(--border);
301 border-radius: var(--radius);
302 align-items: flex-start;
303}
304
305.status-item:hover {
306 border-color: var(--accent);
307}
308
309.status-item .emoji {
310 font-size: 1.5rem;
311 line-height: 1;
312 flex-shrink: 0;
313}
314
315.status-item .emoji img {
316 width: 1.5rem;
317 height: 1.5rem;
318 object-fit: contain;
319}
320
321.status-item .content {
322 flex: 1;
323 min-width: 0;
324}
325
326.status-item .author {
327 color: var(--text-secondary);
328 font-weight: 600;
329 text-decoration: none;
330}
331
332.status-item .author:hover {
333 color: var(--accent);
334}
335
336.status-item .text {
337 margin-left: 0.5rem;
338}
339
340.status-item .time {
341 display: block;
342 font-size: 0.875rem;
343 color: var(--text-secondary);
344 margin-top: 0.25rem;
345}
346
347.delete-btn {
348 background: transparent;
349 border: none;
350 color: var(--text-secondary);
351 cursor: pointer;
352 padding: 0.25rem;
353 border-radius: 4px;
354 opacity: 0;
355 transition: opacity 0.15s, color 0.15s;
356 flex-shrink: 0;
357}
358
359.status-item:hover .delete-btn {
360 opacity: 1;
361}
362
363.delete-btn:hover {
364 color: #e74c3c;
365}
366
367/* Logout */
368.logout-btn {
369 display: block;
370 margin: 0 auto;
371 padding: 0.5rem 1rem;
372 background: none;
373 border: 1px solid var(--border);
374 border-radius: 8px;
375 color: var(--text-secondary);
376 cursor: pointer;
377 font-family: inherit;
378}
379
380.logout-btn:hover {
381 border-color: var(--text);
382 color: var(--text);
383}
384
385/* Load more */
386#load-more-btn {
387 padding: 0.75rem 1.5rem;
388 background: var(--bg-card);
389 border: 1px solid var(--border);
390 border-radius: var(--radius);
391 color: var(--text);
392 cursor: pointer;
393 font-family: inherit;
394}
395
396#load-more-btn:hover {
397 border-color: var(--accent);
398}
399
400/* Emoji trigger button */
401.emoji-trigger {
402 width: 3rem;
403 height: 3rem;
404 border: none;
405 border-radius: 8px;
406 background: transparent;
407 cursor: pointer;
408 display: flex;
409 align-items: center;
410 justify-content: center;
411 font-size: 1.75rem;
412 flex-shrink: 0;
413}
414
415.emoji-trigger:hover {
416 background: var(--bg-card);
417}
418
419.emoji-trigger img {
420 width: 2.5rem;
421 height: 2.5rem;
422 object-fit: contain;
423}
424
425/* Emoji picker overlay */
426.emoji-picker-overlay {
427 position: fixed;
428 inset: 0;
429 background: rgba(0, 0, 0, 0.7);
430 display: flex;
431 align-items: center;
432 justify-content: center;
433 z-index: 1000;
434 padding: 1rem;
435}
436
437.emoji-picker {
438 background: var(--bg-card);
439 border: 1px solid var(--border);
440 border-radius: var(--radius);
441 width: 100%;
442 max-width: 600px;
443 height: 90vh;
444 max-height: 700px;
445 display: flex;
446 flex-direction: column;
447 overflow: hidden;
448}
449
450.emoji-picker-header {
451 display: flex;
452 justify-content: space-between;
453 align-items: center;
454 padding: 1rem;
455 border-bottom: 1px solid var(--border);
456}
457
458.emoji-picker-header h3 {
459 font-size: 1rem;
460 font-weight: 600;
461}
462
463.emoji-picker-close {
464 background: none;
465 border: none;
466 color: var(--text-secondary);
467 cursor: pointer;
468 font-size: 1.25rem;
469 padding: 0.25rem;
470}
471
472.emoji-picker-close:hover {
473 color: var(--text);
474}
475
476.emoji-search {
477 margin: 0.75rem;
478 padding: 0.5rem 0.75rem;
479 border: 1px solid var(--border);
480 border-radius: 8px;
481 background: var(--bg);
482 color: var(--text);
483 font-family: inherit;
484 font-size: 0.875rem;
485}
486
487.emoji-categories {
488 display: flex;
489 gap: 0.25rem;
490 padding: 0 0.75rem;
491 overflow-x: auto;
492 flex-shrink: 0;
493}
494
495.category-btn {
496 padding: 0.5rem;
497 border: none;
498 background: none;
499 cursor: pointer;
500 font-size: 1.25rem;
501 border-radius: 8px;
502 opacity: 0.5;
503 transition: opacity 0.15s;
504}
505
506.category-btn:hover, .category-btn.active {
507 opacity: 1;
508 background: var(--bg);
509}
510
511.emoji-grid {
512 padding: 0.75rem;
513 display: grid;
514 grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
515 gap: 0.25rem;
516 overflow-y: auto;
517 flex: 1;
518 min-height: 200px;
519 align-content: start;
520}
521
522.emoji-grid.bufo-grid {
523 grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
524 gap: 0.5rem;
525}
526
527.emoji-btn {
528 padding: 0.5rem;
529 border: none;
530 background: none;
531 cursor: pointer;
532 font-size: 1.5rem;
533 border-radius: 8px;
534 transition: background 0.15s;
535}
536
537.emoji-btn:hover {
538 background: var(--bg);
539}
540
541/* Consistent sizing for mixed emoji/bufo grids (frequent tab) */
542.emoji-grid .emoji-btn {
543 width: 48px;
544 height: 48px;
545 display: flex;
546 align-items: center;
547 justify-content: center;
548 font-size: 1.75rem;
549}
550
551.bufo-btn {
552 padding: 0.25rem;
553}
554
555.bufo-grid .bufo-btn {
556 width: 64px;
557 height: 64px;
558}
559
560.bufo-btn img {
561 width: 100%;
562 height: 100%;
563 max-width: 48px;
564 max-height: 48px;
565 object-fit: contain;
566}
567
568.loading {
569 grid-column: 1 / -1;
570 text-align: center;
571 color: var(--text-secondary);
572 padding: 2rem;
573}
574
575.no-results {
576 grid-column: 1 / -1;
577 text-align: center;
578 color: var(--text-secondary);
579 padding: 2rem;
580}
581
582/* Custom emoji input */
583.custom-emoji-input {
584 grid-column: 1 / -1;
585 display: flex;
586 gap: 0.5rem;
587 margin-bottom: 1rem;
588}
589
590.custom-emoji-input input {
591 flex: 1;
592 padding: 0.5rem 0.75rem;
593 border: 1px solid var(--border);
594 border-radius: 8px;
595 background: var(--bg);
596 color: var(--text);
597 font-family: inherit;
598}
599
600.custom-emoji-input button {
601 padding: 0.5rem 1rem;
602 background: var(--accent);
603 color: white;
604 border: none;
605 border-radius: 8px;
606 cursor: pointer;
607 font-family: inherit;
608}
609
610.custom-emoji-preview {
611 grid-column: 1 / -1;
612 display: flex;
613 justify-content: center;
614 min-height: 80px;
615 align-items: center;
616}
617
618.bufo-helper {
619 padding: 0.75rem;
620 text-align: center;
621 border-top: 1px solid var(--border);
622}
623
624.bufo-helper a {
625 color: var(--accent);
626 font-size: 0.875rem;
627}
628
629/* Settings Modal */
630.settings-overlay {
631 position: fixed;
632 top: 0;
633 left: 0;
634 right: 0;
635 bottom: 0;
636 background: rgba(0, 0, 0, 0.7);
637 display: flex;
638 align-items: center;
639 justify-content: center;
640 z-index: 1000;
641 padding: 1rem;
642}
643
644.settings-modal {
645 background: var(--bg-card);
646 border: 1px solid var(--border);
647 border-radius: var(--radius);
648 width: 100%;
649 max-width: 400px;
650 display: flex;
651 flex-direction: column;
652}
653
654.settings-header {
655 display: flex;
656 justify-content: space-between;
657 align-items: center;
658 padding: 1rem;
659 border-bottom: 1px solid var(--border);
660}
661
662.settings-header h3 {
663 font-size: 1.1rem;
664 font-weight: 500;
665}
666
667.settings-close {
668 background: none;
669 border: none;
670 color: var(--text-secondary);
671 cursor: pointer;
672 font-size: 1.25rem;
673 padding: 0.25rem;
674}
675
676.settings-close:hover {
677 color: var(--text);
678}
679
680.settings-content {
681 padding: 1rem;
682 display: flex;
683 flex-direction: column;
684 gap: 1.25rem;
685}
686
687.setting-group {
688 display: flex;
689 flex-direction: column;
690 gap: 0.5rem;
691}
692
693.setting-group label {
694 font-size: 0.875rem;
695 color: var(--text-secondary);
696}
697
698.setting-group select {
699 padding: 0.75rem;
700 border: 1px solid var(--border);
701 border-radius: 8px;
702 background: var(--bg);
703 color: var(--text);
704 font-family: inherit;
705 font-size: 1rem;
706}
707
708.color-picker {
709 display: flex;
710 flex-wrap: wrap;
711 gap: 0.5rem;
712 align-items: center;
713}
714
715.color-btn {
716 width: 32px;
717 height: 32px;
718 border-radius: 50%;
719 border: 2px solid transparent;
720 cursor: pointer;
721 transition: border-color 0.15s, transform 0.15s;
722}
723
724.color-btn:hover {
725 transform: scale(1.1);
726}
727
728.color-btn.active {
729 border-color: var(--text);
730}
731
732.custom-color-input {
733 width: 32px;
734 height: 32px;
735 border: none;
736 border-radius: 50%;
737 cursor: pointer;
738 background: none;
739 padding: 0;
740}
741
742.custom-color-input::-webkit-color-swatch-wrapper {
743 padding: 0;
744}
745
746.custom-color-input::-webkit-color-swatch {
747 border: 2px solid var(--border);
748 border-radius: 50%;
749}
750
751.settings-footer {
752 padding: 1rem;
753 border-top: 1px solid var(--border);
754 display: flex;
755 justify-content: flex-end;
756}
757
758.settings-footer .save-btn {
759 padding: 0.75rem 1.5rem;
760 background: var(--accent);
761 color: white;
762 border: none;
763 border-radius: 8px;
764 cursor: pointer;
765 font-family: inherit;
766 font-size: 1rem;
767}
768
769.settings-footer .save-btn:hover {
770 opacity: 0.9;
771}
772
773.settings-footer .save-btn:disabled {
774 opacity: 0.5;
775 cursor: not-allowed;
776}
777
778/* Mobile */
779@media (max-width: 480px) {
780 .emoji-input-row {
781 flex-direction: row;
782 }
783
784 .form-actions {
785 flex-direction: column;
786 }
787
788 .emoji-grid {
789 grid-template-columns: repeat(6, 1fr);
790 }
791}