MediaWiki:Vector-2022.css - Histórico de revisão

Admin em 12h06min de 29 de julho de 2026

2026-07-29T12:06:13Z

Admin em 11h56min de 29 de julho de 2026

2026-07-29T11:56:57Z

← Edição anterior		Edição das 08h56min de 29 de julho de 2026
Linha 2:		Linha 2:
	* =============================================================================		* =============================================================================
	* GUIA GALÁCTICO — MediaWiki:Vector-2022.css		* GUIA GALÁCTICO — MediaWiki:Vector-2022.css
	* REVISÃO 7 — 2026-07-28		* REVISÃO 9 — 2026-07-28
	*		*
	* Confira que esta versão é a que está no ar: abra o load.php do site e		* Confira que esta versão é a que está no ar: abra o load.php do site e
	* procure por "REVISÃO 7". O ResourceLoader guarda o CSS do site por até		* procure por "REVISÃO 9". O ResourceLoader guarda o CSS do site por até
	* cinco minutos, e o navegador guarda mais um tanto além disso.		* cinco minutos, e o navegador guarda mais um tanto além disso.
	* =============================================================================		* =============================================================================
Linha 26:		Linha 26:
	* invertendo uma cor que já vinha certa dos tokens (§6).		* invertendo uma cor que já vinha certa dos tokens (§6).
	* - Fundo glífico cobre o documento inteiro, não só a janela (§5).		* - Fundo glífico cobre o documento inteiro, não só a janela (§5).
			* - Fundo branco do .mw-page-container removido: era ele que tapava a
			* textura no miolo da página e criava a segunda camada branca (§8).
			* - Wordmark é TEXTO: cor forçada nos três modos de tema. Nenhum filtro
			* toca o logotipo — o ícone fica exatamente como está (§6).
	*		*
	* REGRA DE OURO		* REGRA DE OURO
Linha 191:		Linha 195:
	--gg-glifos-filtro: none;		--gg-glifos-filtro: none;
	--gg-glifos-tamanho: 420px;		--gg-glifos-tamanho: 420px;


	--gg-transicao: 140ms ease;		--gg-transicao: 140ms ease;
Linha 670:		Linha 675:

	/*		/*
	* ~~O Vector embrulha o wordmark num .skin~~-~~invert e, no modo escuro, aplica~~		* --- "GUIA GALÁCTICO" SUMINDO NO ESCURO ---
	* ali um filtro de inversão. Isso existe para salvar logotipo em IMAGEM
	* escura: inverter deixa claro. Só que o nosso wordmark é TEXTO, e a cor
	* dele já vem correta dos tokens — o filtro invertia o que estava certo, e
	* o título sumia contra o fundo escuro.
	*		*
	* ~~Anulamos~~ o ~~filtro~~ e ~~assumimos~~ a ~~cor~~. ~~Vale nos três modos~~ de ~~tema~~, ~~porque~~		* O wordmark aqui é TEXTO, e o ícone ao lado é imagem. Nada nesta seção
	* ~~não depende de qual classe clientpref está ativa~~.		* toca o ícone: `color` não afeta imagem, e a única regra de `filter`
			* abaixo se recusa a rodar quando há uma imagem envolvida.
			*
			* Sobre o !important: é o terceiro remédio tentado para o mesmo sintoma.
			* Cor por token não bastou e anular o .skin-invert não bastou, o que
			* indica uma regra do núcleo com peso igual ou maior carregando depois da
			* nossa. Em vez de escalar seletor às cegas, encerro o leilão. É uma
			* propriedade, num elemento, com motivo documentado.
	*/		*/
	.mw-logo-~~container~~.~~skin~~-~~invert~~,		.vector-header .mw-logo,
	.mw-logo-container,		.vector-header .mw-logo span,
	.mw-logo-wordmark.~~skin~~-~~invert~~ {		.vector-header .mw-logo-wordmark,
	~~filter~~: ~~none~~;		.vector-sticky-header .mw-logo,
			.vector-sticky-header .mw-logo span,
			.mw-logo-container .mw-logo-wordmark,
			.mw-logo-wordmark,
			.mw-wiki-title {
			color: var(--gg-titulo-cor) !important;
	}		}

	.~~mw-logo~~ .~~mw-logo-~~wordmark,		/*
	.mw-logo-container .mw-logo-wordmark {		* Se o Vector filtrar o contêiner do wordmark no modo escuro, o texto
	~~color~~: ~~var(--gg-titulo-cor)~~;		* claro é invertido para escuro e some. Anulamos — mas só quando o
			* contêiner NÃO tem imagem dentro. Assim, um dia que o wordmark volte a
			* ser imagem, o filtro que a mantém legível continua valendo.
			*/
			.mw-logo-container:not(:has(img)),
			.mw-logo-wordmark:not(img) {
			filter: none;
	}		}

