Ir para o conteúdo

MediaWiki:Vector-2022.css

De Guia Galáctico
Revisão de 21h28min de 11 de julho de 2026 por Admin (discussão | contribs)

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 — CSS personalizado para Vector 2022
 *  Uma wiki sobre SPORE 🌀
 * ══════════════════════════════════════════════════════════════════
 *
 *  INSTALAÇÃO
 *  1. Cole este arquivo em MediaWiki:Vector-2022.css
 *     (ou MediaWiki:Common.css se quiser aplicar a todas as skins).
 *  2. Hospede as fontes e ajuste os caminhos em @font-face abaixo.
 *     Sugestão de caminho: /resources/assets/fonts/ no servidor,
 *     ou faça upload da imagem de fundo (tiling_glyph_background.jpg)
 *     via Special:Upload e use a URL direta do arquivo.
 *  3. O tema escuro segue a preferência do leitor: funciona tanto
 *     com o seletor de aparência do Vector 2022 (noite/automático)
 *     quanto com prefers-color-scheme.
 *
 *  PALETA (amostrada do material oficial)
 *  Azul Spore ......... #0081C9
 *  Azul profundo ...... #1E3469
 *  Navy espacial ...... #04375B → #021A2E
 *  Glifos claros ...... #EBEBEB sobre #FBFBFB
 *  Magenta criatura ... #C21F90 (acento, usar com parcimônia)
 */

/* ──────────────────────────────────────────────────────────────────
   1. FONTES
   Atkinson Hyperlegible Next e Mono são fontes variáveis
   (peso 200–800, eixo itálico). Declaramos duas faces por família
   apontando pro mesmo arquivo: o navegador ativa o eixo `ital`
   conforme o font-style pedido.
   ────────────────────────────────────────────────────────────────── */

