MediaWiki:Common.css: Difference between revisions

Revision as of 15:22, 29 July 2025

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

.scw-gradient-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background-color: #1a242e;
  color: white;
  cursor: pointer;
  z-index: 0;
  overflow: hidden;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.scw-gradient-glow .home-header__searchIcon img {
  vertical-align: middle;
}

/* Glow animado na borda */
.scw-gradient-glow::before {
  content: '';
  position: absolute;
  inset: -3px;
  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;
}

/* Glow mais intenso 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 suporte ao @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); }
  }
}