@ertekinno/human-like/src/styles/KeyboardStyle.css

A sophisticated React typewriter effect library with realistic human typing behavior, mobile/desktop keyboards, and comprehensive theming support

/* General Keyboard Styles */
.human-like-keyboard {
  --keyboard-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --transition-speed: 0.1s;
  --focus-outline: 2px solid #007AFF;
  
  font-family: var(--keyboard-font);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.human-like-keyboard *,
.human-like-keyboard *:before,
.human-like-keyboard *:after {
  box-sizing: border-box;
}

.human-like-keyboard button {
  outline: none;
  border: none;
  background: none;
  font-family: inherit;
}

.human-like-keyboard button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Animation classes */
.human-like-keyboard__key-press {
  animation: keyPress var(--transition-speed) ease-out;
}

@keyframes keyPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.human-like-keyboard__highlight {
  animation: highlight 0.2s ease-out;
}

@keyframes highlight {
  0% {
    box-shadow: 0 0 0 rgba(0, 122, 255, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 122, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 122, 255, 0);
  }
}

/* Responsive design */
@media (max-width: 480px) {
  .human-like-keyboard {
    padding: 10px;
  }
  
  .human-like-mobile-keyboard {
    padding: 15px;
    max-width: 100%;
  }
  
  .human-like-mobile-keyboard__key {
    height: 38px;
    font-size: 14px;
  }
  
  .human-like-mobile-keyboard__key--space {
    min-width: 150px;
  }
  
  .human-like-mobile-keyboard__key--shift,
  .human-like-mobile-keyboard__key--backspace {
    min-width: 45px;
  }
  
  .human-like-mobile-keyboard__key--return {
    min-width: 70px;
  }
  
  .human-like-mobile-keyboard__key--view-switch {
    min-width: 40px;
  }
  
  .human-like-mobile-keyboard__key--regular {
    min-width: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .human-like-keyboard {
    --transition-speed: 0s;
  }
  
  .human-like-keyboard *,
  .human-like-keyboard *:before,
  .human-like-keyboard *:after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .human-like-mobile-keyboard {
    --key-border: #000000;
    --keyboard-bg: #ffffff;
    --keyboard-bg-dark: #000000;
    --key-bg: #ffffff;
    --key-bg-dark: #000000;
    --key-text: #000000;
    --key-text-dark: #ffffff;
  }
}