MediaWiki:Common.css: mudanças entre as edições

Edição das 23h43min de 9 de novembro de 2024

/** o código CSS colocado aqui será aplicado a todos os temas */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral+SC&display=swap');
body.page-Página_principal #firstHeading, body.page-Página_principal_en #firstHeading  {display:none;}
body {font-family: 'Spectral', serif; width: 100%; margin: 0px; background-color: #EAECF0;}
body {font-family: 'Spectral', serif;}
#logoRuna {text-align:center;}
#logoRuna img {
	width:60%;
	margin: 20px auto 20px auto;
	position: relative;
	background-image: url("https://wiki.runarcana.org/images/5/5a/Barra_02.png");
	background-position: top center;
	background-repeat: no-repeat;
	padding-top: 50px;
}
#mw-footer-container {background-color: #72777D;}
#mw-footer {background-color: #72777D; text-align: center;}
#content h1, #content h2, #content h3, .md-headline { font-family: 'Spectral SC', serif; letter-spacing: -2px; color: #745D36;}
span.mw-editsection {letter-spacing: normal;}

.wikitable {border: 2px solid #000; padding:0px; border-spacing:0;}
.wikitable tbody {border-spacing:0;  border: none;}
.wikitable tbody tr th {border-spacing:0; border: none; padding:0 15px; font-family: 'Spectral SC', serif; letter-spacing: -1px; background-color: #B4A7D6; }
.wikitable tbody tr td{ border-spacing:0; border: none; padding: 0px 10px;}
.wikitable tbody tr:nth-child(odd) { background-color: #D9D2E9;}

/** Nova Tabela*/
.purple {border: 6px double #585268; padding:0; border-spacing:0; border-radius:10px;}
.purple caption:before{content:'↼';}
.purple caption:after{content:'⇀';}
.purple caption{text-align: center; font-family: 'Spectral SC', serif; font-weight:bold; font-size: 16px; border:0px;}
.purple td{padding: 0px 10px;}
.purple th{ background-color: #B4A7D6; font-family:'Spectral SC', serif; letter-spacing: -1px; font-size: 13px; border-bottom: 6px solid #585268; overflow: hidden;padding: 0px 10px;}
.purple tr:nth-child(odd) { background-color: #D9D2E9;}
.purple tr:not(:first-child):hover{background-color:#585268; color: #FFF;}
.purple tr:not(:first-child):hover a{background-color:#585268; color: #FFF; text-decoration:underline;}
.purple tr:not(:first-child):hover a:hover{background-color:#585268; color: #D9D2E9;}

.shadeCenter{
-webkit-box-shadow: 0px 15px 25px -3px rgba(170,170,170,1);
-moz-box-shadow: 0px 15px 25px -3px rgba(170,170,170,1);
box-shadow: 0px 15px 25px -3px rgba(170,170,170,1);
}

.shadeSide{
-webkit-box-shadow: 15px 15px 25px -15px rgba(170,170,170,1);
-moz-box-shadow: 15px 15px 25px -15px rgba(170,170,170,1);
box-shadow: 15px 15px 25px -15px rgba(170,170,170,1);
}

.shadeUp{
	filter: drop-shadow(0px 0px 6px #aaaaaa);
	margin:20px auto !important;
	border-radius: 10px;
	overflow: hidden;
}

.criatura tbody tr th {border-spacing:0; border: none; padding:15px 0 0 15px; font-family: 'Spectral SC', serif; letter-spacing: -1px; background-color: #F8F9FA; }
.tabColor{ color: #7464AD; font-weight: bold; }

table.organize h2{ text-align:left;}

/* {{pp|small=yes}} */

/*.mw-headline:target { */
/*  background-color: gold;*/
/*}*/

#mp-topbanner {
	clear: both;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin-top: 1.2em;
	border-color: #ddd;
	background-color: #f9f9f9;
	white-space: nowrap;
}

.mp-bordered,
.mp-h2,
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
	border-width: 1px;
	border-style: solid;
}

#mp-topbanner, .mp-h2, #mp-left {color: #000;}
#mp-welcomecount {margin: 0.4em; width: 100%; text-align: center; float: center;}
#mp-welcome { font-size: 162%; padding: 0.1em; width: 100%;}
#mp-free { font-size: 95%;}
#articlecount { font-size: 85%;}

#mp-portals {
	position: absolute;
	right: -1em;
	top: 50%;
	margin-top: -2.4em;
	width: 38%;
	min-width: 25em;
	font-size: 95%;
}

#mp-portals li {position: absolute; left: 0; top: 0;}
#mp-portals .portal-hmid {left: 33%;}
#mp-portals .portal-hright {left: 66%;}
#mp-portals .portal-vmid {top: 1.6em;}
#mp-portals .portal-vbot {top: 3.2em;}

#mp-banner {margin-top: 4px; padding: 0.5em;background-color: #f9f9f9; border-color: #f2e0ce;}

.mp-h2,
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
	margin: 0.5em;
	padding: 0.2em 0.4em;
	font-size: 120%;
	font-weight: bold;
	font-family: inherit;
}

h2.mp-h2::after { /* Remove borders in Timeless */
	border: none;
}

.mp-later { font-size: 85%; font-weight: normal;}

#mp-upper {
	width: 100%;
	margin-top: 4px;
	margin-bottom: 0;
	border-spacing: 0;
	border-collapse: separate;
}

#mp-upper .mid-table {border-color: transparent;}
#mp-left {width: 55%; border-color: #cef2e0; background: #f5fffa;}
#mp-right {  width: 45%;  border-color: #cedff2;  background: #f5faff;}
#mp-left, #mp-right {padding: 0; vertical-align: top;}
#mp-left .mp-h2 {background: #cef2e0; border-color: #a3bfb1;}
#mp-right .mp-h2 { background: #cedff2; border-color: #a3b0bf;}
#mp-tfa, #mp-dyk, #mp-itn, #mp-otd, #mp-other-lower > div {padding: 0.1em 0.6em;}
#mp-dyk-h2, #mp-otd-h2 {clear: both;}
#mp-middle {margin-top: 4px; border-color: #f2cedd; background: #fff5fa;}
#mp-middle, #mp-lower, #mp-other-lower {overflow: auto;}
#mp-tfl-h2 { background: #f2cedd; border-color: #bfa3af;}
#mp-tfl {padding: 0.3em 0.7em;}
#mp-lower {margin-top: 4px; border-color: #ddcef2; background: #faf5ff;}
#mp-tfp-h2 {background: #ddcef2; border-color: #afa3bf;}
#mp-tfp { margin: 0.1em 0.4em 0.6em;}
#mp-other-lower {padding: 0; border-color: #e2e2e2; margin-top: 4px;}
#mp-dyk, #mp-otd, #mp-other-lower {padding-bottom: 0.5em;}
#mp-other-lower .mp-h2 { background: #eee; border-color: #ddd; color: #222;}

@media (max-width: 875px) {
	
	body.skin--responsive #mp-welcomecount {
		width: auto;
	}

	body.skin--responsive #mp-topbanner {
		min-width: 0;
		white-space: normal;
	}
	
	body.skin--responsive #mp-portals {
		display: block;
		position: static;
		width: auto;
		min-width: 0;
		text-align: center;
		border-top: 1px solid #ddd;
		padding: 0.4em 0;
		margin: 0 0.4em;
	}
	
	body.skin--responsive #mp-portals li {
		position: static;
		display: inline;
		padding: 0 5px;
	}
	
	body.skin--responsive #mp-topbanner .portal-hright {
		white-space: nowrap;
	}
	
	body.skin--responsive table,
	body.skin--responsive tr,
	body.skin--responsive td,
	body.skin--responsive tbody {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	body.skin--responsive #mp-tfp tr:first-child td:first-child a {
		text-align: center;
		display: table;
		margin: 0 auto;
	}
#mp-sumbanner{
	clear: both;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin-top: 1.2em;
	min-width: 47em;
	border-color: #ddd;
	background-color: #FFFFFF;
	white-space: nowrap;
}
#mp-summary {
    position: absolute;
    right: -1em;
    top: 0%;
    margin-top: -2.4em;
    width: 38%;
    min-width: 25em;
    font-size: 100%;
}
#mp-summary .summary-hmid {left: 33%;}
#mp-summary .summary-hright {left: 66%;}
}

