reactjs-virtual-keyboard/dist/styles.css

A customizable virtual keyboard component for React applications with support for multiple layouts, multi-language support, hardware keyboard sync, and touch devices

:root{--vk-bg-color: #1a1a1a;--vk-key-color: #444444;--vk-key-text-color: #ffffff;--vk-key-active-color: #666666;--vk-key-hover-color: #555555;--vk-active-state-color: #4a90e2;--vk-key-border-radius: clamp(4px, .5vw, 8px);--vk-key-font-size: clamp(14px, 2.5vw, 32px);--vk-special-key-font-size: clamp(20px, 2vw, 28px);--vk-gap: clamp(3px, .6vw, 10px);--vk-padding: clamp(6px, 1vw, 16px);--vk-height: 45vh;--vk-z-index: 2001;--vk-numbers-width: 50%}.vk-container{position:fixed;bottom:0;left:0;right:0;z-index:var(--vk-z-index);height:var(--vk-height);max-height:90vh;min-height:180px;background-color:var(--vk-bg-color);box-shadow:0 -2px 12px #00000080;padding:var(--vk-padding);box-sizing:border-box;overflow-y:auto}.vk-container *{box-sizing:border-box}.vk-layout{display:flex;flex-direction:column;gap:var(--vk-gap);justify-content:center;height:100%;max-width:1400px;margin:0 auto}.vk-layout--numbers{width:var(--vk-numbers-width);max-width:400px;min-width:200px;margin-inline:auto}.vk-layout--numbers .vk-key__text{display:none}.vk-row{display:flex;gap:var(--vk-gap);justify-content:center;align-items:center;flex:1;min-height:0}.vk-key{height:100%;min-height:32px;display:flex;font-size:var(--vk-key-font-size);align-items:center;justify-content:center;gap:clamp(2px,.4vw,8px);flex:0 1 100%;background-color:var(--vk-key-color);color:var(--vk-key-text-color);border-radius:var(--vk-key-border-radius);border:none;cursor:pointer;transition:background-color .15s ease,transform .1s ease;font-family:inherit;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0 clamp(4px,.5vw,12px)}@media (hover: hover) and (pointer: fine){.vk-key:hover:not(.vk-key--caps-active){background-color:var(--vk-key-hover-color)}}.vk-key:active:not(:disabled){background-color:var(--vk-key-active-color);transform:scale(.97)}.vk-key:disabled{opacity:.5;cursor:not-allowed}.vk-key:focus{outline:none}.vk-key:focus-visible{outline:2px solid var(--vk-active-state-color);outline-offset:2px}.vk-key--space{flex:0 1 300%;font-size:var(--vk-special-key-font-size)}.vk-key--layout,.vk-key--enter,.vk-key--enter-num{flex:0 1 100%;font-size:var(--vk-special-key-font-size)}.vk-key--backspace{flex:0 1 150%;font-size:var(--vk-special-key-font-size)}.vk-key--backspace-num{flex:0 1 100%;font-size:var(--vk-special-key-font-size)}.vk-key--capsLock{flex:0 1 170%;font-size:var(--vk-special-key-font-size)}.vk-key--at,.vk-key--dot{flex:0 1 70%}.vk-key--caps-active{background-color:var(--vk-active-state-color);color:var(--vk-key-text-color);border-color:var(--vk-active-state-color)}.vk-key svg{width:clamp(20px,1.2em,28px);height:clamp(20px,1.2em,28px);flex-shrink:0}.vk-key__text{margin-left:.3em}@media (min-width: 1400px){:root{--vk-height: 38vh}}@media (min-width: 1024px) and (max-width: 1399px){:root{--vk-height: 40vh}}@media (min-width: 768px) and (max-width: 1023px){:root{--vk-height: 38vh;--vk-numbers-width: 60%}.vk-key--space{flex:0 1 100%}}@media (min-width: 600px) and (max-width: 767px){:root{--vk-height: 42vh;--vk-numbers-width: 65%;--vk-special-key-font-size: clamp(10px, 3vw, 24px)}.vk-key--capsLock,.vk-key--backspace{flex:0 1 130%}.vk-key__text{display:none}}@media (min-width: 480px) and (max-width: 599px){:root{--vk-height: 45vh;--vk-numbers-width: 75%}.vk-key--capsLock,.vk-key--backspace{flex:0 1 120%}.vk-key__text{display:none}}@media (max-width: 479px){:root{--vk-height: 48vh;--vk-numbers-width: 85%}.vk-layout--numbers{min-width:160px}.vk-key--capsLock,.vk-key--backspace{flex:0 1 100%}.vk-key__text{display:none}}@media (max-width: 319px){:root{--vk-height: 50vh;--vk-numbers-width: 95%}.vk-key--space{flex:0 1 40%}.vk-key--layout,.vk-key--enter{flex:0 1 22%}.vk-key__text{display:none}}@media (orientation: landscape) and (max-height: 500px){:root{--vk-height: 55vh;--vk-gap: clamp(2px, .4vw, 6px);--vk-padding: clamp(4px, .5vw, 10px)}.vk-container{max-height:280px}.vk-key{min-height:28px}.vk-key__text{display:none}}@media (orientation: landscape) and (max-height: 400px){:root{--vk-height: 65vh}.vk-container{max-height:240px;min-height:140px}.vk-key{min-height:24px}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.vk-key{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (prefers-color-scheme: light){.vk-container--auto{--vk-bg-color: #f0f0f0;--vk-key-color: #ffffff;--vk-key-text-color: #333333;--vk-key-hover-color: #e8e8e8;--vk-key-active-color: #d0d0d0}}.vk-container--light{--vk-bg-color: #f0f0f0;--vk-key-color: #ffffff;--vk-key-text-color: #333333;--vk-key-hover-color: #e8e8e8;--vk-key-active-color: #d0d0d0;box-shadow:0 -2px 12px #00000026}.vk-container--blue{--vk-bg-color: #1e3a5f;--vk-key-color: #2d5a8c;--vk-key-hover-color: #3a6fa0;--vk-key-active-color: #4a8ab8;--vk-active-state-color: #00d4ff}.vk-container--purple{--vk-bg-color: #2d1b4e;--vk-key-color: #4a2c7a;--vk-key-hover-color: #5d3a94;--vk-key-active-color: #7048ad;--vk-active-state-color: #b388ff}@media (prefers-reduced-motion: reduce){.vk-key{transition:none}.vk-key:active:not(:disabled){transform:none}}@media (prefers-contrast: high){.vk-key{border:1px solid var(--vk-key-text-color)}.vk-key:focus-visible{outline-width:3px}}@media (pointer: coarse){.vk-key{min-height:40px}:root{--vk-gap: clamp(4px, .7vw, 10px)}}.vk-language-switcher{display:flex;gap:6px;padding:6px 8px;background:var(--vk-bg-color, #1a1a1a);border-bottom:1px solid rgba(255,255,255,.1);justify-content:center;flex-shrink:0}.vk-lang-btn{padding:4px 10px;background:var(--vk-key-color, #2d2d2d);color:var(--vk-key-text-color, #ffffff);border:1px solid rgba(255,255,255,.1);border-radius:calc(var(--vk-key-border-radius, 8px) * .75);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:50px}.vk-lang-btn:hover{background:var(--vk-key-hover-color, #3d3d3d);transform:translateY(-1px)}.vk-lang-btn.active{background:var(--vk-active-state-color, #4a9eff);border-color:var(--vk-active-state-color, #4a9eff);color:#fff}.vk-lang-btn:active{transform:translateY(0)}