forked from
me.webbeef.org/browser.html
Rewild Your Web
keyboard: fix visual effect when tapping keys
Signed-off-by: webbeef <me@webbeef.org>
+12
-12
+3
-3
ui/keyboard/index.css
+3
-3
ui/keyboard/index.css
···
55
55
display: flex;
56
56
align-items: center;
57
57
justify-content: center;
58
-
transition: background 0.1s ease;
58
+
transition: background-color 0.05s ease;
59
59
user-select: none;
60
60
}
61
61
62
-
.key:active .key:hover {
63
-
background: #808080;
62
+
.key:active {
63
+
background-color: #808080;
64
64
transform: translateY(1px);
65
65
}
66
66
+9
-9
ui/keyboard/renderer.js
+9
-9
ui/keyboard/renderer.js
···
11
11
}
12
12
13
13
function renderKey(def, currentVariant) {
14
-
const button = document.createElement("button");
15
-
button.className = "key";
16
-
button.textContent = def.label;
17
-
button._keyDef = def;
14
+
const node = document.createElement("div");
15
+
node.className = "key";
16
+
node.textContent = def.label;
17
+
node._keyDef = def;
18
18
19
19
if (def.size) {
20
-
button.classList.add(def.size);
20
+
node.classList.add(def.size);
21
21
}
22
22
23
23
if (def.activeIn && def.activeIn.includes(currentVariant)) {
24
-
button.classList.add("active");
24
+
node.classList.add("active");
25
25
}
26
26
27
27
if (def.gridRow) {
28
-
button.style.gridRow = def.gridRow;
28
+
node.style.gridRow = def.gridRow;
29
29
}
30
30
31
31
if (def.gridColumn) {
32
-
button.style.gridColumn = def.gridColumn;
32
+
node.style.gridColumn = def.gridColumn;
33
33
}
34
34
35
-
return button;
35
+
return node;
36
36
}
37
37
38
38
/**