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;
	}
}