Menú alternativo
Menú alternativo personal
No has accedido
Tu dirección IP será visible si haces alguna edición

Diferencia entre revisiones de «MediaWiki:Common.css»

Página de la interfaz de MediaWiki
imported>Jorge Abellán
Página creada con «→‎TÍTULOS Y ENCABEZADOS EN 'SEGOE UI': .mw-body h1, .mw-body-content h1, .mw-body-content h2{ font-family:'Segoe UI'; font-weight:700; } /* OCULTAR ELEMENTOS EN PORT…»
 
Eliminando cosas relacionadas a un skin que no usamos
 
(No se muestran 79 ediciones intermedias de 3 usuarios)
Línea 1: Línea 1:
/* TÍTULOS Y ENCABEZADOS EN 'SEGOE UI' */
body, #firstHeading, h1, h2, h3, h4, h5,
.mw-body h1, .mw-body-content h1, .mw-body-content h2{
.mw-body h1, .mw-body h2, .mw-body #firstHeading,
font-family:'Segoe UI';
body em, body i, body strong {font-family: 'Open Sans', sans-serif;}
font-weight:700;
body.page-Página_principal.action-view h1.firstHeading, body.page-Página_principal.action-submit h1.firstHeading { display: none; }
 
li#footer-info-lastmod,
li#footer-info-viewcount,
li#footer-places-about,
li#footer-places-disclaimer {
  display: none !important;
}
 
#p-navigation h5 {
  display: none !important;
}
 
.nowrap {
    white-space: nowrap;
}
 
.toggle-head {
  background:url(//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/HW_open_arrow.svg/10px-HW_open_arrow.svg.png) no-repeat 0% center;
}
 
.toggle-head:hover {
  text-decoration:underline;
  cursor:pointer;
}
 
.redirect-in-category, .allpagesredirect a {
  color: gray;
}
 
.nodisplay {
  display: none !important;
}
 
/* Ambox: Noticias y páginas de proyecto */
 
table.ambox {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
  background: #f8fcff;
  border: 1px solid #aaa;
  border-left: 15px solid #39f;      /* Barra azul predeterminada */
}
table.ambox th, table.ambox td {      /* Celda(s) de mensajes */
  padding: 0.25em 0.5em;              /* 0.5em left/right */
}
table.ambox td.ambox-image {          /* Celda de img a la izquierda */
  width: 52px;
  padding: 2px 0px 2px 0.5em;        /* 0.5em left, 0px right */
  text-align: center;
}
table.ambox td.ambox-imageright {    /* Celda de img a la derecha */
  width: 52px;
  padding: 2px 0.5em 2px 0px;        /* 0px left, 0.5em right */
  text-align: center;
}
table.ambox-notice {
  border-left: 15px solid #0080FF;    /* Azul */
}
table.ambox-serious {
  border-left: 15px solid #C00;      /* Rojo */
}
table.ambox-content {
  border-left: 15px solid #F63;      /* Naranja */
}
table.ambox-style {
  border-left: 15px solid #FC3;      /* Amarillo */
}
table.ambox-merge {
  border-left: 15px solid #95B;      /* Purpura */
}
table.ambox-license {
  border-left: 15px solid #088A08;    /* Verde */
}
table.ambox-protection {
  border-left: 15px solid #BBA;      /* Gris */
}
/* Arrow button formatting */
 
.arrowbutton {
color:#ffffff;
width:100px;
padding:0.4em;
line-height:1.5em;
}
}


/* OCULTAR ELEMENTOS EN PORTADA */
.arrowbutton::before {
body.page-Página_principal.action-view .firstHeading,
content:"⇒ ";
body.page-Página_principal.action-view #contentSub,
font-weight:bold;
body.page-Página_principal.action-view #siteSub,
body.page-Página_principal.action-view #catlinks,
/* body.page-Página_principal #p-namespaces, */
body.page-Página_principal.action-view #footer-info-lastmod {
    display: none !important;
}
}


/* PIE DE PÁGINA */
.arrowbutton-red {
.footer{
background:#990000;
background-color:#1F1F1F;
padding:1.5em 2.5em;
margin:0 -24px 0 -24px;
font-family:'Segoe UI';
color:white;
font-weight:600;
line-height: 1.2;
text-decoration:none;
}
}


.copy{
.arrowbutton-green {
background-color:#000000;
background:#339966;
padding:1.5em 2.5em;
margin:0 -24px -24px -24px;
font-family:'Segoe UI';
color:white;
font-size:90%;
line-height: 1.2;
}
}


.copy a.external{
.arrowbutton-blue {
color:#d2e6f8;
background:#0063BF;
text-decoration:none;
}
}


.copy a.external:hover{
.arrowbutton-gold {
color:#EEEEEE;
background:#E5B921;
}
}


.list{
.arrowbutton-red:hover {
float:right;
    background: #ffb3b3 !important;
margin:2em 0 0 0;
    color: #000000 !important;
}
}


.footer a{
.arrowbutton-green:hover {
color:white;
    background: #c6ecd9 !important;
    color: #000000 !important;
}
}


.footer a:hover{
.arrowbutton-blue:hover {
color:#EEE;
    background: #b3daff !important;
    color: #000000 !important;
}
}


.list img{
.arrowbutton-gold:hover {
margin:0 10px;
    background: #faefcb !important;
height:40px;
    color: #000000 !important;
width:auto;
}
}


