Ir para o conteúdo

MediaWiki:Common.css

De Guia Galáctico
Revisão de 22h30min 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.
/* CSS placed here will be applied to all skins */
/**
 * ══════════════════════════════════════════════════════════════════
 *  GUIA GALÁCTICO — Estilos da página inicial
 * ══════════════════════════════════════════════════════════════════
 *
 *  INSTALAÇÃO
 *  1. Cole junto ao CSS principal (MediaWiki:Vector-2022.css) ou,
 *     melhor ainda, use TemplateStyles: crie Template:Inicio/styles.css
 *     com este conteúdo e chame <templatestyles src="Inicio/styles.css" />
 *     no topo da página inicial. (Com TemplateStyles, remova os
 *     comentários de bloco — a extensão só aceita CSS puro.)
 *  2. Este arquivo DEPENDE das variáveis --gg-* definidas no CSS
 *     principal do tema.
 *  3. O wikitext da página inicial deve estar envolto em
 *     <div class="gg-inicio"> … </div> (veja pagina-inicial.wikitext).
 *
 *  Para esconder o título padrão "Página principal" duplicado,
 *  descomente o bloco no final e ajuste o nome da classe do body
 *  (inspecione o <body> da sua página inicial para confirmar).
 */

/* ── Herói ────────────────────────────────────────────────────── */

.gg-inicio h1 {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-top: 0.5em;
}

.gg-inicio .gg-subtitulo {
  text-align: center;
  font-size: 1.15rem;
  color: var(--gg-texto-suave);
  margin: 0 auto 1.5rem;
  max-width: 40em;
}

/* ── Faixa de estatísticas da Sporepédia (preenchida via JS) ──── */

.gg-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 2.5rem;
}

.gg-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--gg-fundo-suave);
  border: 1px solid var(--gg-borda);
  border-radius: 18px;
  padding: 0.8rem 1.4rem;
  min-width: 150px;
}

.gg-stat-numero {
  font-family: var(--gg-fonte-titulo);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--gg-azul);
  font-variant-numeric: tabular-nums;
}

.gg-stat-rotulo {
  font-size: 0.82rem;
  color: var(--gg-texto-suave);
  text-align: center;
}

/* Se a API falhar, a faixa some em silêncio (classe via JS) */
.gg-stats--erro {
  display: none;
}

/* ── Seções ───────────────────────────────────────────────────── */

.gg-inicio h2 {
  margin-top: 2rem;
}

/* Links dentro dos títulos herdam a cor do título */
.gg-inicio h2 a,
.gg-inicio h2 a:visited {
  color: inherit;
}

/* ── Listas viram grades de bolhas ────────────────────────────── */

.gg-inicio ul {
  list-style: none;
  margin: 0.75rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
}

.gg-inicio ul li {
  margin: 0;
}

.gg-inicio ul li a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.65em 1.1em;
  background-color: var(--gg-fundo-suave);
  border: 1px solid var(--gg-borda);
  border-radius: 999px;
  font-weight: 600;
  transition: transform 120ms ease, box-shadow 120ms ease,
              background-color 120ms ease, color 120ms ease;
}

.gg-inicio ul li a:hover {
  background: linear-gradient(180deg, var(--gg-azul-claro) 0%, var(--gg-azul) 100%);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 129, 201, 0.35);
}

/* Redlinks: bolha com a borda magenta, convidando à criação */
.gg-inicio ul li a.new {
  border-color: var(--gg-magenta);
}
.gg-inicio ul li a.new:hover {
  background: var(--gg-magenta);
  box-shadow: 0 4px 12px rgba(194, 31, 144, 0.35);
}

/* Movimento reduzido: sem "pulo" no hover */
@media (prefers-reduced-motion: reduce) {
  .gg-inicio ul li a:hover {
    transform: none;
  }
}

/* ── Ícones por link ──────────────────────────────────────────── *
 *  Faça upload dos ícones na wiki e ajuste os nomes de arquivo.
 *  Special:FilePath é um redirecionamento estável pra imagem.
 *  O seletor usa o atributo title (= página de destino); o prefixo
 *  ^= cobre também redlinks, cujo title ganha o sufixo
 *  "(página não existe)".
 * ─────────────────────────────────────────────────────────────── */

.gg-inicio ul li a[title^='SPORE']::before,
.gg-inicio ul li a[title^='Aventuras Galácticas']::before,
.gg-inicio ul li a[title^='Medonhas & Fofinhas']::before,
.gg-inicio ul li a[title^='Darkspore']::before,
.gg-inicio ul li a[title^='Estágio de Célula']::before,
.gg-inicio ul li a[title^='Estágio de Criatura']::before,
.gg-inicio ul li a[title^='Estágio de Tribo']::before,
.gg-inicio ul li a[title^='Estágio de Civilização']::before,
.gg-inicio ul li a[title^='Estágio Espacial']::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  background: center / contain no-repeat;
}

