Files
transcript/tmp-grid-check.html
T
evandrodevbr 06aaeeaf79 wip: snapshot das alterações não commitadas (2026-10-20)
Origem: D:/Documents/Github/transcript
Arquivos omitidos (segredos, bancos de dados, logs, >50 MB): 2
2026-10-20 00:50:17 -03:00

1315 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html><html><head><style>:root {
color-scheme: dark;
--font-sans:
"Aptos Display", "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
--font-mono:
"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Consolas,
monospace;
/* Superhuman-inspired: twilight violet, restrained cream, warm text. */
--color-bg-base: oklch(12% 0.018 292);
--color-bg-elevated: oklch(18% 0.024 292 / 0.76);
--color-bg-elevated-strong: oklch(21% 0.028 292 / 0.94);
--color-bg-input: oklch(14% 0.018 292 / 0.74);
--color-border-soft: oklch(86% 0.025 298 / 0.09);
--color-border-strong: oklch(86% 0.032 298 / 0.18);
--color-fg-primary: oklch(93% 0.018 82);
--color-fg-secondary: oklch(88% 0.018 82 / 0.72);
--color-fg-muted: oklch(86% 0.017 82 / 0.5);
--color-fg-subtle: oklch(84% 0.015 82 / 0.32);
--color-accent: oklch(78% 0.065 78);
--color-accent-strong: oklch(86% 0.062 78);
--color-accent-soft: oklch(78% 0.065 78 / 0.18);
--color-violet: oklch(68% 0.13 306);
--color-violet-soft: oklch(68% 0.13 306 / 0.16);
--color-success: oklch(75% 0.08 154);
--color-success-soft: oklch(75% 0.08 154 / 0.16);
--color-danger: oklch(72% 0.115 28);
--color-danger-soft: oklch(72% 0.115 28 / 0.16);
--shadow-elevated:
0 28px 90px oklch(4% 0.01 292 / 0.62), 0 2px 8px oklch(4% 0.01 292 / 0.42);
--shadow-pressed: inset 0 1px 0 oklch(100% 0 0 / 0.06);
--radius-md: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100vh;
background: transparent;
color: var(--color-fg-primary);
font-family: var(--font-sans);
font-size: 13px;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow: hidden;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: oklch(86% 0.032 298 / 0.16);
border: 2px solid transparent;
border-radius: 999px;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background-color: oklch(86% 0.032 298 / 0.26);
}
button,
textarea,
input,
select {
font: inherit;
color: inherit;
}
button {
border: 0;
cursor: pointer;
background: transparent;
padding: 0;
}
button:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
#app {
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Quando o texto está vazio, mantemos o layout bem compacto. */
body.has-text {
/* Permite a área de transcrição expandir dentro do app. */
--layout-extra: 240px;
}
body.is-recording:not(.has-text) {
--layout-extra: 0px;
}
body.preview-open {
--layout-extra: 240px;
}
.transcript-root {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
isolation: isolate;
background:
radial-gradient(circle at 16% -8%, oklch(68% 0.13 306 / 0.18), transparent 18rem),
radial-gradient(circle at 90% 110%, oklch(78% 0.065 78 / 0.1), transparent 24rem),
linear-gradient(180deg, oklch(17% 0.026 292) 0%, oklch(9% 0.014 292) 100%);
}
.ambient-field {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: -1;
}
.ambient-field::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(oklch(100% 0 0 / 0.06) 0.6px, transparent 0.6px);
background-size: 18px 18px;
mask-image: linear-gradient(180deg, transparent, black 18%, black 72%, transparent);
opacity: 0.16;
}
.ambient-orb {
position: absolute;
border-radius: 999px;
filter: blur(16px);
transform: translateZ(0);
animation: ambient-drift 9s ease-in-out infinite alternate;
}
.ambient-orb.primary {
width: 210px;
height: 210px;
left: -96px;
top: -74px;
background: radial-gradient(circle, oklch(68% 0.13 306 / 0.32), transparent 62%);
}
.ambient-orb.secondary {
width: 180px;
height: 180px;
right: -92px;
bottom: -82px;
background: radial-gradient(circle, oklch(78% 0.065 78 / 0.22), transparent 64%);
animation-delay: -4s;
}
.ambient-grid {
position: absolute;
inset: 52px 18px auto;
height: 1px;
background: linear-gradient(90deg, transparent, oklch(86% 0.032 298 / 0.22), transparent);
}
@keyframes ambient-drift {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(18px, 10px, 0) scale(1.08);
}
}
/* ============================== Topbar ============================== */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 9px 5px;
min-height: 40px;
background: linear-gradient(180deg, oklch(20% 0.027 292 / 0.78), transparent);
border-bottom: 1px solid oklch(86% 0.032 298 / 0.055);
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
}
.topbar-drag-region {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
-webkit-app-region: drag;
app-region: drag;
}
.brand-group {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.brand-mark-shell {
width: 23px;
height: 23px;
display: grid;
place-items: center;
flex: 0 0 auto;
opacity: 0.92;
}
.brand-mark {
width: 20px;
height: auto;
display: block;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
}
.brand-text {
display: flex;
align-items: center;
min-width: 0;
}
.title {
margin: 0;
font-size: 0.9rem;
font-weight: 690;
letter-spacing: -0.028em;
color: var(--color-fg-primary);
white-space: nowrap;
}
.subtitle {
margin: 0 3px 0 0;
padding: 0 6px;
border-radius: var(--radius-pill);
background: oklch(100% 0 0 / 0.045);
color: var(--color-fg-muted);
font-family: var(--font-mono);
font-size: 0.62rem;
line-height: 18px;
}
.window-controls {
display: flex;
align-items: center;
gap: 2px;
-webkit-app-region: no-drag;
app-region: no-drag;
}
.control-button {
width: 28px;
height: 28px;
border-radius: 8px;
background: transparent;
color: var(--color-fg-secondary);
display: grid;
place-items: center;
transition:
background-color 120ms ease,
color 120ms ease,
transform 120ms ease;
}
.control-button svg,
.control-button .lucide-icon {
width: 14px;
height: 14px;
}
.control-button:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--color-fg-primary);
}
.control-button:active {
transform: scale(0.96);
}
.control-button.close-button:hover {
background: var(--color-danger-soft);
color: var(--color-danger);
}
/* ============================== Main ============================== */
.main {
flex: 1 1 auto;
min-height: 0;
margin: 8px 10px 10px;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.status-row {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 22px;
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--radius-pill);
background: var(--color-success-soft);
color: var(--color-success);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
}
.status-pill::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
}
.status-pill[data-state="recording"] {
background: var(--color-danger-soft);
color: var(--color-danger);
animation: pulse-recording 1.6s ease-in-out infinite;
}
.status-pill[data-state="transcribing"] {
background: var(--color-accent-soft);
color: var(--color-accent-strong);
}
@keyframes pulse-recording {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.55;
}
}
/* Content principal — compacto por padrão, expande com texto. */
.content {
order: 2;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
border-radius: 0;
background: transparent;
border: 0;
}
/* Ações primárias (sempre visíveis) */
.actions {
display: grid;
grid-template-columns: minmax(116px, 1fr) repeat(4, 36px);
gap: 6px;
align-items: center;
}
/* Ações secundárias — visíveis só com texto */
.secondary-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
opacity: 0;
max-height: 0;
overflow: hidden;
transition:
opacity 180ms ease,
max-height 220ms ease;
}
body.has-text .secondary-actions {
opacity: 1;
max-height: 80px;
}
body:not(.has-text) .secondary-actions {
pointer-events: none;
}
/* Botão principal de gravação */
.record-button {
min-height: 42px;
padding: 0 12px;
border-radius: 14px;
font-weight: 760;
font-size: 0.86rem;
letter-spacing: -0.015em;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(180deg, oklch(88% 0.055 78), oklch(70% 0.073 70));
color: oklch(18% 0.03 70);
box-shadow:
inset 0 1px 0 oklch(100% 0 0 / 0.38),
0 12px 26px oklch(78% 0.065 78 / 0.2);
transition:
filter 180ms cubic-bezier(0.32, 0.72, 0, 1),
transform 120ms cubic-bezier(0.32, 0.72, 0, 1),
opacity 120ms ease;
}
.record-button:hover {
filter: brightness(1.06) saturate(1.05);
}
.record-button:active {
transform: scale(0.98);
}
.record-button.is-loading {
background: var(--color-accent-soft);
color: var(--color-accent-strong);
cursor: progress;
}
body.is-recording .record-button {
background: linear-gradient(180deg, #e58a82 0%, #c46a64 100%);
color: #1a0606;
box-shadow:
0 0 0 2px rgba(229, 138, 130, 0.4),
0 6px 20px rgba(229, 138, 130, 0.32);
}
body.is-recording .record-button .lucide-icon {
animation: pulse-icon 1.4s ease-in-out infinite;
}
@keyframes pulse-icon {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.12);
}
}
.record-button .record-label {
font-weight: 600;
}
/* Hotkey exibida em cinza dentro do botão de gravação.
Quando vazia, .record-hotkey não ocupa espaço (zero-width). */
.record-hotkey {
margin-left: 8px;
padding-left: 10px;
border-left: 1px solid rgba(26, 17, 8, 0.25);
font-size: 0.72rem;
font-weight: 500;
color: rgba(26, 17, 8, 0.55);
font-family: var(--font-mono);
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
}
.record-hotkey:empty {
display: none;
}
/* Botões secundários */
.secondary-button,
.ghost-button {
min-height: 36px;
padding: 0 var(--space-3);
border-radius: 12px;
font-weight: 650;
font-size: 0.78rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition:
background-color 180ms cubic-bezier(0.32, 0.72, 0, 1),
color 180ms cubic-bezier(0.32, 0.72, 0, 1),
border-color 180ms cubic-bezier(0.32, 0.72, 0, 1),
transform 120ms cubic-bezier(0.32, 0.72, 0, 1),
opacity 120ms ease;
}
.secondary-button {
background: rgba(255, 255, 255, 0.07);
color: var(--color-fg-primary);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
.secondary-button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.115);
border-color: rgba(255, 255, 255, 0.18);
transform: translateY(-1px);
}
.ghost-button {
background: rgba(255, 255, 255, 0.025);
color: var(--color-fg-secondary);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.ghost-button:hover:not(:disabled) {
color: var(--color-fg-primary);
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.055);
transform: translateY(-1px);
}
.secondary-button.compact,
.ghost-button.compact {
font-size: 0.74rem;
padding: 0 10px;
min-height: 34px;
}
.actions > .secondary-button.compact,
.actions > .ghost-button.compact {
width: 36px;
min-height: 36px;
padding: 0;
}
.actions > .secondary-button.compact .button-label,
.actions > .ghost-button.compact .button-label {
display: none;
}
.secondary-button:disabled,
.ghost-button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Mensagem de status (sutil) */
.message {
margin: 0;
min-height: 1.1rem;
color: var(--color-fg-muted);
font-size: 0.74rem;
line-height: 1.4;
}
/* ============================== Editor (área de texto) ============================== */
.editor-wrap {
order: 1;
display: flex;
flex: 1 1 auto;
min-height: 0;
flex-direction: column;
gap: 6px;
overflow: hidden;
}
.editor-label {
color: var(--color-fg-secondary);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.transcript-editor {
width: 100%;
min-height: 0;
flex: 1;
resize: none;
padding: 12px 13px;
border-radius: 16px;
border: 1px solid var(--color-border-soft);
background:
linear-gradient(180deg, oklch(100% 0 0 / 0.04), transparent),
var(--color-bg-input);
color: var(--color-fg-primary);
font-size: 0.85rem;
line-height: 1.5;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
border-color 120ms ease,
box-shadow 120ms ease;
overflow-y: auto;
}
.transcript-editor::placeholder {
color: var(--color-fg-subtle);
}
.transcript-editor:hover {
border-color: var(--color-border-strong);
}
.transcript-editor:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-soft);
outline: none;
}
/* ============================== Diagnostics ============================== */
/* Escondido por padrão. Só aparece quando o usuário clica no summary. */
.diagnostics {
order: 3;
margin-top: 0;
padding-top: 0;
}
.diagnostics > .diagnostics-summary {
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--color-border-soft);
color: var(--color-fg-muted);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
user-select: none;
transition:
background-color 120ms ease,
color 120ms ease,
border-color 120ms ease;
}
.diagnostics > .diagnostics-summary::-webkit-details-marker {
display: none;
}
.diagnostics > .diagnostics-summary::before {
content: "›";
font-size: 0.85rem;
line-height: 1;
color: var(--color-fg-subtle);
transition: transform 160ms ease;
}
.diagnostics[open] > .diagnostics-summary::before {
transform: rotate(90deg);
}
.diagnostics > .diagnostics-summary:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--color-fg-primary);
border-color: var(--color-border-strong);
}
.diagnostics-body {
margin: 8px 0 0 0;
padding: 10px 12px;
border-radius: 8px;
background: var(--color-bg-input);
border: 1px solid var(--color-border-soft);
font-family: var(--font-mono);
font-size: 0.7rem;
line-height: 1.55;
color: var(--color-fg-secondary);
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
max-height: 120px;
overflow-y: auto;
}
/* ============================== Settings ============================== */
.settings-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
display: grid;
place-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
z-index: 10;
}
.settings-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.settings-panel {
width: min(360px, calc(100vw - 20px));
max-height: calc(100vh - 20px);
display: flex;
flex-direction: column;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
background:
radial-gradient(circle at 18% 0%, rgba(211, 167, 132, 0.13), transparent 18rem),
linear-gradient(180deg, rgba(25, 22, 30, 0.98), rgba(8, 8, 11, 0.99));
backdrop-filter: blur(30px) saturate(165%);
-webkit-backdrop-filter: blur(30px) saturate(165%);
box-shadow:
0 34px 90px rgba(0, 0, 0, 0.58),
inset 0 1px 0 rgba(255, 255, 255, 0.09);
transform: translateY(8px) scale(0.98);
transition: transform 180ms ease;
}
.settings-overlay.is-open .settings-panel {
transform: translateY(0) scale(1);
}
.settings-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.settings-title {
margin: 0;
font-size: 0.98rem;
font-weight: 700;
letter-spacing: -0.03em;
}
.icon-button {
width: 28px;
height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
color: var(--color-fg-muted);
transition:
background-color 120ms ease,
color 120ms ease;
}
.icon-button svg,
.icon-button .lucide-icon {
width: 14px;
height: 14px;
}
.icon-button:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--color-fg-primary);
}
.settings-body {
padding: 6px 14px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0;
}
.settings-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.settings-card {
padding: 12px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.settings-card + .settings-card {
border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.api-settings-card[data-active="false"] {
display: none;
}
.settings-group h3 {
margin: 0;
font-size: 0.68rem;
font-weight: 760;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent-strong);
}
.settings-hint {
margin: -3px 0 0;
font-size: 0.71rem;
line-height: 1.32;
color: var(--color-fg-muted);
}
.settings-note {
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: rgba(245, 243, 240, 0.56);
font-size: 0.68rem;
line-height: 1.32;
}
.settings-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.settings-field-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--color-fg-secondary);
}
.settings-field-input {
width: 100%;
min-height: 32px;
padding: 7px 9px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(6, 6, 9, 0.5);
color: var(--color-fg-primary);
font-size: 0.78rem;
transition:
border-color 120ms ease,
box-shadow 120ms ease,
background-color 120ms ease;
}
.settings-field-input:hover {
border-color: var(--color-border-strong);
}
.settings-field-input:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-soft);
outline: none;
}
.settings-field-input::placeholder {
color: var(--color-fg-subtle);
}
.mode-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mode-option {
position: relative;
display: block;
cursor: pointer;
}
.mode-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mode-option-body {
display: flex;
min-height: 76px;
flex-direction: column;
justify-content: space-between;
gap: 8px;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 13px;
background: rgba(255, 255, 255, 0.03);
transition:
border-color 140ms ease,
background-color 140ms ease,
transform 140ms ease;
}
.mode-option:hover .mode-option-body {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.05);
}
.mode-option[data-active="true"] .mode-option-body {
border-color: rgba(233, 190, 149, 0.45);
background: rgba(211, 167, 132, 0.09);
}
.mode-option-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
}
.mode-option-title {
font-size: 0.8rem;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-fg-primary);
}
.mode-option-badge {
padding: 2px 6px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.06);
color: var(--color-fg-muted);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mode-option-description {
font-size: 0.68rem;
line-height: 1.26;
color: var(--color-fg-muted);
}
.mode-option[data-active="true"] .mode-option-badge {
background: var(--color-accent-soft);
color: var(--color-accent-strong);
}
.settings-check {
display: grid;
grid-template-columns: 18px 1fr;
gap: 9px;
align-items: start;
padding: 9px 0;
border: 0;
border-radius: 0;
background: transparent;
cursor: pointer;
}
.settings-check input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.settings-check-indicator {
width: 18px;
height: 18px;
margin-top: 1px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(6, 6, 9, 0.52);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.settings-check input:checked + .settings-check-indicator {
border-color: rgba(233, 190, 149, 0.65);
background: linear-gradient(
135deg,
rgba(233, 190, 149, 0.95),
rgba(211, 167, 132, 0.75)
);
box-shadow:
0 0 0 3px rgba(211, 167, 132, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.settings-check-body {
display: flex;
flex-direction: column;
gap: 3px;
}
.settings-check-title {
font-size: 0.8rem;
font-weight: 680;
color: var(--color-fg-primary);
}
.settings-check-description {
font-size: 0.72rem;
line-height: 1.36;
color: var(--color-fg-muted);
}
.settings-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.key-status {
font-size: 0.7rem;
color: var(--color-fg-muted);
padding: 3px 8px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border-soft);
}
.key-status[data-state="ok"] {
background: var(--color-success-soft);
color: var(--color-success);
border-color: transparent;
}
.secondary-button.small,
.ghost-button.small {
min-height: 28px;
padding: 0 10px;
font-size: 0.72rem;
}
.settings-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 10px 14px 14px;
border-top: 1px solid rgba(255, 255, 255, 0.075);
background: rgba(0, 0, 0, 0.08);
}
.settings-footer .primary-button,
.settings-footer .ghost-button {
min-height: 32px;
font-size: 0.78rem;
padding: 0 var(--space-3);
}
.settings-footer .primary-button {
background: var(--color-accent);
color: #1a1108;
font-weight: 600;
}
.settings-footer .primary-button:hover {
background: var(--color-accent-strong);
}
/* ===================== Hotkey dictation island ===================== */
.dictation-overlay {
display: none;
}
html.dictation-mode,
html.dictation-mode body,
html.dictation-mode #app,
html.dictation-mode .transcript-root,
body.dictation-mode,
body.dictation-mode #app,
body.dictation-mode .transcript-root {
background: transparent !important;
}
body.dictation-mode .ambient-field,
body.dictation-mode .topbar,
body.dictation-mode .main,
body.dictation-mode .settings-overlay {
display: none;
}
body.dictation-mode .dictation-overlay {
display: grid;
position: fixed;
inset: 0;
place-items: center;
padding: clamp(12px, 4vh, 18px) clamp(18px, 6vw, 28px);
border: 1px solid oklch(86% 0.032 298 / 0.16);
border-radius: 999px;
background:
radial-gradient(circle at 50% 0%, var(--color-violet-soft), transparent 13rem),
linear-gradient(180deg, oklch(22% 0.03 292 / 0.97), oklch(12% 0.018 292 / 0.985));
box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.11);
overflow: hidden;
transform: none;
}
.dictation-controls {
display: grid;
width: 28px;
height: 28px;
place-items: center;
}
.island-control {
position: relative;
width: 26px;
min-width: 26px;
min-height: 26px;
padding: 0;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
background: oklch(18% 0.026 292 / 0.92);
color: var(--color-fg-primary);
border: 1px solid oklch(86% 0.032 298 / 0.18);
box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.1);
}
.island-control:disabled {
opacity: 0.38;
cursor: default;
}
.island-control .lucide-icon {
width: 13px;
height: 13px;
}
.island-control .button-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.dictation-text {
display: grid;
min-width: 0;
justify-items: center;
text-align: center;
gap: 4px;
}
.dictation-title {
display: block;
max-width: min(320px, 76vw);
font-size: clamp(0.84rem, 3.2vw, 0.98rem);
line-height: 1;
letter-spacing: -0.018em;
font-weight: 760;
color: var(--color-fg-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dictation-hint {
display: none;
}
.waveform {
display: flex;
width: clamp(132px, 42vw, 220px);
height: clamp(28px, 18vh, 44px);
align-items: center;
justify-content: center;
gap: 3px;
overflow: hidden;
}
.waveform-bar {
width: 4px;
height: 100%;
border-radius: var(--radius-pill);
background: linear-gradient(180deg, var(--color-accent-strong), var(--color-accent));
opacity: 0.74;
transform: scaleY(var(--level, 0.22));
transform-origin: center;
transition: transform 70ms linear, opacity 70ms linear;
}
body.dictation-complete .waveform-bar {
background: var(--color-success);
opacity: 0.72;
}
body.dictation-mode .dictation-overlay {
grid-template-rows: auto auto;
grid-template-areas:
"copy"
"meter";
align-content: center;
justify-content: center;
gap: clamp(6px, 1.4vh, 10px);
}
body.dictation-has-action .dictation-overlay {
grid-template-rows: auto auto auto;
grid-template-areas:
"action"
"copy"
"meter";
}
body.dictation-mode .dictation-controls {
grid-area: action;
justify-self: center;
}
body.dictation-mode .dictation-text {
grid-area: copy;
justify-self: center;
}
body.dictation-mode .waveform {
grid-area: meter;
justify-self: center;
}
.dictation-overlay > .dictation-review {
display: none;
}
body.dictation-review-open .dictation-overlay {
grid-template-rows: minmax(0, 1fr) auto;
grid-template-areas:
"review"
"meter";
gap: 10px;
border-radius: 24px;
padding: 12px;
}
body.dictation-review-open .dictation-controls,
body.dictation-review-open .dictation-text {
display: none;
}
body.dictation-review-open .dictation-review {
grid-area: review;
display: grid;
width: 100%;
min-width: 0;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.dictation-review-header {
min-width: 0;
}
.dictation-review-title {
display: block;
font-size: 0.76rem;
letter-spacing: -0.015em;
color: var(--color-fg-primary);
}
.dictation-review-status {
display: block;
margin-top: 2px;
font-size: 0.64rem;
line-height: 1.25;
color: var(--color-fg-muted);
}
.dictation-review-editor {
grid-column: 1 / -1;
width: 100%;
max-height: 62px;
resize: none;
padding: 8px 9px;
border: 1px solid oklch(86% 0.032 298 / 0.1);
border-radius: 12px;
background: oklch(8% 0.014 292 / 0.45);
color: var(--color-fg-primary);
font-size: 0.78rem;
line-height: 1.35;
}
.dictation-review-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
}
@keyframes island-rise {
to {
transform: none;
}
}
</style></head><body class="dictation-mode"><section class="dictation-overlay"><div class="dictation-controls"><button hidden class="island-control stop">x</button></div><div class="dictation-text"><strong class="dictation-title">Transcrevendo</strong></div><div class="waveform"><span class="waveform-bar"></span></div></section></body></html>