MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* Variable font
*/
@font-face {
  font-family: 'CabinetGrotesk-Variable';
  src: url('https://cdn.polandball.wiki/central/9/98/CabinetGrotesk-Variable.woff2') format('woff2'),
       url('https://cdn.polandball.wiki/central/4/46/CabinetGrotesk-Variable.woff') format('woff'),
       url('https://cdn.polandball.wiki/central/6/61/CabinetGrotesk-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* VARS */
:root {
    --opacity-icon-base: 0.7;
    --opacity-icon-hover: 1;
    --border-color-base: rgba(0,0,0,0.08);
    --border-color-base--lighter: rgba(255,255,255,0.70);
    --border-color-base--darker: rgba(0,0,0,0.55);
}

/* Mainpage */
body.page-Wiki_Polandball {
  --height-site-background: 100%;
  --position-background: 0;
}

/* Extension:Sitenotice2 */
:root {
	--sitenotice2-border-radius: 6px;
	--sitenotice2-border: #a51919;

	--sitenotice2-background: rgba(232,189,189,0.73);
	--sitenotice2-background--header: rgba(251,225,225,0.6);
	--sitenotice2-background--secondary: #a51919;
}
/* Tema Oscuro */
.skin-citizen-dark {
	--sitenotice2-border-radius: 6px;
	--sitenotice2-border: #a51919;

	--sitenotice2-background: rgba(102,27,27,0.73);
	--sitenotice2-background--header: rgba(0,0,0,0.4);
	--sitenotice2-background--secondary: #a51919;
}

@font-face {
    font-family: 'Cabin Sketch';
    src: url(https://fonts.googleapis.com/css?family=Cabin+Sketch:400,700);
}

/*Designe 3.1
///Algunas partes fueran hechas por:
////[[User:DarkTaker]]
///[[User:LemonSaektide]] 
///[[User:Taxcy_Marsopas1]]
///[[User:Unai01]] (Activity Feed)
///Otras Comunidades (Steven Universe Wiki, Girls und Panzer Wiki, Clash Royale Wiki, etc.)
***Se recomienda dar créditos al wiki***/

/***** resaltamos a los miembros de la administración *****/
 
/** Hecho por User:Ella Jacobi**/
/* 
a[href$="Taxcy Marsopas1"] { 
    color: 	#00FFFF; 
    font-weight: bold; 
    font-family: Cabin Sketch; 
    font-size:120%; 
    }  
*/
 
a[href$="Voztok"] { 
    color: #0EA300; 
    font-weight: bold; 
    font-family: Cabin Sketch; 
    font-size:120%;
    }
 
/* Hover Classes */
.opacity img {
	opacity: 0.5;
	filter: alpha(opacity=50);
	}	
 
.opacity img:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	}
 
/** Levitate **/
.levitate {
 -webkit-animation: levitate 1s steps(10) infinite alternate;
    -moz-animation: levitate 1s steps(10) infinite alternate;
     -ms-animation: levitate 1s steps(10) infinite alternate;
      -o-animation: levitate 1s steps(10) infinite alternate;
         animation: levitate 1s steps(10) infinite alternate;
}
 
 
/* Expansible */
.textooculto {
        display: none
}
.textovisible:hover .textooculto {
        display: inline !important
}
/* Hover Classes */
.opacity img {
	opacity: 0.5;
	filter: alpha(opacity=50);
	}	
 
.opacity img:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	}
 
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
 
.shadow img {
  -webkit-transition: all 0,2s ease;
     -moz-transition: all 0,2s ease;
       -o-transition: all 0,2s ease;
      -ms-transition: all 0,2s ease;
          transition: all 0,2s ease;
}
 
.shadow img:hover {
  -webkit-filter: drop-shadow(10px 7px 1px grey)
}
 
 
/* Hover Template */
.imgUnder {
    overflow: visible;
    display: inline-block;
    position: relative
}
 
.imgOver {
    display: block;
    visibility: hidden;
    width: inherit;
    height: inherit;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}
 
.imgUnder:hover .imgOver {
    visibility: visible;
}
 
	/**** Escala de grises ****/
.grayscale img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
 
.grayscale img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}


/* Efecto Zoom (obtenido de Bleach fanlabor) */
.bigscale img {
    -webkit-transition: width 2s, height 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s;
}
 
.bigscale img:hover {
	width: 100px;
    height: 100px;
}
/* Opacidad */
.opacity img {
	opacity: 0.5;
	filter: alpha(opacity=50);
	}	
 
.opacity img:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

/****** DISEÑO DE LA PORTADA - BY SACRED OWL ******/

.portada-dyp {
    margin: 5px;
    border: 2px solid rgba(179,17,50,0.5);
    padding: 5px;
    border-radius: var(--border-radius--medium);
    color: var(--color-base);
    background-color: var(--color-surface-0);
}
.portada-dyp-header {
    font-size: 16pt;
    font-weight: bold;
    font-variant: small-caps;
    color: var(--color-base);
    padding: 20px;
    background-color: rgba(179,17,50,0.9);
    background-image: url("https://cdn.polandball.wiki/polandballes/6/61/Dots.png");
    background-repeat: no-repeat;
    background-position: right;
    border-bottom: 2px solid #850C25;
    box-shadow: none;
    border-radius: var(--border-radius--medium);
}

.modimg img { border-radius: 5em; transition: .5s; filter: grayscale(100%); }
.modimg img:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px);-webkit-transform: translateY(-8px); transform: translateY(-8px); filter: grayscale(0%); }
.modimg a.new { color:gray; transition: .5s; }
.modimg a:hover { color: var(--color-link) }
.modimg a:not(.new) { color:var(--color-link); transition: .3s; }
.modimg a:hover { color: var(--color-link) }