#footer{
/* Cortesía de Platonides */
margin-left:1em;
#p-navigation { display: block; }
nav.vector-menu-portal { display: none; }
 
 
/* estilo de tablas */
 
table.rowlines {  
    border-collapse:collapse;
    border: 2px solid #BBBDBF;
    width:  100%;
    vertical-align: top;
}
}


table.rowlines th {
    border-bottom: 1px solid #BBBDBF;
    border-top:    1px solid #BBBDBF;
    padding:      5px;
}


/* CONTENIDO PRINCIPAL PÁGINAS OFICIALES */
table.rowlines td {
.main {
     border-bottom: 1px dotted #BBBDBF;
     background-color: #EEEAFF;
     padding:       5px;
    font-family:'Segoe UI';
    margin:60px -24px auto -24px;
     padding:40px 90px;
}
}


.main .col{
div.rowlines-wrapper {
position: relative;
    padding: 0 10px 0 10px;
width: 50%;
}
 
/* Header mega template */
 
#megaheader {
  position:relative;
  padding-bottom:1em;
  border:none;
  margin-bottom:2em;
  overflow: hidden;
}
 
@media screen and (min-width:982px) {
  #megaheader {
    margin-top:-3em;
    margin-left:-1.5em;
    margin-right:-1.5em;
  }
}
 
@media screen and (min-width:768px) and (max-width:981px) {
  #megaheader {
    margin-top:-2.7em;
    margin-left:-1em;
    margin-right:-1em;
  }
}
 
@media screen and (max-width:767px) {
  #megaheader {
    margin-top:-3em;
    margin-left:-1.15em;
    margin-right:-1.15em;
  }
}
 
 
@media screen and (min-width:768px) {
  #megaheader {
    height:500px;
  }
 
  #megaheader-short {
  height:200px;
  }
}
 
@media screen and (max-width:767px) {
  #megaheader {
    height:auto;
  }
}
 
#megaheader img {
  -moz-transition: opacity 2s; /* Firefox 4 */
  -webkit-transition: opacity 2s; /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: opacity 2s;
}
 
/* Round button formatting */
 
.roundbutton {
    display:inline-block; border-radius:50%; color:#ffffff; width:54px; height:54px; padding:12px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}
 
.roundbutton-large {
    display:inline-block; border-radius:50%; color:#ffffff; width:68px; height:68px; padding:15px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}
 
/* Copied from Wikivoyage for scalable-width images */
 
@media screen and (max-width:767px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px;
    width: 100%;
    height: auto;
    margin-bottom: .6em;
    text-align: center;
    padding-left: 0 !important;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
    margin:0 auto;
  }
}
 
@media screen and (min-width:768px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px;
    height: auto;
    margin-bottom: .6em;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
  }
  .banner-image-left {
    float: left !important;
  }
  .banner-image-left img {
    float: left !important;
  }
  .banner-image-right {
    float: right !important;
  }
  .banner-image-right img {
    float: right !important;
  }
  .banner-image-none {
    float: none !important;
  }
  .banner-image-none img {
    float: none !important;
  }
  .banner-image-center {
    padding-left: none !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .banner-image-center img {
    float: none !important;
  }
}
}


.main h2{
@media screen and (max-width:767px) {
font-size: 1.5rem;
.no-narrow {
text-transform: uppercase;
display: none;
    border: none;
}
    color: #3a25ff;
}
    font-weight: 500;
@media screen and (min-width:768px) {
    padding-top: .5rem;
.narrow-only {
    margin-bottom: 1rem;
display: none;
    font-family:'Segoe UI';
}
    border-bottom:0;
}
}


.main h1{
/**
font-size: 2.5rem;
* Style for horizontal lists (separator following item).
font-weight: 700;
* @source https://www.mediawiki.org/wiki/Snippets/Horizontal_lists
    padding-right: 3rem;
* @revision 7 (2015-11-12)
    font-family:'Segoe UI';
* @author [[User:Edokter]]
    border-bottom:0;
*/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
}


.section{
/* Display list items inline */
font-family:'Segoe UI';
.hlist dd,
max-width:62rem;
.hlist dt,
.hlist li {
margin: 0;
display: inline;
}
}


#inicio{margin:3.5rem auto;}
.nonumtoc .tocnumber {
#objetivos, #eventos{margin:0 auto 1.5em;}
display: none;
}


.section h2{
.nonumtoc #toc ul,
font-size: 1.4375rem;
.nonumtoc .toc ul {
font-weight: 700;
line-height: 1.5em;
list-style: none none;
margin: .3em 0 0;
padding: 0;
padding: 0;
margin: 1rem 0;
font-family:'Segoe UI';
text-decoration:none;
border:0;
}
}


.section h3{
.hlist.nonumtoc #toc ul ul,
font-size: .9375rem;
.hlist.nonumtoc .toc ul ul {
color: #6d7378;
/* @noflip */
font-weight: 700;
margin: 0;
font-family:'Segoe UI';
}
text-transform: uppercase;
 
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.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;
}
 
/* Hide empty list items */
.hlist .mw-empty-li {
display: none;
}
 
/* 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;
}
 
/* 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;
}
 
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
 
.hlist ol > li {
counter-increment: listitem;
}
 
.hlist ol > li:before {
content: " " counter(listitem) " ";
white-space: nowrap;
}
 
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
content: " (" counter(listitem) " ";
}
 
/* ----------------------------------------------
* Generated by Animista on 2021-9-30 18:30:28
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
 
/**
* ----------------------------------------
* animation bounce-in-top
* ----------------------------------------
*/
.bounce-in-top {
-webkit-animation: bounce-in-top 1.1s 1s both;
        animation: bounce-in-top 1.1s 1s both;
}
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
 