/* Ajuste os nomes de arquivo conforme o upload: */
.gg-inicio ul li a[title^='SPORE']::before               { background-image: url('/index.php/Special:FilePath/Icone_SPORE.png'); }
.gg-inicio ul li a[title^='Aventuras Galácticas']::before { background-image: url('/index.php/Special:FilePath/Icone_Aventuras_Galacticas.png'); }
.gg-inicio ul li a[title^='Medonhas & Fofinhas']::before  { background-image: url('/index.php/Special:FilePath/Icone_Medonhas_Fofinhas.png'); }
.gg-inicio ul li a[title^='Darkspore']::before            { background-image: url('/index.php/Special:FilePath/Icone_Darkspore.png'); }
.gg-inicio ul li a[title^='Estágio de Célula']::before    { background-image: url('/index.php/Special:FilePath/Icone_Estagio_Celula.png'); }
.gg-inicio ul li a[title^='Estágio de Criatura']::before  { background-image: url('/index.php/Special:FilePath/Icone_Estagio_Criatura.png'); }
.gg-inicio ul li a[title^='Estágio de Tribo']::before     { background-image: url('/index.php/Special:FilePath/Icone_Estagio_Tribo.png'); }
.gg-inicio ul li a[title^='Estágio de Civilização']::before { background-image: url('/index.php/Special:FilePath/Icone_Estagio_Civilizacao.png'); }
.gg-inicio ul li a[title^='Estágio Espacial']::before     { background-image: url('/index.php/Special:FilePath/Icone_Estagio_Espacial.png'); }

/* ── Opcional: esconder o título padrão duplicado ─────────────── *
 *  Descomente e confirme a classe do body inspecionando a página
 *  (ela reflete o nome exato da sua página inicial).
 * ─────────────────────────────────────────────────────────────── */
/*
body.page-Página_principal .mw-body-header .firstHeading,
body.page-Página_principal .mw-body-header .mw-indicators {
  display: none;
}
*/

/**
 * ══════════════════════════════════════════════════════════════════
 *  GUIA GALÁCTICO — CSS das predefinições (infoboxes e utilitárias)
 * ══════════════════════════════════════════════════════════════════
 *  Sem a extensão TemplateStyles, este CSS deve viver junto ao CSS
 *  do site (MediaWiki:Common.css ou MediaWiki:Vector-2022.css).
 *  Depende das variáveis --gg-* do tema principal.
 */

/* ── Infobox base ─────────────────────────────────────────────── */

.gg-infobox {
  --gg-infobox-acento: var(--gg-azul);
  --gg-infobox-acento-claro: var(--gg-azul-claro);
  float: right;
  clear: right;
  width: 290px;
  margin: 0 0 1rem 1.25rem;
  background-color: var(--gg-fundo-conteudo);
  border: 1px solid var(--gg-borda);
  border-radius: 16px;
  box-shadow: var(--gg-sombra);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.45;
}

.gg-infobox .gg-infobox-titulo {
  caption-side: top;
  background: linear-gradient(180deg, var(--gg-infobox-acento-claro) 0%, var(--gg-infobox-acento) 100%);
  color: #fff;
  font-family: var(--gg-fonte-titulo);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 0.55em 0.8em;
  border-radius: 15px 15px 0 0;
}

.gg-infobox .gg-infobox-subtitulo {
  text-align: center;
  color: var(--gg-texto-suave);
  font-style: italic;
  padding: 0.4em 0.8em 0;
}

.gg-infobox .gg-infobox-imagem {
  text-align: center;
  padding: 0.6em;
}
.gg-infobox .gg-infobox-imagem img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
}
.gg-infobox .gg-infobox-legenda {
  font-size: 0.82rem;
  color: var(--gg-texto-suave);
  margin-top: 0.35em;
}

.gg-infobox .gg-infobox-rotulo {
  text-align: left;
  vertical-align: top;
  font-weight: 700;
  color: var(--gg-texto);
  padding: 0.4em 0.5em 0.4em 0.9em;
  width: 38%;
  border-top: 1px solid var(--gg-borda);
}
.gg-infobox .gg-infobox-dado {
  vertical-align: top;
  padding: 0.4em 0.9em 0.4em 0.3em;
  border-top: 1px solid var(--gg-borda);
}

