/* Editor — escuro e denso. Referência de densidade: Premiere, DaVinci, Ableton. Acromático de propósito: qualquer tinta em volta do preview distorce a leitura das cores do vídeo. A única cor saturada da tela é o frame. Todos os valores vêm de tokens.css. */ * { box-sizing: border-box; } /* Regras de classe com display: própria batem o [hidden] do navegador, que tem a mesma especificidade. */ [hidden] { display: none !important; } /* Pelo mesmo motivo do [hidden] acima: um display solto numa classe do diálogo passa por cima da regra do navegador e desenha o pop-up fechado na página. */ dialog:not([open]) { display: none !important; } html, body { height: 100%; margin: 0; /* O documento nunca rola: o wizard e o editor são cascas de 100vh e quem rola são as caixas de dentro, com a barra estilizada. Sem isto o Chrome ainda reporta uns 39px de folga fantasma no em telas baixas e desenha uma segunda barra, a dele, ao lado da nossa. */ overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 12px; -webkit-font-smoothing: antialiased; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } #editorRoot { display: grid; grid-template-rows: var(--h-topbar-e) minmax(0, 1fr) auto; /* A coluna tem que ser presa a largura da tela. Sem isto ela era "auto" e crescia com o conteudo: com dez versoes, a barra de chips do topo pedia 1.854px e empurrava previa, timeline e o painel inteiro para fora da tela. O painel acabava em 2.700px e o Salvar sumia. */ grid-template-columns: minmax(0, 1fr); height: 100vh; } .e-spacer { flex: 1; } .e-vdiv { width: 1px; height: 20px; background: var(--line-strong); flex: none; } /* Campo que existe só para guardar o valor: quem aparece é o segmented control ao lado. Precisa do #editorRoot na frente porque `#editorRoot select` tem especificidade de id e devolvia width:100% ao de dentro — que e absoluto e invisivel — escapava para o canto do documento, la embaixo. A pagina crescia 227px alem da janela e, ao clicar no rotulo, o navegador rolava tudo para "mostrar" o campo focado: a tela inteira subia e sobrava uma faixa cinza no rodape. */ position: relative; display: flex; align-items: center; gap: var(--s-3); height: var(--h-ctrl-e); padding: 0 var(--s-3); background: var(--e2); border: 1px solid var(--line-strong); border-radius: var(--r-md); font-size: 12px; color: var(--ink-soft); cursor: pointer; } .e-toggle input { position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0; } .e-toggle i { width: 12px; height: 12px; flex: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm); } .e-toggle:has(input:checked) { background: var(--e3); color: var(--ink); } .e-toggle:has(input:checked) i { background: var(--accent); border-color: var(--accent); } .e-toggle:has(input:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } /* campo de texto com barra inferior */ .e-textwrap { border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; background: var(--e1); } #editorRoot .e-textwrap textarea { border: 0; border-radius: 0; min-height: 64px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-body); } .e-textbar { display: flex; align-items: center; gap: var(--s-3); height: var(--h-ctrl-e); padding: 0 10px; background: var(--e2); border-top: 1px solid var(--line); } .e-emoji { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; background: var(--e3); border: 0; border-radius: var(--r-md); color: var(--ink-dim); font: inherit; font-size: 9px; cursor: pointer; } .e-emoji:hover { background: var(--e2); } .e-emoji img { display: block; } .e-count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-dim); } .e-count.passou { color: var(--err); } /* ---------------------------------------------------------- resultados */ .empty { padding: var(--s-5); color: var(--ink-dim); font-size: 11px; text-align: center; } .results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); } .results li { display: flex; justify-content: space-between; gap: var(--s-4); font-size: 11px; } .results a { color: var(--accent); text-decoration: none; } .results a:hover { text-decoration: underline; } .results .r-name { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --------------------------------------------------------------- timeline */ .e-timeline { height: var(--timeline-h); display: grid; grid-template-rows: var(--h-tl-bar) minmax(0, 1fr); border-top: 1px solid var(--line); background: var(--bg-panel); } .e-tlbar { display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--e1); border-bottom: 1px solid var(--line); } .e-zoom { display: flex; align-items: center; gap: var(--s-3); flex: none; } .e-zoom > span { font-size: 11px; color: var(--ink-soft); } #editorRoot .e-zoom input[type="range"] { width: 96px; flex: none; } .e-tlbody { display: grid; grid-template-columns: var(--wd-track-head) minmax(0, 1fr); min-height: 0; } /* A Saída leva a altura que sobra: com a timeline de 300px os clipes ficam altos o bastante para a miniatura dizer alguma coisa. */ .e-heads { display: grid; grid-template-rows: var(--h-ruler) var(--h-track-src) minmax(var(--h-track-out), 1fr); background: var(--e1); border-right: 1px solid var(--line); } .e-head { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--line-soft); } .e-head b { font-size: 11.5px; font-weight: 600; color: var(--ink); } .e-head > span:not(.e-head-top) { font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); } .e-tlscroll { overflow-x: auto; overflow-y: hidden; min-width: 0; background: var(--bg-sunken); } .e-tlinner { position: relative; min-width: 100%; height: 100%; display: grid; grid-template-rows: var(--h-ruler) var(--h-track-src) minmax(var(--h-track-out), 1fr); } /* régua */ .tl-ruler { position: relative; background: var(--e1); border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; } .tl-ruler .tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid #2A2A2E; padding-left: 4px; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-dim); line-height: var(--h-ruler); pointer-events: none; } .tl-ruler .tick.zero { border-left-color: var(--line-strong); } /* trilha Origem */ .tl-source { position: relative; border-bottom: 1px solid var(--line-soft); background: var(--bg); overflow: hidden; } .filmstrip { position: absolute; inset: 0; display: flex; overflow: hidden; opacity: .42; } .filmstrip img { height: 100%; flex: none; object-fit: cover; pointer-events: none; user-select: none; } .tl-blocks { position: absolute; inset: 0; } .tl-block { position: absolute; top: 50%; margin-top: -20px; height: 40px; min-width: 8px; background: rgba(8, 8, 10, .8); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: grab; overflow: hidden; } .tl-block:hover { background: var(--e2); } .tl-block.sel { background: var(--accent-wash); border-color: var(--accent); z-index: 2; } .tl-block .n { position: absolute; top: 3px; left: 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink); pointer-events: none; } .tl-block.sel .n { color: var(--accent); font-weight: 500; } .tl-block .len { position: absolute; bottom: 3px; left: 5px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-dim); pointer-events: none; } .tl-block .grip { position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; } .tl-block .grip.l { left: 0; } .tl-block .grip.r { right: 0; } .tl-block.sel .grip { background: rgba(224, 132, 39, .55); } .tl-block .grip:hover { background: var(--accent); } /* trilha Saída */ .tl-out { background: var(--bg-sunken); padding: 10px 0; min-width: 0; min-height: 0; } .clip-track { display: flex; gap: var(--s-1); height: 100%; } .clip { position: relative; flex: none; min-width: 14px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--e1); cursor: pointer; } .clip.sel { background: var(--accent-wash); border-color: var(--accent); } .clip img { flex: 1; width: 100%; min-height: 0; object-fit: cover; display: block; } .clip .clip-foot { height: 20px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); padding: 0 7px; background: var(--e1); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; color: var(--ink-soft); } .clip.sel .clip-foot { background: var(--accent-wash); border-top-color: var(--accent-wash-line); color: var(--accent); font-weight: 500; } .clip .idx { color: var(--ink-soft); } .clip.sel .idx, .clip.sel .clip-foot .d { color: var(--accent); } .clip .reroll { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border: 0; border-radius: var(--r-sm); background: rgba(0, 0, 0, .65); color: var(--ink); font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--t-fast) var(--t-ease); } .clip:hover .reroll { opacity: 1; } .clip .reroll:hover { background: var(--accent); color: var(--accent-ink); } .clip.drag-over { border-color: var(--accent); } /* playhead — único elemento que cruza as faixas */ .tl-playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent); pointer-events: none; z-index: 5; } .tl-playhead i { position: absolute; top: 0; left: -4px; width: 9px; height: 9px; background: var(--accent); } /* ---------------------------------------------------------------- toast */ /* Aviso: superfície elevada, sem sombra. O erro ganha a borda em --err, mas quem diz que é erro é a frase — a cor só reforça. */ .toast { position: fixed; bottom: var(--s6); left: 50%; transform: translateX(-50%); background: var(--e2); border: 1px solid var(--line-strong); padding: var(--s3) var(--s4); border-radius: var(--r-lg); color: var(--ink); font-size: 13px; line-height: 1.45; max-width: 460px; z-index: 90; } .toast.err { border-color: var(--err); } .modal { background: var(--bg-panel); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: var(--s-6); min-width: 380px; max-width: 560px; } .modal::backdrop { background: rgba(8, 8, 10, .72); } .modal h2 { margin: 0 0 var(--s-4); font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .modal .hint { margin: 0 0 var(--s-4); font-size: 11px; color: var(--ink-dim); } .modal .results { margin-bottom: var(--s-6); max-height: 320px; overflow-y: auto; } /* --------------------------------------------------- seletor de emoji */ /* O desenho do teclado de emoji da Apple: busca no topo, rolagem contínua por seções com o título grudado, barra de seções embaixo. Um tema só, o escuro, no editor e no wizard; as cores vêm todas das variáveis abaixo. */ .emoji-pop { --ep-bg: var(--e1); --ep-borda: var(--line-strong); --ep-campo: var(--e2); --ep-tinta: var(--ink); --ep-dim: var(--ink-soft); --ep-hover: var(--e2); --ep-press: var(--e3); --ep-linha: var(--line); --ep-aba-on: var(--accent-wash); position: fixed; z-index: 95; display: flex; flex-direction: column; background: var(--ep-bg); border: 1px solid var(--ep-borda); border-radius: var(--r-xl); color: var(--ep-tinta); font-family: var(--font-ui); overflow: hidden; animation: ep-entra 140ms var(--t-ease); } @keyframes ep-entra { from { opacity: 0; transform: translateY(4px) scale(.985); } } /* busca */ .ep-busca { position: relative; margin: 10px 10px 4px; flex: none; } .ep-busca > svg { position: absolute; left: 8px; top: 50%; translate: 0 -50%; width: 15px; height: 15px; fill: none; stroke: var(--ep-dim); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .ep-busca input { width: 100%; height: 30px; padding: 0 28px 0 29px; background: var(--ep-campo); border: 0; border-radius: var(--r-xl); color: var(--ep-tinta); font: inherit; font-size: 13px; outline: none; -webkit-appearance: none; appearance: none; } .ep-busca input::placeholder { color: var(--ep-dim); } .ep-busca input::-webkit-search-cancel-button { display: none; } .ep-busca input:focus { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 3px var(--focus-ring); } .ep-limpar { position: absolute; right: 5px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; padding: 0; display: grid; place-items: center; background: var(--ep-dim); border: 0; border-radius: 50%; cursor: pointer; opacity: .8; } .ep-limpar:hover { opacity: 1; } .ep-limpar svg { width: 12px; height: 12px; fill: none; stroke: var(--ep-bg); stroke-width: 2.6; stroke-linecap: round; } .ep-limpar[hidden] { display: none; } /* corpo: rolagem contínua */ .ep-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 8px; } /* Trilho fino sem setas. No Chrome, declarar scrollbar-width desliga o ::-webkit-scrollbar e as setas do Windows voltam; por isso o padrão só vale onde não existe o pseudo-elemento (Firefox). */ .ep-corpo::-webkit-scrollbar { width: 6px; } .ep-corpo::-webkit-scrollbar-button { display: none; } .ep-corpo::-webkit-scrollbar-track { background: transparent; } .ep-corpo::-webkit-scrollbar-thumb { background: var(--ep-press); border-radius: 3px; } @supports not selector(::-webkit-scrollbar) { .ep-corpo { scrollbar-width: thin; scrollbar-color: var(--ep-press) transparent; } } .ep-sec h4 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 9px 5px 5px; background: var(--ep-bg); color: var(--ep-dim); font-size: 11px; font-weight: 600; letter-spacing: .02em; } .ep-cels { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); } .ep-cel { position: relative; aspect-ratio: 1; min-width: 0; display: grid; place-items: center; padding: 0; background: transparent; border: 0; border-radius: var(--r-xl); cursor: pointer; -webkit-touch-callout: none; user-select: none; transition: background var(--t-fast) var(--t-ease); } .ep-cel img { width: 26px; height: 26px; display: block; pointer-events: none; transition: transform 120ms var(--t-ease); } .ep-cel:hover { background: var(--ep-hover); } .ep-cel:active { background: var(--ep-press); } .ep-cel:active img { transform: scale(.9); } .ep-cel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* quem tem tom de pele ganha um cantinho, só ao passar o mouse */ .ep-cel.tons::after { content: ""; position: absolute; right: 3px; bottom: 3px; border: 3px solid transparent; border-right-color: var(--ep-dim); border-bottom-color: var(--ep-dim); opacity: 0; transition: opacity var(--t-fast) var(--t-ease); } .ep-cel.tons:hover::after { opacity: .7; } .ep-vazio { margin: 64px 0 0; text-align: center; color: var(--ep-dim); font-size: 13px; } /* barra de seções */ .ep-abas { flex: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; padding: 5px 6px 6px; border-top: 1px solid var(--ep-linha); } .ep-abas button { height: 28px; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: var(--r-xl); color: var(--ep-dim); cursor: pointer; transition: background var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease); } .ep-abas svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ep-abas svg .p { fill: currentColor; stroke: none; } .ep-abas button:hover { color: var(--ep-tinta); background: var(--ep-hover); } .ep-abas button.on { color: var(--accent); background: var(--ep-aba-on); } .emoji-pop.buscando .ep-abas button.on { color: var(--ep-dim); background: transparent; } /* tons de pele: balão por cima do emoji */ .ep-tons { position: absolute; z-index: 3; padding: 5px; background: var(--ep-bg); border: 1px solid var(--ep-borda); border-radius: var(--r-xl); animation: ep-entra 120ms var(--t-ease); } .ep-tons[hidden] { display: none; } .ep-tons .ep-cel { width: 36px; } .ep-tons .ep-cel.on { background: var(--ep-press); } .ep-tons-linha { display: flex; align-items: center; gap: 2px; } .ep-tons-grade { display: grid; grid-template-columns: repeat(5, 36px); gap: 2px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ep-linha); } .ep-tons-dica { margin-left: 6px; color: var(--ep-dim); font-size: 10.5px; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .emoji-pop, .ep-tons { animation: none; } .ep-cel img { transition: none; } } .e-emoji.on { background: var(--e3); color: var(--ink); border-color: var(--line-strong); } #editorRoot .e-ico svg[hidden] { display: none; } /* ------------------------------------------------------------ responsivo */ @media (max-width: 1439px) { :root { --timeline-h: 240px; } } @media (min-width: 1920px) { .e-canvas { padding: var(--s-7); } } /* --------------------------------- sugestões de hook dentro do editor */ /* A lista completa e o "misturar" vivem aqui: no wizard o hook já vem pronto, e é vendo o vídeo com o texto por cima que dá vontade de trocar. */ /* As tags que geraram estas sugestoes: sem isso a lista parece vir do nada. */ .hook-tags { margin: -2px 0 0; font-size: 10px; letter-spacing: .02em; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hook-tags:empty { display: none; } .e-hooklist { display: flex; flex-direction: column; gap: var(--s-2); max-height: 260px; overflow-y: auto; padding-right: 2px; } .e-hook { position: relative; display: flex; flex-direction: column; gap: var(--s-2); text-align: left; padding: var(--s-3) var(--s-4); background: var(--e1); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-body); font: inherit; font-size: 11.5px; line-height: 1.45; cursor: pointer; transition: background var(--t-fast) var(--t-ease), border-color var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease); } .e-hook:hover { background: var(--e2); border-color: var(--line-strong); transform: translateY(-1px); } .e-hook:active { transform: none; } .e-hook.on { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); } .e-hook .t { display: block; } .e-hook .emo { vertical-align: -2px; } /* rodape do cartao: quantas vezes o hook ja rodou, e o aviso de que ele e o que esta na tela */ .e-hook .rod { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .e-hook .u { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-dim); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 4px; line-height: 15px; } .e-hook .acao { font-size: 10px; color: var(--ink-dim); opacity: 0; transition: opacity var(--t-fast) var(--t-ease); } .e-hook:hover .acao { opacity: 1; } .e-hook.on .acao, .e-hook.on .u { color: var(--accent); } .e-hook.on .acao { opacity: 1; } .e-hook.on .u { border-color: var(--accent); } /* Esqueleto enquanto a rodada nova chega: a lista antiga sumir de uma vez parecia travamento. */ .e-hook-esq { height: 52px; background: linear-gradient(90deg, var(--e1) 25%, var(--e2) 50%, var(--e1) 75%); background-size: 300% 100%; border: 1px solid var(--line); border-radius: var(--r-md); animation: hook-brilha 1.1s linear infinite; } @keyframes hook-brilha { from { background-position: 150% 0; } to { background-position: -150% 0; } } @media (prefers-reduced-motion: reduce) { .e-hook-esq { animation: none; } } /* ------------------------------------------ barra de vídeos do lote (topbar) */ /* Barra de versoes: encolhe ate caber e rola na horizontal. Sem trilho visivel, porque um trilho de 14px nao cabe num topo de 48px: a roda do mouse rola de lado e as bordas esmaecem quando ha chip escondido. */ .e-videobar { display: flex; gap: var(--s-2); align-items: center; /* encolhe dez vezes mais rapido que o nome do arquivo: a barra rola, o nome cortado nao tem como ser lido */ flex: 0 10 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; } .e-videobar::-webkit-scrollbar { display: none; } .e-videobar > .e-vchip { flex: none; } .e-videobar.arrastando { cursor: grabbing; user-select: none; } .e-videobar.arrastando .e-vchip { cursor: grabbing; } .e-videobar.antes { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); } .e-videobar.depois { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); } .e-videobar.antes.depois { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .e-vchip { display: flex; align-items: center; gap: var(--s-2); max-width: 190px; height: var(--h-ctrl-tl); padding: 0 var(--s-3); background: var(--e2); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink-soft); font: inherit; font-size: 11px; cursor: pointer; } .e-vchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .e-vchip i { width: 6px; height: 6px; flex: none; border-radius: 50%; border: 1px solid var(--ink-dim); } .e-vchip.ok i { background: var(--ink-dim); } .e-vchip:hover { background: var(--e3); color: var(--ink); } .e-vchip.on { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); } .e-vchip.on i { background: var(--accent); border-color: var(--accent); } /* --------------------------------------------- play por trecho na timeline */ /* O canto superior direito já é do ↻; este fica no centro. */ .clip .clip-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .66); color: var(--ink); font-size: 8px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--t-fast) var(--t-ease); } .clip:hover .clip-play { opacity: 1; } .clip .clip-play:hover { background: var(--accent); color: var(--accent-ink); } .clip .clip-play.on { opacity: 1; background: var(--accent); color: var(--accent-ink); } /* ------------------------------------------------- barra do lote no painel */ .e-bar { height: 4px; background: var(--slider-track); border-radius: 2px; overflow: hidden; } .e-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--t-base) linear; } /* ------------------------------------------------ caixa de escala do hook */ /* Fica acima da camada de arrasto (2) e do badge (4) para as alças pegarem o clique. A borda não intercepta ponteiro; só as alças. */ .hook-box { position: absolute; z-index: 5; border: 1px dashed rgba(224, 132, 39, .7); pointer-events: none; } .hook-box i { position: absolute; width: 11px; height: 11px; background: var(--accent); border: 1px solid var(--accent-ink); border-radius: var(--r-sm); pointer-events: auto; } .hook-box i[data-h="nw"] { left: -6px; top: -6px; cursor: nwse-resize; } .hook-box i[data-h="ne"] { right: -6px; top: -6px; cursor: nesw-resize; } .hook-box i[data-h="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; } .hook-box i[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; } .hook-box.resizing { border-style: solid; } /* Em tela cheia some tudo: ali a moldura é para conferir, não para editar. */ .viewport:fullscreen .hook-box, .viewport:fullscreen .hook-drag { display: none; } /* ------------------------------------------- play por trilha na timeline */ /* Deixa explícito o que vai tocar: a origem inteira ou os cortes em sequência. O .e-head é coluna, então o rótulo e o botão vão num wrapper em linha — as alturas continuam vindo dos tokens, para não desalinhar das trilhas. */ .e-head-top { display: flex; align-items: center; gap: var(--s-2); } .e-tplay { width: 16px; height: 16px; flex: none; display: grid; place-items: center; padding: 0; background: var(--e2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink-soft); cursor: pointer; } .e-tplay svg { width: 8px; height: 8px; fill: currentColor; } .e-tplay:hover { background: var(--e3); color: var(--ink); } .e-tplay.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* ------------------------------------------------------- botão Salvar + menu */ .e-savewrap { position: relative; display: flex; } .e-save { display: inline-flex; align-items: center; gap: var(--s-2); } .e-save .i-floppy { width: 12px; height: 12px; fill: currentColor; } /* Os recortes do disquete são vazados na cor do botão, não pintados de branco: assim o ícone continua legível se o acento mudar. */ .e-save .i-floppy .lbl { fill: var(--accent); } .e-save .i-caret { width: 10px; height: 10px; fill: currentColor; opacity: .7; } .e-save[aria-expanded="true"] .i-caret { transform: rotate(180deg); } /* Renderizando: o rótulo não pode ser trocado por texto, senão os ícones somem. */ .e-save.working { opacity: .6; } .e-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 232px; display: flex; flex-direction: column; padding: var(--s-1); background: var(--bg-panel); border: 1px solid var(--line-strong); border-radius: var(--r-md); } .e-mi { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); background: none; border: 0; border-radius: var(--r-sm); text-align: left; cursor: pointer; font: inherit; } .e-mi b { font-size: 12.5px; font-weight: 600; color: var(--ink); } .e-mi span { font-size: 11px; color: var(--ink-soft); } .e-mi:hover:not(:disabled) { background: var(--e2); } .e-mi:disabled { cursor: not-allowed; } .e-mi:disabled b, .e-mi:disabled span { color: var(--ink-dim); opacity: .55; } /* Progresso do lote: o número vira linha própria, porque o botão Salvar perdeu o rótulo de texto e a .e-bar tem overflow:hidden, que cortaria um ::after. */ .e-prog { margin: 0; font-size: 11px; color: var(--ink-soft); } /* ------------------------------------------------------- botões dos modais */ /* A classe .btn era usada em quatro botões e não existia em CSS nenhum: eles saíam no tamanho padrão do navegador, 58x21, pequenos demais para acertar. */ .btn { height: var(--h-ctrl-e); display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-5); background: var(--e2); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink-body); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; } .btn:hover:not(:disabled) { background: var(--e3); color: var(--ink); } .btn:disabled { opacity: .4; cursor: not-allowed; } .btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .btn.accent:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } /* Fechar do canto. 28px de lado: o alvo antigo tinha 21 de altura e falhava o clique com frequência. O traço é vetorial, não o caractere ×, que fica torto em cima da linha de base. */ .modal-x { width: 28px; height: 28px; flex: none; display: grid; place-items: center; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink-soft); cursor: pointer; } .modal-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; } .modal-x:hover { background: var(--e2); border-color: var(--line-strong); color: var(--ink); } .modal-x:active { background: var(--e3); } /* O diálogo de Arquivos não tem cabeçalho: o × vai solto no canto. */ .modal { position: relative; } #rendersModal .modal-x { position: absolute; top: var(--s-3); right: var(--s-3); } #rendersModal h2 { padding-right: 32px; } /* Aviso de texto já escrito no vídeo original. Discreto e sem bloquear: o detector erra, e esconder um trecho por engano é pior que um aviso que dá para ignorar. Fica no canto oposto ao play, para não disputar o clique. */ .clip-warn { position: absolute; left: 4px; top: 4px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: var(--r-sm); background: rgba(0, 0, 0, .55); color: var(--accent); pointer-events: auto; cursor: help; } .clip-warn svg { width: 11px; height: 11px; fill: currentColor; } /* Mesmo logo, mesmo destino, na paleta do editor. */ .brand-home.e-home { display: inline-flex; align-items: center; gap: var(--s-3); background: none; border: 1px solid transparent; border-radius: var(--r-md); padding: 4px 8px; margin-left: -8px; color: inherit; font: inherit; cursor: pointer; } .brand-home.e-home:hover { background: var(--e2); border-color: var(--line-strong); } .brand-home.e-home:active { background: var(--e3); } /* Quem está logado, na barra do editor. */ .quem.e-quem { font-size: 12px; color: var(--ink-soft); } /* =========================================================== secao Cortes Uma escolha, uma frase, a lista do que ja esta cortado e um botao. Os ajustes de quantidade e duracao so aparecem no modo em que fazem sentido. */ .cut { gap: var(--s-6); } /* seletor de modo: a marcacao desliza, em vez de dois botoes que acendem */ /* Segmentado com pastilha deslizante. `--n` e o numero de opcoes e `data-i` a escolhida — os tres lugares que usam (modo de corte, estilo do texto e abas de hook) so mexem nesses dois. */ .seg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); padding: 2px; background: var(--e1); border: 1px solid var(--line); border-radius: var(--r-xl); } .seg-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n, 2)); background: var(--e3); border: 1px solid var(--line-strong); border-radius: var(--r-lg); transition: transform var(--t-base) var(--t-ease); transform: translateX(calc(var(--i, 0) * 100%)); } .seg button { position: relative; z-index: 1; height: 28px; padding: 0 var(--s-2); background: none; border: 0; color: var(--ink-soft); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-fast) var(--t-ease); } .seg button:hover { color: var(--ink-body); } .seg button.on { color: var(--ink); font-weight: 600; } .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-lg); } .cut-desc { margin: -4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-dim); } /* grupo de linhas com separador, como uma lista de ajustes */ .cut-group { margin: 0; padding: 0; list-style: none; background: var(--e1); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; } .cut-group[hidden] { display: none; } .cut-param { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 var(--s-3) 0 var(--s-5); } .cut-param + .cut-param { border-top: 1px solid var(--line); } .cut-param > span { font-size: 12.5px; color: var(--ink-body); } .cut-step { display: flex; align-items: center; gap: var(--s-1); } .cut-step button { width: 26px; height: 24px; display: grid; place-items: center; padding: 0; background: var(--e2); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; } .cut-step button:hover:not(:disabled) { background: var(--e3); } .cut-step button:disabled { opacity: .35; cursor: default; } .cut-step output { min-width: 46px; text-align: center; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); } /* Mapa: a faixa e o video inteiro, as marcas sao os trechos escolhidos. */ .cut-mapa { display: flex; flex-direction: column; gap: var(--s-2); } .cut-mapa[hidden] { display: none; } .cut-trilho { position: relative; height: 20px; background: var(--e1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .cut-marca { position: absolute; top: 2px; bottom: 2px; min-width: 3px; padding: 0; border: 0; background: var(--ink-dim); border-radius: 2px; cursor: pointer; transition: background var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease); } .cut-marca:hover { background: var(--ink-body); } .cut-marca.on { background: var(--accent); } .cut-marca:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; } .cut-reguas { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-dim); } .cut-vazio { margin: 0; padding: var(--s-4) 0; text-align: center; font-size: 11.5px; color: var(--ink-dim); } .cut-vazio[hidden] { display: none; } /* Regua na base da linha: o trecho mais longo ocupa a largura toda, entao da para comparar as duracoes de relance. Fina de proposito — grossa demais ela virava um bloco cinza e competia com o texto. */ /* Cada trecho é uma linha solta, com borda própria, não uma tabela. */ .cut-list.cut-group { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; border-radius: 0; overflow: visible; } .cut-list li { position: relative; } .cut-list li i { position: absolute; left: 1px; bottom: 1px; height: 2px; width: var(--w, 0%); max-width: calc(100% - 2px); background: var(--line-strong); pointer-events: none; } .cut-list li.on i { background: var(--accent); } .cut-list li button { width: 100%; position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; height: 32px; padding: 0 10px; background: var(--e1); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink-body); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--t-ease); } .cut-list li button:hover { background: var(--e2); } .cut-list .n { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); } .cut-list .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cut-list .t, .cut-list .d { font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-dim); } .cut-list .d { text-align: right; color: var(--ink-soft); } /* largura reservada pelo timecode mais longo do vídeo (--tc-ch, do app.js) */ .cut-list .t { min-width: calc(var(--tc-ch, 4) * 1ch); text-align: right; } /* Embaralhar: as linhas sorteiam e assentam em cascata */ .cut-list li.sorteando .t, .cut-list li.sorteando .d { color: var(--ink-dim); opacity: .55; } .cut-list li.assenta button { animation: emb-assenta 200ms ease-out; } .cut-list li.assenta .t, .cut-list li.assenta .d, .cut-list li.assenta .nome { animation: emb-valor 200ms ease-out; } @keyframes emb-assenta { from { transform: scale(.98); } to { transform: none; } } @keyframes emb-valor { from { opacity: 0; } to { opacity: 1; } } /* movimento reduzido: crossfade, o valor antigo sobreposto ao novo */ .cut-list li.cruzando .t, .cut-list li.cruzando .d, .cut-list li.cruzando .nome { position: relative; display: block; } .cut-list .emb-velho { position: absolute; inset: 0; animation: emb-sai 200ms linear forwards; } .cut-list .emb-novo { animation: emb-valor 200ms linear; } @keyframes emb-sai { from { opacity: 1; } to { opacity: 0; } } .cut-list li.on button { background: var(--accent-wash); border-color: var(--accent-wash-line); color: var(--ink); font-weight: 500; } .cut-list li.on .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 500; } .cut-list li.on .t { color: var(--ink-soft); } .cut-list li.on .d { color: var(--accent); } /* O resumo acende quando a soma bate com a duracao pedida. */ #cutSummary.ok { color: var(--accent); } .cut-go { width: 100%; height: 36px; justify-content: center; gap: 9px; border-radius: var(--r-lg); font-size: 13px; transition: background var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease); } .cut-go:active:not(:disabled) { transform: scale(.98); } /* Embaralhar: o icone so aparece depois do primeiro corte. Antes disso nao ha o que embaralhar, e o botao diz "Criar cortes". */ .i-shuffle { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; display: none; } .cut-go.shuffle .i-shuffle { display: block; } .i-shuffle path { transition: transform 260ms var(--t-ease); transform-origin: 12px 12px; } .cut-go.shuffle:hover:not(:disabled) .i-shuffle .a { transform: translateY(-1px); } .cut-go.shuffle:hover:not(:disabled) .i-shuffle .b { transform: translateY(1px); } /* gerando: as duas setas trocam de lugar sem parar ate o corte chegar */ .cut-go.gerando { cursor: progress; } .cut-go.gerando .i-shuffle .a { animation: cut-cruza-a 700ms var(--t-ease) infinite alternate; } .cut-go.gerando .i-shuffle .b { animation: cut-cruza-b 700ms var(--t-ease) infinite alternate; } /* o disabled do botao nao pode apagar a animacao: ela e o aviso de que algo esta acontecendo */ .cut-go.gerando:disabled { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: .85; } @keyframes cut-cruza-a { to { transform: translateY(10px); } } @keyframes cut-cruza-b { to { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .cut-go.gerando .i-shuffle .a, .cut-go.gerando .i-shuffle .b { animation: none; } .i-shuffle path { transition: none; } }