.modimg3 img { transition: .5s; filter: grayscale(100%); }
.modimg3 img:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px);-webkit-transform: translateY(-8px); transform: translateY(-8px); filter: grayscale(0%); }

/*Letras de usuarios*/
/**Taxcymus**/
a[href$="Taxcymus"],
a[href$="Taxcymus"] {
    color: #F2EE00 !important ;
    font-family:Corbel;
    font-size:120%;
    text-shadow: 1px 1px 2px #000000;
    font-weight:bold;
}

/**TheNozomi**/
a[href$="TheNozomi"],
a[href$="TheNozomi"] {
    color: #7B68EE !important ;
    font-family:Corbel;
    font-size:120%;
    text-shadow: 1px 1px 2px #000000;
    font-weight:bold;
}

/**Dark**/
a[href$="Dark"],
a[href$="Dark"] {
    color: #7B68EE !important ;
    font-family:Corbel;
    font-size:120%;
    text-shadow: 1px 1px 2px #000000;
    font-weight:bold;
}

/**Elosobolar**/
a[href$="Elosobolar"],
a[href$="Elosobolar"] {
    color: #DC0808 !important ;
    font-family:Corbel;
    font-size:120%;
    text-shadow: 1px 1px 2px #000000;
    font-weight:bold;
}

/**VittoriaDeBrasovia**/
a[href$="VittoriaDeBrasovia"],
a[href$="VittoriaDeBrasovia"] {
    color: #DC0808 !important ;
    font-family:Corbel;
    font-size:120%;
    text-shadow: 1px 1px 2px #000000;
    font-weight:bold;
}

/**Ivih**/
a[href$="Ivih"],
a[href$="Ivih"] {
	color: #DC0808 !important;
	font-family:Corbel;
	font-size:120%;
	text-shadow: 1px 1px 2px #000000;
	font-weight:bold;
}


/**Prro miado**/
a[href$="Prro_miado"],
a[href$="Prro_miado"] {
	color: #DC0808 !important;
	font-family:Corbel;
	font-size:120%;
	text-shadow: 1px 1px 2px #000000;
	font-weight:bold;
}


/**Tico24j299**/
a[href$="Tico24j299"],
a[href$="Tico24j299"] {
	color: #DC0808 !important;
	font-family:Corbel;
	font-size:120%;
	text-shadow: 1px 1px 2px #000000;
	font-weight:bold;
}


/**Kebab de pollo**/
a[href$="Kebab de pollo"],
a[href$="Kebab de pollo"] {
	color: #1494C6 !important;
	font-family:Corbel;
	font-size:120%;
	text-shadow: 1px 1px 2px #000000;
	font-weight:bold;
}

/* Plantilla:Pestañas */
.article-container-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    align-items: center;
    align-content: center;
    margin-bottom: 5px;
}

.article-tab a:before {
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.article-tab {
    position: relative;
    list-style: none;
    align-items: center;
    height: 30px;
    padding-bottom: 8px;
    padding-top: 8px;
    width: auto;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, border-radius 0.3s, border 0.3s;
    box-shadow: inset 0 -2px 0 0 var(--border-color-base--darker);
}

.article-tab:hover {
    background: var(--border-color-base);
}

.selected.article-tab {
    box-shadow: inset 0 -2px 0 0 #0645ad;
    color: #0645ad;
}

/* Extension:CommentStreams */
.cs-comments {
    padding-top: 20px;
    border-top: 1px solid #cccccc;
    font-family: CabinetGrotesk-Variable;
}

.cs-comments .oo-ui-buttonElement:not(.oo-ui-buttonElement-frameless) {
    display: block;
    line-height: normal;
    vertical-align: middle;
}

.cs-comments .cs-reply-comment {
    border-left: 4px solid var(--border-color-base);
    padding: 0 0 0 24px;
    margin-bottom: 15px;
}

.cs-comments div.ve-ce-branchNode,
.cs-comments .cs-title-edit-field {
    border: 1px solid var(--border-color-base);
    border-radius: 4px;
    font-weight: normal;
    font-family: var(--font-family-base);
}

.cs-comments .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
    width: 100%;
    text-align: left;
    background-color: var(--border-color-base);
    border: var(--border-color-base);
    opacity: 0.5;
    padding-top: 12px;
    padding-bottom: 12px;
}

.cs-comments .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    border-color: var(--border-color-base);
    color: var(--color-base--emphasized);
    width: 100%;
    padding: 15px 40px;
    justify-content: left;
    font-size: 15px;
    font-weight: normal;
    text-align: left;
}

.cs-comments .oo-ui-labelElement-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-comments .cs-comment-header-left {
    background: url('https://cdn.polandball.wiki/central/c/c7/UserActive.svg') no-repeat;
    background-size: 40px;
    background-position: bottom;
    height: 40px;
    width: 40px;
    filter: invert(43%) sepia(0%) saturate(0%) hue-rotate(16deg) brightness(98%) contrast(94%);
    margin-right: 5px;
}

.cs-comments .cs-reply-edit-box {
    margin-top: 10px;
    border-radius: 4px;
}

.cs-comments .cs-comment {
    background: var(--border-color-base);
    border: 1px solid var(--border-color-base);
    border-radius: 4px;
    padding: 10px;
}

.cs-comments .cs-comment-header {
    background: none !important;
    border: 0 !important;
}

.cs-comments .cs-stream-footer .oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement:first-child {
    width: 100%;
    background: var(--border-color-base);
    border: 1px solid var(--border-color-base) !important;
    margin: 5px 0;
    border-radius: 4px;
    padding-left: 5px;
}

.cs-comments .cs-stream-footer .oo-ui-buttonElement-button {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    width: 100%;
}