Rewild Your Web
me.webbeef.org
web
browser
dweb
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3* {
4 box-sizing: border-box;
5}
6
7body {
8 margin: 0;
9 padding: 4px;
10 background: #2a2a2a;
11 font-family: sans-serif;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 min-height: 100%;
16}
17
18.keyboard {
19 display: flex;
20 flex-direction: column;
21 gap: 4px;
22 max-width: 600px;
23 width: 100%;
24}
25
26.row {
27 display: flex;
28 justify-content: center;
29 gap: 4px;
30}
31
32.key {
33 width: 30px;
34 height: 36px;
35 padding: 0 10px;
36 background: #404040;
37 border: none;
38 border-radius: 6px;
39 color: white;
40 font-size: 16px;
41 font-weight: 500;
42 cursor: pointer;
43 display: flex;
44 align-items: center;
45 justify-content: center;
46 transition: background 0.1s ease;
47 user-select: none;
48}
49
50.key:active {
51 background: #808080;
52 transform: translateY(1px);
53}
54
55.key.wide {
56 width: 54px;
57}
58
59.key.extra-wide {
60 width: 72px;
61}
62
63.key.space {
64 flex: 1;
65 width: 280px;
66}
67
68.key.shift.active {
69 background: #5a8cff;
70}
71
72/* Number row keys are slightly smaller */
73.row-numbers .key {
74 min-width: 32px;
75 font-size: 14px;
76}
77
78/* Hidden state */
79.keyboard.hidden {
80 display: none;
81}