/**
* ----------------------------------------
* animation tracking-in-expand
* ----------------------------------------
*/
.tracking-in-expand {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
 
/**
* ----------------------------------------
* animation text-shadow-pop-bl
* ----------------------------------------
*/
.text-shadow-pop-bl {
-webkit-animation: text-shadow-pop-bl 1s both;
        animation: text-shadow-pop-bl 1s both;
}
@-webkit-keyframes text-shadow-pop-bl {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: -1px 1px #555555, -2px 2px #555555, -3px 3px #555555, -4px 4px #555555, -5px 5px #555555, -6px 6px #555555, -7px 7px #555555, -8px 8px #555555;
    -webkit-transform: translateX(8px) translateY(-8px);
            transform: translateX(8px) translateY(-8px);
  }
}
@keyframes text-shadow-pop-bl {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: -1px 1px #555555, -2px 2px #555555, -3px 3px #555555, -4px 4px #555555, -5px 5px #555555, -6px 6px #555555, -7px 7px #555555, -8px 8px #555555;
    -webkit-transform: translateX(8px) translateY(-8px);
            transform: translateX(8px) translateY(-8px);
  }
}
 
/**
* ----------------------------------------
* Fondos con imágenes molonas
* ----------------------------------------
*/
.bgp {
align-items: center;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
 
.bglogo {
align-items: center;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/23/Wikisp-logo-icon.svg);
background-position: right center;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: 50%;
}
}


.section h4{
/* remove border from language bar */
font-size: 17px;
.mw-pt-languages {
padding-top:0;
border: none;
margin-bottom: 0;
margin-top:0;
font-weight: 700;
text-transform:none;
color:black;
}
}


#eventos p, #objetivos p{
/* Ocultar título, categorías y fecha de la última edición en la Portada */
display: block;
body.page-Página_principal h1.firstHeading,
margin:0;
body.page-Página_principal h1.pagetitle,
font-size: .9375rem;
body.page-Página_principal p.subtitle,
    line-height: 1.466;
body.page-Página_principal #catlinks,
    padding: 0;
body.page-Página_principal #footer-info-lastmod {
    display:none;
}
/* Hide title and edit tools on main page */
.page-Página_principal .mw-side,
.page-Página_principal #siteSub {
display: none!important;
}
}


#inicio h2{
/* Force override until skin is updated */
margin-top:0;
.skin-citizen blockquote {
margin: 0.8rem 20px;
padding: 0;
}
}


#inicio p{
/* From https://codepen.io/MarkBoots/pen/ZEXaEBX */
line-height: 1.8125rem;
 
font-size: 1.125rem;
.olcards,
.olcards * {
margin: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
}


#inicio img{
.olcards {
float:right;
list-style: none;
margin:auto auto auto 2.5rem;
counter-reset: cardCount;
height:auto;
font-family: sans-serif;
display: flex;
flex-direction: column;
--cardsGap: 1rem;
gap: var(--cardsGap);
padding-bottom: var(--cardsGap);
}
}


hr{
.olcards > li {
    background-color: #a7d7f9;
counter-increment: cardCount;
    margin:auto -24px;
display: flex;
color: white;
--labelOffset: 1rem;
--arrowClipSize: 1.5rem;
margin-top: var(--labelOffset);
}
}


.flex{
.olcards > li::before {
content: counter(cardCount, decimal-leading-zero);
background: white;
color: var(--cardColor);
font-size: 2em;
font-weight: 700;
transform: translateY(calc(-1 * var(--labelOffset)));
margin-right: calc(-1 * var(--labelOffset));
z-index: 1;
display: flex;
display: flex;
flex-direction: row;
justify-content: center;
    flex-wrap: nowrap;
align-items: center;
    justify-content: space-between;
padding-inline: 0.5em;
    margin-bottom:1.5em;
}
}


.section .col{
.olcards > li .content {
background-color: var(--cardColor);
--inlinePadding: 1em;
--boxPadding: 0.5em;
display: grid;
padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize))
var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
grid-template-areas:
"icon title"
"icon text";
gap: 0.25em 1em;
clip-path: polygon(
0 0,
calc(100% - var(--arrowClipSize)) 0,
100% 50%,
calc(100% - var(--arrowClipSize)) 100%,
calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
0 calc(100% + var(--cardsGap))
);
position: relative;
position: relative;
width: 32%;
margin: 0;
    padding: 0;
}
}


.btn a{
.olcards > li .content::before {
padding-top: 32px;
content: "";
color: #3a25ff;
position: absolute;
    font-size: 15px;
width: var(--labelOffset);
    font-weight: 700;
height: var(--labelOffset);
    text-decoration: none;
background: var(--cardColor);
left: 0;
bottom: 0;
clip-path: polygon(0 0, 100% 0, 0 100%);
filter: brightness(0.75);
}
 
.olcards > li .content::after {
content: "";
position: absolute;
height: var(--cardsGap);
width: var(--cardsGap);
background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
left: 0;
top: 100%;
}
 
.olcards > li .icon {
grid-area: icon;
align-self: center;
font-size: 2em;
}
 
.olcards > li .content .title {
grid-area: title;
font-size: 1.25em;
}
 
.olcards > li .content .text {
grid-area: text;
}
}


