Diferencia entre revisiones de «MediaWiki:Common.css»

Revisión del 22:49 23 oct 2022

/* Los estilos CSS definidos aquí se aplicarán a todas las pieles (skins) */

/* Hacer que se muestre [[MediaWiki:Tagline]] */
.mw-body #siteSub {
  display: block;
}

/* Habilitar los tipos de estilo de lista personalizados */
div.note-list ol.references {
  list-style-type: inherit;
}

/* Evitar que los elementos de la lista en las columnas pasen a la siguiente columna */
.list-columns li {
page-break-inside: avoid;
}

/* Limitar los niveles de cabecera TOC que se muestran
   <div class="toclimit-3">, por ejemplo, se limitará a mostrar ==encabezados== y ===encabezados=== pero no más. */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul {
  display: none;
}

/* Evita que algunas cosas se muestren en la página principal */
body.page-Página_principal #ca-delete, body.page-Página_principal #ca-move, body.page-Página_principal #deleteconfirm, body.page-Página_principal #siteSub, body.page-Página_principal #contentSub, body.page-Página_principal h1.firstHeading {
  display: none !important;
}

/* Para cosas que sólo deben aparecer cuando se imprimen. Se utiliza en las listas de control de los equipos. */
.onlyprint {
  display: none;
}


/*==================================================
  LINKS
==================================================*/


/* Color de links */
a:link, a:active, div#mw-panel a:link, div.vector-menu-content li a:link, div.vector-menu-content ul.vector-menu-content-list li.selected a:link {
  text-decoration: none;
  color: #378B00;
}

/* Color de links visitados */
a:visited, div#mw-panel a:visited, div.vector-menu-content li a:visited, div.vector-menu-content ul.vector-menu-content-list li.selected a:visited {
  text-decoration: none;
  color: #008B2A;
}

/* Subrayar los enlaces al pasar el ratón por encima */
a:hover {
  text-decoration: underline;
}


/* Color para nombres de administradores */
a[href="/wiki/Usuario:A22PG"], a[href="/wiki/Usuario:Shahar"], a[href="/wiki/Usuario:Killer1001"], a[href="/wiki/Usuario:AkaRojo"], a[href="/wiki/Usuario:JandroJG7"]{
  color: #7D11E3;
  font-weight: 700;
}

/* Color para nombres de burócratas */
a[href="/wiki/Usuario:Slate"], a[href="/wiki/Usuario:Prod"] {
  color: #DAA520;
  font-weight: 700;
}

/* Color de link inexistente */
div.vector-menu-content li.new a, div.vector-menu-content li.new a:visited, div.vector-menu-content li.new a, div.vector-menu-content li.new, a.new, #p-personal a.new, a.new {
  text-decoration: none;
  color: #BA0000;  /* Red */
}


/*==================================================
  ENTRADAS
==================================================*/


/* Entrada de texto */
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
  border-color: #008B2A;
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
  border-color: #008B2A;
  box-shadow:inset 0 0 0 1px #008B2A;
}

/* Menú desplegable */
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
  border-color: #008B2A;
  box-shadow:inset 0 0 0 1px #008B2A;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
 background-color: #EBFFEC;
 color: #008B2A;
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
 background-color: rgba(0,139,42,0.1);
 color: #008B2A;
}

/* Botón principal */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  background-color: #008B2A;
  border-color: #008B2A;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
  background-color: #378B00;
  border-color: #378B00;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
  background-color: #006400;
  border-color: #006400;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
  border-color: #008B2A;
  box-shadow:inset 0 0 0 1px #008B2A,inset 0 0 0 2px #fff;
}

/* Botón secundario */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
  border-color: #008B2A;
  box-shadow:inset 0 0 0 1px #008B2A;
}

/* Botón de cambios recientes */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
  background-color: #006400;
  border-color: #006400;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus {
  border-color: #008B2A;
  box-shadow: inset 0 0 0 1px #008B2A, inset 0 0 0 2px #fff
}

/* Casilla de verificación */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span {
  border-color: #008B2A;
  box-shadow:inset 0 0 0 1px #008B2A;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover + span {
  border-color: #378B00;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span {
  background-color: #006400;
  border-color: #006400;
  box-shadow:inset 0 0 0 1px #006400;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span {
  background-color: #008B2A;
  border-color: #008B2A;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus + span {
  background-color: #008B2A;
  border-color: #008B2A;
  box-shadow:inset 0 0 0 1px #36c,inset 0 0 0 2px #008B2A;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span {
  background-color: #378B00;
  border-color: #378B00;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active + span {
  background-color: #006400;
  border-color: #006400;
  box-shadow:inset 0 0 0 1px #006400;
}

