Admin: Criou página com '/* ========================================================================== 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 is...'

2026-07-27T23:38:57Z

Criou página com '/* ========================================================================== 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 is...'

Página nova

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

Usuário:Admin/vector-2022.css - Histórico de revisão