.gg-infobox .gg-infobox-rodape {
  text-align: center;
  font-size: 0.82rem;
  color: var(--gg-texto-suave);
  background-color: var(--gg-fundo-suave);
  padding: 0.45em 0.8em;
  border-top: 1px solid var(--gg-borda);
}

/* Em telas estreitas, a infobox ocupa a largura toda, antes do texto */
@media (max-width: 640px) {
  .gg-infobox {
    float: none;
    clear: both;
    width: 100%;
    margin: 0 0 1.25rem;
  }
}

/* ── Acentos por tipo ─────────────────────────────────────────── *
 *  Cada tipo tem sua cor de cabeçalho, mantendo a família azul
 *  como âncora e variando pra dar identidade rápida ao olho.     */

.gg-infobox-jogo {
  --gg-infobox-acento: var(--gg-azul);
  --gg-infobox-acento-claro: var(--gg-azul-claro);
}
.gg-infobox-estagio {
  --gg-infobox-acento: #1E8A5E;   /* verde evolução */
  --gg-infobox-acento-claro: #35B47F;
}
.gg-infobox-criador {
  --gg-infobox-acento: #C97C10;   /* laranja oficina */
  --gg-infobox-acento-claro: #E89A2E;
}
.gg-infobox-download {
  --gg-infobox-acento: var(--gg-azul-profundo);
  --gg-infobox-acento-claro: var(--gg-navy);
}
.gg-infobox-criacao {
  --gg-infobox-acento: var(--gg-magenta); /* magenta criatura */
  --gg-infobox-acento-claro: #DE4BAE;
}

/* ── Predefinições utilitárias ────────────────────────────────── */

/* {{Esboço}} */
.gg-esboco {
  clear: both;
  position: relative;
  background-color: var(--gg-fundo-suave);
  border: 1px dashed var(--gg-azul);
  border-radius: 14px;
  padding: 0.7em 1.1em 0.7em 3.1rem;
  margin: 1.25rem 0;
  font-size: 0.92rem;
  color: var(--gg-texto-suave);
}
.gg-esboco::before {
  /* Alternativas de um caractere só: 🦠 🪐 🛸 🌌 */
  content: '🧬';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: 1;
}

/* ── Acentos: novas infoboxes ─────────────────────────────────── */

.gg-infobox-ferramenta {
  --gg-infobox-acento: #0A93A8;   /* ciano tecnologia */
  --gg-infobox-acento-claro: #2FB8CC;
}
.gg-infobox-raridade {
  --gg-infobox-acento: #B07B1E;   /* dourado tesouro */
  --gg-infobox-acento-claro: #D9A23A;
}
.gg-infobox-arquetipo {
  --gg-infobox-acento: #6B3FA0;   /* violeta filosofia */
  --gg-infobox-acento-claro: #8E5EC8;
}

/* ── {{Tabela evolutiva}} — trilha dos estágios ───────────────── */

.gg-evolucao {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 0 0 1.5rem;
}

.gg-evolucao-etapa {
  position: relative;
  padding: 0.35em 1em 0.35em 1.4em;
  background-color: var(--gg-fundo-suave);
  border: 1px solid var(--gg-borda);
  font-size: 0.9rem;
  font-weight: 600;
  /* formato de seta apontando à direita */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.gg-evolucao-etapa:first-child {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  padding-left: 1.1em;
  border-radius: 999px 0 0 999px;
}
.gg-evolucao-etapa:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
  padding-right: 1.1em;
  border-radius: 0 999px 999px 0;
}

.gg-evolucao-etapa a {
  color: var(--gg-texto-suave);
  text-decoration: none;
}
.gg-evolucao-etapa a:hover {
  color: var(--gg-link);
}

/* Estágio atual: gradiente azul, texto branco, sem link clicável
   visualmente diferente */
.gg-evolucao-atual {
  background: linear-gradient(180deg, var(--gg-azul-claro) 0%, var(--gg-azul) 100%);
  border-color: var(--gg-azul);
}
.gg-evolucao-atual a,
.gg-evolucao-atual a:hover {
  color: #fff;
  font-weight: 700;
}

/* Em telas muito estreitas, a trilha empilha em coluna */
@media (max-width: 480px) {
  .gg-evolucao {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .gg-evolucao-etapa,
  .gg-evolucao-etapa:first-child,
  .gg-evolucao-etapa:last-child {
    clip-path: none;
    border-radius: 999px;
    text-align: center;
    padding: 0.35em 1em;
  }
}
Disponível em “https://beta.guia.esporo.net/index.php?title=MediaWiki:Common.css&oldid=49”