/* Radio del botón */
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:hover + span {
 border-color: #378B00;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:active + span {
 background-color: #006400;
 border-color: #006400;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked + span {
 border-color: #008B2A;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:hover + span {
 border-color: #378B00;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span {
 border-color: #006400;
 box-shadow: inset 0 0 0 1px #006400;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span:before {
 border-color: #006400;
}


/*==================================================
  INFOBOXES
==================================================*/


.widget {
  background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png");
  box-shadow: 0px 0px 15px white inset;
  width: 25%;
  border-style: solid;
  border-color: #AADC00;
  border-radius: 10px;
  border-width: 10px 1px 10px 1px;
  padding: 15px;
  margin: 5px;
}

.widget1 {
  background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png");
  box-shadow: 0px 0px 15px white inset;
  width: 75%;
  border-style: solid;
  border-color: #AADC00;
  border-radius: 10px;
  border-width: 10px 1px 10px 1px;
  padding: 15px;
  margin: 5px;
}

.widget2 {
  background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png");
  box-shadow: 0px 0px 15px white inset;
  width: 100%;
  border-style: solid;
  border-color: #AADC00;
  border-radius: 10px;
  border-width: 10px 1px 10px 1px;
  padding: 15px;
  margin: 5px;
}

.widget3 {
  background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/6/62/S2_Fes_Main_BG3.png");
  box-shadow: 0px 0px 25px black inset;
  overflow: hidden;
  width: 100%;
  border-style: solid;
  border-color: #13EB92;
  border-radius: 10px;
  border-width: 10px 1px 10px 1px;
  padding: 15px;
  margin: 5px;
}

.widget4 {
  background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png");
  box-shadow: 0px 0px 15px white inset;
  width: 100%;
  border-style: solid;
  border-color: #FF8000;
  border-radius: 10px;
  border-width: 10px 1px 10px 1px;
  padding: 15px;
  margin: 5px;
}

.widget5 {
  background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png");
  box-shadow: 0px 0px 15px white inset;
  width: 50%;
  border-style: solid;
  border-color: #AADC00;
  border-radius: 10px;
  border-width: 10px 1px 10px 1px;
  padding: 15px;
  margin: 5px;
}

.widget6 {
  background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png");
  box-shadow: 0px 0px 15px white inset;
  width: 100%;
  border-style: solid;
  border-color: #424242;
  border-radius: 10px;
  border-width: 10px 1px 10px 1px;
  padding: 15px;
  margin: 5px;
}

.widgett {
  background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png");
  box-shadow: 0px 0px 15px white inset;
  width: 97%;
  border-style: solid;
  border-color: #AADC00;
  border-radius: 10px;
  border-width: 10px 0 10px 0;
  position: relative;
  padding: 15px;
}

.btextwidget {
  background-color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.7);
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  position: relative;
}

#widcontent {
  justify-content: center;
  display: flex;
  display: -webkit-flex;
}

.textwidget, .cd {
  padding: 5px;
  background-color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.7);
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#tex2 {
  margin-left: 25%;
}

#widgfa {
  position: relative;
  left: 1.5%;
  max-width: 85%;
}

.infobox {
  background-color: rgba(140,220,0,0.1);
  width: 25%;
  border-radius: 10px;
  padding: 10px;
  border-style: solid;
  border-color: #AADC00;
  border-width: 10px 1px 10px 1px;
}

.infobox1 {
  background-color: rgba(140,220,0,0.3);
  border-style: solid;
  border-color: rgba(140,220,0,0.5);
  border-width: 1px 1px 1px 5px;
  border-radius: 5px;
  color: #190707;
  font-size: 115%;
  padding: 1em;
  margin: 5px;
}

