MediaWiki:Common.css: Difference between revisions

Revision as of 15:15, 29 July 2025

/* =================================================================== */
/* EFEITO DE BRILHO DE FUNDO ANIMADO (Início do Zero)                */
/* Baseado no código moderno com @property.                          */
/* =================================================================== */

@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.scw-gradient-glow {
    /* --- CONFIGURAÇÕES ESSENCIAIS DE POSICIONAMENTO --- */
    display: inline-block; /* Garante que o elemento se comporte bem no layout */
    position: relative;    /* Cria um contexto para o brilho (::before) */
    isolation: isolate;    /* IMPORTE: Impede que o brilho suma atrás do fundo da página */
    overflow: hidden;      /* IMPORTE: Garante que o blur do brilho não "vaze" para fora */

    /* --- ESTILOS VISUAIS (Ajuste como quiser) --- */
    border-radius: 4px;
    padding: 8px 16px; /* Espaçamento interno de exemplo */
    color: white;      /* Cor do texto de exemplo */
}

.scw-gradient-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;          /* Coloca o brilho atrás do texto/conteúdo */
    pointer-events: none; /* IMPORTANTE: Conserta o hover e cliques no botão */

    /* --- CONFIGURAÇÕES DO EFEITO DE BRILHO --- */
    /* Você pode usar suas variáveis da wiki aqui se quiser */
    --clr-3: #59cffc;
    --clr-4: #38556a;
    --clr-5: #233545;
    --gradient: var(--clr-3), var(--clr-4), var(--clr-5), var(--clr-4), var(--clr-3);
    --gradient-blur: 15px; /* Ajuste a intensidade do "blur" */
    --gradient-time: 5s;

    background: conic-gradient(from var(--gradient-angle), var(--gradient));
    filter: blur(var(--gradient-blur));
    animation: scw-gradient-rotate var(--gradient-time) linear infinite;
}

@keyframes scw-gradient-rotate {
    0% {
        --gradient-angle: 0deg;
    }
    100% {
        --gradient-angle: 360deg;
    }
}