Mudanças entre as edições de "MediaWiki:Common.css"

Edição atual tal como às 16h05min de 14 de agosto de 2022

/** o código CSS colocado aqui será aplicado a todos os temas */
/** o código CSS colocado aqui será aplicado a todos os temas
    * Antes de realizar quaisquer alterações deve-se informar aos desenvolvedores do site
    * Alterações aqui realizadas afetarão no desempenho da wiki, cuidado, realize sempre um backup da página 


 *********** Tabela de conteúdo ***************
 1 - Menu principal, barra esquerda
 2 - Função Collapsible (Mostrar/esconder tabelas)
 3 - NavBox 
 4 - Wikitablec
 4.1 - Wikitable White
 5 - Metrolook
 6 - Navegação
 7 - Spoiler6
**************************************************
*/

/*  1 - MENU PRINCIPAL, BARRA ESQUERDA */

div.barraprincipal {
    background-image:url(/w/images/b/b1/Seilá.png);
    background-repeat:no-repeat;
}


/*  2 - FUNÇÃO COLLAPSIBLE (MOSTRAR/ESCONDER TABELAS) */

table.collapsed tr.collapsible {
        display: none;
}
 
.collapseButton {               /* Mostrar/esconder botões em tabelas de conteúdos */
        float: right;           /* JavaScript de Collapsible está localizado em [[MediaWiki:Common.js]] */
        font-weight: normal;    /* O estilo destas tabelas são permitidas */
        text-align: right;
        width: auto;
}

/* 3 - NAVBOX */

table.navbox {
    background-color: #f9f9f9;
    border: 1px solid #aaa;
    clear: both;
    font-size: 90%;
    margin: 1em 0em 0em;
    padding: 2px;
    width: 100%;
}

table.navbox th {
    background-color: #90EE90;
    padding-left: 1em;
    padding-right: 1em;
}

table.navbox tr:not(:first-child) th {
    background-color: #90EE90;
}


.collapseButton {
    float: right;
    font-weight: normal;
    text-align: right;
    width: auto;
}

@media print {
    .navbox {
        display: none;
    }
}

/*   Wikitablek */

table.wikitablec,
table.prettytable {
  margin: 1em 1em 1em 0;
  background: #f9f9f9;
  border: 1px #aaa solid;
  border-collapse: collapse;
}

table.wikitablecenter, 
table.prettytable {
  margin-left: auto;
  margin-right: auto;
  background: #f9f9f9;
  border: 1px #aaa solid;
  border-collapse: collapse;
} 

table.wikitablec th, table.wikitablec td,
table.prettytable th, table.prettytable td {
  border: 1px #aaa solid;
  padding: 0.2em;
  text-align: center;
}

table.wikitablec th,
table.prettytable th {
  background: #f2f2f2;
  text-align: center;
}

table.wikitablec caption,
table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;
}

table.prettytablec code,
table.wikitablec code {
  background-color: transparent;
}

table.wikitablew-tr th, table.wikitablew-tr td {
	padding: 0.3em 0.4em;
}

table.wikitablecenter th, table.wikitablecenter td,
table.prettytable th, table.prettytable td {
  border: 1px #aaa solid;
  padding: 0.2em;
  text-align: center;
}

table.wikitablecenter th,
table.prettytable th {
  background: #f2f2f2;
  text-align: center;
}

table.wikitablecenter caption,
table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;
}

table.prettytablecenter code,
table.wikitablecenter code {
  background-color: transparent;
}

table.elements {}

table.elements th, table.elements td {
	padding: 0.5em;
}

td.effective {
	background-color: #BFFFBF;
}

td.ineffective {
	background-color: #FFBF7F;
}

td.nullified {
	background-color: #FFBFBF;
}

/*   Wikitable White */

table.wikitablew,
table.prettytable,
table.wikitablew-tr {
  margin: 1em 0;
  background: #f9f9f9;
  border: 2px #fff solid;
  border-collapse: collapse;
}

table.wikitablewhite, 
table.prettytable {
  margin-left: auto;
  margin-right: auto;
  background: #f9f9f9;
  border: 2px #fff solid;
  border-collapse: collapse;
} 

/*   Wikitable White */

