Killer
/******************************************************************************* * TEMA ESCURO MODERNO - WIKI GLA * Estilo wiki.gg com paleta personalizada * Substitua seu Common.css por este arquivo *******************************************************************************/ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap'); /******************************************************************************* * SISTEMA DE VARIÁVEIS - PALETA ESCURA *******************************************************************************/ :root { /* Backgrounds */ --page-bg: #14161b; --content-bg: #1f2229; --content-bg-alt: #242831; --surface-bg: #2a2f38; /* Borders & Shadows */ --border-color: #2d313a; --border-light: #343a46; --shadow-color: rgba(0, 0, 0, 0.45); --content-shadow: 0 8px 22px var(--shadow-color); /* Text */ --text-primary: #e7ebf2; --text-secondary: #b7bfcc; --text-muted: #8891a0; /* Links */ --link-color: #7ec8ff; --link-visited: #9aa9ff; --link-hover: #a7e0ff; --link-new: #ff6b6b; /* Accent Colors */ --accent-primary: #459cca; --accent-secondary: #5684c8; --accent-gradient: linear-gradient(135deg, #459cca 0%, #5684c8 100%); /* Tables */ --table-bg: #242831; --table-header: #2d313a; --table-border: #343a46; --table-hover: #2a303b; --table-stripe: #262b34; /* Forms */ --input-bg: #242831; --input-border: #3d4450; --input-focus: #459cca; /* Scrollbar */ --scrollbar-track: #1f2229; --scrollbar-thumb: #3d4450; --scrollbar-hover: #4a5263; /* Legacy compatibility */ --content-text: var(--text-primary); --simpleSearch-bg: var(--input-bg); --searchInput-text: var(--text-secondary); --lightGray: var(--surface-bg); --gray: var(--border-light); --transparent-blue: rgba(69, 156, 202, 0.3); --blue: #459cca; } /******************************************************************************* * BASE & BODY *******************************************************************************/ html { scroll-behavior: smooth; } body { background-color: var(--page-bg); color: var(--text-primary); font-family: 'Noto Sans', sans-serif; } /* Remove imagem de fundo clara */ body::before { display: none !important; } /******************************************************************************* * TIPOGRAFIA *******************************************************************************/ body, .mw-parser-output, .mw-headline, #firstHeading, h1, h2, h3, h4, h5, h6, p, ul, ol, li, table, td, th, caption { font-family: 'Noto Sans', sans-serif !important; color: var(--text-primary); } h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; border-bottom: none !important; } .mw-headline { border-bottom: none !important; } #firstHeading { border-bottom: none !important; color: var(--text-primary) !important; } /******************************************************************************* * LINKS *******************************************************************************/ a { color: var(--link-color) !important; transition: color 0.2s ease; } a:visited { color: var(--link-visited) !important; } a:hover { color: var(--link-hover) !important; text-decoration: none; } a.new { color: var(--link-new) !important; } /******************************************************************************* * CONTENT AREA *******************************************************************************/ #content, .mw-body { background-color: var(--content-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--content-shadow); } #mw-page-base, #mw-head-base { background: transparent !important; } #mw-head-base { background: linear-gradient(180deg, var(--page-bg) 0%, transparent 100%) !important; } /******************************************************************************* * SIDEBAR & NAVIGATION *******************************************************************************/ #mw-panel { background: transparent; } #mw-panel .mw-portlet { background: transparent; } #mw-panel .mw-portlet h3 { color: var(--text-muted) !important; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.5px; } #mw-panel .mw-portlet .vector-menu-content-list > li > a { color: var(--link-color) !important; font-size: 0.80rem !important; font-weight: 500 !important; padding: 0.3em 0; transition: color 0.2s ease, padding-left 0.2s ease; } #mw-panel .mw-portlet .vector-menu-content-list > li > a:hover { color: var(--link-hover) !important; padding-left: 4px; } #p-logo { background-color: transparent !important; } #p-navigation { background-color: transparent; } #p-tb { display: none; } /******************************************************************************* * SEARCH BAR *******************************************************************************/ #simpleSearch { background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important; border-radius: 6px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #simpleSearch:focus-within { border-color: var(--input-focus) !important; box-shadow: 0 0 0 3px rgba(69, 156, 202, 0.2); } #searchInput { background-color: transparent !important; color: var(--text-primary) !important; border: none !important; } #searchInput::placeholder { color: var(--text-muted); } #searchButton { filter: invert(0.8); } #p-search { float: left; margin-left: -0.1em; margin-right: 1em; margin-top: -0.4em; } /******************************************************************************* * TABS & ACTIONS *******************************************************************************/ .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 { background: none; } .vector-menu-tabs li { background: transparent; } .vector-menu-tabs li a { color: var(--text-secondary) !important; background: transparent; transition: color 0.2s ease; } .vector-menu-tabs li a:hover { color: var(--link-hover) !important; } .vector-menu-tabs .selected { background: var(--content-bg) !important; border: 1px solid var(--border-color) !important; border-bottom-color: var(--content-bg) !important; border-radius: 4px 4px 0 0; } .vector-menu-tabs .selected a { color: var(--text-primary) !important; font-weight: 600; } #p-cactions { background: none; margin-top: -0.6em; } #p-cactions li { background: none; } #p-cactions li.selected { background: var(--content-bg); border: 1px solid var(--border-color); } #p-cactions li a { background-color: var(--surface-bg) !important; color: var(--link-color) !important; } .vector-menu-dropdown .vector-menu-content { background-color: var(--content-bg) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .vector-menu-dropdown .vector-menu-content li a { color: var(--text-primary) !important; } .vector-menu-dropdown .vector-menu-content li a:hover { background-color: var(--surface-bg) !important; } #ca-view, #ca-history, #ca-viewsource { display: none !important; } /******************************************************************************* * DISCORD BUTTON *******************************************************************************/ #n-Discord { font-size: 10px; line-height: 1.5em; } #p-Discord-label { display: none; } #n-Discord a { color: #fff !important; font-weight: bold; border-radius: 6px; border: 1px solid #4c57d0; background-color: #5865f2; display: block; position: relative; padding: 6px 8px 5px calc(14px + 6.5px * 2); box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3); transition: all 0.2s ease; } #n-Discord a::after { content: ''; background: url(/images/7/76/Discord-brands.png) no-repeat; background-size: contain; background-position: center; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); position: absolute; top: 4px; left: 6px; width: 18px; height: 18px; } #n-Discord a:hover { text-decoration: none; background-color: #7885ff; border-color: #6c77f0; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4); } /******************************************************************************* * TABLES - GENERAL *******************************************************************************/ table { background-color: var(--table-bg); border-color: var(--table-border); } table th { background-color: var(--table-header) !important; color: var(--text-primary) !important; border-color: var(--table-border) !important; } table td { background-color: var(--table-bg) !important; color: var(--text-primary) !important; border-color: var(--table-border) !important; } table tr:hover td { background-color: var(--table-hover) !important; } /******************************************************************************* * TABLE-ENHANCE *******************************************************************************/ table.table-enhance { background-color: var(--table-bg); border: 1px solid var(--table-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .table-enhance th, .table-enhance td { border: 1px solid var(--table-border); color: var(--text-primary); } .table-enhance th { background-color: var(--table-header); color: var(--text-primary); } .table-enhance tr:nth-child(even) td { background-color: var(--table-stripe); } .table-enhance tr:hover td { background-color: var(--table-hover); } .table-enhance-vertical td:first-child { color: var(--link-color); } /******************************************************************************* * WIKITABLES *******************************************************************************/ table.wikitable, table.wikitablec, table.wikitablew, table.wikitablenb, table.wikitablewhite, table.wikitablecenter, table.wikitablew-tr, table.prettytable { background-color: var(--table-bg) !important; border: 1px solid var(--table-border) !important; } table.wikitable th, table.wikitablec th, table.wikitablew th, table.wikitablenb th, table.wikitablewhite th, table.wikitablecenter th, table.wikitablew-tr th, table.prettytable th { background-color: var(--table-header) !important; color: var(--text-primary) !important; border: 1px solid var(--table-border) !important; } table.wikitable td, table.wikitablec td, table.wikitablew td, table.wikitablenb td, table.wikitablewhite td, table.wikitablecenter td, table.wikitablew-tr td, table.prettytable td { background-color: var(--table-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--table-border) !important; } table.wikitable tr:hover td, table.wikitablew tr:hover td, table.wikitablew-tr tr:hover td { background-color: var(--table-hover) !important; } /******************************************************************************* * JQUERY TABLESORTER *******************************************************************************/ .jquery-tablesorter { background-color: var(--table-bg) !important; border-color: var(--table-border) !important; } .jquery-tablesorter tr td { background-color: var(--table-bg) !important; color: var(--text-primary) !important; } .jquery-tablesorter tr th { background-color: var(--table-header) !important; color: var(--text-primary) !important; } #mw-content-text .mw-parser-output .jquery-tablesorter { background-color: var(--table-bg) !important; color: var(--text-primary) !important; border-color: var(--table-border) !important; } /******************************************************************************* * CARDS *******************************************************************************/ .card { background-color: var(--content-bg); border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .card-title { background: var(--accent-gradient); color: #fff; } /******************************************************************************* * HOMEPAGE *******************************************************************************/ .initialPage--table { background: transparent !important; } .initialPage--table > tbody > tr > th, .initialPage--table > tbody > tr > td { background: transparent !important; } .initialPage--title th { background-color: transparent !important; color: var(--text-primary) !important; } .initialPage--menuTitle { background: var(--accent-gradient); color: #fff; } .initialPage--menuContainer, .initialPage--sideMenuContainer { background: transparent; } /******************************************************************************* * SOCIAL MEDIA LINKS *******************************************************************************/ .initialPage--socialMedia { border-top: 2px solid var(--border-light); } .initialPage--socialMediaLink { color: var(--text-secondary) !important; } .initialPage--socialMediaLink:visited { color: var(--text-secondary) !important; } .socialMedia--svg svg { fill: var(--text-secondary); } /* Discord */ .initialPage--socialMedia.discord > .initialPage--socialMediaLink:hover { color: #5865f2 !important; } .initialPage--socialMedia.discord:before { background: #5865f2; } .initialPage--socialMedia.discord > .initialPage--socialMediaLink:hover > .socialMedia--svg svg { fill: #5865f2 !important; } /* Instagram */ .initialPage--socialMedia.instagram > .initialPage--socialMediaLink:hover { color: #f09433 !important; } .initialPage--socialMedia.instagram:before { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } /* Facebook */ .initialPage--socialMedia.facebook > .initialPage--socialMediaLink:hover { color: #4267B2 !important; } .initialPage--socialMedia.facebook:before { background: #4267B2; } /******************************************************************************* * BADGES & SECTION TITLES *******************************************************************************/ .badge { background: var(--accent-gradient); color: #fff; box-shadow: rgba(69, 156, 202, 0.3) 0px 0px 0px 3px; } .section-title { background: var(--accent-gradient); color: #fff; } /******************************************************************************* * FILTERS (CHARACTERS PAGE) *******************************************************************************/ .filter { background-color: var(--content-bg); border: 2px solid var(--border-light); } .filter--title { background: var(--accent-gradient); border-right: 2px solid var(--border-light); color: #fff; } .filter--input { background-color: var(--input-bg); border: 2px solid var(--border-light); color: var(--text-primary); } .filter--input::placeholder { color: var(--text-muted); } .filter--searchButton { background: var(--accent-gradient); border: 2px solid var(--border-light); } .filter--icon img { filter: grayscale(0.5) brightness(0.9); } .filter--icon.active img { filter: grayscale(0) brightness(1); box-shadow: 0 0 12px rgba(69, 156, 202, 0.5); } /******************************************************************************* * CHARACTER CARDS *******************************************************************************/ #characters-container > div > a > img { filter: grayscale(0.2) brightness(0.95); border: 2px solid var(--border-color); transition: all 0.25s ease; } #characters-container > div:hover > a > img { filter: grayscale(0) brightness(1); border-color: var(--accent-primary); box-shadow: 0 0 20px rgba(69, 156, 202, 0.4); transform: scale(1.05); } /******************************************************************************* * CHARACTER PAGE *******************************************************************************/ .characterInfo--name { color: var(--text-primary) !important; } .characterInfo--contentContainer { background-color: var(--content-bg); } .stats--container { background-color: var(--content-bg); } .bar-filled { background: var(--accent-primary); } .bar-notFilled { background: var(--transparent-blue); } /******************************************************************************* * SKILLS TABS *******************************************************************************/ .tabsContainer table { background: transparent; } .tabsContainer table > tbody > tr > td { border-bottom: 2px solid var(--border-color); } .tab-skill { background-color: var(--content-bg); border: 2px solid transparent; transition: all 0.25s ease; } .tab-skill.active { border-color: var(--accent-primary); background-color: var(--surface-bg); } .tab-skill:hover { background-color: var(--surface-bg); } .skillInfo--name { color: var(--text-primary) !important; } .skillInfo--description { color: var(--text-secondary); } .skillInfo > div > .skillInfo--infoContainer b { color: var(--link-color) !important; } .skillInfo--attributesContainer > h1 { color: var(--text-muted) !important; } /* Scrollbar for skills */ .skillInfo--description::-webkit-scrollbar, .tabSkill--container::-webkit-scrollbar { width: 8px; height: 8px; } .skillInfo--description::-webkit-scrollbar-track, .tabSkill--container::-webkit-scrollbar-track { background-color: var(--scrollbar-track); border-radius: 10px; } .skillInfo--description::-webkit-scrollbar-thumb, .tabSkill--container::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 10px; } .skillInfo--description::-webkit-scrollbar-thumb:hover, .tabSkill--container::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-hover); } /******************************************************************************* * ATTRIBUTE CARDS *******************************************************************************/ .attribute--cardsContainer { background: var(--surface-bg); border: 2px solid var(--border-color); } .cardAttribute--value { color: var(--text-primary) !important; } /******************************************************************************* * SKINS CONTAINER *******************************************************************************/ .skins--container { background-color: var(--content-bg); } .skins--container::-webkit-scrollbar { width: 8px; height: 8px; } .skins--container::-webkit-scrollbar-track { background-color: var(--scrollbar-track); border-radius: 10px; } .skins--container::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 10px; } /******************************************************************************* * CALCULATOR XP *******************************************************************************/ .calcXp--container { background-color: var(--content-bg); border: 2px solid var(--border-light); } .calcXp--resultTitle { color: var(--text-secondary) !important; } .calcXp--formItem input { background-color: var(--input-bg); border: 2px solid var(--border-light); color: var(--text-primary); } .calcXp--formItem span { color: var(--link-color); } #calculate-btn { background: var(--accent-gradient); color: #fff; border: none; box-shadow: 0 4px 12px rgba(69, 156, 202, 0.3); } #calculate-btn:hover { box-shadow: 0 6px 16px rgba(69, 156, 202, 0.4); transform: translateY(-2px); background: linear-gradient(135deg, #3d8ab8 0%, #4a76b5 100%); } /******************************************************************************* * ITEM INFOBOX *******************************************************************************/ .iteminfobox { background: var(--content-bg); border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .iteminfobox b { color: var(--link-color); } /******************************************************************************* * TOOLTIPS *******************************************************************************/ .tooltipster-default { background-color: var(--content-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .tip2 { background-color: var(--content-bg); border: 1px solid var(--border-color); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); color: var(--text-primary); } /******************************************************************************* * TRANSCRIPTIONS / DIALOGS *******************************************************************************/ .transcrições { background-color: var(--surface-bg); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); color: var(--text-primary); } .transcrições::before { background-color: var(--surface-bg); } .transcrições b, .transcrições strong { color: var(--text-primary) !important; } .me { color: var(--text-primary); } /******************************************************************************* * TABBER COMPONENT *******************************************************************************/ .mw-tabber-container { background-color: var(--content-bg); border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .mw-tabber-tabs { background-color: var(--surface-bg); border-bottom: 2px solid var(--border-color); } .mw-tabber-tab { background-color: var(--surface-bg); border-right: 1px solid var(--border-color); color: var(--text-secondary); } .mw-tabber-tab:hover { background-color: var(--content-bg); color: var(--link-hover); } .mw-tabber-tab.active { background-color: var(--content-bg); color: var(--link-color); border-bottom: 3px solid var(--accent-primary); } .mw-tabber-content { background-color: var(--content-bg); } /******************************************************************************* * PRESET ABAS *******************************************************************************/ .tabela-abas { background: transparent; } .mostrar-aba { background-color: transparent; } .mostrar-aba:hover::after { background-color: var(--text-muted); } .mostrar-aba.ativa::after { background-color: var(--accent-primary); } .sec-aba-cem { color: var(--text-primary); } .aba { background-color: var(--content-bg); } /******************************************************************************* * WANTED PAGE *******************************************************************************/ #selectbox-wanted { background-color: var(--input-bg); border: 2px solid var(--border-light); color: var(--text-primary); } .wantedPortrait--title { color: var(--text-primary); } /******************************************************************************* * GLOBAL EVENT WIDGET *******************************************************************************/ .global-event-widget { background-color: var(--content-bg); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } #global-event-time { background: linear-gradient(to right, rgba(20, 22, 27, 0.9), transparent); color: var(--text-primary); } /******************************************************************************* * CATEGORIES *******************************************************************************/ #mw-normal-catlinks { background-color: var(--surface-bg); border: 1px solid var(--border-color); padding: 0.5em 1em; border-radius: 4px; } #mw-normal-catlinks ul a, #mw-normal-catlinks a { color: var(--link-color) !important; } /******************************************************************************* * TABLE OF CONTENTS *******************************************************************************/ #toc { background-color: var(--surface-bg); border: 1px solid var(--border-color); } #toc h2 { color: var(--text-primary); } #toc ul li a { color: var(--link-color) !important; } #toc .toctogglelabel, span.toctogglespan { display: none !important; } /******************************************************************************* * IMAGE THUMBNAILS *******************************************************************************/ .thumb { background-color: var(--surface-bg); border: 1px solid var(--border-color); } .thumbinner { background-color: var(--surface-bg); border: 1px solid var(--border-color); } .thumbcaption { color: var(--text-secondary) !important; } .mw-parser-output .center .thumbcaption, .mw-parser-output .tright .thumbcaption { color: var(--text-secondary) !important; } .magnify a { display: none; } /******************************************************************************* * EDITOR & UPLOAD *******************************************************************************/ .wikiEditor-ui-toolbar { background-color: var(--surface-bg); border-color: var(--border-color); } .wikiEditor-ui-toolbar .tabs span.tab a { color: var(--text-primary) !important; } .wikiEditor-ui-toolbar .group .tool-select .label { color: var(--text-primary) !important; } .wikiEditor-ui-toolbar .group .tool-select .options .option { color: var(--text-primary) !important; background-color: var(--content-bg); } .wikiEditor-ui-toolbar .group .tool-select .options .option:hover { background-color: var(--surface-bg); } .wikiEditor-ui-toolbar .booklet > .index { color: var(--text-primary); background-color: var(--surface-bg); } .codeEditor-status-message { color: var(--text-primary) !important; background-color: var(--surface-bg); border-color: var(--border-color); } #msupload-div a { color: var(--link-color) !important; } #msupload-bottom a { color: var(--text-primary) !important; } #msupload-list .file { background: var(--surface-bg); border-top: 1px solid var(--border-color); color: var(--text-primary) !important; } /******************************************************************************* * MISC ELEMENTS *******************************************************************************/ .mw-destfile-warning { background-color: var(--surface-bg); border: 1px solid var(--border-color); color: var(--text-primary); } .mw-logline-protect { color: var(--text-primary) !important; } div.mw-number-text { color: var(--text-muted) !important; } div.mw-number-text h3 { color: var(--text-secondary) !important; } hr { border-color: var(--border-color); } ul { list-style-image: none; } .mw-parser-output small li, .mw-parser-output tr i, .mw-parser-output tr big { color: var(--text-primary) !important; } #contentSub, #contentSub2 { margin: 0 !important; padding: 0 !important; display: none; } #footer-info-lastmod { display: none !important; } /******************************************************************************* * SCALE UP HOVER EFFECT *******************************************************************************/ .scaleUp-hover { transition: all 0.25s ease; } .scaleUp-hover:hover { transform: scale(1.08); filter: brightness(1.1); } /******************************************************************************* * GLOBAL SCROLLBAR *******************************************************************************/ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-hover); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /******************************************************************************* * SELECTION HIGHLIGHT *******************************************************************************/ ::selection { background-color: rgba(69, 156, 202, 0.4); color: var(--text-primary); } ::-moz-selection { background-color: rgba(69, 156, 202, 0.4); color: var(--text-primary); } /******************************************************************************* * RESPONSIVE ADJUSTMENTS *******************************************************************************/ @media screen and (max-width: 1024px) { .initialPage--sideMenuContainer .card { background-color: var(--content-bg); } } @media screen and (max-width: 768px) { .mw-tabber-tab { background-color: var(--surface-bg); border-bottom: 1px solid var(--border-color); } .mw-tabber-tab.active { border-bottom: 3px solid var(--accent-primary); } } /******************************************************************************* * VIDEO RESPONSIVO *******************************************************************************/ .video-responsivo { background: var(--page-bg); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .pagevideo { border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--page-bg); } /******************************************************************************* * UTILITY OVERRIDES (ensure dark theme) *******************************************************************************/ .oo-ui-popupWidget-head > .oo-ui-iconElement-noIcon + .oo-ui-labelElement-label { color: var(--text-primary); } #ca-delete a, #ca-move a, #ca-unprotect a { background-color: var(--surface-bg) !important; border-color: var(--border-color) !important; color: var(--link-color) !important; }