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.

/* Código CSS colocado aqui será aplicado a todos os temas */

/* Fundo geral da wiki (exceto área de conteúdo) */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
 
    background-image: url('https://retrommo.com.br/wiki/background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Mantém fundo da área principal de conteúdo branco */
#content, #mw-content-text, .mw-body {
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Remove fundo duplicado do mw-page-base, se quiser */
#mw-page-base {
    background: transparent !important;
}

/* Oculta o botão "Ver código-fonte" para usuários não registrados */
body.logged-out .mw-viewsource {
    display: none;
}

/* Código CSS colocado aqui será aplicado a todos os temas */

.vector-menu-portal .vector-menu-content li {
    color: #000;
    font-weight: normal;
    padding: 0.25em 0;
    cursor: default;
    border: 0;
}

.vector-menu-portal .vector-menu-content li a {
    color: #fff;
    font-weight: bold; /* Remove duplicação do peso da fonte */
    padding: 0.25em 0;
    cursor: default;
    border: 0;
}

.vector-menu-portal .vector-menu-content li a:visited {
    color: #fff;
}

a.extiw:visited, .mw-parser-output a.external:visited {
    color: #3620fd;
    padding: 0.25em 0;
    cursor: default;
    border: 0;
}

.vector-menu-portal .vector-menu-heading {
    color: #fff;
    font-weight: bold;
    padding: 0.25em 0;
    cursor: default;
    border: 0;
}

.skin-vector-legacy a.new {
    color: #fff;
}

a:visited {
    color: #b73b26;
}

/* Esconde itens específicos */
li#t-viewsource,
li#t-history {
    display: none !important;
}

/* Esconde a mensagem "Retrieved from" */
.printfooter {
    display: none;
}

/* Copiar conteúdo */
.navi-copy {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

.navi-copied {
    display: none;
    color: green;
    font-weight: bold;
}

/* Animação para a logo */
#p-logo img, 
div#p-logo img, 
div#p-logo > a > img {
    animation: logoAnimation 3s infinite; /* Nome da animação, duração e repetição */
}

/* Definição da animação */
@keyframes logoAnimation {
    0% {
        transform: rotate(0deg) scale(1); /* Posição inicial */
    }
    50% {
        transform: rotate(15deg) scale(1.1); /* Leve inclinação e aumento */
    }
    100% {
        transform: rotate(0deg) scale(1); /* Retorna ao normal */
    }
}

/* Animação de levitação */
.levitation-banner {
    display: inline-block; /* Garantir que a imagem seja tratada como um bloco inline */
    animation: levitate 3s infinite ease-in-out; /* Animação de levitação */
}

/* Definição da animação */
@keyframes levitate {
    0%, 100% {
        transform: translateY(0); /* Posição inicial e final */
    }
    50% {
        transform: translateY(-10px); /* Levanta 10px */
    }
}

/* Estilo para a imagem */
.levitation-banner img {
    display: block; /* Garante que a imagem seja tratada como bloco */
    width: 100%; /* Ajuste da largura da imagem */
    height: auto; /* Mantém a proporção da imagem */
}


/* Efeito ao passar o mouse */
.hover-effect:hover {
    transform: scale(1.1); /* Aumenta 10% do tamanho */
    filter: brightness(1.2); /* Aumenta o brilho */
}

/* Estilo padrão para os itens do menu */
.hover-effect {
    display: inline-block;
    padding: 5px;
    transition: transform 0.3s ease, color 0.3s ease; /* Transição suave */
}

/* Efeito de hover */
.hover-effect:hover {
    transform: scale(1.05); /* Aumenta 5% do tamanho */
    color: #f2b632; /* Cor amarela ao passar o mouse */
}

/* Efeito de hover nas imagens (se houver) */
.hover-effect img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.hover-effect:hover img {
    transform: scale(1.1); /* Aumenta a imagem ao passar o mouse */
    filter: brightness(1.2); /* Aumenta o brilho da imagem */
}

body.logged-out .mw-viewsource {
    display: none; /* Oculta o botão "Ver código-fonte" para usuários não registrados */
}