MediaWiki:Vector-2022.css: mudanças entre as edições

/* ==========================================================================
   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.
   BUG CORRIGIDO: a busca do Vector é um <form class="cdx-search-input">
   com um <div class="cdx-text-input"> e um <button> IRMÃO ao lado.
   Eu tinha arredondado só o <input>, então a pílula aparecia por dentro
   e a borda retangular do grupo continuava desenhada por fora — os dois
   traçados da sua captura. O raio agora vai nas PONTAS do grupo: canto
   esquerdo no input, canto direito no botão. */
.vector-search-box .cdx-text-input__input {
	border-start-start-radius: 999px;
	border-end-start-radius: 999px;
	border-color: var(--gg-borda-forte);
	background-color: var(--gg-superficie);
	color: var(--gg-texto);
}

/* Quando não há botão (cabeçalho fixo, telas estreitas), é pílula inteira. */
.vector-search-box .cdx-search-input:not( .cdx-search-input--has-end-button ) .cdx-text-input__input {
	border-radius: 999px;
}

.vector-search-box .cdx-search-input__end-button {
	border-start-end-radius: 999px;
	border-end-end-radius: 999px;
}

.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;
}

/* O sumário vira uma trilha: um trilho vertical com um orbe por seção.
   O orbe da seção corrente acende. Mesmo motivo que marca os títulos do
   corpo — planeta, célula, esfera; é o vocabulário do jogo. */

#vector-toc .vector-toc-contents,
.vector-toc .vector-toc-contents {
	position: relative;
}

#vector-toc .vector-toc-contents::before,
.vector-toc .vector-toc-contents::before {
	content: '';
	position: absolute;
	inset-inline-start: 0.42rem;
	top: 1.1rem;
	bottom: 1.1rem;
	width: 2px;
	border-radius: 2px;
	background: var(--gg-borda);
}

.vector-toc-link {
	position: relative;
	border: 0;
	border-radius: 0 999px 999px 0;
	padding-inline-start: 1.6rem;
}

.vector-toc-level-1 > .vector-toc-link::before {
	content: '';
	position: absolute;
	inset-inline-start: 0.05rem;
	top: 0.95em;
	width: 0.75rem;
	height: 0.75rem;
	box-sizing: border-box;
	border: 2px solid var(--gg-borda-forte);
	border-radius: 50%;
	background: var(--gg-superficie);
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.vector-toc-link:hover {
	background-color: var(--gg-superficie-2);
}

.vector-toc-level-1 > .vector-toc-link:hover::before {
	border-color: var(--gg-espaco-claro);
}

.vector-toc-list-item-active > .vector-toc-link {
	background-color: var(--gg-superficie-2);
	font-weight: 700;
}

.vector-toc-list-item-active > .vector-toc-link::before {
	border-color: var(--gg-espaco-medio);
	background: radial-gradient(
		circle at 34% 28%,
		#ffffff 0 12%,
		var(--gg-espaco-claro) 40%,
		var(--gg-espaco-medio) 78%,
		#233164 100%
	);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-espaco-medio) 22%, transparent);
}

.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));
}

/* Orbe pendurado na margem, alinhado ao título. Só onde há goteira para
   ele: abaixo de 60rem a coluna encosta na borda e ele seria cortado. */
@media (min-width: 60rem) {
	.mw-body-content .mw-heading2::before,
	.mw-body-content > h2::before {
		content: '';
		position: absolute;
		inset-inline-start: -1.85rem;
		top: 0.5em;
		width: 0.85rem;
		height: 0.85rem;
		border-radius: 50%;
		background: radial-gradient(
			circle at 34% 28%,
			#ffffff 0 10%,
			var(--gg-espaco-claro) 38%,
			var(--gg-espaco-medio) 76%,
			#233164 100%
		);
		box-shadow: 0 1px 3px rgba(0, 17, 34, 0.28);
	}
}

/* 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É
   Aqui o cósmico volta, fechando a página do jeito que ela começou.
   -------------------------------------------------------------------------- */

/* O nome da caixa do rodapé varia entre versões do Vector 2022; os quatro
   seletores cobrem as variantes conhecidas. Se ainda sair branco, inspecione
   o <footer> e acrescente a classe que aparecer lá. */
.mw-footer-container,
.mw-footer,
#footer,
.vector-footer {
	border-top: 3px solid var(--gg-espaco-medio);
	background-color: var(--gg-espaco-fundo);
	background-image: linear-gradient(180deg, #233164 0%, #00000d 100%);
	color: var(--gg-espaco-texto-2);
	border-radius: 0 0 var(--gg-raio-g) var(--gg-raio-g);
}

.mw-footer a,
.mw-footer a:visited,
#footer a,
#footer a:visited {
	color: var(--gg-espaco-claro);
}

.mw-footer li,
#footer li {
	color: var(--gg-espaco-texto-2);
}

@media (max-width: 1000px) {
	.mw-footer-container,
	.mw-footer,
	#footer { border-radius: 0; }
}

/* --------------------------------------------------------------------------
   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,
	.mw-footer-container,
	.mw-footer {
		background: none !important;
		color: #000 !important;
	}
	.mw-page-container {
		box-shadow: none;
		border-radius: 0;
	}
	.vector-header-container::after { display: none; }
}