Origem: D:/Documents/Github/transcript Arquivos omitidos (segredos, bancos de dados, logs, >50 MB): 2
1315 lines
26 KiB
HTML
1315 lines
26 KiB
HTML
<!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> |