added play, see, replay bar for audio
All checks were successful
Deploy FluentGerman.ai / deploy (push) Successful in 48s

This commit is contained in:
2026-02-18 13:03:40 +01:00
parent 829238dd2f
commit 99c20022de
3 changed files with 169 additions and 10 deletions

View File

@@ -1260,4 +1260,72 @@ tr:hover td {
40% {
transform: scale(1);
}
}
/* ── Audio Player (inline, minimalist) ────────────────────────────── */
.audio-player {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 8px 0 2px;
border-top: 1px solid var(--glass-border);
}
.audio-player-btn {
width: 28px;
height: 28px;
min-width: 28px;
border: none;
border-radius: 50%;
background: var(--accent);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition), transform 150ms ease;
padding: 0;
}
.audio-player-btn:hover {
background: var(--accent-hover);
transform: scale(1.1);
}
.audio-player-btn:active {
transform: scale(0.95);
}
.audio-player-track {
flex: 1;
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: height 150ms ease;
}
.audio-player-track:hover {
height: 6px;
}
.audio-player-fill {
height: 100%;
width: 0%;
background: var(--accent);
border-radius: 2px;
transition: width 100ms linear;
}
.audio-player-time {
font-size: 0.72rem;
font-family: 'Inter', monospace;
color: var(--text-muted);
min-width: 72px;
text-align: right;
white-space: nowrap;
letter-spacing: 0.02em;
}