.infobox td {
  padding: 5px;
}

  .infobox td b {
    padding: 6px;
    background: -moz-linear-gradient(left, rgba(140,220,0,0.3) 0%, rgba(140,220,0,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(140,220,0,0.3)), color-stop(100%,rgba(140,220,0,0)));
    background: -webkit-linear-gradient(left, rgba(140,220,0,0.3) 0%,rgba(140,220,0,0) 100%);
    background: -o-linear-gradient(left, rgba(140,220,0,0.3) 0%,rgba(140,220,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(140,220,0,0.3) 0%,rgba(140,220,0,0) 100%);
    background: linear-gradient(to right, rgba(140,220,0,0.3) 0%,rgba(140,220,0,0) 100%);
    border-style: solid;
    border-color: rgba(140,220,0,0.5);
    border-width: 1px 0 1px 5px;
    border-radius: 5px 0 0 5px;
  }


/*==================================================
  TABLAS
==================================================*/


/* Clase wikitable para el color de las tablas.
   Los colores por defecto están pensados para las tablas generadas por MediaWiki como la tabla del historial de archivos.
   Hay otros esquemas de color disponibles para usar en Mainspace; ver las clases Sitecolor más abajo. */
table.wikitable {
  background-color: #fff;
  color: #222;
  margin: 1em 0;
  border-style: solid;
  border-width: 5px 2px;
  border-color: #006400;  /* green */
  border-collapse: collapse;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
}

table.wikitable > thead > tr > th,
table.wikitable > tbody > tr > th,
table.wikitable > tbody > tr > td {
  border-style: solid;
  border-width: 1px;
  border-color: #006400;
  padding: 0.2em 0.4em;
}

table.wikitable > thead > tr > th,
table.wikitable > tbody > tr > th {
  color: #fff;
  background-color: #378b00;  /* Verde, el mismo tono utilizado para los enlaces */
}

table.wikitable > caption {
  font-weight: bold;
}

/* Clases para añadir colores del sitio a las tablas 
   Los colores del sitio están documentados en [[Template:SiteColor]] */
table.sitecolor-generic,
table.sitecolor-generic > thead > tr > th,
table.sitecolor-generic > tbody > tr > th,
table.sitecolor-generic > tbody > tr > td {
  border-color: rgba(0, 153, 255, 1);  /* Genérico azul */
}

table.sitecolor-generic > thead > tr > th,
table.sitecolor-generic > tbody > tr > th {
  background-color: rgba(0, 153, 255, 0.25);
  color: #222;
}

table.sitecolor-s,
table.sitecolor-s > thead > tr > th,
table.sitecolor-s > tbody > tr > th,
table.sitecolor-s > tbody > tr > td {
  border-color: rgba(170, 220, 0, 1);  /* Splatoon verde */
}

table.sitecolor-s > thead > tr > th,
table.sitecolor-s > tbody > tr > th {
  background-color: rgba(170, 220, 0, 0.25);
  color: #222;
}

table.sitecolor-s2,
table.sitecolor-s2 > thead > tr > th,
table.sitecolor-s2 > tbody > tr > th,
table.sitecolor-s2 > tbody > tr > td {
  border-color: rgba(240, 60, 120, 1);  /* Splatoon 2 rosa */
}

table.sitecolor-s2 > thead > tr > th,
table.sitecolor-s2 > tbody > tr > th {
  background-color: rgba(240, 60, 120, 0.25);
  color: #222;
}

table.sitecolor-oe,
table.sitecolor-oe > thead > tr > th,
table.sitecolor-oe > tbody > tr > th,
table.sitecolor-oe > tbody > tr > td {
  border-color: rgba(174, 21, 102, 1);  /* Octo Expansion color de tinta por defecto */
}

table.sitecolor-oe > thead > tr > th,
table.sitecolor-oe > tbody > tr > th {
  background-color: rgba(174, 21, 102, 0.25);
  color: #222;
}

table.sitecolor-am,
table.sitecolor-am > thead > tr > th,
table.sitecolor-am > tbody > tr > th,
table.sitecolor-am > tbody > tr > td {
  border-color: rgba(128, 128, 128, 1);  /* Area mutante negro */
}

table.sitecolor-am > thead > tr > th,
table.sitecolor-am > tbody > tr > th {
  background-color: rgba(128, 128, 128, 0.25);
  color: #222;
}

table.sitecolor-s3,
table.sitecolor-s3 > thead > tr > th,
table.sitecolor-s3 > tbody > tr > th,
table.sitecolor-s3 > tbody > tr > td {
  border-color: rgba(235, 238, 61, 1);  /* Splatoon 3 amarillo */
}

table.sitecolor-s3 > thead > tr > th,
table.sitecolor-s3 > tbody > tr > th {
  background-color: rgba(235, 238, 61, 0.25);
  color: #222;
}

table.sitecolor-niwa,
table.sitecolor-niwa > thead > tr > th,
table.sitecolor-niwa > tbody > tr > th,
table.sitecolor-niwa > tbody > tr > td {
  border-color: rgba(255, 128, 0, 1);  /* NIWA naranja */
}

table.sitecolor-niwa > thead > tr > th,
table.sitecolor-niwa > tbody > tr > th {
  background-color: rgba(255, 128, 0, 0.25);
  color: #222;
}

table.sitecolor-sr,
table.sitecolor-sr > thead > tr > th,
table.sitecolor-sr > tbody > tr > th,
table.sitecolor-sr > tbody > tr > td {
  border-color: rgba(241, 121, 42, 1);  /* Salmon Run naranja apagado */
}

table.sitecolor-sr > thead > tr > th,
table.sitecolor-sr > tbody > tr > th {
  background-color: rgba(241, 121, 42, 0.25);
  color: #222;
}

/* Alterna los colores de fondo de las filas en las tablas de estilo "cebra"
   Hay opciones pares e impares para seleccionar qué fila cambia de color primero */
table.sitecolor-generic.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-generic.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: rgba(0, 153, 255, 0.15);  /* Genérico azul */
}