Linha 764:		Linha 783:
	* 8. ESTRUTURA DA SKIN		* 8. ESTRUTURA DA SKIN
	* ========================================================================== */		* ========================================================================== */

			/*
			* --- A SEGUNDA CAMADA BRANCA ---
			*
			* O Vector pinta o .mw-page-container de branco em telas largas, com sombra
			* própria. Era esse o branco extra entre o fundo da página e o cartão — e
			* era ele que tapava a textura de glifos no miolo, deixando os glifos
			* visíveis só na faixa do cabeçalho e abaixo do rodapé.
			*
			* O seletor leva um "body" na frente porque a regra do Vector mora dentro
			* de uma media query, e media query não soma especificidade: sem esse
			* degrau a mais, quem carrega por último ganha — e nem sempre somos nós.
			*/
			body .mw-page-container,
			body .mw-page-container-inner {
			background: transparent;
			box-shadow: none;
			border: 0;
			}

	.mw-page-container {		.mw-page-container {
	~~background: transparent;~~
	max-width: 1600px;		max-width: 1600px;
	}		}

Admin em 11h40min de 29 de julho de 2026

2026-07-29T11:40:51Z

← Edição anterior		Edição das 08h40min de 29 de julho de 2026
Linha 2:		Linha 2:
	* =============================================================================		* =============================================================================
	* GUIA GALÁCTICO — MediaWiki:Vector-2022.css		* GUIA GALÁCTICO — MediaWiki:Vector-2022.css
	* REVISÃO 6 — 2026-07-28		* REVISÃO 7 — 2026-07-28
	*		*
	* Confira que esta versão é a que está no ar: abra o load.php do site e		* Confira que esta versão é a que está no ar: abra o load.php do site e
	* procure por "REVISÃO 6". O ResourceLoader guarda o CSS do site por até		* procure por "REVISÃO 7". O ResourceLoader guarda o CSS do site por até
	* cinco minutos, e o navegador guarda mais um tanto além disso.		* cinco minutos, e o navegador guarda mais um tanto além disso.
	* =============================================================================		* =============================================================================
Linha 23:		Linha 23:
	* - No celular: ícone da wiki no lugar do wordmark, e margens laterais		* - No celular: ícone da wiki no lugar do wordmark, e margens laterais
	* bem mais estreitas para devolver largura de leitura (§15).		* bem mais estreitas para devolver largura de leitura (§15).
			* - Título da wiki não some mais no escuro: o filtro .skin-invert estava
			* invertendo uma cor que já vinha certa dos tokens (§6).
			* - Fundo glífico cobre o documento inteiro, não só a janela (§5).
	*		*
	* REGRA DE OURO		* REGRA DE OURO
