acai-ui 1.65.5

package/src/components/code/acai-ui-code-styles.scss

@@ -0,0 +1,407 @@
+// Bloco de código do Açaí UI.
+//
+// Paleta FIXA (GitHub dark), igual ao viewer do acai-ui-error-log: o fundo é
+// quase-preto nos DOIS temas, então as cores de sintaxe não podem seguir o
+// tema. No claro, um `--acai-negative` (vinho escuro) sumiria sobre o #0d1117.
+// Só a moldura usa token, porque ela encosta no fundo da página.
+
+.acai-code {
+  $fundo: #0d1117;
+  $texto: #c9d1d9;
+
+  position: relative;
+  border-radius: var(--acai-radius-md, 6px);
+  overflow: hidden;
+
+  &--enquadrado {
+    border: 1px solid var(--acai-border-subtle);
+  }
+
+  // Fundo escuro também aqui, e não um cinza translúcido: no tema CLARO o
+  // translúcido virava uma faixa branca colada num bloco preto, e o componente
+  // lia como duas peças soltas em vez de uma só.
+  &__topo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // Rótulo da linguagem à esquerda, botões (copiar, dobrar, buscar) à
+    // direita. Os botões não encolhem, então sem wrap é o rótulo que é comido.
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 4px 6px 4px 12px;
+    background: #161b22;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  // TODO botão sobre o bloco (copiar, lupa, setas da busca, fechar) precisa de
+  // cor FIXA: o bloco é escuro nos dois temas, e no CLARO o Quasar pinta o
+  // `.q-btn` de cinza-escuro, que some sobre o quase-preto.
+  // `!important` porque a regra de tema do Quasar vence por especificidade.
+  &__acao {
+    &.q-btn {
+      color: #c9d1d9 !important;
+    }
+
+    &.q-btn:hover,
+    &.q-btn:focus-visible {
+      color: #ffffff !important;
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    // Desabilitado (setas sem ocorrência) precisa ler como apagado, mas ainda
+    // sobre fundo escuro — o `.disabled` do Quasar só baixa a opacidade.
+    &.q-btn.disabled {
+      color: #6e7681 !important;
+    }
+  }
+
+  &__titulo {
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: #8b949e;
+  }
+
+  &__bloco {
+    margin: 0;
+    padding: 12px;
+    background: $fundo;
+    color: $texto;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
+    font-size: 0.8125rem;
+    line-height: 1.55;
+    // `pre-wrap` + `break-word`: JSON de API traz URL e token longos que
+    // estourariam a coluna. Quebra sem perder a indentação.
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow: auto;
+
+    // ---------- Barra de rolagem discreta ----------
+    // Duas sintaxes porque não há uma só que cubra os três navegadores:
+    //  · `scrollbar-width`/`scrollbar-color` → padrão CSS, é o que o FIREFOX lê;
+    //  · `::-webkit-scrollbar` → Chrome e Edge (ambos Chromium).
+    // Manter as duas: o Firefox ignora o pseudo-elemento e o Chromium só passou
+    // a entender o padrão em versões recentes.
+    // Tudo isto só para ponteiro fino (ver `scss/_scrollbar.scss`): dimensão
+    // explícita desliga a barra overlay do celular e desenha a clássica, que
+    // rouba 10px de um bloco de código que já é estreito ali. E o `:hover` do
+    // polegar não existe em tela de toque.
+    @media (pointer: fine) {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(139, 148, 158, 0.4) transparent;
+
+      &::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(139, 148, 158, 0.35);
+        border-radius: 8px;
+        // A borda transparente com `background-clip` afina o polegar sem mexer na
+        // largura da pista — é o que dá o aspecto "fino e flutuante" em vez da
+        // barra cinza cheia do padrão do sistema.
+        border: 3px solid transparent;
+        background-clip: content-box;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: rgba(139, 148, 158, 0.6);
+        background-clip: content-box;
+      }
+
+      // Sem isso o canto entre as duas barras vira um quadrado branco no Chromium.
+      &::-webkit-scrollbar-corner {
+        background: transparent;
+      }
+    }
+  }
+
+  &__acoes {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: auto;
+  }
+
+  // ===================== Linhas, calha e dobra =====================
+  // Uma linha por elemento (e não um <pre> só) porque numeração e dobra precisam
+  // de algo em que se ancorar. A quebra de linha longa acontece DENTRO da célula
+  // de conteúdo, então o número segue no alto da linha lógica em vez de
+  // desalinhar a cada quebra.
+  &__linhas {
+    display: block;
+  }
+
+  &__linha {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &__num {
+    flex: 0 0 var(--acai-code-calha, 2ch);
+    margin-right: 12px;
+    text-align: right;
+    color: #6e7681;
+    // A calha não entra na seleção: copiar o bloco tem que devolver só o código.
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  &__dobra {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 16px;
+    height: calc(0.8125rem * 1.55);
+    margin-right: 2px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: #6e7681;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+
+    &:hover {
+      color: #c9d1d9;
+    }
+
+    &:focus-visible {
+      outline: 1px solid var(--acai-control-on);
+      outline-offset: -1px;
+    }
+  }
+
+  // Linha sem bloco pra dobrar ainda ocupa a coluna, senão o código dança pra
+  // esquerda e direita conforme a linha tem ou não seta.
+  &__dobra--vazia {
+    cursor: default;
+  }
+
+  &__conteudo {
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  // Pastilha do "tem coisa escondida aqui" — clicável, pra reabrir sem mirar na
+  // setinha de 16px.
+  &__resumo {
+    margin-left: 6px;
+    padding: 0 6px;
+    border: 0;
+    border-radius: 4px;
+    background: rgba(139, 148, 158, 0.22);
+    color: #8b949e;
+    font: inherit;
+    font-size: 0.75rem;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(139, 148, 158, 0.35);
+      color: #c9d1d9;
+    }
+  }
+
+  // ===================== Busca =====================
+  &__busca {
+    display: flex;
+    align-items: center;
+    // Campo de busca + contador de ocorrências + setas + fechar. É a linha com
+    // mais peças do componente e a que estoura primeiro num celular.
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 4px 6px 4px 10px;
+    background: #161b22;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    color: #8b949e;
+  }
+
+  &__busca-campo {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    color: #c9d1d9;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    padding: 2px 0;
+
+    &::placeholder {
+      color: #6e7681;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &__busca-info {
+    font-size: 0.75rem;
+    color: #8b949e;
+    white-space: nowrap;
+  }
+
+  &__marca {
+    background: rgba(210, 153, 34, 0.45);
+    color: inherit;
+    border-radius: 2px;
+  }
+
+  &__marca--ativa {
+    background: #d29922;
+    color: #0d1117;
+  }
+
+  // O container só ganha anel de foco quando a busca está aberta: como ele é
+  // focável (tabindex) só pra capturar o Ctrl+F, um anel a cada clique seria
+  // ruído puro.
+  &:focus {
+    outline: none;
+  }
+
+  &--buscando:focus-within {
+    outline: 2px solid var(--acai-control-on);
+    outline-offset: -2px;
+  }
+
+  &__ctx {
+    min-width: 180px;
+  }
+
+  // ===================== Editor =====================
+  // Duas camadas empilhadas: o <pre> realçado embaixo, o <textarea> transparente
+  // por cima. Qualquer divergência de fonte, line-height, padding ou modo de
+  // quebra faz o cursor descolar do texto — por isso ambos herdam `&__bloco` e
+  // as propriedades abaixo repetem exatamente os mesmos valores.
+  &__editor {
+    position: relative;
+    // Expansível como um textarea: o corpo de um POST varia de 3 a 300 linhas, e
+    // altura fixa obriga a rolar uma janelinha o tempo todo. O `resize` mora AQUI
+    // (e não no textarea, que tem `resize: none`) porque são duas camadas — só o
+    // wrapper esticando mantém espelho e textarea do mesmo tamanho.
+    // `resize` exige `overflow` diferente de `visible`.
+    height: 260px;
+    min-height: 120px;
+    overflow: hidden;
+    resize: vertical;
+
+    .acai-code__bloco {
+      // As duas camadas seguem a altura do wrapper: sem isso o espelho cresce com
+      // o conteúdo e o textarea rola sozinho, desalinhando na primeira quebra.
+      height: 100%;
+      overflow: auto;
+      // Espaço da barra reservado nas DUAS camadas, sempre. Sem isto, a barra
+      // aparece só em uma delas e come ~10px da largura útil dali: as linhas
+      // longas passam a quebrar em pontos diferentes e o realce descola do
+      // cursor no meio do texto.
+      scrollbar-gutter: stable;
+    }
+  }
+
+  // A alça nativa é um triângulo cinza que some sobre o quase-preto do bloco.
+  // Este canto claro marca onde arrastar sem cobrir a alça, que continua sendo
+  // quem responde ao mouse.
+  &__editor::after {
+    content: '';
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 10px;
+    height: 10px;
+    pointer-events: none;
+    background: linear-gradient(
+      135deg,
+      transparent 0 45%,
+      rgba(201, 209, 217, 0.55) 45% 55%,
+      transparent 55% 70%,
+      rgba(201, 209, 217, 0.55) 70% 80%,
+      transparent 80%
+    );
+  }
+
+  // No editor o <textarea> cobre TODA a caixa, inclusive a calha — sem isto ele
+  // fica por cima e engole o clique da seta (que continua aparecendo, só que
+  // inerte). Estes dois sobem pra cima dele; o resto da camada segue por baixo,
+  // que é o que deixa o texto editável.
+  &__editor {
+    .acai-code__dobra,
+    .acai-code__resumo {
+      position: relative;
+      z-index: 2;
+    }
+
+    .acai-code__entrada {
+      z-index: 1;
+    }
+  }
+
+  // Enquanto há bloco fechado o textarea sai de cena: ele não tem como esconder
+  // linha nenhuma, então o cursor cairia longe de onde o realce mostra. O
+  // espelho assume como superfície de leitura (e fica selecionável).
+  &__corpo--travado {
+    .acai-code__entrada {
+      visibility: hidden;
+    }
+
+    .acai-code__linhas {
+      cursor: text;
+      user-select: text;
+      -webkit-user-select: text;
+    }
+  }
+
+  &__aviso {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    padding: 4px 12px;
+    background: #161b22;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    color: #8b949e;
+    font-size: 0.75rem;
+  }
+
+  &__entrada {
+    position: absolute;
+    inset: 0;
+    resize: none;
+    border: 0;
+    // Abre espaço pra calha do espelho. É o que mantém as duas camadas quebrando
+    // a linha na mesma largura — sem isso o texto digitado escorregaria por cima
+    // dos números e o cursor cairia longe do realce.
+    padding-left: calc(12px + var(--acai-code-recuo, 0px));
+    // Texto invisível: quem aparece é o <pre> de baixo. O cursor continua
+    // visível pelo `caret-color`, e a seleção pelo `::selection`.
+    color: transparent;
+    background: transparent;
+    caret-color: #c9d1d9;
+
+    &::selection {
+      background: rgba(56, 139, 253, 0.4);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--acai-control-on);
+      outline-offset: -2px;
+    }
+  }
+
+  // ===================== Realce (paleta de IDE) =====================
+  // Mesmas cores do viewer do acai-ui-error-log, pra leitura de JSON ser igual
+  // em toda a lib.
+  &__chave { color: #4fc1ff; }
+  &__texto { color: #f1e05a; }
+  &__numero { color: #b392f0; }
+  &__booleano { color: #ffab70; }
+  &__nulo { color: #ff7b72; font-style: italic; }
+}