ASCII text
1
/* On-screen Keyboard */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../gnome-shell";
6
@use "../../drawing";
7
@use "../../typography";
8
// draw keys using button function
10
#keyboard {
11
background-color: theme-color.$scrim-alt;
12
box-shadow: none;
13
.page-indicator {
15
padding: 4px;
16
.page-indicator-icon {
18
width: 8px;
19
height: 8px;
20
}
21
}
22
}
23
// the container for individual keys
25
@if gnome-shell.$version >= 3.28 {
26
.key-container {
27
padding: 4px;
28
spacing: 4px;
29
}
30
} @else {
31
.keyboard-layout {
32
spacing: 10px;
33
padding: 10px;
34
}
35
.keyboard-row {
37
spacing: 15px;
38
}
39
}
40
// the keys
42
.keyboard-key {
43
min-height: 1.2em;
44
min-width: 1.2em;
45
font-size: 2em;
46
font-weight: 500;
47
border: 0;
48
border-width: 0;
49
border-style: none;
50
border-radius: theme.$corner-radius;
51
&,
53
// non-character keys
54
&.default-key {
55
@include drawing.button(normal);
56
&:focus {
58
@include drawing.button(focus);
59
}
60
&:hover,
62
&:checked {
63
@include drawing.button(hover);
64
}
65
&:active {
67
@include drawing.button(active);
68
}
69
}
70
&:grayed { //FIXMEy
72
border-color: transparent;
73
background-color: theme-color.$scrim-alt;
74
color: theme-color.$on-scrim-alt;
75
}
76
// enter key is suggested-action
78
&.enter-key {
79
@include drawing.button(normal, $c: theme-color.$primary, $tc: theme-color.$on-primary);
80
&:hover,
82
&:checked {
83
@include drawing.button(hover, $c: theme-color.$primary, $tc: theme-color.$on-primary);
84
}
85
&:active {
87
@include drawing.button(active, $c: theme-color.$primary, $tc: theme-color.$on-primary);
88
}
89
}
90
@if gnome-shell.$version >= 3.36 {
92
&.shift-key-uppercase {
93
color: theme-color.$primary;
94
}
95
StIcon {
97
icon-size: 32px;
98
}
99
} @else {
100
// size of the icon asset
101
&.default-key {
102
background-size: 24px;
103
}
104
// key assets
106
&.enter-key {
107
background-image: url("assets/key-enter.svg");
108
}
109
&.shift-key-lowercase {
111
background-image: url("assets/key-shift.svg");
112
}
113
&.shift-key-uppercase {
115
background-image: url("assets/key-shift-uppercase.svg");
116
}
117
&.shift-key-uppercase:latched {
119
background-image: url("assets/key-shift-latched-uppercase.svg");
120
}
121
&.hide-key {
123
background-image: url("assets/key-hide.svg");
124
}
125
&.layout-key {
127
background-image: url("assets/key-layout.svg");
128
}
129
}
130
}
131
// long press on a key popup
133
.keyboard-subkeys {
134
-boxpointer-gap: 5px;
135
-arrow-base: 0;
136
-arrow-rise: 0;
137
-arrow-border-width: 0;
138
-arrow-border-color: transparent;
139
-arrow-border-radius: 0;
140
-arrow-background-color: transparent;
141
padding: 5px;
142
border-radius: theme.$corner-radius;
143
box-shadow: theme.$shadow-z4;
144
background-color: theme-color.$surface-z8;
145
color: theme-color.$on-surface;
146
.keyboard-key {
148
border-radius: theme.$corner-radius;
149
@include drawing.button(flat-normal);
151
&:focus {
153
@include drawing.button(flat-focus);
154
}
155
&:hover,
157
&:checked {
158
@include drawing.button(flat-hover);
159
}
160
&:active {
162
@include drawing.button(flat-active);
163
}
164
}
165
}
166
// emoji
168
.emoji-page {
169
.keyboard-key {
170
border: 0;
171
@include drawing.button(flat-normal, $tc: theme-color.$on-scrim-alt);
172
&:focus {
174
@include drawing.button(flat-focus, $tc: theme-color.$on-scrim-alt);
175
}
176
&:hover {
178
@include drawing.button(flat-hover, $tc: theme-color.$on-scrim-alt);
179
}
180
&:active {
182
@include drawing.button(flat-active, $tc: theme-color.$on-scrim-alt);
183
}
184
}
185
}
186
.emoji-panel {
188
.keyboard-key:latched {
189
border-color: transparent;
190
background-color: theme-color.$primary;
191
color: theme-color.$on-primary;
192
}
193
}
194
// suggestions
196
.word-suggestions {
197
@include typography.subtitle1;
198
spacing: 12px;
199
min-height: 20pt;
200
}
201