forked from
me.webbeef.org/browser.html
Rewild Your Web
keyboard: minor visual tweaks
Signed-off-by: webbeef <me@webbeef.org>
+26
-18
+2
-2
ui/keyboard/emoji/renderer.js
+2
-2
ui/keyboard/emoji/renderer.js
···
63
63
}
64
64
65
65
// ABC button
66
-
const abcTab = document.createElement("button");
66
+
const abcTab = document.createElement("div");
67
67
abcTab.className = "emoji-tab abc";
68
68
abcTab.textContent = "ABC";
69
69
bar.appendChild(abcTab);
70
70
71
71
// Backspace button
72
-
const bsTab = document.createElement("button");
72
+
const bsTab = document.createElement("div");
73
73
bsTab.className = "emoji-tab backspace";
74
74
bsTab.textContent = "\u232b";
75
75
bar.appendChild(bsTab);
+24
-16
ui/keyboard/index.css
+24
-16
ui/keyboard/index.css
···
5
5
}
6
6
7
7
:root {
8
-
--default-key-width: calc(100vw / 10)
8
+
--default-key-width: calc(100vw / 10);
9
9
}
10
10
11
-
html, body {
11
+
html,
12
+
body {
12
13
height: 100%;
13
14
}
14
15
···
59
60
user-select: none;
60
61
}
61
62
62
-
.key:active {
63
+
.key:active,
64
+
.emoji-tab.abc:active,
65
+
.emoji-tab.backspace:active {
63
66
background-color: #808080;
64
67
transform: translateY(1px);
65
68
}
···
95
98
}
96
99
97
100
@keyframes layout-label {
98
-
0% { color: transparent; }
99
-
15% { color: white; }
100
-
70% { color: white; }
101
-
100% { color: transparent; }
101
+
0% {
102
+
color: transparent;
103
+
}
104
+
15% {
105
+
color: lightgray;
106
+
}
107
+
70% {
108
+
color: lightgray;
109
+
}
110
+
100% {
111
+
color: transparent;
112
+
}
102
113
}
103
114
104
115
.key.layout-label {
105
116
font-size: 13px;
106
117
color: transparent;
107
-
animation: layout-label 1.2s ease forwards;
118
+
animation: layout-label 1s ease forwards;
108
119
}
109
120
110
121
/* Hidden state */
···
168
179
gap: 2px;
169
180
padding: 4px;
170
181
border-top: 1px solid #404040;
171
-
flex-shrink: 0;
182
+
align-items: center;
172
183
}
173
184
174
185
.emoji-tab {
···
193
204
background: #404040;
194
205
}
195
206
196
-
.emoji-tab.abc {
197
-
font-size: 11px;
198
-
font-weight: 600;
199
-
}
200
-
201
-
.emoji-tab.backspace {
202
-
font-size: 14px;
207
+
.emoji-tab.abc, .emoji-tab.backspace {
208
+
transition: background-color 0.05s ease;
209
+
font-size: 16px;
210
+
font-weight: bolder;
203
211
}