table.wikitablenb,
table.prettytable,
table.wikitablenb-tr {
  margin: 1em 0;
  background: #f9f9f9;
  border: none;
  border-opacity: 0.5;
  border-collapse: collapse;
}

.wikitablenb border: opacity {
opacity: 0.5;
}

table.wikitablenoborder, 
table.prettytable {
  margin-left: auto;
  margin-right: auto;
  background: #f9f9f9;
  border: 2px #e9e8e8 solid;
  border-collapse: collapse;
} 


/* HOVER DA TABELA*/

.wikitablew td: hover {
	background: #e9e8e8; 
} 

.wikitablew-tr tr: hover {
	background: #e9e8e8; 
}

.wikitablenb border: hover {
	color: #e9e8e8; 
}
table.wikitablew th, table.wikitablew td,
table.prettytable th, table.prettytable td,
table.wikitablew-tr th, table.wikitablew-tr td{
  border: 2px #fff solid;
  padding: 0.3em 0.4em;
}

table.wikitablew th,
table.prettytable th,
table.wikitablew-tr th {
  background: #eaecf0;
}

table.wikitablew caption,
table.prettytable caption,
table.wikitablew-tr caption {
  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;
}

table.prettytablec code,
table.prettytable code,
table.wikitablew-tr code {
  background-color: transparent;
}

table.wikitablewhite th, table.wikitablewhite td,
table.prettytable th, table.prettytable td {
  border: 2px #fff solid;
  padding: 0.2em;
  text-align: center;
}

table.wikitablewhite th,
table.prettytable th,
table.wikitablew-tr th {
  background: #eaecf0;
  text-align: center;
  border-right:1px #fff solid;
  padding:0.3em 0.4em;
}

table.wikitablewhite caption,
table.prettytable caption,
table.wikitablew-tr caption {
  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;
  text-align: center;
}

table.prettytablecenter code,
table.wikitablewhite code,
table.wikitablew-tr code {
  background-color: #000;
}

table.elements {}

table.elements th, table.elements td {
	padding: 0.5em;
}

td.effective {
	background-color: #BFFFBF;
}

td.ineffective {
	background-color: #FFBF7F;
}

td.nullified {
	background-color: #FFBFBF;
}

/*   Tabelas */

.tile-row {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 1em;
}

.tile-halves {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid #e4eaee;
    background: #ffffff;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
}

.tile-halves h2 {
    font-size: 1.4em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.4em;
}

.tile-halves .byline + h2 {
    margin-top: -0.5em;
}

.tile-top {
    width: 100%;
    padding: 1.3rem 1.5rem 0.6rem;
}

.tile-top.tile-image {
    display: flex;
    align-items: center;
    background-color: #949eaa;
    overflow: hidden;
    padding: 0px;
    height: 13vw;
    max-height: 12em;
}

.tile-top.tile-image a {
    width: 100%;
}

.tile-top.tile-image img {
    width: 100%;
    height: auto;
    transition: 0.4s ease-out;
}

.tile-bottom {
    background: #ffffff;
    border-top: 1px solid #e4eaee;
    width: 100%;
    padding: 1rem 1.5rem 0.6rem;
}

.tile-bottom.link-button {
    align-self: flex-end;
    padding: 0;
}

.tile-bottom.link-button a {
    display: block;
    text-align: center;
    padding: 0.75em 1.5em 0.8em;
    text-decoration: none;
    hover: 
}

.tile-bottom.read-more {
    background: #f9fafa;
    transition: 0.3s ease-out;
}

.tile-bottom.read-more a {
    color: #949eaa;
    font-weight: bold;
    text-align: right;
}

.tile-bottom.read-more:hover {
    background: #f2f4f4;
}

.tile-bottom.read-more:hover .arrow {
    transform: translateX(50%);
}

.tile-bottom.read-more .arrow {
    filter: invert(43%) sepia(50%) hue-rotate(175deg);
    margin-left: 0.4em;
    transition: 0.3s ease-out;
}

.mainpage-recent-updates .tile-halves {
    flex: 1;
    align-content: flex-start;
    margin-right: 0.9rem;
}

.mainpage-recent-updates .tile-halves:hover .tile-top img {
    transform: scale(1.04);
}

.mainpage-recent-updates .tile-halves:last-child {
    margin-right: 0;
}

