MediaWiki:Common.css: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 24: | Linha 24: | ||
} | } | ||
/* | /* Links padrão dos cards/itens de lista */ | ||
.broaurora-link { | .broaurora-link { | ||
display:block; | display: block; | ||
text-decoration:none; | text-decoration: none; | ||
color:#1a2a3a; | color: #1a2a3a; | ||
padding:10px 12px; | padding: 10px 12px; | ||
border:1px solid var(--broaurora-border, rgba(31,106,165,.35)); | border: 1px solid var(--broaurora-border, rgba(31,106,165,.35)); | ||
border-radius:10px; | border-radius: 10px; | ||
transition: all .2s ease; | transition: all .2s ease; | ||
} | } | ||
| Linha 50: | Linha 50: | ||
body.page-Página_principal #content { border-top: 0; } | body.page-Página_principal #content { border-top: 0; } | ||
/* | /* ========================= | ||
.bro-cta-row { | LINHA DE CTAs (imagens) | ||
display:flex; | ========================= */ | ||
justify-content:center; | |||
align-items:center; | /* Container centralizado */ | ||
gap: | .mw-parser-output .bro-cta-row { | ||
flex-wrap:wrap; | display: flex; | ||
justify-content: center; /* centraliza horizontalmente */ | |||
align-items: center; | |||
gap: 18px; /* espaço entre as artes */ | |||
flex-wrap: wrap; /* quebra no mobile */ | |||
margin: 10px auto 0; | |||
text-align: center; | |||
} | } | ||
/* Cartão clicável com relevo */ | /* Cartão clicável com relevo */ | ||
.bro-cta { | .mw-parser-output .bro-cta { | ||
display:inline-block; | display: inline-block; | ||
line-height:0; | line-height: 0; | ||
border-radius:16px; | border-radius: 16px; | ||
overflow:hidden; /* arredonda a própria imagem */ | overflow: hidden; /* arredonda a própria imagem */ | ||
box-shadow:0 6px 18px rgba(0,0,0,.18); | box-shadow: 0 6px 18px rgba(0,0,0,.18); | ||
transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; | transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; | ||
float: none !important; /* evita layout grudar na direita por CSS externo */ | |||
vertical-align: middle; | |||
} | } | ||
/* Garante que a imagem ocupe o bloco certinho */ | /* Garante que a imagem ocupe o bloco certinho */ | ||
.bro-cta a img { | .mw-parser-output .bro-cta a, | ||
.mw-parser-output .bro-cta img { display: block; } | |||
height:auto; | .mw-parser-output .bro-cta img { | ||
width: 350px; /* padroniza o tamanho das três */ | |||
height: auto; | |||
border-radius: 18px; | |||
box-shadow: 0 8px 22px rgba(0,0,0,.16); | |||
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; | |||
} | } | ||
/* | /* Hover: leve zoom + relevo + um pouco mais de cor/luz */ | ||
.bro-cta:hover { | .mw-parser-output .bro-cta:hover { | ||
transform: translateY(-4px) scale(1.03); | transform: translateY(-4px) scale(1.03); | ||
box-shadow:0 16px 34px rgba(0,0,0,.26); | box-shadow: 0 16px 34px rgba(0,0,0,.26); | ||
} | } | ||
.bro-cta:hover img { | .mw-parser-output .bro-cta:hover img { | ||
filter: saturate(1.08) brightness(1.04); | filter: saturate(1.08) brightness(1.04); | ||
} | } | ||
/* Acessibilidade: teclado também | /* Acessibilidade: foco via teclado também destaca */ | ||
.bro-cta a:focus-visible { | .mw-parser-output .bro-cta a:focus-visible { | ||
outline: 3px solid #FFD23C; | outline: 3px solid #FFD23C; | ||
outline-offset: 4px; | outline-offset: 4px; | ||
border-radius:16px | border-radius: 16px; | ||
} | } | ||
/* Responsivo */ | /* Responsivo */ | ||
@media (max-width: 900px){ | @media (max-width: 900px){ | ||
.bro-cta-row{ gap: 14px; } | .mw-parser-output .bro-cta-row { gap: 14px; } | ||
.bro-cta img{ width: 300px; } | .mw-parser-output .bro-cta img { width: 300px; } | ||
} | } | ||
@media (max-width: 600px){ | @media (max-width: 600px){ | ||
.bro-cta img{ width: 260px; } | .mw-parser-output .bro-cta img { width: 260px; } | ||
} | } | ||
Edição das 13h26min de 16 de outubro de 2025
/* ===== Ajustes globais — broAurora ===== */
/* Esconde título e metas SOMENTE na Página principal */
body.page-Página_principal #firstHeading,
body.page-Página_principal #siteSub,
body.page-Página_principal #contentSub,
body.page-Página_principal .mw-indicators {
display: none !important;
}
/* Respiro no topo quando a página começa com o herói */
.mw-body-content > .broaurora-root:first-child,
.vector-body > .broaurora-root:first-child {
margin-top: 12px;
}
/* Garante que os blocos ocupem toda a largura do conteúdo
em QUALQUER skin (Vector 2022 e Vector antigo) */
.mw-body-content .broaurora-hero,
.mw-body-content .broaurora-card,
#content .broaurora-hero,
#content .broaurora-card {
max-width: 100%;
}
/* Links padrão dos cards/itens de lista */
.broaurora-link {
display: block;
text-decoration: none;
color: #1a2a3a;
padding: 10px 12px;
border: 1px solid var(--broaurora-border, rgba(31,106,165,.35));
border-radius: 10px;
transition: all .2s ease;
}
.broaurora-link:hover {
background: var(--broaurora-hover, rgba(31,106,165,.12));
color: var(--broaurora-primary, #1f6aa5);
border-color: var(--broaurora-primary, #1f6aa5);
text-decoration: none;
}
/* Tira espaçamentos extras nos títulos internos */
.broaurora-hero h1 { margin-top: 0 !important; }
/* Remove qualquer espaçamento alto residual no topo da Home */
body.page-Página_principal .mw-body { padding-top: 0.5rem; }
/* Evita uma linha/borda alta entre topo e conteúdo em algumas skins */
body.page-Página_principal #content { border-top: 0; }
/* =========================
LINHA DE CTAs (imagens)
========================= */
/* Container centralizado */
.mw-parser-output .bro-cta-row {
display: flex;
justify-content: center; /* centraliza horizontalmente */
align-items: center;
gap: 18px; /* espaço entre as artes */
flex-wrap: wrap; /* quebra no mobile */
margin: 10px auto 0;
text-align: center;
}
/* Cartão clicável com relevo */
.mw-parser-output .bro-cta {
display: inline-block;
line-height: 0;
border-radius: 16px;
overflow: hidden; /* arredonda a própria imagem */
box-shadow: 0 6px 18px rgba(0,0,0,.18);
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
float: none !important; /* evita layout grudar na direita por CSS externo */
vertical-align: middle;
}
/* Garante que a imagem ocupe o bloco certinho */
.mw-parser-output .bro-cta a,
.mw-parser-output .bro-cta img { display: block; }
.mw-parser-output .bro-cta img {
width: 350px; /* padroniza o tamanho das três */
height: auto;
border-radius: 18px;
box-shadow: 0 8px 22px rgba(0,0,0,.16);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* Hover: leve zoom + relevo + um pouco mais de cor/luz */
.mw-parser-output .bro-cta:hover {
transform: translateY(-4px) scale(1.03);
box-shadow: 0 16px 34px rgba(0,0,0,.26);
}
.mw-parser-output .bro-cta:hover img {
filter: saturate(1.08) brightness(1.04);
}
/* Acessibilidade: foco via teclado também destaca */
.mw-parser-output .bro-cta a:focus-visible {
outline: 3px solid #FFD23C;
outline-offset: 4px;
border-radius: 16px;
}
/* Responsivo */
@media (max-width: 900px){
.mw-parser-output .bro-cta-row { gap: 14px; }
.mw-parser-output .bro-cta img { width: 300px; }
}
@media (max-width: 600px){
.mw-parser-output .bro-cta img { width: 260px; }
}