Spaces:
Running on Zero
Running on Zero
| :root { color-scheme:dark; } | |
| body { background:#000; } | |
| .gradio-container { background:#000; color:#f1f1f1; max-width:1200px; margin:auto; padding:0; --app-gutter:clamp(18px,3vw,34px); --size-8:var(--app-gutter); font-family:Arial,Helvetica,sans-serif; } | |
| #app-header, #speech-player, #voice-picker, #request-status, #app-credits, #voice-options { --block-padding:0px; } | |
| #app-header { margin:0 0 65px; padding:0; border:0; background:transparent; } | |
| .app-header { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#a6a6a6; font:12px/1.5 ui-monospace,monospace; } | |
| .app-header a, .credits a { color:inherit; text-decoration:none; } | |
| .app-header a:hover, .credits a:hover { text-decoration:underline; text-underline-offset:4px; } | |
| #script-input { max-width:760px; margin:0 auto; border:0; box-shadow:none; background:transparent; } | |
| #speech-player { margin:13px calc(-1 * var(--app-gutter)) 0; width:calc(100% + 2 * var(--app-gutter)); max-width:none; padding:0; background:transparent; border:0; } | |
| #voice-picker { margin:8px 0 18px; background:transparent; border:0; padding:0; } | |
| #action-row { justify-content:center; align-items:center; gap:12px; margin:0 auto; max-width:370px; } | |
| #generate-speech { flex:0 1 196px; min-width:196px; max-width:220px; min-height:46px; border:1px solid #f3f3f0; border-radius:8px; background:#f3f3f0; color:#111; box-shadow:none; font:500 15px Arial,sans-serif; } | |
| #generate-speech:disabled { background:#bababa; color:#252525; opacity:1; } | |
| #cancel-speech { flex:0 1 85px; min-width:80px; max-width:100px; min-height:44px; border:1px solid #555; border-radius:8px; background:transparent; color:#ddd; box-shadow:none; } | |
| #request-status { min-height:40px; background:transparent; border:0; padding:8px 0; } | |
| #status-state { text-align:center; color:#bdbdbd; font:12px/1.6 ui-monospace,monospace; margin:0; } | |
| #status-state[role=alert] { color:#f4c5c5; } | |
| #voice-options { max-width:640px; width:100%; margin:4px auto 0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; } | |
| #voice-options:not([data-open=true]) #reference-clip, #voice-options:not([data-clip=true]) #reference-clip { display:none; } | |
| #reference-clip { margin:12px 0 4px; --block-border-width:0px; --block-background-fill:#0b0b0b; --block-background-fill-dark:#0b0b0b; } | |
| #app-credits { margin-top:55px; border:0; padding:0; background:transparent; } | |
| .credits { display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; flex-wrap:wrap; color:#a6a6a6; font:11px/1.7 ui-monospace,monospace; } | |
| .credits p { margin:0; } | |
| .credits details { font:inherit; } | |
| .credits summary { min-height:30px; } | |
| .credits details p { max-width:600px; margin-top:8px; } | |
| #preview-warning { text-align:center; color:#e5c078; font:12px/1.5 ui-monospace,monospace; } | |
| button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid #eee; outline-offset:4px; } | |
| @media(max-width:600px) { | |
| #app-header { margin-bottom:45px; } | |
| .app-header { font-size:11px; gap:12px; } | |
| #speech-player { margin-top:6px; } | |
| #voice-picker { margin-bottom:20px; } | |
| #action-row { width:100%; gap:10px; } | |
| #voice-options { margin-top:8px; } | |
| #app-credits { margin-top:38px; } | |
| .credits { justify-content:center; text-align:center; gap:7px; } | |
| .credits p, .credits details { width:100%; } | |
| } | |
| @media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } } | |
| #script-input { --block-padding:0px; width:100%; margin-bottom:12px; } | |
| #reference-clip { background:transparent; border:0; --block-padding:0px; } | |