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