Mudanças entre as edições de "MediaWiki:Common.css"
Ir para navegação
Ir para pesquisar
| Linha 173: | Linha 173: | ||
transform: scale(1.1); /* (1.1 = 110% de zoom. Caso queira aumentar é só seguir a lógica, 1.2 = 120% de zoom,etc... */ | transform: scale(1.1); /* (1.1 = 110% de zoom. Caso queira aumentar é só seguir a lógica, 1.2 = 120% de zoom,etc... */ | ||
} | } | ||
/** 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 | |||
5 - Metrolook | |||
************************************************** | |||
*/ | |||
/* 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.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; | |||
} | |||
/* 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: 0; | |||
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; | |||
} | |||
.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; | |||
} | |||
.mainpage-contents .tile-top { | |||
height: 4.5rem; | |||
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; | |||
} | |||
}*/ | |||
Edição das 00h07min de 19 de junho de 2022
/* 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: #b8860b;
cursor: pointer;
padding: 1px;
}
.naviCopied {
display: none;
color: #b8860b;
border: 1px dotted #e0ac28;
padding: 0 20px;
border-radius: 5px;
}
@import url("https://fonts.googleapis.com/css?family=Redressed");
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: white;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
.toc-btf {
float: right;
position: fixed;
top: 20px;
right: 0;
background-color: #d8d8d8;
border: 1px solid #381f7b;
color: white;
line-height: 0.8;
font-size: 100%;
max-height: 100%;
overflow:auto;
}
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
border: 1px solid #3671a7 !important;
}
table.wikitable td {
padding: 0.2em 0.4em !important;
border-bottom: 1px solid #381f7b !important;
}
table.wikitable td {
border-top: none !important;
border-left: none !important;
border-right: none !important;
padding: 0.2em 0.4em !important;
}
table.wikitable {
border: none !important;
background-color: #ffffff;
border-spacing: 0px 2px;
border-collapse: inherit;
}
th {
background-color: #381f7b!important;
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
span.mw-collapsible-toggle > a {
color: white;
}
table td span.plainlinks {
font-weight: bold;
}
#container-top {
background-color: white;
}
#container-top #container-top-l2 {
background: none;
}
#container-top #container-top-l1 {
background-position: 100px 70px;
background-size: auto 280px;
}
.generated-sidebar{
font-family:Redressed;
}
#mainlogo-text h1{
font-family:Redressed;
}
#header #site-navigation .active .pBody, #header #p-personal .active .dropdown, #header #site-navigation .portlet:hover .pBody, #header #p-personal:hover .dropdown {
background: url(helheim/skins/Splash/resources/images/corner-splash.png?22533) -100px 0px no-repeat rgba(255,255,255,1);
background-color: #fff\9;
box-shadow: 0px 3px 7px rgba(0,0,0,0.4);
border: solid 1px #ccc\9;
padding: 1.5em 1.5em 1em 1.25em;
position: absolute;
top: 2em;
left: 0;
text-align: left;
width: 125px;
z-index: 10;
display: block;
}
#mainlogo-text{
cursor:pointer;
}
.LogoImgWrapper img {
width: 450px !important;
height: 300px !important;
}
.realmSelector select{
background-color: #CBCECD;
text-align: center;
width: 17em;
height: 24.7813px;
}
.wikiEditor-ui-text textarea{
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
/* CSS Hover (Expandir Imagem)
*/
.zoom {
//padding: 50px;
transition: transform .2s; /* Animação */
//width: 200px;
//height: 200px;
//margin: 0 auto;
}
.zoom:hover {
transform: scale(1.1); /* (1.1 = 110% de zoom. Caso queira aumentar é só seguir a lógica, 1.2 = 120% de zoom,etc... */
}
/** 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
5 - Metrolook
**************************************************
*/
/* 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.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;
}
/* 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: 0;
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;
}
.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;
}
.mainpage-contents .tile-top {
height: 4.5rem;
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;
}
}*/