From 48369ed82a26eb6cd6f2ba152cb341ffab0c342b Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 23 Dec 2021 18:58:32 +0800 Subject: [PATCH] Update shell keyboard style --- .../shell-3-28/gnome-shell-dark.css | 28 ++++++++-------- .../shell-3-28/gnome-shell-light.css | 24 +++++++------- .../gnome-shell/shell-3-28/gnome-shell.css | 24 +++++++------- .../shell-40-0/gnome-shell-dark.css | 28 ++++++++-------- .../shell-40-0/gnome-shell-light.css | 24 +++++++------- .../gnome-shell/shell-40-0/gnome-shell.css | 24 +++++++------- src/sass/gnome-shell/common/_keyboard.scss | 33 ++++++++++--------- 7 files changed, 93 insertions(+), 92 deletions(-) diff --git a/src/main/gnome-shell/shell-3-28/gnome-shell-dark.css b/src/main/gnome-shell/shell-3-28/gnome-shell-dark.css index d2b9542a..c83b523e 100644 --- a/src/main/gnome-shell/shell-3-28/gnome-shell-dark.css +++ b/src/main/gnome-shell/shell-3-28/gnome-shell-dark.css @@ -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 { diff --git a/src/main/gnome-shell/shell-3-28/gnome-shell-light.css b/src/main/gnome-shell/shell-3-28/gnome-shell-light.css index 07b4325c..47ace0eb 100644 --- a/src/main/gnome-shell/shell-3-28/gnome-shell-light.css +++ b/src/main/gnome-shell/shell-3-28/gnome-shell-light.css @@ -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 { diff --git a/src/main/gnome-shell/shell-3-28/gnome-shell.css b/src/main/gnome-shell/shell-3-28/gnome-shell.css index 870eae42..ff068601 100644 --- a/src/main/gnome-shell/shell-3-28/gnome-shell.css +++ b/src/main/gnome-shell/shell-3-28/gnome-shell.css @@ -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 { diff --git a/src/main/gnome-shell/shell-40-0/gnome-shell-dark.css b/src/main/gnome-shell/shell-40-0/gnome-shell-dark.css index bb3969a6..a32212ca 100644 --- a/src/main/gnome-shell/shell-40-0/gnome-shell-dark.css +++ b/src/main/gnome-shell/shell-40-0/gnome-shell-dark.css @@ -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 { diff --git a/src/main/gnome-shell/shell-40-0/gnome-shell-light.css b/src/main/gnome-shell/shell-40-0/gnome-shell-light.css index d23d0946..b2a9abe8 100644 --- a/src/main/gnome-shell/shell-40-0/gnome-shell-light.css +++ b/src/main/gnome-shell/shell-40-0/gnome-shell-light.css @@ -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 { diff --git a/src/main/gnome-shell/shell-40-0/gnome-shell.css b/src/main/gnome-shell/shell-40-0/gnome-shell.css index 2a5a73f1..1f248f5d 100644 --- a/src/main/gnome-shell/shell-40-0/gnome-shell.css +++ b/src/main/gnome-shell/shell-40-0/gnome-shell.css @@ -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 { diff --git a/src/sass/gnome-shell/common/_keyboard.scss b/src/sass/gnome-shell/common/_keyboard.scss index d6599984..43e00f7f 100644 --- a/src/sass/gnome-shell/common/_keyboard.scss +++ b/src/sass/gnome-shell/common/_keyboard.scss @@ -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