.section .col .item{
/**
    background: #f8f9fa;
  * Mbox
    border-radius: 5px;
  * From https://genshin-impact.fandom.com/wiki/MediaWiki:Mbox.css?oldid=1644313
    margin: 0;
  */
    padding: 40px 20px;
    z-index:0;
.mbox {
--type-important: rgba(200, 0, 0, 0.8);
--type-moderate: rgba(233, 124, 47, 0.8);
--type-minor: rgba(241, 197, 37, 0.8);
display: flex;
position: relative;
background-color: var(--custom-mbox-bg);
border: 1px solid #d6d6d6;
border-left-width: 8px;
border-left-color: #d6d6d6;
border-radius: 3px;
margin-bottom: 5px;
min-height: 32px;
}
}


#eventos a, #objetivos a{
.mbox.mbox-type-important {
color: black;
border-left-color: var(--type-important);
    text-decoration: none;
}
}


.home-project-logo img {
.mbox.mbox-type-moderate {
    max-height: 60px;
border-left-color: var(--type-moderate);
    width: auto;
    margin-bottom:15px;
}
}


.focus{
.mbox.mbox-type-minor {
background-color: #fff;
border-left-color: var(--type-minor);
    overflow: hidden;
    display: block;
    border: 1px solid #e5e5e5;
    transition: all .25s ease;
    border-radius: 5px;
}
}


.focus:hover {
.mbox__content {
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.15);
display: table;
box-sizing: border-box;
width: 100%;
padding: 8px 15px;
}
}


.focus .card{
.mbox__content__image {
display: table-cell;
width: 40px;
height: 100%;
height: 100%;
    display: block;
text-align: center;
    position: relative;
vertical-align: middle;
padding-right: 15px;
}
 
.mbox__content__wrapper {
display: table-cell;
vertical-align: middle;
}
 
.mbox__content__header {
display: block;
font-weight: bold;
}
 
.mbox__content__text {
display: block;
}
 
.mbox__content__text__comment {
font-size: small;
}
 
.mbox__content__aside {
display: table-cell;
width: 100px;
vertical-align: middle;
text-align: center;
padding-left: 15px;
border-left: 1px solid #d6d6d6;
}
 
.mbox__close {
position: absolute;
right: 0;
top: 0;
padding: 2px 7px;
font-weight: bold;
font-size: 16px;
color: #bbb;
cursor: pointer;
transition: all .15s ease-in;
}
 
.mbox__close:hover {
color: #777;
}
 
.mbox__close:after {
content: '×';
}
 
.mw-collapsed+.mbox__close {
transform: rotate(45deg);
padding: 4px 7px 5px 2px;
}
 
/* Remove accessibility feature for mbox toggle */
.mw-customtoggle-mbox {
outline: none;
}
 
/* From https://genshin-impact.fandom.com/wiki/MediaWiki:FD_Mbox.css?oldid=1505978 */
 
:root {
  --stub: 233, 206, 98;
  --cbt: 72, 123, 106;
  --mild: 220, 119, 90;
  --removed: 135, 27, 65;
  --cleanup: 171, 59, 74;
  --construct: 233, 165, 98;
  --upcoming: 83, 53, 126;
  --unofficialtl: 24, 217, 207;
  --lua: 70, 96, 211;
  --css: 35, 100, 240;
  --sandbox: 161, 206, 191;
  --names: 157, 209, 209;
  --changehistory: 80, 107, 169;
  --opacity: 0.15;
}
 
.mbox__content__text {
padding-right: 10px;
}
 
.mbox__content__aside , .mbox__content__text__comment {
line-height: 18px;
}
 
/* STUB */
.mbox.stub {
border-color: rgb(var(--stub));
background-color: rgba(var(--stub), var(--opacity));
}
 
.mbox.stub .mbox__content__aside {
border-color: rgb(var(--stub));
}
}


.focus .bg-img-container {
/* CBT CONTENT */
    width: 100%;
.mbox.CBT {
    height: 12.5rem;
border-color: rgb(var(--cbt));
    display: block;
background-color: rgba(var(--cbt), var(--opacity));
}
}


.focus .bg-img-container .bg-img{
/* CHINA ONLY */
    width: 100%;
.mbox.chinaonly {
    height: 100%;
  border-color: rgb(var(--construct));
    background-size: cover;
  background-color: rgba(var(--construct), var(--opacity));
    background-position: center center;
    transition: .3s all;
}
}


.focus .card-content {
/* CLEANUP */
    padding: 1.5rem;
.mbox.cleanup {
    height: 100%;
border-color: rgb(var(--cleanup));
    display: block;
background-color: rgba(var(--cleanup), var(--opacity));
}
}


#objetivos h2{
.mbox.cleanup .mbox__content__aside {
    margin-bottom: .3125rem;
border-color: rgb(var(--cleanup));
    font-size: 1.5rem;
    font-weight: 700;
}
}


/* IMÁGENES REDONDEADAS */
.mbox.cleanup-mild {
.rounded img{
border-color: rgb(var(--mild));
border-radius: 5px;
background-color: rgba(var(--cleanup), var(--opacity));
}
}


.mbox.cleanup-mild .mbox__content__aside {
border-color: rgb(var(--mild));
}


