MediaWiki:Mobile.css

/* CSS colocados aquí afectará a los usuarios del sitio móvil */

/*** Estilos de tablas ***/

/*
Formatos generales de tablas:
* wiki: estándar
* lista: estándar + resaltado de fila al pasar el mouse, filas más juntas
* galeria: estándar + centrado + ancho mínimo de columna a 100px (sí y sólo si contiene encabezados)
 
Ejemplo de uso:
{| class="lista"
*/
 
table.wiki, table.lista, table.galeria {
	border-collapse:collapse;
	background:#f8f8ff;
	color:#000;
	margin-bottom:1.5em;
}
 
table.lista {
	font-size:95%;
	line-height:1.1em;
}
 
table.galeria {
	text-align:center;
	margin:auto;
}
 
table.wiki td, table.wiki th,
table.lista td, table.lista th,
table.galeria td, table.galeria th
	{ padding:2px; border:1px solid #88a; }
 
table.wiki caption, table.lista caption, table.galeria caption {
	line-height:1.1em;
/*	margin: 2px; --> Bug en Firefox? Si usamos {| class="lista" align="center" con caption, éste aparece alineado a la izquierda, sin importarle que la tabla quede en el centro. Usando padding no pasa. */
	padding:5px 2px;
}

/* Caja flexible */
.cajaflexible {
	display: flex; 
	flex-flow: row wrap;
	justify-content:center;
	margin:auto; 
	max-width: 1000px;
}

/* Para cambiar el tamaño de la etiqueta Poll */
.ajaxpoll {
	max-width: 400px;
	width: auto;
}
/* Ocultar el ID de encuesta de las encuestas */
.ajaxpoll-id-info { display:none; }

/* Separar la caja de comentarios de blog del texto si hay imágenes flotantes */
.comments-body {
	clear: both;
}


/* Aspecto de las galerías en artículos (etiqueta gallery) */
.gallerybox {
	background-color:#333;
	background: linear-gradient(to bottom, #00ced1 0%, #333333 100%);
	color:#fff;
	padding:4px 2px 4px 4px;
	margin:6px 7px 6px 0;
	border-radius:5px;
	box-shadow:2px 2px 5px #333;
}
 
.gallerybox .gallerytext a { color:#fec423; }

.gallerybox div.thumb {
	background:#ffffff  url('data:image/gif;base64,R0lGODdhBwAHAOMNAOHh4eLi4uTk5Ojo6Orq6u7u7vDw8PT09Pj4+Pr6+vz8/P39/f7+/v///////////ywAAAAABwAHAAAEFrDJSdGa7ISSZBKA0EnGQCjUoqDUFAEAOw==') repeat;
}
 
/* Aspecto de los thumbs */
div.thumbinner {
	border:0 !important;
	background-color:#333;
	background: linear-gradient(to bottom, #00ced1 0%, #333333 100%);
	color:#fff;
	padding:4px;
	margin:6px 7px 6px 0;
	border-radius:5px;
	box-shadow:2px 2px 5px #333;
}

.thumbinner a,.thumbinner a:visited,#bodyContent .thumbinner a.external { color:#fec423; }
 
.thumbinner .thumbcaption {
	font-size:95%;
	color:#fff;
}

/*[[Plantilla:Imagen pop-up]]*/
.imagenpopup .popup {display:none; speak:none;}

.imagenpopup .enlace a {color:#008000;}

.imagenpopup:hover .popup {
	background:transparent;
	padding:2em 1em 1em 2em;
	display:inline;
	position:absolute;
	margin-left:-200px;
	margin-top:-50px;
	z-index:10;
}

.imagenpopup .popup .thumb { border:none !important; }

@media only screen and (max-width: 720px) {
	/* Tabla flexible */
	.tfx, .tfx > tbody, .tfx > tbody > tr > th, .tfx > tbody > tr > td {
		display:block;  
	}
	.tfx .tfx-hid {
		display: none;
	}
	.tfx > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}
	.tfx > tbody > tr > th, .tfx > tbody > tr > td {
		flex: 1;
	}
	.tfx .tfx-fw {
		box-sizing: border-box;
		flex: 1 0 100%;
		max-width: 100%;
	}

	/* Forzar 100% para que no ocupe más */
	.createboxInput {
		width: 100%;
	}

	/* Para contrarrestar el width:100% !important de mobile, hacer que se tenga en cuenta desde el borde, para que el padding no lo saque de pantalla */
	.content table {
	    box-sizing: border-box;
	}
}

/* carrousel portada */
ul.gallery.mw-gallery-slideshow {
  margin: 0;
}

ul.gallery.mw-gallery-slideshow .thumb > div {
  margin: auto !important;
}
ul.gallery.mw-gallery-slideshow > li.gallerybox {
  display: block;
  margin: auto !important;
}

ul.gallery.mw-gallery-slideshow > li.gallerybox > div {
  max-width: 100%;
}

ul.gallery.mw-gallery-slideshow div {
  width: auto !important;
}

ul.gallery.mw-gallery-slideshow img {
  width: 100%;
  height: auto;
}

/* Títulos de pestañas de tabber */
.tabbertab:Before {
    content: attr(title);
    display: block;
    font-weight: bold;
    margin-top: 2em;
}