@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 Next';
  src: url('/images/fonts/AtkinsonHyperlegibleNext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  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: 'Atkinson Hyperlegible Mono';
  src: url('/images/fonts/AtkinsonHyperlegibleMono.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SPORE';
  src: url('/images/fonts/SPORELight.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'SPORE';
  src: url('/images/fonts/SPORERegular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'SPORE';
  src: url('/images/fonts/SPOREBold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ──────────────────────────────────────────────────────────────────
   2. VARIÁVEIS DE TEMA
   ────────────────────────────────────────────────────────────────── */

:root {
  /* Marca */
  --gg-azul: #0081C9;
  --gg-azul-claro: #2FA8E0;
  --gg-azul-profundo: #1E3469;
  --gg-navy: #123C78;
  --gg-magenta: #C21F90;

  /* Tipografia */
  --gg-fonte-corpo: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
  --gg-fonte-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
  --gg-fonte-titulo: 'SPORE', 'Atkinson Hyperlegible Next', sans-serif;

  /* Tema claro (padrão) */
  --gg-fundo: #FBFBFB;
  --gg-fundo-conteudo: #FFFFFF;
  --gg-fundo-suave: #F0F5FA;
  --gg-texto: #1A2733;
  --gg-texto-suave: #4A5A6A;
  --gg-borda: #D8E2EC;
  --gg-link: #0074B8;
  --gg-link-visitado: #1E3469;
  --gg-glifos: url('/images/background.jpg');
  --gg-sombra: 0 2px 10px rgba(30, 52, 105, 0.08);
}

/* Tema escuro — via seletor do Vector 2022 e via preferência do SO */
@media screen {
  html.skin-theme-clientpref-night {
	--gg-fundo: #021A2E;
	--gg-fundo-conteudo: #06283F;
	--gg-fundo-suave: #04375B;
	--gg-texto: #E2E9F0;
	--gg-texto-suave: #9FB4C6;
	--gg-borda: #0E4A6E;
	--gg-link: #4FB8EC;
	--gg-link-visitado: #9FC4E8;
	--gg-glifos: none;
	--gg-sombra: 0 2px 12px rgba(0, 0, 0, 0.4);
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os {
	--gg-fundo: #021A2E;
	--gg-fundo-conteudo: #06283F;
	--gg-fundo-suave: #04375B;
	--gg-texto: #E2E9F0;
	--gg-texto-suave: #9FB4C6;
	--gg-borda: #0E4A6E;
	--gg-link: #4FB8EC;
	--gg-link-visitado: #9FC4E8;
	--gg-glifos: none;
	--gg-sombra: 0 2px 12px rgba(0, 0, 0, 0.4);
  }
}

/* ──────────────────────────────────────────────────────────────────
   3. ESTRUTURA GERAL
   Fundo com o padrão de glifos (claro) ou gradiente espacial (escuro)
   ────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--gg-fonte-corpo);
  background-color: var(--gg-fundo);
  background-image: var(--gg-glifos);
  background-attachment: fixed;
  color: var(--gg-texto);
}

html.skin-theme-clientpref-night body {
  background-image: linear-gradient(180deg, #04375B 0%, #021A2E 60%, #010F1C 100%);
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os body {
	background-image: linear-gradient(180deg, #04375B 0%, #021A2E 60%, #010F1C 100%);
  }
}

/* "Cartão" do conteúdo flutuando sobre o fundo, bem arredondado
   como as letras-bolha da marca */
.mw-page-container {
  background: transparent;
}

.mw-body,
.vector-body {
  font-family: var(--gg-fonte-corpo);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gg-texto);
}

#content.mw-body {
  background-color: var(--gg-fundo-conteudo);
  border: 1px solid var(--gg-borda);
  border-radius: 20px;
  box-shadow: var(--gg-sombra);
  padding: 1.75rem 2rem;
}

/* ──────────────────────────────────────────────────────────────────
   4. CABEÇALHO DO SITE E TÍTULOS
   ────────────────────────────────────────────────────────────────── */

/* Faixa superior com gradiente Spore */
.vector-header-container .vector-header {
  background: linear-gradient(180deg, var(--gg-azul-claro) 0%, var(--gg-azul) 45%, var(--gg-navy) 100%);
  border-radius: 0 0 18px 18px;
  box-shadow: var(--gg-sombra);
}

.vector-header .mw-logo-wordmark,
.vector-header .mw-logo-tagline {
  color: #fff;
}

/* Ícones e links do cabeçalho legíveis sobre o azul.
   Atenção: apenas links e botões "quiet" (sem fundo próprio) —
   botões com fundo, como o de busca, têm cor própria na seção 7. */
.vector-header .vector-menu-content,
.vector-header a,
.vector-header a:visited,
.vector-header .cdx-button--weight-quiet {
  color: #fff;
}

/* Nome de usuário em destaque */
.vector-user-links #pt-userpage a,
.vector-user-links #pt-userpage-2 a,
.vector-user-links a.mw-userlink {
  color: #fff;
  font-weight: 700;
}

/* Ações do cabeçalho (notificações, mensagens, vigiados):
   ícones brancos direto no gradiente, com halo translúcido
   no hover */
.vector-user-links .mw-echo-notifications-badge,
.vector-user-links .cdx-button--icon-only {
  color: #fff;
  border: none;
  border-radius: 999px;
  transition: background-color 120ms ease;
}
.vector-user-links .mw-echo-notifications-badge:hover,
.vector-user-links .cdx-button--icon-only:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

/* Menu do usuário: bolha branca com ícone navy — sem isso,
   o ícone herda o branco do cabeçalho e some na bolha */
.vector-user-links .vector-dropdown-label.cdx-button {
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--gg-azul-profundo);
  border: none;
  border-radius: 999px;
  padding-left: 10px;
  padding-right: 10px;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.vector-user-links .vector-dropdown-label.cdx-button:hover {
  background-color: #fff;
  color: var(--gg-azul-profundo);
  box-shadow: 0 2px 8px rgba(2, 26, 46, 0.3);
}

/* No modo escuro, o skin inverte os ícones (ficam claros),
   então a bolha branca vira translúcida — o ícone claro
   funciona sobre ela, no mesmo espírito do halo dos vizinhos */
html.skin-theme-clientpref-night .vector-user-links .vector-dropdown-label.cdx-button {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
html.skin-theme-clientpref-night .vector-user-links .vector-dropdown-label.cdx-button:hover {
  background-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: none;
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .vector-user-links .vector-dropdown-label.cdx-button {
	background-color: rgba(255, 255, 255, 0.16);
	color: #fff;
  }
  html.skin-theme-clientpref-os .vector-user-links .vector-dropdown-label.cdx-button:hover {
	background-color: rgba(255, 255, 255, 0.28);
	color: #fff;
	box-shadow: none;
  }
}

/* Respiro entre as ações */
.vector-user-links > div,
.vector-user-links > nav {
  margin-left: 4px;
}

/* Título da página: a fonte SPORE em degradê azul, com leve
   "respiro" — bolhas precisam de espaço */
.mw-body h1,
h1#firstHeading,
.mw-body-header .firstHeading {
  font-family: var(--gg-fonte-titulo);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: none;
  background: linear-gradient(180deg, var(--gg-azul-claro) 0%, var(--gg-azul) 55%, var(--gg-azul-profundo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.15em;
}

/* h2 também em SPORE, mas em cor sólida e com o "traço-cometa" */
.mw-body h2,
.vector-body h2 {
  font-family: var(--gg-fonte-titulo);
  font-weight: 400;
  color: var(--gg-azul-profundo);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--gg-azul) 0%, var(--gg-azul-claro) 40%, transparent 100%) 1;
  padding-bottom: 0.2em;
}

html.skin-theme-clientpref-night .mw-body h2 { color: #7FCBF2; }
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .mw-body h2 { color: #7FCBF2; }
}

/* h3 em diante: Atkinson pesada, pra não saturar a fonte display */
.mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
  font-family: var(--gg-fonte-corpo);
  font-weight: 700;
  color: var(--gg-texto);
}

/* ──────────────────────────────────────────────────────────────────
   5. LINKS
   ────────────────────────────────────────────────────────────────── */

.mw-body a,
.vector-body a,
.vector-toc a,
.vector-menu a {
  color: var(--gg-link);
  text-decoration: none;
}
.mw-body a:visited { color: var(--gg-link-visitado); }
.mw-body a:hover,
.vector-body a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Redlinks: o magenta da fase de criatura, em vez do vermelho padrão */
.mw-body a.new,
.mw-body a.new:visited {
  color: var(--gg-magenta);
}

/* Seleção de texto */
::selection {
  background: var(--gg-azul-claro);
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────────
   6. NAVEGAÇÃO LATERAL, SUMÁRIO E MENUS
   ────────────────────────────────────────────────────────────────── */

.vector-pinnable-element,
.vector-toc,
#vector-toc-pinned-container .vector-toc {
  background-color: var(--gg-fundo-conteudo);
  border: 1px solid var(--gg-borda);
  border-radius: 16px;
  box-shadow: var(--gg-sombra);
  padding: 0.5rem 0.75rem;
}

/* Os contêineres externos dos painéis fixados devem ser
   transparentes — quem tem fundo é o cartão interno acima.
   Sem isso, o modo escuro pinta um retângulo atrás dos cantos
   arredondados. */
.vector-pinned-container,
#vector-main-menu-pinned-container,
#vector-toc-pinned-container,
#vector-page-tools-pinned-container,
.vector-column-start,
.vector-column-end {
  background-color: transparent;
  box-shadow: none;
}

/* Mesma lógica pros menus "escondidos": eles abrem num popup
   (.vector-dropdown-content) com fundo e sombra próprios, que
   viram uma caixa escura ao redor do cartão. Quando o popup
   contém um cartão nosso, ele fica transparente e o cartão
   assume o papel de popup. */
.vector-dropdown .vector-dropdown-content:has(> .vector-pinnable-element) {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.vector-dropdown .vector-dropdown-content > .vector-pinnable-element {
  margin: 0;
}

/* Botão "Esconder"/"Mover para a barra lateral": pílula discreta
   em vez da caixa cinza padrão */
.vector-pinnable-header-toggle-button,
.vector-pinnable-header-toggle-button.cdx-button {
  border-radius: 999px;
  background-color: transparent;
  color: var(--gg-link);
  font-family: var(--gg-fonte-corpo);
  font-size: 0.85em;
}
.vector-pinnable-header-toggle-button:hover,
.vector-pinnable-header-toggle-button.cdx-button:hover {
  background-color: var(--gg-fundo-suave);
  color: var(--gg-link);
}

.vector-pinnable-header-label,
.vector-toc .vector-toc-pinnable-header {
  font-family: var(--gg-fonte-titulo);
  font-weight: 400;
  color: var(--gg-azul-profundo);
  letter-spacing: 0.03em;
}

html.skin-theme-clientpref-night .vector-pinnable-header-label { color: #7FCBF2; }
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .vector-pinnable-header-label { color: #7FCBF2; }
}

/* Todos os links do sumário recebem o mesmo padding horizontal:
   a pílula do item ativo ganha respiro e o texto continua
   alinhado com os itens vizinhos */
.vector-toc .vector-toc-link {
  border-radius: 999px;
  padding-left: 0.75em;
  padding-right: 0.75em;
}

/* Item ativo do sumário: pílula com a cor de link do tema.
   O texto fica num elemento interno (.vector-toc-text), então
   precisamos alcançá-lo explicitamente. */
.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-toc .vector-toc-level-1-active > .vector-toc-link {
  background: var(--gg-fundo-suave);
  border-radius: 999px;
}
.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-toc .vector-toc-list-item-active > .vector-toc-link .vector-toc-text,
.vector-toc .vector-toc-level-1-active > .vector-toc-link,
.vector-toc .vector-toc-level-1-active > .vector-toc-link .vector-toc-text {
  color: var(--gg-link);
  font-weight: 700;
}

/* Abas (Artigo / Discussão / Editar…) */
.vector-menu-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a:visited {
  color: var(--gg-azul);
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────────────────
   7. BOTÕES E BUSCA — tudo em pílula, no espírito bolha
   ────────────────────────────────────────────────────────────────── */

.cdx-button {
  border-radius: 999px;
  font-family: var(--gg-fonte-corpo);
  font-weight: 600;
}

.cdx-button--action-progressive.cdx-button--weight-primary {
  background: linear-gradient(180deg, var(--gg-azul-claro) 0%, var(--gg-azul) 100%);
  border-color: var(--gg-azul);
}
.cdx-button--action-progressive.cdx-button--weight-primary:hover {
  background: linear-gradient(180deg, #45B5E8 0%, #0090DE 100%);
}

.cdx-text-input__input,
.cdx-search-input .cdx-text-input__input {
  border-radius: 999px;
  font-family: var(--gg-fonte-corpo);
}
.cdx-text-input__input:focus {
  border-color: var(--gg-azul);
  box-shadow: 0 0 0 2px rgba(0, 129, 201, 0.35);
}

/* Busca com botão acoplado ("Pesquisar"): input e botão viram
   uma pílula única — cantos retos onde se encontram, botão em
   azul Spore com texto branco */
.cdx-search-input--has-end-button {
  border-radius: 999px;
  overflow: hidden;
}
.cdx-search-input--has-end-button .cdx-text-input__input,
.cdx-search-input--has-end-button .cdx-text-input__input:focus {
  border-radius: 999px 0 0 999px;
}
.cdx-search-input__end-button.cdx-button,
.cdx-search-input--has-end-button .cdx-search-input__end-button {
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--gg-azul-claro) 0%, var(--gg-azul) 100%);
  border: 1px solid var(--gg-azul);
  color: #fff;
  font-weight: 600;
  padding-left: 1.1em;
  padding-right: 1.2em;
}
.cdx-search-input__end-button.cdx-button:hover {
  background: linear-gradient(180deg, #45B5E8 0%, #0090DE 100%);
  color: #fff;
}
.cdx-search-input__end-button.cdx-button:focus-visible {
  outline: 3px solid var(--gg-azul-claro);
  outline-offset: -3px;
}

/* ──────────────────────────────────────────────────────────────────
   8. CONTEÚDO: TABELAS, CÓDIGO, CITAÇÕES, MISC
   ────────────────────────────────────────────────────────────────── */

/* Tabelas wiki */
.mw-body .wikitable {
  background-color: var(--gg-fundo-conteudo);
  border: 1px solid var(--gg-borda);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--gg-sombra);
}
.mw-body .wikitable > * > tr > th {
  background: linear-gradient(180deg, var(--gg-azul) 0%, var(--gg-navy) 100%);
  color: #fff;
  font-family: var(--gg-fonte-corpo);
  font-weight: 700;
  border: none;
  padding: 0.5em 0.9em;
}
.mw-body .wikitable > * > tr > td {
  border: none;
  border-top: 1px solid var(--gg-borda);
  padding: 0.45em 0.9em;
}
.mw-body .wikitable > tbody > tr:nth-child(even) > td {
  background-color: var(--gg-fundo-suave);
}

/* Código e pré-formatado */
.mw-body code,
.mw-body pre,
.mw-body tt,
.mw-body kbd,
.mw-body samp,
.mw-body .mw-code {
  font-family: var(--gg-fonte-mono);
  font-size: 0.925em;
  background-color: var(--gg-fundo-suave);
  border: 1px solid var(--gg-borda);
  border-radius: 8px;
  color: var(--gg-texto);
}
.mw-body pre {
  padding: 0.9em 1.1em;
  border-radius: 14px;
  line-height: 1.55;
}
.mw-body code { padding: 0.1em 0.4em; }

/* Citações: cometa magenta na margem */
.mw-body blockquote {
  border-left: 4px solid var(--gg-magenta);
  background: var(--gg-fundo-suave);
  border-radius: 0 14px 14px 0;
  padding: 0.75em 1.1em;
  color: var(--gg-texto-suave);
  font-style: italic;
}

/* Miniaturas de imagem */
.mw-body figure[typeof~='mw:File/Thumb'],
.mw-body .thumbinner {
  background-color: var(--gg-fundo-conteudo);
  border: 1px solid var(--gg-borda);
  border-radius: 14px;
  box-shadow: var(--gg-sombra);
  overflow: hidden;
}
.mw-body figure[typeof~='mw:File/Thumb'] > figcaption,
.mw-body .thumbcaption {
  font-size: 0.85em;
  color: var(--gg-texto-suave);
  border-top: 1px solid var(--gg-borda);
}

/* Link "editar" das seções, discreto */
.mw-editsection {
  font-family: var(--gg-fonte-corpo);
  font-size: 0.55em;
  vertical-align: middle;
}

/* Linha horizontal como traço de órbita */
.mw-body hr {
  border: none;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gg-azul), transparent);
  margin: 2em auto;
  max-width: 60%;
}

/* Notas de rodapé / referências */
.mw-body .mw-references-wrap,
.mw-body ol.references {
  font-size: 0.9em;
  color: var(--gg-texto-suave);
}

/* ──────────────────────────────────────────────────────────────────
   9. RODAPÉ
   ────────────────────────────────────────────────────────────────── */

.mw-footer-container {
  background: transparent;
  color: var(--gg-texto-suave);
}
.mw-footer-container a { color: var(--gg-link); }

/* ──────────────────────────────────────────────────────────────────
   10. ACESSIBILIDADE E DETALHES FINAIS
   ────────────────────────────────────────────────────────────────── */

/* Foco visível e consistente em todo lugar */
a:focus-visible,
button:focus-visible,
.cdx-button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gg-azul-claro);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
	animation-duration: 0.01ms !important;
	transition-duration: 0.01ms !important;
  }
}

/* Impressão: sem fundos decorativos, tinta é cara */
@media print {
  body { background: #fff !important; }
  #content.mw-body { box-shadow: none; border: none; }
}
Disponível em “https://beta.guia.esporo.net/index.php?title=MediaWiki:Vector-2022.css&oldid=13”