MediaWiki:Common.css

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.

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

/* Elemento com o glow animado */
.scw-gradient-glow {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #1a242e;
  color: white;
  font-size: 16px;
  z-index: 0;
  overflow: hidden;
  border: none; /* Removemos a borda real para dar espaço pro efeito */
}

/* Elemento real dentro do botão (caso precise conteúdo) */
.scw-gradient-glow span {
  position: relative;
  z-index: 1;
}

/* Pseudo-elemento com a borda animada */
.scw-gradient-glow::before {
  content: '';
  position: absolute;
  inset: -3px; /* <- Esse valor deve ser igual ou maior que o blur */
  z-index: -1;
  border-radius: inherit;

  --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;
  --gradient-blur: 6px;

  background: conic-gradient(from var(--gradient-angle, 0deg), var(--gradient));
  animation: scw-gradient-rotate-modern var(--gradient-time) linear infinite;
  filter: blur(var(--gradient-blur));
  transition: filter 0.2s ease;
}

/* Efeito glow extra no hover */
.scw-gradient-glow:hover::before {
  filter: blur(10px);
}

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

/* Fallback para navegadores sem @property */
@supports not (syntax: '<angle>') {
  .scw-gradient-glow::before {
    animation: scw-gradient-rotate-fallback var(--gradient-time) linear infinite;
    transform-origin: center;
  }

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