MediaWiki:Common.css

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
• Opera: Pressione Ctrl-F5.

/** ===== SISTEMA PREMIUM UI ===== */

/* TRANSIÇÃO GLOBAL SUAVE */
* {
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

/* ===== DARK MODE (GPT STYLE) ===== */
body.dark-mode {
    background: #343541 !important;
}

/* Conteúdo */
body.dark-mode #content,
body.dark-mode .mw-body {
    background: #444654 !important;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 25px rgba(0,0,0,0.25);
}

/* Sidebar */
body.dark-mode #mw-panel {
    background: #202123 !important;
    border-right: 1px solid #2f3037;
}

body.dark-mode #mw-panel a {
    color: #ffffff !important;
    display: block;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Hover sidebar (efeito botão) */
body.dark-mode #mw-panel a:hover {
    background: #2a2b32;
    transform: translateX(3px);
}

/* Títulos */
body.dark-mode #mw-panel .portal h3 {
    color: #9ca3af !important;
}

/* Topo */
body.dark-mode #mw-head,
body.dark-mode #mw-head-base {
    background: #202123 !important;
    border-bottom: 1px solid #2f3037 !important;
}

/* Links */
body.dark-mode a {
    color: #8ab4f8;
}

body.dark-mode a:hover {
    color: #ffffff !important;
}

/* ===== LIGHT MODE ===== */
body.light-mode {
    background: #f8f9fa !important;
}

body.light-mode #content,
body.light-mode .mw-body {
    background: #ffffff !important;
}

/* ===== ABAS PREMIUM ===== */
#p-views li,
#p-namespaces li {
    margin-right: 5px;
}

/* Botões das abas */
#p-views li a,
#p-namespaces li a {
    color: #ffffff !important;
    padding: 6px 12px;
    border-radius: 8px;
}

/* Aba ativa com glow */
body.dark-mode #p-views li.selected a,
body.dark-mode #p-namespaces li.selected a {
    background: #444654 !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.05);
}

/* Hover moderno */
body.dark-mode #p-views li a:hover,
body.dark-mode #p-namespaces li a:hover {
    background: #3a3b47 !important;
    transform: translateY(-2px);
}

/* ===== BOTÃO FLUTUANTE PREMIUM ===== */
#theme-toggle-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;

    width: 55px;
    height: 55px;

    border-radius: 50%;
    border: none;

    background: linear-gradient(145deg, #3a3b47, #2a2b32);
    color: white;

    font-size: 24px;
    cursor: pointer;

    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

/* Hover botão */
#theme-toggle-btn:hover {
    transform: scale(1.15) rotate(8deg);
}

/* Tooltip */
#theme-toggle-btn::after {
    content: "Alternar tema";
    position: absolute;
    right: 65px;
    background: #111;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
}

/* Mostrar tooltip */
#theme-toggle-btn:hover::after {
    opacity: 1;
}

/* Light mode botão */
body.light-mode #theme-toggle-btn {
    background: linear-gradient(145deg, #e5e7eb, #d1d5db);
    color: #111;
}

/* ===== PROTEÇÃO DE ÍCONES ===== */
img {
    background: none !important;
    box-shadow: none !important;
}