Linha 368:		Linha 371:
	-webkit-font-smoothing: antialiased;		-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;		text-rendering: optimizeLegibility;
			}

			/*
			* Camada de glifos.
			*
			* Era position: fixed, e fixed mede pela JANELA, não pelo documento. Em
			* página longa a textura cobria só uma tela de altura — daí ela parecer
			* começar no meio do caminho. Com absolute + inset: 0 a camada passa a ter
			* a altura do <body>, ou seja, do documento inteiro. O min-height cobre o
			* caso oposto: página curta demais para encher a janela.
			*
			* Trocar "absolute" por "fixed" devolve o efeito de paralaxe, se um dia
			* você preferir a textura parada enquanto o conteúdo rola.
			*/
			body {
			position: relative;
	}		}

	body::before {		body::before {
	content: "";		content: "";
	position: ~~fixed~~;		position: absolute;
	inset: 0;		inset: 0;
			min-height: 100vh;
	z-index: -1;		z-index: -1;
	pointer-events: none;		pointer-events: none;
Linha 647:		Linha 667:
	color: var(--gg-titulo-cor);		color: var(--gg-titulo-cor);
	text-decoration: none;		text-decoration: none;
			}

			/*
			* O Vector embrulha o wordmark num .skin-invert e, no modo escuro, aplica
			* ali um filtro de inversão. Isso existe para salvar logotipo em IMAGEM
			* escura: inverter deixa claro. Só que o nosso wordmark é TEXTO, e a cor
			* dele já vem correta dos tokens — o filtro invertia o que estava certo, e
			* o título sumia contra o fundo escuro.
			*
			* Anulamos o filtro e assumimos a cor. Vale nos três modos de tema, porque
			* não depende de qual classe clientpref está ativa.
			*/
			.mw-logo-container.skin-invert,
			.mw-logo-container,
			.mw-logo-wordmark.skin-invert {
			filter: none;
			}

			.mw-logo .mw-logo-wordmark,
			.mw-logo-container .mw-logo-wordmark {
			color: var(--gg-titulo-cor);
	}		}

Admin em 10h36min de 28 de julho de 2026

2026-07-28T10:36:13Z

@@ Linha 2: / Linha 2: @@
   * =============================================================================
   *  GUIA GALÁCTICO — MediaWiki:Vector-2022.css
-  *  REVISÃO 5 — 2026-07-28
+  *  REVISÃO 6 — 2026-07-28
+  *
   *  Confira que esta versão é a que está no ar: abra o load.php do site e
-  *  procure por "REVISÃO 5". O ResourceLoader guarda o CSS do site por até
+  *  procure por "REVISÃO 6". O ResourceLoader guarda o CSS do site por até
   *  cinco minutos, e o navegador guarda mais um tanto além disso.
   * =============================================================================
@@ Linha 21: / Linha 21: @@
   *   - Cabeçalho fixo no topo (§8).
   *   - Recuo dos itens de menu unificado num token só: --gg-menu-recuo.
+  *
   *  REGRA DE OURO
@@ Linha 1 574: / Linha 1 576: @@
 @media (max-width: 720px) {
 	#content.mw-body,
 	.vector-body {
-		padding: 1.25rem 1.1rem 2rem;
+		padding: 1.15rem .9rem 1.9rem;
+	}
@@ Linha 1 582: / Linha 1 596: @@
 	#content.mw-body {
 		border-radius: var(--gg-r-2);
+	}
@@ Linha 1 618: / Linha 1 675: @@
 		overflow-x: auto;
 		max-width: 100%;
+	}
+}

Admin em 10h27min de 28 de julho de 2026

2026-07-28T10:27:06Z

← Edição anterior		Edição das 07h27min de 28 de julho de 2026
Linha 2:		Linha 2:
	* =============================================================================		* =============================================================================
	* GUIA GALÁCTICO — MediaWiki:Vector-2022.css		* GUIA GALÁCTICO — MediaWiki:Vector-2022.css
	* REVISÃO 4 — 2026-07-28		* REVISÃO 5 — 2026-07-28
	*		*
	* Confira que esta versão é a que está no ar: abra o load.php do site e		* Confira que esta versão é a que está no ar: abra o load.php do site e
	* procure por "REVISÃO 4". O ResourceLoader guarda o CSS do site por até		* procure por "REVISÃO 5". O ResourceLoader guarda o CSS do site por até
	* cinco minutos, e o navegador guarda mais um tanto além disso.		* cinco minutos, e o navegador guarda mais um tanto além disso.
	* =============================================================================		* =============================================================================
Linha 19:		Linha 19:
	* - Links de edição de seção não quebram mais para a linha de baixo.		* - Links de edição de seção não quebram mais para a linha de baixo.
	* - Fundo branco parasita atrás do painel Aparência removido.		* - Fundo branco parasita atrás do painel Aparência removido.
			* - Cabeçalho fixo no topo (§8).
			* - Recuo dos itens de menu unificado num token só: --gg-menu-recuo.
	*		*
	* REGRA DE OURO		* REGRA DE OURO