/* TOC - Table of Content */
li.toclevel-3, li.toclevel-4, li.toclevel-5, li.toclevel-6 { display: none !important; visibility: hidden !important; }
#toc { display:none !important; }
.floatTOC {
	 transition: 0.2s all ease; display: block; position: fixed;
	  top: 30px;
	  right: 20px;
	  border: none;
	  background: #f6f6f6;
	  font-size: 0.8em;
	  max-width: 15em; padding: 1.2em
;
  height: 70%; white-space: nowrap; overflow: visible; margin-bot:20px;}
.floatTOC ul ul { margin: 0 0 0 0.75em;}
.floatTOC:hover { box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);}
.floatTOC > * { transition: 0.2s all ease; opacity: 0.5;}
.floatTOC:hover > * { opacity: 1;}
.floatTOC .tocnumber { display: none;}
.floatTOC a { color: #000;}
.floatTOC a.active { font-weight: bold; color: #007bff;}
.floatTOC .toctoggle { display: none;}
.floatTOC #toctitle { display: none;}
@media screen and (min-width: 601px) { div.toc.floatTOC { display: block; } }
@media screen and (max-width: 600px) { div.toc.floatTOC { display: none; } }
.floatTOC {margin-top: 30px; margin-bottom:10px; height:90%; }
.floatTOC #toctogglecheckbox{ display:none !important;}
.floatTOC .toctogglespan { display:none;}
#toctogglebutton {
  position: absolute; right: 100%; padding: 4px 0; background: #f6f6f6;
  border: none; box-shadow: 0 1px 2px 1px rgb(0 0 0 /2%);
  border-radius: 4px 0 0 4px; opacity: 1; color: #aaa; display: flex;
  align-items: center; }
.floatTOC:hover #toctogglebutton { color: #888;}
.floatTOC>ul { overflow-y: auto; height: -webkit-fill-available; margin: 16px -10px 0 -10px;}
.hiddenFloatTOC { transform: translateX(110%);}
i.material-icons { font-size: 16px; }
/* FIM - TOC - Table of Content */

#n-Origens, 
#n-Classe, 
#n-Detalhamento, 
#n-Personalização, 
#n-Equipamento {
	margin-left: 20px !important;
	list-style-type: square !important;
}

