MediaWiki:Common.css
Revisión del 14:24 11 ene 2021 de David (discusión | contribuciones)
Nota: tras guardar, quizás necesites actualizar la caché de tu navegador para ver los cambios.
- Firefox/Safari: Mantén presionada la tecla Mayús mientras pulsas el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
- Google Chrome: presiona Ctrl+Shift+R (⌘+Mayús+R en Mac)
- Internet Explorer: mantén presionada Ctrl mientras pulsas Actualizar, o presiona Ctrl+F5
- Opera: dirígete a Menú → Configuración (Opera → Preferencias en Mac) y luego a Privacidad y seguridad → Borrar datos de navegación → Imágenes y archivos en caché.
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
/* Oculta título y categorías en la Portada */
body.page-Portada h1.firstHeading, body.page-Portada #catlinks-sidebar { display:none; }
/* Oculta artículos destacados de la versión móvil en la versión de escritorio */
/* Common.css no se tiene en cuenta en la versión móvil (Mobile.css) */
#destacados-movil {
display: none;
}
/* Cambia fuente de epígrafes */
.mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
font-family: 'Helvetica Neue','Nimbus Sans','Helvetica','Arial',sans-serif;
font-weight: bold;
}
.mw-body h1 {
font-size: 1.8em; /* Default: 2.0em */
font-family: 'Times New Roman',serif; /* Default: 'Linux Libertine' */
}
.mw-body h2 {
font-size: 1.5em; /* Default: 1.7em */
}
.mw-body h3 {
font-size: 1.35em; /* Default: 1.5em */
}
.mw-body h4 {
font-size: 1.25em; /* Default: 1.35em */
}
.mw-body h5 {
font-size: 1.2em; /* Default: 1.25em */
}
.mw-body h6 {
font-size: 1.15em; /* Default: 1.2em */
}
/* Oculta fecha de última modificacion en pie de páginas */
/*
#lastmod {
display:none;
}
*/
/* Responsive two column layout */
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
/* BEGIN Main Page carousel code */
.mf-mobile-only {
display: none;
}
.banner-image {
position: relative;
overflow: hidden;
max-width: 1125px;
height: auto;
margin-bottom: .6em;
}
.banner-image img {
max-width: 100%;
height: auto;
width: auto\9;
}
.banner-box {
position: absolute;
z-index: 2;
margin-top: 0.3em;
/* color: black; */
width: 50%;
min-width: 20em;
/* text-shadow: grey 0.1em 0.1em 0.3em, grey -0.05em -0.05em 0.5em; */
}
.banner-box-wide {
width: 80%
}
.banner-box-left {
left: 5%;
text-align: left;
}
.banner-box-right {
right: 5%;
text-align: right;
}
.banner-box-welcome {
left: 1em;
text-align: center;
width: 40%;
white-space: nowrap;
}
.banner-box a {
/* color: black !important; */
font-weight: bold;
}
.banner-box .name {
font-size: 2em;
white-space: nowrap;
line-height: 1.2em;
}
.banner-box .type {
font-size: 1.2em;
line-height: 1.5em;
}
.banner-box .stats {
font-size: 1em;
margin-top: 1.5em;
}
.banner-box .quote {
font-size: 100%;
line-height: 1.2em;
}
.banner-box .welcome a {
font-size: 1.5em;
}
.banner-box .welcome {
font-size: 2.1em;
}
.banner-box .nav-tip {
font-size: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.banner-box .welcome-map-nav {
font-size: 1.25em;
}
.banner-box ul {
font-size: 1.25em;
}
.banner-box ul li {
display: inline;
}
.banner-box ul li:before {
content: " • ";
}
.banner-box ul li:nth-of-type(1):before {
content: " ";
}
.jcarousel {
position: relative;
overflow: hidden;
}
.jcarousel-wrapper {
max-width: 1125px;
margin: 0;
position: relative;
}
.jcarousel .jcarousel-list {
width: 20000em;
position: relative;
margin: 0;
padding: 0;
}
.jcarousel .jcarousel-item {
float: left;
}
.jcarousel-item img {
display: block;
max-width: 100%;
height: auto !important;
}
.jcarousel-control-prev,
.jcarousel-control-next {
position: absolute;
top: 45%;
width: 30px;
height: 30px;
text-align: center;
background: #fff;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -15px;
}
.jcarousel-control-next {
right: -15px;
}
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
.jcarousel-pagination {
position: absolute;
bottom: 10px;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
/* END Main Page carousel code */
/**
* Styling for links generated by [[MediaWiki:Edittools]]
* @source https://www.mediawiki.org/wiki/Extension:CharInsert#Styling
* @updated 2012-02-29
*/
.mw-charinsert-buttons {
margin-top: 10px;
border: 1px solid #aaaaaa;
padding: 1px;
text-align: center;
font-size: 110%;
}
.mw-charinsert-buttons a {
color: black;
background-color: #cde !important;
font-weight: bold;
font-size: .9em;
text-decoration: none;
border: thin #069 outset;
padding: 0 .1em .1em;
}
.mw-charinsert-buttons a:hover,
.mw-charinsert-buttons a:active {
background-color: #bcd;
border-style: inset;
}
.client-js .mw-edittools-section {
display: inline;
}
.client-js .mw-edittools-section input[type="button"] {
font-size: 0.9em;
padding-left: 1px;
padding-right: 1px;
margin-left: 1px;
}
.mainpage-shadowbox {
color: white;
background: rgb(16,16,16);
background: rgba(0,0,0,0.3);
border-radius: 4px;
}
.mainpage-shadowbox h2, .mainpage-shadowbox h3 {
color: white;
border:none;
font-family: sans-serif;
line-height: 1.2em;
margin:0;
padding: 0; /* was previously set only for h3, and skin styles would do the same for h2. however, cannot rely on skin to do this on mobile */
}
.mainpage-shadowbox a {
color: white;
font-weight: bold;
}
.banner-image {
position: relative;
max-width: 1125px;
height: auto;
margin-bottom: .6em;
}
.banner-image img {
max-width: 100%;
height: auto;
/* width: auto\9; */ /* ie8 */
}
.banner-box-wide {
width: 80%
}
.banner-box-left,
.banner-box-right {
padding: 8px 7px;
background: rgb(16,16,16);
background: rgba(0,0,0,0.3);
border-radius: 4px;
width: 40%;
}
.banner-box-left { text-align: left; }
.banner-box-right { text-align: right; }
.banner-box-2 {
position: absolute;
z-index: 2;
min-width: 20em;
}
@media screen and ( min-width: 720px ) { /* greater than or equal to */
.banner-image img.nolink { display: none; }
.mainpage-shadowbox h2 {
font-size: 190%;
}
.mainpage-shadowbox h3 {
font-size: 150%;
}
.banner-image {
overflow: hidden;
}
.banner-box-left {
left: 3%;
}
.banner-box-right {
right: 3%;
}
.banner-box-2 {
margin-top: 2em;
}
.banner-box-2 .quote {
font-size: 80%;
line-height: 1.2em;
}
}
@media screen and ( max-width: 720px ) {
.banner-image img:not(.nolink) { display: none; }
.banner-image > .mainpage-shadowbox {
width: inherit !important;
min-height: 100%;
margin-left: -150%;
margin-right: 150%;
opacity: 0;
background: black;
}
.mainpage-shadowbox .quote > a:after {
content: '\ATap to learn more.';
white-space: pre; /* needed to make content work. if content is disabled, this can be, too */
}
.jcarousel-item:hover .mainpage-shadowbox {
margin: unset;
opacity: 1;
transition: margin 0.5s; /* without this, problem with tap on image still activating links - speed may matter here */
bottom: 50%; /* relative vertical position; change to top to lower, negative percentages do not work as naively expected */
}
.jcarousel-control-prev, .jcarousel-control-next {
display: none;
/* hide the carousel arrows */
/* a kludge resulting from gadgets not working on mobile */
/* unforunately also targets very narrow desktops, but there can't be too many of those */
/* and besides, the number buttons still work */
}
.interactiveIcon {
position: absolute;
opacity: 0.4;
height: 75% !important;
width: auto;
bottom: 0;
right: 0;
}
}
/*Actualidad*/
.contenedorImg{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.contenedorImg figure{
position:relative;
height: 250px;
cursor: pointer;
width: 350px;
overflow: hidden;
border-radius: 6px;
box-shadow: 0px 15px 25px rgba(0,0,0,0.50);
}
.contenedorImg figure img{
width: 100%;
height: 100%;
transition: all 500ms ease-out;
}
.contenedorImg figure .capa{
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,103,123,0.7);
transition: all 500ms ease-out;
opacity: 0;
visibility: hidden;
text-align: center;
}
.contenedorImg figure:hover > .capa {
opacity: 1;
visibility: visible;
}
.contenedorImg figure:hover > .capa h3{
margin-top: 70px;
margin-bottom: 15px;
}
.contenedorImg figure:hover > img{
transform: scale(1.3);
}
.contenedorImg figure .capa h3{
color: #fff;
font-weight: 400;
margin-bottom: 120px;
transition: all 500ms ease-out;
margin-top: 30px;
}
.contenedorImg figure .capa p{
color: #fff;
font-size: 15px;
line-height: 1.5;
width: 100%;
max-width: 220px;
margin: auto;
}
/* Estilos de [[Plantilla:Portada:Categorías]]*/
.contenido-caja {
height:100%;
width:100%;
position:absolute;
transition:1s;
opacity:0;
padding:5% 3% 5%;
z-index:100;
white-space:nowrap;
overflow:hidden;
}
.contenido-caja:hover {
opacity:0.8;
}
.contenido-caja:hover + .titulo-caja {
transform: translate(20%,-30%);
opacity: 0;
}
.titulo-caja {
transition:1s;
margin:10%;
z-index:0;
font-size:150%;
}