|
|
| Line 1: |
Line 1: |
| @media screen {
| | $( function () { |
| @import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap); | | // sidebar-chunk only applies to desktop-small, but the toggles are hidden at |
| @font-face { | | // other resolutions regardless and the css overrides any visible effects. |
| font-family: 'GothamSSm-Light';
| | var $dropdowns = $( '#personal, #p-variants-desktop, .sidebar-chunk' ); |
| 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'),
| | * Desktop menu click-toggling |
| url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.ttf) format('truetype'),
| | * |
| url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.woff) format('woff'),
| | * We're not even checking if it's desktop because the classes in play have no effect |
| url(/resources/assets/fonts/GothamSSm-Light/GothamSSm-Light.woff2) format('woff2');
| | * on mobile regardless... this may break things at some point, though. |
| font-weight: normal;
| | */ |
| font-style: normal;
| | |
| | /** |
| | * Close all dropdowns |
| | */ |
| | function closeOpen() { |
| | $dropdowns.removeClass( 'dropdown-active' ); |
| } | | } |
| @font-face { | | |
| font-family: 'GothamSSm-Medium';
| | /** |
| src: url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.eot);
| | * Click behaviour |
| 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'),
| | $dropdowns.on( 'click', function ( e ) { |
| url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.ttf) format('truetype'),
| | // Check if it's already open so we don't open it again |
| url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.woff) format('woff'),
| | // eslint-disable-next-line no-jquery/no-class-state |
| url(/resources/assets/fonts/GothamSSm-Medium/GothamSSm-Medium.woff2) format('woff2');
| | if ( $( this ).hasClass( 'dropdown-active' ) ) { |
| font-weight: normal;
| | if ( $( e.target ).closest( $( 'h2, #p-variants-desktop h3' ) ).length > 0 ) { |
| font-style: normal;
| | // treat reclick on the header as a toggle |
| | closeOpen(); |
| | } |
| | // Clicked inside an open menu; don't do anything |
| | } else { |
| | closeOpen(); |
| | e.stopPropagation(); // stop hiding it! |
| | $( this ).addClass( 'dropdown-active' ); |
| | } |
| | } ); |
| | $( document ).on( 'click', function ( e ) { |
| | if ( $( e.target ).closest( $dropdowns ).length > 0 ) { |
| | // Clicked inside an open menu; don't close anything |
| | } else { |
| | closeOpen(); |
| | } |
| | } ); |
| | } ); |
| | |
| | mw.hook( 'wikipage.content' ).add( function ( $content ) { |
| | // Gotta wrap them for this to work; maybe later the parser etc will do this for us?! |
| | $content.find( 'div > table:not( table table )' ).wrap( '<div class="content-table-wrapper"><div class="content-table"></div></div>' ); |
| | $content.find( '.content-table-wrapper' ).prepend( '<div class="content-table-left"></div><div class="content-table-right"></div>' ); |
| | |
| | /** |
| | * Set up borders for experimental overflowing table scrolling |
| | * |
| | * I have no idea what I'm doing. |
| | * |
| | * @param {jQuery} $table |
| | */ |
| | function setScrollClass( $table ) { |
| | var $tableWrapper = $table.parent(), |
| | // wtf browser rtl implementations |
| | scroll = Math.abs( $tableWrapper.scrollLeft() ); |
| | |
| | $tableWrapper.parent() |
| | // 1 instead of 0 because of weird rtl rounding errors or something |
| | .toggleClass( 'scroll-left', scroll > 1 ) |
| | .toggleClass( 'scroll-right', $table.outerWidth() - $tableWrapper.innerWidth() - scroll > 1 ); |
| } | | } |
| body { | | |
| font-family: 'GothamSSm-Light', sans-serif !important;
| | $content.find( '.content-table' ).on( 'scroll', function () { |
| background: #020307!important;
| | setScrollClass( $( this ).children( 'table' ).first() ); |
| | |
| | if ( $content.attr( 'dir' ) === 'rtl' ) { |
| | $( this ).find( 'caption' ).css( 'margin-right', Math.abs( $( this ).scrollLeft() ) + 'px' ); |
| | } else { |
| | $( this ).find( 'caption' ).css( 'margin-left', $( this ).scrollLeft() + 'px' ); |
| | } |
| | } ); |
| | |
| | /** |
| | * Mark overflowed tables for scrolling |
| | */ |
| | function unOverflowTables() { |
| | $content.find( '.content-table > table' ).each( function () { |
| | var $table = $( this ), |
| | $wrapper = $table.parent().parent(); |
| | if ( $table.outerWidth() > $wrapper.outerWidth() ) { |
| | $wrapper.addClass( 'overflowed' ); |
| | setScrollClass( $table ); |
| | } else { |
| | $wrapper.removeClass( 'overflowed scroll-left scroll-right fixed-scrollbar-container' ); |
| | } |
| | } ); |
| | |
| | // Set up sticky captions |
| | $content.find( '.content-table > table > caption' ).each( function () { |
| | var $container, tableHeight, |
| | $table = $( this ).parent(), |
| | $wrapper = $table.parent().parent(); |
| | |
| | if ( $table.outerWidth() > $wrapper.outerWidth() ) { |
| | $container = $( this ).parents( '.content-table-wrapper' ); |
| | $( this ).width( $content.width() ); |
| | tableHeight = $container.innerHeight() - $( this ).outerHeight(); |
| | |
| | $container.find( '.content-table-left' ).height( tableHeight ); |
| | $container.find( '.content-table-right' ).height( tableHeight ); |
| | } |
| | } ); |
| } | | } |
| | | |
| hr { | | unOverflowTables(); |
| border-top: 0px!important;
| | $( window ).on( 'resize', unOverflowTables ); |
| border-left: 0px!important;
| | |
| border-right: 0px!important;
| | /** |
| border-bottom: 1px solid #262932!important;
| | * Sticky scrollbars maybe?! |
| margin-top: 10px!important;
| | */ |
| | $content.find( '.content-table' ).each( function () { |
| | var $table, $tableWrapper, $spoof, $scrollbar; |
| | |
| | $tableWrapper = $( this ); |
| | $table = $tableWrapper.children( 'table' ).first(); |
| | |
| | // Assemble our silly crap and add to page |
| | $scrollbar = $( '<div>' ).addClass( 'content-table-scrollbar inactive' ).width( $content.width() ); |
| | $spoof = $( '<div>' ).addClass( 'content-table-spoof' ).width( $table.outerWidth() ); |
| | $tableWrapper.parent().prepend( $scrollbar.prepend( $spoof ) ); |
| | } ); |
| | |
| | /** |
| | * Scoll table when scrolling scrollbar and visa-versa lololol wut |
| | */ |
| | $content.find( '.content-table' ).on( 'scroll', function () { |
| | // Only do this here if we're not already mirroring the spoof |
| | var $mirror = $( this ).siblings( '.inactive' ).first(); |
| | |
| | $mirror.scrollLeft( $( this ).scrollLeft() ); |
| | } ); |
| | $content.find( '.content-table-scrollbar' ).on( 'scroll', function () { |
| | var $mirror = $( this ).siblings( '.content-table' ).first(); |
| | |
| | // Only do this here if we're not already mirroring the table |
| | // eslint-disable-next-line no-jquery/no-class-state |
| | if ( !$( this ).hasClass( 'inactive' ) ) { |
| | $mirror.scrollLeft( $( this ).scrollLeft() ); |
| | } |
| | } ); |
| | |
| | /** |
| | * Set active when actually over the table it applies to... |
| | */ |
| | function determineActiveSpoofScrollbars() { |
| | $content.find( '.overflowed .content-table' ).each( function () { |
| | var $scrollbar = $( this ).siblings( '.content-table-scrollbar' ).first(); |
| | |
| | // Skip caption |
| | var captionHeight = $( this ).find( 'caption' ).outerHeight() || 0; |
| | if ( captionHeight ) { |
| | // Pad slightly for reasons |
| | captionHeight += 8; |
| | } |
| | |
| | var tableTop = $( this ).offset().top, |
| | tableBottom = tableTop + $( this ).outerHeight(), |
| | viewBottom = window.scrollY + document.documentElement.clientHeight, |
| | active = tableTop + captionHeight < viewBottom && tableBottom > viewBottom; |
| | $scrollbar.toggleClass( 'inactive', !active ); |
| | } ); |
| } | | } |
| | | |
| a { | | determineActiveSpoofScrollbars(); |
| color: rgba(240,240,255,0.7)!important;
| | $( window ).on( 'scroll resize', determineActiveSpoofScrollbars ); |
| text-decoration: none!important;
| | |
| | |
| | function showContent(id) { |
| | const conteudos = document.querySelectorAll('.nav-content'); |
| | conteudos.forEach((div) => { |
| | div.classList.remove('show-content'); |
| | }); |
| | document.getElementById(id).classList.add('show-content'); |
| } | | } |
|
| |
| 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;
| |
| }
| |
| body {
| |
| background: #020307 url(https://wiki.vortanmu.com/images/20250321/167dd770c3e2b8.jpg) no-repeat top 1px center!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 */
| |
| }
| |
| }}
| |
| /* 1.1 Largura máxima e centralização da coluna principal */
| |
| #mw-content-wrapper {
| |
| max-width: 1200px; /* ajuste conforme achar melhor (ex.: 1100–1250px) */
| |
| margin-left: 18px; /* deixa espaço para a sidebar; combine com a largura da barra */
| |
| margin-right: auto;
| |
| padding-right: 0px; /* um respiro à direita */
| |
| }
| |
|
| |
|
| /* 1.2 Tamanho e peso dos títulos principais */ | | /** |
| .mw-body h1.firstHeading { | | * Make sure tablespoofs remain correctly-sized? |
| font-size: 36px; /* RealMU usa algo em torno de 32–36px */ | | */ |
| font-weight: normal; /* mantém o visual clean */
| | $( window ).on( 'resize', function () { |
| line-height: 1.2;
| | $content.find( '.content-table-scrollbar' ).each( function () { |
| }
| | var width = $( this ).siblings().first().find( 'table' ).first().width(); |
| | $( this ).find( '.content-table-spoof' ).first().width( width ); |
| | $( this ).width( $content.width() ); |
| | } ); |
| | } ); |
| | } ); |
| | /* ===== Mega-menu estável – Timeless (.mw-portlet) ===== */ |
| | mw.loader.using(['jquery']).then(function () { |
| | try { |
| | if (window.__megaMenuStable) return; |
| | window.__megaMenuStable = true; |
| | |
| | var NAV_SEL = '#site-navigation .sidebar-inner'; |
| | var isDesktop = function () { return window.innerWidth >= 851; }; |
| | |
| | function build() { |
| | var $container = $(NAV_SEL); |
| | if (!$container.length) return; |
| | |
| | // limpa qualquer resíduo de execuções anteriores |
| | $container.find('h3.has-mega').removeClass('has-mega active'); |
| | $container.find('ul.submenu').remove(); |
| | $(document).off('.megamenu'); |
| | $(window).off('.megamenu'); |
| | |
| | // para cada seção (portlet) |
| | $container.find('.mw-portlet').each(function () { |
| | var $portlet = $(this); |
| | var $h3 = $portlet.children('h3').first(); |
| | var $ul = $portlet.children('ul').first(); |
| | if (!$ul.length) $ul = $portlet.find('> .mw-portlet-body > ul').first(); |
| | if (!$h3.length || !$ul.length) return; |
| | |
| | var $links = $ul.find('> li > a'); |
| | if (!$links.length) return; |
| | |
| | // marca o título como "tem mega" |
| | $h3.addClass('has-mega'); |
|
| |
|
| /* 1.3 Logotipo menor e com margem */ | | // define colunas dinamicamente |
| .mw-wiki-logo.timeless-logo img { | | var n = $links.length; |
| max-width: 230px; /* ajuste de acordo com o tamanho do seu logotipo */
| | var cls = 'submenu'; |
| height: auto;
| | if (n > 20) cls += ' submenu-4-columns'; |
| margin: 3em 0 1.5em; /* espaçamento superior semelhante ao RealMU */
| | else if (n > 12) cls += ' submenu-3-columns'; |
| }
| | else if (n > 6) cls += ' submenu-2-columns'; |
|
| |
|
| /* 1.4 Ajuste da navegação lateral – remove bullets e garante largura uniforme */ | | // cria o painel |
| #mw-site-navigation ul, #site-navigation ul,
| | var $submenu = $('<ul/>', { 'class': cls }).appendTo($portlet); |
| #mw-site-navigation .sidebar-inner ul,
| | $links.each(function () { |
| #site-navigation .sidebar-inner ul {
| | $('<li/>').append($(this).clone()).appendTo($submenu); |
| list-style: none;
| | }); |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| /* --- Mega-menu para a sidebar Timeless --- */ | |
| #site-navigation .sidebar-inner { position: relative; overflow: visible; }
| |
| #site-navigation .mw-portlet { position: relative; z-index: 3; }
| |
|
| |
|
| /* Botão (título da categoria). Mantém seu estilo e só acrescenta a seta. */ | | // esconde a lista original e o painel |
| #site-navigation h3.has-mega {
| | $ul.hide(); |
| position: relative;
| | $submenu.hide(); |
| padding-right: 18px; /* espaço para a seta */
| |
| cursor: pointer;
| |
| transition: color .15s ease; /* para o "avermelhado" suave */
| |
| }
| |
| /* Hover “vermelhinho” no título da categoria (sem afetar os itens) */
| |
| #site-navigation h3.has-mega:hover { color: #ff5a5a !important; }
| |
|
| |
|
| /* Seta fechada/aberta */ | | // posiciona ao lado da barra e alinhado ao título |
| #site-navigation h3.has-mega::after {
| | function reposition() { |
| content: "▸";
| | var left = $container.outerWidth() + 12; // distância da sidebar |
| position: absolute;
| | var top = $h3.position().top - 6; // alinhado pela altura do h3 |
| right: 10px;
| | $submenu.css({ left: left, top: top }); |
| top: 50%;
| | } |
| transform: translateY(-50%);
| |
| font-size: .8rem;
| |
| color: rgba(240,240,255,.75);
| |
| }
| |
| #site-navigation h3.has-mega.active::after { content: "▾"; }
| |
|
| |
|
| /* Painel do mega-menu */
| | function open() { |
| #site-navigation ul.submenu {
| | // fecha outros |
| position: absolute;
| | $container.find('h3.has-mega').not($h3).removeClass('active'); |
| left: 240px; /* JS recalibra isso; aqui é um default */
| | $container.find('ul.submenu').not($submenu).hide(); |
| top: 0;
| |
| display: none;
| |
| z-index: 1000;
| |
| min-width: 780px;
| |
| max-width: 980px;
| |
| padding: 18px 22px;
| |
| background: #151820;
| |
| border: 1px solid rgba(255,255,255,.06);
| |
| box-shadow: 0 14px 40px rgba(0,0,0,.55);
| |
| column-gap: 48px;
| |
| }
| |
|
| |
|
| /* Itens do painel (colunas) */
| | $h3.addClass('active'); |
| #site-navigation ul.submenu li {
| | reposition(); |
| break-inside: avoid;
| | $submenu.stop(true, true).fadeIn(90); |
| padding: 10px 0;
| | } |
| border-top: 1px solid rgba(255,255,255,.06);
| |
| }
| |
| #site-navigation ul.submenu li:first-child { border-top: 0; }
| |
| #site-navigation ul.submenu a {
| |
| display: block;
| |
| text-decoration: none;
| |
| padding: 2px 8px 2px 0;
| |
| } | |
|
| |
|
| /* Contagem automática de colunas */
| | function close() { |
| #site-navigation .submenu-2-columns { column-count: 2; }
| | $h3.removeClass('active'); |
| #site-navigation .submenu-3-columns { column-count: 3; }
| | $submenu.stop(true, true).fadeOut(90); |
| #site-navigation .submenu-4-columns { column-count: 4; }
| | } |
|
| |
|
| /* === Botões das CATEGORIAS como no RealMU (h3 vira "botão") === */
| | function toggle() { |
| #site-navigation .mw-portlet > h3.has-mega,
| | ($submenu.is(':visible')) ? close() : open(); |
| #mw-site-navigation .mw-portlet > h3.has-mega{
| | } |
| /* zera o estilo de heading que o tema coloca */
| |
| border: 0 !important;
| |
| padding: 15px 28px 15px 25px !important; /* espaço extra à direita p/ seta */
| |
| margin: 0 0 10px 0 !important;
| |
| display: block;
| |
| background: #0f1116 !important;
| |
| color: #fff !important;
| |
| font-size: 16px !important;
| |
| font-family: 'GothamSSm-Light', sans-serif !important;
| |
| line-height: 1.3;
| |
| text-decoration: none !important;
| |
| position: relative;
| |
| cursor: pointer;
| |
| } | |
|
| |
|
| /* remove o “--” decorativo dos h3 do tema nesta área */ | | // hover/click com delay pra não sumir no caminho do mouse |
| #site-navigation .mw-portlet > h3.has-mega::before,
| | var closeTimer = null; |
| #mw-site-navigation .mw-portlet > h3.has-mega::before{
| |
| content: none !important;
| |
| }
| |
|
| |
|
| /* seta fechada/aberta à direita do botão */
| | $h3.on('mouseenter.megamenu', function () { |
| #site-navigation .mw-portlet > h3.has-mega::after,
| | if (isDesktop()) open(); |
| #mw-site-navigation .mw-portlet > h3.has-mega::after{
| | }).on('mouseleave.megamenu', function () { |
| content: "▸";
| | if (isDesktop()) { |
| position: absolute;
| | closeTimer = setTimeout(function () { |
| right: 12px;
| | if (!$submenu.is(':hover') && !$h3.is(':hover')) close(); |
| top: 50%;
| | }, 120); |
| transform: translateY(-50%);
| | } |
| font-size: .8rem;
| | }).on('click.megamenu', function (e) { |
| color: rgba(240,240,255,.75);
| | if (!isDesktop()) { e.preventDefault(); toggle(); } |
| } | | }); |
| #site-navigation .mw-portlet > h3.has-mega.active::after,
| |
| #mw-site-navigation .mw-portlet > h3.has-mega.active::after{
| |
| content: "▾";
| |
| } | |
|
| |
|
| /* hover “vermelhinho” igual aos links da sidebar */
| | $submenu.on('mouseenter.megamenu', function () { |
| #site-navigation .mw-portlet > h3.has-mega:hover,
| | if (isDesktop()) { clearTimeout(closeTimer); open(); } |
| #mw-site-navigation .mw-portlet > h3.has-mega:hover{
| | }).on('mouseleave.megamenu', function () { |
| color: #ba6356 !important;
| | if (isDesktop()) { |
| } | | closeTimer = setTimeout(function () { |
| | if (!$h3.is(':hover')) close(); |
| | }, 120); |
| | } |
| | }); |
|
| |
|
| /* === Painel de subcategorias (mantém o que já está ok) === */
| | $(window).on('resize.megamenu', reposition); |
| #site-navigation ul.mm-submenu{
| | }); |
| position: absolute;
| |
| left: 240px; /* o JS recalibra; aqui é só um default */
| |
| top: 0;
| |
| display: none;
| |
| z-index: 1000;
| |
| min-width: 780px;
| |
| max-width: 980px;
| |
| padding: 18px 22px;
| |
| background: #151820;
| |
| border: 1px solid rgba(255,255,255,.06);
| |
| box-shadow: 0 14px 40px rgba(0,0,0,.55);
| |
| column-gap: 48px;
| |
| } | |
| #site-navigation ul.mm-submenu li{
| |
| break-inside: avoid;
| |
| padding: 10px 0;
| |
| border-top: 1px solid rgba(255,255,255,.06);
| |
| }
| |
| #site-navigation ul.mm-submenu li:first-child{ border-top: 0; }
| |
| #site-navigation ul.mm-submenu a{
| |
| display: block;
| |
| padding: 2px 8px 2px 0;
| |
| color: rgba(255,255,255,.75);
| |
| text-decoration: none;
| |
| }
| |
| #site-navigation ul.mm-submenu a:hover{
| |
| color: #fff;
| |
| text-shadow: 0 0 5px #fff;
| |
| }
| |
|
| |
|
| /* colunas dinâmicas (seguindo as classes do teu JS atual: mm-2/mm-3/mm-4) */ | | // fecha clicando fora |
| #site-navigation .mm-2{ column-count: 2; }
| | $(document).on('click.megamenu', function (e) { |
| #site-navigation .mm-3{ column-count: 3; }
| | if ($(e.target).closest(NAV_SEL).length === 0) { |
| #site-navigation .mm-4{ column-count: 4; }
| | var $c = $(NAV_SEL); |
| | $c.find('h3.has-mega').removeClass('active'); |
| | $c.find('ul.submenu').hide(); |
| | } |
| | }); |
| | } |
|
| |
|
| /* responsivo: no mobile o painel vira bloco abaixo */
| | mw.hook('wikipage.content').add(build); |
| @media (max-width:850px){
| | $(build); |
| #site-navigation ul.mm-submenu{
| | console.log('[MegaMenu] OK'); |
| position: relative;
| | } catch (err) { |
| left: 0; | | console.error('[MegaMenu] erro', err); |
| min-width: auto; | |
| max-width: none;
| |
| width: calc(100% - 40px); | |
| margin: 10px 20px 0;
| |
| column-count: 1;
| |
| box-shadow: none;
| |
| } | | } |
| } | | }); |
