MediaWiki:Vector-2022.css
Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.
- Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
- Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
- Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
- Opera: Pressione Ctrl-F5.
/* ==========================================================================
GUIA GALÁCTICO — MediaWiki:Vector-2022.css
Estilo do skin: contêiner, cabeçalho, colunas, tipografia, rodapé.
Depende dos tokens (--gg-*) definidos em MediaWiki:Common.css.
Instale os dois — este arquivo sozinho não pinta nada.
AVISO HONESTO: os nomes de classe internos do Vector 2022 mudam entre
versões do MediaWiki. As seções 3, 6 e 7 são as mais sujeitas a isso.
Se algo não pegar, inspecione o elemento e ajuste o seletor — a estrutura
das regras continua válida.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS DO CODEX
O Vector 2022 pinta botões, links e ícones a partir dos design tokens do
Codex. Remapeá-los aqui faz a interface inteira falar a mesma língua da
wiki, em vez de deixar o azul padrão brigando com o roxo.
Se preferir manter o azul do MediaWiki, apague este bloco inteiro.
-------------------------------------------------------------------------- */
:root {
--color-progressive: var(--gg-link);
--color-progressive--hover: #94319f;
--color-progressive--active: #5d1c6e;
--color-visited: var(--gg-link-visitado);
--border-color-progressive--focus: var(--gg-foco);
--background-color-progressive: var(--gg-espaco-medio);
--background-color-progressive--hover: #7d3199;
--background-color-progressive--active: #55206a;
}
@media screen {
html.skin-theme-clientpref-night {
--color-progressive: var(--gg-link);
--color-progressive--hover: #eecaff;
--color-progressive--active: #c893e6;
--color-visited: var(--gg-link-visitado);
--background-color-progressive: #7d3199;
--background-color-progressive--hover: #94319f;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
--color-progressive: var(--gg-link);
--color-progressive--hover: #eecaff;
--color-progressive--active: #c893e6;
--color-visited: var(--gg-link-visitado);
--background-color-progressive: #7d3199;
--background-color-progressive--hover: #94319f;
}
}
/* --------------------------------------------------------------------------
2. FUNDO E CONTÊINER
O espaço fica atrás; o conteúdo flutua sobre ele como uma placa.
-------------------------------------------------------------------------- */
body {
background-color: var(--gg-espaco-fundo);
background-image: var(--gg-estrelas), var(--gg-espaco-gradiente);
background-size: 500px 500px, 100% 100%;
background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed;
font-family: var(--gg-fonte-texto);
}
.mw-page-container {
background-color: var(--gg-superficie);
color: var(--gg-texto);
border-radius: var(--gg-raio-g);
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}
/* Nos monitores largos o contêiner destaca do fundo; nos estreitos ele
ocupa a tela inteira e o arredondamento só atrapalha. */
@media (max-width: 1000px) {
.mw-page-container {
border-radius: 0;
box-shadow: none;
}
}
/* --------------------------------------------------------------------------
3. CABEÇALHO
-------------------------------------------------------------------------- */
.vector-header-container .vector-header {
border-bottom: 1px solid var(--gg-borda);
}
/* Filete de nebulosa sob o cabeçalho — 3px de identidade por um custo
praticamente zero. */
.vector-header-container {
position: relative;
}
.vector-header-container::after {
content: '';
position: absolute;
inset-inline: 0;
bottom: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--gg-espaco-claro) 0%,
var(--gg-espaco-medio) 55%,
#233164 100%
);
}
/* Cabeçalho fixo.
Se ele estiver aparecendo ESTÁTICO no fim da página e sem estilo nenhum,
o problema não é deste arquivo: significa que o módulo próprio do Vector
não carregou. O elemento existe sempre no HTML; quem o tira do fluxo e
o mostra é o skin, via a classe .vector-sticky-header-visible no <html>.
Diagnóstico no console:
document.documentElement.className → tem 'vector-sticky-header-enabled'?
mw.loader.getState('skins.vector.js') → deve ser 'ready'
getComputedStyle($('.vector-sticky-header')[0]).position → deve ser 'fixed'
Se position vier 'static', é config/JS, não CSS. */
.vector-sticky-header {
background-color: var(--gg-superficie);
border-bottom-color: var(--gg-borda);
box-shadow: 0 2px 14px -8px var(--gg-sombra-forte);
}
.vector-sticky-header .vector-sticky-header-context-bar-primary,
.vector-sticky-header .mw-page-title-main {
font-family: var(--gg-fonte-titulo);
font-weight: 400;
}
/* PALIATIVO enquanto você investiga: descomente para escondê-lo em vez de
deixá-lo encalhado no rodapé.
.vector-sticky-header { display: none; }
*/
/* Busca.
Tentei arredondar isto duas vezes adivinhando a estrutura e errei as
duas. O traçado duplo vem de um elemento ENVOLTÓRIO com borda própria,
e eu não sei qual é sem inspecionar. Então: sem raio nenhum, só a cor
de foco — o componente volta ao padrão do Codex, que funciona.
Para voltar a arredondar preciso da classe do elemento que desenha a
borda externa, a que engloba campo + botão. */
.vector-search-box .cdx-text-input__input {
border-color: var(--gg-borda-forte);
background-color: var(--gg-superficie);
color: var(--gg-texto);
}
.vector-search-box .cdx-text-input__input:focus {
border-color: var(--gg-espaco-medio);
box-shadow: inset 0 0 0 1px var(--gg-espaco-medio);
}
/* --------------------------------------------------------------------------
4. MENUS LATERAIS E SUMÁRIO
-------------------------------------------------------------------------- */
.vector-main-menu .vector-menu-heading,
.vector-page-tools .vector-menu-heading,
.vector-toc-menu-heading,
#vector-toc .vector-toc-heading {
color: var(--gg-texto-suave);
font-family: var(--gg-fonte-titulo);
font-size: 0.875rem;
font-weight: 400;
}
/* Abas de espaço nominal (Artigo / Discussão, Predefinição / Discussão…):
SPORE Light em caixa alta, que é onde o peso 300 rende melhor. */
.vector-page-toolbar #p-namespaces .vector-menu-content-list > li > a,
.vector-page-toolbar #p-associated-pages .vector-menu-content-list > li > a,
.vector-page-toolbar #p-views .vector-menu-content-list > li > a {
font-family: var(--gg-fonte-titulo);
font-weight: 300;
}
/* Sumário: barra de acento à esquerda e nada mais. O trilho com orbes
ficou desalinhado e ruidoso — item pequeno demais para carregar
ornamento. O motivo do orbe fica onde há espaço para ele: infobox,
trilha de estágios, aviso de esboço. */
.vector-toc-link {
border-radius: 0 8px 8px 0;
border-inline-start: 3px solid transparent;
padding-inline-start: 0.7rem;
}
.vector-toc-link:hover {
background-color: var(--gg-superficie-2);
}
.vector-toc-list-item-active > .vector-toc-link {
border-inline-start-color: var(--gg-espaco-medio);
background-color: var(--gg-superficie-2);
font-weight: 700;
}
.vector-toc-numb {
color: var(--gg-texto-suave);
font-family: var(--gg-fonte-titulo);
font-weight: 300;
}
/* --------------------------------------------------------------------------
5. TÍTULO DA PÁGINA E CONTEÚDO
-------------------------------------------------------------------------- */
#firstHeading,
.mw-first-heading {
font-family: var(--gg-fonte-titulo);
font-size: clamp(1.9rem, 4vw, 2.6rem);
font-weight: 700;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: var(--gg-tracking-display);
border-bottom: 0;
text-wrap: balance;
}
/* Preenchimento com o spore text/space gradient. Versão contida do
Premium Headline: sem contorno, porque num título de artigo repetido
centenas de vezes o contorno vira maneirismo. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
#firstHeading,
.mw-first-heading {
background-image: linear-gradient(176deg, #2d5f9e 0%, #233164 62%, #101a2b 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
@media screen {
html.skin-theme-clientpref-night #firstHeading,
html.skin-theme-clientpref-night .mw-first-heading {
background-image: linear-gradient(176deg, #cfe6fb 0%, #7cc0ef 55%, #4e9dd8 100%);
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os #firstHeading,
html.skin-theme-clientpref-os .mw-first-heading {
background-image: linear-gradient(176deg, #cfe6fb 0%, #7cc0ef 55%, #4e9dd8 100%);
}
}
@media (forced-colors: active) {
#firstHeading,
.mw-first-heading {
background-image: none;
-webkit-text-fill-color: CanvasText;
color: CanvasText;
}
}
/* A página inicial já traz o próprio <h1> dentro do conteúdo. Dois <h1>
na mesma página é ruído para leitor de tela — escondemos o do skin.
(Alternativa melhor a longo prazo: rebaixar o título do conteúdo para
== e deixar só o <h1> do MediaWiki.) */
.page-Página_principal .vector-page-titlebar,
.page-Página_principal #firstHeading {
display: none;
}
.mw-body-content {
font-size: 1rem;
line-height: 1.65;
color: var(--gg-texto);
}
.mw-body-content p {
max-width: 78ch;
text-wrap: pretty;
}
/* Parágrafo de abertura: um degrau acima do resto. Toda wiki tem essa
convenção implícita — a lead define o assunto — mas quase nenhuma
marca isso tipograficamente. */
.mw-parser-output > p:first-of-type {
font-size: 1.075rem;
line-height: 1.62;
}
/* E o nome do verbete, que a convenção manda vir em negrito na primeira
frase, sai na fonte da marca. Custo: nenhum — o negrito já está lá. */
.mw-parser-output > p:first-of-type > b:first-child,
.mw-parser-output > p:first-of-type > strong:first-child {
font-family: var(--gg-fonte-titulo);
font-size: 1.12em;
font-weight: 700;
letter-spacing: 0.01em;
}
/* Marcadores de lista no azul da marca. ::marker preserva a semântica da
lista — nada de list-style:none com pseudo-elementos. */
.mw-parser-output ul > li::marker,
.mw-parser-output ol > li::marker {
color: var(--gg-espaco-medio);
}
.mw-parser-output ol > li::marker {
font-family: var(--gg-fonte-titulo);
font-weight: 700;
}
/* Títulos de seção com um "núcleo celular" antes — o único enfeite
repetido no corpo do texto, e ele carrega o tema sozinho. */
.mw-body-content .mw-heading2,
.mw-body-content > h2 {
position: relative;
margin-top: 2.25rem;
padding-bottom: 0.35rem;
border-bottom: 2px solid var(--gg-borda);
}
.mw-body-content h2 {
font-family: var(--gg-fonte-titulo);
font-size: 1.5rem;
font-weight: 400;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: var(--gg-tracking-titulo);
border-bottom: 0;
padding-bottom: 0;
}
.mw-body-content .mw-heading2::after,
.mw-body-content > h2::after {
content: '';
position: absolute;
inset-inline-start: 0;
bottom: -2px;
width: 3.5rem;
height: 2px;
background: linear-gradient(90deg, var(--gg-espaco-claro), var(--gg-espaco-medio));
}
/* O <h2> e seus links de editar seção na mesma linha de base, para o
"[ editar | editar código-fonte ]" não quebrar no meio dos colchetes. */
.mw-body-content .mw-heading2 {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
}
.mw-body-content .mw-heading2 .mw-editsection {
white-space: nowrap;
}
/* Abaixo do h2 a hierarquia vem do peso e da caixa, não do corpo — SPORE só
tem três pesos, então a escala precisa ser econômica. */
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
font-family: var(--gg-fonte-titulo);
line-height: 1.35;
}
.mw-body-content h3 {
font-size: 1.2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--gg-tracking-titulo);
}
.mw-body-content h4 {
font-size: 1.05rem;
font-weight: 700;
}
/* h5 e h6 saem da caixa alta: nesse corpo, em fonte de display, viram
sopa de letrinhas. Voltam para a fonte de texto. */
.mw-body-content h5,
.mw-body-content h6 {
font-family: var(--gg-fonte-texto);
font-size: 1rem;
font-weight: 700;
}
/* -- Links ----------------------------------------------------------------- */
.mw-parser-output a:not(.image):not(.mw-file-description) {
text-underline-offset: 0.16em;
text-decoration-thickness: 1px;
transition: text-decoration-thickness 100ms ease;
}
.mw-parser-output a:hover {
text-decoration-thickness: 2px;
}
.mw-parser-output a.new,
.mw-parser-output a.new:visited {
color: var(--gg-link-novo);
}
/* Foco: âmbar grosso, offset generoso, funciona sobre claro e sobre escuro. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--gg-foco);
outline-offset: 2px;
border-radius: 3px;
}
/* -- Tabelas --------------------------------------------------------------- */
.mw-body-content .wikitable {
border: 1px solid var(--gg-borda);
border-radius: var(--gg-raio);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--gg-superficie);
color: var(--gg-texto);
box-shadow: 0 6px 18px -12px var(--gg-sombra);
}
.mw-body-content .wikitable > * > tr > th {
background: var(--gg-vidro);
border-color: var(--gg-borda);
color: var(--gg-texto);
font-family: var(--gg-fonte-titulo);
font-weight: 400;
}
.mw-body-content .wikitable > * > tr > td {
border-color: var(--gg-borda);
}
.mw-body-content .wikitable > tbody > tr:hover > td {
background: color-mix(in srgb, var(--gg-espaco-claro) 10%, transparent);
}
/* -- Miniaturas, citações, código ------------------------------------------ */
.mw-body-content figure[typeof~='mw:File/Thumb'],
.mw-body-content .thumbinner {
border-radius: var(--gg-raio);
border-color: var(--gg-borda);
background: var(--gg-superficie-2);
overflow: hidden;
}
.mw-body-content figcaption,
.mw-body-content .thumbcaption {
padding: 0.5rem 0.7rem 0.65rem;
color: var(--gg-texto-suave);
font-size: 0.8125rem;
line-height: 1.4;
}
.mw-body-content blockquote {
margin-inline: 0;
padding: 0.9rem 1.2rem;
border-inline-start: 4px solid var(--gg-espaco-claro);
border-radius: 0 var(--gg-raio) var(--gg-raio) 0;
background: var(--gg-vidro);
font-size: 1.05rem;
}
.mw-body-content code,
.mw-body-content pre,
.mw-body-content .mw-code {
border-color: var(--gg-borda);
border-radius: 8px;
background: var(--gg-superficie-2);
color: var(--gg-texto);
font-family: var(--gg-fonte-mono);
font-size: 0.9em;
}
/* -- Caixas de mensagem ----------------------------------------------------
Movidas para Common.css: .gg-esboco e .ambox são conteúdo, aparecem no
Minerva e na pré-visualização do editor, então não podem morar aqui. */
/* -- Categorias ao pé do artigo -------------------------------------------- */
.catlinks {
margin-top: 2.5rem;
padding: 0.75rem 1rem;
border: 1px solid var(--gg-borda);
border-radius: var(--gg-raio);
background: var(--gg-superficie-2);
}
.catlinks > div > ul {
display: inline-flex;
flex-wrap: wrap;
gap: 0.4rem;
vertical-align: middle;
}
.catlinks > div > ul > li {
margin: 0;
padding: 0;
border: 0;
}
.catlinks > div > ul > li > a {
display: inline-block;
padding: 0.2rem 0.7rem;
border: 1px solid var(--gg-borda-forte);
border-radius: 999px;
background: var(--gg-superficie);
font-size: 0.875rem;
text-decoration: none;
}
.catlinks > div > ul > li > a:hover {
border-color: var(--gg-espaco-medio);
background: color-mix(in srgb, var(--gg-espaco-medio) 8%, var(--gg-superficie));
}
/* -- Link de editar seção -------------------------------------------------- */
.mw-editsection {
font-family: var(--gg-fonte-texto);
font-size: 0.8125rem;
opacity: 0.55;
transition: opacity 120ms ease;
}
.mw-heading:hover .mw-editsection,
.mw-editsection:focus-within {
opacity: 1;
}
/* --------------------------------------------------------------------------
6. RODAPÉ
Era escuro e virou um bloco flutuando torto: o fundo pegava só uma das
caixas aninhadas, e o arredondamento cortava antes das últimas linhas.
Rodapé de wiki não é lugar de efeito — vira um filete azul e silêncio.
-------------------------------------------------------------------------- */
.mw-footer,
#footer {
border-top: 3px solid var(--gg-espaco-medio);
color: var(--gg-texto-suave);
}
.mw-footer a,
.mw-footer a:visited,
#footer a,
#footer a:visited {
color: var(--gg-link);
}
/* --------------------------------------------------------------------------
7. MOVIMENTO E IMPRESSÃO
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media print {
body {
background: none !important;
color: #000 !important;
}
.mw-page-container {
box-shadow: none;
border-radius: 0;
}
.vector-header-container::after { display: none; }
}