MediaWiki:Common.css: Difference between revisions

Revision as of 04:42, 29 July 2025

/* CSS placed here will be applied to all skins */
/* =================================================================== */
/* EFEITO DE BRILHO GRADIENTE (SCW-GRADIENT-GLOW)                       */
/* =================================================================== */

/* --- VERSÃO 1: FALLBACK PARA NAVEGADORES ANTIGOS (Compatível) --- */
/* Esta versão funciona em todos os lugares.                          */
.scw-gradient-glow {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* <-- ADICIONE ESTA LINHA *//* Importante para conter o pseudo-elemento */
    --clr-3: var(--color-progressive);
    --clr-4: var(--border-color-base);
    --clr-5: var(--border-color-subtle);
    --gradient: var(--clr-3),var(--clr-4),var(--clr-5),var(--clr-4),var(--clr-3);
    --gradient-blur: 4px;
    --gradient-time: 5s;
}

.scw-gradient-glow::before {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    content: '';
    background: conic-gradient(from 0deg, var(--gradient));
    animation: scw-gradient-rotate-fallback var(--gradient-time) linear infinite;
    filter: blur(var(--gradient-blur));
}

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

/* --- VERSÃO 2: MELHORIA PARA NAVEGADORES MODERNOS (usando @property) --- */
/* Este bloco só será aplicado por navegadores que entendem @property.    */
@supports (syntax: '<angle>') {

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

    .scw-gradient-glow::before {
        /* Sobrescreve as regras do fallback com a versão moderna */
        width: 100%; /* Volta ao tamanho normal */
        height: 100%;
        top: 0;
        left: 0;
        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 de rotação do fallback */
    }

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


/* --- Outras regras --- */
.mwe-upwiz-deed-purpose > label:last-child {
    display: none !important;
}