table.sitecolor-s.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-s.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: rgba(170, 220, 0, 0.15);  /* Splatoon verde */
}

table.sitecolor-s2.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-s2.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: rgba(240, 60, 120, 0.15);  /* Splatoon 2 rosa */
}

table.sitecolor-oe.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-oe.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: rgba(174, 21, 102, 1);  /* Octo expansion color de tinta por defecto */
}

table.sitecolor-oe.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-oe.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: rgba(128, 128, 128, 1);  /* Octo expansion color de tinta por defecto */
}

table.sitecolor-s3.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-s3.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: rgba(235, 238, 61, 1);  /* Splatoon 3 amarillo */
}

table.sitecolor-sr.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-sr.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: rgba(241, 121, 42, 0.15);  /* Salmon Run naranja apagado */
}

/* Clase cebra destinada a ser utilizada en el espacio de nombres de Inkipedia, por ejemplo la página de personal */
table.zebra-inkipedia > tbody > tr:nth-child(odd) > td {
  background-color: rgba(55, 139, 0, 0.2)  /* Verde, el mismo tono usado en los links pero con un 20% de opacidad */
}

/* Rayas verticales de cebra */
table.sitecolor-generic.zebra-vert tbody td:nth-child(even) {
  background-color: rgba(0, 153, 255, 0.15);  /* Genérico azul */
}

table.sitecolor-s.zebra-vert tbody td:nth-child(even) {
  background-color: rgba(170, 220, 0, 0.15);  /* Splatoon verde */
}

table.sitecolor-s2.zebra-vert tbody td:nth-child(even) {
  background-color: rgba(240, 60, 120, 0.15);  /* Splatoon 2 rosa */
}

table.sitecolor-s3.zebra-vert tbody td:nth-child(even) {
  background-color: rgba(235, 238, 61, 0.15);  /* Splatoon 3 amarillo */
}

table.sitecolor-oe.zebra-vert tbody td:nth-child(even) {
  background-color: rgba(174, 21, 102, 1);  /* Octo expansion color de tinta por defecto */
}

table.sitecolor-oe.zebra-vert tbody td:nth-child(even) {
  background-color: rgba(128, 128, 128, 1);  /* Octo expansion color de tinta por defecto */
}

table.sitecolor-niwa.zebra-vert tbody td:nth-child(even) {
  background-color: rgba(241, 121, 42, 0.15);  /* NIWA naranja */
}

table.sitecolor-sr.zebra-vert tbody td:nth-child(even) {
  background-color: rgba(255, 128, 0, 0.15);  /* Salmon Run naranja apagado */
}

/* Elimina los bordes de las celdas de la tabla para complementar las rayas de cebra */
table.nocellborder > thead > tr > th,
table.nocellborder > tbody > tr > th,
table.nocellborder > tbody > tr > td {
  border-style: none;
}

/* Alinea a la izquierda el texto de la celda de cabecera para complementar las rayas de cebra */
table.nocellborder > thead > tr > th,
table.nocellborder > tbody > tr > th {
  text-align: left;
}

/*==================================================
  Música interactiva
  ==================================================*/

