primocode 8.11.2 → 8.13.0

package/studio/web/core.css

@@ -381,9 +381,18 @@ input.titulo-arq:focus { outline: none; border-color: var(--primo); background:
 }
 .grupo { border-bottom: 1px solid var(--linha); padding: 14px; }
 .grupo > .rotulo { display: block; margin-bottom: 11px; }
-.linha-campo { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
+/* Rótulo em cima, controle embaixo.
+
+   A coluna do rótulo tinha 62px fixos. "Acabamento" não cabia e saía
+   cortado; "Cor do fundo" e "Tema da cena" quebravam em duas linhas e
+   desalinhavam a altura de tudo. Era metade da sensação de "estranho" no
+   painel. Empilhado, o nome cabe inteiro e o controle usa a largura toda. */
+.linha-campo { display: grid; gap: 4px; margin-bottom: 11px; }
 .linha-campo:last-child { margin-bottom: 0; }
-.linha-campo > span { font-size: 11.5px; color: var(--fraco2); }
+.linha-campo > span {
+  font-size: 10.5px; color: var(--fraco2);
+  letter-spacing: .04em; text-transform: uppercase;
+}
 .dois { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
 .opcoes { display: flex; gap: 4px; }
@@ -721,3 +730,125 @@ body:has(.transporte) .aviso { bottom: 80px; }
   .topo { gap: 6px; padding: 0 8px; }
   .marca em { display: none; }
 }
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Reordenar, modelos e ações de camada
+   
+   Três coisas que faltavam e faziam o editor parecer travado: arrastar não
+   dava retorno nenhum, camada não tinha ação à mão, e "nova cena" abria uma
+   tela em branco. O visual aqui é de propósito discreto — a peça que a
+   pessoa está fazendo é que tem de chamar atenção, não a ferramenta.
+   ═════════════════════════════════════════════════════════════════════════ */
+
+/* enquanto arrasta: o item sai de cena, o alvo se anuncia */
+.arrastando { opacity: .35; }
+.camada.alvo-solta, .miniatura.alvo-solta, .clipe.alvo-solta {
+  outline: 2px solid var(--primo);
+  outline-offset: 1px;
+}
+.camada, .miniatura, .clipe { -webkit-user-drag: element; }
+.camada:active { cursor: grabbing; }
+
+/* ações que aparecem ao passar o mouse na camada */
+.camada { position: relative; }
+.camada-acoes {
+  display: none; gap: 1px; margin-left: auto; flex: 0 0 auto;
+}
+.camada:hover .camada-acoes, .camada.ativa .camada-acoes { display: flex; }
+.camada-acoes button {
+  background: none; border: 0; padding: 3px;
+  border-radius: 5px; cursor: pointer; color: var(--fraco2);
+  display: grid; place-items: center;
+}
+.camada-acoes button:hover { background: var(--sup3, rgba(255,255,255,.08)); color: var(--texto); }
+.camada-acoes button:disabled { opacity: .25; cursor: default; }
+.camada-acoes button:disabled:hover { background: none; color: var(--fraco2); }
+.camada-acoes svg { width: 12px; height: 12px; opacity: 1; }
+
+/* a transição marcada no próprio clipe da linha do tempo */
+.clipe .tr-marca {
+  position: absolute; left: 4px; top: 4px;
+  background: rgba(6, 6, 8, .72);
+  color: #cbd5e1;
+  font-size: 9.5px; letter-spacing: .02em;
+  padding: 2px 5px; border-radius: 4px;
+  pointer-events: none;
+  max-width: calc(100% - 8px);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* o "+" no fim da tira */
+.clipe-mais {
+  flex: 0 0 auto;
+  width: 40px; height: 62px;
+  border: 1px dashed var(--linha2);
+  border-radius: 8px;
+  background: none; color: var(--fraco2);
+  cursor: pointer;
+  display: grid; place-items: center;
+}
+.clipe-mais:hover { border-color: var(--primo); color: var(--primo); }
+.clipe-mais svg { width: 15px; height: 15px; }
+
+/* galeria de modelos */
+.folha .caixa.larga { width: min(1040px, 100%); }
+.folha .sub { color: var(--fraco); font-size: 12.5px; margin: -8px 0 18px; }
+.modelos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: 14px;
+}
+.modelo {
+  background: none; border: 0; padding: 0;
+  cursor: pointer; text-align: left;
+  display: grid; gap: 7px;
+}
+.modelo .caixa-mini {
+  position: relative; width: 100%; aspect-ratio: 16/9;
+  overflow: hidden; border-radius: 9px;
+  border: 1px solid var(--linha);
+  background: var(--sup2);
+  transition: border-color .12s, transform .12s;
+}
+.modelo .caixa-mini .cena { position: absolute; top: 0; left: 0; transform-origin: top left; }
+.modelo .caixa-mini.vazia { display: grid; place-items: center; border-style: dashed; }
+.modelo .caixa-mini.vazia svg { width: 22px; height: 22px; color: var(--fraco2); }
+.modelo:hover .caixa-mini { border-color: var(--primo); transform: translateY(-2px); }
+.modelo span { font-size: 12.5px; color: var(--fraco); }
+.modelo:hover span { color: var(--texto); }
+
+/* seletor de cor compacto: amostras numa faixa, hex ao lado */
+.cor-faixa { display: grid; grid-template-columns: 1fr 62px; gap: 6px; align-items: center; }
+.cor-faixa .cores { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
+.cor-faixa .cores::-webkit-scrollbar { height: 0; }
+.cor-faixa .cores button { width: 19px; height: 19px; flex: 0 0 auto; }
+.cor-faixa .cores button.ativa { outline: 2px solid var(--texto); outline-offset: 1px; }
+.cor-faixa .sem-cor {
+  background: repeating-linear-gradient(45deg, var(--sup2) 0 4px, var(--linha2) 4px 8px);
+}
+.campo.hex { font-size: 11px; padding-left: 6px; padding-right: 6px; }
+
+/* chaves de animação: a régua mostra QUANDO cada uma acontece */
+.regua-chaves { position: relative; height: 26px; margin: 2px 0 2px; }
+.trilho-chaves {
+  position: absolute; left: 5px; right: 5px; top: 11px; height: 3px;
+  background: var(--sup3); border-radius: 2px;
+}
+.trilho-chaves .pino {
+  position: absolute; top: 50%; width: 11px; height: 11px;
+  margin: -5.5px 0 0 -5.5px; padding: 0;
+  border-radius: 50%; border: 2px solid var(--fundo);
+  background: var(--fraco); cursor: pointer;
+}
+.trilho-chaves .pino:hover { background: var(--texto); }
+.trilho-chaves .pino.ativo { background: var(--primo); transform: scale(1.25); }
+.sub-regua { font-size: 10.5px; color: var(--fraco2); margin-bottom: 10px; }
+.opcoes button.ativo { border-color: var(--primo); color: var(--primo); background: var(--primo-suave); }
+.presets { display: grid; gap: 5px; margin-top: 9px; }
+.presets button {
+  height: 30px; padding: 0 10px; text-align: left;
+  border: 1px solid var(--linha); border-radius: 8px;
+  background: var(--sup2); color: var(--fraco);
+  font: 500 12px/1 var(--sans); cursor: pointer;
+}
+.presets button:hover { background: var(--sup3); color: var(--texto); border-color: var(--primo); }