@chatui/core/es/components/Recorder/style.less

The React library for Chatbot UI

.RecorderToast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: @zindex-recorder-toast;
  width: 160Px;
  height: 160Px;
  padding: 10Px;
  transform: translate(-50%, -50%);
  border-radius: 12Px;
  background: var(--color-toast);
  color: var(--color-fill-1);
  text-align: center;
}

.Recorder--cancel {
  .RecorderToast {
    color: var(--color-warning);
  }
  .Recorder-btn {
    background: @btn-hover-bg;
    color: var(--color-text-3);
  }
}

.RecorderToast-icon {
  position: relative;
  font-size: 37Px;
}

.RecorderToast-waves {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: .3s;
}

.RecorderToast-wave-1,
.RecorderToast-wave-2,
.RecorderToast-wave-3 {
  position: absolute;
  z-index: -1;
  color: var(--brand-2);
  animation: wave 10s linear infinite;
}

.RecorderToast-wave-1 {
  top: -25Px;
  left: 14Px;
  font-size: 176Px;
  opacity: 0.2;
}

.RecorderToast-wave-2 {
  top: -12Px;
  left: -21Px;
  font-size: 186Px;
  opacity: 0.4;
}

.RecorderToast-wave-3 {
  top: 40Px;
  left: 55Px;
  font-size: 71Px;
  opacity: 0.8;
}

.Recorder-btn {
  height: var(--action-size);
  border-radius: var(--radius-md);
  background: var(--color-fill-1);
  color: var(--brand-1);
  line-height: var(--action-size);
  text-align: center;
  transition: .3s;
}

@keyframes wave {
  0% {
    transform: translateY(5%) rotate(0);
  }
  50% {
    transform: translateY(-5%) rotate(180deg);
  }
  100% {
    transform: translateY(5%) rotate(360deg);
  }
}

.ChatApp[data-elder-mode="true"] {
  .Recorder-btn {
    font-size: 20Px;
  }
}