/* OCULTAR O MOSTRAR SEGÚN USER RIGHTS */
.mbox.cleanup-top {
.sysop-show,
border-color: rgb(var(--mild));
.bureaucrat-show,
background-color: rgba(var(--cleanup), var(--opacity));
.autoconfirmed-show,
.user-show {
    display: none;
}
}


/* OMBOX */
.mbox.cleanup-top .mbox__content__aside {
table.ombox {
border-color: rgb(var(--mild));
    margin: 4px auto;
    width: 85%;
    border-collapse: collapse;
    border: 1px solid #aaa;
    background: #f9f9f9;
}
}


table.pp {
/* REMOVED */
    text-align:center;
.mbox.removed {
    width:100%;
border-color: rgb(var(--removed));
    clear:both;
background-color: rgba(var(--removed), var(--opacity));
    margin-top:.5em;
    font-size:90%
}
}


/* AMBOX */
/* SPOILER */
table.ambox {
.mbox.spoiler {
  width: 80%;
border-color: rgb(var(--cleanup));
  margin: 0 auto;
background-color: rgba(var(--cleanup), var(--opacity));
  border-collapse: collapse;  
  background: #f8fcff;
  border: 1px solid #aaa;
  border-left: 15px solid #39f;       /* Barra azul predeterminada */
}
}
table.ambox th, table.ambox td {     /* Celda(s) de mensajes */
 
  padding: 0.25em 0.5em;             /* 0.5em left/right */
/* UNDER CONSTRUCTION */
.mbox.underconstruction {
border-color: rgb(var(--construct));
background-color: rgba(var(--construct), var(--opacity));
}
}
table.ambox td.ambox-image {         /* Celda de img a la izquierda */
 
  width: 52px;
.mbox.underconstruction .mbox__content__aside {
  padding: 2px 0px 2px 0.5em;        /* 0.5em left, 0px right */
border-color: rgb(var(--construct));
  text-align: center;  
}
}
table.ambox td.ambox-imageright {    /* Celda de img a la derecha */
 
  width: 52px;  
/* UPCOMING */
  padding: 2px 0.5em 2px 0px;        /* 0px left, 0.5em right */
.mbox.upcoming {
  text-align: center;  
border-color: rgb(var(--upcoming));
background-color: rgba(var(--upcoming), var(--opacity));
}
}
table.ambox-notice {
 
  border-left: 15px solid #0080FF;   /* Azul */
/* UNOFFICIAL TL */
.mbox.unofficial-tl {
border-color: rgb(var(--unofficialtl));
background-color: rgba(var(--unofficialtl), var(--opacity));
}
}
table.ambox-serious {
 
  border-left: 15px solid #C00;       /* Rojo */
/* LUA */
.mbox.lua {
border-color: rgb(var(--lua));
background-color: rgba(var(--lua), var(--opacity));
}
}
table.ambox-content {
 
  border-left: 15px solid #F63;       /* Naranja */
/* CSS */
.mbox.css {
border-color: rgb(var(--css));
background-color: rgba(var(--css), var(--opacity));
}
}
table.ambox-style {
 
  border-left: 15px solid #FC3;       /* Amarillo */
/* SANDBOX */
.mbox.sandbox {
border-color: rgb(var(--sandbox));
background-color: rgba(var(--sandbox), var(--opacity));
}
}
table.ambox-merge {
 
  border-left: 15px solid #95B;       /* Purpura */
.mbox.sandbox .mbox__content__aside {
    border-color: rgb(var(--sandbox));
}
}
table.ambox-license {
 
  border-left: 15px solid #088A08;   /* Verde */
/* High Risk */
.mbox.highrisk {
border-color: var(--type-important);
background-color: rgba(200,0,0, var(--opacity));
}
}
table.ambox-protection {
 
  border-left: 15px solid #BBA;       /* Gris */
.mbox.highrisk .mbox__content__aside {
border-color: var(--type-important);
}
}


/* VISIBILIDAD MÓVIL */
/* NAMEORDER */
@media (min-width: 720px) {
.mbox.nameorder {
.mf-mobile-only {
border-color: rgb(var(--names));
display:none
background-color: rgba(var(--names), var(--opacity));
}
}
}


/* PLANTILLA FICHA-EVENTO */
/* Change History */
.event img {
.mbox.changehistory {
    width: 100%;
border-color: rgb(var(--changehistory));
    height: auto;
background-color: rgba(var(--changehistory), var(--opacity));
}
}

Revisión actual - 04:40 6 nov 2024

body, #firstHeading, h1, h2, h3, h4, h5,
.mw-body h1, .mw-body h2, .mw-body #firstHeading, 
body em, body i, body strong {font-family: 'Open Sans', sans-serif;}
body.page-Página_principal.action-view h1.firstHeading, body.page-Página_principal.action-submit h1.firstHeading { display: none; }

li#footer-info-lastmod,
li#footer-info-viewcount,
li#footer-places-about,
li#footer-places-disclaimer {
  display: none !important;
}

#p-navigation h5 {
  display: none !important;
}

.nowrap { 
    white-space: nowrap;
}

