/* AI Voice Tool web client styles (look carried over from the original Gradio theme) */ :root { --bg: #002439; --block: #374151; --block-2: #2b3544; --border: #4b5563; --text: #ffffff; --muted: #b8c2cc; --accent: #ff6600; --primary: #58a9ec; --primary-ink: #04223a; --slider: #3174ac; --label: #576474; --ok: #34c77b; --bad: #ff6b6b; --tag-bg: #eef2ff; --tag-border: #c7d2fe; --tag-ink: #3730a3; --subtitle: #dddddd; --chip: #babfc7; --chip-ink: #1f2937; --chip-on: #6366f1; --track: #bcbcbc; --thumb-border: #ffffff; --progress-bg: #1f2937; --tab-white-border: #ffffff; --wave: #8796a8; --region: rgba(255, 102, 0, 0.25); --radius: 10px; color-scheme: dark; } /* Light palette. data-theme is set before first paint by index.html and kept in sync by ui.js (browser light/dark setting, or the manual toggle in the header). */ :root[data-theme="light"] { --bg: #f3f6f9; --block: #e3e8ee; --block-2: #ffffff; --border: #c5cfda; --text: #0f2433; --muted: #556270; --accent: #c94f00; --primary: #1f6fb8; --primary-ink: #ffffff; --slider: #2b6ca3; --label: #576474; --ok: #17804a; --bad: #c93636; --subtitle: #3d4a57; --chip: #dde2e8; --chip-ink: #1f2937; --chip-on: #6366f1; --track: #c9cfd6; --thumb-border: #ffffff; --progress-bg: #d5dce4; --tab-white-border: var(--border); --wave: #8a97a6; --region: rgba(201, 79, 0, 0.2); color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.5; } h1, h2, h3 { color: var(--text); margin: 0 0 .5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1.05rem; } code { background: var(--block); padding: 0 .3em; border-radius: 4px; font-size: .9em; } a { color: var(--primary); } [hidden] { display: none !important; } /* --------------------------- Header --------------------------- */ .site-header { text-align: center; padding: 16px 16px 0; max-width: 1200px; margin: 0 auto; } .site-header h1 { font-size: 2.5em; margin-bottom: .25rem; } .subtitle { font-size: 1.2em; color: var(--subtitle); margin: 0; } .banner { width: 100%; max-width: 900px; display: block; margin: 20px auto; border-radius: 14px; } .topbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 28px; font-size: .85rem; flex-wrap: wrap; } .account { color: var(--muted); } .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; background: var(--block); } .pill-ok, .pill-done { background: rgba(52, 199, 123, .18); color: var(--ok); } .pill-bad, .pill-failed { background: rgba(255, 107, 107, .18); color: var(--bad); } .pill-queued, .pill-processing { background: rgba(88, 169, 236, .18); color: var(--primary); } .pill-muted { color: var(--muted); } /* --------------------------- Buttons and fields --------------------------- */ button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid transparent; padding: 8px 16px; } button:disabled { opacity: .5; cursor: not-allowed; } button.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; } button.secondary { background: var(--block); border-color: var(--border); color: var(--text); } button.big { width: 100%; padding: 12px; font-size: 1.05rem; margin-top: 8px; } button:not(:disabled):hover { filter: brightness(1.1); } .link-btn { background: none; border: none; color: var(--primary); padding: 2px 4px; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .field-label, .field > span:first-child, legend { font-weight: 600; font-size: .9rem; } .field small, .hint { color: var(--muted); font-size: .8rem; } input:not([type]), input[type="number"], input[type="text"], input[type="password"], select, textarea { font: inherit; color: var(--text); background: var(--block-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; width: 100%; } select:disabled { opacity: .7; } textarea { resize: vertical; } input[type="file"] { color: var(--muted); max-width: 100%; } fieldset.radios { border: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; } fieldset.radios legend { width: 100%; margin-bottom: 4px; padding: 0; } fieldset.radios label { background: var(--chip); color: var(--chip-ink); border-radius: 8px; padding: 6px 12px; cursor: pointer; display: flex; gap: 6px; align-items: center; } fieldset.radios label:has(input:checked) { background: var(--chip-on); color: #fff; } fieldset.radios label:has(input:disabled) { opacity: .4; cursor: not-allowed; } fieldset.radios .hint { width: 100%; } .field.range { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; } .field.range input[type="range"] { grid-column: 1; } .field.range output { grid-column: 2; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; } .field.range small { grid-column: 1 / -1; } input[type="range"] { accent-color: var(--slider); width: 100%; background: linear-gradient(to right, var(--slider) var(--fill, 50%), var(--track) var(--fill, 50%)); height: 6px; border-radius: 3px; appearance: none; } input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--slider); border: 2px solid var(--thumb-border); } details { background: var(--block); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; } details > summary { cursor: pointer; font-weight: 600; } details[open] > summary { margin-bottom: 10px; } .tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 14px; } .tag-btn { height: 32px; font-size: 13px; background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--tag-ink); border-radius: 6px; padding: 0 10px; } .tag-btn:hover { background: var(--tag-border); } audio { width: 100%; height: 40px; } audio.preview { margin: -6px 0 14px; } /* --------------------------- Setup --------------------------- */ .setup { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; } .card { background: var(--block); border-radius: var(--radius); padding: 16px 20px; } .card.warn { border-left: 4px solid var(--accent); margin-bottom: 12px; } .signin { max-width: 420px; margin: 24px auto 0; } .signin input { width: 100%; } .signin .error { margin-bottom: 0; } /* "Sign in with Google": white button with the Google logo, per Google's branding guidance */ .google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; padding: 11px 16px; border-radius: 8px; background: #fff; color: #1f1f1f; border: 1px solid #747775; font-weight: 600; text-decoration: none; } .google-btn:hover { background: #f2f2f2; } .google-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .error { color: var(--bad); margin: 8px 0 0; } .error:empty { display: none; } /* --------------------------- App layout --------------------------- */ #app { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; } .tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .tabs button { background: none; color: var(--text); border-radius: 8px 8px 0 0; padding: 10px 14px; } .tabs button:hover { background: var(--block); } .tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--border); border-bottom-color: var(--bg); margin-bottom: -1px; background: var(--bg); } /* Highlighted tab (YummyBuddies RVC): white button, orange text when selected */ .tabs button.tab-white { background: #fff; color: #002439; border-color: var(--tab-white-border); font-weight: 600; } .tabs button.tab-white:hover { background: #e6edf3; } /* YummyBuddies mascot, sized like an emoji without growing the tab/button. Flex centring lines it up with the text's true middle (vertical-align: middle uses the x-height, which sits too low). */ button:has(> .yb-icon) { display: inline-flex; align-items: center; justify-content: center; gap: .4em; } .yb-icon { height: 1.6em; width: auto; margin: -.3em 0; } .tabs button.tab-white[aria-selected="true"] { color: var(--accent); border-color: var(--tab-white-border); border-bottom-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); } .family-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .family-btn { height: 72px; font-size: 20px; font-weight: 600; border-radius: var(--radius); background: var(--block); color: var(--text); border: 1px solid var(--border); opacity: .4; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity .15s ease; } .family-btn.active { opacity: 1; border-color: var(--primary); } .family-btn.unsupported::after { content: "unsupported"; font-size: 11px; font-weight: 400; } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } @media (max-width: 860px) { .cols { grid-template-columns: 1fr; } } .col { min-width: 0; } .prose { margin-bottom: 12px; } .prose p, .prose ul, .prose ol { margin: 0 0 .5rem; } .prose ul, .prose ol { padding-left: 1.25rem; } .tips { margin-top: 16px; } /* Output column */ .output { background: var(--block-2); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .block-label { display: inline-block; background: var(--label); color: #fff; font-size: .75rem; padding: 2px 8px; border-radius: 4px; margin: 0 0 6px; } .progress { height: 10px; background: var(--progress-bg); border-radius: 5px; overflow: hidden; margin-bottom: 14px; } .progress .bar { height: 100%; width: 0; background: var(--slider); transition: width .3s ease; } pre.status { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .9rem; background: var(--block); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; min-height: 4.5em; } pre.status.small { min-height: 0; } pre.status.small:empty { display: none; } .results { display: grid; gap: 10px; } .result { background: var(--block); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; } .result-label { font-weight: 600; } .result-name { font-size: .75rem; color: var(--muted); word-break: break-all; } .field.batch input { max-width: 7rem; } @keyframes flash { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 3px transparent; } } input.flash { animation: flash 1.2s ease-out; } .result-actions { display: flex; gap: 8px; } .muted { color: var(--muted); margin: 0; } .audio-input { display: grid; gap: 8px; } .audio-input-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .audio-input .or { color: var(--muted); font-size: .85rem; } .rec-time { font-variant-numeric: tabular-nums; color: var(--bad); } .wave-live { background: var(--block); border-radius: 8px; padding: 6px 10px; } .input-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } /* Waveform player (wavesurfer.js) */ .wave { display: flex; align-items: center; gap: 10px; background: var(--block); border-radius: 8px; padding: 6px 10px; } .wave-canvas { flex: 1; min-width: 0; } .wave-play { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: .9rem; line-height: 1; } .wave-time { flex: none; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right; } .wave:has(+ audio.preview) { margin: -6px 0 14px; } /* preview waveform sits just before its