ASCII text
1
/* On-screen Keyboard */
2
$key_size: 1.2em;
4
$key_border_radius: $base_border_radius + 3px;
5
$key_bg_color: $bg_color;
6
// $default_key_bg_color: darken($key_bg_color, 4%);
7
$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
8
// draw keys using button function
11
#keyboard {
12
background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
13
box-shadow: inset 0 1px 0 0 $osd_outer_borders_color;
14
.page-indicator {
16
padding: $base_padding;
17
.page-indicator-icon {
19
width: 8px;
20
height: 8px;
21
}
22
}
23
}
24
// the container for individual keys
26
.key-container {
27
padding: $base_margin;
28
spacing: $base_margin;
29
}
30
// the keys
32
.keyboard-key {
33
@include button(normal, $c:$key_bg_color);
35
&:focus { @include button(focus);}
37
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
38
&:active { @include button(active, $c: $key_bg_color); }
39
@include fontsize($base_font_size + 5);
41
min-height: $key_size;
42
min-width: $key_size;
43
border-width: 1px;
44
border-style: solid;
45
border-radius: $key_border_radius;
46
&:grayed { //FIXMEy
48
background-color: darken($bg_color, 3%);
49
color: $osd_fg_color;
50
border-color: $osd_borders_color;
51
}
52
// non-character keys
54
&.default-key {
55
// size of the icon asset
57
background-size: 24px;
58
@include button(normal, $c:$default_key_bg_color);
60
&:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
61
&:active { @include button(active, $c: $default_key_bg_color);}
62
}
63
// enter key is suggested-action
65
&.enter-key {
66
background-image: url("resource:///org/gnome/shell/theme/key-enter.svg");
67
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
69
&:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
70
&:active {@include button(active, $c: darken($selected_bg_color, 2%));}
71
}
72
// key assets
74
&.shift-key-lowercase {background-image: url("resource:///org/gnome/shell/theme/key-shift.svg");}
75
&.shift-key-uppercase {background-image: url("resource:///org/gnome/shell/theme/key-shift-uppercase.svg");}
76
&.shift-key-uppercase:latched {background-image: url("resource:///org/gnome/shell/theme/key-shift-latched-uppercase.svg");}
77
&.hide-key {background-image: url("resource:///org/gnome/shell/theme/key-hide.svg");}
78
&.layout-key {background-image: url("resource:///org/gnome/shell/theme/key-layout.svg");}
79
}
80
// long press on a key popup
82
.keyboard-subkeys {
83
color: $osd_fg_color;
84
-arrow-border-radius: $modal_radius;
85
-arrow-background-color: $osd_bg_color;
86
-arrow-border-width: 1px;
87
-arrow-border-color: lighten($osd_bg_color, 9%);
88
-arrow-base: 20px;
89
-arrow-rise: 10px;
90
-boxpointer-gap: $base_spacing;
91
.keyboard-key {
93
@include button(normal, $c:$key_bg_color);
94
&:focus { @include button(focus);}
96
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
97
&:active { @include button(active, $c: $key_bg_color); }
98
border-radius:$base_border_radius;
100
}
101
}
102
// emoji
104
.emoji-page {
105
.keyboard-key {
106
background-color: transparent;
107
border: none;
108
color: initial;
109
}
110
}
111
.emoji-panel {
113
.keyboard-key:latched {
114
border-color: lighten($selected_bg_color, 5%);
115
background-color: $selected_bg_color;
116
}
117
}
118
// suggestions
120
.word-suggestions {
121
@include fontsize($base_font_size + 3);
122
spacing: 12px;
123
min-height: 20pt;
124
}
125