MediaWiki:Vector-2022.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ========================================================= */
/* ================= LOGO CONFIG ============================ */
/* ========================================================= */

.skin-vector-2022 .mw-header-start {
    flex-wrap: nowrap !important;
}

.skin-vector-2022 .mw-logo-icon {
    max-height: 48px !important;
    height: 38px !important;
    max-width: 200px !important;
    width: auto !important;
}

.skin-vector-2022 .mw-logo-wordmark img {
    height: 32px !important;
    width: auto !important;
}


/* ========================================================= */
/* ================= FONT CONFIG ============================ */
/* ========================================================= */

@font-face {
    font-family: 'Wiki Font Title';
    src: url('/resources/assets/Nohemi-VF.ttf') format('truetype');
}

@font-face {
    font-family: 'Wiki Font Subtitle';
    src: url('/resources/assets/Rubik-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Wiki Font Body';
    src: url('/resources/assets/Roboto-Regular.ttf') format('truetype');
}

.mw-body-content {
    font-family: 'Wiki Font Body', sans-serif;
}

.mw-page-title-main {
    font-family: 'Wiki Font Title', sans-serif;
}

.mw-headline {
    font-family: 'Wiki Font Subtitle', sans-serif;
}


/* ========================================================= */
/* ================= HEADER ATRONIA ========================= */
/* ========================================================= */

/* Background */
.skin-vector-2022 .mw-header,
.skin-vector-2022 .vector-sticky-header {
    background-color: #1B2826 !important;
    border-bottom: none !important;
    color: #ffffff !important;
}

/* Links + title */
.skin-vector-2022 .mw-header a,
.skin-vector-2022 .vector-sticky-header a,
.skin-vector-2022 .vector-sticky-header .mw-page-title-main {
    color: #ffffff !important;
}

/* Force ALL header icons to white */
.skin-vector-2022 .mw-header .vector-icon,
.skin-vector-2022 .vector-sticky-header .vector-icon,
.skin-vector-2022 .mw-header .mw-ui-icon,
.skin-vector-2022 .vector-sticky-header .mw-ui-icon {
    background-color: #ffffff !important;
}


/* ========================================================= */
/* ================= DROPDOWN RESET ========================= */
/* ========================================================= */

.skin-vector-2022 .vector-dropdown-content {
    background-color: #ffffff !important;
}

.skin-vector-2022 .vector-dropdown-content a {
    color: #202122 !important;
}


/* ===== CORRIGIR ÍCONES DO DROPDOWN ===== */

.skin-vector-2022 .vector-dropdown-content .vector-icon,
.skin-vector-2022 .vector-dropdown-content .mw-ui-icon {
    background-color: #202122 !important;
    color: #202122 !important;
}


/* ===== FORÇAR COR DA SETA (DROPDOWN ARROW) ===== */

.skin-vector-2022 .mw-header .vector-dropdown-label::after,
.skin-vector-2022 .vector-sticky-header .vector-dropdown-label::after {
    background-color: #ffffff !important;
}




/* ========================================================= */
/* FIX DEFINITIVO DO HOVER DOS ICON BUTTONS (CODEx) */
/* ========================================================= */

.skin-vector-2022 .mw-header .cdx-button:hover,
.skin-vector-2022 .vector-sticky-header .cdx-button:hover {
    mix-blend-mode: normal !important;
    background-color: rgba(146,255,0,0.30) !important; /* ← reduzido */
}

.skin-vector-2022 .mw-header .cdx-button:hover .vector-icon,
.skin-vector-2022 .vector-sticky-header .cdx-button:hover .vector-icon,
.skin-vector-2022 .mw-header .cdx-button:hover .mw-ui-icon,
.skin-vector-2022 .vector-sticky-header .mw-ui-icon {
    background-color: #ffffff !important;
}





/* ========================================================= */
/* FIX HARD: HOVER FORTE DO USER DROPDOWN (LABEL/CHECKBOX)   */
/* ========================================================= */

/* O hover visual é no LABEL, não no checkbox */
.skin-vector-2022 #vector-user-links-dropdown-label:hover,
.skin-vector-2022 #vector-user-links-dropdown-label:focus,
.skin-vector-2022 #vector-user-links-dropdown-label:focus-visible {
    background-color: rgba(255,255,255,0.06) !important;
}

/* Em alguns casos o Vector pinta o hover num ::before */
.skin-vector-2022 #vector-user-links-dropdown-label:hover::before,
.skin-vector-2022 #vector-user-links-dropdown-label:focus::before,
.skin-vector-2022 #vector-user-links-dropdown-label:focus-visible::before {
    background-color: rgba(255,255,255,0.06) !important;
    opacity: 1 !important;
}

/* E por vezes é no container do dropdown */
.skin-vector-2022 #vector-user-links-dropdown.vector-dropdown:hover .vector-dropdown-label,
.skin-vector-2022 #vector-user-links-dropdown.vector-dropdown:hover .vector-dropdown-label::before {
    background-color: rgba(255,255,255,0.06) !important;
}