MediaWiki:Timeless.css: Difference between revisions
From Game Wiki - VortanMU
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
| Line 2,517: | Line 2,517: | ||
padding: 4em 1em 1em; | padding: 4em 1em 1em; | ||
} | } | ||
Revision as of 11:45, 17 January 2026
@media screen {
@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap);
@font-face {
font-family: 'GothamSSm-Light';
src: url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.eot);
src: url("/resources/assets/fonts/GothamSSm-Light/GothamSSm-Lightd41d.eot?#iefix") format('embedded-opentype'),
url("/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.svg#GothamSSm-Light") format('svg'),
url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.ttf) format('truetype'),
url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.woff) format('woff'),
url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GothamSSm-Medium';
src: url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.eot);
src: url("/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Mediumd41d.eot?#iefix") format('embedded-opentype'),
url("/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.svg#GothamSSm-Light") format('svg'),
url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.ttf) format('truetype'),
url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.woff) format('woff'),
url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'GothamSSm-Light', sans-serif !important;
background: #020307!important;
}
hr {
border-top: 0px!important;
border-left: 0px!important;
border-right: 0px!important;
border-bottom: 1px solid #262932!important;
margin-top: 10px!important;
}
a {
color: rgba(240,240,255,0.7)!important;
text-decoration: none!important;
}
a:hover {
color: #ba6356!important;
text-decoration: none!important;
}
pre {
background: #0f1116 !important;
border: 1px solid #262932 !important;
color: #6c757d !important;
}
.font-roboto {
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
.mw-wiki-logo.timeless-logo img {
width: 270px!important;
height: auto;
margin: 3.5em 0 1.5em!important;
}
/*******************************
* HEADINGS E ESTILOS DE PÁGINA
*******************************/
.mw-body .mw-heading3,
.mw-body h3 {
padding-bottom: 8px;
border-bottom: 1px solid #262932;
font-size: 22px!important;
font-family: 'GothamSSm-Light', sans-serif !important;
color: rgba(240,240,255,0.9)!important;
line-height: 1.125 !important;
margin: 1.25em 0 0.5em !important;
}
.mw-body .mw-heading3,
.mw-body h3:before {
content: '--';
position: relative;
margin-right: 10px;
display: inline-block;
color: #ba6356;
}
.mw-body .mw-heading2,
.mw-body h2 {
font-size: 1.8em !important;
border-bottom: solid 1px #a23e2f !important;
color: #ffffff!important;
font-weight: normal !important;
font-family: 'GothamSSm-Light', sans-serif !important;
line-height: 150%!important;
margin: 1.25em 0 10px !important;
}
.mw-body .mw-heading4, .mw-body h4 {
font-size: 1.4em!important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
.toc {
display: none !important;
}
.mw-body h1.firstHeading {
display: none !important;
margin-top: -5px;
}
/*@media screen and (min-width: 1340px) {*/
#mw-related-navigation .sidebar-inner label, #mw-related-navigation .sidebar-inner h3, #mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3 {
font-family: 'GothamSSm-Medium', sans-serif !important;
font-weight: 500!important;
font-size: 18px!important;
color: #fff!important;
border-bottom: 1px solid #262932!important;
padding: 10px 0!important;
margin: 0!important;
display: block;
}
#mw-related-navigation .sidebar-inner label, #mw-related-navigation .sidebar-inner h3:before, #mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3:before {
content: '--';
position: relative;
margin-right: 10px;
display: inline-block;
color: #ba6356;
}
/*}*/
.sidebar-inner li a {
color: #fff!important;
background: #0f1116!important;
margin-bottom: 5px!important;
padding: 15px 25px!important;
font-size: 16px!important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
.sidebar-inner li a:hover {
color: #ba6356!important;
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-header-nav-hack {
border-top: 1px solid #171a22!important;
display: block;
position: absolute;
z-index: 198;
background: #171920!important;
width: 100%;
}
#mw-site-navigation h2, #mw-related-navigation h2 {
font-weight: normal;
font-family: 'GothamSSm-Medium', sans-serif !important;
font-size: 16px!important;
cursor: pointer;
margin: -3px 0 -3px!important;
padding: 10px 0 !important;
}
#mw-site-navigation .sidebar-inner {
line-height: 1.125;
word-wrap: break-word;
font-size: 0.95em;
background: #0f1116!important;
box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
position: absolute;
padding: 20px 2em 0;
margin: 0;
min-width: 9.153em;
top: 3.1em!important;
left: -1em;
overflow: visible;
z-index: 50;
border: 1px solid #0f1116!important;
}
#mw-site-navigation .sidebar-chunk h2 span::before, #mw-site-navigation .sidebar-chunk h2 span::after {
transform: rotate(360deg);
border-bottom: 10px solid #0f1116!important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
right: 1em;
z-index: 51;
}
#mw-related-navigation .sidebar-inner {
line-height: 1.125;
word-wrap: break-word;
font-size: 0.95em;
background: #0f1116!important;
box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
position: absolute;
padding: 20px 2em 0;
margin: 0;
min-width: 9.153em;
right: -1em;
overflow: visible;
z-index: 50;
top: 3.1em!important;
border: 1px solid #0f1116!important;
}
#mw-related-navigation .sidebar-inner label, #mw-related-navigation .sidebar-inner h3, #mw-site-navigation .sidebar-chunk label, #mw-site-navigation .sidebar-chunk h3 {
font-size: 16px!important;
}
.sidebar-inner li a {
margin-left: -10px!important;
width: calc(100% - 10px)!important;
padding: 15px 15px!important;
font-size: 15px!important;
font-family: 'GothamSSm-Medium', sans-serif !important;
background: #171920!important;
}
}
@media screen and (min-width: 851px) {
#personal .dropdown {
line-height: 1.125;
word-wrap: break-word;
font-size: 0.95em;
background: #0f1116!important;
box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
position: absolute;
padding: 20px 2em 0;
margin: 0;
min-width: 9.153em;
top: 2.95em;
right: -1em;
overflow: visible;
z-index: 50;
border: 1px solid #0f1116!important;
width: 220px!important;
}
#personal .dropdown label, #personal .dropdown h3 {
font-weight: normal;
font-size: 1em;
margin: 0.25em 0 0.75em 0;
padding-bottom: 8px !important;
border-bottom: 1px solid #262932 !important;
font-family: 'GothamSSm-Light', sans-serif !important;
color: rgba(240,240,255,0.9)!important;
display: block;
}
#personal .dropdown label, #personal .dropdown h3:before {
content: '--';
position: relative;
margin-right: 10px;
display: inline-block;
color: #ba6356;
}
}
/*******************************
* MENU / SUBMENU
*******************************/
/* Estilos da navegação principal */
.sidebar-inner ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-inner li {
margin: 0;
padding: 0;
}
.sidebar-inner li a {
display: block;
padding: 8px 10px;
text-decoration: none;
color: #fff;
}
/* O <li> que terá o submenu */
li.has-submenu {
position: relative;
}
li.has-submenu > a:after {
content: "▶";
font-size: 10px;
margin-left: 5px;
}
@media screen and (min-width: 1100px) and (max-width: 1339px) {
#mw-site-navigation {
overflow: visible!important;
}
}
/* Submenu estilizado */
submenu {
position: absolute!important;
z-index: 1000!important;
}
ul.submenu {
display: none;
position: absolute!important;
left: 100%;
top: -10px;
background-color: #0f1116;
border-radius: 4px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 20px;
z-index: 1000!important;
width: 220px;
border: 1px solid #171a22;
}
/* Layout multi-coluna para submenus grandes */
ul.submenu.multi-column {
width: auto;
min-width: 450px;
column-count: 2;
column-gap: 20px;
}
/* Para submenus muito grandes (como "Classes") */
li.has-submenu:nth-child(2) > ul.submenu {
column-count: 3;
min-width: 600px;
}
/* Evita quebras inadequadas nas colunas */
ul.submenu li {
break-inside: avoid;
page-break-inside: avoid;
display: block;
margin-bottom: 5px;
}
/* Exibe o submenu ao passar o mouse */
li.has-submenu:hover > ul.submenu {
display: block;
}
/* Estiliza os links do submenu */
.submenu {
padding: 20px!important;
}
.submenu li a {
padding: 10px 10px!important;
margin: 0!important;
display: block;
color: rgba(255, 255, 255, .5)!important;
transition: background-color 0.2s!important;
border-bottom: 1px solid #171a22!important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
.submenu li a:hover {
color: #fff!important;
border-bottom: 1px solid rgba(255, 255, 255, .5)!important;
text-shadow: 0 0 5px #fff!important;
}
/* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
/* Mudamos o comportamento dos submenus em mobile */
.sidebar-inner {
width: 100%;
overflow: hidden;
}
li.has-submenu {
position: static;
}
li.has-submenu > a:after {
content: "▼";
}
li.has-submenu:hover > ul.submenu {
display: none; /* Não mostra automaticamente no hover em mobile */
}
/* Usamos classes para controlar a exibição via JavaScript */
li.has-submenu.active > ul.submenu {
display: block;
}
li.has-submenu.active > a:after {
content: "▲";
}
/* Garantir que menus multicolunas voltem a uma coluna */
li.has-submenu:nth-child(2) > ul.submenu,
ul.submenu.multi-column {
column-count: 1;
min-width: auto!important;
}
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
/* Estiliza os links do submenu */
.submenu {
padding: 20px!important;
}
.submenu li a {
background: transparent!important;
}
.submenu li a:hover {
color: #fff!important;
border-bottom: 1px solid rgba(255, 255, 255, .5)!important;
text-shadow: 0 0 5px #fff!important;
}
}
#mw-header-container {
background: #020307!important;
color: #6c757d!important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
#personal h2 span {
color: #6c757d!important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: 500!important;
font-variant: none!important;
}
#p-logo-text a {
color: #6c757d!important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: normal!important;
font-size: 1em!important;
}
#p-logo-text a:hover {
color: #ba6356!important;
text-decoration: none!important;
}
#p-logo-text a img {
margin-right: 3px!important;
}
#searchInput {
background: #0f1116!important;
color: #fff !important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: 500!important;
border: 1px solid #0f1116!important;
}
#simpleSearch {
background: #0f1116!important;
color: #6c757d!important;
border: 1px solid #171a22 !important;
}
@media screen and (max-width: 850px) {
#p-logo-text {
position: absolute;
top: 0.4em!important;
left: 2em!important;
text-align: left;
width: 300px !important;
}
#menus-cover {
background: #0f1116!important;
}
.sidebar-inner, .dropdown {
display: none;
background: #0f1116!important;
border: 0px solid #171a22!important;
line-height: 100% !important;
word-wrap: break-word!important;
font-size: 0.95em!important;
box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05)!important;
position: absolute!important;
padding: 2em 2.5em 1em!important;
margin: 0!important;
min-width: 9.153em!important;
max-width: 60%!important;
top: 3em!important;
right: 0!important;
overflow: visible!important;
z-index: 350!important;
}
.sidebar-inner li, .dropdown li {
margin: 0px!important;
margin-bottom: 5px!important;
}
.sidebar-inner ul li a {
color: #fff !important;
background: #171920!important;
margin-bottom: 5px !important;
padding: 15px 25px !important;
font-size: 16px !important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
.sidebar-inner ul li ul.submenu li {
margin-bottom: 0!important;
}
.sidebar-inner ul li ul.submenu li a {
color: rgba(255, 255, 255, 0.8) !important;
background: #171920!important;
margin-bottom: 2px !important;
padding: 10px 20px !important;
font-size: 16px !important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
.sidebar-inner ul li ul.submenu li a:hover {
border-bottom: 0!important;
color: #fff!important;
text-shadow: 0 0 5px #fff!important;
}
ul.submenu {
display: none;
position: relative!important;
left: 0!important;
top: -10px;
background-color: #0f1116!important;
border-radius: 4px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 20px;
z-index: 1000!important;
width: calc(100% - 40px) !important;
border: 1px solid #171920!important;
}
/* Layout multi-coluna para submenus grandes */
ul.submenu.multi-column {
width: auto;
min-width: 450px;
column-count: 2;
column-gap: 20px;
}
ul.submenu .sidebar-inner li, .dropdown li {
padding: 0!important;
max-width: 100%!important;
}
#mw-content {
padding: 1em!important;
border-width: 0;
margin-top: 200px!important;
}
}
#mw-content-container {
background: #0f1116!important;
border-bottom: 1px solid #171a22!important;
padding-bottom: 30px!important;
}
#mw-content {
background: #171920!important;
border: 1px solid #171a22!important;
color: #6c757d!important;
}
.sidebar-chunk {
background: #171920!important;
border: 1px solid #171a22!important;
color: #6c757d!important;
}
.mw-footer-container {
background: #020307!important;
border-top: 1px solid #171a22!important;
border-bottom: 1px solid #171a22!important;
}
.tools-inline li.selected {
border-bottom:2px solid #a23e2f!important;
}
.tools-inline li.selected a {
color: #6c757d!important;
}
.sidebar-inner ul {
margin-top: 10px!important;
margin-bottom: 10px!important;
}
figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] {
background-color: #0f1116!important;
border: 1px solid #0f1116!important;
}
figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
background-color: #0f1116!important;
border: 1px solid #0f1116!important;
}
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
margin: 0.75em!important;
border: 1px solid #171a22!important;
}
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption {
display: none!important;
}
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after, .mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
right: 0.75em;
left: auto;
background: transparent!important;
}
.color-right {
background-image: linear-gradient(to right, #561f1f 0%, #a23e2f 100%)!important;
height: 0.35em!important;
width: 50%!important;
float: left;
}
.color-left {
height: 0.35em!important;
background-image: linear-gradient(to right, #a23e2f 0%, #561f1f 100%)!important;
width: 50%!important;
float: left;
}
.color-middle {
height: 0.35em;
background: transparent!important;
margin-left: 21em;
margin-right: 17em;
}
.mw-body dt {
font-weight: bold !important;
font-family: 'GothamSSm-Medium', sans-serif !important;
}
.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {
margin-top: 10px!important;
background-color: #0f1116!important;
color: var(--color-base, #202122) !important;
border: 1px solid #171a22!important;
}
.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled img {
width: 201px!important;
height: 32px!important;
}
.wikitable {
background: transparent!important;
border-bottom: 0!important;
}
.wikitable > tr > th, .wikitable > * > tr > th {
background-color: #0f1116!important;
color: rgba(240,240,255,0.9)!important;
border: 1px solid #262932!important;
text-align: center;
}
.wikitable > tr > td, .wikitable > * > tr > td {
background-color: #15161c !important;
color: #6c757d!important;
border: 1px solid #262932!important;
text-align: center;
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
color: rgba(240,240,255,0.9)!important;
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
background-color: #0f1116!important;
border: 1px solid #262932!important;
padding: 1.25em 1.75em;
}
.oo-ui-panelLayout-framed {
background-color: #0f1116!important;
border: 1px solid #262932!important;
border-radius: 0!important;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: #171920 !important;
color: #fff !important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: 500 !important;
border: 1px solid #262932 !important;
border-radius: 0 !important;
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
background: #171920 !important;
color: #fff !important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: 500 !important;
border: 1px solid #262932 !important;
border-radius: 0 !important;
}
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
color: var(--color-disabled, #72777d) !important;
background: #171920 !important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: 500 !important;
border: 1px solid #262932 !important;
border-radius: 0 !important;
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
background-color: rgba(15, 17, 22, 0.5) !important;
color: #6c757d!important;
border: 1px solid #262932!important;
padding: 1.25em 1.75em;
}
.oo-ui-tabSelectWidget-framed {
background-color: rgba(15, 17, 22, 0.5) !important;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
background: #171920 !important;
border-bottom: 1px solid #6c757d !important;
color: #fff !important;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background: #171920 !important;
color: #fff !important;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
color: #6c757d!important;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label:hover {
color: #fff!important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-image: linear-gradient(to right, #561f1f 0%, #a23e2f 100%)!important;
border: 0!important;
color: #fff!important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: normal!important;
}
.mw-email-not-authenticated .oo-ui-labelWidget {
background-color: #262932;
border-color: #6c757d;
color: #ba6356!important;
width: 100% !important;
}
#preferences .mw-htmlform-submit-buttons {
-webkit-position: sticky;
position: sticky;
bottom: 0;
margin: -1px -1em -1em -1em;
padding: 1em;
background: #171920 !important;
border-top: 1px solid #262932 !important;
box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.25);
}
/* Estilo para telas pequenas (abaixo de 768px) */
@media screen and (max-width: 767px) {
/* Primeiro, preparamos as tabelas para resposta móvel */
table, table thead, table tbody, table th, table td, table tr {
display: block!important;
}
/* Escondemos os cabeçalhos da tabela */
table thead tr {
position: absolute!important;
top: -9999px!important;
left: -9999px!important;
}
/* Configuração das linhas como cards */
table {
width: 100% !important;
}
table tr {
margin-bottom: 1rem!important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)!important;
width: 100% !important;
}
/* Configuração das células */
table th {
display: none!important;
}
table td:first-child {
position: relative!important;
padding-left: 50%!important;
text-align: right!important;
min-height: 30px!important;
}
table td {
position: relative!important;
padding-left: 50%!important;
text-align: right!important;
min-height: 30px!important;
}
/* Pseudo-elemento para mostrar os rótulos */
table td::before {
position: absolute!important;
left: 0.5rem!important;
width: 45%!important;
padding-right: 10px!important;
text-align: left!important;
font-weight: bold!important;
content: attr(data-label)!important;
font-size: 12px!important;
color: rgba(240, 240, 255, 0.9)!important;
}
/* Estilos específicos para tabelas infobox comuns em wikis */
.infobox, .wikitable, .sortable {
overflow: visible !important;
float: none !important;
width: 100% !important;
}
}
.mw-body-content a > img, .mw-body-content .floatnone > img {
padding: 10px!important;
border: 1px solid #262932!important;
background: #0f1116!important;
margin-top: 10px!important;
margin-bottom: 10px!important;
max-width: calc(100% - 20px)!important;
}
.mw-body-content table a > img, .mw-body-content figure a > img {
padding: 0!important;
border: 0!important;
}
.tools-inline div, .tools-inline div, .tools-inline ul, .tools-inline ul, .tools-inline li, .tools-inline li {
display: block!important;
}
#ca-viewsource, #ca-talk, #ca-nstab-main, #ca-unwatch {
display: none!important;
}
#ca-history, #ca-talk, #ca-nstab-main, #ca-unwatch {
display: none!important;
}
.uls-menu {
background: #0f1116!important;
border-top: 1px solid #262932 !important;
box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.25);
}
.uls-lcd {
background: transparent!important;
border: 1px solid #262932!important;
}
#uls-settings-block {
background: transparent!important;
border: 1px solid #262932!important;
}
.uls-search {
background-color: #0f1116!important;
border: 1px solid #262932!important;
color: #6c757d!important;
}
.uls-filterinput {
background-color: #0f1116!important;
color: #6c757d!important;
}
#uls-settings-block.uls-settings-block--vector-2022 > button.uls-language-settings-button {
background: #a23e2f url(/extensions/UniversalLanguageSelector/resources/images/cog.svg?ce0b4) no-repeat center!important;
}
.cdx-message--warning {
background: #171920!important;
border: 1px solid var(--border-color-warning, #987027)!important;
color: var(--color-warning, #987027)!important;
}
.wikiEditor-ui-toolbar {
background: #0f1116!important;
border: 1px solid #171a22!important;
color: #6c757d!important;
}
.wikiEditor-ui-toolbar .group {
border: 1px solid #171a22!important;
}
.oo-ui-icon-listBullet,
.mw-ui-icon-listBullet:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M7 15h12v2H7zm0-6h12v2H7zm0-6h12v2H7z'/%3E%3Ccircle fill='%236c757d' cx='3' cy='4' r='2'/%3E%3Ccircle fill='%236c757d' cx='3' cy='10' r='2'/%3E%3Ccircle fill='%236c757d' cx='3' cy='16' r='2'/%3E%3C/svg%3E")!important;
}
.oo-ui-icon-listNumbered,
.mw-ui-icon-listNumbered:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M7 15h12v2H7zm0-6h12v2H7zm0-6h12v2H7zM2 6h1V1H1v1h1zm1 9v1H2v1h1v1H1v1h3v-5H1v1zM1 8v1h2v1H1.5a.5.5 0 0 0-.5.5V13h3v-1H2v-1h1.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E")!important;
}
.oo-ui-icon-bold, .mw-ui-icon-bold:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M18 19h-4L5 5v14H2V1h5l8 13c-.02-.84 0-1 0-2V1h3z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-italic, .mw-ui-icon-italic:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='m5 19 .33-1.51 2.17-.66 2.9-13.66-1.9-.63L9 1h7l-.71 1.6-2.29.57-2.83 13.66 2.14.66L12 19z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-link, .mw-ui-icon-link:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M4.83 15h2.91a4.9 4.9 0 0 1-1.55-2H5a3 3 0 1 1 0-6h3a3 3 0 0 1 2.82 4h2.1a5 5 0 0 0 .08-.83v-.34A4.83 4.83 0 0 0 8.17 5H4.83A4.83 4.83 0 0 0 0 9.83v.34A4.83 4.83 0 0 0 4.83 15'/%3E%3Cpath fill='%236c757d' d='M15.17 5h-2.91a4.9 4.9 0 0 1 1.55 2H15a3 3 0 1 1 0 6h-3a3 3 0 0 1-2.82-4h-2.1a5 5 0 0 0-.08.83v.34A4.83 4.83 0 0 0 11.83 15h3.34A4.83 4.83 0 0 0 20 10.17v-.34A4.83 4.83 0 0 0 15.17 5'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-image, .mw-ui-icon-image:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M2 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-.17 13 4.09-5.25 2.92 3.51L12.92 8l5.25 7z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-noWikiText, .mw-ui-icon-noWikiText:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M16 3v2h1v10l2 2V3zM9 5V3H5l2 2zM1 1 0 2l1 1v14h3v-2H3V5l2 2v10h4v-2H7V9l6 6h-2v2h4l3 3 1-1zm12 10 2 2V3h-4v2h2z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-newline, .mw-ui-icon-newline:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M17 4v6H7V6l-6 5 6 5v-4h12V4z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-bigger, .mw-ui-icon-bigger:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M14 18h-1.57a.66.66 0 0 1-.44-.13.9.9 0 0 1-.25-.34l-1-2.77H5.3l-1 2.77a.8.8 0 0 1-.24.32.65.65 0 0 1-.44.15H2L7 5.47h2zm-3.85-4.7L8.42 8.72A13 13 0 0 1 8 7.37q-.1.41-.21.75t-.21.6L5.85 13.3zM15 2l3 4h-6z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-smaller, .mw-ui-icon-smaller:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M12 16h-1.05a.44.44 0 0 1-.29-.09.6.6 0 0 1-.17-.22l-.7-1.84H6.2l-.7 1.84a.56.56 0 0 1-.16.21.43.43 0 0 1-.29.1H4l3.31-8.35h1.38zm-2.57-3.13L8.28 9.82a9 9 0 0 1-.28-.9q-.06.27-.14.5l-.14.4-1.15 3zM15 6l3-4h-6z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-superscript, .mw-ui-icon-superscript:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M18 1V0h-.5a1.5 1.5 0 0 0-1 .39 1.5 1.5 0 0 0-1-.39H15v1h.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H15v1h.5a1.5 1.5 0 0 0 1-.39 1.5 1.5 0 0 0 1 .39h.5V8h-.5a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .5-.5zm-4.32 15h-2.42a.67.67 0 0 1-.46-.15 1.3 1.3 0 0 1-.28-.34l-2.77-4.44a2.7 2.7 0 0 1-.28.69L5 15.51a2.2 2.2 0 0 1-.29.34.58.58 0 0 1-.42.15H2l4.15-6.19L2.17 4h2.42a.8.8 0 0 1 .41.09.8.8 0 0 1 .24.26L8 8.59a2.7 2.7 0 0 1 .33-.74L10.6 4.4a.69.69 0 0 1 .6-.4h2.32l-4 5.71z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-subscript, .mw-ui-icon-subscript:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M13.68 16h-2.42a.67.67 0 0 1-.46-.15 1.3 1.3 0 0 1-.28-.34l-2.77-4.44a2.7 2.7 0 0 1-.28.69L5 15.51a2.2 2.2 0 0 1-.29.34.58.58 0 0 1-.42.15H2l4.15-6.19L2.17 4h2.42a.8.8 0 0 1 .41.09.8.8 0 0 1 .24.26L8 8.59a2.7 2.7 0 0 1 .33-.74L10.6 4.4a.69.69 0 0 1 .6-.4h2.32l-4 5.71zm3.82-4h.5v-1h-.5a1.5 1.5 0 0 0-1 .39 1.5 1.5 0 0 0-1-.39H15v1h.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H15v1h.5a1.5 1.5 0 0 0 1-.39 1.5 1.5 0 0 0 1 .39h.5v-1h-.5a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-bigger, .mw-ui-icon-bigger:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M14 18h-1.57a.66.66 0 0 1-.44-.13.9.9 0 0 1-.25-.34l-1-2.77H5.3l-1 2.77a.8.8 0 0 1-.24.32.65.65 0 0 1-.44.15H2L7 5.47h2zm-3.85-4.7L8.42 8.72A13 13 0 0 1 8 7.37q-.1.41-.21.75t-.21.6L5.85 13.3zM15 2l3 4h-6z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-imageGallery, .mw-ui-icon-imageGallery:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236c757d' d='M3 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 11 3.5-4.5 2.5 3 3.5-4.5 4.5 6zM16 2a2 2 0 0 1 2 2H2a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-articleRedirect, .mw-ui-icon-articleRedirect:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%236c757d%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E article redirect %3C/title%3E%3Cpath d=%22M5 1a2 2 0 0 0-2 2v1c0 5 2 8 7 8V9l5 4-5 4v-3c-3.18 0-5.51-.85-7-2.68V17a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z%22/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-table, .mw-ui-icon-table:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%236c757d%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E table %3C/title%3E%3Cpath d=%22M2 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 4h7v4H2zm0 10v-4h7v4zm16 0h-7v-4h7zm0-6h-7V6h7z%22/%3E%3C/svg%3E") !important;
}
.oo-ui-icon-articleSearch, .mw-ui-icon-articleSearch:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%236c757d%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E article search %3C/title%3E%3Cpath d=%22M12.43 14.34A5 5 0 0 1 10 15a5 5 0 1 1 3.95-2L17 16.09V3a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 1.45-.63z%22/%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E") !important;
}
.wikiEditor-ui-toolbar .group .tool-select .options {
background: #0f1116!important;
border: 1px solid #262932!important;
}
.wikiEditor-ui .wikiEditor-ui-top {
border: 1px solid #262932!important;
}
.wikiEditor-ui .wikiEditor-ui-view {
background: #171920!important;
border: 1px solid #262932!important;
}
.wikiEditor-ui-toolbar .sections .section {
border-top: 1px solid #262932!important;
}
.ext-WikiEditor-realtimepreview-textbox#wpTextbox1, .mw-editform .ext-WikiEditor-realtimepreview-textbox#wpTextbox1 {
background: #000!important;
color: #9e9e9e !important;
border: 1px solid #262932!important;
}
.mw-editform .editOptions {
background: #0f1116!important;
color: #6c757d!important;
border: 1px solid #262932!important;
}
.ext-WikiEditor-ResizingDragBar {
background-color: #0f1116!important;
border: 1px solid #262932!important;
}
.ext-WikiEditor-twopanes-TwoPaneLayout .ext-WikiEditor-twopanes-pane2 {
border: 1px solid #262932!important;
}
code, pre, .mw-code {
background: #0f1116!important;
color: rgba(255, 255, 255, 0.9)!important;
border: 1px solid #262932!important;
border-radius: 3px!important;
}
form input:not(.mw-widgets-datetime-dateTimeInputWidget-editField):not(.mw-history-compareselectedversions-button) {
background: #0f1116!important;
border: 1px solid #262932!important;
color: #6c757d!important;
}
form:not(.oo-ui-layout) textarea, form:not(.oo-ui-layout) input {
background: #0f1116!important;
border: 1px solid #262932!important;
color: #6c757d!important;
}
.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button, .oo-ui-textInputWidget .oo-ui-inputWidget-input, .oo-ui-dropdownWidget-handle, button, textarea, select {
background: #0f1116!important;
border: 1px solid #262932!important;
color: #6c757d!important;
}
form:not(.oo-ui-layout) button, form:not(.oo-ui-layout) input[type='submit'] {
background-image: linear-gradient(to right, #561f1f 0%, #a23e2f 100%)!important;
border: 0!important;
color: #fff!important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: normal!important;
}
#searchButton, #mw-searchButton {
position: absolute!important;
top: 0!important;
margin: 0!important;
padding: 0!important;
right: 1.5em!important;
width: 2.5em!important;
height: 2.5em!important;
text-indent: -99999px!important;
border: 0!important;
background-color: transparent!important;
background-repeat: no-repeat!important;
background-image: url(/skins/CustomTimeless/resources/images/search-ltr.svg?2df17)!important;
background-position: center 40%!important;
box-shadow: none!important;
}
.wikibox-monster {
background:#15161c !important;
border: 1px solid #262932!important;
padding:15px!important;
width:221px!important;
text-align:center!important;
text-transform: capitalize!important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
.wikibox-monster>p>span {
color:rgba(240, 240, 255, 0.9)!important;
font-weight:bold!important;
font-size:16px!important;
text-transform: initial!important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
.wikibox-monster>hr {
border: none!important;
border-top: 1px solid #262932!important;
}
.wikibox-monster>figure {
padding: 0px!important;
}
.wikibox-monster>figure>a>img {
padding: 0px!important;
border: 1px solid #262932!important;
}
.wikibox-monster>.content {
text-align:left!important;
font-size:12px!important;
color:RGBA(255,255,255,0.5)!important;
padding-top:10px!important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
.wikibox-monster>.level {
color:rgba(255,255,255,0.3)!important;
font-weight:bold!important;
padding-top:10px!important;
font-size: 16px!important;
text-transform: lowercase !important;
font-family: 'GothamSSm-Light', sans-serif !important;
}
.wikibox-monster>.level::first-letter {
text-transform: uppercase !important;
} /* Estilo para as seções de conteúdo */
.nav-content {
display: none;
}
.show-content {
display: block;
}
/* Esconde os inputs radio */
input[type="radio"] {
display: none;
}
/* Estilização dos labels que atuam como botões */
.custom-nav label {
background-image: linear-gradient(to right, #561f1f 0%, #a23e2f 100%)!important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: normal!important;
color: #fff;
padding: 10px 20px;
margin-right: 5px;
cursor: pointer;
transition: background 0.3s;
}
.custom-nav label:hover {
background-image: linear-gradient(to right, rgba(86, 31, 31, 0.8) 0%, rgba(162, 62, 47, 0.8) 100%)!important;
font-family: 'GothamSSm-Light', sans-serif !important;
font-weight: normal!important;
}
/* Estilo para os conteúdos */
.content-section {
display: none;
}
/* Exibe o conteúdo correspondente quando o radio estiver selecionado */
#nav-a:checked ~ #content-a,
#nav-b:checked ~ #content-b,
#nav-c:checked ~ #content-c,
#nav-d:checked ~ #content-d,
#nav-e:checked ~ #content-e,
#nav-f:checked ~ #content-f,
#nav-g:checked ~ #content-g,
#nav-h:checked ~ #content-h,
#nav-i:checked ~ #content-i,
#nav-j:checked ~ #content-j,
#nav-k:checked ~ #content-k,
#nav-l:checked ~ #content-l,
#nav-m:checked ~ #content-m{
display: block;
}
/* ======================================
SUBMENU MULTI-COLUNA - VERSÃO CORRIGIDA
====================================== */
/* Submenu básico */
ul.submenu {
display: none;
position: absolute !important;
left: 100%;
top: -10px;
background-color: #0f1116;
border-radius: 4px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 20px;
z-index: 1000 !important;
border: 1px solid #171a22;
/* Configuração básica para colunas */
min-width: 250px;
max-width: 800px;
width: auto;
/* CSS Grid como fallback principal */
display: none; /* Escondido por padrão */
align-items: start;
}
/* Submenu com 2 colunas (7-12 itens) */
ul.submenu.submenu-2-columns {
min-width: 450px;
column-count: 2;
column-gap: 20px;
column-fill: balance;
/* CSS Grid como alternativa */
display: none;
grid-template-columns: 1fr 1fr;
}
/* Submenu com 3 colunas (13-20 itens) */
ul.submenu.submenu-3-columns {
min-width: 600px;
column-count: 3;
column-gap: 20px;
column-fill: balance;
/* CSS Grid como alternativa */
display: none;
grid-template-columns: 1fr 1fr 1fr;
}
/* Submenu com 4 colunas (21+ itens) */
ul.submenu.submenu-4-columns {
min-width: 750px;
column-count: 4;
column-gap: 20px;
column-fill: balance;
/* CSS Grid como alternativa */
display: none;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* Força quebra de página adequada nos itens */
ul.submenu li {
break-inside: avoid !important;
page-break-inside: avoid !important;
display: block !important;
margin-bottom: 5px;
width: 100%;
/* Para CSS Grid */
grid-column: auto;
}
/* Exibe o submenu ao passar o mouse */
li.has-submenu:hover > ul.submenu {
display: block !important;
}
/* Para navegadores que suportam CSS Grid melhor */
@supports (display: grid) {
ul.submenu.submenu-2-columns {
display: none; /* Reset */
column-count: unset;
}
ul.submenu.submenu-3-columns {
display: none; /* Reset */
column-count: unset;
}
ul.submenu.submenu-4-columns {
display: none; /* Reset */
column-count: unset;
}
li.has-submenu:hover > ul.submenu.submenu-2-columns {
display: grid !important;
grid-template-columns: 1fr 1fr;
}
li.has-submenu:hover > ul.submenu.submenu-3-columns {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr;
}
li.has-submenu:hover > ul.submenu.submenu-4-columns {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
/* Ajustes para telas médias */
@media screen and (min-width: 851px) and (max-width: 1099px) {
ul.submenu.submenu-4-columns {
min-width: 600px;
column-count: 3;
}
ul.submenu.submenu-3-columns {
min-width: 500px;
column-count: 2;
}
@supports (display: grid) {
li.has-submenu:hover > ul.submenu.submenu-4-columns {
grid-template-columns: 1fr 1fr 1fr;
}
li.has-submenu:hover > ul.submenu.submenu-3-columns {
grid-template-columns: 1fr 1fr;
}
}
}
/* Ajustes para dispositivos móveis */
@media (max-width: 850px) {
/* Em mobile, todos os submenus voltam para 1 coluna */
ul.submenu,
ul.submenu.submenu-2-columns,
ul.submenu.submenu-3-columns,
ul.submenu.submenu-4-columns {
column-count: 1 !important;
min-width: auto !important;
width: calc(100% - 40px) !important;
position: relative !important;
left: 0 !important;
max-width: none !important;
}
@supports (display: grid) {
li.has-submenu:hover > ul.submenu,
li.has-submenu.active > ul.submenu {
display: block !important;
grid-template-columns: none !important;
}
}
/* Comportamento móvel para submenus */
li.has-submenu:hover > ul.submenu {
display: none; /* Não mostra automaticamente no hover em mobile */
}
li.has-submenu.active > ul.submenu {
display: block !important;
}
}
/* Estilização dos links dos submenus */
.submenu li a {
padding: 10px 10px !important;
margin: 0 !important;
display: block;
color: rgba(255, 255, 255, .5) !important;
transition: background-color 0.2s !important;
border-bottom: 1px solid #171a22 !important;
font-family: 'GothamSSm-Light', sans-serif !important;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
.submenu li a:hover {
color: #fff !important;
border-bottom: 1px solid rgba(255, 255, 255, .5) !important;
text-shadow: 0 0 5px #fff !important;
background-color: rgba(255, 255, 255, 0.05) !important;
}
/* Garantia adicional para forçar o layout em colunas */
.force-columns ul.submenu.submenu-2-columns {
columns: 2;
column-gap: 20px;
}
.force-columns ul.submenu.submenu-3-columns {
columns: 3;
column-gap: 20px;
}
.force-columns ul.submenu.submenu-4-columns {
columns: 4;
column-gap: 20px;
}
.mw-guide-container {
max-width: 1200px;
margin: 0 auto;
background: #171920;
border-radius: 5px;
}
.mw-guide-title {
color: #ffffff;
border-bottom: 1px solid #a23e2f;
padding-bottom: 15px;
margin-bottom: 30px;
font-size: 24px;
font-weight: normal;
}
/* Grid de Guias */
.mw-guide-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
padding: 0;
}
/* Item de Guia */
.mw-guide-item {
display: flex;
align-items: center;
/*
background: #0f1116!important;
border: 1px solid #262932;
border-radius: 5px;
*/
background: #15161c!important;
border: 1px solid #15161c;
padding: 15px;
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.mw-guide-item:hover {
background: #1a1b22!important;
border: 1px solid #ba6356;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(186, 99, 86, 0.2);
}
.mw-guide-item:hover .mw-guide-text {
color: #ba6356;
}
/* Ícone do Guia */
.mw-guide-icon {
width: 48px;
height: 48px;
margin-right: 15px;
flex-shrink: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Texto do Guia */
.mw-guide-text {
color: #9e9e9e;
font-size: 16px;
transition: color 0.3s ease;
text-decoration: none;
}
.mw-guide-icon {
width: 48px;
height: 48px;
margin-right: 15px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
/* Responsividade para os ícones */
@media (max-width: 768px) {
.mw-guide-icon {
width: 40px;
height: 40px;
margin-right: 12px;
font-size: 24px;
}
}
@media (max-width: 480px) {
.mw-guide-icon {
width: 36px;
height: 36px;
margin-right: 10px;
font-size: 20px;
}
}
/* Responsividade */
@media (max-width: 768px) {
.mw-guide-container {
padding: 20px;
margin: 10px;
}
.mw-guide-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.mw-guide-item {
padding: 12px;
}
.mw-guide-icon {
width: 40px;
height: 40px;
margin-right: 12px;
}
.mw-guide-icon::before {
font-size: 24px !important;
line-height: 40px !important;
}
.mw-guide-text {
font-size: 14px;
}
.mw-guide-title {
font-size: 20px;
padding-bottom: 12px;
margin-bottom: 20px;
}
}
@media (max-width: 480px) {
.mw-guide-grid {
grid-template-columns: 1fr;
}
.mw-guide-item {
padding: 10px;
}
.mw-guide-icon {
width: 36px;
height: 36px;
margin-right: 10px;
}
.mw-guide-icon::before {
font-size: 20px !important;
line-height: 36px !important;
}
.mw-guide-text {
font-size: 13px;
}
}
/* Links sem decoração padrão */
a.mw-guide-item {
text-decoration: none;
}
a.mw-guide-item:visited {
color: inherit;
}
/* CSS para Cards com Imagem e Texto - MediaWiki - 5 COLUNAS */
.mw-image-container {
max-width: 1200px;
margin: 0 auto;
background: #171920;
}
.mw-image-title {
color: #ffffff;
border-bottom: 1px solid #a23e2f;
padding-bottom: 15px;
margin-bottom: 30px;
font-size: 24px;
font-weight: normal;
}
/* Grid de Cards com Imagem - ALTERADO PARA 5 COLUNAS */
.mw-image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* REDUZIDO de 300px para 220px */
gap: 10px;
padding: 0;
}
/* ALTERNATIVA: Forçar exatamente 5 colunas (opcional) */
/*
.mw-image-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
padding: 0;
}
*/
/* Card Individual */
.mw-image-card {
background: #15161c!important;
border: 1px solid #262932;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
}
.mw-image-card:hover {
background: #1a1b22;
border-color: #ba6356;
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(186, 99, 86, 0.3);
}
.mw-image-card:hover .mw-card-text {
color: #ba6356;
}
/* Área da Imagem */
.mw-card-image {
width: 100%;
height: 140px; /* REDUZIDO de 170px para 140px para caber melhor */
overflow: hidden;
position: relative;
background: #15161c!important;
}
.mw-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.mw-image-card:hover .mw-card-image img {
transform: scale(1.05);
}
/* Área do Texto */
.mw-card-text {
padding: 15px; /* REDUZIDO de 20px para 15px */
text-align: center;
color: #9e9e9e;
font-size: 14px; /* REDUZIDO de 16px para 14px */
transition: color 0.3s ease;
text-decoration: none;
display: block;
line-height: 1.3; /* ADICIONADO para melhor espaçamento */
}
/* Placeholder para imagens que não carregaram */
.mw-card-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
z-index: 1;
}
.mw-card-image img {
position: relative;
z-index: 2;
}
/* Responsividade ATUALIZADA para 5 colunas */
@media (max-width: 1200px) {
.mw-image-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 4 colunas */
}
}
@media (max-width: 900px) {
.mw-image-container {
padding: 20px;
margin: 10px;
}
.mw-image-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 3 colunas */
gap: 15px;
}
.mw-card-image {
height: 120px;
}
.mw-card-text {
padding: 12px;
font-size: 13px;
}
.mw-image-title {
font-size: 20px;
padding-bottom: 12px;
margin-bottom: 20px;
}
}
@media (max-width: 600px) {
.mw-image-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 2 colunas */
gap: 12px;
}
.mw-card-image {
height: 100px;
}
.mw-card-text {
padding: 10px;
font-size: 12px;
}
}
@media (max-width: 400px) {
.mw-image-grid {
grid-template-columns: 1fr; /* 1 coluna */
gap: 15px;
}
.mw-card-image {
height: 120px;
}
.mw-card-text {
padding: 12px;
font-size: 14px;
}
}
/* Links sem decoração padrão */
a.mw-image-card {
text-decoration: none;
}
a.mw-image-card:visited {
color: inherit;
}
a.mw-image-card:visited .mw-card-text {
color: #9e9e9e;
}
/* Efeito de loading para imagens */
.mw-card-image.loading::after {
content: '⚡';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px; /* REDUZIDO de 48px para 32px */
color: rgba(255, 255, 255, 0.5);
z-index: 3;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* ==============================================
CLASSE ALTERNATIVA PARA FORÇAR 5 COLUNAS EXATAS
Use .mw-image-grid-5col em vez de .mw-image-grid
============================================== */
.mw-image-grid-5col {
display: grid;
grid-template-columns: repeat(5, 1fr); /* SEMPRE 5 colunas */
gap: 10px;
padding: 0;
}
@media (max-width: 1200px) {
.mw-image-grid-5col {
grid-template-columns: repeat(4, 1fr); /* 4 colunas */
}
}
@media (max-width: 900px) {
.mw-image-grid-5col {
grid-template-columns: repeat(3, 1fr); /* 3 colunas */
}
}
@media (max-width: 600px) {
.mw-image-grid-5col {
grid-template-columns: repeat(2, 1fr); /* 2 colunas */
}
}
@media (max-width: 400px) {
.mw-image-grid-5col {
grid-template-columns: 1fr; /* 1 coluna */
}
}}
/* =====================================================================
AvalonMU - Timeless overrides (v3)
Goal:
- Bigger sidebars + bigger buttons/typography
- Hover-open navigation (pairs with Timeless.js v3)
- Fix "Wiki tools" visibility
- Remove duplicated heading underlines (the "red double stripes")
Install:
1) In MediaWiki:Timeless.css, REMOVE your previous "AvalonMU - Timeless overrides" block (v2)
2) Paste this block at the VERY END of the page.
===================================================================== */
/* If you already import fonts earlier, you can delete this. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');
:root {
--vm-bg: #060a12;
--vm-panel: rgba(18, 24, 34, 0.82);
--vm-panel-strong: rgba(18, 24, 34, 0.92);
--vm-border: rgba(198, 151, 61, 0.55);
--vm-border-soft: rgba(255, 255, 255, 0.08);
--vm-accent: #cf3a2a;
--vm-text: #d6d9e2;
--vm-muted: #9aa3b2;
--vm-radius: 16px;
--vm-radius-sm: 12px;
--vm-shadow: 0 18px 38px rgba(0,0,0,.55);
--vm-font-title: "Cinzel", serif;
--vm-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* sizing knobs */
--vm-nav-width: 20em;
--vm-related-width: 18em;
}
/* Typography */
body { font-family: var(--vm-font-body) !important; color: var(--vm-text); }
#firstHeading, .mw-first-heading, h1, h2, h3, h4 { font-family: var(--vm-font-title) !important; }
/* ===== Remove duplicated heading underlines (Timeless default + your red line) ===== */
#firstHeading,
.mw-first-heading,
.mw-body h1,
.mw-body h2 {
border-bottom: none !important;
position: relative;
padding-bottom: 14px !important;
margin-bottom: 18px !important;
}
#firstHeading::after,
.mw-first-heading::after,
.mw-body h1::after,
.mw-body h2::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--vm-accent), rgba(0,0,0,0));
opacity: .95;
}
/* ===== Make layout feel less "tight": widen sidebars on desktop =====
Timeless uses margin-left/right to make room for sidebars, so we override both.
*/
@media (min-width: 1100px) {
#mw-site-navigation { width: var(--vm-nav-width) !important; }
#mw-related-navigation { width: var(--vm-related-width) !important; }
/* main content + head positioning */
.mw-body,
#mw-head,
#p-personal {
margin-left: calc(var(--vm-nav-width) + 1em) !important;
margin-right: calc(var(--vm-related-width) + 1em) !important;
}
}
/* Make both sidebars look consistent */
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
background: transparent !important;
}
/* ===== LEFT SIDEBAR (mw-site-navigation) ===== */
#mw-site-navigation.vm-nav .mw-portlet {
margin: 0 0 16px 0 !important;
border-radius: var(--vm-radius) !important;
background: linear-gradient(180deg, var(--vm-panel), rgba(18,24,34,0.65)) !important;
border: 1px solid var(--vm-border-soft) !important;
box-shadow: var(--vm-shadow) !important;
overflow: hidden !important;
}
#mw-site-navigation.vm-nav .mw-portlet h3.vm-portlet__header {
margin: 0 !important;
padding: 16px 16px !important;
font-size: 15.5px !important; /* bigger */
letter-spacing: .6px !important;
text-transform: none !important;
color: #fff !important;
cursor: pointer !important;
user-select: none !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border-left: 3px solid transparent !important;
}
#mw-site-navigation.vm-nav .mw-portlet h3.vm-portlet__header:hover {
background: rgba(0,0,0,0.18) !important;
border-left-color: var(--vm-accent) !important;
}
#mw-site-navigation.vm-nav .mw-portlet h3.vm-portlet__header::after {
content: "›";
font-size: 20px;
opacity: .85;
transform: rotate(0deg);
transition: transform .18s ease, opacity .18s ease;
}
#mw-site-navigation.vm-nav .mw-portlet.is-open h3.vm-portlet__header::after {
transform: rotate(90deg);
opacity: 1;
}
/* Collapsible body */
#mw-site-navigation.vm-nav .mw-portlet .mw-portlet-body {
padding: 12px 14px 16px 14px !important; /* bigger */
border-top: 1px solid rgba(255,255,255,0.06) !important;
display: none;
}
#mw-site-navigation.vm-nav .mw-portlet.is-open .mw-portlet-body {
display: block;
}
#mw-site-navigation.vm-nav .mw-portlet .mw-portlet-body ul {
margin: 0 !important;
padding: 0 !important;
}
#mw-site-navigation.vm-nav .mw-list-item {
list-style: none !important;
margin: 10px 0 !important; /* bigger spacing */
}
#mw-site-navigation.vm-nav .mw-list-item a {
display: block !important;
padding: 14px 14px !important; /* bigger */
border-radius: var(--vm-radius-sm) !important;
background: rgba(0,0,0,0.20) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
color: var(--vm-text) !important;
font-size: 14.5px !important; /* bigger */
text-decoration: none !important;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
#mw-site-navigation.vm-nav .mw-list-item a:hover {
background: rgba(0,0,0,0.28) !important;
border-color: var(--vm-border) !important;
transform: translateY(-1px);
}
/* ===== “Wiki tools” issue =====
In Timeless, "Wiki tools" is a CHUNK heading (not a link). The clickable links are inside #p-tb.
We make #p-tb always visible and hide the confusing chunk title.
*/
#mw-site-navigation .sidebar-chunk h2 {
opacity: .75;
font-size: 12px;
letter-spacing: .8px;
text-transform: uppercase;
padding: 10px 14px;
margin: 6px 0 10px 0;
}
/* Always show Wiki tools portlet body; remove arrow and cursor */
#mw-site-navigation.vm-nav #p-tb.is-open .mw-portlet-body { display: block !important; }
#mw-site-navigation.vm-nav #p-tb h3.vm-portlet__header { cursor: default !important; }
#mw-site-navigation.vm-nav #p-tb h3.vm-portlet__header::after { content: "" !important; }
/* ===== RIGHT SIDEBAR (page tools) ===== */
#mw-related-navigation .mw-portlet {
border-radius: var(--vm-radius) !important;
background: linear-gradient(180deg, var(--vm-panel), rgba(18,24,34,0.65)) !important;
border: 1px solid var(--vm-border-soft) !important;
box-shadow: var(--vm-shadow) !important;
overflow: hidden !important;
}
#mw-related-navigation .mw-portlet h3 {
padding: 16px 16px !important;
margin: 0 !important;
border-left: 3px solid transparent !important;
}
#mw-related-navigation .mw-portlet h3:hover {
border-left-color: var(--vm-accent) !important;
background: rgba(0,0,0,0.16) !important;
}
#mw-related-navigation .mw-list-item a {
border-radius: var(--vm-radius-sm) !important;
padding: 14px 14px !important;
font-size: 14.5px !important;
}
/* Optional: if any old mega panels still exist, keep them readable instead of broken */
#mw-site-navigation ul.submenu {
background: var(--vm-panel-strong);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--vm-shadow);
border-radius: var(--vm-radius);
padding: 14px 14px;
}
/* ==============================
AvalonMU - Hotfix (Layout + Flyout)
Cole no FINAL do MediaWiki:Timeless.css
============================== */
:root{
--vm-nav-w: 280px; /* largura do menu esquerdo */
--vm-flyout-gap: 18px; /* espacinho entre menu e flyout */
}
/* 1) FIX CRÍTICO: não deixe o conteúdo virar “coluna estreita” */
#mw-content-wrapper,
#mw-content,
#mw-content-container,
#mw-content-block.ts-inner,
#mw-content-container.ts-container{
max-width: none !important;
}
#mw-content-wrapper{
width: auto !important;
margin: 0 !important;
padding-right: 0 !important;
}
/* 2) Ajuste do menu esquerdo (tamanho) */
#site-navigation{
width: var(--vm-nav-w) !important;
}
#site-navigation .mw-portlet{
width: var(--vm-nav-w) !important;
}
/* 3) Flyout flutuante pra direita (não empurra conteúdo) */
#site-navigation .mw-portlet{
position: relative !important;
}
#site-navigation ul.submenu{
position: absolute !important;
top: -6px !important;
left: calc(var(--vm-nav-w) + var(--vm-flyout-gap)) !important;
z-index: 9999 !important;
/* Limites pra não estourar em resoluções menores */
max-width: calc(100vw - var(--vm-nav-w) - 340px) !important;
overflow: hidden !important;
}
/* 4) Esconde o “Wiki tools” da esquerda (você já tem tools na direita) */
#mw-site-navigation #p-tb{
display: none !important;
}
/* ===============================
AvalonMU Layout + Mega Sidebar (v4)
================================= */
/* Reduce the empty gaps between sidebars and center content */
@media (min-width: 1200px) {
#mw-content-container {
max-width: 1720px !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
#mw-content-block {
display: grid !important;
grid-template-columns: 320px minmax(0, 1fr) 320px;
column-gap: 22px !important;
align-items: start;
}
#mw-site-navigation { grid-column: 1; }
#mw-content-wrapper {
grid-column: 2;
max-width: none !important;
margin: 0 !important;
}
#mw-related-navigation { grid-column: 3; }
}
/* Disable legacy submenu systems to avoid conflicts */
#mw-site-navigation.vm-nav .submenu,
#mw-site-navigation.vm-nav .mm-submenu {
display: none !important;
}
/* Hide original portlet bodies only when JS is ready (safe fallback) */
@media (min-width: 1200px) {
#mw-site-navigation.vm-nav.vm-nav--ready .mw-portlet-body {
display: none !important;
}
}
/* Small screens: accordion mode shows bodies when open */
@media (max-width: 1199px) {
#mw-site-navigation.vm-nav .mw-portlet-body {
display: none;
}
#mw-site-navigation.vm-nav .mw-portlet.is-open .mw-portlet-body {
display: block;
}
}
/* Header as clickable button */
#mw-site-navigation.vm-nav .mw-portlet h3.vm-portlet__header {
cursor: pointer;
user-select: none;
}
/* Floating flyout overlay */
#vm-mega-panel {
position: absolute;
z-index: 99999;
display: none;
background: rgba(14, 18, 26, 0.92);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
padding: 14px;
max-height: calc(100vh - 140px);
overflow: auto;
backdrop-filter: blur(10px);
}
#vm-mega-panel.is-open {
display: block;
}
/* Columns grid */
#vm-mega-panel .vm-grid {
display: grid;
grid-template-columns: repeat(var(--vm-cols, 2), minmax(180px, 1fr));
column-gap: 18px;
row-gap: 10px;
}
#vm-mega-panel ul.vm-col {
list-style: none;
margin: 0;
padding: 0;
}
#vm-mega-panel ul.vm-col li {
margin: 0;
padding: 0;
}
/* Link style (cards) */
#vm-mega-panel a {
display: block;
padding: 10px 12px;
border-radius: 12px;
text-decoration: none;
color: rgba(255, 255, 255, 0.92);
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
border: 1px solid rgba(255, 255, 255, 0.10);
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
#vm-mega-panel a:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.22);
background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
}
/* ===============================
AvalonMU – Spacing/Layouts (AvalonMU-like) v1
- remove “coluna estreita”
- compacta sidebar + itens
- mega-flyout mais enxuto
================================= */
:root{
--vm-nav-width: 17.5em; /* ~280px */
--vm-related-width: 17.5em; /* ~280px */
}
/* Conteudo usa toda a largura disponível entre sidebars */
@media (min-width: 1100px){
.mw-body, #mw-head, #p-personal{
margin-left: calc(var(--vm-nav-width) + .8em) !important;
margin-right: calc(var(--vm-related-width) + .8em) !important;
}
.mw-body, #mw-content, #mw-content-wrapper{
max-width: none !important;
}
#mw-content{ width: auto !important; }
}
/* Mantém suas grids seguindo a largura do conteúdo (sem “cap” 1200px) */
.mw-guide-container,
.mw-image-container{
max-width: none !important;
margin: 0 !important;
}
/* Eventos/Links em grid: fica mais parecido com o AvalonMU */
.mw-guide-grid{
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}
.mw-guide-item{ padding: 12px !important; }
.mw-guide-icon{ width: 42px !important; height: 42px !important; margin-right: 12px !important; }
.mw-guide-text{ font-size: 14px !important; }
/* Classes: evita quebrar “Magic Gladiator / Kundun Mephis” em 2 linhas */
.mw-card-text{
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Sidebar esquerda: menos “botão gigante” */
#mw-site-navigation.vm-nav .mw-portlet{ margin: 0 0 12px 0 !important; border-radius: 14px !important; }
#mw-site-navigation.vm-nav .mw-portlet h3.vm-portlet__header{ padding: 12px 14px !important; font-size: 14px !important; letter-spacing: .4px !important; }
#mw-site-navigation.vm-nav .mw-portlet .mw-portlet-body{ padding: 10px 12px 12px 12px !important; }
#mw-site-navigation.vm-nav .mw-list-item{ margin: 8px 0 !important; }
#mw-site-navigation.vm-nav .mw-list-item a{ padding: 10px 12px !important; font-size: 13.5px !important; border-radius: 12px !important; }
/* Mega-flyout: mais compacto, com colunas mais densas */
#vm-mega-panel{
padding: 12px !important;
border-radius: 14px !important;
max-height: calc(100vh - 120px) !important;
}
#vm-mega-panel .vm-grid{
grid-template-columns: repeat(var(--vm-cols, 2), minmax(160px,1fr)) !important;
column-gap: 14px !important;
row-gap: 8px !important;
}
#vm-mega-panel a{
padding: 8px 10px !important;
border-radius: 10px !important;
font-size: 13.5px !important;
line-height: 1.15 !important;
}
/* Mobile: separação melhor entre grupos do menu (accordion) */
@media (max-width: 1199px){
#mw-site-navigation.vm-nav .mw-portlet{ margin-bottom: 10px !important; }
}
/* =====================================================================
VortanMU – Layout FIX (v5)
Objetivo:
- Eliminar os “corredores vazios” entre sidebar e conteudo (dupla reserva de espaço)
- Alinhar header/top strip com o mesmo grid do corpo (estilo RealMU)
===================================================================== */
body.skin-timeless {
/* Aumenta o “shell” (header + corpo) sem esticar infinito.
Se quiser mais largo ainda: 1900px / 2000px */
--vm-shell-max: 1905px;
}
/* Timeless usa .ts-inner para centralizar com max-width.
Aqui a gente aumenta esse max-width para o layout ocupar o espaço disponível. */
body.skin-timeless .ts-inner {
max-width: var(--vm-shell-max) !important;
width: 100% !important;
}
@media (min-width: 1100px) {
/* 1) REMOVE a reserva de espaço “legacy” do Timeless (isso é o que cria o vazio verde) */
body.skin-timeless .mw-body,
body.skin-timeless #mw-head,
body.skin-timeless #p-personal {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 2) A faixa do topo (color-middle) também usava os mesmos margins */
body.skin-timeless .color-middle {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 3) Garante que nada esteja capando o conteudo com max-width */
body.skin-timeless #mw-wrapper,
body.skin-timeless #mw-content-wrapper,
body.skin-timeless #mw-content-container,
body.skin-timeless #mw-content,
body.skin-timeless .mw-body {
max-width: none !important;
width: 100% !important;
}
/* 4) Força um “shell” 3 colunas (left nav / conteudo / right tools) */
body.skin-timeless #mw-content-block {
display: grid !important;
grid-template-columns: var(--vm-left, 320px) minmax(0, 1fr) var(--vm-right, 300px);
column-gap: var(--vm-gap, 18px);
align-items: start;
}
body.skin-timeless #mw-site-navigation {
grid-column: 1;
width: var(--vm-left, 320px) !important;
}
body.skin-timeless #mw-related-navigation {
grid-column: 3;
width: var(--vm-right, 300px) !important;
}
body.skin-timeless #mw-content-container,
body.skin-timeless #mw-content-block > .mw-body {
grid-column: 2;
min-width: 0;
}
/* 5) Evita floats/posicionamentos brigando com o grid */
body.skin-timeless #mw-site-navigation,
body.skin-timeless #mw-related-navigation,
body.skin-timeless #mw-content-container,
body.skin-timeless #mw-content {
float: none !important;
position: relative !important;
}
}
/* =====================================================================
VORTANMU - MASTER LAYOUT OVERRIDE (RealMU symmetry, keep your menus)
===================================================================== */
:root {
/* Largura geral (RealMU ~99em). Diminui para “encolher” o site. */
--vm-shell-max: 99em;
/* Espaço externo (cria margem visual antes da borda do monitor) */
--vm-edge-pad: 24px;
/* Espaço entre colunas (conteúdo <-> sidebars) */
--vm-side-gap: 1em;
/* Larguras das sidebars (proporção RealMU) */
--vm-left-w: 20em;
--vm-right-w: 16em;
}
/* 1) Para de esticar até a borda (isso resolve o “gigante no monitor”) */
body.skin-timeless .ts-inner,
body.skin-timeless .color-middle-container,
body.skin-timeless #mw-content-container {
max-width: var(--vm-shell-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--vm-edge-pad) !important;
padding-right: var(--vm-edge-pad) !important;
box-sizing: border-box !important;
}
/* 2) Desktop: sidebars com espaço igual (como no RealMU) */
@media screen and (min-width: 1340px) {
body.skin-timeless #mw-content-block {
display: flex !important;
align-items: flex-start !important;
}
body.skin-timeless #mw-site-navigation {
flex: 0 0 var(--vm-left-w) !important;
width: var(--vm-left-w) !important;
padding-right: var(--vm-side-gap) !important; /* gap igual ao RealMU */
box-sizing: border-box !important;
}
body.skin-timeless #mw-content-wrapper {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
}
body.skin-timeless #mw-related-navigation {
flex: 0 0 var(--vm-right-w) !important;
width: var(--vm-right-w) !important;
padding-left: var(--vm-side-gap) !important; /* gap igual ao lado esquerdo */
box-sizing: border-box !important;
}
}
/* 3) Evita scroll horizontal quando tiver código/URLs grandes */
body.skin-timeless pre,
body.skin-timeless code,
body.skin-timeless .mw-code,
body.skin-timeless .mw-highlight {
max-width: 100% !important;
overflow-x: auto !important;
}
/* Segurança: não deixa o documento crescer além do viewport */
html, body {
max-width: 100% !important;
overflow-x: hidden;
}
/* =============================================
VortanMU — Layout RealMU (alinhamento + escala)
Cole ESTE BLOCO NO FINAL do MediaWiki:Timeless.css
============================================= */
:root{
/* Controles “RealMU-like” (iguais aos que aparecem no Inspector) */
--rm-max-width: 115em; /* largura máxima do site */
--rm-outer-gutter: 5em; /* espaço externo nas bordas */
--rm-gap: 2em; /* gap entre colunas */
--rm-left: 17em; /* coluna esquerda (logo + menu) */
--rm-right: 17em; /* coluna direita (page tools) */
--rm-base-font: 14px; /* escala geral */
/* VM vars (se você quiser mexer via Inspector com “vm-*”) */
--vm-shell-max: var(--rm-max-width);
--vm-edge-pad: var(--rm-outer-gutter);
--vm-side-gap: var(--rm-gap);
--vm-left-w: var(--rm-left);
--vm-right-w: var(--rm-right);
/* vars que você mostrou da sidebar esquerda */
--vm-nav-w: 200px;
--vm-flyout-gap: 18px;
}
body{ font-size: var(--rm-base-font) !important; }
html, body{ overflow-x: hidden !important; }
@media screen and (min-width: 1340px){
/* Header alinhado com o “shell” */
#mw-header-container{
max-width: var(--vm-shell-max) !important;
margin: 0 auto !important;
padding-left: var(--vm-edge-pad) !important;
padding-right: var(--vm-edge-pad) !important;
box-sizing: border-box !important;
}
/* Container principal */
#mw-content-container{
max-width: var(--vm-shell-max) !important;
margin: 0 auto !important;
padding-left: var(--vm-edge-pad) !important;
padding-right: var(--vm-edge-pad) !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 3 colunas (esquerda / centro / direita) */
#mw-content-block{
display: grid !important;
grid-template-columns: var(--vm-left-w) minmax(0, 1fr) var(--vm-right-w) !important;
column-gap: var(--vm-side-gap) !important;
align-items: start !important;
}
/* Neutraliza floats/posicionamentos antigos (evita “estouro” e desalinhamento) */
#mw-site-navigation,
#site-navigation{
float: none !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
}
#mw-related-navigation{
float: none !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
}
#mw-content,
#mw-content-wrapper{
margin: 0 !important;
}
/* Centro não pode “estourar” */
#mw-content-wrapper,
#mw-content,
#mw-content-block > *{
min-width: 0 !important;
}
/* Left + right ocupam a coluna inteira */
#mw-site-navigation,
#site-navigation{
width: 100% !important;
margin: 0 !important;
}
#mw-related-navigation{
width: 100% !important;
margin: 0 !important;
}
/* Bloco da sidebar direita (base RealMU) */
#mw-related-navigation .sidebar-chunk{
background: #0f1520;
border: solid #141c29;
border-width: 1px 1px 0.2em;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
padding: 1.5em 1.5em 0;
line-height: 1.125;
word-wrap: break-word;
font-size: 0.95em;
/* IMPORTANT: nada de margem negativa aqui (senão volta a barra horizontal) */
margin: 0 0 12px 0 !important;
}
/* garante que o logo respeite a largura da sidebar */
#mw-site-navigation #p-logo,
#mw-site-navigation #p-logo a,
#mw-site-navigation #p-logo img{
max-width: 100% !important;
}
}
/* Efeito “RealMU-like” para imagens/cards dentro do conteúdo (classes, itens etc.) */
#mw-content-text a.image img,
#mw-content-text .thumb a img,
#mw-content-text img.mw-file-element{
border-radius: 10px;
outline: 2px solid transparent;
transition: transform 150ms ease, box-shadow 150ms ease, outline-color 150ms ease;
}
#mw-content-text a.image:hover img,
#mw-content-text .thumb a:hover img{
transform: translateY(-2px);
outline-color: rgba(255, 96, 66, 0.45);
box-shadow: 0 14px 28px rgba(0,0,0,0.50);
}
#mw-content-text a.image:focus-visible img,
#mw-content-text .thumb a:focus-visible img{
outline-color: rgba(255, 96, 66, 0.65);
}
#mw-content {
background: #0f1520;
border: solid #141c29;
border-width: 1px 1px 0.2em;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
background: #0b0f15;
padding: 4em 1em 1em;
}
