MediaWiki:Common.css

@import "https://unpkg.com/@phosphor-icons/[email protected]/src/bold/style.css";
@import url("/es/load.php?mode=articles&only=styles&articles=MediaWiki:Usernames.css|MediaWiki:GoldPass.css|MediaWiki:Buttons.css");
@import url("/es/load.php?mode=articles&only=styles&articles=MediaWiki:HeroSkins.css|MediaWiki:ClanHouseGenerator.css&ctype=text/css&action=raw");
@import "https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;600;700&display=swap";

@font-face {
    font-family: 'Clash';
    font-style: normal;
    font-weight: 400;
    src: local('Clash'), url(https://cdn.polandball.wiki/central/a/a9/Supercell-magic-webfont.ttf);
}

@font-face {
    font-family: 'BackBeat';
    font-style: normal;
    font-weight: 100;
    src: local('BackBeat'), url(https://cdn.polandball.wiki/central/9/9a/CCBackBeat-Light.ttf);
}

/* Tipografía de Clash of Clans en los encabezados
   ----------------------------------------------- */
#PageHeader h1,
.mw-parser-output > h5,
.mw-parser-output > h6{
    font-family: BackBeat;
    color: #fff;
    -webkit-text-stroke: 1px black;
    font-weight: 100;
 }
.page-header__title {
    font-family: BackBeat;
    color: #fff;
    -webkit-text-stroke: 1px black;
    font-weight: 100;
 }
.mw-parser-output > h2 {
	font-family:BackBeat !important;
	line-height:1 !important;
	font-weight: 100;
}

/*	Temas
	----- */
:root {
  --primary-color: #228b22;
  --secundary-color: #0c3d77;
  --theme-purple: #5f42b5;
}

/* Plantilla:Módulo 
  ----------------- */
.mpmodule {
  --color: var( --secundary-color );
  border: 3px solid var( --color );
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin-top: 1em;
  padding: 5px;
  row-gap: 0.5em;
}
.theme-light .mpmodule {
  --color: var( --primary-color );
}
.mpmodule-header {
  background-color: var( --color );
  border-radius: 5px;
  color: #fff;
  font-family: 'Clash';
  font-size: 22px;
  padding: 5px;
  text-align: center;
}

/* Plantilla:Aviso 
   --------------- */
.aviso {
  border-radius: 8px;
  border-style: solid;
  border-width: 4px;
  display: flex;
  margin: 1em 0;
  padding: 0 1em;
}
.aviso.aviso-imagen-debajo .aviso-imagen {
  align-self: end;
}
.aviso-contenido {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0.5em 0;
  justify-content: space-around;
}
.aviso-encabezado {
  font-family: Clash;
  font-size: 19px;
}

/**** Filtro
   ------ */
/* versión base de es.genshin-impact.fandom / Usuario:bitomic  
  --------------------------------------------------------- ****/
.filter-controls {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	row-gap: 0.5em;
	margin-bottom: 0.5em;
}
.filter-controls > div {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	column-gap: 1em;
}
.filter-controls > div:first-child {
	border: 0;
	padding: 0.3em 1em;
	border-radius: 4px;
	font-weight: bold;
	width: 100%;
	grid-column: 1 / 3;
}
.filter-controls > div:not(:first-child) > div {
	border: 2px solid black;
	padding: 0.2em;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
}
.bright img {
	filter: brightness(2)
}
.filter-controls .characters-toggle {
	background: var( --fondo );
}
/* Cuadro de las tropas
   -------------------- */
.troopbox {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 100px;
}
.troopbox-image {
  align-items: center;
  background: var( --fondo );
  border: 2px solid var( --borde );
  border-radius: 5px;
  box-shadow: 2px 2px 5px var( --sombra );
  display: flex;
  height: 100px;
  justify-content: center;
  width: 100px;
}
.troopbox-name {
  font-size: 0.9em;
  margin-top: 0.5em;
}

/* Estilo dependiendo del tipo de elixir
   ------------------------------------- */
.troopbox.tipo-supertropas,
.characters-toggle[data-tipo="supertropas"] {
  --borde: #c49e64;
  --fondo: #c49e64;
  --sombra: #c49e64;
}
.troopbox.tipo-elixir,
.characters-toggle[data-tipo="elixir"] {
  --borde: #416f91;
  --fondo: #c547bf;
  --sombra: #4f7089;
}
.troopbox.tipo-oscuras,
.characters-toggle[data-tipo="oscuras"] {
  --borde: #4e3c59;
  --fondo: #4e3c59;
  --sombra: #423050;
}

.troopbox.tipo-heroes,
.characters-toggle[data-tipo="heroes"] {
  --borde: #c68920;
  --fondo: #c68920;
  --sombra: #c68920;
}

.troopbox.tipo-edc,
.characters-toggle[data-tipo="edc"] {
  --borde: #aa30fb;
  --fondo: #aa30fb;
  --sombra: #aa30fb;
}
.troopbox.tipo-asedio,
.characters-toggle[data-tipo="asedio"] {
  --borde: #89421c;
  --fondo: #89421c;
  --sombra: #89421c;
}
.troopbox.tipo-animales,
.characters-toggle[data-tipo="animales"] {
  --borde: #5b548a;
  --fondo: #5b548a;
  --sombra: #89421c;
}
.characters-toggle[data-lugar="aldea"] {
  --fondo: rgba(33,140,205,0.6);
}
.characters-toggle[data-lugar="base"] {
  --fondo: rgba(26,49,224,0.58);
}

/** Tablas colapsables *********************************************************
 *  ------------------
 * Descripción: Permite colapsar las tablas, mostrando sólo el Encabezado. Ver
   ---------------------------------------------------------------------------
 * http://www.mediawiki.org/wiki/Manual:Collapsible_tables.
  ---------------------------------------------------------
 */
 
table.collapsed tr.collapsible {
        display: none;
}
 
.collapseButton {               /* 'show'/'hide' buttons created dynamically by the             */
        float: right;           /* CollapsibleTables JavaScript in [[MediaWiki:Common.js]] */
        font-weight: normal;    /* are styled here so they can be customised.             */
        text-align: right;
        width: auto;
}

.i18ndoc {
    background-color: #FFF77D;
    border-bottom: 1px solid lightgrey;
    font-family: monospace;
    font-size: 8pt;
    height: 140px;
    overflow: auto;
    padding: 3px;
}

/* Hover Class 
   ----------- */
.hoverimage img { opacity:0.75; filter:alpha(opacity=75); /* For IE8 and earlier */ }
.hoverimage img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }

/* Navegación Hover Class
   ---------------------- */
.theme-light .hovernav img:hover {
    position: relative;
    top: 1px;
    left: 1px;
    -webkit-filter: drop-shadow(-4px -4px 3px rgba(0,0,0,0.5));
            filter: drop-shadow(-4px -4px 3px rgba(0,0,0,0.5));
}
.theme-dark .hovernav img:hover {
    position: relative;
    top: 1px;
    left: 1px;
    -webkit-filter: drop-shadow(-4px -4px 3px rgba(255,255,255,0.5));
            filter: drop-shadow(-4px -4px 3px rgba(255,255,255,0.5));
}
.hovernav img:active {
    position: relative;
    top: -1px;
    left:-1px;
    -webkit-filter: none;
            filter: none;
}

 /*verification positioning and sizing
   ----------------------------------- */
.verify{
	width:25px;
	height:25px;
}

/*MyXXX page creation box hiding
  ------------------------------ */
div.createHide > div.createbox{
   text-align:left !important;
}
div.createHide > div.createbox > form.createboxForm > input.createboxInput{
   display:none;
}
div.createHide > div.createbox > form.createboxForm > input.createboxButton{
   height:19px !important;
}

/*Hover-expand code
 ------------------ */
div.expand-height-child{
    overflow:hidden;
    max-height:0px;
    -webkit-transition: max-height .5s linear;
    -moz-transition: max-height .5s linear;
    transition: max-height .5s linear;
}
div.expand-height-parent:hover ~ div.expand-height-child, div.expand-height-child:hover{
    max-height:700px;
}
div.expand-width-child{
    overflow:hidden;
    max-width:0px;
    -webkit-transition: max-width .5s linear;
    -moz-transition: max-width .5s linear;
    transition: max-width .5s linear;
}
div.expand-width-parent:hover ~ div.expand-width-child, div.expand-width-child:hover{
    max-width:700px;
}

/*	Infoboxes portátiles
	-------------------- */
.portable-infobox {
  border-radius: 5px;
  padding: 5px;
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
  border-radius: 5px;
}
.portable-infobox {
  margin-right: 8px;
  overflow: hidden;
}
.portable-infobox .pi-image {
    position: relative;
    padding: 5px 0 20px 0;
}
.portable-infobox .pi-image img {
    -webkit-filter: drop-shadow(0 4px 5px rgba(0,0,0,.4));
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.4));
}
.portable-infobox .pi-data-value, .pi-europa .pi-data-label {
    font-size: 14px;
}
.theme-dark .portable-infobox .pi-data:not(:first-of-type) {
    border-top: 1px solid #005c62; 
}
.theme-light .portable-infobox .pi-data:not(:first-of-type) {
    border-top: 1px solid #29781c; 
}

