CSS Croqstyle

AVISO:

Esta é uma página component usada internamente pela Wiki Lusófona. Ela foi feita para ser usada e incluída em outras páginas.

avaliação: 0+x

O que isto é

Um monte de 'melhorias' de CSS variadas que eu, CroquemboucheCroquembouche, uso em um monte de páginas porque eu acho que as faz mais fáceis de lidar.

As mudanças que este componente faz são um monte de modificações realmente triviais para facilitar a experiência de escrita e para tornar a documentação de componentes/temas um pouco mais fácil (o que eu faço muito). Não muda nada sobre a página visualmente para o leitor — as mudanças são para o escritor.

Eu não esperaria que traduções de artigos que usem este componente também usem este componente, a menos que o tradutor goste e queira usá-lo de qualquer maneira.

Este componente provavelmente não conflitará com outros componentes ou temas, e mesmo se o fizer, provavelmente não importará muito.

Uso

Em qualquer wiki:

[[include :scp-pt-br:component:croqstyle]]

Este componente é feito para ser usado em outros componentes. Ao usar em outro componente, certifique-se de colocar isto dentro do bloco [[iftags do componente, para que usuários do seu componente não sejam forçados a também usar Croqstyle.

Componentes relacionados

Outros componentes de estilo pessoal (que mudam só algumas coisas):

Temas de estilo pessoal (que são revisões visuais):

Mudanças CSS

Notas de rodapé de tamanho razoável

Impede que notas de rodapé tenham um milhão de quilômetros de comprimento, para que você possa lê-los.

.hovertip { max-width: 400px; }

Edição/código monoespaçado

Deixa a caixa de texto de edição monoespaçada, e também muda todo o texto monoespaçado para Fira Code, a fonte de monoespaço obviamente superior.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Fundos de teletipo

Adiciona um fundo cinza claro a elementos <tt> ({{texto}}), para que fragmentos de código se destaquem mais.

tt {
  background-color: var(--amostrar-algumacoisa-bhl-sla-vou-consertar-depois, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

Sem mais caras grandes

Impede que fotos grandes apareçam quando você passar o cursor sobre a imagem do avatar de alguém, porque são estúpidas e muito irritantes e é possível apenas clicar nelas se você quiser ver a versão grande.

.avatar-hover { display: none !important; }

Quebra quebra

Qualquer texto dentro de um div com classe nobreak tem quebra de linha acontecendo entre cada letra.

.nobreak { word-break: break-all; }

Cores de código

Acrescenta as cores de código do meu terminal como variáveis. Talvez eu mude isto para um tema de terminal mas comum como Monokai ou algo eventualmente, mas por enquanto é só o meu tema pessoal, que é derivado de Tomorrow Night Eighties.

Também, adicionar a classe .terminal a um bloco de código falso como [[div class="code terminal"]] lhe dá uma aparência meio pseudo-terminal com um fundo preto. Não funciona com [[code]], porque o Wikidot insere um monte de realce de sintaxe que não é possível mudar sem um monte de CSS. Use-a somente para fragmentos de código sem [[code]].

Ferramenta rápida para colorir um exemplo de uso de componente Wikidot 'padrão' com as vars acima: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Modo depuração

Desenhe linhas em volta de qualquer coisa dentro de .debug-mode. A cor das linhas é vermelha mas se submete à variável CSS --debug-colour.

Você também pode adicionar div.debug-info.over e div.debug-info.under dentro de um elemento para anotar as caixas de depuração — porém você precisará certificar-se de deixar espaço vertical suficiente para que a anotação não sobreponha a coisa em cima ou embaixo dela.

…assim!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
Salvo indicação em contrário, o conteúdo desta página é licenciado sob Creative Commons Attribution-ShareAlike 3.0 License