diff --git a/Install b/Install index c0b7458..e1cadc6 100755 --- a/Install +++ b/Install @@ -66,6 +66,9 @@ for trans in '' '-solid' ; do toggle-on.svg \ more-results.svg \ checkbox.svg \ + key-enter.svg \ + key-shift-latched-uppercase.svg \ + key-shift-uppercase.svg \ ${themedir}/gnome-shell/assets cp -ur \ @@ -100,6 +103,18 @@ for trans in '' '-solid' ; do toggle-off${color}.svg \ ${themedir}/gnome-shell/assets/toggle-off.svg + cp -ur \ + key-hide${color}.svg \ + ${themedir}/gnome-shell/assets/key-hide.svg + + cp -ur \ + key-layout${color}.svg \ + ${themedir}/gnome-shell/assets/key-layout.svg + + cp -ur \ + key-shift${color}.svg \ + ${themedir}/gnome-shell/assets/key-shift.svg + cd ${themedir}/gnome-shell ln -s assets/no-events.svg no-events.svg ln -s assets/process-working.svg process-working.svg diff --git a/src/gnome-shell/assets/key-enter.svg b/src/gnome-shell/assets/key-enter.svg new file mode 100644 index 0000000..f4babc6 --- /dev/null +++ b/src/gnome-shell/assets/key-enter.svg @@ -0,0 +1,111 @@ + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + + diff --git a/src/gnome-shell/assets/key-hide-dark.svg b/src/gnome-shell/assets/key-hide-dark.svg new file mode 100644 index 0000000..a43b9d2 --- /dev/null +++ b/src/gnome-shell/assets/key-hide-dark.svg @@ -0,0 +1,114 @@ + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + + diff --git a/src/gnome-shell/assets/key-hide-light.svg b/src/gnome-shell/assets/key-hide-light.svg new file mode 100644 index 0000000..94e8bac --- /dev/null +++ b/src/gnome-shell/assets/key-hide-light.svg @@ -0,0 +1,116 @@ + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + + diff --git a/src/gnome-shell/assets/key-layout-dark.svg b/src/gnome-shell/assets/key-layout-dark.svg new file mode 100644 index 0000000..3a6cce7 --- /dev/null +++ b/src/gnome-shell/assets/key-layout-dark.svg @@ -0,0 +1,114 @@ + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + + diff --git a/src/gnome-shell/assets/key-layout-light.svg b/src/gnome-shell/assets/key-layout-light.svg new file mode 100644 index 0000000..8fade4e --- /dev/null +++ b/src/gnome-shell/assets/key-layout-light.svg @@ -0,0 +1,116 @@ + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + + diff --git a/src/gnome-shell/assets/key-shift-dark.svg b/src/gnome-shell/assets/key-shift-dark.svg new file mode 100644 index 0000000..5423b97 --- /dev/null +++ b/src/gnome-shell/assets/key-shift-dark.svg @@ -0,0 +1,108 @@ + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/src/gnome-shell/assets/key-shift-latched-uppercase.svg b/src/gnome-shell/assets/key-shift-latched-uppercase.svg new file mode 100644 index 0000000..bf493b7 --- /dev/null +++ b/src/gnome-shell/assets/key-shift-latched-uppercase.svg @@ -0,0 +1,110 @@ + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + + diff --git a/src/gnome-shell/assets/key-shift-light.svg b/src/gnome-shell/assets/key-shift-light.svg new file mode 100644 index 0000000..03b1863 --- /dev/null +++ b/src/gnome-shell/assets/key-shift-light.svg @@ -0,0 +1,110 @@ + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/src/gnome-shell/assets/key-shift-uppercase.svg b/src/gnome-shell/assets/key-shift-uppercase.svg new file mode 100644 index 0000000..683a03a --- /dev/null +++ b/src/gnome-shell/assets/key-shift-uppercase.svg @@ -0,0 +1,104 @@ + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/src/gnome-shell/gnome-shell-dark-solid.css b/src/gnome-shell/gnome-shell-dark-solid.css index 1bf4a5d..2f4a142 100644 --- a/src/gnome-shell/gnome-shell-dark-solid.css +++ b/src/gnome-shell/gnome-shell-dark-solid.css @@ -2369,58 +2369,41 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } /* On-screen Keyboard */ +.word-suggestions { + font-size: 14pt; + spacing: 12px; + min-height: 20pt; +} + #keyboard { - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.25); } .keyboard-layout { - spacing: 10px; - padding: 10px; -} - -.keyboard-row { - spacing: 15px; + padding: 4px; + spacing: 4px; } .keyboard-key { - min-height: 64px; - min-width: 64px; - font-size: 2em; - font-weight: 500; + min-height: 2em; + min-width: 2em; + font-size: 14pt; + font-weight: bold; border-radius: 8px; border: none; color: inherit; - color: rgba(255, 255, 255, 0.8); - background-color: #242424; - border-color: transparent; - box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24); - text-shadow: none; - icon-shadow: none; + background-color: #414141; + box-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key:focus { - color: rgba(255, 255, 255, 0.9); - text-shadow: none; - icon-shadow: none; - box-shadow: 0 0 transparent; +.keyboard-key:focus, .keyboard-key:hover { + color: rgba(255, 255, 255, 0.85); + background-color: #0062FF; } -.keyboard-key:hover, .keyboard-key:checked { - color: rgba(255, 255, 255, 0.9); - background-color: #242424; - border-color: transparent; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); - text-shadow: none; - icon-shadow: none; -} - -.keyboard-key:active { - color: rgba(255, 255, 255, 0.9); - background-color: rgba(93, 93, 93, 0.97); - border-color: transparent; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); - text-shadow: none; - icon-shadow: none; +.keyboard-key:checked, .keyboard-key:active { + color: rgba(255, 255, 255, 0.85); + background-color: #0056e0; } .keyboard-key:grayed { @@ -2429,18 +2412,69 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { border-color: rgba(0, 0, 0, 0.3); } +.keyboard-key.default-key { + background-size: 20px; +} + +.keyboard-key.default-key, .keyboard-key.enter-key, .keyboard-key.shift-key-lowercase, .keyboard-key.shift-key-uppercase, .keyboard-key.hide-key, .keyboard-key.layout-key { + background-color: #212121; + box-shadow: 0 1px rgba(0, 0, 0, 0.2); +} + +.keyboard-key.default-key:focus, .keyboard-key.default-key:hover, .keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover, .keyboard-key.shift-key-lowercase:focus, .keyboard-key.shift-key-lowercase:hover, .keyboard-key.shift-key-uppercase:focus, .keyboard-key.shift-key-uppercase:hover, .keyboard-key.hide-key:focus, .keyboard-key.hide-key:hover, .keyboard-key.layout-key:focus, .keyboard-key.layout-key:hover { + color: rgba(255, 255, 255, 0.8); + background-color: #414141; +} + +.keyboard-key.default-key:checked, .keyboard-key.default-key:active, .keyboard-key.enter-key:checked, .keyboard-key.enter-key:active, .keyboard-key.shift-key-lowercase:checked, .keyboard-key.shift-key-lowercase:active, .keyboard-key.shift-key-uppercase:checked, .keyboard-key.shift-key-uppercase:active, .keyboard-key.hide-key:checked, .keyboard-key.hide-key:active, .keyboard-key.layout-key:checked, .keyboard-key.layout-key:active { + color: rgba(255, 255, 255, 0.8); + background-color: #323232; +} + +.keyboard-key.enter-key { + background-color: #0046DB; + background-image: url("assets/key-enter.svg"); +} + +.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover { + color: rgba(255, 255, 255, 0.85); + background-color: #004ef5; +} + +.keyboard-key.enter-key:checked, .keyboard-key.enter-key:active { + color: rgba(255, 255, 255, 0.85); + background-color: #0036a8; +} + +.keyboard-key.shift-key-lowercase { + background-image: url("assets/key-shift.svg"); +} + +.keyboard-key.shift-key-uppercase { + background-image: url("assets/key-shift-uppercase.svg"); +} + +.keyboard-key.shift-key-uppercase:latched { + background-image: url("assets/key-shift-latched-uppercase.svg"); +} + +.keyboard-key.hide-key { + background-image: url("assets/key-hide.svg"); +} + +.keyboard-key.layout-key { + background-image: url("assets/key-layout.svg"); +} + .keyboard-subkeys { color: inherit; - padding: 5px; - -arrow-border-radius: 0; - -arrow-background-color: transparent; + -arrow-border-radius: 8px; + -arrow-background-color: rgba(0, 0, 0, 0.45); -arrow-border-width: 0; -arrow-border-color: transparent; - -arrow-base: 0; - -arrow-rise: 0; + -arrow-base: 20px; + -arrow-rise: 10px; -boxpointer-gap: 5px; - background-color: #242424; - border-radius: 8px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); } diff --git a/src/gnome-shell/gnome-shell-dark.css b/src/gnome-shell/gnome-shell-dark.css index 48e3708..991daed 100644 --- a/src/gnome-shell/gnome-shell-dark.css +++ b/src/gnome-shell/gnome-shell-dark.css @@ -2369,58 +2369,41 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } /* On-screen Keyboard */ +.word-suggestions { + font-size: 14pt; + spacing: 12px; + min-height: 20pt; +} + #keyboard { - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.25); } .keyboard-layout { - spacing: 10px; - padding: 10px; -} - -.keyboard-row { - spacing: 15px; + padding: 4px; + spacing: 4px; } .keyboard-key { - min-height: 64px; - min-width: 64px; - font-size: 2em; - font-weight: 500; + min-height: 2em; + min-width: 2em; + font-size: 14pt; + font-weight: bold; border-radius: 8px; border: none; color: inherit; - color: rgba(255, 255, 255, 0.8); - background-color: #242424; - border-color: transparent; - box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24); - text-shadow: none; - icon-shadow: none; + background-color: #414141; + box-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key:focus { - color: rgba(255, 255, 255, 0.9); - text-shadow: none; - icon-shadow: none; - box-shadow: 0 0 transparent; +.keyboard-key:focus, .keyboard-key:hover { + color: rgba(255, 255, 255, 0.85); + background-color: #0062FF; } -.keyboard-key:hover, .keyboard-key:checked { - color: rgba(255, 255, 255, 0.9); - background-color: #242424; - border-color: transparent; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); - text-shadow: none; - icon-shadow: none; -} - -.keyboard-key:active { - color: rgba(255, 255, 255, 0.9); - background-color: rgba(93, 93, 93, 0.97); - border-color: transparent; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); - text-shadow: none; - icon-shadow: none; +.keyboard-key:checked, .keyboard-key:active { + color: rgba(255, 255, 255, 0.85); + background-color: #0056e0; } .keyboard-key:grayed { @@ -2429,18 +2412,69 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { border-color: rgba(0, 0, 0, 0.3); } +.keyboard-key.default-key { + background-size: 20px; +} + +.keyboard-key.default-key, .keyboard-key.enter-key, .keyboard-key.shift-key-lowercase, .keyboard-key.shift-key-uppercase, .keyboard-key.hide-key, .keyboard-key.layout-key { + background-color: #212121; + box-shadow: 0 1px rgba(0, 0, 0, 0.2); +} + +.keyboard-key.default-key:focus, .keyboard-key.default-key:hover, .keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover, .keyboard-key.shift-key-lowercase:focus, .keyboard-key.shift-key-lowercase:hover, .keyboard-key.shift-key-uppercase:focus, .keyboard-key.shift-key-uppercase:hover, .keyboard-key.hide-key:focus, .keyboard-key.hide-key:hover, .keyboard-key.layout-key:focus, .keyboard-key.layout-key:hover { + color: rgba(255, 255, 255, 0.8); + background-color: #414141; +} + +.keyboard-key.default-key:checked, .keyboard-key.default-key:active, .keyboard-key.enter-key:checked, .keyboard-key.enter-key:active, .keyboard-key.shift-key-lowercase:checked, .keyboard-key.shift-key-lowercase:active, .keyboard-key.shift-key-uppercase:checked, .keyboard-key.shift-key-uppercase:active, .keyboard-key.hide-key:checked, .keyboard-key.hide-key:active, .keyboard-key.layout-key:checked, .keyboard-key.layout-key:active { + color: rgba(255, 255, 255, 0.8); + background-color: #323232; +} + +.keyboard-key.enter-key { + background-color: #0046DB; + background-image: url("assets/key-enter.svg"); +} + +.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover { + color: rgba(255, 255, 255, 0.85); + background-color: #004ef5; +} + +.keyboard-key.enter-key:checked, .keyboard-key.enter-key:active { + color: rgba(255, 255, 255, 0.85); + background-color: #0036a8; +} + +.keyboard-key.shift-key-lowercase { + background-image: url("assets/key-shift.svg"); +} + +.keyboard-key.shift-key-uppercase { + background-image: url("assets/key-shift-uppercase.svg"); +} + +.keyboard-key.shift-key-uppercase:latched { + background-image: url("assets/key-shift-latched-uppercase.svg"); +} + +.keyboard-key.hide-key { + background-image: url("assets/key-hide.svg"); +} + +.keyboard-key.layout-key { + background-image: url("assets/key-layout.svg"); +} + .keyboard-subkeys { color: inherit; - padding: 5px; - -arrow-border-radius: 0; - -arrow-background-color: transparent; + -arrow-border-radius: 8px; + -arrow-background-color: rgba(0, 0, 0, 0.45); -arrow-border-width: 0; -arrow-border-color: transparent; - -arrow-base: 0; - -arrow-rise: 0; + -arrow-base: 20px; + -arrow-rise: 10px; -boxpointer-gap: 5px; - background-color: #242424; - border-radius: 8px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); } diff --git a/src/gnome-shell/gnome-shell-light-solid.css b/src/gnome-shell/gnome-shell-light-solid.css index c56fd68..2fe60ce 100644 --- a/src/gnome-shell/gnome-shell-light-solid.css +++ b/src/gnome-shell/gnome-shell-light-solid.css @@ -2369,58 +2369,41 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } /* On-screen Keyboard */ +.word-suggestions { + font-size: 14pt; + spacing: 12px; + min-height: 20pt; +} + #keyboard { - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.25); } .keyboard-layout { - spacing: 10px; - padding: 10px; -} - -.keyboard-row { - spacing: 15px; + padding: 4px; + spacing: 4px; } .keyboard-key { - min-height: 64px; - min-width: 64px; - font-size: 2em; - font-weight: 500; + min-height: 2em; + min-width: 2em; + font-size: 14pt; + font-weight: bold; border-radius: 8px; border: none; color: inherit; - color: rgba(0, 0, 0, 0.62); - background-color: #ffffff; - border-color: transparent; - box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24); - text-shadow: none; - icon-shadow: none; + background-color: #FAFAFA; + box-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key:focus { - color: rgba(0, 0, 0, 0.87); - text-shadow: none; - icon-shadow: none; - box-shadow: 0 0 transparent; +.keyboard-key:focus, .keyboard-key:hover { + color: rgba(255, 255, 255, 0.85); + background-color: #0e6bff; } -.keyboard-key:hover, .keyboard-key:checked { - color: rgba(0, 0, 0, 0.87); - background-color: #ffffff; - border-color: transparent; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); - text-shadow: none; - icon-shadow: none; -} - -.keyboard-key:active { - color: rgba(0, 0, 0, 0.87); - background-color: rgba(192, 192, 192, 0.961); - border-color: transparent; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); - text-shadow: none; - icon-shadow: none; +.keyboard-key:checked, .keyboard-key:active { + color: rgba(255, 255, 255, 0.85); + background-color: #005cee; } .keyboard-key:grayed { @@ -2429,18 +2412,69 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { border-color: rgba(0, 0, 0, 0.3); } +.keyboard-key.default-key { + background-size: 20px; +} + +.keyboard-key.default-key, .keyboard-key.enter-key, .keyboard-key.shift-key-lowercase, .keyboard-key.shift-key-uppercase, .keyboard-key.hide-key, .keyboard-key.layout-key { + background-color: #E0E0E0; + box-shadow: 0 1px rgba(0, 0, 0, 0.2); +} + +.keyboard-key.default-key:focus, .keyboard-key.default-key:hover, .keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover, .keyboard-key.shift-key-lowercase:focus, .keyboard-key.shift-key-lowercase:hover, .keyboard-key.shift-key-uppercase:focus, .keyboard-key.shift-key-uppercase:hover, .keyboard-key.hide-key:focus, .keyboard-key.hide-key:hover, .keyboard-key.layout-key:focus, .keyboard-key.layout-key:hover { + color: rgba(0, 0, 0, 0.62); + background-color: #FAFAFA; +} + +.keyboard-key.default-key:checked, .keyboard-key.default-key:active, .keyboard-key.enter-key:checked, .keyboard-key.enter-key:active, .keyboard-key.shift-key-lowercase:checked, .keyboard-key.shift-key-lowercase:active, .keyboard-key.shift-key-uppercase:checked, .keyboard-key.shift-key-uppercase:active, .keyboard-key.hide-key:checked, .keyboard-key.hide-key:active, .keyboard-key.layout-key:checked, .keyboard-key.layout-key:active { + color: rgba(0, 0, 0, 0.62); + background-color: #ebebeb; +} + +.keyboard-key.enter-key { + background-color: #0046DB; + background-image: url("assets/key-enter.svg"); +} + +.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover { + color: rgba(255, 255, 255, 0.85); + background-color: #004ef5; +} + +.keyboard-key.enter-key:checked, .keyboard-key.enter-key:active { + color: rgba(255, 255, 255, 0.85); + background-color: #0036a8; +} + +.keyboard-key.shift-key-lowercase { + background-image: url("assets/key-shift.svg"); +} + +.keyboard-key.shift-key-uppercase { + background-image: url("assets/key-shift-uppercase.svg"); +} + +.keyboard-key.shift-key-uppercase:latched { + background-image: url("assets/key-shift-latched-uppercase.svg"); +} + +.keyboard-key.hide-key { + background-image: url("assets/key-hide.svg"); +} + +.keyboard-key.layout-key { + background-image: url("assets/key-layout.svg"); +} + .keyboard-subkeys { color: inherit; - padding: 5px; - -arrow-border-radius: 0; - -arrow-background-color: transparent; + -arrow-border-radius: 8px; + -arrow-background-color: rgba(0, 0, 0, 0.45); -arrow-border-width: 0; -arrow-border-color: transparent; - -arrow-base: 0; - -arrow-rise: 0; + -arrow-base: 20px; + -arrow-rise: 10px; -boxpointer-gap: 5px; - background-color: #ffffff; - border-radius: 8px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); } diff --git a/src/gnome-shell/gnome-shell-light.css b/src/gnome-shell/gnome-shell-light.css index 4adb3bd..8614e7b 100644 --- a/src/gnome-shell/gnome-shell-light.css +++ b/src/gnome-shell/gnome-shell-light.css @@ -2369,58 +2369,41 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } /* On-screen Keyboard */ +.word-suggestions { + font-size: 14pt; + spacing: 12px; + min-height: 20pt; +} + #keyboard { - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.25); } .keyboard-layout { - spacing: 10px; - padding: 10px; -} - -.keyboard-row { - spacing: 15px; + padding: 4px; + spacing: 4px; } .keyboard-key { - min-height: 64px; - min-width: 64px; - font-size: 2em; - font-weight: 500; + min-height: 2em; + min-width: 2em; + font-size: 14pt; + font-weight: bold; border-radius: 8px; border: none; color: inherit; - color: rgba(0, 0, 0, 0.62); - background-color: #ffffff; - border-color: transparent; - box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24); - text-shadow: none; - icon-shadow: none; + background-color: #FAFAFA; + box-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key:focus { - color: rgba(0, 0, 0, 0.87); - text-shadow: none; - icon-shadow: none; - box-shadow: 0 0 transparent; +.keyboard-key:focus, .keyboard-key:hover { + color: rgba(255, 255, 255, 0.85); + background-color: #0e6bff; } -.keyboard-key:hover, .keyboard-key:checked { - color: rgba(0, 0, 0, 0.87); - background-color: #ffffff; - border-color: transparent; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); - text-shadow: none; - icon-shadow: none; -} - -.keyboard-key:active { - color: rgba(0, 0, 0, 0.87); - background-color: rgba(192, 192, 192, 0.961); - border-color: transparent; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); - text-shadow: none; - icon-shadow: none; +.keyboard-key:checked, .keyboard-key:active { + color: rgba(255, 255, 255, 0.85); + background-color: #005cee; } .keyboard-key:grayed { @@ -2429,18 +2412,69 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { border-color: rgba(0, 0, 0, 0.3); } +.keyboard-key.default-key { + background-size: 20px; +} + +.keyboard-key.default-key, .keyboard-key.enter-key, .keyboard-key.shift-key-lowercase, .keyboard-key.shift-key-uppercase, .keyboard-key.hide-key, .keyboard-key.layout-key { + background-color: #E0E0E0; + box-shadow: 0 1px rgba(0, 0, 0, 0.2); +} + +.keyboard-key.default-key:focus, .keyboard-key.default-key:hover, .keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover, .keyboard-key.shift-key-lowercase:focus, .keyboard-key.shift-key-lowercase:hover, .keyboard-key.shift-key-uppercase:focus, .keyboard-key.shift-key-uppercase:hover, .keyboard-key.hide-key:focus, .keyboard-key.hide-key:hover, .keyboard-key.layout-key:focus, .keyboard-key.layout-key:hover { + color: rgba(0, 0, 0, 0.62); + background-color: #FAFAFA; +} + +.keyboard-key.default-key:checked, .keyboard-key.default-key:active, .keyboard-key.enter-key:checked, .keyboard-key.enter-key:active, .keyboard-key.shift-key-lowercase:checked, .keyboard-key.shift-key-lowercase:active, .keyboard-key.shift-key-uppercase:checked, .keyboard-key.shift-key-uppercase:active, .keyboard-key.hide-key:checked, .keyboard-key.hide-key:active, .keyboard-key.layout-key:checked, .keyboard-key.layout-key:active { + color: rgba(0, 0, 0, 0.62); + background-color: #ebebeb; +} + +.keyboard-key.enter-key { + background-color: #0046DB; + background-image: url("assets/key-enter.svg"); +} + +.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover { + color: rgba(255, 255, 255, 0.85); + background-color: #004ef5; +} + +.keyboard-key.enter-key:checked, .keyboard-key.enter-key:active { + color: rgba(255, 255, 255, 0.85); + background-color: #0036a8; +} + +.keyboard-key.shift-key-lowercase { + background-image: url("assets/key-shift.svg"); +} + +.keyboard-key.shift-key-uppercase { + background-image: url("assets/key-shift-uppercase.svg"); +} + +.keyboard-key.shift-key-uppercase:latched { + background-image: url("assets/key-shift-latched-uppercase.svg"); +} + +.keyboard-key.hide-key { + background-image: url("assets/key-hide.svg"); +} + +.keyboard-key.layout-key { + background-image: url("assets/key-layout.svg"); +} + .keyboard-subkeys { color: inherit; - padding: 5px; - -arrow-border-radius: 0; - -arrow-background-color: transparent; + -arrow-border-radius: 8px; + -arrow-background-color: rgba(0, 0, 0, 0.45); -arrow-border-width: 0; -arrow-border-color: transparent; - -arrow-base: 0; - -arrow-rise: 0; + -arrow-base: 20px; + -arrow-rise: 10px; -boxpointer-gap: 5px; - background-color: #ffffff; - border-radius: 8px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345); } diff --git a/src/gnome-shell/sass/_colors.scss b/src/gnome-shell/sass/_colors.scss index e2a3a21..d1ae4c8 100644 --- a/src/gnome-shell/sass/_colors.scss +++ b/src/gnome-shell/sass/_colors.scss @@ -44,6 +44,8 @@ $alt_base_color: if($variant =='dark', lighten($base_color, 25%), darken($base_c $bg_color: rgba($black, $middle_opacity); $alt_bg_color: rgba($black, $lower_opacity); $inverse_bg_color: rgba($inverse_fg_color, 0.13); +$keyboard_bg_color: if($variant == 'light', $grey_50, fade($grey_700)); // for gnome-shell keyboard +$alt_keyboard_bg_color: if($variant == 'light', $grey_300, fade($grey_900)); // for gnome-shell keyboard // Misc colors diff --git a/src/gnome-shell/sass/_common.scss b/src/gnome-shell/sass/_common.scss index 8e619fe..6f3ebad 100644 --- a/src/gnome-shell/sass/_common.scss +++ b/src/gnome-shell/sass/_common.scss @@ -1900,49 +1900,85 @@ $slider_color: if($variant == 'light', $accent_color, white); //Keyboard /* On-screen Keyboard */ +.word-suggestions { + font-size: 14pt; + spacing: 12px; + min-height: 20pt; +} #keyboard { - background-color: $alt_bg_color; + background-color: rgba(black, 0.25); } .keyboard-layout { - spacing: 10px; - padding: 10px; + padding: 4px; + spacing: 4px; } - .keyboard-row { spacing: 15px; } +// .keyboard-row { spacing: 15px; } .keyboard-key { - min-height: $medium_size * 2; - min-width: $medium_size * 2; - font-size: 2em; - font-weight: 500; + min-height: 2em; + min-width: 2em; + font-size: 14pt; + font-weight: bold; border-radius: $bt_radius; border: none; color: inherit; - @include button(normal); - &:focus { @include button(focus); } - &:hover,&:checked { @include button(hover); } - &:active { @include button(active);} + background-color: $keyboard_bg_color; + box-shadow: 0 1px rgba($black, 0.2); + &:focus, &:hover { color: $inverse_fg_color; background-color: $accent_color; } + &:checked, &:active { color: $inverse_fg_color; background-color: darken($accent_color, 6%); } &:grayed { //FIXME background-color: $alt_bg_color; color: $inverse_fg_color; border-color: $alt_bg_color; } + + &.default-key { background-size: 20px; } // backspace button + &.default-key, + &.enter-key, + &.shift-key-lowercase, + &.shift-key-uppercase, + &.hide-key, + &.layout-key { + background-color: $alt_keyboard_bg_color; + box-shadow: 0 1px rgba($black, 0.2); + &:focus, &:hover { color: $button_fg_color; background-color: $keyboard_bg_color; } + &:checked, &:active { color: $button_fg_color; background-color: darken($keyboard_bg_color, 6%); } + } + &.enter-key { + background-color: $primary_color; + background-image: url("assets/key-enter.svg"); + &:focus, &:hover { color: $inverse_fg_color; background-color: lighten($primary_color, 5%); } + &:checked, &:active { color: $inverse_fg_color; background-color: darken($primary_color, 10%); } + } + &.shift-key-lowercase { + background-image: url("assets/key-shift.svg"); + } + &.shift-key-uppercase { + background-image: url("assets/key-shift-uppercase.svg"); + } + &.shift-key-uppercase:latched { + background-image: url("assets/key-shift-latched-uppercase.svg"); + } + &.hide-key { + background-image: url("assets/key-hide.svg"); + } + &.layout-key { + background-image: url("assets/key-layout.svg"); + } } .keyboard-subkeys { //long press on a key popup color: inherit; - padding: 5px; - -arrow-border-radius: 0; - -arrow-background-color: transparent; + -arrow-border-radius: $bt_radius; + -arrow-background-color: rgba(black, 0.45); -arrow-border-width: 0; -arrow-border-color: transparent; - -arrow-base: 0; - -arrow-rise: 0; + -arrow-base: 20px; + -arrow-rise: 10px; -boxpointer-gap: 5px; - background-color: $base_color; - border-radius: $bt_radius; box-shadow: $shadow_2; }