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

Edição atual tal como às 01h18min de 2 de dezembro 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;
	margin: 20px auto 20px auto;
	background-image: url("https://wiki.runarcana.org/images/5/5a/Barra_02.png");
	background-position: top center;
	background-repeat: no-repeat;
	}
#logoRuna img {
	width:60%;
	position: relative;
	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%;}
}

#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:60%;
	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: 10%;}
.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.chireanos a {background-image: url("https://wiki.runarcana.org/images/6/67/Icons_origens_10_chireanos.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/8/8d/Origens_-_Runinata_-_Briar.png");}

td.acolito a {background-image: url("https://runarcana.org/assets/wiki/icons_classes_01_acolito.png");} 
td.arcanista 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"); }

td.regSentina a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-01-sentina.png"); }
td.regBandopolis a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-02-bandopolis.png"); }
td.regDemacia a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-03-demacia.png"); }
td.regFreljord a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-04-freljord.png"); }
td.regIlhaSombrasa a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-05-ilhadassombras.png"); }
td.regIonia a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-06-ionia.png"); }
td.regIxtal a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-07-ixtal.png"); }
td.regNazumah a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-08-nazumah_2.png"); }
td.regNoxus a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-09-noxus.png"); }
td.regPiltover a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-10-piltover.png"); }
td.regShurima a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-11-shurima.png"); }
td.regTargon a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-12-targon.png"); }
td.regVazio a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-13-vazio.png"); }
td.regZaun a { background-image: url("https://runarcana.org/assets/wiki/icons-regiao-14-zaun.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%);}

.tabMenu{
	margin:auto;
	text-align:center;
	border-spacing:20px 0;
	font-weight:bold;
	background-color:#FFFFFF;
	}


.tabMenu tr td{	}
	
.tabMenu tr td a{
	color:black; 
	text-decoration:none;
	margin:0 20px;
	border: 1px solid black;
	border-radius: 10px;
	padding: 5px 15px;
	height:20px;
}
.tabMenu tr td a:hover{color:white; background-color:#6b6b6b;}


/* DarkMode Fix*/

.skin-theme-clientpref-night table,
.client-darkmode table,
.skin-theme-clientpref-night table.ambox-content,
.client-darkmode table.ambox-content,
.skin-theme-clientpref-night table.toccolours,
.client-darkmode table.toccolours,
.skin-theme-clientpref-night .mw-notification,
.client-darkmode .mw-notification,
.skin-theme-clientpref-night .mwe-popups,
.client-darkmode .mwe-popups,
.skin-theme-clientpref-night .infobox,
.client-darkmode .infobox,
.skin-theme-clientpref-night .toc,
.client-darkmode .toc,
.skin-theme-clientpref-night .thumbinner,
.client-darkmode .thumbinner,
.skin-theme-clientpref-night .wikitable,
.client-darkmode .wikitable,
.skin-theme-clientpref-night .cbnnr-main,
.client-darkmode .cbnnr-main,
.skin-theme-clientpref-night .cx-callout,
.client-darkmode .cx-callout,
.skin-theme-clientpref-night #simpleSearch,
.client-darkmode #simpleSearch,
.skin-theme-clientpref-night #searchInput,
.client-darkmode #searchInput,
.skin-theme-clientpref-night #centralNotice .cnotice,
.client-darkmode #centralNotice .cnotice {
    background-color: #f0f0f0;
}


#linksRuna table td {
  overflow: hidden; /* Impede que a imagem transborde */
  text-align: center; /* Alinha as imagens ao centro */
}

#linksRuna table td img {
  transition: transform 0.5s ease; /* Animação suave no aumento */
}

#linksRuna table td img:hover {
  transform: scale(1.2); /* Aumenta o tamanho da imagem em 50% */
}