MediaWiki:Common.css: diferenças entre revisões

Edição atual desde as 13h24min de 29 de abril de 2025

/** 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); 
}

/* 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;
}




    .ragna-menu-container {
        width: 100%;
        max-width: 1600px;
        margin: 20px auto;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
    }
    .ragna-menu-header {
        background-color: #f2b632;
        height: 10px;
    }
    .ragna-menu-content {
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        box-sizing: border-box;
    }
    .ragna-menu-column {
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
    }
    .ragna-menu-column h2 {
        background-color: #FFDD93;
        padding: 8px;
        margin: 0 0 10px 0;
        text-align: center;
        border-radius: 4px;
    }
    .ragna-menu-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
        column-count: 2;
        column-gap: 10px;
    }
    .ragna-menu-column li {
        margin-bottom: 5px;
        break-inside: avoid;
    }
    .ragna-menu-column li a {
        text-decoration: none;
        color: #333;
        display: block;
        padding: 5px;
        border-radius: 4px;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    .ragna-menu-column li a:hover {
        background-color: #FFDD93;
    }
    .ragna-menu-footer {
        text-align: center;
        padding: 10px;
        background-color: #f2b632;
    }
    .ragna-menu-footer a {
        text-decoration: none;
        color: #f2b632;
    }

    .header {
        text-align: center;
        padding: 20px 0;
    }
    .header h1 {
        margin: 0;
        font-size: 2em;
        color: #333;
    }
    .header .links {
        margin-top: 10px;
    }
    .header .links a {
        margin: 0 10px;
        display: inline-block;
        transition: transform 0.3s;
    }
    .header .links img {
        vertical-align: middle;
    }
    .header .links a:hover {
        transform: scale(1.1);
    }
    .divider {
        width: 95%;
        max-width: 1080px;
        margin: 20px auto;
        height: 5px;
        background-color: #87717F;
    }

    .tamanhoimg img {
        width: 65%;
        transition: transform 0.3s ease-in-out;
    }
    .tamanhoimg img:hover {
        transform: scale(1.05);
    }
    
/* Estilo do botão flutuante do Discord */
.discord-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
    z-index: 1000;
}

.discord-button:hover {
    transform: scale(1.1);
}

/* Animação de levitação */
.levitation-banner {
    display: inline-block; /* Garantir que a imagem seja tratada como um bloco inline */
    animation: levitate 3s infinite ease-in-out; /* Animação de levitação */
}

/* Definição da animação */
@keyframes levitate {
    0%, 100% {
        transform: translateY(0); /* Posição inicial e final */
    }
    50% {
        transform: translateY(-10px); /* Levanta 10px */
    }
}

/* Estilo para a imagem */
.levitation-banner img {
    display: block; /* Garante que a imagem seja tratada como bloco */
    width: 100%; /* Ajuste da largura da imagem */
    height: auto; /* Mantém a proporção da imagem */
}

/* Efeito ao passar o mouse */
.hover-effect:hover {
    transform: scale(1.1); /* Aumenta 10% do tamanho */
    filter: brightness(1.2); /* Aumenta o brilho */
}

/* Estilo padrão para os itens do menu */
.hover-effect {
    display: inline-block;
    padding: 5px;
    transition: transform 0.3s ease, color 0.3s ease; /* Transição suave */
}

/* Efeito de hover */
.hover-effect:hover {
    transform: scale(1.05); /* Aumenta 5% do tamanho */
    color: #f2b632; /* Cor amarela ao passar o mouse */
}

/* Efeito de hover nas imagens (se houver) */
.hover-effect img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.hover-effect:hover img {
    transform: scale(1.1); /* Aumenta a imagem ao passar o mouse */
    filter: brightness(1.2); /* Aumenta o brilho da imagem */
}

.destaque-icon {
    float: left; /* Ícones à esquerda do texto */
    margin-right: 8px; /* Espaçamento entre ícone e texto */
    height: 30px; /* Altura fixa para todos os ícones */
    width: 30px; /* Largura fixa para todos os ícones */
}

.destaque-text {
    display: flex;
    align-items: center; /* Alinha o texto verticalmente ao centro */
    height: 30px; /* Altura igual à do ícone para alinhamento vertical */
}


#ca-history { display: none !important;}
#ca-viewsource { display: none !important; }
#ca-talk { display: none !important; }
#ca-watch { display:none!important; }