Diferencia entre revisiones de «MediaWiki:Common.css»
Sin resumen de edición Etiqueta: Revertido |
Sin resumen de edición Etiqueta: Revertido |
||
| Línea 725: | Línea 725: | ||
} | } | ||
/* Suppress numbering of items in TOC */ | /* Suppress numbering of items in TOC */ | ||
Revisión del 12:44 26 ene 2020
/* El CSS colocado en esta página sera aplicado a todas las pieles (skins) */
/***************************************************************
* CSS VARIOS
***************************************************************/
/* Ocultar título, categorías y fecha de la última edición en la Portada */
/* La visualización de la fecha de última modificación puede llevar a malinterpretaciones, puesto que la portada en sí no es actualizada, sino sus plantillas auxiliares */
body.page-Página_principal h1.firstHeading,
body.page-Página_principal h1.pagetitle,
body.page-Página_principal p.subtitle,
body.page-Página_principal #catlinks,
body.page-Página_principal #footer-info-lastmod {
display:none;
}
/* Fix problem with banner overlay */
div.toctitle {display:none;}
/***************************************************************
* REFERENCIAS Y NOTAS
***************************************************************/
/* Tamaño fuente de referencias */
ol.references,
div.listaref,
div.refcomienza {
font-size: 90%; /* Default font-size */
margin-bottom: 0.5em;
}
div.listaref ol.references {
font-size: 100%; /* Reset font-size when nested in div.listaref */
list-style-type: inherit; /* Enable custom list style types */
}
/* Colorea de azul al clickear referencias */
ol.references > li:target,
sup.reference:target,
span.citation:target, cite:target {
background-color: #DEF;
}
/* Las referencias ahora no pueden ser texto en negrita o italico */
sup.reference {
font-weight: normal;
font-style: normal;
}
/* Estilo para citacion */
.citation {
word-wrap: break-word;
}
/* For linked citation numbers and document IDs, where
the number need not be shown on a screen or a handheld,
but should be included in the printed version */
@media screen, handheld {
.citation *.printonly {
display: none;
}
}
/* Llamadas al pie: Quitar corchetes */
.corchete-llamada {display: none}
/***************************************************************
* INFOBOXES
***************************************************************/
/* CSS para infoboxes */
.infobox {
border: 1px solid #aaa;
background-color: #f9f9f9;
color: #000;
margin-bottom: 0.7em;
margin-left: 1.2em;
padding: 0.2em;
float: right;
clear: right;
}
.infobox td, .infobox th,
.infobox_v2 td, .infobox_v2 th {
vertical-align: top;
}
.infobox caption {
font-size: larger;
margin-left: inherit;
}
/* ===== infoboxes V2 ("nuevas") ==== */
.infobox_v2 {
border: 1px solid #B4BBC8;
background-color: #f9f9f9;
color: #000;
margin: .5em 0 .7em 1.2em;
padding: .4em;
clear: right;
float: right;
font-size: 90%;
line-height: 1.5em;
width: 22.5em
}
.infobox_v2 .cabecera {
font-size: 140%;
font-weight: bolder;
height: 45px;
line-height: 1.2em;
text-align: center;
vertical-align: middle
}
.infobox_v2 .media {
font-weight: bolder;
height: 35px;
text-align: center;
vertical-align: middle
}
/* Códigos para tipos especificos de infoboxes */
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #B4BBC8;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
.infobox.sisterproject {
width: 20em;
font-size: 90%;
}
.infobox.geography,
.infobox_v2.geography {
text-align: left;
border-collapse: collapse;
line-height: 1.2em;
font-size: 90%;
border: solid 1px #B4BBC8;
}
.infobox.geography td,
.infobox.geography th,
.infobox_v2.geography td,
.infobox_v2.geography th {
border-top: solid 1px #B4BBC8;
padding: .4em .6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th,
.infobox_v2.geography .mergedtoprow td,
.infobox_v2.geography .mergedtoprow th {
border-top: solid 1px #B4BBC8;
padding: .4em .6em .2em .6em;
}
.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th,
.infobox_v2.geography .mergedrow td,
.infobox_v2.geography .mergedrow td {
border: 0;
padding: 0 .6em .2em .6em;
}
.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th,
.infobox_v2.geography .mergedbottomrow td,
.infobox_v2.geography .mergedbottomrow th {
border-top: 0;
border-bottom: solid 1px #B4BBC8;
padding: 0 .6em .4em .6em;
}
.infobox.geography .maptable td,
.infobox.geography .maptable th,
.infobox_v2.geography .maptable td,
.infobox_v2.geography .maptable th {
border: 0;
padding: 0;
}
/* Gráficos transparentes de cabecera */
.cabecera.default {}
/***************************************************************
* LISTAS HORIZONTALES
***************************************************************/
/* Style for horizontal lists (separator following item).
Note: hlist formatting will break if the resulting HTML lacks a breakable character
between list items. This happens when the following conditions are true:
1) The list is made using wiki markup (where HTML is built by parser.php)
2) HTMLTidy is disabled or unavailable (such as on Special: pages)
In such cases, building lists with .hlist using HTML instead of wiki markup
will work around this problem. See also [[Bugzilla:39617]].
Maintainer: [[User:Edokter]]
Revision: 2.0
Last updated: September 23, 2012
*/
.skin-monobook .hlist dl,
.skin-modern .hlist dl,
.skin-vector .hlist dl {
line-height: 1.5em;
}
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline and make them nowrap */
.hlist dd,
.hlist dt,
.hlist li {
margin: 0;
display: inline;
white-space: nowrap;
}
/* Display nested lists inline and allow them to wrap */
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
white-space: normal;
}
/* Generate interpuncts */
.hlist dt:after {
content: ":";
}
.hlist dd:after,
.hlist li:after {
content: " ·";
font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
content: "(";
font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
content: ")";
font-weight: normal;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
content: ")";
font-weight: normal;
}
/* Put numbers in front of ordered list items */
.hlist.hnum ol {
counter-reset: list-item;
}
.hlist.hnum ol > li {
counter-increment: list-item;
}
.hlist.hnum ol > li:before {
content: counter(list-item) " ";
}
.hlist.hnum dd ol > li:first-child:before,
.hlist.hnum dt ol > li:first-child:before,
.hlist.hnum li ol > li:first-child:before {
content: "(" counter(list-item) " ";
}
/* Unbulleted lists */
.plainlist ul {
line-height: inherit;
list-style: none none;
margin: 0;
}
.plainlist ul li {
margin-bottom: 0;
}
/* Definición para imágenes y otros elementos flotantes */
div.floatright {
float: right;
clear: right;
position: relative;
margin: 0.2em 0 0.8em 1.4em;
}
div.floatleft {
float: left;
clear: left;
position: relative;
margin: 0.2em 1.4em 0.8em 0;
}
/***************************************************************
* CAJAS DE NAVEGACIÓN
***************************************************************/
/* Default style for navigation boxes */
table.navbox { /* Navbox container style */
border: 1px solid #aaa;
width: 100%;
margin: auto;
clear: both;
font-size: 88%;
text-align: center;
padding: 1px;
}
table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */
margin-top: -1px; /* (doesn't work for IE6, but that's okay) */
}
.navbox th,
.navbox-title,
.navbox-abovebelow {
text-align: center; /* Title and above/below styles */
padding-left: 1em;
padding-right: 1em;
}
th.navbox-group { /* Group style */
white-space: nowrap;
/* @noflip */
text-align: right;
}
.navbox,
.navbox-subgroup {
background: #fdfdfd; /* Background color */
}
.navbox-list {
border-color: #fdfdfd; /* Must match background color */
}
.navbox th,
.navbox-title {
background: #ccccff; /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
background: #ddddff; /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: #e6e6ff; /* Level 3 color */
}
.navbox-even {
background: #f7f7f7; /* Even row striping */
}
.navbox-odd {
background: transparent; /* Odd row striping */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
white-space: nowrap; /* Nowrap list items in navboxes */
white-space: normal !ie; /* IE < 8 no-wraps entire list, so disable it */
}
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
white-space: normal; /* But allow parent list items to be wrapped */
}
ol + table.navbox,
ul + table.navbox {
margin-top: 0.5em; /* Prevent lists from clinging to navboxes */
}/* Default styling for Navbar template */
.navbar {
display: inline;
font-size: 88%;
font-weight: normal;
}
.navbar ul {
display: inline;
white-space: nowrap;
}
.navbar li {
word-spacing: -0.125em;
}
/* Navbar styling when nested in navbox */
.navbox .navbar {
display: block;
font-size: 100%;
}
.navbox-title .navbar {
/* @noflip */
float: left;
/* @noflip */
text-align: left;
/* @noflip */
margin-right: 0.5em;
width: 6em;
}
/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
/* @noflip */
float: right;
font-weight: normal;
/* @noflip */
margin-left: 0.5em;
/* @noflip */
text-align: right;
width: auto;
}
/* In navboxes, the show/hide button balances the v·d·e links
from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
width: 6em;
}
/***************************************************************
* COORDENADAS
***************************************************************/
/* CSS relacionado con el uso de coordenadas
To display coordinates using the notation in the source code, write this in your User:Username/monobook.css:
.geo-default {display: inline} .geo-nondefault {display: none}
.geo-dec {display: inline} .geo-dms {display: inline}
To display coordinates using decimal notation, write this in your User:Username/monobook.css:
.geo-default {display: inline} .geo-nondefault {display: inline}
.geo-dec {display: inline} .geo-dms {display: none}
To display coordinates using DMS notation, write this in your User:Username/monobook.css:
.geo-default {display: inline} .geo-nondefault {display: inline}
.geo-dec {display: none} .geo-dms {display: inline}
To display coordinates in both decimal and DMS notation, write this in your User:Username/monobook.css:
.geo-default {display: inline} .geo-nondefault {display: inline}
.geo-dec {display: inline} .geo-dms {display: inline}
.geo-multi-punct {display: inline}
See [[Plantilla:Coor link]] for how these are used.
Note that the classes "geo", "longitude", and "latitude" are not just styles but also used by the [[Geo microformat]], so the names should not be changed.
*/
/* CSS predeterminado, puede modificarse usando las reglas de arriba */
.geo-default, .geo-dms, .geo-dec { display: inline; }
.geo-nondefault, .geo-multi-punct { display: none; }
.longitude, .latitude { white-space: nowrap; }
/* This is used for the Geo microformat, but no style is needed for now other than .geo-dec. */
.geo {}
/* Plantilla de cita */
.citado {
font-size: 90%;
background-color: #F9F9F9;
padding: 5px 10px;
}
/* Estilos para sitenotice y similares */
.notice {
text-align: justify;
margin: 1em;
padding: 0.2em;
}
/* Prevent floating boxes from overlapping any category listings,
file histories, edit previews, and edit [Show changes] views */
#mw-subcategories, #mw-pages, #mw-category-media,
#filehistory, #wikiPreview, #wikiDiff {
clear: both;
}
/*InterProject */
.interProject {
display:none;
clear: both;
border-top: 2px dotted #aaa;
margin-top: 2em;
}
/* Hatnotes and disambiguation notices */
.rellink,
.dablink {
font-style: italic;
/* @noflip */
padding-left: 1.6em;
margin-bottom: 0.5em;
}
.rellink i,
.dablink i {
font-style: normal;
}
/* TABLAS */
/* Normal font styling for table row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row] {
font-weight: normal;
/* @noflip */
text-align: left;
}
/* lists in data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
/* @noflip */
text-align: left;
}
/* Tablas alineadas a la izquierda (class="wikitable left") */
.wikitable.left,
.toccolours.left {
margin: 1em 1.3em 1em 0;
float: left;
clear: left;
}
/* Tablas alineadas a la derecha (class="wikitable right") */
.wikitable.right,
.toccolours.right {
margin: 1em 0 1em 1.3em;
float: right;
clear: right;
}
/** Cajas de aviso son blancas y con
* una cinta de color en la parte superior */
table.ambox {
margin: 0 10%;
border-collapse: collapse;
background-color: #fbfbfb;
border-bottom: 1px solid #aaa;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
font-size: 95%;
}
table.ambox th.ambox-text, table.ambox td.ambox-text {
padding: 0.25em 0.5em; /* 0.5em left/right */
width: 100%; /* Make all templates the same width regardless of text size */
}
table.ambox td.ambox-image {
padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
text-align: center;
}
table.ambox td.ambox-imageright {
padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */
text-align: center;
}
table.ambox-notice {border-top: 5px solid #608EC2} /* Azul */
table.ambox-protection {border-top: 5px solid #bba} /* Gris */
table.ambox-delete,
table.ambox-serious {border-top: 5px solid #b22222} /* Rojo */
table.ambox-content {border-top: 5px solid #f28500} /* Naranja */
table.ambox-style {border-top: 5px solid #f4c430} /* Amarillo */
table.ambox-merge {border-top: 5px solid #8c08a4} /* Purpura */
table.ambox-growth {border-top: 5px solid #47a30d} /* Verde */
table.ambox.ambox-mini { /* Versión pequeña flotante */
float: right;
clear: right;
margin: 0 0 0 1em;
width: 25%;
}
/* Ciertas cajas para discusión que NO son ambox (no tienen cinta de color)
por ejemplo, la caja grande de artículo destacado */
.messagebox {
border: 1px solid #aaa;
background-color: #f9f9f9;
width: 80%;
margin: 0 auto 1em auto;
padding: .2em;
}
.messagebox.merge {
border: 1px solid #c0b8cc;
background-color: #f0e5ff;
text-align: center;
}
.messagebox.cleanup {
border: 1px solid #9f9fff;
background-color: #efefff;
text-align: center;
}
.messagebox.standard-talk {
border: 1px solid #c0c090;
background-color: #f8eaba;
margin: 4px auto;
}
/** Estilos para tablas.
la idea es, si se quiere que la primera columna de la tabla esté alineada
a la derecha, la segunda centrada y la tercera a la izquierda, usar
{| class="col1der col2cen col3izq"
en vez de repetir "style='text-align:right'", etc, en '''cada''' celda
Esto sólo se usa en Medallero. Debería divulgarse para aprovecharlo en más lugares
**/
table.col1der TD:first-child {text-align:right}
table.col1izq TD:first-child {text-align:left}
table.col1cen TD:first-child {text-align:center}
table.col2der TD:first-child + TD {text-align:right}
table.col2izq TD:first-child + TD {text-align:left}
table.col2cen TD:first-child + TD {text-align:center}
table.col3der TD:first-child + TD + TD {text-align:right}
table.col3izq TD:first-child + TD + TD {text-align:left}
table.col3cen TD:first-child + TD + TD {text-align:center}
table.col4der TD:first-child + TD + TD + TD {text-align:right}
table.col4izq TD:first-child + TD + TD + TD {text-align:left}
table.col4cen TD:first-child + TD + TD + TD {text-align:center}
table.col5der TD:first-child + TD + TD + TD + TD {text-align:right}
table.col5izq TD:first-child + TD + TD + TD + TD {text-align:left}
table.col5cen TD:first-child + TD + TD + TD + TD {text-align:center}
table.col6der TD:first-child + TD + TD + TD + TD + TD {text-align:right}
table.col6izq TD:first-child + TD + TD + TD + TD + TD {text-align:left}
table.col6cen TD:first-child + TD + TD + TD + TD + TD {text-align:center}
/* The backgrounds for galleries. */
div#content .gallerybox div.thumb {
background-color: #F9F9F9; /* Light gray padding */
}
/* Put a chequered background behind images, only visible if they have transparency */
.gallerybox .thumb img {
/* @embed */
background: white url("//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat;
}
/* But not on articles, user pages, portals or with opt-out. */
.ns-0 .gallerybox .thumb img,
.ns-2 .gallerybox .thumb img,
.ns-100 .gallerybox .thumb img,
.nochecker .gallerybox .thumb img {
background: white;
}
.abbr {/* al estilo de la etiquieta <abbr> */
cursor: help;
border-bottom: 1px dotted #000;
}
/* Aviso en espacios de trabajo de usuarios */
body.ns-2 div#contentSub > span.subpages:before,
body.ns-3 div#contentSub > span.subpages:before {
content: " ¡Atención! Este no es un artículo, sino un espacio de trabajo personal. ";
background: #fe9;
border: 2px solid #f0c91f;
display: block;
text-align: center;
color: maroon;
margin-bottom: 2mm;
line-height: 120%;
}
/* Estilo para las etiquetas del filtro de edición */
.mw-tag-marker {
font-family:sans-serif;
font-style:italic;
font-size:90%;
background-color:#FFE599;
}
/* Estilo para los avisos de los filtros antiabusos */
.aviso_filtro {
border: 1px solid #848484;
margin: 19px 14px 19px 14px;
padding: 0.8em 1.2em 0.8em 1.2em;
}
/* El vandalismo debe ser particularmente distinguible */
.mw-tag-marker-posible_vandalismo, .mw-tag-marker-botspam {
background-color:#FEC29C;
}
/* Allow limiting of which header levels are shown in a TOC;
<div class="toclimit-3">, for instance, will limit to
showing ==headings== and ===headings=== but no further
(as long as there are no =headings= on the page, which
there shouldn't be according to the MoS).
*/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}
/* Prevent line breaks in silly places:
1) Where desired
2) Links when we don't want them to
3) Bold "links" to the page itself
4) HTML formulae
5) Ref tags with group names <ref group="Note"> --> "[Note 1]"
*/
.nowrap,
.nowraplinks a,
.nowraplinks .selflink,
span.texhtml,
sup.reference a {
white-space: nowrap;
}
/* Suppress numbering of items in TOC */
.tocnumber { display: none; }
/* Main page */
.portal-column-left {
width: 40%;
text-align: center;
}
/* Coding for new Main Page */
.articleState {
width: 60%;
background: #fff;
margin: 0 auto;
border: solid 2px lightblue;
text-align: center;
}
.routeBox {
font-size: small;
border-style: none;
border-spacing: 0 0;
border-collapse: collapse;
margin: 0 auto;
}
.routeBox td {
padding: 1px 2px;
}
#geoCoord table, #geoCoordOld table {
border-collapse: collapse;
background: transparent;
}
#geoCoord td, #geoCoordOld td {
font-size: 0.9em;
line-height: 100%;
vertical-align: middle;
padding: 0 0 0 10px;
text-align: right;
border-left: 1px solid #88a;
}
#geoCoord td.icon, #geoCoordOld td.icon {
border-left: none;
height: 27px;
width: 35px;
padding: 0 10px 0 0;
}
/* Coding for new Main Page END */
/* Hide title on Main Page */
body.page-Main_Page h1.firstHeading {
display: none;
}
/* Travellers' pub TOC, widen */
body.page-Wikivoyage_Travellers_pub div#toctitle {
width:30em;
}
#mobileworld img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* Mark's template version of the new main page */
.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: 2.5em;
color: white;
width: 50%;
min-width: 20em;
text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em;
}
.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: white !important;
font-weight: bold;
}
.banner-box .name {
font-size: 3em;
white-space: nowrap;
line-height: 1.2em;
}
.banner-box .type {
font-size: 2em;
line-height: 1.2em;
}
.banner-box .stats {
font-size: 1em;
margin-top: 1.7em;
}
.banner-box .quote {
font-size: 1em;
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: " ";
}
#toc > tbody > tr > td > ul, #toc > tr > td > ul {
padding-left: 2em;
}
#toc > ul {padding-left: 2em;}
/* Style for hlist class - pulled from Wikipedia's Common.css file on 20 Mar 2013
Style for horizontal lists (separator following item).
Note: hlist formatting will break if the resulting HTML lacks a breakable character
between list items. This happens when the following conditions are true:
1) The list is made using wiki markup (where HTML is built by parser.php)
2) HTMLTidy is disabled or unavailable (such as on Special: pages)
In such cases, building lists with .hlist using HTML instead of wiki markup
will work around this problem. See also [[Bugzilla:39617]].
IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].
Last updated: January 24, 2013
@source mediawiki.org/wiki/Snippets/Horizontal_lists
@maintainer: [[User:Edokter]]
@revision: 3.1
*/
.skin-monobook .hlist dl,
.skin-modern .hlist dl,
.skin-vector .hlist dl {
line-height: 1.1em;
}
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
line-height: 1.1em;
}
/* Display list items inline and make them nowrap */
.hlist dd,
.hlist dt,
.hlist li {
display: inline;
white-space: nowrap;
}
/* Allow wrapping for list items (in tight spaces) */
.hlist.hwrap dd,
.hlist.hwrap dt,
.hlist.hwrap li {
white-space: normal;
}
/* Display nested lists inline and allow them to wrap */
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
white-space: normal;
}
/* Generate interpuncts */
.hlist dt:after {
content: ":";
}
.hlist dd:after,
.hlist li:after {
content: " ·";
font-weight: bold;
padding: 0 0.3em;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
content: "(";
font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
content: ")";
font-weight: normal;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
content: ")";
font-weight: normal;
}
/* allow ToC to stretch across screen when it is part of a horizontal list, change background and font colours */
.hlist #toc.tocFloat {
width: 100%;
max-width: 170em;
color: black;
}
.hlist.tocbox-s #toc.tocFloat {
width: 100%;
max-width: 170em;
margin: 0;
padding: 0;
line-height: 1.1em;
color: black;
background-color: #e0e0e0;
}
.hlist.tocbox-b #toc.tocFloat {
width: 100%;
max-width: 170em;
margin: 0;
padding: 0;
line-height: 1.1em;
color: white;
background: rgb(16,16,16);
background: rgba(0,0,0,0.5);
border: none;
}
.hlist.tocbox-w #toc.tocFloat {
width: 100%;
max-width: 170em;
margin: 0;
padding: 0;
line-height: 1.1em;
color: black;
background: rgb(225,225,225);
background: rgba(160,160,160,0.6);
border: none;
}
.hlist #toc table,
.hlist #toc tr,
.hlist #toc td, {
margin: 0;
padding: 0;
line-height: 1.1em;
}
/* links in the horizontal ToC should be black... */
.hlist #toc a {
color: black;
font-size: 0.85em;
font-weight: bold;
}
/* ... except when the ToC box is black ... */
.hlist.tocbox-b #toc a {
color: white;
font-size: 0.85em;
font-weight: bold;
}
/* ... or except when being hovered over */
.hlist #toc.tocFloat a:hover {
color: #bdddfd;
}
/* don't display ToC title when in horizontal ToC */
.hlist #toctitle {
display: none;
}
.mf-mobile-only {
display: none;
}
/* Prevent display of subheadings in horizontal ToC */
.hlist #toc .toclevel-2,
.hlist #toc .toclevel-3,
.hlist #toc .toclevel-4,
.hlist #toc .toclevel-5,
.hlist #toc .toclevel-6 {
display: none;
}
.hlist .toggleNode {
display: none;
}
/* Infobox templates */
.infobox {
border: 1px solid #aaa;
background-color: #f9f9f9;
color: black;
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
float: right;
clear: right;
}
.infobox td,
.infobox th {
vertical-align: middle;
}
.infobox caption {
font-size: larger;
margin-left: inherit;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0 solid #aaa;
}
.infobox.sisterproject {
width: 20em;
font-size: 90%;
}
.archive-box {
border: 1px solid #aaf;
background-color: #f2f2f9;
color: #000;
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
float: right;
clear: right;
text-align: center;
}
/* CSS for black text external links / blue text on hover */
body.ns-0 a.external,
body.ns-0 a.external:visited,
body.page-Wikivoyage_External_links a.external,
body.page-Wikivoyage_External_links a.external:visited,
body.page-Wikivoyage_talk_External_links a.external,
body.page-Wikivoyage_talk_External_links a.external:visited,
body.page-Wikivoyage_Listings a.external,
body.page-Wikivoyage_Listings a.external:visited,
body.page-Wikivoyage_talk_Listings a.external,
body.page-Wikivoyage_talk_Listings a.external:visited,
body.page-Wikivoyage_Attraction_listings a.external,
body.page-Wikivoyage_Attraction_listings a.external:visited,
body.page-Wikivoyage_talk_Attraction_listings a.external,
body.page-Wikivoyage_talk_Attraction_listings a.external:visited,
body.page-Wikivoyage_Activity_listings a.external,
body.page-Wikivoyage_Activity_listings a.external:visited,
body.page-Wikivoyage_talk_Activity_listings a.external,
body.page-Wikivoyage_talk_Activity_listings a.external:visited,
body.page-Wikivoyage_Restaurant_listings a.external,
body.page-Wikivoyage_Restaurant_listings a.external:visited,
body.page-Wikivoyage_talk_Restaurant_listings a.external,
body.page-Wikivoyage_talk_Restaurant_listings a.external:visited,
body.page-Wikivoyage_Bar_listings a.external,
body.page-Wikivoyage_Bar_listings a.external:visited,
body.page-Wikivoyage_talk_Bar_listings a.external,
body.page-Wikivoyage_talk_Bar_listings a.external:visited,
body.page-Wikivoyage_Shopping_listings a.external,
body.page-Wikivoyage_Shopping_listings a.external:visited,
body.page-Wikivoyage_talk_Shopping_listings a.external,
body.page-Wikivoyage_talk_Shopping_listings a.external:visited,
body.page-Wikivoyage_Accommodation_listings a.external,
body.page-Wikivoyage_Accommodation_listings a.external:visited,
body.page-Wikivoyage_talk_Accommodation_listings a.external,
body.page-Wikivoyage_talk_Accommodation_listings a.external:visited,
body.page-Wikivoyage_Don_t_tout a.external,
body.page-Wikivoyage_Don_t_tout a.external:visited
{
color: black;
}
body.ns-0 a.external:hover,
body.ns-0 a.external:focus,
body.page-Wikivoyage_External_links a.external:hover,
body.page-Wikivoyage_External_links a.external:focus,
body.page-Wikivoyage_talk_External_links a.external:hover,
body.page-Wikivoyage_talk_External_links a.external:focus,
body.page-Wikivoyage_Listings a.external:hover,
body.page-Wikivoyage_Listings a.external:focus,
body.page-Wikivoyage_talk_Listings a.external:hover,
body.page-Wikivoyage_talk_Listings a.external:focus,
body.page-Wikivoyage_Attraction_listings a.external:hover,
body.page-Wikivoyage_Attraction_listings a.external:focus,
body.page-Wikivoyage_talk_Attraction_listings a.external:hover,
body.page-Wikivoyage_talk_Attraction_listings a.external:focus,
body.page-Wikivoyage_Activity_listings a.external:hover,
body.page-Wikivoyage_Activity_listings a.external:focus,
body.page-Wikivoyage_talk_Activity_listings a.external:hover,
body.page-Wikivoyage_talk_Activity_listings a.external:focus,
body.page-Wikivoyage_Shopping_listings a.external:hover,
body.page-Wikivoyage_Shopping_listings a.external:focus,
body.page-Wikivoyage_talk_Shopping_listings a.external:hover,
body.page-Wikivoyage_talk_Shopping_listings a.external:focus,
body.page-Wikivoyage_Restaurant_listings a.external:hover,
body.page-Wikivoyage_Restaurant_listings a.external:focus,
body.page-Wikivoyage_talk_Restaurant_listings a.external:hover,
body.page-Wikivoyage_talk_Restaurant_listings a.external:focus,
body.page-Wikivoyage_Bar_listings a.external:hover,
body.page-Wikivoyage_Bar_listings a.external:focus,
body.page-Wikivoyage_talk_Bar_listings a.external:hover,
body.page-Wikivoyage_talk_Bar_listings a.external:focus,
body.page-Wikivoyage_Accommodation_listings a.external:hover,
body.page-Wikivoyage_Accommodation_listings a.external:focus,
body.page-Wikivoyage_talk_Accommodation_listings a.external:hover,
body.page-Wikivoyage_talk_Accommodation_listings a.external:focus,
body.page-Wikivoyage_Don_t_tout a.external:hover,
body.page-Wikivoyage_Don_t_tout a.external:focus
{
color: #0645ad;
}
/*Carousel*/
.carousel{
overflow:hidden;
width:100%;
padding:0
}
.panes{
list-style:none;
position:relative;
padding: 0;
margin-left: 0;
width:300%; /* Number of panes * 100% */
overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
}
.carousel .floatright {
position: absolute;
z-index: 1000;
right: 0px;
top: 50%
}
.carousel .floatleft {
position: absolute;
z-index: 1000;
top: 50%;
margin-left: 20px;
}
.panes > li{
position:relative;
float:left;
padding: 0;
margin-left: 0;
width:33.333333333333333333333333333333333%; /* 100 / number of panes */
}
.carousel img{
display:block;
width:100%;
max-width:100%;
}
.carousel h2{
font-size:1em;
padding: 8px 7px;
position:absolute;
border:0px;
top:5em;
text-align:left;
max-width: 300px;
color:#fff;
background-color:rgba(0,0,0,0.5);
}
@keyframes carousel{
0% { left:-1.7%; }
12.5% { left:-1.7%; }
25% { left:-101.7%; }
37.5% { left:-101.7%; }
50% { left:-201.7%; }
62.5% { left:-201.7%; }
75% { left:-101.7%; }
87.5% { left:-101.7%; }
100% { left:-1.7%; }
}
/* Safari and Chrome */
@-webkit-keyframes carousel{
0% { left:-1.7%; }
12.5% { left:-1.7%; }
25% { left:-101.7%; }
37.5% { left:-101.7%; }
50% { left:-201.7%; }
62.5% { left:-201.7%; }
75% { left:-101.7%; }
87.5% { left:-101.7%; }
100% { left:-1.7%; }
}
/* Fade in arrows */
.greydout {
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.greydout:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=50);
opacity: 1;
}
/* END User:Nicholasjf21/MainPage2 test code */
/* Corrección de error en tabla de contenidos del banner de página en Chrome */
.toctext {display: inline;}
/* Estilos del nuevo pagebanner -> [[mw:Extension:WikidataPageBanner]] */
.oo-ui-icon-ddm {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Office-calendar-modified.svg/25px-Office-calendar-modified.svg.png');
}
.oo-ui-icon-fdlrt {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Chile_road_sign_PG-2a.svg/25px-Chile_road_sign_PG-2a.svg.png');
}
.oo-ui-icon-destacado {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Symbol_star_FA_gold.svg/25px-Symbol_star_FA_gold.svg.png');
}
.oo-ui-icon-nvd {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Writing_Circle.svg/25px-Writing_Circle.svg.png');
}
.oo-ui-icon-unesco {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b1/WorldHeritageBlanc.svg');
}
.oo-ui-icon-desambig {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Question_Circle.svg/25px-Question_Circle.svg.png');
}
.ext-wpb-pagebanner h1.wpb-name {
font-family: sans-serif;
border-bottom: none;
}
/* Remove when https://phabricator.wikimedia.org/T113642 fixed */
/* Necesario mientras persista el error de la barra de navegación {{EstáEn}} que se muestra bajo el pagebanner en vez de arriba */
.client-js #contentSub { display: none; }
.client-js .mw-special-Contributions #contentSub { display: block; }
.client-js .ext-wpb-pagebanner { padding-top: 1em; }
.client-js #contentSub.visible { font-size: 0.875em; margin: 0; display: block; }
.client-js .ext-wpb-pagebanner.bugfix-T113642 { padding-top: 0; }
/* end https://phabricator.wikimedia.org/T113642 */
/* Estilos para {{Indicador GPX}} */
/*#mw-indicator-GPX { display: none; }*/
/* end: {{Indicador GPX}} */
/* BEGIN: CSS for Template:Geo *//*
#geoCoord {
z-index: 1;
float: right;
top: 0;
right: 0;
}*/
/* END: CSS for Template:Geo */
.mw-kartographer-container.thumb:not(.mw-kartographer-full) .thumbinner > .mw-kartographer-map {
border: 1px solid #ccc;
box-sizing: border-box;
}
.wv-staticMap {
position: relative;
left: -3px;
margin-top: 3px;
}
/***************************************************************
PORTADA 2019
***************************************************************/
/* Estilos para [[Plantilla:Portada:Ticker]], [[Plantilla:Portada:Ticker/Core]] y [[Plantilla:Portada:Ticker/Data]] */
.ticker-container {
height: 36px;
overflow: hidden;
border:1px solid #A9A9A9;
border-left:none;
border-radius:0 3px 3px 0;
}
.ticker-text {
height: 150%;
white-space:nowrap;
display:inline-block;
}
.inicio-ticker {
text-align: center;
float: left;
font-size: 100%;
color: white;
background: #808080;
padding: 3px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px 0 0 3px;
height: 32px;
display:table;
}
.inicio-ticker b {
display: table-cell;
vertical-align: middle;
}
/* Estilos para imágenes en Portada 2019 y secciones */
.radius-img img {
margin-bottom:7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius:5px;
}
.tarjeta img {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius:5px 5px 0 0;
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
width: 100%;
height: auto;
}
.tarjeta img:hover{
transform : scale(1.05);
-moz-transform : scale(1.05); /* Firefox */
-webkit-transform : scale(1.05); /* Chrome - Safari */
-o-transform : scale(1.05); /* Opera */
}
.tarjeta-main img {
transition: width 7s, height 7s, transform 7s;
-moz-transition: width 7s, height 7s, -moz-transform 7s;
-webkit-transition: width 7s, height 7s, -webkit-transform 7s;
-o-transition: width 7s, height 7s,-o-transform 7s;
width: 100%;
height: auto;
}
.tarjeta-main img:hover{
transform : scale(1.2);
-moz-transform : scale(1.2); /* Firefox */
-webkit-transform : scale(1.2); /* Chrome - Safari */
-o-transform : scale(1.2); /* Opera */
}
/* SÓLO PARA ANUNCIOS COLUMNA 3 TEMPORAL */
.tarjeta-main2 img {
transition: width 7s, height 7s, transform 7s;
-moz-transition: width 7s, height 7s, -moz-transform 7s;
-webkit-transition: width 7s, height 7s, -webkit-transform 7s;
-o-transition: width 7s, height 7s,-o-transform 7s;
width: 100%;
height: 395px;
}
.tarjeta-main2 img:hover{
transform : scale(1.2);
-moz-transform : scale(1.2); /* Firefox */
-webkit-transform : scale(1.2); /* Chrome - Safari */
-o-transform : scale(1.2); /* Opera */
}
/* Encabezados estándar Portada 2019 */
.main-header {
border-bottom-color: transparent;
margin-bottom: 0.25em;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
}
/* Tablet */
@media (min-width: 720px) {
.main-top {
background-color: #f8f9fa;
border: 1px solid #c8ccd1;
border-radius: 5px;
margin-bottom: 1em;
padding: 1em;
}
.main-top-right > ul {
display: flex;
flex-wrap: wrap;
align-items: center
}
}
/* Computadoras */
@media (min-width: 1000px) {
.main-wrapper {
display: flex;
margin: 0 -0.5em;
}
.main-wrapper-column {
flex: 1;
margin: 0 0.5em;
}
}
@media (min-width: 1000px) {
.main-top {
align-items: center;
background-size: 850px;
background-position: right;
background-repeat: no-repeat;
display: flex;
margin-bottom: 1em;
margin-top: 0.5em;
padding: 0 1.5em 0 0;
}
.main-top-left {
background-image: linear-gradient(to right, #FFFFFF 0%, rgba(255, 255, 255, 0.7) 75%, rgba(255, 255, 255, 0) 100%);
flex: 2;
padding: 2em 0 2em 1.5em;
}
.main-top-right {
flex: 3;
margin-top: 2em;
text-align: right;
}
}
/* Enlaces-botones Portada 2019*/
.main-top-right .mw-ui-quiet:hover,
.main-top-right .mw-ui-quiet:focus,
.main-footer .mw-ui-quiet:hover,
.main-footer .mw-ui-quiet:focus {
color: #0645ad;
}
/* Listas no ordenadas Portada 2019*/
.main-plainlist > ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-plainlist li {
margin-bottom: 0;
}
/* Reparto columnas al 55-45 % Portada 2019*/
@media (min-width: 1000px) {
.main-wrapper-column {
width: 55%;
}
.main-wrapper-column + .main-wrapper-column {
width: 45%;
}
.main-wrapper-column {
flex: inherit;
}
}
.main-top {
font-size: 1rem;
margin-top: 1em;
padding-bottom: 1.5em;
}
.main-top-left > p {
font-size: 0.875rem;
margin: 0;
}
.main-top-right {
font-size: 0.875rem;
margin-top: 0.5em;
}
.main-top-right > ul {
display: none;
margin-top: 0.5em;
}
.main-top-right .mw-ui-button.mw-ui-quiet {
padding-right: 0;
}
.main-top-header {
border-bottom: 0;
margin-bottom: 0;
margin-top: 0;
}
/* Buxfix en skin-modern Portada 2019*/
body.skin-modern .main-top-header {
line-height: 1.8rem;
font-size: 1.8rem;
}
/* Estilos de la [[Plantilla:Portada:Sección]]*/
.main-box {
border: solid #c8ccd1;
border-width: 1px 0;
/* box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.15 ); */
margin: 0 -1rem 1rem;
padding: 1rem;
}
.main-box > p:last-child {
margin-bottom: 0;
}
.main-box-section {
color: #72777d;
line-height: 1.25;
margin-top: -0.125em; /* Equilibrando el límite superior de nombre de sección debido a line-height: 1.25; */
}
/* Encabezado de la [[Plantilla:Portada:Sección]]*/
.main-box-header {
margin-top: -0.15em; /* Equilibrando el límite superior del encabezado debido a line-height: 1.3; */
}
.main-box-header a {
color: inherit;
}
.main-box-section + .main-box-header { /* Cuando existe el nombre, restablecer el margen al valor estándar */
margin-top: 0;
}
.main-box-header a:focus,
.main-box:hover .main-box-header a,
.main-box:hover .main-featuredLists-item > a {
color: #0645ad;
}
/* Tabletas */
@media (min-width: 720px) {
.main-box {
border-radius: 2px;
border-width: 1px;
margin-bottom: 1rem;
margin-left: 0;
margin-right: 0;
}
}
/* Computadoras */
@media (min-width: 1000px) {
.main-box {
margin-bottom: 1rem;
padding: 1rem;
}
}
/* Pie de la [[Plantilla:Portada:Sección]]*/
.main-footer {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
position: relative;
}
.main-footer:empty {
display: none;
}
.main-footer-actions {
flex: 1;
}
.main-footer-actions > ul {
align-items: center;
display: flex;
}
/* Menú de la [[Plantilla:Portada:Sección]]*/
.main-footer-menu {
align-items: stretch;
display: flex;
}
.main-footer-menuToggle {
align-items: center;
display: flex;
float: none;
height: 100%;
opacity: 0.87;
}
.main-footer-menuToggle:hover {
opacity: 0.51;
}
/* Desplegable de la [[Plantilla:Portada:Sección]]*/
.main-footer-menuDropdown {
background: #fff;
border: 1px solid #a2a9b1;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
max-width: 20em;
position: absolute;
right: 0;
top: 100%;
z-index: 100;
}
.main-footer-menuDropdown .mw-ui-button {
text-align: left;
width: 100%;
}
/* 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%;
}
/***************************************************************
PORTADA 2019
***************************************************************/
/* Estilo de la interfaz de edición */
input#wpSave, input#wpPreview, input#wpDiff{
border-radius:2px;
padding: 0.5em 0.8em;
margin:0px;
}
input#wpSave {
background-color:#36c;
color:#ffffff;
}
input#wpPreview, input#wpDiff {
background-color:#f8f9fa;
color:#222;
border: 1px solid #a2a9b1;
}
input#wpSave:hover, input#wpPreview:hover, input#wpDiff:hover{
box-shadow: 2px 2px 5px #C0C0C0;
}
input#wpSave:hover{
background-color:#447ff5;
}
input#wpSave:active{
background:#2a4b8d;
}
input#wpPreview:hover, input#wpDiff:hover{
background-color: #fff;
color: #444;
}
input#wpPreview:active, input#wpDiff:active{
background:#c8ccd1;
color:#000;
}