Spaces:
Running on Zero
Running on Zero
| /* Palette, spacing and typography carried over from the original studio. */ | |
| :root, .gradio-container { | |
| --bg: #f6f5f3; --card: #fff; --soft: #efede9; --ink: #141414; | |
| --muted: #6b6b66; --border: #e2e0dc; --card-border: #e8e6e2; | |
| --moment-bg: #fbe9c4; --moment-ink: #7d4b00; | |
| --scope-bg: #d9ebfa; --scope-ink: #0b5687; | |
| --mood-bg: #ebe1fa; --mood-ink: #56289e; | |
| --body-background-fill: var(--bg); --body-text-color: var(--ink); | |
| --block-background-fill: var(--card); --input-background-fill: var(--card); | |
| --border-color-primary: var(--border); --block-border-color: var(--border); | |
| --button-primary-background-fill: var(--ink); --button-primary-text-color: var(--bg); | |
| --button-primary-background-fill-hover: #30302d; | |
| --button-secondary-background-fill: var(--card); --button-secondary-border-color: var(--border); | |
| --button-secondary-text-color: var(--ink); --button-secondary-background-fill-hover: var(--soft); | |
| --input-border-color: var(--border); --input-radius: 12px; | |
| --block-label-text-color: var(--muted); --block-title-text-color: var(--ink); | |
| --body-text-color-subdued: var(--muted); | |
| font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, sans-serif ; | |
| } | |
| .dark, .dark .gradio-container { | |
| --bg: #161615; --card: #201f1d; --soft: #2a2826; --ink: #f3f2ef; | |
| --muted: #a8a7a1; --border: #35332f; --card-border: #35332f; | |
| --moment-bg: #463312; --moment-ink: #ffd68a; | |
| --scope-bg: #133852; --scope-ink: #a3d4fa; | |
| --mood-bg: #37245b; --mood-ink: #d9c4ff; | |
| --button-primary-background-fill-hover: #deddd8; | |
| } | |
| body { background: var(--bg); } | |
| .gradio-container { max-width: 980px ; margin: auto; padding: 26px 32px 48px ; } | |
| #studio { gap: 16px; } | |
| .hero { margin: 20px 0 8px; } | |
| .hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 10px; color: var(--ink); } | |
| .hero p { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 640px; } | |
| .hero p + p { margin-top: 10px; } | |
| .hero strong { color: var(--ink); font-weight: 600; } | |
| .hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } | |
| .spacer { flex: 1; } | |
| .pill { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; padding: 5px 14px; text-decoration: none; } | |
| .dot { width: 7px; height: 7px; border-radius: 50%; background: #b7791f; } | |
| .dot.ready { background: #1f9d55; box-shadow: 0 0 0 3px #1f9d5526; } | |
| .account { position: relative; } | |
| .account summary { cursor: pointer; } | |
| .account a { position: absolute; right: 0; z-index: 10; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px; color: var(--ink); } | |
| .card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 2px #1414140a; padding: 14px ; gap: 10px ; } | |
| .card-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; } | |
| .card-head h2 { font-size: 14px; font-weight: 600; color: var(--ink); } | |
| #app-tabs { border: 0; } | |
| #app-tabs > .tab-nav { margin-bottom: 16px; border: 0; } | |
| #app-tabs > .tabitem { padding: 0; border: 0; background: transparent; } | |
| #app-tabs > .tab-nav button { border-radius: 999px; padding: 7px 18px; color: var(--muted); } | |
| #app-tabs > .tab-nav button.selected { background: var(--card); color: var(--ink); border-color: var(--border); } | |
| #script textarea { font-size: 16px; line-height: 1.6; min-height: 120px; border-radius: 12px; } | |
| .hint, .hint p { color: var(--muted); font-size: 12.5px; } | |
| .examples { flex-wrap: wrap ; gap: 6px ; } | |
| .examples button { flex: 0 1 auto; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; height: 29px; min-height: 29px; font-weight: 500; } | |
| .palette { gap: 5px ; align-items: center; flex-wrap: wrap ; } | |
| .palette .plabel { width: 60px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } | |
| .palette button { flex: 0 1 auto; min-height: 25px; height: auto; padding: 3px 9px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; } | |
| .palette.point button { background: var(--moment-bg); color: var(--moment-ink); } | |
| .palette.scope button { background: var(--scope-bg); color: var(--scope-ink); } | |
| .palette.mood button { background: var(--mood-bg); color: var(--mood-ink); } | |
| #voice-mode .wrap { display: flex; flex-wrap: nowrap; background: var(--soft); border-radius: 999px; padding: 3px; gap: 3px; } | |
| #voice-mode label { flex: 1; justify-content: center; border: 0; border-radius: 999px; background: transparent; padding: 7px 6px; } | |
| #voice-mode input, #voice-presets input { position: absolute; opacity: 0; width: 1px; height: 1px; } | |
| #voice-mode label.selected, #voice-mode label:has(input:checked) { background: var(--card); box-shadow: 0 1px 2px #14141414; } | |
| #voice-presets label { border-radius: 999px; padding: 4px 12px; font-size: 12.5px; } | |
| #voice-presets label.selected, #voice-presets label:has(input:checked) { background: var(--ink); color: var(--bg); } | |
| #perform { border-radius: 999px; padding: 13px 20px; font-size: 16px; min-height: 50px; } | |
| .direct h3 { font-size: 14px; margin-top: 8px; } | |
| .boot { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; } | |
| .boot p { color: var(--muted); font-size: 13px; margin-top: 4px; } | |
| .links { display: flex; gap: 8px; flex-wrap: wrap; } | |
| .links a { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; text-decoration: none; color: var(--ink); } | |
| .links a:hover { border-color: var(--ink); } | |
| .credits, .fine { color: var(--muted); font-size: 12px; line-height: 1.6; } | |
| .credits p { margin-top: 8px; } | |
| code { background: var(--soft); padding: 0 4px; border-radius: 5px; } | |
| @media (max-width: 640px) { | |
| .gradio-container { padding: 16px 12px 32px ; } | |
| .hero { margin-top: 8px; } | |
| .card { padding: 12px ; } | |
| #voice-mode label { font-size: 12px; } | |
| } | |
| .gradio-container #topbar { align-items: center; gap: 8px; } | |
| .gradio-container #theme-toggle { border: 0; border-radius: 50%; width: 32px; height: 32px; min-height: 32px; padding: 0; background: var(--card); color: var(--ink); } | |
| .gradio-container .examples button { background: var(--card); border: 1px solid var(--border); color: var(--ink); } | |
| .gradio-container .card-head h2 { margin: 0; } | |
| .gradio-container .card .hide-container { padding: 0; } | |
| .gradio-container #app-tabs > div[role="tablist"] { margin-bottom: 16px; border: 0; } | |
| .gradio-container #app-tabs > div[role="tablist"] button { border-radius: 999px; padding: 7px 18px; } | |
| .gradio-container #app-tabs > div[role="tablist"] button[aria-selected="true"] { background: var(--card); color: var(--ink); border: 1px solid var(--border); } | |
| .gradio-container .drama-script-mirror { position: absolute; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden; color: var(--ink); background: transparent; box-sizing: border-box; } | |
| .drama-script-mirror .h-point { background: var(--moment-bg); color: var(--moment-ink); border-radius: 4px; } | |
| .drama-script-mirror .h-tag { background: var(--scope-bg); color: var(--scope-ink); border-radius: 4px; } | |
| .drama-script-mirror .h-style { background: var(--mood-bg); color: var(--mood-ink); border-radius: 4px; } | |
| .drama-script-mirror .h-note { background: #e3f1e3; color: #2a662d; border-radius: 4px; } | |
| .dark .drama-script-mirror .h-note { background: #1e3a20; color: #b5e3b7; } | |
| #script textarea.drama-highlighted { color: transparent ; caret-color: var(--ink); } | |
| #script textarea.drama-highlighted::selection { background: #7878ff47; color: transparent; } | |
| .gradio-container .drama-script-mirror { z-index: 2; } | |
| .gradio-container #app-tabs .tab-nav { margin-bottom: 16px; border-bottom: 0; } | |
| .gradio-container #app-tabs .tab-nav button[role="tab"] { border-radius: 999px; } | |
| .gradio-container #app-tabs .tab-nav button[aria-selected="true"] { background: var(--card); border: 1px solid var(--border); } | |
| /* Gradio scopes media rules to .contain, so responsive padding belongs to the | |
| inner studio instead of .gradio-container. Remove the native outer padding. */ | |
| .gradio-container { padding: 0 ; } | |
| .gradio-container .main { padding: 0 ; width: 100%; } | |
| #studio { padding: 26px 32px 48px; } | |
| @media (max-width: 640px) { #studio { padding: 16px 12px 32px; } } | |
| .gradio-container .palette { justify-content: flex-start; } | |
| .gradio-container .palette > .block { flex: 0 0 72px ; width: 72px; min-width: 72px ; } | |
| .gradio-container #voice-presets label { border: 1px solid var(--border); } | |
| /* The stage is a custom Gradio HTML component, with the original player styling. */ | |
| #studio:not([data-stage-busy="true"]):not([data-stage-playing="true"]) #stop { display: none; } | |
| #stop { border-radius: 999px; min-height: 50px; } | |
| #the-stage:not(.has-take) .stage-direct { display: none; } | |
| /* Keep the resources in the introduction, before the studio. */ | |
| .resource-links { gap: 8px; margin: 0 0 6px; } | |
| .resource-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 16px; background: var(--card); font-size: 14px; font-weight: 600; } | |
| .credits { font-size: 13px; } | |
| .credits h2 { margin: 0 0 10px; color: var(--ink); font-size: 16px; font-weight: 650; } | |
| @media (max-width: 640px) { | |
| .resource-links { gap: 7px; } | |
| .resource-links a { min-height: 40px; padding: 8px 12px; font-size: 13px; } | |
| } | |