|
|
| (6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) |
| Linha 1: |
Linha 1: |
| /* 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;
| |
| }
| |
