Spaces:
Running on Zero
Running on Zero
| .voice-player { color:#c8c8c8; width:100%; } | |
| .wave { display:block; width:100%; height:140px; overflow:visible; } | |
| .playback { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:start; gap:22px; box-sizing:border-box; width:calc(100% - 40px); max-width:520px; margin:4px auto 8px; font:11px/1.4 ui-monospace,monospace; } | |
| .playback[hidden], audio[hidden], .audio-notice[hidden] { display:none; } | |
| .playback button { display:grid; place-items:center; width:44px; min-width:44px; height:44px; margin:0; padding:0; appearance:none; border:0; border-radius:50%; color:#101010; background:#f1f1ed; cursor:pointer; transition:background .15s ease,transform .15s ease; } | |
| .playback button:hover { background:#fff; } | |
| .playback button:active { transform:scale(.95); } | |
| .playback button svg { display:none; width:22px; height:22px; color:inherit; fill:none; stroke:#101010; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } | |
| .playback button[data-state=play] .play-icon { display:block; fill:#101010; stroke:none; } | |
| .playback button[data-state=pause] .pause-icon { display:block; stroke-width:2.4; } | |
| .playback button[data-state=replay] .replay-icon { display:block; } | |
| .timeline { min-width:0; display:grid; grid-template-columns:1fr 1fr; align-items:center; } | |
| .timeline [data-time], .timeline [data-duration] { color:#a8a8a8; font-variant-numeric:tabular-nums; letter-spacing:.025em; margin-top:-3px; } | |
| .timeline [data-duration] { text-align:right; } | |
| .playback input[type=range] { grid-column:1/-1; width:100%; min-width:0; box-sizing:border-box; height:44px; padding:0; margin:0; border:0; border-radius:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; } | |
| .playback input[type=range]::-webkit-slider-runnable-track { height:2px; border:0; border-radius:2px; background:linear-gradient(to right,#e5e5e0 var(--seek-progress,0%),#626262 var(--seek-progress,0%)); } | |
| .playback input[type=range]::-moz-range-track { height:2px; border:0; border-radius:2px; background:linear-gradient(to right,#e5e5e0 var(--seek-progress,0%),#626262 var(--seek-progress,0%)); } | |
| .playback input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; margin-top:-4px; border:0; border-radius:50%; background:#eee; box-shadow:none; } | |
| .playback input[type=range]::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:#eee; box-shadow:none; } | |
| .playback a { display:flex; align-items:center; justify-content:center; gap:6px; min-width:52px; min-height:44px; padding:0 2px; color:#bdbdbd; text-decoration:none; font:10px/1 ui-monospace,monospace; letter-spacing:.06em; } | |
| .playback a svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } | |
| .playback a:hover { color:#fff; } | |
| .audio-notice { text-align:center; color:#bbb; font:12px/1.6 ui-monospace,monospace; margin:8px 20px; } | |
| audio { display:block; max-width:calc(100% - 40px); margin:0 auto; } | |
| .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } | |
| :focus-visible { outline:2px solid #f4f4f4; outline-offset:4px; } | |
| @media(max-width:520px) { .wave { height:120px; } .playback { gap:14px; width:calc(100% - 36px); max-width:380px; } } | |
| @media(max-width:350px) { .playback { gap:10px; } } | |
| @media(prefers-reduced-motion:reduce) { .playback button { transition:none; } } | |