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
* REVISÃO 3 — 2026-07-28
*
* Confira que esta versão é a que está no ar: abra o load.php do site e
* procure por "REVISÃO 3". O ResourceLoader guarda o CSS do site por até
* cinco minutos, e o navegador guarda mais um tanto além disso.
* =============================================================================
*
* O QUE MUDOU NESTA REVISÃO
* - Herói da inicial vira um bloco contínuo: título, subtítulo e painel de
* números formam um degradê vertical só, sem nenhuma linha entre eles.
* - Bordas de 1px varridas da inicial. Sobraram três: o traço de acento sob
* cada seção, a barra lateral das pastilhas e o tracejado do {{Esboço}}.
* - Título da infobox costurado à caixa: raios idênticos, bordas contínuas,
* e o acento virou sombra interna (não gera linha própria).
* - Busca sem borda nenhuma. Campo preenchido, botão discreto.
* - SPORE em h1, h2 e h3 com especificidade alta o bastante para vencer o
* serifado que o MediaWiki injeta junto com o conteúdo (ver §6).
*
* REGRA DE OURO
* Nenhum componente pode ter regra presa a um tema. Toda diferença entre
* claro e escuro vive nos tokens (§2 e §3). O MediaWiki tem TRÊS classes de
* tema — clientpref-day, clientpref-night e clientpref-os (automático) — e
* regra presa a "night" não vale no automático.
*
* ÍNDICE
* 1. Fontes 9. Infoboxes
* 2. Tokens — claro 10. {{Esboço}}
* 3. Tokens — escuro 11. {{Trilha de estágios}}
* 4. Ponte com o Codex 12. Tabelas
* 5. Base 13. Página inicial
* 6. Títulos 14. Imagens e miscelânea
* 7. Texto e código 15. Responsivo
* 8. Estrutura da skin 16. Preferências do leitor
* =============================================================================
*/
/* =============================================================================
* 1. FONTES — remova se já estiverem em MediaWiki:Common.css
* ========================================================================== */
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('/images/fonts/AtkinsonHyperlegibleNext.woff2') format('woff2');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('/images/fonts/AtkinsonHyperlegibleMono.woff2') format('woff2');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SPORE';
src: url('/images/fonts/SPORELight.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SPORE';
src: url('/images/fonts/SPORERegular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SPORE';
src: url('/images/fonts/SPOREBold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* =============================================================================
* 2. TOKENS — TEMA CLARO
* ========================================================================== */
:root {
/* --- Marca --- */
--gg-azul-abissal: #041c3a;
--gg-azul-profundo: #0a2f5c;
--gg-azul: #0b5ea8;
--gg-azul-vivo: #1a8fd0;
--gg-roxo: #6d2a86;
--gg-verde: #256b42;
--gg-vermelho: #b3341f;
/*
* Rampa do herói. Quatro paradas, distribuídas em três blocos empilhados.
* A cor final de um bloco é a inicial do seguinte, então a emenda somem.
* A parada mais clara (--gg-heroi-4) tem 4,7:1 contra branco: texto
* pequeno branco em cima dela ainda passa no AA.
*/
--gg-heroi-1: #041c3a;
--gg-heroi-2: #093a68;
--gg-heroi-3: #0b5ea8;
--gg-heroi-4: #0f77c0;
--gg-sobre-heroi: #ffffff;
--gg-sobre-heroi-linha: rgba(255, 255, 255, .22);
/* --- Superfícies --- */
--gg-fundo: #eef3f9;
--gg-superficie: #ffffff;
--gg-superficie-2: #f3f7fc;
--gg-superficie-3: #e4edf7;
--gg-borda: #d7e3f0;
--gg-borda-forte: #9db8d3;
/* --- Texto --- */
--gg-texto: #14202e;
--gg-texto-suave: #48596d;
--gg-titulo-cor: #0a2f5c;
--gg-sobre-acento: #ffffff;
/* --- Ligações --- */
--gg-link: #0b5ea8;
--gg-link-hover: #0a2f5c;
--gg-link-visitado: #6d2a86;
--gg-link-novo: #b3341f;
--gg-foco: #1a8fd0;
--gg-codigo-cor: #0a2f5c;
/* --- Cores de espécie das infoboxes (acento / fundo do acento) --- */
--gg-a-jogo: #0b5ea8; --gg-a-jogo-f: #e6eef8;
--gg-a-estagio: #256b42; --gg-a-estagio-f: #e3f2e9;
--gg-a-criador: #0f6f8c; --gg-a-criador-f: #e0f1f6;
--gg-a-criacao: #6d2a86; --gg-a-criacao-f: #f1e6f5;
--gg-a-download: #37527a; --gg-a-download-f: #e8edf5;
--gg-a-raridade: #7d5308; --gg-a-raridade-f: #f7efdd;
--gg-a-ferramenta: #9c4315; --gg-a-ferramenta-f: #f9e9e0;
--gg-a-arquetipo: #4b3fa0; --gg-a-arquetipo-f: #e9e7f7;
--gg-acento: var(--gg-a-jogo);
--gg-acento-fraco: var(--gg-a-jogo-f);
/* --- Tipografia --- */
--gg-fonte-texto: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
--gg-fonte-display: 'SPORE', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
--gg-fonte-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
/* --- Forma --- */
--gg-r-1: 6px;
--gg-r-2: 12px;
--gg-r-3: 18px;
--gg-r-pilula: 999px;
--gg-sombra-1: 0 1px 2px rgba(4, 28, 58, .04), 0 4px 16px rgba(4, 28, 58, .06);
--gg-sombra-2: 0 2px 4px rgba(4, 28, 58, .06), 0 16px 40px rgba(4, 28, 58, .10);
--gg-glifos-opacidade: .55;
--gg-glifos-filtro: none;
--gg-glifos-tamanho: 420px;
--gg-transicao: 140ms ease;
}
/* =============================================================================
* 3. TOKENS — TEMA ESCURO
*
* Dois blocos idênticos de propósito: (a) escuro fixo, (b) escuro automático
* — vale para clientpref-os e para wikis sem modo noturno, exceto quando o
* leitor fixou o claro. Ao editar um, edite o outro.
*
* Sombra aqui é NONE: sombra preta sobre fundo escuro vira borrão. A
* separação entre camadas vem da borda, que fica mais visível.
* ========================================================================== */
html.skin-theme-clientpref-night {
--gg-azul-abissal: #050d19;
--gg-azul-profundo: #0d2440;
--gg-azul: #7ec9f3;
--gg-azul-vivo: #8fd4fa;
--gg-roxo: #c79ce0;
--gg-verde: #74d19a;
--gg-vermelho: #ff9d86;
/* O herói continua escuro nos dois temas: as paradas quase não mudam. */
--gg-heroi-1: #03101f;
--gg-heroi-2: #072a4c;
--gg-heroi-3: #0a4a85;
--gg-heroi-4: #0d5fa4;
--gg-sobre-heroi: #ffffff;
--gg-sobre-heroi-linha: rgba(255, 255, 255, .18);
--gg-fundo: #0a1220;
--gg-superficie: #111c2e;
--gg-superficie-2: #17243a;
--gg-superficie-3: #22344f;
--gg-borda: #2f4467;
--gg-borda-forte: #55719d;
--gg-texto: #e7eef8;
--gg-texto-suave: #b3c3d8;
--gg-titulo-cor: #e7eef8;
--gg-sobre-acento: #06101f;
--gg-link: #7ec9f3;
--gg-link-hover: #b0e2fb;
--gg-link-visitado: #d3aae9;
--gg-link-novo: #ff9d86;
--gg-foco: #8fd4fa;
--gg-codigo-cor: #a5e4f7;
--gg-a-jogo: #7ec9f3; --gg-a-jogo-f: #17293e;
--gg-a-estagio: #7ed9a5; --gg-a-estagio-f: #14301f;
--gg-a-criador: #7cd8ef; --gg-a-criador-f: #103040;
--gg-a-criacao: #d3aae9; --gg-a-criacao-f: #291a36;
--gg-a-download: #a9bedd; --gg-a-download-f: #1a2438;
--gg-a-raridade: #e6bd72; --gg-a-raridade-f: #31260f;
--gg-a-ferramenta: #f2a97f; --gg-a-ferramenta-f: #331f10;
--gg-a-arquetipo: #b3a7f5; --gg-a-arquetipo-f: #201d3c;
--gg-sombra-1: none;
--gg-sombra-2: none;
--gg-glifos-opacidade: .06;
--gg-glifos-filtro: invert(1);
}
@media (prefers-color-scheme: dark) {
html:not(.skin-theme-clientpref-day) {
--gg-azul-abissal: #050d19;
--gg-azul-profundo: #0d2440;
--gg-azul: #7ec9f3;
--gg-azul-vivo: #8fd4fa;
--gg-roxo: #c79ce0;
--gg-verde: #74d19a;
--gg-vermelho: #ff9d86;
--gg-heroi-1: #03101f;
--gg-heroi-2: #072a4c;
--gg-heroi-3: #0a4a85;
--gg-heroi-4: #0d5fa4;
--gg-sobre-heroi: #ffffff;
--gg-sobre-heroi-linha: rgba(255, 255, 255, .18);
--gg-fundo: #0a1220;
--gg-superficie: #111c2e;
--gg-superficie-2: #17243a;
--gg-superficie-3: #22344f;
--gg-borda: #2f4467;
--gg-borda-forte: #55719d;
--gg-texto: #e7eef8;
--gg-texto-suave: #b3c3d8;
--gg-titulo-cor: #e7eef8;
--gg-sobre-acento: #06101f;
--gg-link: #7ec9f3;
--gg-link-hover: #b0e2fb;
--gg-link-visitado: #d3aae9;
--gg-link-novo: #ff9d86;
--gg-foco: #8fd4fa;
--gg-codigo-cor: #a5e4f7;
--gg-a-jogo: #7ec9f3; --gg-a-jogo-f: #17293e;
--gg-a-estagio: #7ed9a5; --gg-a-estagio-f: #14301f;
--gg-a-criador: #7cd8ef; --gg-a-criador-f: #103040;
--gg-a-criacao: #d3aae9; --gg-a-criacao-f: #291a36;
--gg-a-download: #a9bedd; --gg-a-download-f: #1a2438;
--gg-a-raridade: #e6bd72; --gg-a-raridade-f: #31260f;
--gg-a-ferramenta: #f2a97f; --gg-a-ferramenta-f: #331f10;
--gg-a-arquetipo: #b3a7f5; --gg-a-arquetipo-f: #201d3c;
--gg-sombra-1: none;
--gg-sombra-2: none;
--gg-glifos-opacidade: .06;
--gg-glifos-filtro: invert(1);
}
}
/* =============================================================================
* 4. PONTE COM OS TOKENS DO CODEX
* ========================================================================== */
:root {
--background-color-base: var(--gg-superficie);
--background-color-neutral: var(--gg-superficie-2);
--background-color-neutral-subtle: var(--gg-superficie-2);
--background-color-interactive-subtle: var(--gg-superficie-2);
--background-color-interactive: var(--gg-superficie-3);
--background-color-progressive: var(--gg-azul);
--background-color-progressive--hover: var(--gg-link-hover);
--background-color-progressive-subtle: var(--gg-superficie-3);
--background-color-button-quiet--hover: var(--gg-superficie-3);
--background-color-button-quiet--active: var(--gg-superficie-3);
--color-base: var(--gg-texto);
--color-emphasized: var(--gg-texto);
--color-subtle: var(--gg-texto-suave);
--color-placeholder: var(--gg-texto-suave);
--color-progressive: var(--gg-link);
--color-progressive--hover: var(--gg-link-hover);
--color-visited: var(--gg-link-visitado);
--color-destructive: var(--gg-link-novo);
--color-inverted: var(--gg-sobre-acento);
--color-icon: var(--gg-texto-suave);
--border-color-base: var(--gg-borda-forte);
--border-color-subtle: var(--gg-borda);
--border-color-muted: var(--gg-borda);
--border-color-interactive: var(--gg-borda-forte);
--border-color-progressive: var(--gg-azul);
--box-shadow-color-progressive--focus: var(--gg-foco);
}
/* =============================================================================
* 5. BASE
* ========================================================================== */
html,
body {
background-color: var(--gg-fundo);
color: var(--gg-texto);
}
body {
font-family: var(--gg-fonte-texto);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: url('/images/background.jpg');
background-repeat: repeat;
background-size: var(--gg-glifos-tamanho) auto;
opacity: var(--gg-glifos-opacidade);
filter: var(--gg-glifos-filtro);
}
:focus-visible {
outline: 3px solid var(--gg-foco);
outline-offset: 2px;
border-radius: 3px;
}
::selection {
background: color-mix(in srgb, var(--gg-azul-vivo) 30%, transparent);
color: var(--gg-texto);
}
::placeholder {
color: var(--gg-texto-suave);
opacity: 1;
}
.mw-parser-output a:not(.image):not(.mw-file-description) {
color: var(--gg-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
transition: color var(--gg-transicao), text-decoration-color var(--gg-transicao);
}
.mw-parser-output a:not(.image):not(.mw-file-description):hover {
color: var(--gg-link-hover);
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
}
.mw-parser-output a:visited:not(.image):not(.mw-file-description) {
color: var(--gg-link-visitado);
}
.mw-parser-output a.new,
.mw-parser-output a.new:visited {
color: var(--gg-link-novo);
}
.mw-parser-output a.external {
background-position: right center;
padding-right: .95em;
}
/* =============================================================================
* 6. TÍTULOS
*
* DUAS ARMADILHAS, e as duas custaram uma revisão cada:
*
* (a) INVÓLUCRO. Desde o MediaWiki 1.43 o parser embrulha os títulos em
* <div class="mw-heading mw-heading2"><h2>…</h2></div>. Estilo aplicado
* só no invólucro deixa o texto com o padrão do MediaWiki. Por isso cada
* regra aparece em duas famílias: uma para o ELEMENTO (fonte, cor) e
* outra para a CAIXA (régua, margem).
*
* (b) ORDEM DE CARGA. O MediaWiki injeta os estilos de conteúdo junto com a
* página, e eles podem entrar DEPOIS do CSS do site. Com especificidade
* igual, quem vem depois ganha — e o serifado voltava. Daí os seletores
* com duas classes (.mw-body .mw-parser-output h2), que sobem a
* especificidade para 0-2-1 e vencem o 0-1-1 do núcleo sem !important.
* ========================================================================== */
.mw-body .mw-parser-output h1,
.mw-body .mw-parser-output h2,
.mw-body .mw-parser-output h3,
.mw-body .mw-heading h1,
.mw-body .mw-heading h2,
.mw-body .mw-heading h3,
.mw-body-content .mw-parser-output h1,
.mw-body-content .mw-parser-output h2,
.mw-body-content .mw-parser-output h3,
.mw-parser-output .mw-heading h1,
.mw-parser-output .mw-heading h2,
.mw-parser-output .mw-heading h3,
.vector-body h1,
.vector-body h2,
.vector-body h3,
.vector-page-titlebar h1,
.mw-first-heading,
#firstHeading {
font-family: var(--gg-fonte-display);
color: var(--gg-titulo-cor);
line-height: 1.22;
letter-spacing: .005em;
border-bottom: 0;
scroll-margin-top: 5rem;
text-wrap: balance;
}
/* h4 a h6 ficam na Atkinson: em corpo pequeno ela lê melhor. */
.mw-body .mw-parser-output h4,
.mw-body .mw-parser-output h5,
.mw-body .mw-parser-output h6,
.mw-parser-output .mw-heading h4 {
font-family: var(--gg-fonte-texto);
color: var(--gg-texto);
line-height: 1.3;
}
.mw-body .mw-parser-output h1,
.mw-body .mw-heading h1,
.vector-body h1,
.vector-page-titlebar h1,
.mw-first-heading,
#firstHeading {
font-weight: 400;
font-size: 2.25rem;
margin: 0;
}
.mw-body .mw-parser-output h2,
.mw-body .mw-heading h2,
.mw-parser-output .mw-heading h2,
.vector-body h2 {
font-weight: 700;
font-size: 1.55rem;
margin: 0;
}
.mw-body .mw-parser-output h3,
.mw-parser-output .mw-heading h3,
.vector-body h3 {
font-weight: 700;
font-size: 1.22rem;
margin: 0;
}
.mw-parser-output .mw-heading4 h4,
.mw-parser-output > h4 {
font-weight: 700;
font-size: 1.05rem;
color: var(--gg-texto-suave);
margin: 0;
}
/*
* A CAIXA do h2. .mw-heading2 cobre o MediaWiki novo, .mw-parser-output > h2
* cobre o antigo — nunca coincidem, então a régua nunca duplica.
*/
.mw-parser-output .mw-heading2,
.mw-parser-output > h2 {
position: relative;
border-bottom: 1px solid var(--gg-borda);
padding-bottom: .45rem;
margin: 2.4rem 0 1.1rem;
}
.mw-parser-output .mw-heading2::after,
.mw-parser-output > h2::after {
content: "";
position: absolute; /* absoluto: não vira item do flex do invólucro */
left: 0;
bottom: -1px;
width: 2.5rem;
height: 3px;
background: var(--gg-azul-vivo);
border-radius: var(--gg-r-pilula);
}
.mw-parser-output .mw-heading3,
.mw-parser-output > h3 {
margin: 1.9rem 0 .6rem;
}
.mw-parser-output .mw-heading4,
.mw-parser-output > h4 {
margin: 1.4rem 0 .5rem;
}
.mw-editsection {
font-family: var(--gg-fonte-texto);
font-size: .8rem;
font-weight: 400;
}
/*
* Título da wiki no cabeçalho. Só tem efeito se o wordmark for texto; se for
* imagem (o padrão do $wgLogos), o CSS não alcança — nesse caso troque o
* wordmark por um SVG com a SPORE já convertida em curvas.
*/
.mw-logo-wordmark,
.mw-logo-container .mw-logo-wordmark,
.vector-sticky-header-context-bar-primary {
font-family: var(--gg-fonte-display);
font-weight: 700;
letter-spacing: .01em;
}
/* =============================================================================
* 7. TEXTO E CÓDIGO
* ========================================================================== */
.mw-parser-output p {
margin: .8em 0;
max-width: 78ch;
}
code,
kbd,
samp,
pre,
.mw-code {
font-family: var(--gg-fonte-mono);
font-size: .92em;
}
code {
background: var(--gg-superficie-2);
border: 1px solid var(--gg-borda);
border-radius: var(--gg-r-1);
padding: .1em .35em;
color: var(--gg-codigo-cor);
}
pre,
.mw-code {
background: var(--gg-superficie-2);
color: var(--gg-texto);
border: 0;
border-left: 3px solid var(--gg-azul-vivo);
border-radius: var(--gg-r-2);
padding: 1rem 1.15rem;
overflow-x: auto;
line-height: 1.55;
}
kbd {
background: var(--gg-superficie);
color: var(--gg-texto);
border: 1px solid var(--gg-borda-forte);
border-bottom-width: 3px;
border-radius: var(--gg-r-1);
padding: .1em .45em;
}
blockquote {
border: 0;
border-left: 3px solid var(--gg-azul-vivo);
background: var(--gg-superficie-2);
margin: 1.25rem 0;
padding: .85rem 1.15rem;
border-radius: 0 var(--gg-r-2) var(--gg-r-2) 0;
color: var(--gg-texto-suave);
font-style: normal;
}
hr {
border: 0;
height: 1px;
background: linear-gradient(90deg, var(--gg-borda-forte), transparent);
margin: 2rem 0;
}
/* =============================================================================
* 8. ESTRUTURA DA SKIN
* ========================================================================== */
.mw-page-container {
background: transparent;
max-width: 1600px;
}
/* Cartão do artigo: sombra no claro, borda no escuro (os tokens cuidam disso). */
.mw-content-container,
#content.mw-body {
background: var(--gg-superficie);
color: var(--gg-texto);
border: 1px solid var(--gg-borda);
border-radius: var(--gg-r-3);
box-shadow: var(--gg-sombra-1);
}
.mw-content-container #content.mw-body {
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
}
#content.mw-body,
.vector-body {
padding: 1.6rem 2.1rem 2.6rem;
}
/* --- Cabeçalho --- */
.vector-header-container .vector-header {
background: transparent;
padding-block: .5rem;
}
.vector-sticky-header {
background: color-mix(in srgb, var(--gg-superficie) 90%, transparent);
-webkit-backdrop-filter: blur(10px) saturate(1.25);
backdrop-filter: blur(10px) saturate(1.25);
border-bottom: 1px solid var(--gg-borda);
box-shadow: none;
}
.mw-logo-wordmark {
max-height: 2.1em;
}
.mw-logo-tagline {
font-family: var(--gg-fonte-texto);
color: var(--gg-texto-suave);
font-size: .8rem;
letter-spacing: .02em;
}
/* --- BUSCA ---
* Zero borda. O Codex empilha invólucro sobre invólucro (.cdx-typeahead-search
* > .cdx-search-input > .cdx-search-input__input-wrapper > .cdx-text-input),
* e qualquer borda sobrevivente vira um anel a mais em volta do campo. Todos
* ficam transparentes; o campo é um preenchimento, e o botão é discreto.
*/
.vector-search-box .cdx-typeahead-search,
.vector-search-box .cdx-search-input,
.vector-search-box .cdx-search-input__input-wrapper,
.vector-search-box .cdx-text-input,
.vector-search-box-inner,
.vector-typeahead-search-container {
background: transparent;
border: 0;
box-shadow: none;
}
.vector-search-box .cdx-text-input__input,
.vector-search-box input[type="search"] {
background: var(--gg-superficie-2);
color: var(--gg-texto);
border: 1px solid transparent; /* transparente só para segurar a altura */
border-radius: var(--gg-r-pilula);
box-shadow: none;
font-family: var(--gg-fonte-texto);
padding-left: 2.5em;
transition: background-color var(--gg-transicao), border-color var(--gg-transicao);
}
.vector-search-box .cdx-text-input__input:hover {
background: var(--gg-superficie-3);
}
.vector-search-box .cdx-text-input__input:focus {
background: var(--gg-superficie);
border-color: var(--gg-azul-vivo);
box-shadow: 0 0 0 2px var(--gg-azul-vivo);
outline: 0;
}
.vector-search-box .cdx-search-input__end-button,
.vector-search-box .cdx-search-input__end-button:visited {
background: transparent;
border: 0;
box-shadow: none;
color: var(--gg-link);
border-radius: var(--gg-r-pilula);
margin-left: .3rem;
font-family: var(--gg-fonte-texto);
font-weight: 500;
}
.vector-search-box .cdx-search-input__end-button:hover {
background: var(--gg-superficie-3);
color: var(--gg-link-hover);
}
.cdx-menu {
background: var(--gg-superficie);
border: 1px solid var(--gg-borda);
border-radius: var(--gg-r-2);
box-shadow: var(--gg-sombra-2);
overflow: hidden;
}
/* --- Colunas laterais --- */
.vector-main-menu-container .vector-main-menu,
.vector-page-tools,
.vector-toc,
.vector-appearance,
.vector-dropdown-content {
background: var(--gg-superficie);
color: var(--gg-texto);
border: 1px solid var(--gg-borda);
border-radius: var(--gg-r-2);
box-shadow: var(--gg-sombra-1);
padding: .6rem .5rem;
}
.vector-pinnable-header,
.vector-menu-heading,
.vector-toc-pinnable-header {
font-family: var(--gg-fonte-texto);
font-weight: 700;
font-size: .78rem;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--gg-texto-suave);
}
.vector-menu-content-list li a,
.vector-toc-link,
.vector-page-tools .mw-list-item a {
color: var(--gg-link);
border-radius: var(--gg-r-1);
padding-inline: .5rem;
text-decoration: none;
transition: background-color var(--gg-transicao), color var(--gg-transicao);
}
.vector-menu-content-list li a:hover,
.vector-toc-link:hover,
.vector-page-tools .mw-list-item a:hover {
background: var(--gg-superficie-3);
color: var(--gg-link-hover);
text-decoration: underline;
}
.vector-toc-list-item-active > .vector-toc-link {
background: var(--gg-superficie-3);
font-weight: 700;
box-shadow: inset 3px 0 0 var(--gg-azul-vivo);
}
/* --- Abas: só um sublinhado de acento --- */
.vector-menu-tabs .mw-list-item a,
.vector-menu-tabs-legacy li a {
background: transparent;
border: 0;
border-radius: 0;
color: var(--gg-link);
font-weight: 500;
transition: color var(--gg-transicao), box-shadow var(--gg-transicao);
}
.vector-menu-tabs .mw-list-item a:hover {
background: transparent;
color: var(--gg-link-hover);
text-decoration: underline;
}
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
background: transparent;
color: var(--gg-texto);
font-weight: 700;
box-shadow: inset 0 -3px 0 var(--gg-azul-vivo);
}
/* --- Botões --- */
.cdx-button:not(.cdx-button--weight-quiet) {
border-radius: var(--gg-r-pilula);
font-family: var(--gg-fonte-texto);
font-weight: 500;
border-color: var(--gg-borda-forte);
background: var(--gg-superficie-2);
color: var(--gg-texto);
}
.cdx-button--action-progressive.cdx-button--weight-primary {
background: var(--gg-azul);
border-color: var(--gg-azul);
color: var(--gg-sobre-acento);
}
.cdx-button--weight-quiet {
color: var(--gg-link);
border-radius: var(--gg-r-1);
}
/* --- Rodapé --- */
.mw-footer,
.mw-footer-container {
background: transparent;
color: var(--gg-texto-suave);
border-top: 0;
}
.mw-footer-container {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--gg-borda);
}
.mw-footer li,
.mw-footer a {
color: var(--gg-texto-suave);
}
.mw-footer a:hover {
color: var(--gg-link-hover);
}
/* =============================================================================
* 9. INFOBOXES
*
* POR QUE O TÍTULO DESGRUDAVA
* O <caption> fica FORA da caixa da <table>: nem o border-radius nem o
* overflow da tabela o alcançam. São dois retângulos empilhados, e qualquer
* diferença entre eles aparece como emenda. A costura exige três coisas:
*
* 1. Raios espelhados — o título arredonda só em cima, a tabela só embaixo,
* com o MESMO valor (--gg-r-3).
* 2. Bordas complementares — o título tem topo e laterais, a tabela tem
* laterais e base. Nenhum dos dois tem a borda do meio.
* 3. Acento como SOMBRA INTERNA, não como borda. Borda ocuparia espaço
* próprio e reapareceria como aquela terceira linha entre os dois.
*
* box-sizing: border-box nos dois garante largura idêntica ao pixel.
* ========================================================================== */
.gg-infobox {
float: right;
clear: right;
box-sizing: border-box;
width: 22rem;
max-width: 100%;
margin: .3rem 0 1.5rem 1.75rem;
background: var(--gg-superficie);
border: 1px solid var(--gg-borda);
border-top: 0;
border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
box-shadow: var(--gg-sombra-1);
border-collapse: separate;
border-spacing: 0;
font-size: .92rem;
line-height: 1.5;
}
.gg-infobox-titulo {
caption-side: top;
box-sizing: border-box;
text-align: left;
font-family: var(--gg-fonte-display);
font-weight: 700;
font-size: 1.35rem;
line-height: 1.25;
color: var(--gg-acento);
background: var(--gg-acento-fraco);
padding: .9rem 1.15rem .85rem;
border: 1px solid var(--gg-borda);
border-bottom: 0;
border-radius: var(--gg-r-3) var(--gg-r-3) 0 0;
box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--gg-acento) 30%, transparent);
}
.gg-infobox-subtitulo {
padding: .7rem 1.15rem;
background: var(--gg-acento-fraco);
color: var(--gg-texto-suave);
font-size: .9em;
}
.gg-infobox-imagem {
padding: .95rem 1.15rem;
text-align: center;
background: var(--gg-superficie-2);
}
.gg-infobox-imagem img {
max-width: 100%;
height: auto;
border-radius: var(--gg-r-1);
}
.gg-infobox-legenda {
margin-top: .5rem;
font-size: .85em;
color: var(--gg-texto-suave);
line-height: 1.45;
}
.gg-infobox-rotulo {
width: 38%;
text-align: left;
vertical-align: top;
font-weight: 700;
color: var(--gg-texto-suave);
padding: .6rem .5rem .6rem 1.15rem;
hyphens: auto;
}
.gg-infobox-dado {
vertical-align: top;
padding: .6rem 1.15rem .6rem .5rem;
}
/* Zebra em vez de linhas: ajuda a rastrear a linha sem mais uma borda. */
.gg-infobox tr:nth-child(even) .gg-infobox-rotulo,
.gg-infobox tr:nth-child(even) .gg-infobox-dado {
background: var(--gg-superficie-2);
}
.gg-infobox-rodape {
padding: .75rem 1.15rem;
background: var(--gg-superficie-2);
font-size: .85em;
color: var(--gg-texto-suave);
border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
}
/* --- Cor de espécie. Os pares vêm dos tokens, logo já respeitam o tema. --- */
.gg-infobox-jogo { --gg-acento: var(--gg-a-jogo); --gg-acento-fraco: var(--gg-a-jogo-f); }
.gg-infobox-estagio { --gg-acento: var(--gg-a-estagio); --gg-acento-fraco: var(--gg-a-estagio-f); }
.gg-infobox-criador { --gg-acento: var(--gg-a-criador); --gg-acento-fraco: var(--gg-a-criador-f); }
.gg-infobox-criacao { --gg-acento: var(--gg-a-criacao); --gg-acento-fraco: var(--gg-a-criacao-f); }
.gg-infobox-download { --gg-acento: var(--gg-a-download); --gg-acento-fraco: var(--gg-a-download-f); }
.gg-infobox-raridade { --gg-acento: var(--gg-a-raridade); --gg-acento-fraco: var(--gg-a-raridade-f); }
.gg-infobox-ferramenta { --gg-acento: var(--gg-a-ferramenta); --gg-acento-fraco: var(--gg-a-ferramenta-f); }
.gg-infobox-arquetipo { --gg-acento: var(--gg-a-arquetipo); --gg-acento-fraco: var(--gg-a-arquetipo-f); }
/* =============================================================================
* 10. {{Esboço}}
* ========================================================================== */
.gg-esboco {
display: flow-root;
clear: both;
margin: 2.25rem 0 1rem;
padding: 1rem 1.2rem 1rem 3.4rem;
background: var(--gg-superficie-2);
border: 1px dashed var(--gg-borda-forte);
border-radius: var(--gg-r-2);
color: var(--gg-texto-suave);
font-size: .95rem;
position: relative;
}
/* Broto decorativo — CSS puro, invisível para leitores de tela. */
.gg-esboco::before {
content: "";
position: absolute;
left: 1.25rem;
top: 1.2rem;
width: .85rem;
height: .85rem;
border-radius: 60% 0 60% 60%;
background: var(--gg-verde);
transform: rotate(-15deg);
}
/* =============================================================================
* 11. {{Trilha de estágios}}
* ========================================================================== */
.gg-evolucao {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin: 0 0 1.75rem;
padding: .4rem;
background: var(--gg-superficie-2);
border: 0;
border-radius: var(--gg-r-pilula);
counter-reset: etapa;
}
.gg-evolucao-etapa {
counter-increment: etapa;
flex: 1 1 7rem;
text-align: center;
}
.gg-evolucao-etapa a {
display: block;
padding: .5rem .65rem;
border-radius: var(--gg-r-pilula);
font-family: var(--gg-fonte-texto);
font-weight: 500;
font-size: .95rem;
color: var(--gg-link);
text-decoration: none;
background: transparent;
border: 0;
transition: background-color var(--gg-transicao), color var(--gg-transicao), transform var(--gg-transicao);
}
.gg-evolucao-etapa a::before {
content: counter(etapa) ".";
margin-right: .35em;
color: var(--gg-texto-suave);
font-variant-numeric: tabular-nums;
}
.gg-evolucao-etapa a:hover {
background: var(--gg-superficie-3);
color: var(--gg-link-hover);
transform: translateY(-1px);
text-decoration: underline;
}
/* Estágio atual: cor + peso + preenchimento. Três sinais, não só cor. */
.gg-evolucao-atual a,
.gg-evolucao-atual a:visited {
background: var(--gg-azul);
color: var(--gg-sobre-acento);
font-weight: 700;
}
.gg-evolucao-atual a::before {
color: inherit;
opacity: .7;
}
/* =============================================================================
* 12. TABELAS
* ========================================================================== */
.mw-parser-output table.wikitable {
background: var(--gg-superficie);
color: var(--gg-texto);
border: 1px solid var(--gg-borda);
border-radius: var(--gg-r-2);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
box-shadow: var(--gg-sombra-1);
}
.mw-parser-output table.wikitable > * > tr > th {
background: var(--gg-superficie-3);
color: var(--gg-texto);
border: 0;
padding: .65rem .8rem;
text-align: left;
}
.mw-parser-output table.wikitable > * > tr > td {
border: 0;
padding: .6rem .8rem;
}
.mw-parser-output table.wikitable > * > tr:nth-child(even) > td {
background: var(--gg-superficie-2);
}
/* --- {{Tabela evolutiva}}: mesma costura da infobox --- */
.gg-tabela-evolutiva {
box-sizing: border-box;
width: 100%;
margin: 1.75rem 0;
background: var(--gg-superficie);
color: var(--gg-texto);
border: 1px solid var(--gg-borda);
border-top: 0;
border-radius: 0 0 var(--gg-r-2) var(--gg-r-2);
border-collapse: separate;
border-spacing: 0;
box-shadow: var(--gg-sombra-1);
}
.gg-tabela-evolutiva caption {
caption-side: top;
box-sizing: border-box;
font-family: var(--gg-fonte-texto);
font-weight: 700;
text-align: left;
padding: .85rem 1rem;
color: var(--gg-texto);
background: var(--gg-superficie-2);
border: 1px solid var(--gg-borda);
border-bottom: 0;
border-radius: var(--gg-r-2) var(--gg-r-2) 0 0;
box-shadow: inset 0 -2px 0 var(--gg-borda);
}
.gg-tabela-evolutiva th[scope="col"] {
background: var(--gg-superficie-3);
padding: .6rem .8rem;
text-align: left;
font-size: .82rem;
letter-spacing: .04em;
text-transform: uppercase;
border: 0;
}
.gg-tabela-evolutiva td,
.gg-tabela-evolutiva th[scope="row"] {
padding: .7rem .8rem;
border: 0;
vertical-align: top;
text-align: left;
}
.gg-tabela-evolutiva tbody tr:nth-child(even) td,
.gg-tabela-evolutiva tbody tr:nth-child(even) th[scope="row"] {
background: var(--gg-superficie-2);
}
.gg-te-escolha {
font-weight: 700;
white-space: nowrap;
position: relative;
padding-left: 2.2rem !important;
}
/*
* Marcador da escolha: a FORMA muda junto com a cor — círculo, losango,
* triângulo. A linha continua legível em escala de cinza.
*/
.gg-te-escolha::before {
content: "";
position: absolute;
left: .9rem;
top: 1.1em;
width: .6rem;
height: .6rem;
background: var(--gg-texto-suave);
}
.gg-cor-verde .gg-te-escolha::before { background: var(--gg-verde); border-radius: 50%; }
.gg-cor-azul .gg-te-escolha::before { background: var(--gg-azul); transform: rotate(45deg); }
.gg-cor-vermelho .gg-te-escolha::before { background: var(--gg-vermelho); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gg-cor-neutra .gg-te-escolha::before { background: var(--gg-texto-suave); border-radius: var(--gg-r-1); }
.gg-cor-verde > th:first-child { box-shadow: inset 4px 0 0 var(--gg-verde); }
.gg-cor-azul > th:first-child { box-shadow: inset 4px 0 0 var(--gg-azul); }
.gg-cor-vermelho > th:first-child { box-shadow: inset 4px 0 0 var(--gg-vermelho); }
.gg-cor-neutra > th:first-child { box-shadow: inset 4px 0 0 var(--gg-borda-forte); }
/* =============================================================================
* 13. PÁGINA INICIAL
*
* Aqui a conta de bordas foi a zero. O herói é UM bloco contínuo: os três
* elementos empilhados (título, subtítulo, painel de números) carregam
* fatias da mesma rampa vertical, e a cor final de cada um é a inicial do
* seguinte — a emenda desaparece sem precisar de wrapper no wikitexto.
* ========================================================================== */
/*
* O cartão externo sai em qualquer página que contenha o herói, sem depender
* de como a página se chama. A lista é generosa de propósito: cobre as
* variações de estrutura entre versões do MediaWiki.
*/
.mw-page-container:has(.gg-inicio),
.mw-page-container-inner:has(.gg-inicio),
.mw-content-container:has(.gg-inicio),
.mw-body:has(.gg-inicio),
#content.mw-body:has(.gg-inicio),
.vector-body:has(.gg-inicio) {
background: transparent;
border: 0;
box-shadow: none;
}
.gg-inicio {
max-width: 62rem;
margin-inline: auto;
}
/* --- Herói, fatia 1: a CAIXA do título (invólucro ou o próprio h1) --- */
.gg-inicio > h1,
.gg-inicio > .mw-heading1 {
background: linear-gradient(180deg, var(--gg-heroi-1), var(--gg-heroi-2));
border: 0;
border-radius: var(--gg-r-3) var(--gg-r-3) 0 0;
padding: 2.8rem 1.5rem 1.2rem;
margin: 0;
text-align: center;
display: block;
}
/* --- Herói: o TEXTO do título, embrulhado ou não --- */
.gg-inicio > h1,
.gg-inicio > .mw-heading1 h1,
.gg-inicio .mw-heading1 h1 {
font-family: var(--gg-fonte-display);
font-weight: 400;
font-size: clamp(2rem, 5.5vw, 3.2rem);
line-height: 1.08;
color: var(--gg-sobre-heroi);
border: 0;
margin: 0;
text-align: center;
}
/* --- Herói, fatia 2: subtítulo --- */
.gg-subtitulo {
text-align: center;
color: var(--gg-sobre-heroi);
background: linear-gradient(180deg, var(--gg-heroi-2), var(--gg-heroi-3));
padding: 0 1.5rem 1.9rem;
font-size: 1.05rem;
margin: 0;
}
.gg-subtitulo b,
.gg-subtitulo strong {
font-weight: 700;
}
/* --- Herói, fatia 3: painel de números --- */
.gg-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
background: linear-gradient(180deg, var(--gg-heroi-3), var(--gg-heroi-4));
border: 0;
border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
overflow: hidden;
margin: 0 0 2.75rem;
box-shadow: none;
}
.gg-stat {
background: transparent;
padding: 1.35rem .85rem 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
gap: .15rem;
justify-content: center;
box-shadow: inset 1px 0 0 var(--gg-sobre-heroi-linha);
}
.gg-stat:first-child {
box-shadow: none;
}
.gg-stat-numero {
font-family: var(--gg-fonte-display);
font-size: 2rem;
line-height: 1.1;
font-weight: 400;
color: var(--gg-sobre-heroi);
font-variant-numeric: tabular-nums;
}
.gg-stat-rotulo {
font-size: .84rem;
line-height: 1.35;
color: var(--gg-sobre-heroi);
text-wrap: balance;
}
/* --- Seções: sem régua, só o traço de acento --- */
.gg-inicio .mw-heading2,
.gg-inicio > h2 {
border-bottom: 0;
padding-bottom: .5rem;
margin: 2.5rem 0 1rem;
}
.gg-inicio .mw-heading2::after,
.gg-inicio > h2::after {
bottom: 0;
width: 2.75rem;
}
.gg-inicio .mw-heading2 h2,
.gg-inicio > h2 {
font-size: 1.4rem;
}
/*
* Pastilhas: preenchimento em vez de contorno. Continuam <ul>/<li> no HTML,
* então a semântica e a navegação por leitor de tela não mudam.
*/
.gg-inicio ul {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
gap: .55rem;
}
.gg-inicio ul li {
margin: 0;
}
.gg-inicio ul li a {
display: block;
padding: .85rem 1.05rem;
background: var(--gg-superficie-2);
border: 0;
border-left: 4px solid var(--gg-azul-vivo);
border-radius: var(--gg-r-1) var(--gg-r-2) var(--gg-r-2) var(--gg-r-1);
color: var(--gg-link);
font-weight: 500;
text-decoration: none;
box-shadow: none;
transition: transform var(--gg-transicao), background-color var(--gg-transicao),
border-color var(--gg-transicao);
}
.gg-inicio ul li a:hover {
transform: translateY(-2px);
background: var(--gg-superficie-3);
border-left-color: var(--gg-azul);
text-decoration: underline;
}
.gg-inicio ul li a.new {
border-left-color: var(--gg-vermelho);
}
/* =============================================================================
* 14. IMAGENS E MISCELÂNEA
* ========================================================================== */
.mw-parser-output figure[typeof~='mw:File/Thumb'],
.mw-parser-output .thumbinner {
background: var(--gg-superficie-2);
color: var(--gg-texto);
border: 0;
border-radius: var(--gg-r-2);
box-shadow: none;
padding: .55rem;
}
.mw-parser-output .thumbcaption,
.mw-parser-output figcaption {
color: var(--gg-texto-suave);
font-size: .88rem;
line-height: 1.45;
padding: .5rem .35rem .2rem;
}
.mw-parser-output figure img,
.mw-parser-output .thumbimage {
border: 0;
border-radius: var(--gg-r-1);
}
.catlinks {
background: var(--gg-superficie-2);
color: var(--gg-texto);
border: 0;
border-radius: var(--gg-r-2);
padding: .85rem 1.1rem;
margin-top: 2.25rem;
}
.mw-parser-output .reflist,
.mw-parser-output .references {
font-size: .9rem;
color: var(--gg-texto-suave);
}
.mw-message-box,
.cdx-message {
border-radius: var(--gg-r-2);
}
.mw-parser-output .toc {
background: var(--gg-superficie-2);
border: 0;
border-radius: var(--gg-r-2);
}
/* =============================================================================
* 15. RESPONSIVO
* ========================================================================== */
@media (max-width: 720px) {
#content.mw-body,
.vector-body {
padding: 1.25rem 1.1rem 2rem;
}
.mw-content-container,
#content.mw-body {
border-radius: var(--gg-r-2);
}
.gg-infobox,
.gg-infobox-titulo {
float: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.gg-infobox {
margin-bottom: 1.5rem;
}
.gg-evolucao {
border-radius: var(--gg-r-2);
}
.gg-inicio ul {
grid-template-columns: 1fr;
}
.gg-stats {
grid-template-columns: repeat(2, 1fr);
}
/* Na grade 2×2 a linha separadora da terceira célula fica sobrando. */
.gg-stat:nth-child(3) {
box-shadow: none;
}
.gg-tabela-evolutiva,
.mw-parser-output table.wikitable {
display: block;
overflow-x: auto;
max-width: 100%;
}
}
/* =============================================================================
* 16. PREFERÊNCIAS DO LEITOR
* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.gg-inicio ul li a:hover,
.gg-evolucao-etapa a:hover {
transform: none;
}
}
@media (forced-colors: active) {
.gg-infobox,
.gg-infobox-titulo,
.gg-esboco,
.gg-evolucao,
.gg-tabela-evolutiva,
.gg-stats,
.gg-inicio ul li a,
.mw-content-container {
border: 1px solid CanvasText;
box-shadow: none;
}
.gg-evolucao-atual a {
outline: 3px solid CanvasText;
outline-offset: 2px;
}
body::before {
display: none;
}
}
@media print {
body::before {
display: none;
}
.mw-content-container,
#content.mw-body,
.gg-infobox,
.gg-stats,
.gg-tabela-evolutiva {
box-shadow: none;
border-color: #999;
}
.gg-inicio > h1,
.gg-inicio > .mw-heading1,
.gg-inicio > .mw-heading1 h1,
.gg-subtitulo,
.gg-stats,
.gg-stat-numero,
.gg-stat-rotulo {
background: none !important;
color: #000 !important;
}
.gg-evolucao,
.catlinks {
display: none;
}
}