.portable-infobox .pi-section-navigation, .portable-infobox .pi-media-collection-tabs
{
	margin: 0 -1px;
}

/* Protection image CSS
   -------------------- */
div.protection-image:not(.protection-image-visible) {
   display: none;
}

/*Supercell Interwiki links
  ------------------------- */
/* Enlaces a otros juegos en los Encabezados */
#ClashRoyaleLink {
    width: 100px;
    height: 25px;
    background-image: url("/es/images/6/6c/Clash_Royale_Logo.png");
    background-repeat: no-repeat;
    background-size: 100px;
    position: relative;
    top: 5px !important;
    transition: filter 0.2s;
}
#ClashRoyaleLink:hover,
#ClashQuestLink:hover {
   filter: drop-shadow(0 2px 5px var(--theme-link-color));
}
#ClashQuestLink .text {
    color: transparent !important;
}
#ClashQuestLink {
    width: 100px;
    height: 25px;
    background-image: url("/es/images/0/06/ClashQuestWikiLogo.png");
    background-repeat: no-repeat;
    background-size: 100px;
    position: relative;
    top: 5px !important;
    transition: filter 0.2s;
}
#ClashRoyaleLink .text {
    color: transparent !important;
}
.mw-indicators {
    overflow-x: hidden;
    height: 30px;
}