.toggle-head {
  background:url(//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/HW_open_arrow.svg/10px-HW_open_arrow.svg.png) no-repeat 0% center;
}

.toggle-head:hover {
  text-decoration:underline;
  cursor:pointer;
}

.redirect-in-category, .allpagesredirect a {
  color: gray;
}

.nodisplay {
  display: none !important;
}

/* Ambox: Noticias y páginas de proyecto */

table.ambox {
  width: 80%; 
  margin: 0 auto; 
  border-collapse: collapse; 
  background: #f8fcff; 
  border: 1px solid #aaa; 
  border-left: 15px solid #39f;       /* Barra azul predeterminada */
}
table.ambox th, table.ambox td {      /* Celda(s) de mensajes */
  padding: 0.25em 0.5em;              /* 0.5em left/right */
}
table.ambox td.ambox-image {          /* Celda de img a la izquierda */
  width: 52px; 
  padding: 2px 0px 2px 0.5em;         /* 0.5em left, 0px right */
  text-align: center; 
}
table.ambox td.ambox-imageright {     /* Celda de img a la derecha */
  width: 52px; 
  padding: 2px 0.5em 2px 0px;         /* 0px left, 0.5em right */
  text-align: center; 
}
table.ambox-notice {
  border-left: 15px solid #0080FF;    /* Azul */
}
table.ambox-serious {
  border-left: 15px solid #C00;       /* Rojo */
}
table.ambox-content {
  border-left: 15px solid #F63;       /* Naranja */
}
table.ambox-style {
  border-left: 15px solid #FC3;       /* Amarillo */
}
table.ambox-merge {
  border-left: 15px solid #95B;       /* Purpura */
}
table.ambox-license {
  border-left: 15px solid #088A08;    /* Verde */
}
table.ambox-protection {
  border-left: 15px solid #BBA;       /* Gris */
}
/* Arrow button formatting */

.arrowbutton {
	color:#ffffff;
	width:100px;
	padding:0.4em;
	line-height:1.5em;
}

.arrowbutton::before {
	content:"⇒ ";
	font-weight:bold;
}

.arrowbutton-red {
	background:#990000;
}

.arrowbutton-green {
	background:#339966;
}

.arrowbutton-blue {
	background:#0063BF;
}

.arrowbutton-gold {
	background:#E5B921;
}

.arrowbutton-red:hover {
    background: #ffb3b3 !important;
    color: #000000 !important;
}

.arrowbutton-green:hover {
    background: #c6ecd9 !important;
    color: #000000 !important;
}

.arrowbutton-blue:hover {
    background: #b3daff !important;
    color: #000000 !important;
}

.arrowbutton-gold:hover {
    background: #faefcb !important;
    color: #000000 !important;
}

/* Cortesía de Platonides */
#p-navigation { display: block; }
nav.vector-menu-portal { display: none; }


/* estilo de tablas */

table.rowlines { 
    border-collapse:collapse;
    border: 2px solid #BBBDBF;
    width:  100%;
    vertical-align: top;
}

table.rowlines th {
    border-bottom: 1px solid #BBBDBF;
    border-top:    1px solid #BBBDBF;
    padding:       5px;
}

table.rowlines td {
    border-bottom: 1px dotted #BBBDBF;
    padding:       5px;
}

div.rowlines-wrapper {
    padding: 0 10px 0 10px;
}

/* Header mega template */

#megaheader {
  position:relative;
  padding-bottom:1em;
  border:none;
  margin-bottom:2em;
  overflow: hidden;
}

@media screen and (min-width:982px) {
  #megaheader {
    margin-top:-3em;
    margin-left:-1.5em;
    margin-right:-1.5em;
  }
}

@media screen and (min-width:768px) and (max-width:981px) {
  #megaheader {
    margin-top:-2.7em;
    margin-left:-1em;
    margin-right:-1em;
  }
}

@media screen and (max-width:767px) {
  #megaheader {
    margin-top:-3em;
    margin-left:-1.15em;
    margin-right:-1.15em;
  }
}


@media screen and (min-width:768px) {
  #megaheader {
    height:500px;
  }

  #megaheader-short {
  	height:200px;
  }
}

@media screen and (max-width:767px) {
  #megaheader {
     height:auto;
  }
}

#megaheader img {
  -moz-transition: opacity 2s; /* Firefox 4 */
  -webkit-transition: opacity 2s; /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: opacity 2s;
}

/* Round button formatting */

.roundbutton {
    display:inline-block; border-radius:50%; color:#ffffff; width:54px; height:54px; padding:12px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}

.roundbutton-large {
    display:inline-block; border-radius:50%; color:#ffffff; width:68px; height:68px; padding:15px; margin-right:0.5em; margin-bottom:0.5em; text-align:center;
}

/* Copied from Wikivoyage for scalable-width images */

@media screen and (max-width:767px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    width: 100%;
    height: auto;
    margin-bottom: .6em;
    text-align: center;
    padding-left: 0 !important;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
    margin:0 auto;
  }
}

@media screen and (min-width:768px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    height: auto;
    margin-bottom: .6em;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
  }
  .banner-image-left {
    float: left !important;
  }
  .banner-image-left img {
    float: left !important;
  }
  .banner-image-right {
    float: right !important;
  }
  .banner-image-right img {
    float: right !important;
  }
  .banner-image-none {
    float: none !important;
  }
  .banner-image-none img {
    float: none !important;
  }
  .banner-image-center {
    padding-left: none !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .banner-image-center img {
    float: none !important;
  }
}

@media screen and (max-width:767px) {
	.no-narrow {
		display: none;
	}
}
@media screen and (min-width:768px) {
	.narrow-only {
		display: none;
	}
}

