|
|
| Linha 1: |
Linha 1: |
| <!DOCTYPE html>
| |
| <html lang="pt-BR">
| |
| <head>
| |
| <meta charset="utf-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| <title>Guia Galáctico — prévia do estilo Vector 2022</title>
| |
| <style>/*!
| |
| * =============================================================================
| |
| * GUIA GALÁCTICO — MediaWiki:Vector-2022.css
| |
| * =============================================================================
| |
| *
| |
| * Estilo personalizado para a skin Vector 2022.
| |
| *
| |
| * Conceito: "caderno de campo do xenobiólogo". Papel claro com o fundo
| |
| * glífico da marca, cartões flutuando sobre ele, e o azul Spore
| |
| * (extraído do brand toolkit) como cor condutora. Cada tipo de infobox
| |
| * ganha uma cor de espécie própria.
| |
| *
| |
| * Convenções:
| |
| * - Todas as variáveis usam o prefixo --gg-.
| |
| * - Nada depende de JavaScript.
| |
| * - Cor nunca é o único portador de significado.
| |
| * - Contraste mínimo 4.5:1 para texto; 3:1 para bordas e ícones.
| |
| * - Tema escuro automático + respeito ao seletor de aparência do MediaWiki.
| |
| * - Movimento sempre atrás de prefers-reduced-motion.
| |
| *
| |
| * Manutenção:
| |
| * - Para trocar a fonte display de todo o site, mexa só em --gg-fonte-display.
| |
| * - Para trocar a cor de um tipo de infobox, mexa só em --gg-acento na regra
| |
| * .gg-infobox-<tipo>.
| |
| * - Os caminhos url() são absolutos a partir da raiz do domínio de propósito:
| |
| * o CSS do site é servido por load.php, então caminhos relativos quebram.
| |
| * =============================================================================
| |
| */
| |
|
| |
|
|
| |
| /* =============================================================================
| |
| * 1. FONTES
| |
| * Remova este bloco se ele já estiver em MediaWiki:Common.css.
| |
| * ========================================================================== */
| |
|
| |
| @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 Mono';
| |
| src: url('/images/fonts/AtkinsonHyperlegibleMono.woff2') format('woff2');
| |
| font-weight: 200 800;
| |
| font-style: normal;
| |
| font-display: swap;
| |
| }
| |
|
| |
| @font-face {
| |
| font-family: 'SPORE';
| |
| src: url('/images/fonts/SPORELight.woff2') format('woff2');
| |
| font-weight: 300;
| |
| font-style: normal;
| |
| font-display: swap;
| |
| }
| |
|
| |
| @font-face {
| |
| font-family: 'SPORE';
| |
| src: url('/images/fonts/SPORERegular.woff2') format('woff2');
| |
| font-weight: 400;
| |
| font-style: normal;
| |
| font-display: swap;
| |
| }
| |
|
| |
| @font-face {
| |
| font-family: 'SPORE';
| |
| src: url('/images/fonts/SPOREBold.woff2') format('woff2');
| |
| font-weight: 700;
| |
| font-style: normal;
| |
| font-display: swap;
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 2. TOKENS — TEMA CLARO
| |
| * ========================================================================== */
| |
|
| |
| :root {
| |
| /* --- Marca (amostras tiradas do brand toolkit) --- */
| |
| --gg-azul-abissal: #041c3a;
| |
| --gg-azul-profundo: #0a2f5c;
| |
| --gg-azul: #0b5ea8;
| |
| --gg-azul-vivo: #1a8fd0;
| |
| --gg-ciano: #4fc3e8;
| |
| --gg-roxo: #6d2a86;
| |
|
| |
| /* --- Cores de significado (consequências, raridades, avisos) --- */
| |
| --gg-verde: #2e7d4f;
| |
| --gg-vermelho: #b3341f;
| |
| --gg-ambar: #92610a;
| |
| --gg-laranja: #b04d1c;
| |
|
| |
| /* --- Superfícies --- */
| |
| --gg-fundo: #eef3f9;
| |
| --gg-superficie: #ffffff;
| |
| --gg-superficie-2: #f4f8fc;
| |
| --gg-superficie-3: #e6eef8;
| |
| --gg-borda: #cbdbeb;
| |
| --gg-borda-forte: #9db8d3;
| |
|
| |
| /* --- Texto --- */
| |
| --gg-texto: #14202e;
| |
| --gg-texto-suave: #48596d;
| |
| --gg-texto-invertido: #ffffff;
| |
|
| |
| /* --- Ligações --- */
| |
| --gg-link: #0b5ea8;
| |
| --gg-link-hover: #0a2f5c;
| |
| --gg-link-visitado: #6d2a86;
| |
| --gg-link-novo: #b3341f;
| |
|
| |
| /* --- Foco: sempre visível, sempre com 3:1 contra o fundo --- */
| |
| --gg-foco: #1a8fd0;
| |
| --gg-foco-sombra: #041c3a;
| |
|
| |
| /* --- Acento padrão (cada infobox sobrescreve o seu) --- */
| |
| --gg-acento: var(--gg-azul);
| |
| --gg-acento-fraco: #e6eef8;
| |
|
| |
| /* --- Tipografia --- */
| |
| --gg-fonte-texto: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
| |
| --gg-fonte-display: 'SPORE', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
| |
| --gg-fonte-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Code', monospace;
| |
|
| |
| /* --- Forma --- */
| |
| --gg-r-1: 6px;
| |
| --gg-r-2: 10px;
| |
| --gg-r-3: 16px;
| |
| --gg-r-pilula: 999px;
| |
|
| |
| /* --- Profundidade --- */
| |
| --gg-sombra-1: 0 1px 2px rgba(4, 28, 58, .05), 0 2px 8px rgba(4, 28, 58, .06);
| |
| --gg-sombra-2: 0 2px 4px rgba(4, 28, 58, .07), 0 12px 32px rgba(4, 28, 58, .10);
| |
|
| |
| /* --- Fundo glífico --- */
| |
| --gg-glifos-opacidade: .55;
| |
| --gg-glifos-filtro: none;
| |
| --gg-glifos-tamanho: 420px;
| |
|
| |
| /* --- Ritmo --- */
| |
| --gg-transicao: 140ms ease;
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 3. TOKENS — TEMA ESCURO
| |
| *
| |
| * Dois gatilhos:
| |
| * a) o seletor de aparência do MediaWiki (skin-theme-clientpref-night);
| |
| * b) a preferência do sistema, a menos que o leitor tenha fixado o modo claro.
| |
| * Assim funciona com ou sem o modo noturno instalado no wiki.
| |
| * ========================================================================== */
| |
|
| |
| html.skin-theme-clientpref-night {
| |
| --gg-azul-abissal: #06101f;
| |
| --gg-azul-profundo: #0d2440;
| |
| --gg-azul: #6ec1f0;
| |
| --gg-azul-vivo: #8fd4fa;
| |
| --gg-ciano: #a5e4f7;
| |
| --gg-roxo: #c79ce0;
| |
|
| |
| --gg-verde: #74d19a;
| |
| --gg-vermelho: #ff9d86;
| |
| --gg-ambar: #e2b565;
| |
| --gg-laranja: #f0a072;
| |
|
| |
| --gg-fundo: #0a1220;
| |
| --gg-superficie: #111c2e;
| |
| --gg-superficie-2: #17243a;
| |
| --gg-superficie-3: #1e2f4a;
| |
| --gg-borda: #2c405f;
| |
| --gg-borda-forte: #46608a;
| |
|
| |
| --gg-texto: #e7eef8;
| |
| --gg-texto-suave: #a9bad0;
| |
| --gg-texto-invertido: #06101f;
| |
|
| |
| --gg-link: #6ec1f0;
| |
| --gg-link-hover: #a5e4f7;
| |
| --gg-link-visitado: #c79ce0;
| |
| --gg-link-novo: #ff9d86;
| |
|
| |
| --gg-foco: #8fd4fa;
| |
| --gg-foco-sombra: #06101f;
| |
|
| |
| --gg-acento: #6ec1f0;
| |
| --gg-acento-fraco: #1e2f4a;
| |
|
| |
| --gg-sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
| |
| --gg-sombra-2: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .4);
| |
|
| |
| /* O fundo glífico é claro: invertemos e apagamos bastante. */
| |
| --gg-glifos-opacidade: .07;
| |
| --gg-glifos-filtro: invert(1);
| |
| }
| |
|
| |
| @media (prefers-color-scheme: dark) {
| |
| html:not(.skin-theme-clientpref-day) {
| |
| --gg-azul-abissal: #06101f;
| |
| --gg-azul-profundo: #0d2440;
| |
| --gg-azul: #6ec1f0;
| |
| --gg-azul-vivo: #8fd4fa;
| |
| --gg-ciano: #a5e4f7;
| |
| --gg-roxo: #c79ce0;
| |
|
| |
| --gg-verde: #74d19a;
| |
| --gg-vermelho: #ff9d86;
| |
| --gg-ambar: #e2b565;
| |
| --gg-laranja: #f0a072;
| |
|
| |
| --gg-fundo: #0a1220;
| |
| --gg-superficie: #111c2e;
| |
| --gg-superficie-2: #17243a;
| |
| --gg-superficie-3: #1e2f4a;
| |
| --gg-borda: #2c405f;
| |
| --gg-borda-forte: #46608a;
| |
|
| |
| --gg-texto: #e7eef8;
| |
| --gg-texto-suave: #a9bad0;
| |
| --gg-texto-invertido: #06101f;
| |
|
| |
| --gg-link: #6ec1f0;
| |
| --gg-link-hover: #a5e4f7;
| |
| --gg-link-visitado: #c79ce0;
| |
| --gg-link-novo: #ff9d86;
| |
|
| |
| --gg-foco: #8fd4fa;
| |
| --gg-foco-sombra: #06101f;
| |
|
| |
| --gg-acento: #6ec1f0;
| |
| --gg-acento-fraco: #1e2f4a;
| |
|
| |
| --gg-sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
| |
| --gg-sombra-2: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .4);
| |
|
| |
| --gg-glifos-opacidade: .07;
| |
| --gg-glifos-filtro: invert(1);
| |
| }
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 4. PONTE COM OS TOKENS DO CODEX
| |
| * Faz os componentes que ainda não estilizamos herdarem a paleta sozinhos.
| |
| * ========================================================================== */
| |
|
| |
| :root,
| |
| html.skin-theme-clientpref-night {
| |
| --background-color-base: var(--gg-superficie);
| |
| --background-color-neutral-subtle: var(--gg-superficie-2);
| |
| --background-color-interactive-subtle: var(--gg-superficie-2);
| |
| --background-color-interactive: var(--gg-superficie-3);
| |
| --color-base: var(--gg-texto);
| |
| --color-emphasized: var(--gg-texto);
| |
| --color-subtle: var(--gg-texto-suave);
| |
| --color-progressive: var(--gg-link);
| |
| --color-progressive--hover: var(--gg-link-hover);
| |
| --color-visited: var(--gg-link-visitado);
| |
| --color-destructive: var(--gg-link-novo);
| |
| --border-color-base: var(--gg-borda-forte);
| |
| --border-color-subtle: var(--gg-borda);
| |
| --border-color-muted: var(--gg-borda);
| |
| --border-color-interactive: var(--gg-borda-forte);
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 5. BASE — PÁGINA, FUNDO, TIPOGRAFIA
| |
| * ========================================================================== */
| |
|
| |
| html,
| |
| body {
| |
| background-color: var(--gg-fundo);
| |
| color: var(--gg-texto);
| |
| }
| |
|
| |
| body {
| |
| font-family: var(--gg-fonte-texto);
| |
| font-size: 1rem;
| |
| line-height: 1.65;
| |
| -webkit-font-smoothing: antialiased;
| |
| text-rendering: optimizeLegibility;
| |
| }
| |
|
| |
| /*
| |
| * Camada de glifos. Fica atrás de tudo, em position: fixed, para que o
| |
| * padrão não role junto com o texto e não vire ruído durante a leitura.
| |
| */
| |
| body::before {
| |
| content: "";
| |
| position: fixed;
| |
| inset: 0;
| |
| z-index: -1;
| |
| pointer-events: none;
| |
| background-image: url('/images/background.jpg');
| |
| background-repeat: repeat;
| |
| background-size: var(--gg-glifos-tamanho) auto;
| |
| opacity: var(--gg-glifos-opacidade);
| |
| filter: var(--gg-glifos-filtro);
| |
| }
| |
|
| |
| /* Foco visível e generoso — vale para tudo, inclusive links dentro do texto. */
| |
| :focus-visible {
| |
| outline: 3px solid var(--gg-foco);
| |
| outline-offset: 2px;
| |
| border-radius: 3px;
| |
| box-shadow: 0 0 0 5px color-mix(in srgb, var(--gg-foco-sombra) 22%, transparent);
| |
| }
| |
|
| |
| ::selection {
| |
| background: color-mix(in srgb, var(--gg-azul-vivo) 30%, transparent);
| |
| color: var(--gg-texto);
| |
| }
| |
|
| |
| /* --- Ligações --- *
| |
| * Sublinhado mantido: em texto corrido ele é o único sinal não cromático
| |
| * de que algo é clicável.
| |
| */
| |
| .mw-parser-output a:not(.image):not(.mw-file-description) {
| |
| color: var(--gg-link);
| |
| text-decoration: underline;
| |
| text-decoration-thickness: 1px;
| |
| text-underline-offset: .18em;
| |
| text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
| |
| transition: color var(--gg-transicao), text-decoration-color var(--gg-transicao);
| |
| }
| |
|
| |
| .mw-parser-output a:not(.image):not(.mw-file-description):hover {
| |
| color: var(--gg-link-hover);
| |
| text-decoration-color: currentColor;
| |
| text-decoration-thickness: 2px;
| |
| }
| |
|
| |
| .mw-parser-output a:visited:not(.image):not(.mw-file-description) {
| |
| color: var(--gg-link-visitado);
| |
| }
| |
|
| |
| .mw-parser-output a.new,
| |
| .mw-parser-output a.new:visited {
| |
| color: var(--gg-link-novo);
| |
| }
| |
|
| |
| .mw-parser-output a.external {
| |
| background-position: right center;
| |
| padding-right: .95em;
| |
| }
| |
|
| |
|
| |
| /* --- Títulos --- *
| |
| * A fonte SPORE entra só nos títulos grandes. Corpo de texto e títulos
| |
| * pequenos ficam com a Atkinson, que foi desenhada para legibilidade.
| |
| */
| |
| .mw-body h1,
| |
| .mw-body h2,
| |
| .mw-body h3,
| |
| .mw-body h4,
| |
| .mw-body h5,
| |
| .mw-body h6,
| |
| .mw-heading {
| |
| font-family: var(--gg-fonte-texto);
| |
| color: var(--gg-texto);
| |
| line-height: 1.25;
| |
| scroll-margin-top: 4.5rem;
| |
| }
| |
|
| |
| .mw-body h1,
| |
| .mw-body-header h1,
| |
| #firstHeading {
| |
| font-family: var(--gg-fonte-display);
| |
| font-weight: 400;
| |
| font-size: 2.15rem;
| |
| letter-spacing: .01em;
| |
| border-bottom: 0;
| |
| color: var(--gg-azul-profundo);
| |
| }
| |
|
| |
| html.skin-theme-clientpref-night #firstHeading {
| |
| color: var(--gg-texto);
| |
| }
| |
|
| |
| /* h2 recebe uma régua com um "cromossomo" de acento à esquerda. */
| |
| .mw-body h2,
| |
| .mw-heading2 {
| |
| font-family: var(--gg-fonte-texto);
| |
| font-weight: 700;
| |
| font-size: 1.5rem;
| |
| border-bottom: 2px solid var(--gg-borda);
| |
| padding-bottom: .35rem;
| |
| margin-top: 2.2rem;
| |
| position: relative;
| |
| }
| |
|
| |
| .mw-body h2::after,
| |
| .mw-heading2::after {
| |
| content: "";
| |
| position: absolute;
| |
| left: 0;
| |
| bottom: -2px;
| |
| width: 2.75rem;
| |
| height: 2px;
| |
| background: var(--gg-azul-vivo);
| |
| border-radius: var(--gg-r-pilula);
| |
| }
| |
|
| |
| .mw-body h3,
| |
| .mw-heading3 {
| |
| font-weight: 700;
| |
| font-size: 1.2rem;
| |
| margin-top: 1.6rem;
| |
| }
| |
|
| |
| .mw-body h4,
| |
| .mw-heading4 {
| |
| font-weight: 700;
| |
| font-size: 1.05rem;
| |
| color: var(--gg-texto-suave);
| |
| }
| |
|
| |
| .mw-parser-output p {
| |
| margin: .75em 0;
| |
| max-width: 78ch; /* medida de leitura confortável */
| |
| }
| |
|
| |
| .mw-parser-output b,
| |
| .mw-parser-output strong {
| |
| font-weight: 700;
| |
| }
| |
|
| |
| /* --- Código --- */
| |
| code,
| |
| kbd,
| |
| samp,
| |
| pre,
| |
| .mw-code {
| |
| font-family: var(--gg-fonte-mono);
| |
| font-size: .92em;
| |
| }
| |
|
| |
| code {
| |
| background: var(--gg-superficie-2);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-1);
| |
| padding: .1em .35em;
| |
| color: var(--gg-azul-profundo);
| |
| }
| |
|
| |
| html.skin-theme-clientpref-night code {
| |
| color: var(--gg-ciano);
| |
| }
| |
|
| |
| pre,
| |
| .mw-code {
| |
| background: var(--gg-superficie-2);
| |
| border: 1px solid var(--gg-borda);
| |
| border-left: 4px solid var(--gg-azul-vivo);
| |
| border-radius: var(--gg-r-2);
| |
| padding: 1rem;
| |
| overflow-x: auto;
| |
| line-height: 1.55;
| |
| }
| |
|
| |
| kbd {
| |
| background: var(--gg-superficie);
| |
| border: 1px solid var(--gg-borda-forte);
| |
| border-bottom-width: 3px;
| |
| border-radius: var(--gg-r-1);
| |
| padding: .1em .45em;
| |
| }
| |
|
| |
| blockquote {
| |
| border-left: 4px solid var(--gg-azul-vivo);
| |
| background: var(--gg-superficie-2);
| |
| margin: 1.25rem 0;
| |
| padding: .85rem 1.15rem;
| |
| border-radius: 0 var(--gg-r-2) var(--gg-r-2) 0;
| |
| color: var(--gg-texto-suave);
| |
| font-style: normal;
| |
| }
| |
|
| |
| hr {
| |
| border: 0;
| |
| height: 1px;
| |
| background: linear-gradient(90deg, var(--gg-borda-forte), transparent);
| |
| margin: 2rem 0;
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 6. ESTRUTURA DA SKIN — CONTÊINER, CABEÇALHO, COLUNAS, RODAPÉ
| |
| * ========================================================================== */
| |
|
| |
| /* O contêiner vira um cartão flutuando sobre os glifos. */
| |
| .mw-page-container {
| |
| background: transparent;
| |
| max-width: 1600px;
| |
| }
| |
|
| |
| .mw-content-container,
| |
| .mw-body,
| |
| .mw-body-content,
| |
| #content.mw-body {
| |
| background: var(--gg-superficie);
| |
| color: var(--gg-texto);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-3);
| |
| box-shadow: var(--gg-sombra-1);
| |
| }
| |
|
| |
| /* Evita cartão-dentro-de-cartão quando os dois seletores coincidem. */
| |
| .mw-content-container .mw-body {
| |
| border: 0;
| |
| border-radius: 0;
| |
| box-shadow: none;
| |
| background: transparent;
| |
| }
| |
|
| |
| #content.mw-body,
| |
| .vector-body {
| |
| padding: 1.75rem 2rem 2.5rem;
| |
| }
| |
|
| |
| /* --- Cabeçalho --- */
| |
| .vector-header-container .vector-header {
| |
| background: transparent;
| |
| padding-block: .5rem;
| |
| }
| |
|
| |
| .vector-sticky-header {
| |
| background: color-mix(in srgb, var(--gg-superficie) 88%, transparent);
| |
| -webkit-backdrop-filter: blur(10px) saturate(1.3);
| |
| backdrop-filter: blur(10px) saturate(1.3);
| |
| border-bottom: 1px solid var(--gg-borda);
| |
| box-shadow: var(--gg-sombra-1);
| |
| }
| |
|
| |
| .mw-logo-wordmark {
| |
| max-height: 2.1em;
| |
| }
| |
|
| |
| .mw-logo-tagline {
| |
| font-family: var(--gg-fonte-texto);
| |
| color: var(--gg-texto-suave);
| |
| font-size: .8rem;
| |
| letter-spacing: .02em;
| |
| }
| |
|
| |
| /* --- Busca --- */
| |
| .vector-search-box .cdx-text-input__input,
| |
| .vector-search-box input[type="search"] {
| |
| background: var(--gg-superficie);
| |
| border: 1px solid var(--gg-borda-forte);
| |
| border-radius: var(--gg-r-pilula);
| |
| color: var(--gg-texto);
| |
| font-family: var(--gg-fonte-texto);
| |
| padding-left: 2.4em;
| |
| transition: border-color var(--gg-transicao), box-shadow var(--gg-transicao);
| |
| }
| |
|
| |
| .vector-search-box .cdx-text-input__input:hover {
| |
| border-color: var(--gg-azul-vivo);
| |
| }
| |
|
| |
| .vector-search-box .cdx-text-input__input:focus {
| |
| border-color: var(--gg-azul-vivo);
| |
| box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-azul-vivo) 28%, transparent);
| |
| outline: 0;
| |
| }
| |
|
| |
| .cdx-menu {
| |
| background: var(--gg-superficie);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-2);
| |
| box-shadow: var(--gg-sombra-2);
| |
| overflow: hidden;
| |
| }
| |
|
| |
| /* --- Colunas laterais (menu principal, sumário, ferramentas) --- */
| |
| .vector-column-start,
| |
| .vector-column-end {
| |
| color: var(--gg-texto);
| |
| }
| |
|
| |
| .vector-main-menu-container .vector-main-menu,
| |
| .vector-page-tools,
| |
| .vector-toc,
| |
| .vector-appearance,
| |
| #vector-main-menu-dropdown .vector-dropdown-content,
| |
| .vector-dropdown-content {
| |
| background: var(--gg-superficie);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-2);
| |
| box-shadow: var(--gg-sombra-1);
| |
| padding: .6rem .5rem;
| |
| }
| |
|
| |
| .vector-pinnable-header,
| |
| .vector-menu-heading,
| |
| .vector-toc-pinnable-header {
| |
| font-family: var(--gg-fonte-texto);
| |
| font-weight: 700;
| |
| font-size: .78rem;
| |
| letter-spacing: .07em;
| |
| text-transform: uppercase;
| |
| color: var(--gg-texto-suave);
| |
| }
| |
|
| |
| .vector-menu-content-list li a,
| |
| .vector-toc-link,
| |
| .vector-page-tools .mw-list-item a {
| |
| color: var(--gg-link);
| |
| border-radius: var(--gg-r-1);
| |
| padding-inline: .5rem;
| |
| text-decoration: none;
| |
| transition: background-color var(--gg-transicao), color var(--gg-transicao);
| |
| }
| |
|
| |
| .vector-menu-content-list li a:hover,
| |
| .vector-toc-link:hover,
| |
| .vector-page-tools .mw-list-item a:hover {
| |
| background: var(--gg-superficie-3);
| |
| color: var(--gg-link-hover);
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* Item ativo do sumário: barra de acento + peso, não só cor. */
| |
| .vector-toc-list-item-active > .vector-toc-link {
| |
| background: var(--gg-acento-fraco);
| |
| font-weight: 700;
| |
| box-shadow: inset 3px 0 0 var(--gg-azul-vivo);
| |
| }
| |
|
| |
| /* --- Abas de página (Artigo / Discussão / Ler / Editar / Histórico) --- */
| |
| .vector-menu-tabs .mw-list-item a,
| |
| .vector-menu-tabs-legacy li a {
| |
| background: transparent;
| |
| border: 0;
| |
| border-radius: var(--gg-r-pilula) var(--gg-r-pilula) 0 0;
| |
| color: var(--gg-link);
| |
| font-weight: 500;
| |
| transition: background-color var(--gg-transicao), box-shadow var(--gg-transicao);
| |
| }
| |
|
| |
| .vector-menu-tabs .mw-list-item a:hover {
| |
| background: var(--gg-superficie-3);
| |
| }
| |
|
| |
| .vector-menu-tabs .selected a,
| |
| .vector-menu-tabs .selected a:visited {
| |
| color: var(--gg-texto);
| |
| font-weight: 700;
| |
| background: var(--gg-superficie-2);
| |
| box-shadow: inset 0 -3px 0 var(--gg-azul-vivo);
| |
| }
| |
|
| |
| /* --- Botões --- */
| |
| .cdx-button:not(.cdx-button--weight-quiet) {
| |
| border-radius: var(--gg-r-pilula);
| |
| font-family: var(--gg-fonte-texto);
| |
| font-weight: 500;
| |
| border-color: var(--gg-borda-forte);
| |
| transition: transform var(--gg-transicao), box-shadow var(--gg-transicao);
| |
| }
| |
|
| |
| .cdx-button--action-progressive.cdx-button--weight-primary {
| |
| background: var(--gg-azul);
| |
| border-color: var(--gg-azul);
| |
| color: var(--gg-texto-invertido);
| |
| }
| |
|
| |
| html.skin-theme-clientpref-night .cdx-button--action-progressive.cdx-button--weight-primary {
| |
| color: var(--gg-azul-abissal);
| |
| }
| |
|
| |
| .cdx-button:not(.cdx-button--weight-quiet):hover {
| |
| transform: translateY(-1px);
| |
| box-shadow: var(--gg-sombra-1);
| |
| }
| |
|
| |
| .cdx-button:active {
| |
| transform: translateY(0);
| |
| }
| |
|
| |
| /* --- Rodapé --- */
| |
| .mw-footer,
| |
| .mw-footer-container {
| |
| background: transparent;
| |
| color: var(--gg-texto-suave);
| |
| border-top: 0;
| |
| }
| |
|
| |
| .mw-footer-container {
| |
| margin-top: 1.5rem;
| |
| padding-top: 1.5rem;
| |
| border-top: 1px solid var(--gg-borda);
| |
| }
| |
|
| |
| .mw-footer li,
| |
| .mw-footer a {
| |
| color: var(--gg-texto-suave);
| |
| }
| |
|
| |
| .mw-footer a:hover {
| |
| color: var(--gg-link-hover);
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 7. INFOBOXES — {{Infobox}} e derivadas
| |
| * ========================================================================== */
| |
|
| |
| .gg-infobox {
| |
| --gg-acento: var(--gg-azul);
| |
| --gg-acento-fraco: #e6eef8;
| |
|
| |
| float: right;
| |
| clear: right;
| |
| width: 22.5rem;
| |
| max-width: 100%;
| |
| margin: 0 0 1.25rem 1.5rem;
| |
| border: 1px solid var(--gg-borda);
| |
| border-top: 4px solid var(--gg-acento);
| |
| border-radius: var(--gg-r-2);
| |
| background: var(--gg-superficie);
| |
| box-shadow: var(--gg-sombra-1);
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| overflow: hidden;
| |
| font-size: .92rem;
| |
| line-height: 1.5;
| |
| }
| |
|
| |
| .gg-infobox-titulo {
| |
| font-family: var(--gg-fonte-display);
| |
| font-weight: 400;
| |
| font-size: 1.35rem;
| |
| line-height: 1.2;
| |
| text-align: left;
| |
| padding: .85rem 1rem .3rem;
| |
| color: var(--gg-acento);
| |
| background: var(--gg-acento-fraco);
| |
| caption-side: top;
| |
| }
| |
|
| |
| html.skin-theme-clientpref-night .gg-infobox-titulo {
| |
| color: var(--gg-texto);
| |
| }
| |
|
| |
| .gg-infobox-subtitulo {
| |
| padding: 0 1rem .8rem;
| |
| background: var(--gg-acento-fraco);
| |
| color: var(--gg-texto-suave);
| |
| font-size: .9em;
| |
| }
| |
|
| |
| .gg-infobox-imagem {
| |
| padding: .9rem 1rem;
| |
| text-align: center;
| |
| background: var(--gg-superficie-2);
| |
| border-bottom: 1px solid var(--gg-borda);
| |
| }
| |
|
| |
| .gg-infobox-imagem img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| border-radius: var(--gg-r-1);
| |
| }
| |
|
| |
| .gg-infobox-legenda {
| |
| margin-top: .5rem;
| |
| font-size: .85em;
| |
| color: var(--gg-texto-suave);
| |
| line-height: 1.45;
| |
| }
| |
|
| |
| .gg-infobox-rotulo {
| |
| width: 38%;
| |
| text-align: left;
| |
| vertical-align: top;
| |
| font-weight: 700;
| |
| color: var(--gg-texto-suave);
| |
| padding: .55rem .5rem .55rem 1rem;
| |
| border-bottom: 1px solid var(--gg-borda);
| |
| hyphens: auto;
| |
| }
| |
|
| |
| .gg-infobox-dado {
| |
| vertical-align: top;
| |
| padding: .55rem 1rem .55rem .5rem;
| |
| border-bottom: 1px solid var(--gg-borda);
| |
| }
| |
|
| |
| /* Zebra suave: ajuda a rastrear a linha em infoboxes longas. */
| |
| .gg-infobox tr:nth-child(even) .gg-infobox-rotulo,
| |
| .gg-infobox tr:nth-child(even) .gg-infobox-dado {
| |
| background: var(--gg-superficie-2);
| |
| }
| |
|
| |
| .gg-infobox-rodape {
| |
| padding: .7rem 1rem;
| |
| background: var(--gg-superficie-2);
| |
| border-top: 1px solid var(--gg-borda);
| |
| font-size: .85em;
| |
| color: var(--gg-texto-suave);
| |
| }
| |
|
| |
| .gg-infobox tr:last-child .gg-infobox-rotulo,
| |
| .gg-infobox tr:last-child .gg-infobox-dado {
| |
| border-bottom: 0;
| |
| }
| |
|
| |
| /* --- Cor de espécie por tipo de infobox --- */
| |
| .gg-infobox-jogo { --gg-acento: var(--gg-azul); --gg-acento-fraco: #e6eef8; }
| |
| .gg-infobox-estagio { --gg-acento: var(--gg-verde); --gg-acento-fraco: #e3f2e9; }
| |
| .gg-infobox-criador { --gg-acento: #0f6f8c; --gg-acento-fraco: #e0f1f6; }
| |
| .gg-infobox-criacao { --gg-acento: var(--gg-roxo); --gg-acento-fraco: #f1e6f5; }
| |
| .gg-infobox-download { --gg-acento: #37527a; --gg-acento-fraco: #e8edf5; }
| |
| .gg-infobox-raridade { --gg-acento: var(--gg-ambar); --gg-acento-fraco: #f7efdd; }
| |
| .gg-infobox-ferramenta { --gg-acento: var(--gg-laranja); --gg-acento-fraco: #f9e9e0; }
| |
| .gg-infobox-arquetipo { --gg-acento: #4b3fa0; --gg-acento-fraco: #e9e7f7; }
| |
|
| |
| html.skin-theme-clientpref-night .gg-infobox-jogo { --gg-acento: #6ec1f0; --gg-acento-fraco: #16293f; }
| |
| html.skin-theme-clientpref-night .gg-infobox-estagio { --gg-acento: #74d19a; --gg-acento-fraco: #16301f; }
| |
| html.skin-theme-clientpref-night .gg-infobox-criador { --gg-acento: #6fd0e8; --gg-acento-fraco: #113140; }
| |
| html.skin-theme-clientpref-night .gg-infobox-criacao { --gg-acento: #c79ce0; --gg-acento-fraco: #2b1c39; }
| |
| html.skin-theme-clientpref-night .gg-infobox-download { --gg-acento: #9fb6d8; --gg-acento-fraco: #1a2438; }
| |
| html.skin-theme-clientpref-night .gg-infobox-raridade { --gg-acento: #e2b565; --gg-acento-fraco: #33270f; }
| |
| html.skin-theme-clientpref-night .gg-infobox-ferramenta { --gg-acento: #f0a072; --gg-acento-fraco: #35200f; }
| |
| html.skin-theme-clientpref-night .gg-infobox-arquetipo { --gg-acento: #a99cf0; --gg-acento-fraco: #221e3f; }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 8. {{Esboço}}
| |
| * ========================================================================== */
| |
|
| |
| .gg-esboco {
| |
| display: flow-root;
| |
| clear: both;
| |
| margin: 2rem 0 1rem;
| |
| padding: .9rem 1.1rem .9rem 3.25rem;
| |
| background: var(--gg-superficie-2);
| |
| border: 1px dashed var(--gg-borda-forte);
| |
| border-radius: var(--gg-r-2);
| |
| color: var(--gg-texto-suave);
| |
| font-size: .95rem;
| |
| position: relative;
| |
| }
| |
|
| |
| /* Broto decorativo. Puramente CSS, portanto invisível para leitores de tela. */
| |
| .gg-esboco::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: 1.15rem;
| |
| top: 1.05rem;
| |
| width: .85rem;
| |
| height: .85rem;
| |
| border-radius: 60% 0 60% 60%;
| |
| background: var(--gg-verde);
| |
| transform: rotate(-15deg);
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 9. {{Trilha de estágios}} — .gg-evolucao
| |
| * ========================================================================== */
| |
|
| |
| .gg-evolucao {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: .4rem;
| |
| align-items: stretch;
| |
| margin: 0 0 1.5rem;
| |
| padding: .45rem;
| |
| background: var(--gg-superficie-2);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-pilula);
| |
| counter-reset: etapa;
| |
| }
| |
|
| |
| .gg-evolucao-etapa {
| |
| counter-increment: etapa;
| |
| flex: 1 1 7rem;
| |
| position: relative;
| |
| text-align: center;
| |
| }
| |
|
| |
| .gg-evolucao-etapa a {
| |
| display: block;
| |
| padding: .5rem .65rem;
| |
| border-radius: var(--gg-r-pilula);
| |
| font-family: var(--gg-fonte-texto);
| |
| font-weight: 500;
| |
| font-size: .95rem;
| |
| color: var(--gg-link);
| |
| text-decoration: none;
| |
| background: var(--gg-superficie);
| |
| border: 1px solid var(--gg-borda);
| |
| transition: background-color var(--gg-transicao), color var(--gg-transicao), transform var(--gg-transicao);
| |
| }
| |
|
| |
| .gg-evolucao-etapa a::before {
| |
| content: counter(etapa) ".";
| |
| margin-right: .35em;
| |
| color: var(--gg-texto-suave);
| |
| font-variant-numeric: tabular-nums;
| |
| }
| |
|
| |
| .gg-evolucao-etapa a:hover {
| |
| background: var(--gg-superficie-3);
| |
| color: var(--gg-link-hover);
| |
| transform: translateY(-1px);
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /*
| |
| * Estágio atual: cor + peso + borda dupla. Três sinais, para que a
| |
| * informação sobreviva ao daltonismo e ao alto contraste.
| |
| */
| |
| .gg-evolucao-atual a,
| |
| .gg-evolucao-atual a:visited {
| |
| background: var(--gg-azul);
| |
| border-color: var(--gg-azul);
| |
| color: var(--gg-texto-invertido);
| |
| font-weight: 700;
| |
| box-shadow: 0 0 0 2px var(--gg-superficie-2), 0 0 0 4px var(--gg-azul);
| |
| }
| |
|
| |
| html.skin-theme-clientpref-night .gg-evolucao-atual a,
| |
| html.skin-theme-clientpref-night .gg-evolucao-atual a:visited {
| |
| color: var(--gg-azul-abissal);
| |
| }
| |
|
| |
| .gg-evolucao-atual a::before {
| |
| color: inherit;
| |
| opacity: .75;
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 10. TABELAS
| |
| * ========================================================================== */
| |
|
| |
| .mw-parser-output table.wikitable {
| |
| background: var(--gg-superficie);
| |
| color: var(--gg-texto);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-2);
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| overflow: hidden;
| |
| box-shadow: var(--gg-sombra-1);
| |
| }
| |
|
| |
| .mw-parser-output table.wikitable > * > tr > th {
| |
| background: var(--gg-superficie-3);
| |
| color: var(--gg-texto);
| |
| border: 0;
| |
| border-bottom: 2px solid var(--gg-borda-forte);
| |
| padding: .6rem .75rem;
| |
| text-align: left;
| |
| }
| |
|
| |
| .mw-parser-output table.wikitable > * > tr > td {
| |
| border: 0;
| |
| border-bottom: 1px solid var(--gg-borda);
| |
| padding: .55rem .75rem;
| |
| }
| |
|
| |
| .mw-parser-output table.wikitable > * > tr:last-child > td {
| |
| border-bottom: 0;
| |
| }
| |
|
| |
| /* --- {{Tabela evolutiva}} --- */
| |
| .gg-tabela-evolutiva {
| |
| width: 100%;
| |
| margin: 1.5rem 0;
| |
| background: var(--gg-superficie);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-2);
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| overflow: hidden;
| |
| box-shadow: var(--gg-sombra-1);
| |
| }
| |
|
| |
| .gg-tabela-evolutiva caption {
| |
| font-family: var(--gg-fonte-texto);
| |
| font-weight: 700;
| |
| text-align: left;
| |
| padding: .8rem 1rem;
| |
| color: var(--gg-texto);
| |
| background: var(--gg-superficie-2);
| |
| border-bottom: 1px solid var(--gg-borda);
| |
| }
| |
|
| |
| .gg-tabela-evolutiva th[scope="col"] {
| |
| background: var(--gg-superficie-3);
| |
| padding: .6rem .8rem;
| |
| text-align: left;
| |
| font-size: .88rem;
| |
| letter-spacing: .03em;
| |
| text-transform: uppercase;
| |
| border-bottom: 2px solid var(--gg-borda-forte);
| |
| }
| |
|
| |
| .gg-tabela-evolutiva td,
| |
| .gg-tabela-evolutiva th[scope="row"] {
| |
| padding: .65rem .8rem;
| |
| border-bottom: 1px solid var(--gg-borda);
| |
| vertical-align: top;
| |
| text-align: left;
| |
| }
| |
|
| |
| .gg-tabela-evolutiva tr:last-child td,
| |
| .gg-tabela-evolutiva tr:last-child th {
| |
| border-bottom: 0;
| |
| }
| |
|
| |
| .gg-te-escolha {
| |
| font-weight: 700;
| |
| white-space: nowrap;
| |
| position: relative;
| |
| padding-left: 2.1rem !important;
| |
| }
| |
|
| |
| /*
| |
| * Marcador da escolha: a FORMA muda junto com a cor (círculo, losango,
| |
| * triângulo). Assim a linha continua legível em escala de cinza.
| |
| */
| |
| .gg-te-escolha::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: .85rem;
| |
| top: 1.05em;
| |
| width: .6rem;
| |
| height: .6rem;
| |
| background: var(--gg-texto-suave);
| |
| }
| |
|
| |
| .gg-cor-verde .gg-te-escolha::before {
| |
| background: var(--gg-verde);
| |
| border-radius: 50%;
| |
| }
| |
|
| |
| .gg-cor-azul .gg-te-escolha::before {
| |
| background: var(--gg-azul);
| |
| transform: rotate(45deg);
| |
| }
| |
|
| |
| .gg-cor-vermelho .gg-te-escolha::before {
| |
| background: var(--gg-vermelho);
| |
| clip-path: polygon(50% 0, 100% 100%, 0 100%);
| |
| }
| |
|
| |
| .gg-cor-neutra .gg-te-escolha::before {
| |
| background: var(--gg-texto-suave);
| |
| border-radius: var(--gg-r-1);
| |
| }
| |
|
| |
| .gg-cor-verde > th:first-child { box-shadow: inset 4px 0 0 var(--gg-verde); }
| |
| .gg-cor-azul > th:first-child { box-shadow: inset 4px 0 0 var(--gg-azul); }
| |
| .gg-cor-vermelho > th:first-child { box-shadow: inset 4px 0 0 var(--gg-vermelho); }
| |
| .gg-cor-neutra > th:first-child { box-shadow: inset 4px 0 0 var(--gg-borda-forte); }
| |
|
| |
| .gg-cor-verde:hover,
| |
| .gg-cor-azul:hover,
| |
| .gg-cor-vermelho:hover,
| |
| .gg-cor-neutra:hover {
| |
| background: var(--gg-superficie-2);
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 11. PÁGINA INICIAL — .gg-inicio
| |
| * ========================================================================== */
| |
|
| |
| .gg-inicio {
| |
| max-width: 62rem;
| |
| margin-inline: auto;
| |
| }
| |
|
| |
| /* Herói: gradiente do azul abissal ao azul Spore, com os glifos por cima. */
| |
| .gg-inicio > h1,
| |
| .gg-inicio > .mw-heading1 {
| |
| font-family: var(--gg-fonte-display);
| |
| font-weight: 400;
| |
| font-size: clamp(2rem, 5.5vw, 3.1rem);
| |
| line-height: 1.1;
| |
| text-align: center;
| |
| color: var(--gg-texto-invertido);
| |
| background:
| |
| linear-gradient(135deg, var(--gg-azul-abissal), var(--gg-azul) 60%, var(--gg-azul-vivo));
| |
| border: 0;
| |
| border-radius: var(--gg-r-3) var(--gg-r-3) 0 0;
| |
| padding: 2.5rem 1.5rem 1rem;
| |
| margin: 0;
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .gg-subtitulo {
| |
| text-align: center;
| |
| color: color-mix(in srgb, #ffffff 88%, transparent);
| |
| background: linear-gradient(135deg, var(--gg-azul) 20%, var(--gg-azul-vivo));
| |
| padding: 0 1.5rem 2rem;
| |
| font-size: 1.05rem;
| |
| margin: 0;
| |
| }
| |
|
| |
| .gg-subtitulo b,
| |
| .gg-subtitulo strong {
| |
| color: #ffffff;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| /* --- Painel de estatísticas --- */
| |
| .gg-stats {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
| |
| gap: 1px;
| |
| background: var(--gg-borda);
| |
| border: 1px solid var(--gg-borda);
| |
| border-top: 0;
| |
| border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
| |
| overflow: hidden;
| |
| margin-bottom: 2.5rem;
| |
| box-shadow: var(--gg-sombra-2);
| |
| }
| |
|
| |
| .gg-stat {
| |
| background: var(--gg-superficie);
| |
| padding: 1.15rem .75rem;
| |
| text-align: center;
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: .2rem;
| |
| justify-content: center;
| |
| }
| |
|
| |
| .gg-stat-numero {
| |
| font-family: var(--gg-fonte-display);
| |
| font-size: 1.9rem;
| |
| line-height: 1.1;
| |
| font-weight: 400;
| |
| color: var(--gg-azul);
| |
| font-variant-numeric: tabular-nums;
| |
| font-feature-settings: "tnum";
| |
| }
| |
|
| |
| .gg-stat-rotulo {
| |
| font-size: .82rem;
| |
| line-height: 1.35;
| |
| color: var(--gg-texto-suave);
| |
| text-wrap: balance;
| |
| }
| |
|
| |
| /* --- Seções da inicial viram cartões --- */
| |
| .gg-inicio h2,
| |
| .gg-inicio .mw-heading2 {
| |
| font-size: 1.3rem;
| |
| border: 0;
| |
| padding: 0 0 .6rem;
| |
| margin: 2rem 0 .85rem;
| |
| }
| |
|
| |
| .gg-inicio h2::after,
| |
| .gg-inicio .mw-heading2::after {
| |
| width: 2rem;
| |
| height: 3px;
| |
| bottom: 0;
| |
| }
| |
|
| |
| /*
| |
| * As listas da inicial viram grades de pastilhas. Continuam sendo <ul>/<li>
| |
| * no HTML, então a semântica e a navegação por leitor de tela não mudam.
| |
| */
| |
| .gg-inicio ul {
| |
| list-style: none;
| |
| margin: 0 0 1.5rem;
| |
| padding: 0;
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
| |
| gap: .6rem;
| |
| }
| |
|
| |
| .gg-inicio ul li {
| |
| margin: 0;
| |
| }
| |
|
| |
| .gg-inicio ul li a {
| |
| display: block;
| |
| padding: .8rem 1rem;
| |
| background: var(--gg-superficie);
| |
| border: 1px solid var(--gg-borda);
| |
| border-left: 4px solid var(--gg-azul-vivo);
| |
| border-radius: var(--gg-r-2);
| |
| color: var(--gg-link);
| |
| font-weight: 500;
| |
| text-decoration: none;
| |
| box-shadow: var(--gg-sombra-1);
| |
| transition: transform var(--gg-transicao), box-shadow var(--gg-transicao),
| |
| border-color var(--gg-transicao), background-color var(--gg-transicao);
| |
| }
| |
|
| |
| .gg-inicio ul li a:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: var(--gg-sombra-2);
| |
| border-left-color: var(--gg-azul);
| |
| background: var(--gg-superficie-2);
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| .gg-inicio ul li a.new {
| |
| border-left-color: var(--gg-vermelho);
| |
| }
| |
|
| |
| /* Na inicial não queremos o cartão externo duplicado. */
| |
| body.page-Página_inicial #content.mw-body,
| |
| body.page-Página_principal #content.mw-body {
| |
| background: transparent;
| |
| border: 0;
| |
| box-shadow: none;
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 12. IMAGENS E MISCELÂNEA
| |
| * ========================================================================== */
| |
|
| |
| .mw-parser-output figure[typeof~='mw:File/Thumb'],
| |
| .mw-parser-output .thumbinner {
| |
| background: var(--gg-superficie);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-2);
| |
| box-shadow: var(--gg-sombra-1);
| |
| padding: .5rem;
| |
| }
| |
|
| |
| .mw-parser-output .thumbcaption,
| |
| .mw-parser-output figcaption {
| |
| color: var(--gg-texto-suave);
| |
| font-size: .88rem;
| |
| line-height: 1.45;
| |
| padding: .5rem .35rem .2rem;
| |
| }
| |
|
| |
| .mw-parser-output figure img,
| |
| .mw-parser-output .thumbimage {
| |
| border: 0;
| |
| border-radius: var(--gg-r-1);
| |
| }
| |
|
| |
| /* Caixa de categorias */
| |
| .catlinks {
| |
| background: var(--gg-superficie-2);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-2);
| |
| padding: .8rem 1rem;
| |
| margin-top: 2rem;
| |
| }
| |
|
| |
| /* Notas de rodapé e referências */
| |
| .mw-parser-output .reflist,
| |
| .mw-parser-output .references {
| |
| font-size: .9rem;
| |
| color: var(--gg-texto-suave);
| |
| }
| |
|
| |
| /* Avisos do sistema */
| |
| .mw-message-box,
| |
| .cdx-message {
| |
| border-radius: var(--gg-r-2);
| |
| }
| |
|
| |
| /* Redirecionamentos, tabela de conteúdo em linha etc. */
| |
| .mw-parser-output .toc {
| |
| background: var(--gg-superficie-2);
| |
| border: 1px solid var(--gg-borda);
| |
| border-radius: var(--gg-r-2);
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 13. RESPONSIVO
| |
| * ========================================================================== */
| |
|
| |
| @media (max-width: 720px) {
| |
| #content.mw-body,
| |
| .vector-body {
| |
| padding: 1.25rem 1.1rem 2rem;
| |
| }
| |
|
| |
| .mw-content-container,
| |
| .mw-body,
| |
| #content.mw-body {
| |
| border-radius: var(--gg-r-2);
| |
| }
| |
|
| |
| .gg-infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 0 0 1.5rem;
| |
| }
| |
|
| |
| .gg-evolucao {
| |
| border-radius: var(--gg-r-2);
| |
| }
| |
|
| |
| .gg-inicio ul {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .gg-stats {
| |
| grid-template-columns: repeat(2, 1fr);
| |
| }
| |
|
| |
| /* Tabelas largas rolam em vez de estourar a página. */
| |
| .gg-tabela-evolutiva,
| |
| .mw-parser-output table.wikitable {
| |
| display: block;
| |
| overflow-x: auto;
| |
| max-width: 100%;
| |
| }
| |
| }
| |
|
| |
|
| |
| /* =============================================================================
| |
| * 14. PREFERÊNCIAS DO LEITOR
| |
| * ========================================================================== */
| |
|
| |
| @media (prefers-reduced-motion: reduce) {
| |
| *,
| |
| *::before,
| |
| *::after {
| |
| animation-duration: .001ms !important;
| |
| animation-iteration-count: 1 !important;
| |
| transition-duration: .001ms !important;
| |
| scroll-behavior: auto !important;
| |
| }
| |
|
| |
| .gg-inicio ul li a:hover,
| |
| .gg-evolucao-etapa a:hover,
| |
| .cdx-button:hover {
| |
| transform: none;
| |
| }
| |
| }
| |
|
| |
| /* Modo de alto contraste do sistema: devolve bordas de verdade. */
| |
| @media (forced-colors: active) {
| |
| .gg-infobox,
| |
| .gg-esboco,
| |
| .gg-evolucao,
| |
| .gg-tabela-evolutiva,
| |
| .gg-stats,
| |
| .gg-inicio ul li a,
| |
| .mw-content-container {
| |
| border: 1px solid CanvasText;
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .gg-evolucao-atual a {
| |
| outline: 3px solid CanvasText;
| |
| outline-offset: 2px;
| |
| }
| |
|
| |
| body::before {
| |
| display: none;
| |
| }
| |
| }
| |
|
| |
| /* Impressão: sem cromo, sem fundo, tinta poupada. */
| |
| @media print {
| |
| body::before {
| |
| display: none;
| |
| }
| |
|
| |
| .mw-content-container,
| |
| .mw-body,
| |
| #content.mw-body,
| |
| .gg-infobox,
| |
| .gg-stats,
| |
| .gg-tabela-evolutiva {
| |
| box-shadow: none;
| |
| border-color: #999;
| |
| }
| |
|
| |
| .gg-inicio > h1,
| |
| .gg-subtitulo {
| |
| background: none !important;
| |
| color: #000 !important;
| |
| }
| |
|
| |
| .gg-evolucao,
| |
| .catlinks {
| |
| display: none;
| |
| }
| |
| }
| |
| </style>
| |
| <style>
| |
| /* --- Ajustes só da prévia: apontar recursos para o servidor de testes --- */
| |
| @font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('https://beta.guia.esporo.net/images/fonts/AtkinsonHyperlegibleNext.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
| |
| @font-face { font-family: 'Atkinson Hyperlegible Mono'; src: url('https://beta.guia.esporo.net/images/fonts/AtkinsonHyperlegibleMono.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
| |
| @font-face { font-family: 'SPORE'; src: url('https://beta.guia.esporo.net/images/fonts/SPORERegular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
| |
| @font-face { font-family: 'SPORE'; src: url('https://beta.guia.esporo.net/images/fonts/SPOREBold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
| |
| body::before { background-image: url('https://beta.guia.esporo.net/images/background.jpg'); }
| |
|
| |
| /* Andaime que na wiki é entregue pela própria skin */
| |
| body { margin: 0; }
| |
| .mw-page-container { margin-inline: auto; padding: 1.5rem 1rem 3rem; }
| |
| .mw-content-container { padding: 0; }
| |
| .gg-preview-barra { display: flex; gap: .5rem; align-items: center; justify-content: flex-end;
| |
| max-width: 1600px; margin: 0 auto .9rem; font-family: var(--gg-fonte-texto); font-size: .85rem; }
| |
| .gg-preview-barra button { font: inherit; padding: .45rem .9rem; border-radius: var(--gg-r-pilula);
| |
| border: 1px solid var(--gg-borda-forte); background: var(--gg-superficie); color: var(--gg-texto); cursor: pointer; }
| |
| .gg-preview-nota { max-width: 1600px; margin: 0 auto 1rem; padding: .75rem 1rem;
| |
| font-family: var(--gg-fonte-texto); font-size: .85rem; color: var(--gg-texto-suave);
| |
| background: var(--gg-superficie-2); border: 1px dashed var(--gg-borda-forte); border-radius: var(--gg-r-2); }
| |
| </style>
| |
| </head>
| |
| <body class="skin-vector-2022">
| |
|
| |
| <div class="mw-page-container">
| |
|
| |
| <div class="gg-preview-barra">
| |
| <button type="button" id="tema">Alternar tema claro/escuro</button>
| |
| </div>
| |
|
| |
| <p class="gg-preview-nota">
| |
| Prévia estática dos componentes de conteúdo. As fontes e o fundo glífico só aparecem
| |
| se o navegador conseguir buscá-los em <code>beta.guia.esporo.net</code>.
| |
| </p>
| |
|
| |
| <!-- ================= PÁGINA INICIAL ================= -->
| |
| <div class="mw-content-container">
| |
| <div class="mw-body" id="content">
| |
| <div class="vector-body mw-parser-output">
| |
| <div class="gg-inicio">
| |
| <h1>Boas vindas ao Guia Galáctico!</h1>
| |
| <div class="gg-subtitulo">Documentando toda a Galáxia Spore em <b>1.482</b> artigos… e expandindo!</div>
| |
|
| |
| <div class="gg-stats">
| |
| <div class="gg-stat"><span class="gg-stat-numero">184 M</span><span class="gg-stat-rotulo">criações na Sporepédia</span></div>
| |
| <div class="gg-stat"><span class="gg-stat-numero">2.310</span><span class="gg-stat-rotulo">criações hoje</span></div>
| |
| <div class="gg-stat"><span class="gg-stat-numero">3,1 M</span><span class="gg-stat-rotulo">criadores</span></div>
| |
| <div class="gg-stat"><span class="gg-stat-numero">417</span><span class="gg-stat-rotulo">criadores ativos hoje</span></div>
| |
| </div>
| |
|
| |
| <h2>Conheça os jogos Spore</h2>
| |
| <ul>
| |
| <li><a href="#">SPORE</a></li>
| |
| <li><a href="#">Aventuras Galácticas</a></li>
| |
| <li><a href="#">Medonhas & Fofinhas</a></li>
| |
| <li><a href="#">Darkspore</a></li>
| |
| <li><a href="#" class="new">Outros jogos</a></li>
| |
| </ul>
| |
|
| |
| <h2>Saiba mais sobre os estágios evolutivos</h2>
| |
| <ul>
| |
| <li><a href="#">Estágio de Célula</a></li>
| |
| <li><a href="#">Estágio de Criatura</a></li>
| |
| <li><a href="#">Estágio de Tribo</a></li>
| |
| <li><a href="#">Estágio de Civilização</a></li>
| |
| <li><a href="#">Estágio Espacial</a></li>
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div style="height:2.5rem"></div>
| |
|
| |
| <!-- ================= ARTIGO ================= -->
| |
| <div class="mw-content-container">
| |
| <div class="mw-body" id="content2">
| |
| <h1 id="firstHeading">Estágio de Criatura</h1>
| |
| <div class="vector-body mw-parser-output">
| |
|
| |
| <div class="gg-evolucao" role="navigation" aria-label="Estágios evolutivos">
| |
| <div class="gg-evolucao-etapa"><a href="#">Célula</a></div>
| |
| <div class="gg-evolucao-etapa gg-evolucao-atual"><a href="#">Criatura</a></div>
| |
| <div class="gg-evolucao-etapa"><a href="#">Tribo</a></div>
| |
| <div class="gg-evolucao-etapa"><a href="#">Civilização</a></div>
| |
| <div class="gg-evolucao-etapa"><a href="#">Espaço</a></div>
| |
| </div>
| |
|
| |
| <table class="gg-infobox gg-infobox-estagio">
| |
| <caption class="gg-infobox-titulo">Estágio de Criatura</caption>
| |
| <tr><td colspan="2" class="gg-infobox-subtitulo">Segundo dos cinco estágios evolutivos</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Ordem</th><td class="gg-infobox-dado">2º de 5</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Estágio anterior</th><td class="gg-infobox-dado"><a href="#">Estágio de Célula</a></td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Próximo estágio</th><td class="gg-infobox-dado"><a href="#">Estágio de Tribo</a></td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Objetivo</th><td class="gg-infobox-dado">Evoluir o cérebro até a consciência</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Moeda</th><td class="gg-infobox-dado">Pontos de DNA</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Criadores usados</th><td class="gg-infobox-dado"><a href="#">Criador de Criaturas</a></td></tr>
| |
| <tr><td colspan="2" class="gg-infobox-rodape">Dados conferidos na versão 1.05.1 do jogo.</td></tr>
| |
| </table>
| |
|
| |
| <p>O <b>Estágio de Criatura</b> começa quando a espécie deixa a água e pisa em terra firme
| |
| pela primeira vez. É aqui que o <a href="#">Criador de Criaturas</a> se abre por inteiro:
| |
| membros, bocas, olhos e armas passam a valer pontos de DNA, e cada parte adicionada muda
| |
| o que a criatura consegue fazer no mundo.</p>
| |
|
| |
| <h2>Socializar ou atacar</h2>
| |
| <p>Toda interação com outra espécie cai em uma de duas famílias. Cantar, dançar, posar e
| |
| encantar constroem aliança; morder, atacar em bando e assustar constroem domínio. O jogo
| |
| registra a proporção entre as duas e a carrega para os estágios seguintes — inclusive para
| |
| o <a href="#">arquétipo</a> final da civilização.</p>
| |
|
| |
| <table class="gg-tabela-evolutiva">
| |
| <caption>Escolhas do Estágio de Criatura e suas consequências</caption>
| |
| <tr>
| |
| <th scope="col">Escolha</th>
| |
| <th scope="col"><a href="#">Tribo</a></th>
| |
| <th scope="col">Influência no <a href="#">arquétipo</a></th>
| |
| </tr>
| |
| <tr class="gg-cor-verde">
| |
| <th scope="row" class="gg-te-escolha">Social</th>
| |
| <td>Ferramenta do Maestro</td>
| |
| <td>Aproxima das filosofias sociais</td>
| |
| </tr>
| |
| <tr class="gg-cor-azul">
| |
| <th scope="row" class="gg-te-escolha">Equilibrado</th>
| |
| <td>Ferramenta do Adaptável</td>
| |
| <td>Aproxima das filosofias adaptáveis</td>
| |
| </tr>
| |
| <tr class="gg-cor-vermelho">
| |
| <th scope="row" class="gg-te-escolha">Predador</th>
| |
| <td>Ferramenta do Caçador</td>
| |
| <td>Aproxima das filosofias agressivas</td>
| |
| </tr>
| |
| </table>
| |
|
| |
| <h3>Uma nota sobre partes</h3>
| |
| <p>O orçamento de DNA cresce a cada nível de cérebro. Um resumo do custo aparece
| |
| no canto do editor, e o atalho <kbd>Tab</kbd> alterna entre a vista de teste e a de edição.</p>
| |
|
| |
| <blockquote>Todo organismo começa pequeno — e a maioria continua pequena por bastante tempo.</blockquote>
| |
|
| |
| <pre>{{Trilha de estágios|atual=criatura}}</pre>
| |
|
| |
| <div class="gg-esboco">Este artigo é um <b>esboço em evolução</b>. Você pode ajudar o Guia Galáctico
| |
| <a href="#">expandindo-o</a> — todo organismo começa pequeno.</div>
| |
|
| |
| <div class="catlinks"><b>Categorias:</b> <a href="#">Estágios</a> · <a href="#">Esboços</a></div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div style="height:2.5rem"></div>
| |
|
| |
| <!-- ================= AMOSTRA DE INFOBOXES ================= -->
| |
| <div class="mw-content-container">
| |
| <div class="mw-body">
| |
| <h1 id="firstHeading2">Cores por tipo de infobox</h1>
| |
| <div class="vector-body mw-parser-output">
| |
| <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1.25rem">
| |
| <table class="gg-infobox gg-infobox-jogo" style="float:none;width:auto;margin:0">
| |
| <caption class="gg-infobox-titulo">SPORE</caption>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Lançamento</th><td class="gg-infobox-dado">7 de setembro de 2008</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Plataformas</th><td class="gg-infobox-dado">Windows, macOS</td></tr>
| |
| </table>
| |
| <table class="gg-infobox gg-infobox-criador" style="float:none;width:auto;margin:0">
| |
| <caption class="gg-infobox-titulo">Criador de Veículos</caption>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Jogo</th><td class="gg-infobox-dado">SPORE</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Orçamento</th><td class="gg-infobox-dado">Sporebucks</td></tr>
| |
| </table>
| |
| <table class="gg-infobox gg-infobox-criacao" style="float:none;width:auto;margin:0">
| |
| <caption class="gg-infobox-titulo">Grox Sentinela</caption>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Tipo</th><td class="gg-infobox-dado">Criatura</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Autor(a)</th><td class="gg-infobox-dado">MaxisArtista</td></tr>
| |
| </table>
| |
| <table class="gg-infobox gg-infobox-raridade" style="float:none;width:auto;margin:0">
| |
| <caption class="gg-infobox-titulo">Escultura Antiga</caption>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Valor</th><td class="gg-infobox-dado">50.000 Sporebucks</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Coleção</th><td class="gg-infobox-dado">Esculturas Perdidas (3 de 8)</td></tr>
| |
| </table>
| |
| <table class="gg-infobox gg-infobox-ferramenta" style="float:none;width:auto;margin:0">
| |
| <caption class="gg-infobox-titulo">Raio de Abdução</caption>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Custo</th><td class="gg-infobox-dado">75.000 Sporebucks</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Energia</th><td class="gg-infobox-dado">10 por uso</td></tr>
| |
| </table>
| |
| <table class="gg-infobox gg-infobox-arquetipo" style="float:none;width:auto;margin:0">
| |
| <caption class="gg-infobox-titulo">Xamã</caption>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Filosofia</th><td class="gg-infobox-dado">Harmonia</td></tr>
| |
| <tr><th scope="row" class="gg-infobox-rotulo">Superpoder</th><td class="gg-infobox-dado">Retorno</td></tr>
| |
| </table>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| </div>
| |
|
| |
| <script>
| |
| document.getElementById('tema').addEventListener('click', function () {
| |
| var h = document.documentElement;
| |
| if (h.classList.contains('skin-theme-clientpref-night')) {
| |
| h.classList.remove('skin-theme-clientpref-night');
| |
| h.classList.add('skin-theme-clientpref-day');
| |
| } else {
| |
| h.classList.remove('skin-theme-clientpref-day');
| |
| h.classList.add('skin-theme-clientpref-night');
| |
| }
| |
| });
| |
| </script>
| |
| </body>
| |
| </html>
| |