/* Masthead Background (hecho a medida para la wiki, por E12Dragon)
   ----------------------------------------------------------------
#userProfileApp {
	background-image: url("https://static.wikia.nocookie.net/e12dragon_testing/images/d/da/Clash_Background.png");
	background-position-y: bottom;
	background-repeat: no-repeat;
	background-position-x: right;
}
.user-profile-navigation__link.false {
	opacity: .85 !important;
}*/

/*Ocultar el enlace del módulo de desafíos de temporada si está en la página de desafíos de temporada
 ---------------------------------------------------------------------------------------------------- */
/* Ocultar borde superior de la Portada */
body[class*="rootpage-Wiki_Clash_of_Clans_en_Español "] #mw-content-text::before,
body[class*="rootpage-Wiki_Clash_of_Clans_en_Español "] #siteSub {
	display:none;
}

/*Statistic background
  -------------------- */
.stats-background {
	background:var(--theme-page-background-color--secondary);
	border:1px solid var(--theme-border-color);
	margin:10px 0 10px 0;
	padding: 10px;
	border-radius:15px;
}
.theme-dark .stats-background table th,
.theme-dark .stats-background table td {
	border-color:lightgrey !important;
}

/* Highlights for notable changes (mostly for the NumberAvailable template and for Builder Base troops)
  ----------------------------------------------------------------------------------------------------- */
body.theme-dark .change-highlight {
	background:darkslateblue !important;
	font-weight:bold;
}
body.theme-light .change-highlight{
	background:lemonchiffon !important;
	font-weight:bold;
}
/* Invert math tags on Dark Mode
   ----------------------------- */
body.theme-dark .mwe-math-fallback-image-inline {
	filter:invert(1);
}
body.theme-dark .entity-content pre code {
	background-color:var(--theme-page-background-color--secondary);
}
/* Hide on Light/Dark Theme class
   ------------------------------ */
body.theme-light .light-theme-hidden {
	display:none;
}
body.theme-dark .dark-theme-hidden {
	display:none;
}

/* Img Template 
   ------------ */
.FullResImg img{
	width:inherit
}
.FullResImg a{
	width:inherit
}
.FullResImg a img{
	width:inherit
}

/* Remover ícono de los enlaces externos
   ------------------------------------- */
.plainlinks a.external:after { background: none; width: 0; }
.noexternal .external::after {
    background: none !important;
    margin-left: 0 !important;
}

/* Estilos para el generador de escudos del clan */
/** Tomado de la comunidad inglesa de Clash of Clans (con permiso de los creadores) **/
/** ---- **/
/** Clan Badge Generator - taken from the English Clash of Clans community with its creators' permission **/
/** Thank you so much! **/
#clan-selector {
    border: 2px solid #dd360a;
    background-color: gainsboro;
}
 
#canvas-body {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
 
#canvas-body #canvas_mirror {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 144px;
}

#canvas-body #canvas_gen {
    position: relative;
    z-index: 1;
}
 
#options-container {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 165px);
}
 
