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-ambar);
	--background-color-progressive: var(--gg-nebulosa);
	--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-cosmo-900);
	background-image: var(--gg-estrelas), var(--gg-nebulosa-fundo);
	background-size: 420px 420px, cover;
	background-attachment: 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-nebulosa-viva) 0%,
		var(--gg-ciano) 35%,
		var(--gg-celula-viva) 65%,
		var(--gg-ambar-vivo) 100%
	);
}

.vector-sticky-header {
	background-color: var(--gg-superficie);
	border-bottom-color: var(--gg-borda);
}

/* Busca: o foco é âmbar, quente, difícil de perder de vista. */
.vector-search-box .cdx-text-input__input {
	border-radius: 999px;
	border-color: var(--gg-borda-forte);
	background-color: var(--gg-superficie-2);
	color: var(--gg-texto);
}

.vector-search-box .cdx-text-input__input:focus {
	border-color: var(--gg-realce);
	box-shadow: inset 0 0 0 1px var(--gg-realce);
}

/* --------------------------------------------------------------------------
   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.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vector-toc-link {
	border-radius: 0 8px 8px 0;
	border-left: 3px solid transparent;
	padding-left: 0.6rem;
}

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

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

/* --------------------------------------------------------------------------
   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;
	font-variation-settings: 'SOFT' 50, 'WONK' 1;
	line-height: 1.1;
	letter-spacing: -0.01em;
	border-bottom: 0;
	text-wrap: balance;
}

/* 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;
}

/* 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.6rem;
	font-weight: 700;
	font-variation-settings: 'SOFT' 40;
	line-height: 1.25;
	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: 2.75rem;
	height: 2px;
	background: var(--gg-celula);
}

.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
	font-family: var(--gg-fonte-titulo);
	font-weight: 700;
	font-variation-settings: 'SOFT' 30;
	line-height: 1.3;
}

.mw-body-content h3 { font-size: 1.25rem; }
.mw-body-content h4 { font-size: 1.08rem; }

/* -- 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-realce);
	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-superficie-2);
	border-color: var(--gg-borda);
	color: var(--gg-texto);
	font-family: var(--gg-fonte-titulo);
	font-weight: 700;
}

.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-celula) 8%, 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-nebulosa);
	border-radius: 0 var(--gg-raio) var(--gg-raio) 0;
	background: var(--gg-superficie-2);
	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 / esboço ------------------------------------------- */

.mw-body-content .ambox,
.mw-body-content .gg-aviso {
	margin: 1.25rem 0;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--gg-borda);
	border-inline-start: 5px solid var(--gg-ambar);
	border-radius: var(--gg-raio);
	background: var(--gg-superficie-2);
	color: var(--gg-texto-suave);
	font-size: 0.9375rem;
}

/* -- 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.
   -------------------------------------------------------------------------- */

.mw-footer-container,
.mw-footer {
	border-top: 3px solid var(--gg-nebulosa);
	background-color: var(--gg-cosmo-800);
	background-image: var(--gg-estrelas), var(--gg-nebulosa-fundo);
	background-size: 380px 380px, cover;
	color: var(--gg-cosmo-texto-2);
	border-radius: 0 0 var(--gg-raio-g) var(--gg-raio-g);
}

.mw-footer a,
.mw-footer a:visited {
	color: var(--gg-celula-viva);
}

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

@media (max-width: 1000px) {
	.mw-footer-container,
	.mw-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; }
}