/**
 * Style for horizontal lists (separator following item).
 * @source https://www.mediawiki.org/wiki/Snippets/Horizontal_lists
 * @revision 7 (2015-11-12)
 * @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: inline;
}

.nonumtoc .tocnumber {
	display: none;
}

.nonumtoc #toc ul,
.nonumtoc .toc ul {
	line-height: 1.5em;
	list-style: none none;
	margin: .3em 0 0;
	padding: 0;
}

.hlist.nonumtoc #toc ul ul,
.hlist.nonumtoc .toc ul ul {
	/* @noflip */
	margin: 0;
}

/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.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;
}

/* Hide empty list items */
.hlist .mw-empty-li {
	display: none;
}

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

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

/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}

.hlist ol > li {
	counter-increment: listitem;
}

.hlist ol > li:before {
	content: " " counter(listitem) " ";
	white-space: nowrap;
}

.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
	content: " (" counter(listitem) " ";
}

/* ----------------------------------------------
 * Generated by Animista on 2021-9-30 18:30:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s 1s both;
	        animation: bounce-in-top 1.1s 1s both;
}
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation text-shadow-pop-bl
 * ----------------------------------------
 */
.text-shadow-pop-bl {
	-webkit-animation: text-shadow-pop-bl 1s both;
	        animation: text-shadow-pop-bl 1s both;
}
@-webkit-keyframes text-shadow-pop-bl {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: -1px 1px #555555, -2px 2px #555555, -3px 3px #555555, -4px 4px #555555, -5px 5px #555555, -6px 6px #555555, -7px 7px #555555, -8px 8px #555555;
    -webkit-transform: translateX(8px) translateY(-8px);
            transform: translateX(8px) translateY(-8px);
  }
}
@keyframes text-shadow-pop-bl {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    text-shadow: -1px 1px #555555, -2px 2px #555555, -3px 3px #555555, -4px 4px #555555, -5px 5px #555555, -6px 6px #555555, -7px 7px #555555, -8px 8px #555555;
    -webkit-transform: translateX(8px) translateY(-8px);
            transform: translateX(8px) translateY(-8px);
  }
}

/**
 * ----------------------------------------
 * Fondos con imágenes molonas
 * ----------------------------------------
 */
.bgp {
align-items: center;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.bglogo {
align-items: center;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/23/Wikisp-logo-icon.svg);
background-position: right center;
background-origin: padding-box;
background-repeat: no-repeat;
background-size: 50%;
}

/* remove border from language bar */
.mw-pt-languages {
	border: none;
}

/* Ocultar título, categorías y fecha de la última edición en la Portada */
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;
}
/* Hide title and edit tools on main page */
.page-Página_principal .mw-side,
.page-Página_principal #siteSub {
	display: none!important;
}

/* Force override until skin is updated */
.skin-citizen blockquote {
	margin: 0.8rem 20px;
	padding: 0;
}

/* From https://codepen.io/MarkBoots/pen/ZEXaEBX */

.olcards,
.olcards * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.olcards {
	list-style: none;
	counter-reset: cardCount;
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	--cardsGap: 1rem;
	gap: var(--cardsGap);
	padding-bottom: var(--cardsGap);
}

.olcards > li {
	counter-increment: cardCount;
	display: flex;
	color: white;
	--labelOffset: 1rem;
	--arrowClipSize: 1.5rem;
	margin-top: var(--labelOffset);
}

.olcards > li::before {
	content: counter(cardCount, decimal-leading-zero);
	background: white;
	color: var(--cardColor);
	font-size: 2em;
	font-weight: 700;
	transform: translateY(calc(-1 * var(--labelOffset)));
	margin-right: calc(-1 * var(--labelOffset));
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-inline: 0.5em;
}

.olcards > li .content {
	background-color: var(--cardColor);
	--inlinePadding: 1em;
	--boxPadding: 0.5em;
	display: grid;
	padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize))
		var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
	grid-template-areas:
		"icon title"
		"icon text";
	gap: 0.25em 1em;
	clip-path: polygon(
		0 0,
		calc(100% - var(--arrowClipSize)) 0,
		100% 50%,
		calc(100% - var(--arrowClipSize)) 100%,
		calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
		0 calc(100% + var(--cardsGap))
	);
	position: relative;
}

.olcards > li .content::before {
	content: "";
	position: absolute;
	width: var(--labelOffset);
	height: var(--labelOffset);
	background: var(--cardColor);
	left: 0;
	bottom: 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	filter: brightness(0.75);
}

.olcards > li .content::after {
	content: "";
	position: absolute;
	height: var(--cardsGap);
	width: var(--cardsGap);
	background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
	left: 0;
	top: 100%;
}

.olcards > li .icon {
	grid-area: icon;
	align-self: center;
	font-size: 2em;
}

.olcards > li .content .title {
	grid-area: title;
	font-size: 1.25em;
}

.olcards > li .content .text {
	grid-area: text;
}

/**
  * Mbox
  * From https://genshin-impact.fandom.com/wiki/MediaWiki:Mbox.css?oldid=1644313
  */
 
.mbox {
	--type-important: rgba(200, 0, 0, 0.8);
	--type-moderate: rgba(233, 124, 47, 0.8);
	--type-minor: rgba(241, 197, 37, 0.8);
	display: flex;
	position: relative;
	background-color: var(--custom-mbox-bg);
	border: 1px solid #d6d6d6;
	border-left-width: 8px;
	border-left-color: #d6d6d6;
	border-radius: 3px;
	margin-bottom: 5px;
	min-height: 32px;
}

.mbox.mbox-type-important {
	border-left-color: var(--type-important);
}

