MediaWiki:Common.css: Difference between revisions

Revision as of 15:19, 29 July 2025

/* =================================================================== */
/* TÉCNICA FINAL: EFEITO DE BORDA ANIMADA (À PROVA DE CONFLITOS)     */
/* Usa ::before para o brilho e ::after para o fundo sólido.         */
/* =================================================================== */

.scw-gradient-glow {
    /* --- Contêiner Principal --- */
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 10px 18px;  /* << AJUSTE o espaçamento interno do botão */
    border-radius: 4px; /* << AJUSTE o arredondamento */
    color: white;       /* << Cor inicial do texto */
    background: transparent; /* O contêiner em si é transparente */
    transition: color 0.2s ease-in-out; /* Transição suave para a cor do texto no hover */
}

/* Camada de Baixo: O Brilho Giratório */
.scw-gradient-glow::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: -2; /* Fica atrás de tudo */
    border-radius: inherit; /* Segue o arredondamento do pai */

    /* Gradiente */
    --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;
}

/* Camada do Meio: O Fundo Sólido do Botão */
.scw-gradient-glow::after {
    content: '';
    position: absolute;
    z-index: -1; /* Fica na frente do brilho, mas atrás do texto */
    /* Cria a "borda" de 2px, pois é 2px menor que o ::before em cada lado */
    inset: 2px;
    /* O raio da borda interna deve ser um pouco menor que o do contêiner */
    border-radius: 2px;
    /* Cor de fundo inicial do botão */
    background: #1a242e; /* << AJUSTE a cor de fundo padrão */
    transition: background 0.2s ease-in-out; /* Transição suave para a cor do hover */
}

/* --- O EFEITO DE HOVER --- */
.scw-gradient-glow:hover::after {
    background: #c7b00f; /* << AJUSTE a cor de fundo do hover (amarelo) */
}

.scw-gradient-glow:hover {
    color: black; /* << AJUSTE a cor do texto no hover */
}


/* --- Animação (Fallback para navegadores antigos) --- */
@keyframes scw-gradient-rotate-fallback {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- MELHORIA PARA NAVEGADORES MODERNOS (ignorado por navegadores antigos) --- */
@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;
    }

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