zzstoatzz.io
slack status without the slack
status.zzstoatzz.io/
quickslice
feat: add creative accent enhancements and missing hover states
- fixed missing accent awareness in clear button and expiration options hover
- enhanced save button with subtle lift animation and shadow on hover
- added creative glow effect to username handle on hover
- implemented subtle pulse animation for current status emoji
- added accent-colored expiration indicator with timer icon
- all hover states now properly respect user's chosen accent color
+57
-4
templates/status.html
+57
-4
templates/status.html
···
94
94
<p class="status-meta">
95
95
<span class="local-time" data-timestamp="{{ current.started_at.to_rfc3339() }}" data-prefix="since"></span>
96
96
{% if current.expires_at.is_some() && !current.is_expired() %}
97
-
• <span class="local-time" data-timestamp="{{ current.expires_at.as_ref().unwrap().to_rfc3339() }}" data-prefix="clears"></span>
97
+
• <span class="expires-indicator"><span class="local-time" data-timestamp="{{ current.expires_at.as_ref().unwrap().to_rfc3339() }}" data-prefix="clears"></span></span>
98
98
{% endif %}
99
99
</p>
100
100
</div>
···
369
369
.handle-link {
370
370
color: var(--text-secondary);
371
371
text-decoration: none;
372
-
transition: color 0.2s;
372
+
transition: all 0.3s ease;
373
373
display: inline-block;
374
374
max-width: 100%;
375
375
overflow: hidden;
376
376
text-overflow: ellipsis;
377
377
white-space: nowrap;
378
+
position: relative;
379
+
padding: 0.25rem 0.5rem;
380
+
border-radius: var(--radius-sm);
381
+
}
382
+
383
+
.handle-link::before {
384
+
content: '';
385
+
position: absolute;
386
+
inset: -2px;
387
+
border-radius: var(--radius-sm);
388
+
background: linear-gradient(45deg, var(--accent), transparent);
389
+
opacity: 0;
390
+
transition: opacity 0.3s ease;
391
+
z-index: -1;
392
+
filter: blur(8px);
378
393
}
379
394
380
395
.handle-link:hover {
381
396
color: var(--accent);
397
+
text-shadow: 0 0 20px rgba(74, 158, 255, 0.3);
398
+
}
399
+
400
+
.handle-link:hover::before {
401
+
opacity: 0.3;
382
402
}
383
403
384
404
.nav-button {
···
604
624
gap: 1rem;
605
625
}
606
626
627
+
@keyframes subtle-pulse {
628
+
0%, 100% {
629
+
transform: scale(1);
630
+
filter: drop-shadow(0 0 0 transparent);
631
+
}
632
+
50% {
633
+
transform: scale(1.02);
634
+
filter: drop-shadow(0 0 12px var(--accent));
635
+
}
636
+
}
637
+
607
638
.status-emoji {
608
639
width: 3.5rem;
609
640
height: 3.5rem;
···
612
643
display: flex;
613
644
align-items: center;
614
645
justify-content: center;
646
+
position: relative;
647
+
}
648
+
649
+
.current-status .status-emoji {
650
+
animation: subtle-pulse 4s ease-in-out infinite;
615
651
}
616
652
617
653
.custom-emoji-display {
···
644
680
margin: 0;
645
681
}
646
682
683
+
.expires-indicator {
684
+
color: var(--accent);
685
+
font-weight: 500;
686
+
position: relative;
687
+
}
688
+
689
+
.expires-indicator::before {
690
+
content: '⏱';
691
+
margin-right: 0.25rem;
692
+
opacity: 0.7;
693
+
}
694
+
647
695
/* Status Editor */
648
696
.status-editor {
649
697
margin-bottom: 1.5rem;
···
735
783
736
784
.clear-after-btn:hover {
737
785
background: var(--bg-tertiary);
738
-
border-color: var(--text-secondary);
786
+
border-color: var(--accent);
787
+
color: var(--accent);
739
788
}
740
789
741
790
.save-btn {
···
747
796
font-size: 0.875rem;
748
797
font-weight: 500;
749
798
cursor: pointer;
750
-
transition: background 0.2s;
799
+
transition: all 0.2s;
800
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
751
801
}
752
802
753
803
.save-btn:hover {
754
804
background: var(--accent-hover);
805
+
transform: translateY(-1px);
806
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
755
807
}
756
808
757
809
.save-btn:disabled {
···
898
950
899
951
.clear-option:hover {
900
952
background: var(--bg-tertiary);
953
+
color: var(--accent);
901
954
}
902
955
903
956
.clear-option.active {