MediaWiki:Common.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* =================================================================== */
/* 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;
}