mirror of
https://github.com/Melorise/TamaASR.git
synced 2026-11-07 14:39:32 +00:00
MeloriseandCodex
7687350ca4
AI-assisted-by: Codex AI-model: gpt-5.6-sol AI-reasoning-effort: medium Co-authored-by: Codex <codex@openai.com>
18 lines
1.6 KiB
CSS
18 lines
1.6 KiB
CSS
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
|
|
body { display: grid; place-items: center; }
|
|
.voice-overlay { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #71aaff, #2568de 70%); box-shadow: 0 8px 24px rgba(23,79,177,.35); }
|
|
.ring { position: absolute; inset: 0; border: 2px solid rgba(69,136,245,.45); border-radius: 50%; opacity: 0; }
|
|
.voice-overlay[data-state="recording"] .ring { animation: ripple 1.7s ease-out infinite; }
|
|
.voice-overlay[data-state="recording"] .ring.two { animation-delay: .55s; }
|
|
.bars { display: flex; align-items: center; gap: 3px; height: 24px; }
|
|
.bars i { display: block; width: 4px; height: 10px; border-radius: 3px; background: white; }
|
|
.voice-overlay[data-state="recording"] .bars i { animation: wave .75s ease-in-out infinite alternate; }
|
|
.bars i:nth-child(2) { height: 20px; animation-delay: .12s !important; }
|
|
.bars i:nth-child(3) { height: 15px; animation-delay: .24s !important; }
|
|
.bars i:nth-child(4) { animation-delay: .36s !important; }
|
|
.voice-overlay[data-state="stopping"] { background: radial-gradient(circle at 35% 28%, #ffd087, #e68a22 70%); }
|
|
.voice-overlay[data-state="done"] { background: radial-gradient(circle at 35% 28%, #83ebbd, #22aa72 70%); }
|
|
.voice-overlay[data-state="error"] { background: radial-gradient(circle at 35% 28%, #ff9b9b, #dc3f52 70%); }
|
|
@keyframes ripple { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.28); opacity: 0; } }
|
|
@keyframes wave { to { transform: scaleY(.45); } }
|