/* Estilo de las casillas de verificación */
.i-checkbox{
        border:3px solid black;
        border-radius:5px;
        width:25px;
        height:25px;
        text-align:center;
        display:inline-block;
}
.i-checkbox-checked{
        width:100%;
        height:100%;
        font-size:18px;
}
/* Cabecera de categoría */
.i-categoryh-{
        font-size:26px;
}
/* Cabezera de subcategoría */
.i-categorys-{
        font-size:22px;
        margin-left:10px
}
/* Tamaños de las columnas en la música interactiva */
/* Columna1 */
.i-column1{
        width:25%
}
/* Columna2 */
.i-column2{
        width:10%
}
/* Columna4 */
.i-column4{
        width:350px
}


/*==================================================
  FUENTES PERSONALIZADAS
==================================================*/


@font-face {
    font-family: Splatoon;
    src: url("https://frozenpandaman.github.io/Splatoon1.otf") format("opentype");
}

@font-face {
    font-family: Splatoon2;
    src: url("https://frozenpandaman.github.io/Splatoon2.otf") format("opentype");
}


/*==================================================
  OTROS
==================================================*/


/* Tamaño de texto más pequeño para las sugerencias de enlaces */
#ui-id-1 {
  font-size: inherit;
}

/* Las cuentas atrás comienzan con sus metadatos hasta que el Js
   los cambie. Por lo tanto, deberían empezar invisibles */
countdown {
  display: none;
}

.noscript { display: none; }
.schedulesplit { display: table-cell; }

/* Evite los saltos de línea en lugares tontos:
   1) Cuando se desee
   2) Los enlaces cuando no los queramos
   3) "Enlaces" en negrita a la propia página */
.nowrap,
.nowraplinks a,
.nowraplinks .selflink {
  white-space: nowrap;
}

/* Impedir la selección de texto */
.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.force-display-none {
    display:none !important
}

/* Avisos como "Este usuario está bloqueado" */
div.mw-warning-with-logexcerpt {
    padding:10px;
    border-radius:20px;
}

/* Ocultar datos confidenciales en las páginas de los archivos */
#mw_metadata .exif-gpslatitude,
#mw_metadata .exif-gpslongitude {
  display: none;
}

/*==================================================
  Vista 3D/2D
==================================================*/

/* Vista 3D/2D */
.container-2d {
  display: block;
  position: relative;
}