body.wgl-readermode .mainpage-recent-updates .tile-image {
    max-height: 10.5em;
}

.mainpage-recent-updates .tile-bottom.link-button a {
    text-align: left;
    padding: 1rem 1.5rem 0.75rem;
}

.mainpage-recent-updates h2 {
    margin: -0.5em 0 0.3em;
}

.mainpage-recent-updates p:not(.byline) {
    font-size: 0.9em;
    line-height: 1.75em;
    color: #444e5a;
}

.mainpage-recent-updates .jagex-promotion .byline {
    color: #855cd8;
}

.mainpage-contents .tile-halves {
    flex: 1;
    margin-right: 0.9rem;
}

.mainpage-contents .tile-halves:hover .tile-top img {
    transform: scale(1.04);
}

.mainpage-contents .tile-halves:last-child {
    margin-right: 0;
}
/*TAMANHO DA IMAGEM
anterior:


.mainpage-contents .tile-top {
    height: 4.5rem;
    position: relative;
}


*/
.mainpage-contents .tile-top {
    height: 9rem;
    position: relative;
}

.mainpage-contents .tile-top h2 a {
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 4.5rem;
    padding-left: 0.45rem;
}

.mainpage-contents h2 {
    margin: 0;
    padding: 0;
}



/* 5 - METROLOOK */



/*

@import "mediawiki.mixins";

#mw-page-base {
	background-color: darkseagreen !important;
	background-image: none;
}

@media (max-width:768px) {
#mw-page-base {
	background-color: darkseagreen;
}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
#mw-page-base {
	background-color: darkseagreen;
}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
#mw-page-base {
	background-color: darkseagreen;
}
}

div.vectorTabs a:hover {
	background-color: mediumseagreen;
}

div.onhoverbg:hover {
	background-color: mediumseagreen;
}

img.downarrow:hover{
	background-color: mediumseagreen;
}

div.vectorMenu:hover h5 a {
	background-color: mediumseagreen;
}

div.vectorMenu h5 a {
	background-color: darkseagreen; 
}

div.vectorMenu:hover {
	background-color: mediumseagreen;
}

div.vectorMenu ul {
	border: solid 2px darkseagreen;
	border-top: none;

}


@media (max-width: 768px) {
#hamburgerIcon:hover {
	background-color: mediumseagreen;
}

img.editbutton:hover {
	background-color: mediumseagreen;
}

div.actionmenu ul {
	border-top: solid 2px darkseagreen;
}

#left-navigation {
	background-color: darkseagreen;
}
}*/

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS).
 */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
    display: none;
}


.naviText {
    display: inline-block;
    color: #440bb8;
    cursor: pointer;
    padding: 1px;
}

.naviText:hover {
    color: #ff0000;

}

.naviCopied {
    display: none;
    color: #ff0000;
    border: 1px dotted #ff0000;
    padding: 0 20px;
    border-radius: 5px;
}

/* Hide main page header */
body.page-Main_Page h1.firstHeading {
    display:none;
}

/* Hide MH header */
body.page-Monster_Hunter_Portal h1.firstHeading {
    display:none;
}

/* Hide Class Guides header */
body.page-Category:Class_Guides h1.firstHeading {
    display:none;
}

/* Zoom */
.zoom {
  //padding: 0px;
  transition: transform .2s; 
  //width: 0px;
  //height: 0px;
  //margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.1); 
}

/* Usando URL e cordenadas */
cursor:  url(https://wiki.historyreborn.org/images/a/ae/Cursor1.png) 4 12, auto;
cursor:  url(https://wiki.historyreborn.org/images/a/ae/Cursor2.png) 2 2, pointer;

/* 7 - SPOILER */

.spoiler {
  display: none;
}

.show {
  display: none; 
}

.hide:target + .show {
  display: inline; 
}

.hide:target {
  display: none; 
}

.hide:target ~ .spoiler {
  display: inline;
}

/* Just for prettiness, not actually needed */

body {
  margin: 0;
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #ffffff;
}

.btn {
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #bbbbbb;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #a2a2a2;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.wiki-post {
  padding: 20px;
  border: 1px solid #000;
}

.spoiler-content {
  padding: 15px;
}