.client-darkmode {background-color: #111317;}
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.6); border-radius: 2px;}

/** Novo Código */
.item_table { text-align:left; padding-left:10px !important;}
.color-left, .color-right, .color-middle {
    background: linear-gradient(270deg, #9800ff, #a08855);
    background-size: 400% 400%;

    -webkit-animation: PurpleGold 5s ease infinite;
    -moz-animation: PurpleGold 5s ease infinite;
    animation: PurpleGold 5s ease infinite;
}

@-webkit-keyframes PurpleGold {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes PurpleGold {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes PurpleGold {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
#p-logo-text{padding: 0.35em 0.75em 0 0;}

#homebox{
	margin:20px auto;
	width:80%;
	position: relative;
	background-image: url("https://wiki.runarcana.org/images/5/51/Barra_01.png");
	background-position: bottom center;
	background-repeat: no-repeat;
	padding-bottom: 30px;
	text-align: justify;
	font-family: 'Spectral SC', serif;
	/*color:#745D36; */
}
#homebox p{	
	background: linear-gradient(to right, #A08855 0%, #9800FF 50%, #A08855 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#bannerVersion{
	background-color: #f9f9f9;
	border-width: 1px;
	border-style: solid;
	border-color: #f2e0ce;
	text-align:	center;
	margin:20px auto;
}

#mw-content-container {border-bottom: solid 4px #B4A7D6;}
.firstHeading { border-bottom: solid 4px #745D36 !important; }

/* Tab Switcher */
.switchTab {width: 11%;}
.switchTab a {
    border-radius: 10px;
    color: white;
    width: 100%;
    display: block;
    padding-top: 90px;
    font-weight: bold;
    text-shadow: 2px 2px 2px #000000, -2px -2px 2px #000000;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-size: 100%; /* Define o tamanho inicial da imagem de fundo */
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size 1s ease; /* Transição do aumento da imagem */
}

.switchTab a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    transition: background-image 1s linear; /* Gradiente de fundo com transição */
    z-index: -1;
}
td.humano a {background-image: url("https://wiki.runarcana.org/images/a/a0/Icons_Origens_-_Humano.png");}
td.antroplantae a {background-image: url("https://wiki.runarcana.org/images/1/1e/Icons_Origens_-_Antroplantae.png");}
td.construto a {background-image: url("https://wiki.runarcana.org/images/8/8a/Icons_Origens_-_Construto.png");}
td.meiodragao a {background-image: url("https://wiki.runarcana.org/images/9/94/Icons_Origens_-_Meio_Dragão.png");}
td.minotauro a {background-image: url("https://wiki.runarcana.org/images/6/62/Icons_Origens_-_Minotauro.png");}
td.troll a { background-image: url("https://wiki.runarcana.org/images/0/01/Icons_Origens_-_Troll.png");}
td.vastaya a {background-image: url("https://wiki.runarcana.org/images/b/ba/Icons_Origens_-_Vastaya.png");}
td.yordle a {background-image: url("https://wiki.runarcana.org/images/0/0d/Icons_Origens_-_Yordle.png");}
td.runinata a {background-image: url("https://wiki.runarcana.org/images/3/30/Icons_Origens_-_Runinata.png");}

td.acolito a {background-image: url("https://runarcana.org/assets/wiki/icons_classes_01_acolito.png");} 
td.arcano a { background-image: url("https://runarcana.org/assets/wiki/icons_classes_02_arcano.png"); }
td.atirador a { background-image: url("https://runarcana.org/assets/wiki/icons_classes_03_atirador.png"); }
td.bodisatva a { background-image: url("https://runarcana.org/assets/wiki/icons_classes_04_bodisatva.png"); }
td.bruto a { background-image: url("https://runarcana.org/assets/wiki/icons_classes_05_bruto.png"); }
td.cacador a { background-image: url("https://runarcana.org/assets/wiki/icons_classes_06_cacador.png"); }
td.combatente a { background-image: url("https://runarcana.org/assets/wiki/icons_classes_07_combatente.png"); }
td.mercurial a { background-image: url("https://runarcana.org/assets/wiki/icons_classes_08_mercurial.png"); }
td.xama a { background-image: url("https://runarcana.org/assets/wiki/icons_classes_09_xama.png"); }


.switchTab a:hover {background-size: 120%; color: white;}
.switchTab a:hover::before {background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);}