#options-container .container {
    border: 1px solid #dd360a;
    width: 100%;
    background-color: #6e6e6e;
    margin-bottom: 2px;
}
 
#options-container .container-header {
    color: white;
    background-color: #dd360a;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    padding: 5px 0;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}
 
#options-container .container-values {
    margin: 2px;
}
 
#container-lvl {
    text-align: center;
    color: white;
}
.img-toggler {
    cursor: pointer;
    border: 1px solid transparent;
}
 
#container-pg .img-toggler:nth-last-child(2) {
    background-color: gainsboro;
    border-radius: 25px;
}
 
.img-toggler + .img-toggler {
    margin-left: 2px;
}
 
.container .img-selected {
    border: 1px solid #dd360a;
    border-radius: 0 !important;
}
 
#container-pg .container-scroll {
    overflow-x: scroll;
}
 
#container-pg .container-values {
    width: 2000px;
}

/***********************/
/* Template:TitleBlock */
/***********************/
.TitleBlock a > img:hover {
	background-image:url(https://clashofclans.wiki.gg/es/images/3/32/Spotlight.png);
	filter:brighness(1.5);
}
.TitleBlock.Large a > img:hover {
	background-size:288px;
}
/***************************/
/* Template:ArmyTitleBlock */
/***************************/
.ArmyTitleBlock a > img:hover {
	background-image:url(https://clashofclans.wiki.gg/es/images/3/32/Spotlight.png);
	filter:brighness(1.5);
	background-size:156px;
}
.ArmyTitleBlock.Large a > img:hover {
	background-size:312px;
	width:300px;
}

/* Plantila:Upperbox */
.clashofclans-upperbox__toggle {
	inset: .75rem .75rem auto auto;
}

/* Tabs in Recent Changes */
.tabber__tabs {
    display: flex;
    overflow: auto hidden;
    scrollbar-width: none;
    box-shadow: inset 0 -1px 0 0 rgba(162,170,177,0.6);
}

.tab-currenly {
    border-bottom: 3px solid var(--theme-link-color); 
    color:var(--theme-link-color) !important;
}

.tabber__tab {
    display: inline-flex;
    align-items: center;
    padding: 0.5em 0.75em;
    font-weight: bold;
    white-space: nowrap;
}
.tab-rc a:not(.tab-currenly) {
    color: var(--color-base--subtle) !important;
}

/* Selección */
.theme-dark ::selection {
  background-color: #55861d !important;
  color: white !important;
}

/* Mostrar "De Wiki Clash of Clans en Español" que está oculto por defecto */
@media screen {
  #siteSub {
    display: block;
    color: var(--color-base--subtle);
   font-size: 0.8125rem;
   line-height: var(--line-height-xs);
  }
}

/*** Special:Version Redesign ***/
.mw-version-ext-name,.mw-version-library-name {
    font-weight: bold
}

.mw-version-ext-license,.mw-version-ext-vcs-timestamp {
    white-space: nowrap
}

th.mw-version-ext-col-label {
    font-size: 0.9em
}

.mw-version-license-info strong {
    font-weight: normal
}

.mw-version-license-info em {
    font-style: normal
}

#mw-version-license + .plainlinks {
    margin-top: 10px;
    padding: 20px;
    font-size: 14px;
    border: 1px solid var(--border-color-base);
    border-radius: 3px;
    background-color: var(--border-color-base) !important;
}

#mw-version-license + .plainlinks > p {
    margin-top: 0
}

#sv-software {
    display: block;
    border: 0;
    line-height: var(--line-height-sm)
}

#sv-software tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 10px;
    background-color: var(--tema-color-fondo-cuerpo);
}

#sv-software tbody .wikitable {
    background-color: transparent !important;
}

#sv-software tr {
    padding: 10px 10px;
    border: 1px solid var(--border-color-base);
    border-radius: 3px;
    display: flex !important;
    flex-direction: column !important;
    background: var(--border-color-base);
}

#sv-software tr:hover {
    background-color: transparent !important;
}

#sv-software tr:first-child {
    display: none !important
}

#sv-software td {
    padding: 0;
    border: 0
}

#sv-software td:first-child {
    font-weight: 600;
    font-size: 1.25rem;
}

#sv-software td:nth-child(2) {
    position: relative;
    bottom: 10px;
}

.mw-version-ext-vcs-timestamp,.mw-version-ext-vcs-version {
    color: var(--color-base--subtle)
}

.mw-version-ext-name,.mw-version-library-name {
    font-weight: var(--font-weight-semibold)
}