ASCII text
1
/* On-screen Keyboard */
2
@use "../../../../theme";
4
@use "../../../../theme-color";
5
@use "../../../../shadow";
6
@use "../../gnome-shell";
7
@use "../../drawing";
8
@use "../../typography";
9
// draw keys using button function
11
#keyboard {
12
background-color: theme-color.$scrim-alt;
13
box-shadow: none;
14
.page-indicator {
16
padding: 4px;
17
.page-indicator-icon {
19
width: 8px;
20
height: 8px;
21
}
22
}
23
}
24
// the container for individual keys
26
@if gnome-shell.$version >= 3.28 {
27
.key-container {
28
padding: 4px;
29
spacing: 4px;
30
}
31
} @else {
32
.keyboard-layout {
33
spacing: 10px;
34
padding: 10px;
35
}
36
.keyboard-row {
38
spacing: 15px;
39
}
40
}
41
// the keys
43
.keyboard-key {
44
min-height: 1.2em;
45
min-width: 1.2em;
46
font-size: 2em;
47
font-weight: 500;
48
border: 0;
49
border-width: 0;
50
border-style: none;
51
border-radius: theme.$corner-radius;
52
&,
54
// non-character keys
55
&.default-key {
56
@include drawing.button(normal);
57
&:focus {
59
@include drawing.button(focus);
60
}
61
&:hover,
63
&:checked {
64
@include drawing.button(hover);
65
}
66
&:active {
68
@include drawing.button(active);
69
}
70
}
71
&:grayed { //FIXMEy
73
border-color: transparent;
74
background-color: theme-color.$scrim-alt;
75
color: theme-color.$on-scrim-alt;
76
}
77
// enter key is suggested-action
79
&.enter-key {
80
@include drawing.button(normal, $c: theme-color.$primary, $tc: theme-color.$on-primary);
81
&:hover,
83
&:checked {
84
@include drawing.button(hover, $c: theme-color.$primary, $tc: theme-color.$on-primary);
85
}
86
&:active {
88
@include drawing.button(active, $c: theme-color.$primary, $tc: theme-color.$on-primary);
89
}
90
}
91
@if gnome-shell.$version >= 3.36 {
93
&.shift-key-uppercase {
94
color: theme-color.$primary;
95
}
96
StIcon {
98
icon-size: 32px;
99
}
100
} @else {
101
// size of the icon asset
102
&.default-key {
103
background-size: 24px;
104
}
105
// key assets
107
&.enter-key {
108
background-image: url("assets/key-enter.svg");
109
}
110
&.shift-key-lowercase {
112
background-image: url("assets/key-shift.svg");
113
}
114
&.shift-key-uppercase {
116
background-image: url("assets/key-shift-uppercase.svg");
117
}
118
&.shift-key-uppercase:latched {
120
background-image: url("assets/key-shift-latched-uppercase.svg");
121
}
122
&.hide-key {
124
background-image: url("assets/key-hide.svg");
125
}
126
&.layout-key {
128
background-image: url("assets/key-layout.svg");
129
}
130
}
131
}
132
// long press on a key popup
134
.keyboard-subkeys {
135
-boxpointer-gap: 5px;
136
-arrow-base: 0;
137
-arrow-rise: 0;
138
-arrow-border-width: 0;
139
-arrow-border-color: transparent;
140
-arrow-border-radius: 0;
141
-arrow-background-color: transparent;
142
padding: 5px;
143
border-radius: theme.$corner-radius;
144
box-shadow: shadow.$z4;
145
background-color: theme-color.$surface-z8;
146
color: theme-color.$on-surface;
147
.keyboard-key {
149
border-radius: theme.$corner-radius;
150
@include drawing.button(flat-normal);
152
&:focus {
154
@include drawing.button(flat-focus);
155
}
156
&:hover,
158
&:checked {
159
@include drawing.button(flat-hover);
160
}
161
&:active {
163
@include drawing.button(flat-active);
164
}
165
}
166
}
167
// emoji
169
.emoji-page {
170
.keyboard-key {
171
border: 0;
172
@include drawing.button(flat-normal, $tc: theme-color.$on-scrim-alt);
173
&:focus {
175
@include drawing.button(flat-focus, $tc: theme-color.$on-scrim-alt);
176
}
177
&:hover {
179
@include drawing.button(flat-hover, $tc: theme-color.$on-scrim-alt);
180
}
181
&:active {
183
@include drawing.button(flat-active, $tc: theme-color.$on-scrim-alt);
184
}
185
}
186
}
187
.emoji-panel {
189
.keyboard-key:latched {
190
border-color: transparent;
191
background-color: theme-color.$primary;
192
color: theme-color.$on-primary;
193
}
194
}
195
// suggestions
197
.word-suggestions {
198
@include typography.subtitle1;
199
spacing: 12px;
200
min-height: 20pt;
201
}
202