MediaWiki:Common.css: Difference between revisions

Revision as of 15:09, 29 July 2025

/* =================================================================== */
/* EFEITO DE BRILHO NA BORDA (SCW-GRADIENT-GLOW)                     */
/* Técnica de borda transparente com background-clip.              */
/* =================================================================== */

/* --- VERSÃO 1: FALLBACK (COMPATÍVEL COM TUDO) --- */
.scw-gradient-glow {
    position: relative;
    isolation: isolate; /* Previne que o z-index afete elementos pais */

    /* Defina a cor de fundo do interior do seu botão aqui */
    --button-bg-color: #1a242e; /* Exemplo de cor escura, ajuste conforme sua wiki */

    /* 1. Cria uma borda invisível que servirá como "janela" para o brilho */
    border: 2px solid transparent; /* Mude '2px' para alterar a espessura da borda */
    border-radius: 4px; /* Ajuste para combinar com o arredondamento do seu botão */

    /* 2. Pinta o fundo do botão, mas... */
    background-color: var(--button-bg-color);
    /* 3. ...impede a pintura na área da borda, deixando-a transparente. */
    background-clip: padding-box;
}

.scw-gradient-glow::before {
    content: '';
    position: absolute;
    /* Faz o gradiente ser um pouco maior para preencher a área da borda */
    inset: -2px;
    z-index: -1; /* Posiciona o brilho atrás do botão */

    /* Variáveis do gradiente */
    --clr-3: var(--color-progressive, #59cffc);
    --clr-4: var(--border-color-base, #38556a);
    --clr-5: var(--border-color-subtle, #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);
    }
}


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

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

    .scw-gradient-glow::before {
        /* A única mudança é usar a animação da variável, que é mais suave */
        background: conic-gradient(from var(--gradient-angle), var(--gradient));
        animation: scw-gradient-rotate-modern var(--gradient-time) linear infinite;
        transform: none; /* Remove a transformação do fallback */
    }

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

/* --- Outras regras que você já tinha --- */
.mwe-upwiz-deed-purpose > label:last-child {
    display: none !important;
}