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