Estilos de plantilla:Diapositiva portada/estilos.css
De SmashPedia la enciclopedia de smash
Ir a la navegaciónIr a la búsqueda
.gallerycarousel {
font-size: 20pt;
}
.gallerycarousel .mw-gallery-slideshow-caption, .gallerycarousel .mw-gallery-slideshow-img-container {
text-align: center;
}
.gallerycarousel .mw-gallery-slideshow-img-container img {
width: auto !important;
height: auto !important;
object-fit: scale-down;
}
.gallerycarousel > div {
position: relative;
}
.gallerycarousel .mw-gallery-slideshow-buttons {
position: absolute !important;
top: 30%;
z-index: 10;
width: 100%;
height: 1px;
opacity: 0.1;
transition: opacity 1s;
}
.gallerycarousel:hover .mw-gallery-slideshow-buttons {
opacity: 1;
}
.gallerycarousel .mw-gallery-slideshow-buttons > div {
display: flex;
justify-content: space-between;
align-items: stretch;
height: 100%;
}
.gallerycarousel .mw-gallery-slideshow-buttons > div > span:nth-child(2) {
display: none;
}
.gallerycarousel .mw-gallery-slideshow-buttons > div > span {
display: block;
margin: 0 !important;
opacity: .8;
}
.gallerycarousel .mw-gallery-slideshow-buttons > div > span > a {
background: #fff;
}
ul.gallery.mw-gallery-slideshow {
display: flex;
/* wrap necesario para que el primer elemento ocupe todo el espacio antes de que cargue el JS */
flex-wrap: wrap;
margin: 0;
}
/* Cuando el JS carga y movemos gallerycarousel fuera, devolvemos el nowrap */
.gallerycarousel + ul.gallery.mw-gallery-slideshow {
flex-wrap: nowrap;
}
ul.gallery.mw-gallery-slideshow > li {
flex: 1 1;
display: block;
margin: 0 !important;
padding: 0 !important;
}
/* El JS de mw calcula dimensiones a partir de este elemento. Debe ocuparlo todo */
ul.gallery.mw-gallery-slideshow > li.gallerycarousel {
flex:1 0 100%;
}
ul.gallery.mw-gallery-slideshow > li.gallerybox > div {
max-width: 100%;
}
ul.gallery.mw-gallery-slideshow > li.gallerybox div {
width: auto !important;
}
ul.gallery.mw-gallery-slideshow > li.gallerybox .thumb > div {
margin:auto !important;
}
ul.gallery.mw-gallery-slideshow .gallerytext {
display: none;
}
ul.gallery.mw-gallery-slideshow img {
width: 100%;
height: auto;
}
@media only screen and (max-width: 720px) {
ul.gallery.mw-gallery-slideshow > li.gallerybox {
flex: auto;
}
ul.gallery.mw-gallery-slideshow .gallerytext {
display: block;
}
}