blob: 08d7a44bf8f04fbcdc71b0b46807d63f23291401 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
html, body {
margin: 0;
padding: 0;
/* width: 100%;
height: 100%; */
font-family: monospace;
overflow: hidden;
font-family: 'Kufam', 'Courier new', 'monospace';
}
body {
// margin: 10px;
background-color: $background-base;
color: $foreground-base;
}
.app-info {
position: absolute;
top: 15px;
left: 10px;
left: max(env(safe-area-inset-left, 10px), 10px);
h1 {
font-size: 14px;
margin: 0;
color: $foreground-base;
}
.version {
display: block;
font-size: 9px;
}
}
button:hover {
filter: brightness(80%);
}
button:active {
filter: brightness(70%);
}
.button-center {
position: absolute;
display: none;
margin-top: 5px;
border: none;
background-color: $background-z1;
color: $foreground-z1;
padding: 10px;
width: 140px;
height: 40px;
left: calc(50% - 70px);
font-weight: 400;
font-size: 15px;
.armed & { display: block; }
&-top { top: 10px; }
&-bottom { bottom: 50px; }
}
#btn_connect { display: block; }
.connected #btn_connect { display: none; }
.connected #btn_disconnect { display: block; }
.connected #btn_arm { display: block; }
#btn_connect, #btn_disconnect {
text-shadow: 0 0 5px #c3c3c3, 0 0 10px #636363;
}
.settings-button {
position: absolute;
background: $background-base;
color: $foreground-z1;
border: none;
top: 15px;
font-size: 1.3em;
right: max(env(safe-area-inset-left, 10px), 10px);
}
.settings-button:hover {
color: $foreground-base;
filter: brightness(100%);
}
.button-states {
display: none;
position: absolute;
top: 60px;
left: calc(50% - 80px - 10px);
width: 160px;
text-align: center;
background-color: #272727;
padding: 0 10px;
border-radius: 10px;
font-size: 9px;
.connected & { display: block; }
.debug & { display: block; }
}
|
