src/shared/ui/button/button.module.css - main - 5_element/gpb-hackathon-game

src/shared/ui/button/button.module.css
115 строк3 KB
orion
feat: loading
01 окт 2025, 00:19
01 окт 2025, 00:19e6f2c62
.hud {
  position: absolute;
  left: max(12px, env(safe-area-inset-left, 12px));
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  width: 80px;
  z-index: var(--z-overlay);
}
.hudRight {
  left: auto;
  right: max(12px, env(safe-area-inset-right, 12px));
}
.btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  color-scheme: light;
  width: 100%;
  height: 32px;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-black);
  -webkit-text-fill-color: var(--color-black);

  /* sRGB interpolation for consistent look (Chrome/Safari) */
  background: linear-gradient(
    in var(--gradient-space) 135deg,
    var(--color-melissa) 0%,
    var(--color-mint) 50%,
    var(--color-melissa) 100%
  );
  border: none;
  border-radius: 16px;
  box-shadow:
    0 6px 0 var(--color-mint),
    0 8px 15px var(--black-a15),
    inset 0 2px 0 var(--white-a30);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.btn.ready {
  animation: buttonPulse 2s ease-in-out infinite;
}
.btn:hover {
  color: var(--color-black);
  -webkit-text-fill-color: var(--color-black);
  background: linear-gradient(
    in var(--gradient-space) 135deg,
    var(--color-mint) 0%,
    var(--color-melissa) 50%,
    var(--color-mint) 100%
  );
  box-shadow:
    0 8px 0 var(--color-mint),
    0 12px 20px var(--black-a20),
    inset 0 2px 0 var(--white-a40);
  transform: translateY(-2px);
}
.btn:active {
  color: var(--color-black);
  -webkit-text-fill-color: var(--color-black);
  transform: translateY(4px);
  box-shadow:
    0 3px 0 var(--color-mint),
    0 6px 12px var(--black-a10),
    inset 0 1px 0 var(--white-a20);
}
.btn:disabled {
  filter: grayscale(0.8) brightness(0.7);
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow:
    0 4px 0 var(--color-mint),
    0 6px 12px var(--black-a10);
  /* Prevent platform default dimming in Safari */
  -webkit-text-fill-color: var(--color-black);
}

@keyframes buttonPulse {
  0%,
  100% {
    box-shadow:
      0 6px 0 var(--color-mint),
      0 8px 15px var(--black-a15),
      inset 0 2px 0 var(--white-a30);
  }
  50% {
    box-shadow:
      0 6px 0 var(--color-mint),
      0 8px 15px var(--black-a15),
      inset 0 2px 0 var(--white-a30),
      0 0 20px var(--color-melissa-glow-strong);
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .hud {
    width: 80px; /* Уменьшаем ширину кнопки на мобильных */
  }

  .btn {
    height: 40px; /* Уменьшаем высоту кнопки */
    font-size: 14px; /* Уменьшаем размер шрифта */
    border-radius: 12px; /* Уменьшаем радиус */
  }

  .btn:hover {
    transform: translateY(-1px); /* Уменьшаем эффект hover на мобильных */
  }
}