Try to prevent iOS from highlighting buttons

commit: 0e7edb7
parent: 7922d88
author: CheddarCrisp
date: 2020-03-13 03:24:13 +0100 CET

Try to prevent iOS from highlighting buttons
after closing a dialog

3 files changed, +30, -4

M src/ncounter/About.svelte

M src/ncounter/App.svelte

M src/ncounter/site.css

M src/ncounter/About.svelte

+8, -1

 1@@ -70,7 +70,14 @@ const dispatch = createEventDispatcher();
 2     border: 2px solid transparent;
 3 }
 4 
 5-.repo > a:hover, .repo > a:focus {
 6+@media (hover){
 7+    .repo > a:hover {
 8+        box-shadow: none;
 9+        border-color: var(--highlight-color);    
10+    }
11+}
12+
13+.repo > a:focus {
14     box-shadow: none;
15     border-color: var(--highlight-color);
16 }

M src/ncounter/App.svelte

+7, -1

 1@@ -107,7 +107,13 @@ function add(){
 2         color: var(--text-inverse);
 3     }
 4 
 5-    .tool-bar > button:focus, .tool-bar > button:hover {
 6+    @media(hover){
 7+        .tool-bar > button:hover {
 8+            border: 2px solid var(--highlight-color);
 9+        }
10+    }
11+
12+    .tool-bar > button:focus {
13         border: 2px solid var(--highlight-color);
14     }
15

M src/ncounter/site.css

+15, -2

 1@@ -69,7 +69,13 @@ button {
 2     font-family: inherit;
 3 }
 4 
 5-button:focus, button:hover {
 6+@media(hover){
 7+    button:hover {
 8+        border: 2px solid var(--buton-color);
 9+    }
10+}
11+
12+button:focus {
13     border: 2px solid var(--button-color);
14 }
15 
16@@ -137,7 +143,14 @@ button:focus, button:hover {
17     width: 100%;
18 }
19 
20-.dialog-content button:focus, .dialog-content button:hover {
21+@media(hover){
22+    .dialog-content button:hover{
23+        border: 0;
24+        outline: 2px solid var(--button-color);
25+    }
26+}
27+
28+.dialog-content button:focus {
29     border: 0;
30     outline: 2px solid var(--button-color);
31 }