MediaWiki:Common.css: Difference between revisions

Revision as of 15:17, 29 July 2025

/* =================================================================== */
/* EFEITO FINAL: BORDA COM BRILHO ANIMADO                            */
/* Combina todas as correções: borda, overflow e hover.            */
/* =================================================================== */

/* --- CONFIGURAÇÃO E FALLBACK (Funciona em todos os navegadores) --- */
.scw-gradient-glow {
    /* --- Layout e Posicionamento --- */
    display: inline-block; /* Comportamento de botão */
    position: relative;    /* Contexto para o brilho */
    isolation: isolate;    /* Previne que o z-index afete o fundo da página */
    overflow: hidden;      /* Previne que a animação "vaze" para fora */

    /* --- Estilos Visuais (AJUSTE COMO QUISER) --- */
    padding: 8px 16px;     /* Espaçamento interno do botão */
    color: white;          /* Cor do texto */
    border-radius: 4px;    /* Arredondamento dos cantos */

    /* --- A TÉCNICA DA BORDA --- */
    --button-bg-color: #1a242e;    /* << AJUSTE: Cor do interior do botão */
    border: 2px solid transparent; /* << AJUSTE: Espessura da borda animada */
    background-color: var(--button-bg-color);
    background-clip: padding-box;  /* Impede a cor de fundo de pintar a área da borda */
}

.scw-gradient-glow::before {
    content: '';
    position: absolute;
    z-index: -1;          /* Coloca o brilho atrás do botão */
    pointer-events: none; /* Conserta o hover e cliques */
    /* Faz o gradiente preencher até a borda (deve ser o negativo da espessura da borda) */
    inset: -2px;

    /* --- Gradiente Animado --- */
    --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-time: 5s;
    background: conic-gradient(from 0deg, var(--gradient));
    animation: scw-gradient-rotate-fallback var(--gradient-time) linear infinite;
}

@keyframes scw-gradient-rotate-fallback {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* --- MELHORIA PARA NAVEGADORES MODERNOS --- */
@supports (syntax: '<angle>') {

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

    .scw-gradient-glow::before {
        background: conic-gradient(from var(--gradient-angle), var(--gradient));
        animation: scw-gradient-rotate-modern var(--gradient-time) linear infinite;
        transform: none; /* Desativa a animação de fallback */
    }

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