Update shell keyboard style

This commit is contained in:
Vince
2021-12-23 18:58:32 +08:00
parent 47adcc89f8
commit 48369ed82a
7 changed files with 93 additions and 92 deletions

View File

@@ -1129,7 +1129,7 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
/* On-screen Keyboard */
#keyboard {
background-color: #242424;
background-color: #1d1d1d;
box-shadow: none;
}
@@ -1153,47 +1153,47 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
font-weight: bold;
min-height: 1.2em;
min-width: 1.2em;
padding: 0 !important;
border-radius: 9px;
border: none;
color: rgba(255, 255, 255, 0.7);
background-color: #313131;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
background-color: #707070;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.85);
}
.keyboard-key:focus, .keyboard-key:hover {
color: white;
background-color: #4b4b4b;
background-color: #656565;
}
.keyboard-key:checked, .keyboard-key:active {
color: white;
background-color: #575757;
background-color: #717171;
}
.keyboard-key:grayed {
background-color: #2C2C2C;
background-color: #4b4b4b;
color: rgba(255, 255, 255, 0.7);
}
.keyboard-key.default-key {
background-color: #272727;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
background-color: #4b4b4b;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.85);
}
.keyboard-key.default-key:focus, .keyboard-key.default-key:hover {
color: white;
background-color: #404040;
background-color: #585858;
}
.keyboard-key.default-key:checked, .keyboard-key.default-key:active {
color: white;
background-color: #525252;
background-color: #6a6a6a;
}
.keyboard-key.enter-key {
color: white;
background-color: #5b9bf8;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover {
@@ -1217,13 +1217,13 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
.keyboard-subkeys {
color: inherit;
-arrow-border-radius: 12px;
-arrow-background-color: #242424;
-arrow-background-color: #343434;
-arrow-border-width: 0;
-arrow-border-color: transparent;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-boxpointer-gap: 6px;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.85);
}
.emoji-page .keyboard-key {

View File

@@ -1129,7 +1129,7 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
/* On-screen Keyboard */
#keyboard {
background-color: #242424;
background-color: #d8dade;
box-shadow: none;
}
@@ -1153,11 +1153,12 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
font-weight: bold;
min-height: 1.2em;
min-width: 1.2em;
padding: 0 !important;
border-radius: 9px;
border: none;
color: rgba(0, 0, 0, 0.6);
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
background-color: white;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.35);
}
.keyboard-key:focus, .keyboard-key:hover {
@@ -1171,29 +1172,28 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
}
.keyboard-key:grayed {
background-color: #FFFFFF;
background-color: #adb3bc;
color: rgba(0, 0, 0, 0.6);
}
.keyboard-key.default-key {
background-color: #fafafa;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
background-color: #adb3bc;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
}
.keyboard-key.default-key:focus, .keyboard-key.default-key:hover {
color: rgba(0, 0, 0, 0.87);
background-color: #ebebeb;
background-color: #9fa6b1;
}
.keyboard-key.default-key:checked, .keyboard-key.default-key:active {
color: rgba(0, 0, 0, 0.87);
background-color: #d9d9d9;
background-color: #8b94a0;
}
.keyboard-key.enter-key {
color: white;
background-color: #3c84f7;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover {
@@ -1217,13 +1217,13 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
.keyboard-subkeys {
color: inherit;
-arrow-border-radius: 12px;
-arrow-background-color: #242424;
-arrow-background-color: rgba(199, 201, 205, 0.987);
-arrow-border-width: 0;
-arrow-border-color: transparent;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-boxpointer-gap: 6px;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.35);
}
.emoji-page .keyboard-key {

View File

@@ -1129,7 +1129,7 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
/* On-screen Keyboard */
#keyboard {
background-color: #242424;
background-color: #d8dade;
box-shadow: none;
}
@@ -1153,11 +1153,12 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
font-weight: bold;
min-height: 1.2em;
min-width: 1.2em;
padding: 0 !important;
border-radius: 9px;
border: none;
color: rgba(0, 0, 0, 0.6);
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
background-color: white;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.35);
}
.keyboard-key:focus, .keyboard-key:hover {
@@ -1171,29 +1172,28 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
}
.keyboard-key:grayed {
background-color: #FFFFFF;
background-color: #adb3bc;
color: rgba(0, 0, 0, 0.6);
}
.keyboard-key.default-key {
background-color: #fafafa;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
background-color: #adb3bc;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
}
.keyboard-key.default-key:focus, .keyboard-key.default-key:hover {
color: rgba(0, 0, 0, 0.87);
background-color: #ebebeb;
background-color: #9fa6b1;
}
.keyboard-key.default-key:checked, .keyboard-key.default-key:active {
color: rgba(0, 0, 0, 0.87);
background-color: #d9d9d9;
background-color: #8b94a0;
}
.keyboard-key.enter-key {
color: white;
background-color: #3c84f7;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover {
@@ -1217,13 +1217,13 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
.keyboard-subkeys {
color: inherit;
-arrow-border-radius: 12px;
-arrow-background-color: #242424;
-arrow-background-color: rgba(199, 201, 205, 0.987);
-arrow-border-width: 0;
-arrow-border-color: transparent;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-boxpointer-gap: 6px;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.35);
}
.emoji-page .keyboard-key {

View File

@@ -1129,7 +1129,7 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
/* On-screen Keyboard */
#keyboard {
background-color: #242424;
background-color: #1d1d1d;
box-shadow: none;
}
@@ -1153,47 +1153,47 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
font-weight: bold;
min-height: 1.2em;
min-width: 1.2em;
padding: 0 !important;
border-radius: 9px;
border: none;
color: rgba(255, 255, 255, 0.7);
background-color: #313131;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
background-color: #707070;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.85);
}
.keyboard-key:focus, .keyboard-key:hover {
color: white;
background-color: #4b4b4b;
background-color: #656565;
}
.keyboard-key:checked, .keyboard-key:active {
color: white;
background-color: #575757;
background-color: #717171;
}
.keyboard-key:grayed {
background-color: #2C2C2C;
background-color: #4b4b4b;
color: rgba(255, 255, 255, 0.7);
}
.keyboard-key.default-key {
background-color: #272727;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
background-color: #4b4b4b;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.85);
}
.keyboard-key.default-key:focus, .keyboard-key.default-key:hover {
color: white;
background-color: #404040;
background-color: #585858;
}
.keyboard-key.default-key:checked, .keyboard-key.default-key:active {
color: white;
background-color: #525252;
background-color: #6a6a6a;
}
.keyboard-key.enter-key {
color: white;
background-color: #5b9bf8;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover {
@@ -1217,13 +1217,13 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
.keyboard-subkeys {
color: inherit;
-arrow-border-radius: 12px;
-arrow-background-color: #242424;
-arrow-background-color: #343434;
-arrow-border-width: 0;
-arrow-border-color: transparent;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-boxpointer-gap: 6px;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.85);
}
.emoji-page .keyboard-key {

View File

@@ -1129,7 +1129,7 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
/* On-screen Keyboard */
#keyboard {
background-color: #242424;
background-color: #d8dade;
box-shadow: none;
}
@@ -1153,11 +1153,12 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
font-weight: bold;
min-height: 1.2em;
min-width: 1.2em;
padding: 0 !important;
border-radius: 9px;
border: none;
color: rgba(0, 0, 0, 0.6);
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
background-color: white;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.35);
}
.keyboard-key:focus, .keyboard-key:hover {
@@ -1171,29 +1172,28 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
}
.keyboard-key:grayed {
background-color: #FFFFFF;
background-color: #adb3bc;
color: rgba(0, 0, 0, 0.6);
}
.keyboard-key.default-key {
background-color: #fafafa;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
background-color: #adb3bc;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
}
.keyboard-key.default-key:focus, .keyboard-key.default-key:hover {
color: rgba(0, 0, 0, 0.87);
background-color: #ebebeb;
background-color: #9fa6b1;
}
.keyboard-key.default-key:checked, .keyboard-key.default-key:active {
color: rgba(0, 0, 0, 0.87);
background-color: #d9d9d9;
background-color: #8b94a0;
}
.keyboard-key.enter-key {
color: white;
background-color: #3c84f7;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover {
@@ -1217,13 +1217,13 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
.keyboard-subkeys {
color: inherit;
-arrow-border-radius: 12px;
-arrow-background-color: #242424;
-arrow-background-color: rgba(199, 201, 205, 0.987);
-arrow-border-width: 0;
-arrow-border-color: transparent;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-boxpointer-gap: 6px;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.35);
}
.emoji-page .keyboard-key {

View File

@@ -1129,7 +1129,7 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
/* On-screen Keyboard */
#keyboard {
background-color: #242424;
background-color: #d8dade;
box-shadow: none;
}
@@ -1153,11 +1153,12 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
font-weight: bold;
min-height: 1.2em;
min-width: 1.2em;
padding: 0 !important;
border-radius: 9px;
border: none;
color: rgba(0, 0, 0, 0.6);
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
background-color: white;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.35);
}
.keyboard-key:focus, .keyboard-key:hover {
@@ -1171,29 +1172,28 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
}
.keyboard-key:grayed {
background-color: #FFFFFF;
background-color: #adb3bc;
color: rgba(0, 0, 0, 0.6);
}
.keyboard-key.default-key {
background-color: #fafafa;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
background-color: #adb3bc;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
}
.keyboard-key.default-key:focus, .keyboard-key.default-key:hover {
color: rgba(0, 0, 0, 0.87);
background-color: #ebebeb;
background-color: #9fa6b1;
}
.keyboard-key.default-key:checked, .keyboard-key.default-key:active {
color: rgba(0, 0, 0, 0.87);
background-color: #d9d9d9;
background-color: #8b94a0;
}
.keyboard-key.enter-key {
color: white;
background-color: #3c84f7;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover {
@@ -1217,13 +1217,13 @@ StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text {
.keyboard-subkeys {
color: inherit;
-arrow-border-radius: 12px;
-arrow-background-color: #242424;
-arrow-background-color: rgba(199, 201, 205, 0.987);
-arrow-border-width: 0;
-arrow-border-color: transparent;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-boxpointer-gap: 6px;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.35);
}
.emoji-page .keyboard-key {

View File

@@ -1,13 +1,14 @@
/* On-screen Keyboard */
$key_size: 1.2em;
$key_border_radius: $base_radius + 3px;
$default_key_bg_color: if($variant=='light', $base, lighten($base, 2%));
$key_size: 1.2em;
$keyboard_bg_color: if($variant == 'light', #d8dade, #1d1d1d);
$key_border_radius: $base_radius + 3px;
$key_bg_color: if($variant == 'light', white, #707070);
$default_key_bg_color: if($variant == 'light', #adb3bc, #4b4b4b);
// draw keys using button function
#keyboard {
background-color: $scrim;
background-color: $keyboard_bg_color;
box-shadow: none;
.page-indicator {
@@ -33,11 +34,12 @@ $default_key_bg_color: if($variant=='light', $base, lighten($base, 2%));
font-weight: bold;
min-height: $key_size;
min-width: $key_size;
padding: 0 !important;
border-radius: $key_border_radius;
border: none;
color: $text-secondary;
background-color: $default_key_bg_color;
box-shadow: 0 1px 3px rgba(black, 0.15);
background-color: $key_bg_color;
box-shadow: inset 0 -1px if($variant == 'light', rgba(black, 0.35), rgba(black, 0.85));
&:focus, &:hover {
color: $text;
@@ -50,29 +52,28 @@ $default_key_bg_color: if($variant=='light', $base, lighten($base, 2%));
}
&:grayed { //FIXME
background-color: $background;
background-color: $default_key_bg_color;
color: $text-secondary;
}
&.default-key { // non-character keys
background-color: darken($background, 2%);
box-shadow: 0 2px 3px rgba(black, 0.15);
background-color: $default_key_bg_color;
box-shadow: inset 0 -1px if($variant == 'light', rgba(black, 0.2), rgba(black, 0.85));
&:focus, &:hover {
color: $text;
background-color: if($variant == 'light', darken($background, 8%), lighten($background, 8%));
background-color: if($variant == 'light', darken($default_key_bg_color, 5%), lighten($default_key_bg_color, 5%));
}
&:checked, &:active {
color: $text;
background-color: if($variant == 'light', darken($background, 15%), lighten($background, 15%));
background-color: if($variant == 'light', darken($default_key_bg_color, 12%), lighten($default_key_bg_color, 12%));
}
}
&.enter-key { // enter key is suggested-action
color: on($primary);
background-color: $primary;
box-shadow: 0 2px 3px rgba(black, 0.15);
&:focus, &:hover { color: on($primary); background-color: lighten($primary, 5%); }
&:checked, &:active { color: on($primary); background-color: darken($primary, 10%); }
@@ -90,13 +91,13 @@ $default_key_bg_color: if($variant=='light', $base, lighten($base, 2%));
.keyboard-subkeys { //long press on a key popup
color: inherit;
-arrow-border-radius: $menu_radius;
-arrow-background-color: $scrim;
-arrow-background-color: mix($text, $keyboard_bg_color, 10%);
-arrow-border-width: 0;
-arrow-border-color: transparent;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px;
box-shadow: 0 2px 5px rgba(black, 0.25);
-boxpointer-gap: $base_spacing;
box-shadow: inset 0 -1px if($variant == 'light', rgba(black, 0.35), rgba(black, 0.85));
}
// emoji