Jump to content

MediaWiki:Vector-2022.css

From ATRONIA Wiki
Revision as of 17:53, 16 March 2026 by WikiManagement (talk | contribs)

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.
/* =========================================================
   ATRONIA WIKI - GLOBAL STYLING (CORRIGIDO)
   ========================================================= */

/* ---------- FONTES EXTERNAS ---------- */
@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');
}

/* ---------- ESTRUTURA BASE ---------- */
html, body {
    background: #ffffff !important;
}

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

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

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

/* ---------- LAYOUT FULL WIDTH ---------- */
.skin-vector-2022 .mw-page-container {
    max-width: 1800px !important;
}

.skin-vector-2022 .mw-header,
.skin-vector-2022 .mw-header-container,
.skin-vector-2022 .vector-sticky-header {
    max-width: none !important;
    width: 100% !important;
}

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

.skin-vector-2022 .mw-header a,
.skin-vector-2022 .vector-sticky-header a {
    color: #ffffff !important;
}

/* ---------- PESQUISA (CLEAN STYLE) ---------- */
#p-search .cdx-search-input,
.vector-sticky-header .cdx-search-input {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #dcdcdc;
    background: #ffffff;
}

.cdx-text-input__input {
    border: none !important;
    background: transparent !important;
}

#p-search .cdx-button,
.vector-sticky-header .cdx-button {
    background: #ffffff;
    color: #1B2826;
    border-left: 1px solid #e0e0e0;
}

#p-search .cdx-button:hover,
.vector-sticky-header .cdx-button:hover {
    background: #92ff00 !important;
    color: #1B2826 !important;
}

/* ---------- LOGO CONFIG ---------- */
.skin-vector .mw-logo-wordmark { display: none !important; }
.skin-vector-2022 .mw-logo-icon {
    max-height: 48px !important;
    height: 38px !important;
    max-width: 200px !important;
    width: auto !important;
}

/* =========================================================
   FIX DOS ÍCONES (RESOLVE QUADRADOS BRANCOS)
   ========================================================= */

/* 1. Reset: Remove fundos sólidos que criam os quadrados */
.vector-icon, .mw-ui-icon {
    background-color: transparent !important;
    background-image: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* 2. Pseudo-elemento para desenhar o ícone com máscara */
.vector-icon::before, .mw-ui-icon::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #ffffff !important; /* Cor branca para o topo dark */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

/* 3. Dicionário de Ícones (SVG Base64) */
/* Sino */
.mw-ui-icon-wikimedia-bell::before, .mw-ui-icon-bell::before {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTYgN0EyIDIgMCAwIDAgNCA3YzAgNS4xNy0yIDctMiA3aDE2cy0yLTEuODMtMi03ek05IDE5YTIgMiAwIDAgMCAyLTJIN2EyIDAgMCAwIDIgMnoiLz48L3N2Zz4=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTYgN0EyIDIgMCAwIDAgNCA3YzAgNS4xNy0yIDctMiA3aDE2cy0yLTEuODMtMi03ek05IDE5YTIgMiAwIDAgMCAyLTJIN2EyIDAgMCAwIDIgMnoiLz48L3N2Zz4=");
}
/* User/Avatar */
.mw-ui-icon-wikimedia-userAvatar::before, .mw-ui-icon-user::before, #vector-user-links-dropdown-label .vector-icon::before {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTAgMTBhNCA0IDAgMSAxIDAtOCA0IDQgMCAwIDEgMCA4em0wIDJjLTQuNDIgMC04IDIuMjQtOCA2djJoMTZ2LTJjMC0zLjc2LTMuNTgtNi04LTYiLz48L3N2Zz4=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTAgMTBhNCA0IDAgMSAxIDAtOCA0IDQgMCAwIDEgMCA4em0wIDJjLTQuNDIgMC04IDIuMjQtOCA2djJoMTZ2LTJjMC0zLjc2LTMuNTgtNi04LTYiLz48L3N2Zz4=");
}
/* Estrela (Watchlist) */
.mw-ui-icon-wikimedia-watchlist::before, .mw-ui-icon-watchlist::before {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTAgMC44bDIuNiA2LjRIMjBsLTUuOSA0LjZMMTYuNiAxOEwxMCAxMy44IDMuNCAxOGwyLjUtNi4yTDAgNy4yaDcuNHoiLz48L3N2Zz4=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTAgMC44bDIuNiA2LjRIMjBsLTUuOSA0LjZMMTYuNiAxOEwxMCAxMy44IDMuNCAxOGwyLjUtNi4yTDAgNy4yaDcuNHoiLz48L3N2Zz4=");
}

/* 4. Ícones pretos quando o fundo for branco (Dropdowns) */
.vector-dropdown-content .vector-icon::before,
.vector-dropdown-content .mw-ui-icon::before {
    background-color: #202122 !important;
}

/* ---------- DROPDOWNS & HOVERS ---------- */
.vector-dropdown-content { background-color: #ffffff !important; }
.vector-dropdown-content a { color: #1B2826 !important; }

.skin-vector-2022 .mw-header .cdx-button:hover,
.skin-vector-2022 .vector-sticky-header .cdx-button:hover,
#vector-user-links-dropdown-label:hover {
    background-color: rgba(146, 255, 0, 0.30) !important;
}

/* ---------- LINKS ATRONIA SYSTEM ---------- */
:root {
    --color-progressive: #1B2826 !important;
    --color-visited: #1B2826 !important;
}
a, .mw-body-content a {
    color: #1B2826 !important;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
a:hover { color: #12201f !important; }

/* ---------- OOUI / BOTÕES EDIT ---------- */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: #1B2826 !important;
    border-color: #1B2826 !important;
    color: #ffffff !important;
}

/* ---------- RODAPÉ ---------- */
#footer-poweredbyico { display: none !important; }
Retrieved from "https://wiki.atronia.eu/index.php?title=MediaWiki:Vector-2022.css&oldid=808"