From ea7926ec6b4b312a433c2a0c60c2fc8ee9edee5b Mon Sep 17 00:00:00 2001
From: primakov <primakovpro@gmail.com>
Date: Wed, 30 Nov 2022 12:48:20 +0300
Subject: [PATCH] fix blue highlight

---
 src/components/keyboard.style.ts | 10 +++++++++-
 src/pages/style.ts               | 14 ++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/keyboard.style.ts b/src/components/keyboard.style.ts
index dfa2a84..0b37560 100644
--- a/src/components/keyboard.style.ts
+++ b/src/components/keyboard.style.ts
@@ -22,7 +22,11 @@ export const Wrapper = styled.div`
     align-items: center;
     justify-content: center;
     animation: ${reveal} .5s;
-    animation-timing-function: cubic-bezier(0, 0.65, 0.25, 1);
+    animation-timing-function: cubic-bezier(0, 0.39, 0.29, 1.02);
+
+    @media screen and (max-width: 600px) {
+        padding: 6px;
+    }
 `;
 
 export const KeyRow = styled.div`
@@ -50,6 +54,10 @@ export const Key = styled.button`
     border: none;
     box-shadow: 1px 2px 6px #5c7cc9;
 
+    @media screen and (max-width: 600px) {
+        margin: 2px;
+    }
+
     &:active {
         background: #f5f5f5;
         box-shadow: inset 1px 2px 6px #5c7cc9,
diff --git a/src/pages/style.ts b/src/pages/style.ts
index 8a39286..6701a35 100644
--- a/src/pages/style.ts
+++ b/src/pages/style.ts
@@ -92,6 +92,13 @@ export const StartLabel = styled.label`
         inset 0 2px 3px rgba(255,255,255,0.13),
         0 5px 8px rgba(0,0,0,0.3),
         0 10px 10px 4px rgba(0,0,0,0.3);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
     &::after {
         content: ""; 
@@ -131,6 +138,13 @@ export const StartInput = styled.input`
     z-index: 100;
     position: absolute;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
     &:checked ~ label {
         box-shadow: