ASCII text
1
/* On-screen Keyboard */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../gnome-shell";
6
@use "../../drawing";
7
// draw keys using button function
9
#keyboard {
10
background-color: theme-color.$scrim-alt;
11
box-shadow: none;
12
.page-indicator {
14
padding: 4px;
15
.page-indicator-icon {
17
width: 8px;
18
height: 8px;
19
}
20
}
21
}
22
// the container for individual keys
24
@if gnome-shell.$version >= 3.28 {
25
.key-container {
26
padding: 4px;
27
spacing: 4px;
28
}
29
} @else {
30
.keyboard-layout {
31
spacing: 10px;
32
padding: 10px;
33
}
34
.keyboard-row {
36
spacing: 15px;
37
}
38
}
39
// the keys
41
.keyboard-key {
42
min-height: 1.2em;
43
min-width: 1.2em;
44
font-size: 2em;
45
font-weight: 500;
46
border: 0;
47
border-width: 0;
48
border-style: none;
49
border-radius: theme.$corner-radius;
50
&,
52
// non-character keys
53
&.default-key {
54
@include drawing.button(normal);
55
&:focus {
57
@include drawing.button(focus);
58
}
59
&:hover,
61
&:checked {
62
@include drawing.button(hover);
63
}
64
&:active {
66
@include drawing.button(active);
67
}
68
}
69
&:grayed { //FIXMEy
71
border-color: transparent;
72
background-color: theme-color.$scrim-alt;
73
color: theme-color.$on-scrim-alt;
74
}
75
// enter key is suggested-action
77
&.enter-key {
78
@include drawing.button(normal, $c: theme-color.$primary, $tc: theme-color.$on-primary);
79
&:hover,
81
&:checked {
82
@include drawing.button(hover, $c: theme-color.$primary, $tc: theme-color.$on-primary);
83
}
84
&:active {
86
@include drawing.button(active, $c: theme-color.$primary, $tc: theme-color.$on-primary);
87
}
88
}
89
@if gnome-shell.$version >= 3.36 {
91
&.shift-key-uppercase {
92
color: theme-color.$primary;
93
}
94
StIcon {
96
icon-size: 32px;
97
}
98
} @else {
99
// size of the icon asset
100
&.default-key {
101
background-size: 24px;
102
}
103
// key assets
105
&.enter-key {
106
background-image: url("assets/key-enter.svg");
107
}
108
&.shift-key-lowercase {
110
background-image: url("assets/key-shift.svg");
111
}
112
&.shift-key-uppercase {
114
background-image: url("assets/key-shift-uppercase.svg");
115
}
116
&.shift-key-uppercase:latched {
118
background-image: url("assets/key-shift-latched-uppercase.svg");
119
}
120
&.hide-key {
122
background-image: url("assets/key-hide.svg");
123
}
124
&.layout-key {
126
background-image: url("assets/key-layout.svg");
127
}
128
}
129
}
130
// long press on a key popup
132
.keyboard-subkeys {
133
-boxpointer-gap: 5px;
134
-arrow-base: 0;
135
-arrow-rise: 0;
136
-arrow-border-width: 0;
137
-arrow-border-color: transparent;
138
-arrow-border-radius: 0;
139
-arrow-background-color: transparent;
140
padding: 5px;
141
border-radius: theme.$corner-radius;
142
box-shadow: theme.$shadow-z4;
143
background-color: theme-color.$surface-z8;
144
color: theme-color.$on-surface;
145
.keyboard-key {
147
border-radius: theme.$corner-radius;
148
@include drawing.button(flat-normal);
150
&:focus {
152
@include drawing.button(flat-focus);
153
}
154
&:hover,
156
&:checked {
157
@include drawing.button(flat-hover);
158
}
159
&:active {
161
@include drawing.button(flat-active);
162
}
163
}
164
}
165
// emoji
167
.emoji-page {
168
.keyboard-key {
169
border: 0;
170
@include drawing.button(flat-normal, $tc: theme-color.$on-scrim-alt);
171
&:focus {
173
@include drawing.button(flat-focus, $tc: theme-color.$on-scrim-alt);
174
}
175
&:hover {
177
@include drawing.button(flat-hover, $tc: theme-color.$on-scrim-alt);
178
}
179
&:active {
181
@include drawing.button(flat-active, $tc: theme-color.$on-scrim-alt);
182
}
183
}
184
}
185
.emoji-panel {
187
.keyboard-key:latched {
188
border-color: transparent;
189
background-color: theme-color.$primary;
190
color: theme-color.$on-primary;
191
}
192
}
193
// suggestions
195
.word-suggestions {
196
@include drawing.type(subtitle1);
197
spacing: 12px;
198
min-height: 20pt;
199
}
200