.viewer-2d {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.switch-to-3d {
  position: absolute;
  top: 0;
  right: 0;
  background: url("https://cdn.wikimg.net/en/splatoonwiki/images/6/65/2D_icon.png");
  width: 92px;
  height: 48px;
  z-index: 999;
  opacity: 0.5;
  cursor :pointer;
  cursor: hand;
  transition: opacity 0.2s;
}

.switch-to-2d {
  position: absolute;
  top: 0;
  right: 0;
  background: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7e/3D_icon.png");
  width: 92px;
  height: 48px;
  z-index: 999;
  opacity: 0.5;
  cursor: pointer;
  cursor: hand;
  transition: opacity 0.2s;
}

.switch-to-3d:hover, .switch-to-2d:hover {
  opacity: 1.0;
}

/* Visualización del modelo 3D */
.viewer-3d span {
    display: none;
}
.viewer-3d {
    margin: 4px;
    display: block;
    cursor: move;
    position: relative;
}
.viewer-3d-frame {
    position: absolute;
}
.viewer-3d-overlay {
    background: url("https://cdn.wikimg.net/en/splatoonwiki/images/e/ed/3D_rotation_icon.png") bottom right no-repeat;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    position: relative;
}
/* Final de la visualización del modelo 3D */

/* Nuevo CSS específico para el visor 3D */
.viewer-3d-container {
  display: block;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  width: 288px;
}

.viewer-3d-container ul {
  padding: 0px;
  margin: 0px;
}
.viewer-3d-container ul li {
  display: block;
  margin: 0px;
  margin-top: 2px; /* For vertical spacing of the buttons */
  list-style: none;
  text-align: center;
}
.viewer-3d-container ul a {
  display: block;
  width: 134px;
  padding: 4px;
  text-decoration: none;
  font-size: 1.25em;
  opacity: .75;
}

.viewer-3d-container ul a:hover {
  opacity: 1;
}

.view-selector-default-left {
    border-radius: 10px;
    float: left;
    background: #e2e2e2;
}
.view-selector-default-right {
    border-radius: 10px;
    float: right;
    background: #e2e2e2;
}
.view-selector-default-full {
    border-radius: 10px;
    width: 100%;
    float: left;
    clear: both;
    background: #e2e2e2;
}
.view-selector-default-full a {
    width: 100% !important;
}

/* Fin de la nueva visualización 3D */

/******************************* Button icons ********************************/
/* Base icon element style */
.pro-icon,
.switch-icon {
        background       : currentcolor;
        display          : inline-block;
        height           : 28px;
        mask-size        : contain;
        vertical-align   : middle;
        width            : 28px;
        -webkit-mask-size: contain;
}
/* Icon URLs */
:root {
        --pro-icon-controller-outline: url("https://cdn.wikimg.net/en/splatoonwiki/images/3/35/Pro_Icon_Controller_Outline.svg");
        --pro-icon-d-pad-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/d/df/Pro_Icon_D-Pad_Down.svg");
        --pro-icon-d-pad-left: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7e/Pro_Icon_D-Pad_Left.svg");
        --pro-icon-d-pad-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/2/2a/Pro_Icon_D-Pad_Right.svg");
        --pro-icon-d-pad-up: url("https://cdn.wikimg.net/en/splatoonwiki/images/8/89/Pro_Icon_D-Pad_Up.svg");
        --pro-icon-d-pad: url("https://cdn.wikimg.net/en/splatoonwiki/images/e/e8/Pro_Icon_D-Pad.svg");
        --pro-icon-gyro-pitch: url("https://cdn.wikimg.net/en/splatoonwiki/images/9/9c/Pro_Icon_Gyro_Pitch.svg");
        --pro-icon-gyro-roll: url("https://cdn.wikimg.net/en/splatoonwiki/images/5/55/Pro_Icon_Gyro_Roll.svg");
        --pro-icon-gyro-yaw: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7d/Pro_Icon_Gyro_Yaw.svg");
        --switch-icon-a: url("https://cdn.wikimg.net/en/splatoonwiki/images/5/5a/Switch_Icon_A.svg");
        --switch-icon-b: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7f/Switch_Icon_B.svg");
        --switch-icon-capture: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/77/Switch_Icon_Capture.svg");
        --switch-icon-home: url("https://cdn.wikimg.net/en/splatoonwiki/images/d/da/Switch_Icon_Home.svg");
        --switch-icon-l: url("https://cdn.wikimg.net/en/splatoonwiki/images/3/3e/Switch_Icon_L.svg");
        --switch-icon-left-stick-all: url("https://cdn.wikimg.net/en/splatoonwiki/images/0/0b/Switch_Icon_Left_Stick_All.svg");
        --switch-icon-left-stick-click: url("https://cdn.wikimg.net/en/splatoonwiki/images/5/58/Switch_Icon_Left_Stick_Click.svg");
        --switch-icon-left-stick-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/e/e2/Switch_Icon_Left_Stick_Down.svg");
        --switch-icon-left-stick-left-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/4/49/Switch_Icon_Left_Stick_Left-Right.svg");
        --switch-icon-left-stick-left: url("https://cdn.wikimg.net/en/splatoonwiki/images/9/95/Switch_Icon_Left_Stick_Left.svg");
        --switch-icon-left-stick-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/1/14/Switch_Icon_Left_Stick_Right.svg");
        --switch-icon-left-stick-up-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/0/06/Switch_Icon_Left_Stick_Up-Down.svg");
        --switch-icon-left-stick-up: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7c/Switch_Icon_Left_Stick_Up.svg");
        --switch-icon-left-stick: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/73/Switch_Icon_Left_Stick.svg");
        --switch-icon-minus: url("https://cdn.wikimg.net/en/splatoonwiki/images/6/6d/Switch_Icon_Minus.svg");
        --switch-icon-plus: url("https://cdn.wikimg.net/en/splatoonwiki/images/c/c9/Switch_Icon_Plus.svg");
        --switch-icon-r: url("https://cdn.wikimg.net/en/splatoonwiki/images/d/d0/Switch_Icon_R.svg");
        --switch-icon-right-stick-all: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/73/Switch_Icon_Right_Stick_All.svg");
        --switch-icon-right-stick-click: url("https://cdn.wikimg.net/en/splatoonwiki/images/d/d8/Switch_Icon_Right_Stick_Click.svg");
        --switch-icon-right-stick-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/4/47/Switch_Icon_Right_Stick_Down.svg");
        --switch-icon-right-stick-left-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/a/a2/Switch_Icon_Right_Stick_Left-Right.svg");
        --switch-icon-right-stick-left: url("https://cdn.wikimg.net/en/splatoonwiki/images/b/b1/Switch_Icon_Right_Stick_Left.svg");
        --switch-icon-right-stick-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/f/f2/Switch_Icon_Right_Stick_Right.svg");
        --switch-icon-right-stick-up-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/c/c1/Switch_Icon_Right_Stick_Up-Down.svg");
        --switch-icon-right-stick-up: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/78/Switch_Icon_Right_Stick_Up.svg");
        --switch-icon-right-stick: url("https://cdn.wikimg.net/en/splatoonwiki/images/f/f6/Switch_Icon_Right_Stick.svg");
        --switch-icon-sl: url("https://cdn.wikimg.net/en/splatoonwiki/images/3/35/Switch_Icon_SL.svg");
        --switch-icon-sr: url("https://cdn.wikimg.net/en/splatoonwiki/images/c/c3/Switch_Icon_SR.svg");
        --switch-icon-x: url("https://cdn.wikimg.net/en/splatoonwiki/images/2/24/Switch_Icon_X.svg");
        --switch-icon-y: url("https://cdn.wikimg.net/en/splatoonwiki/images/c/c5/Switch_Icon_Y.svg");
        --switch-icon-zl: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/79/Switch_Icon_ZL.svg");
        --switch-icon-zr: url("https://cdn.wikimg.net/en/splatoonwiki/images/1/1e/Switch_Icon_ZR.svg");
}
/* Icon styles */
.pro-icon.controller-outline { mask-image: var(--pro-icon-controller-outline); -webkit-mask-image: var(--pro-icon-controller-outline); }
.pro-icon.d-pad-down { mask-image: var(--pro-icon-d-pad-down); -webkit-mask-image: var(--pro-icon-d-pad-down); }
.pro-icon.d-pad-left { mask-image: var(--pro-icon-d-pad-left); -webkit-mask-image: var(--pro-icon-d-pad-left); }
.pro-icon.d-pad-right { mask-image: var(--pro-icon-d-pad-right); -webkit-mask-image: var(--pro-icon-d-pad-right); }
.pro-icon.d-pad-up { mask-image: var(--pro-icon-d-pad-up); -webkit-mask-image: var(--pro-icon-d-pad-up); }
.pro-icon.d-pad { mask-image: var(--pro-icon-d-pad); -webkit-mask-image: var(--pro-icon-d-pad); }
.pro-icon.gyro-pitch { mask-image: var(--pro-icon-gyro-pitch); -webkit-mask-image: var(--pro-icon-gyro-pitch); }
.pro-icon.gyro-roll { mask-image: var(--pro-icon-gyro-roll); -webkit-mask-image: var(--pro-icon-gyro-roll); }
.pro-icon.gyro-yaw { mask-image: var(--pro-icon-gyro-yaw); -webkit-mask-image: var(--pro-icon-gyro-yaw); }
.switch-icon.a { mask-image: var(--switch-icon-a); -webkit-mask-image: var(--switch-icon-a); }
.switch-icon.b { mask-image: var(--switch-icon-b); -webkit-mask-image: var(--switch-icon-b); }
.switch-icon.capture { mask-image: var(--switch-icon-capture); -webkit-mask-image: var(--switch-icon-capture); }
.switch-icon.home { mask-image: var(--switch-icon-home); -webkit-mask-image: var(--switch-icon-home); }
.switch-icon.l { mask-image: var(--switch-icon-l); -webkit-mask-image: var(--switch-icon-l); }
.switch-icon.left-stick-all { mask-image: var(--switch-icon-left-stick-all); -webkit-mask-image: var(--switch-icon-left-stick-all); }
.switch-icon.left-stick-click { mask-image: var(--switch-icon-left-stick-click); -webkit-mask-image: var(--switch-icon-left-stick-click); }
.switch-icon.left-stick-down { mask-image: var(--switch-icon-left-stick-down); -webkit-mask-image: var(--switch-icon-left-stick-down); }
.switch-icon.left-stick-left-right { mask-image: var(--switch-icon-left-stick-left-right); -webkit-mask-image: var(--switch-icon-left-stick-left-right); }
.switch-icon.left-stick-left { mask-image: var(--switch-icon-left-stick-right); -webkit-mask-image: var(--switch-icon-left-stick-right); }
.switch-icon.left-stick-right { mask-image: var(--switch-icon-left-stick-right); -webkit-mask-image: var(--switch-icon-left-stick-right); }
.switch-icon.left-stick-up-down { mask-image: var(--switch-icon-left-stick-up-down); -webkit-mask-image: var(--switch-icon-left-stick-up-down); }
.switch-icon.left-stick-up { mask-image: var(--switch-icon-left-stick-up); -webkit-mask-image: var(--switch-icon-left-stick-up); }
.switch-icon.left-stick { mask-image: var(--switch-icon-left-stick); -webkit-mask-image: var(--switch-icon-left-stick); }
.switch-icon.minus { mask-image: var(--switch-icon-minus); -webkit-mask-image: var(--switch-icon-minus); }
.switch-icon.plus { mask-image: var(--switch-icon-plus ); -webkit-mask-image: var(--switch-icon-plus ); }
.switch-icon.r { mask-image: var(--switch-icon-r); -webkit-mask-image: var(--switch-icon-r); }
.switch-icon.right-stick-all { mask-image: var(--switch-icon-right-stick-all); -webkit-mask-image: var(--switch-icon-right-stick-all); }
.switch-icon.right-stick-click { mask-image: var(--switch-icon-right-stick-click); -webkit-mask-image: var(--switch-icon-right-stick-click); }
.switch-icon.right-stick-down { mask-image: var(--switch-icon-right-stick-down); -webkit-mask-image: var(--switch-icon-right-stick-down); }
.switch-icon.right-stick-left-right { mask-image: var(--switch-icon-right-stick-left-right); -webkit-mask-image: var(--switch-icon-right-stick-left-right); }
.switch-icon.right-stick-left { mask-image: var(--switch-icon-right-stick-left); -webkit-mask-image: var(--switch-icon-right-stick-left); }
.switch-icon.right-stick-right { mask-image: var(--switch-icon-right-stick-right); -webkit-mask-image: var(--switch-icon-right-stick-right); }
.switch-icon.right-stick-up-down { mask-image: var(--switch-icon-right-stick-up-down); -webkit-mask-image: var(--switch-icon-right-stick-up-down); }
.switch-icon.right-stick-up { mask-image: var(--switch-icon-right-stick-up); -webkit-mask-image: var(--switch-icon-right-stick-up); }
.switch-icon.right-stick { mask-image: var(--switch-icon-right-stick); -webkit-mask-image: var(--switch-icon-right-stick); }
.switch-icon.sl { mask-image: var(--switch-icon-sl); -webkit-mask-image: var(--switch-icon-sl); }
.switch-icon.sr { mask-image: var(--switch-icon-sr); -webkit-mask-image: var(--switch-icon-sr); }
.switch-icon.x { mask-image: var(--switch-icon-x); -webkit-mask-image: var(--switch-icon-x); }
.switch-icon.y { mask-image: var(--switch-icon-y); -webkit-mask-image: var(--switch-icon-y); }
.switch-icon.zl { mask-image: var(--switch-icon-zl); -webkit-mask-image: var(--switch-icon-zl); }
.switch-icon.zr { mask-image: var(--switch-icon-zr); -webkit-mask-image: var(--switch-icon-zr); }
/******************************* Infobox styles *******************************/
/* Supporting CSS for Template:GearCategory */
:root {
        --gear-icon-clothing: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/78/S2_Icon_Clothing.png");
        --gear-icon-headgear: url("https://cdn.wikimg.net/en/splatoonwiki/images/1/12/S2_Icon_Headgear.png");
        --gear-icon-shoes: url("https://cdn.wikimg.net/en/splatoonwiki/images/a/a5/S2_Icon_Shoes.png");
}
.gear-category {
        display: inline-block;
        position: relative;
        vertical-align: middle;
}
.gear-category a,
.gear-category a:hover{
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        text-decoration: none;
        top: 0;
        width: 100%;
}
.gear-category::before {
        background: currentcolor;
        content: "";
        height: 100%;
        left: 0;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        opacity: 0.6;
        position: absolute;
        top: 0;
        width: 100%;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
}
.gear-category.Clothing::before {
        mask-image: var(--gear-icon-clothing);
        -webkit-mask-image: var(--gear-icon-clothing);
}
.gear-category.Headgear::before {
        mask-image: var(--gear-icon-headgear);
        -webkit-mask-image: var(--gear-icon-headgear);
}
.gear-category.Shoes::before {
        mask-image: var(--gear-icon-shoes);
        -webkit-mask-image: var(--gear-icon-shoes);
}
/* New infobox implementation styles */
.infobox {
        box-shadow: 0 0 16px var(--page, #ffffff) inset;
}