Linha 173:		Linha 175:
	--gg-r-3: 18px;		--gg-r-3: 18px;
	--gg-r-pilula: 999px;		--gg-r-pilula: 999px;

			/* Recuo interno dos itens de menu — menu principal, ferramentas e sumário
			* bebem daqui, então os três ficam alinhados por construção. */
			--gg-menu-recuo: .75rem;

	--gg-sombra-1: 0 1px 2px rgba(4, 28, 58, .04), 0 4px 16px rgba(4, 28, 58, .06);		--gg-sombra-1: 0 1px 2px rgba(4, 28, 58, .04), 0 4px 16px rgba(4, 28, 58, .06);
Linha 411:		Linha 417:

	.mw-parser-output a.new,		.mw-parser-output a.new,
	.mw-parser-output a.new:~~visit.vector-header-containered~~ {		.mw-parser-output a.new:visited {
	color: var(--gg-link-novo);		color: var(--gg-link-novo);
	}		}
Linha 749:		Linha 755:

	/* --- Cabeçalho --- */		/* --- Cabeçalho --- */

			/*
			* Cabeçalho fixo no topo.
			*
			* position: fixed sozinho não basta: ao sair do fluxo, um elemento de bloco
			* passa a ter largura shrink-to-fit e o cabeçalho encolheria até o tamanho
			* do conteúdo. Daí o inset-inline: 0, que devolve a largura total. O
			* z-index sobe para o cabeçalho passar por cima do corpo rolante, e o fundo
			* translúcido com blur existe porque agora há conteúdo correndo por baixo.
			*/
	.vector-header-container.vector-sticky-header-container {		.vector-header-container.vector-sticky-header-container {
	position: ~~sticky~~;		position: fixed;
			top: 0;
			inset-inline: 0;
			z-index: 100;
			background: color-mix(in srgb, var(--gg-fundo) 88%, transparent);
			-webkit-backdrop-filter: blur(12px) saturate(1.25);
			backdrop-filter: blur(12px) saturate(1.25);
	}		}

Linha 888:		Linha 910:
	color: var(--gg-link);		color: var(--gg-link);
	border-radius: var(--gg-r-1);		border-radius: var(--gg-r-1);
	padding-inline: ~~.5rem~~;		padding-inline: var(--gg-menu-recuo);
	text-decoration: none;		text-decoration: none;
	transition: background-color var(--gg-transicao), color var(--gg-transicao);		transition: background-color var(--gg-transicao), color var(--gg-transicao);
			}

			/*
			* O menu principal vinha com recuo menor que o de ferramentas, e o realce do
			* item ativo encostava na borda do painel. Especificidade um degrau acima
			* para vencer o padrão do Vector; o valor sai do mesmo token dos outros.
			*/
			.vector-main-menu .vector-menu-content-list .mw-list-item a,
			.vector-main-menu-container .vector-menu-content-list .mw-list-item a,
			#vector-main-menu-dropdown .vector-menu-content-list .mw-list-item a,
			.vector-page-tools .vector-menu-content-list .mw-list-item a {
			padding-inline: var(--gg-menu-recuo);
	}		}

Admin em 10h14min de 28 de julho de 2026

2026-07-28T10:14:30Z

← Edição anterior		Edição das 07h14min de 28 de julho de 2026
Linha 411:		Linha 411:

	.mw-parser-output a.new,		.mw-parser-output a.new,
	.mw-parser-output a.new:~~visited~~ {		.mw-parser-output a.new:visit.vector-header-containered {
	color: var(--gg-link-novo);		color: var(--gg-link-novo);
	}		}
Linha 749:		Linha 749:

	/* --- Cabeçalho --- */		/* --- Cabeçalho --- */
			.vector-header-container.vector-sticky-header-container {
			position: sticky;
			}

	.vector-header-container .vector-header {		.vector-header-container .vector-header {
	background: transparent;		background: transparent;

Admin em 10h11min de 28 de julho de 2026

2026-07-28T10:11:52Z

Mostrar alterações

Admin em 09h59min de 28 de julho de 2026

2026-07-28T09:59:25Z

Mostrar alterações

Admin em 00h51min de 28 de julho de 2026

2026-07-28T00:51:20Z

Mostrar alterações

Admin em 00h14min de 28 de julho de 2026

2026-07-28T00:14:57Z

Mostrar alterações