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 1: | Linha 1: | ||
/* ===== | /* ===== CTAs com <gallery> — bulletproof para várias versões do MW ===== */ | ||
/* | |||
.mw-parser-output .bro-cta-gallery { | /* 1) Transformar QUALQUER container do gallery em flex horizontal */ | ||
.mw-parser-output .bro-cta-gallery, | |||
.mw-parser-output .bro-cta-gallery .gallery, | |||
.mw-parser-output .bro-cta-gallery ul.gallery, | |||
.mw-parser-output .bro-cta-gallery .mw-gallery, | |||
.mw-parser-output .bro-cta-gallery .mw-gallery-packed, | |||
.mw-parser-output .bro-cta-gallery .mw-gallery-traditional, | |||
.mw-parser-output .bro-cta-gallery .mw-gallery-slideshow { | |||
display: flex !important; | display: flex !important; | ||
justify-content: center; | justify-content: center; | ||
| Linha 7: | Linha 14: | ||
gap: 24px; | gap: 24px; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
margin: 14px auto 0; | margin: 14px auto 0 !important; | ||
padding: 0; | padding: 0 !important; | ||
border: 0; | border: 0 !important; | ||
background: transparent; | background: transparent !important; | ||
} | } | ||
/* | /* 2) Neutralizar estilos que forçam empilhamento */ | ||
.mw-parser-output .bro-cta-gallery .gallerybox { | .mw-parser-output .bro-cta-gallery .gallerybox, | ||
width: auto !important; | .mw-parser-output .bro-cta-gallery li.gallerybox { | ||
float: none !important; | |||
width: auto !important; | |||
margin: 0 !important; | margin: 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
| Linha 21: | Linha 30: | ||
background: transparent !important; | background: transparent !important; | ||
box-shadow: none !important; | box-shadow: none !important; | ||
display: block !important; /* deixa o flex cuidar do layout */ | |||
vertical-align: middle !important; | |||
} | } | ||
.mw-parser-output .bro-cta-gallery .thumb { | .mw-parser-output .bro-cta-gallery .thumb, | ||
.mw-parser-output .bro-cta-gallery .thumbinner { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | border: 0 !important; | ||
background: transparent !important; | background: transparent !important; | ||
box-shadow: none !important; | box-shadow: none !important; | ||
} | } | ||
/* 3) Esconder legendas/magnify do gallery */ | |||
.mw-parser-output .bro-cta-gallery .gallerytext, | .mw-parser-output .bro-cta-gallery .gallerytext, | ||
.mw-parser-output .bro-cta-gallery .gallerycaption, | .mw-parser-output .bro-cta-gallery .gallerycaption, | ||
| Linha 35: | Linha 49: | ||
} | } | ||
/* | /* 4) Tamanho das imagens + zoom */ | ||
.mw-parser-output .bro-cta-gallery img { | .mw-parser-output .bro-cta-gallery img { | ||
display: block; | display: block; | ||
width: 320px; | width: 320px; /* desktop padrão */ | ||
height: auto; | height: auto; | ||
transition: transform .22s ease; | transition: transform .22s ease; | ||
| Linha 47: | Linha 61: | ||
} | } | ||
/* Responsivo */ | /* 5) Responsivo */ | ||
@media (max-width: 900px) { | @media (max-width: 900px){ | ||
.mw-parser-output .bro-cta-gallery { gap: 18px; } | .mw-parser-output .bro-cta-gallery { gap: 18px; } | ||
.mw-parser-output .bro-cta-gallery img { width: 280px; } | .mw-parser-output .bro-cta-gallery img { width: 280px; } | ||
} | } | ||
@media (max-width: 600px) { | @media (max-width: 600px){ | ||
.mw-parser-output .bro-cta-gallery img { width: 220px; } | .mw-parser-output .bro-cta-gallery img { width: 220px; } | ||
} | } | ||
Edição das 14h52min de 16 de outubro de 2025
/* ===== CTAs com <gallery> — bulletproof para várias versões do MW ===== */
/* 1) Transformar QUALQUER container do gallery em flex horizontal */
.mw-parser-output .bro-cta-gallery,
.mw-parser-output .bro-cta-gallery .gallery,
.mw-parser-output .bro-cta-gallery ul.gallery,
.mw-parser-output .bro-cta-gallery .mw-gallery,
.mw-parser-output .bro-cta-gallery .mw-gallery-packed,
.mw-parser-output .bro-cta-gallery .mw-gallery-traditional,
.mw-parser-output .bro-cta-gallery .mw-gallery-slideshow {
display: flex !important;
justify-content: center;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin: 14px auto 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* 2) Neutralizar estilos que forçam empilhamento */
.mw-parser-output .bro-cta-gallery .gallerybox,
.mw-parser-output .bro-cta-gallery li.gallerybox {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
display: block !important; /* deixa o flex cuidar do layout */
vertical-align: middle !important;
}
.mw-parser-output .bro-cta-gallery .thumb,
.mw-parser-output .bro-cta-gallery .thumbinner {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* 3) Esconder legendas/magnify do gallery */
.mw-parser-output .bro-cta-gallery .gallerytext,
.mw-parser-output .bro-cta-gallery .gallerycaption,
.mw-parser-output .bro-cta-gallery .magnify {
display: none !important;
}
/* 4) Tamanho das imagens + zoom */
.mw-parser-output .bro-cta-gallery img {
display: block;
width: 320px; /* desktop padrão */
height: auto;
transition: transform .22s ease;
transform-origin: center center;
}
.mw-parser-output .bro-cta-gallery .gallerybox:hover img {
transform: scale(1.06);
}
/* 5) Responsivo */
@media (max-width: 900px){
.mw-parser-output .bro-cta-gallery { gap: 18px; }
.mw-parser-output .bro-cta-gallery img { width: 280px; }
}
@media (max-width: 600px){
.mw-parser-output .bro-cta-gallery img { width: 220px; }
}