.mbox.mbox-type-moderate {
	border-left-color: var(--type-moderate);
}

.mbox.mbox-type-minor {
	border-left-color: var(--type-minor);
}

.mbox__content {
	display: table;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 15px;
}

.mbox__content__image {
	display: table-cell;
	width: 40px;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding-right: 15px;
}

.mbox__content__wrapper {
	display: table-cell;
	vertical-align: middle;
}

.mbox__content__header {
	display: block;
	font-weight: bold;
}

.mbox__content__text {
	display: block;
}

.mbox__content__text__comment {
	font-size: small;
}

.mbox__content__aside {
	display: table-cell;
	width: 100px;
	vertical-align: middle;
	text-align: center;
	padding-left: 15px;
	border-left: 1px solid #d6d6d6;
}

.mbox__close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 2px 7px;
	font-weight: bold;
	font-size: 16px;
	color: #bbb;
	cursor: pointer;
	transition: all .15s ease-in;
}

.mbox__close:hover {
	color: #777;
}

.mbox__close:after {
	content: '×';
}

.mw-collapsed+.mbox__close {
	transform: rotate(45deg);
	padding: 4px 7px 5px 2px;
}

/* Remove accessibility feature for mbox toggle */
.mw-customtoggle-mbox {
	outline: none;
}

/* From https://genshin-impact.fandom.com/wiki/MediaWiki:FD_Mbox.css?oldid=1505978 */

:root {
  --stub: 233, 206, 98;
  --cbt: 72, 123, 106;
  --mild: 220, 119, 90;
  --removed: 135, 27, 65;
  --cleanup: 171, 59, 74;
  --construct: 233, 165, 98;
  --upcoming: 83, 53, 126;
  --unofficialtl: 24, 217, 207;
  --lua: 70, 96, 211;
  --css: 35, 100, 240;
  --sandbox: 161, 206, 191;
  --names: 157, 209, 209;
  --changehistory: 80, 107, 169;
  --opacity: 0.15;
}

.mbox__content__text {
	padding-right: 10px;
}

.mbox__content__aside , .mbox__content__text__comment {
	line-height: 18px;
}

/* STUB */
.mbox.stub {
	border-color: rgb(var(--stub));
	background-color: rgba(var(--stub), var(--opacity));
}

.mbox.stub .mbox__content__aside {
	border-color: rgb(var(--stub));
}

/* CBT CONTENT */
.mbox.CBT {
	border-color: rgb(var(--cbt));
	background-color: rgba(var(--cbt), var(--opacity));
}

/* CHINA ONLY */
.mbox.chinaonly {
  border-color: rgb(var(--construct));
  background-color: rgba(var(--construct), var(--opacity));
}

/* CLEANUP */
.mbox.cleanup {
	border-color: rgb(var(--cleanup));
	background-color: rgba(var(--cleanup), var(--opacity));
}

.mbox.cleanup .mbox__content__aside {
	border-color: rgb(var(--cleanup));
}

.mbox.cleanup-mild {
	border-color: rgb(var(--mild));
	background-color: rgba(var(--cleanup), var(--opacity));
}

.mbox.cleanup-mild .mbox__content__aside {
	border-color: rgb(var(--mild));
}

.mbox.cleanup-top {
	border-color: rgb(var(--mild));
	background-color: rgba(var(--cleanup), var(--opacity));
}

.mbox.cleanup-top .mbox__content__aside {
	border-color: rgb(var(--mild));
}

/* REMOVED */
.mbox.removed {
	border-color: rgb(var(--removed));
	background-color: rgba(var(--removed), var(--opacity));
}

/* SPOILER */
.mbox.spoiler {
	border-color: rgb(var(--cleanup));
	background-color: rgba(var(--cleanup), var(--opacity));
}

/* UNDER CONSTRUCTION */
.mbox.underconstruction {
	border-color: rgb(var(--construct));
	background-color: rgba(var(--construct), var(--opacity));
}

.mbox.underconstruction .mbox__content__aside {
	border-color: rgb(var(--construct));
}

/* UPCOMING */
.mbox.upcoming {
	border-color: rgb(var(--upcoming));
	background-color: rgba(var(--upcoming), var(--opacity));
}

/* UNOFFICIAL TL */
.mbox.unofficial-tl {
	border-color: rgb(var(--unofficialtl));
	background-color: rgba(var(--unofficialtl), var(--opacity));
}

/* LUA */
.mbox.lua {
	border-color: rgb(var(--lua));
	background-color: rgba(var(--lua), var(--opacity));
}

/* CSS */
.mbox.css {
	border-color: rgb(var(--css));
	background-color: rgba(var(--css), var(--opacity));
}

/* SANDBOX */
.mbox.sandbox {
	border-color: rgb(var(--sandbox));
	background-color: rgba(var(--sandbox), var(--opacity));
}

.mbox.sandbox .mbox__content__aside {
    border-color: rgb(var(--sandbox));
}

/* High Risk */
.mbox.highrisk {
	border-color: var(--type-important);
	background-color: rgba(200,0,0, var(--opacity));
}

.mbox.highrisk .mbox__content__aside {
	border-color: var(--type-important);
}

/* NAMEORDER */
.mbox.nameorder {
	border-color: rgb(var(--names));
	background-color: rgba(var(--names), var(--opacity));
}

/* Change History */
.mbox.changehistory {
	border-color: rgb(var(--changehistory));
	background-color: rgba(var(--changehistory), var(--opacity));
}