From d47942587a8c053dda342a4a1c1867c26d35541d Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Sat, 26 Dec 2020 21:44:54 +0800 Subject: [PATCH] Fixed GDM theme issues --- README.md | 6 +- .../gnome-shell/common-assets/toggle-off.svg | 142 ++------------ .../gnome-shell/common-assets/toggle-on.svg | 28 +-- src/main/gnome-shell/gnome-shell-dark-alt.css | 119 ++++++------ .../gnome-shell-dark-solid-alt.css | 119 ++++++------ .../gnome-shell/gnome-shell-dark-solid.css | 119 ++++++------ src/main/gnome-shell/gnome-shell-dark.css | 119 ++++++------ .../gnome-shell/gnome-shell-light-alt.css | 133 +++++++------ .../gnome-shell-light-solid-alt.css | 137 ++++++++------ .../gnome-shell/gnome-shell-light-solid.css | 137 ++++++++------ src/main/gnome-shell/gnome-shell-light.css | 133 +++++++------ src/main/gtk-3.0/gtk-dark-solid.css | 73 ++++---- src/main/gtk-3.0/gtk-dark.css | 73 ++++---- src/main/gtk-3.0/gtk-light-solid.css | 73 ++++---- src/main/gtk-3.0/gtk-light.css | 73 ++++---- src/sass/_colors.scss | 6 +- src/sass/gnome-shell/_common.scss | 120 ++++++------ src/sass/gnome-shell/_drawing.scss | 24 +++ src/sass/gtk/_common.scss | 176 +++++------------- src/sass/gtk/_drawing.scss | 16 -- 20 files changed, 866 insertions(+), 960 deletions(-) diff --git a/README.md b/README.md index 7f56171d..61837d1f 100644 --- a/README.md +++ b/README.md @@ -66,11 +66,11 @@ then you can run: ( `dialog` is required, install it first! ) If you want to install GDM theme! then you can run: - ./install.sh -g (install default dark version) + sudo ./install.sh -g (install default dark version) - ./install.sh -g -c light (install light version) + sudo ./install.sh -g -c light (install light version) - ./install.sh -g -r (remove installed GDM theme) + sudo ./install.sh -g -r (remove installed GDM theme) ![2](pictures/install-tip-02.png) diff --git a/src/assets/gnome-shell/common-assets/toggle-off.svg b/src/assets/gnome-shell/common-assets/toggle-off.svg index 571ff012..2eef9775 100644 --- a/src/assets/gnome-shell/common-assets/toggle-off.svg +++ b/src/assets/gnome-shell/common-assets/toggle-off.svg @@ -1,123 +1,21 @@ - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/gnome-shell/common-assets/toggle-on.svg b/src/assets/gnome-shell/common-assets/toggle-on.svg index 7fdefdc3..a99c2f65 100644 --- a/src/assets/gnome-shell/common-assets/toggle-on.svg +++ b/src/assets/gnome-shell/common-assets/toggle-on.svg @@ -1,17 +1,19 @@ - + - - + + + + + + + + + - - - - - - - - - - + + + + + diff --git a/src/main/gnome-shell/gnome-shell-dark-alt.css b/src/main/gnome-shell/gnome-shell-dark-alt.css index d97de203..4fb6b870 100644 --- a/src/main/gnome-shell/gnome-shell-dark-alt.css +++ b/src/main/gnome-shell/gnome-shell-dark-alt.css @@ -118,6 +118,7 @@ StEntry:focus { } StEntry:insensitive { + background-color: rgba(255, 255, 255, 0.05); color: rgba(222, 222, 222, 0.35); } @@ -918,7 +919,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { spacing-columns: 1em; } -/* Popovers/Menus */ .candidate-popup-boxpointer, .popup-menu .popup-menu-content, .modal-dialog { background-color: rgba(36, 36, 36, 0.95); border-radius: 12px; @@ -928,46 +928,20 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu { min-width: 12em; color: #afafaf; - padding: 0 0; -} - -.popup-menu .popup-sub-menu { - background-color: rgba(255, 255, 255, 0.15); - border-radius: 0 0 8px 8px; - border: none; - box-shadow: none; - margin: 0 6px; - transition-duration: 0ms; -} - -.popup-menu .popup-sub-menu .popup-menu-item { - margin: 0; - border-radius: 8px; -} - -.popup-menu .popup-sub-menu .popup-menu-item:hover { - color: white; - background-color: #0860f2; -} - -.popup-menu .popup-sub-menu .popup-menu-item:active { - color: white; - background-color: #1366f1; -} - -.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { - border-radius: 0 0 8px 8px; + padding: 0 0 !important; } .popup-menu .popup-menu-content { - padding: 6px 0; + padding: 6px 0 !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25); - margin: 4px 12px 20px; + border: 1px solid rgba(0, 0, 0, 0.75); + margin: 4px 8px !important; } .popup-menu .popup-menu-item { spacing: 12px; - padding: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; color: #afafaf; text-shadow: none; border-radius: 8px; @@ -976,13 +950,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-menu .popup-menu-item:ltr { - padding-right: 1.5em; - padding-left: 0; + padding-right: 2em !important; + padding-left: 0 !important; } .popup-menu .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.5em; + padding-right: 0 !important; + padding-left: 2em !important; } .popup-menu .popup-menu-item:checked { @@ -1023,6 +997,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { color: rgba(222, 222, 222, 0.35); } +.popup-menu .popup-sub-menu { + background-color: rgba(255, 255, 255, 0.15); + border-radius: 0 0 8px 8px; + border: none; + box-shadow: none; + margin: 0 6px; + transition-duration: 0ms; +} + +.popup-menu .popup-sub-menu .popup-menu-item { + margin: 0; + border-radius: 8px; +} + +.popup-menu .popup-sub-menu .popup-menu-item:hover { + color: white; + background-color: #0860f2; +} + +.popup-menu .popup-sub-menu .popup-menu-item:active { + color: white; + background-color: #1366f1; +} + +.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { + border-radius: 0 0 8px 8px; +} + .popup-menu .popup-inactive-menu-item { color: #afafaf; } @@ -1070,16 +1072,22 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-separator-menu-item { - margin: 0; + margin: 0 0; padding: 0 0; background: none; border: none; } .popup-separator-menu-item .popup-separator-menu-item-separator { - height: 0; - background: none; - padding: 0; + height: 1px; + margin: 0 0; + background-color: rgba(255, 255, 255, 0.12); + padding: 0 0; +} + +.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { + padding: 0 0; + margin: 0 64px 0 0; } .system-switch-user-submenu-icon.user-icon { @@ -1193,7 +1201,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { -barlevel-overdrive-color: #f8464c; -barlevel-overdrive-separator-width: 2px; -barlevel-border-width: 0; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } .osd-window .level-bar { @@ -3245,25 +3253,27 @@ StWidget.focused .app-well-app-running-dot { } .login-dialog StEntry { - selection-background-color: rgba(255, 255, 255, 0.1); - selected-background-color: rgba(255, 255, 255, 0.1); - selected-color: #0860f2; + selection-background-color: #0860f2; + selected-background-color: #0860f2; + selected-color: white; padding: 4px 8px; min-height: 20px; - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-radius: 100px; - border: 2px solid transparent; + border: none; box-shadow: none; border-radius: 9999px; } .login-dialog StEntry:focus { - border: 2px solid #4d8ef9; - box-shadow: none; + border: none; + background-color: rgba(255, 255, 255, 0.2); } .login-dialog StEntry:insensitive { + border: none; color: rgba(222, 222, 222, 0.35); + background-color: rgba(255, 255, 255, 0.05); } .login-dialog .modal-dialog-button-box { @@ -3346,8 +3356,8 @@ StWidget.focused .app-well-app-running-dot { border-radius: 100px; width: 32px; height: 32px; - border-color: rgba(51, 51, 51, 0.3); - background-color: rgba(51, 51, 51, 0.3); + border: none; + background-color: rgba(255, 255, 255, 0.1); } .login-dialog .cancel-button StIcon, @@ -3362,8 +3372,11 @@ StWidget.focused .app-well-app-running-dot { .caps-lock-warning-label { text-align: center; - padding-bottom: 8px; - color: #F27835; + margin-bottom: 8px; + padding: 2px 6px; + color: white; + background-color: #F27835; + border-radius: 9999px; } .login-dialog-logo-bin { diff --git a/src/main/gnome-shell/gnome-shell-dark-solid-alt.css b/src/main/gnome-shell/gnome-shell-dark-solid-alt.css index 2b0e746e..b5b9dcf3 100644 --- a/src/main/gnome-shell/gnome-shell-dark-solid-alt.css +++ b/src/main/gnome-shell/gnome-shell-dark-solid-alt.css @@ -118,6 +118,7 @@ StEntry:focus { } StEntry:insensitive { + background-color: rgba(255, 255, 255, 0.05); color: rgba(222, 222, 222, 0.35); } @@ -918,7 +919,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { spacing-columns: 1em; } -/* Popovers/Menus */ .candidate-popup-boxpointer, .popup-menu .popup-menu-content, .modal-dialog { background-color: #242424; border-radius: 12px; @@ -928,46 +928,20 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu { min-width: 12em; color: #afafaf; - padding: 0 0; -} - -.popup-menu .popup-sub-menu { - background-color: rgba(255, 255, 255, 0.15); - border-radius: 0 0 8px 8px; - border: none; - box-shadow: none; - margin: 0 6px; - transition-duration: 0ms; -} - -.popup-menu .popup-sub-menu .popup-menu-item { - margin: 0; - border-radius: 8px; -} - -.popup-menu .popup-sub-menu .popup-menu-item:hover { - color: white; - background-color: #0860f2; -} - -.popup-menu .popup-sub-menu .popup-menu-item:active { - color: white; - background-color: #1366f1; -} - -.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { - border-radius: 0 0 8px 8px; + padding: 0 0 !important; } .popup-menu .popup-menu-content { - padding: 6px 0; + padding: 6px 0 !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25); - margin: 4px 12px 20px; + border: 1px solid rgba(0, 0, 0, 0.75); + margin: 4px 8px !important; } .popup-menu .popup-menu-item { spacing: 12px; - padding: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; color: #afafaf; text-shadow: none; border-radius: 8px; @@ -976,13 +950,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-menu .popup-menu-item:ltr { - padding-right: 1.5em; - padding-left: 0; + padding-right: 2em !important; + padding-left: 0 !important; } .popup-menu .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.5em; + padding-right: 0 !important; + padding-left: 2em !important; } .popup-menu .popup-menu-item:checked { @@ -1023,6 +997,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { color: rgba(222, 222, 222, 0.35); } +.popup-menu .popup-sub-menu { + background-color: rgba(255, 255, 255, 0.15); + border-radius: 0 0 8px 8px; + border: none; + box-shadow: none; + margin: 0 6px; + transition-duration: 0ms; +} + +.popup-menu .popup-sub-menu .popup-menu-item { + margin: 0; + border-radius: 8px; +} + +.popup-menu .popup-sub-menu .popup-menu-item:hover { + color: white; + background-color: #0860f2; +} + +.popup-menu .popup-sub-menu .popup-menu-item:active { + color: white; + background-color: #1366f1; +} + +.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { + border-radius: 0 0 8px 8px; +} + .popup-menu .popup-inactive-menu-item { color: #afafaf; } @@ -1070,16 +1072,22 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-separator-menu-item { - margin: 0; + margin: 0 0; padding: 0 0; background: none; border: none; } .popup-separator-menu-item .popup-separator-menu-item-separator { - height: 0; - background: none; - padding: 0; + height: 1px; + margin: 0 0; + background-color: rgba(255, 255, 255, 0.12); + padding: 0 0; +} + +.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { + padding: 0 0; + margin: 0 64px 0 0; } .system-switch-user-submenu-icon.user-icon { @@ -1193,7 +1201,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { -barlevel-overdrive-color: #f8464c; -barlevel-overdrive-separator-width: 2px; -barlevel-border-width: 0; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } .osd-window .level-bar { @@ -3245,25 +3253,27 @@ StWidget.focused .app-well-app-running-dot { } .login-dialog StEntry { - selection-background-color: rgba(255, 255, 255, 0.1); - selected-background-color: rgba(255, 255, 255, 0.1); - selected-color: #0860f2; + selection-background-color: #0860f2; + selected-background-color: #0860f2; + selected-color: white; padding: 4px 8px; min-height: 20px; - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-radius: 100px; - border: 2px solid transparent; + border: none; box-shadow: none; border-radius: 9999px; } .login-dialog StEntry:focus { - border: 2px solid #4d8ef9; - box-shadow: none; + border: none; + background-color: rgba(255, 255, 255, 0.2); } .login-dialog StEntry:insensitive { + border: none; color: rgba(222, 222, 222, 0.35); + background-color: rgba(255, 255, 255, 0.05); } .login-dialog .modal-dialog-button-box { @@ -3346,8 +3356,8 @@ StWidget.focused .app-well-app-running-dot { border-radius: 100px; width: 32px; height: 32px; - border-color: rgba(51, 51, 51, 0.3); - background-color: rgba(51, 51, 51, 0.3); + border: none; + background-color: rgba(255, 255, 255, 0.1); } .login-dialog .cancel-button StIcon, @@ -3362,8 +3372,11 @@ StWidget.focused .app-well-app-running-dot { .caps-lock-warning-label { text-align: center; - padding-bottom: 8px; - color: #F27835; + margin-bottom: 8px; + padding: 2px 6px; + color: white; + background-color: #F27835; + border-radius: 9999px; } .login-dialog-logo-bin { diff --git a/src/main/gnome-shell/gnome-shell-dark-solid.css b/src/main/gnome-shell/gnome-shell-dark-solid.css index 2b0e746e..b5b9dcf3 100644 --- a/src/main/gnome-shell/gnome-shell-dark-solid.css +++ b/src/main/gnome-shell/gnome-shell-dark-solid.css @@ -118,6 +118,7 @@ StEntry:focus { } StEntry:insensitive { + background-color: rgba(255, 255, 255, 0.05); color: rgba(222, 222, 222, 0.35); } @@ -918,7 +919,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { spacing-columns: 1em; } -/* Popovers/Menus */ .candidate-popup-boxpointer, .popup-menu .popup-menu-content, .modal-dialog { background-color: #242424; border-radius: 12px; @@ -928,46 +928,20 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu { min-width: 12em; color: #afafaf; - padding: 0 0; -} - -.popup-menu .popup-sub-menu { - background-color: rgba(255, 255, 255, 0.15); - border-radius: 0 0 8px 8px; - border: none; - box-shadow: none; - margin: 0 6px; - transition-duration: 0ms; -} - -.popup-menu .popup-sub-menu .popup-menu-item { - margin: 0; - border-radius: 8px; -} - -.popup-menu .popup-sub-menu .popup-menu-item:hover { - color: white; - background-color: #0860f2; -} - -.popup-menu .popup-sub-menu .popup-menu-item:active { - color: white; - background-color: #1366f1; -} - -.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { - border-radius: 0 0 8px 8px; + padding: 0 0 !important; } .popup-menu .popup-menu-content { - padding: 6px 0; + padding: 6px 0 !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25); - margin: 4px 12px 20px; + border: 1px solid rgba(0, 0, 0, 0.75); + margin: 4px 8px !important; } .popup-menu .popup-menu-item { spacing: 12px; - padding: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; color: #afafaf; text-shadow: none; border-radius: 8px; @@ -976,13 +950,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-menu .popup-menu-item:ltr { - padding-right: 1.5em; - padding-left: 0; + padding-right: 2em !important; + padding-left: 0 !important; } .popup-menu .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.5em; + padding-right: 0 !important; + padding-left: 2em !important; } .popup-menu .popup-menu-item:checked { @@ -1023,6 +997,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { color: rgba(222, 222, 222, 0.35); } +.popup-menu .popup-sub-menu { + background-color: rgba(255, 255, 255, 0.15); + border-radius: 0 0 8px 8px; + border: none; + box-shadow: none; + margin: 0 6px; + transition-duration: 0ms; +} + +.popup-menu .popup-sub-menu .popup-menu-item { + margin: 0; + border-radius: 8px; +} + +.popup-menu .popup-sub-menu .popup-menu-item:hover { + color: white; + background-color: #0860f2; +} + +.popup-menu .popup-sub-menu .popup-menu-item:active { + color: white; + background-color: #1366f1; +} + +.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { + border-radius: 0 0 8px 8px; +} + .popup-menu .popup-inactive-menu-item { color: #afafaf; } @@ -1070,16 +1072,22 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-separator-menu-item { - margin: 0; + margin: 0 0; padding: 0 0; background: none; border: none; } .popup-separator-menu-item .popup-separator-menu-item-separator { - height: 0; - background: none; - padding: 0; + height: 1px; + margin: 0 0; + background-color: rgba(255, 255, 255, 0.12); + padding: 0 0; +} + +.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { + padding: 0 0; + margin: 0 64px 0 0; } .system-switch-user-submenu-icon.user-icon { @@ -1193,7 +1201,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { -barlevel-overdrive-color: #f8464c; -barlevel-overdrive-separator-width: 2px; -barlevel-border-width: 0; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } .osd-window .level-bar { @@ -3245,25 +3253,27 @@ StWidget.focused .app-well-app-running-dot { } .login-dialog StEntry { - selection-background-color: rgba(255, 255, 255, 0.1); - selected-background-color: rgba(255, 255, 255, 0.1); - selected-color: #0860f2; + selection-background-color: #0860f2; + selected-background-color: #0860f2; + selected-color: white; padding: 4px 8px; min-height: 20px; - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-radius: 100px; - border: 2px solid transparent; + border: none; box-shadow: none; border-radius: 9999px; } .login-dialog StEntry:focus { - border: 2px solid #4d8ef9; - box-shadow: none; + border: none; + background-color: rgba(255, 255, 255, 0.2); } .login-dialog StEntry:insensitive { + border: none; color: rgba(222, 222, 222, 0.35); + background-color: rgba(255, 255, 255, 0.05); } .login-dialog .modal-dialog-button-box { @@ -3346,8 +3356,8 @@ StWidget.focused .app-well-app-running-dot { border-radius: 100px; width: 32px; height: 32px; - border-color: rgba(51, 51, 51, 0.3); - background-color: rgba(51, 51, 51, 0.3); + border: none; + background-color: rgba(255, 255, 255, 0.1); } .login-dialog .cancel-button StIcon, @@ -3362,8 +3372,11 @@ StWidget.focused .app-well-app-running-dot { .caps-lock-warning-label { text-align: center; - padding-bottom: 8px; - color: #F27835; + margin-bottom: 8px; + padding: 2px 6px; + color: white; + background-color: #F27835; + border-radius: 9999px; } .login-dialog-logo-bin { diff --git a/src/main/gnome-shell/gnome-shell-dark.css b/src/main/gnome-shell/gnome-shell-dark.css index d97de203..4fb6b870 100644 --- a/src/main/gnome-shell/gnome-shell-dark.css +++ b/src/main/gnome-shell/gnome-shell-dark.css @@ -118,6 +118,7 @@ StEntry:focus { } StEntry:insensitive { + background-color: rgba(255, 255, 255, 0.05); color: rgba(222, 222, 222, 0.35); } @@ -918,7 +919,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { spacing-columns: 1em; } -/* Popovers/Menus */ .candidate-popup-boxpointer, .popup-menu .popup-menu-content, .modal-dialog { background-color: rgba(36, 36, 36, 0.95); border-radius: 12px; @@ -928,46 +928,20 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu { min-width: 12em; color: #afafaf; - padding: 0 0; -} - -.popup-menu .popup-sub-menu { - background-color: rgba(255, 255, 255, 0.15); - border-radius: 0 0 8px 8px; - border: none; - box-shadow: none; - margin: 0 6px; - transition-duration: 0ms; -} - -.popup-menu .popup-sub-menu .popup-menu-item { - margin: 0; - border-radius: 8px; -} - -.popup-menu .popup-sub-menu .popup-menu-item:hover { - color: white; - background-color: #0860f2; -} - -.popup-menu .popup-sub-menu .popup-menu-item:active { - color: white; - background-color: #1366f1; -} - -.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { - border-radius: 0 0 8px 8px; + padding: 0 0 !important; } .popup-menu .popup-menu-content { - padding: 6px 0; + padding: 6px 0 !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25); - margin: 4px 12px 20px; + border: 1px solid rgba(0, 0, 0, 0.75); + margin: 4px 8px !important; } .popup-menu .popup-menu-item { spacing: 12px; - padding: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; color: #afafaf; text-shadow: none; border-radius: 8px; @@ -976,13 +950,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-menu .popup-menu-item:ltr { - padding-right: 1.5em; - padding-left: 0; + padding-right: 2em !important; + padding-left: 0 !important; } .popup-menu .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.5em; + padding-right: 0 !important; + padding-left: 2em !important; } .popup-menu .popup-menu-item:checked { @@ -1023,6 +997,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { color: rgba(222, 222, 222, 0.35); } +.popup-menu .popup-sub-menu { + background-color: rgba(255, 255, 255, 0.15); + border-radius: 0 0 8px 8px; + border: none; + box-shadow: none; + margin: 0 6px; + transition-duration: 0ms; +} + +.popup-menu .popup-sub-menu .popup-menu-item { + margin: 0; + border-radius: 8px; +} + +.popup-menu .popup-sub-menu .popup-menu-item:hover { + color: white; + background-color: #0860f2; +} + +.popup-menu .popup-sub-menu .popup-menu-item:active { + color: white; + background-color: #1366f1; +} + +.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { + border-radius: 0 0 8px 8px; +} + .popup-menu .popup-inactive-menu-item { color: #afafaf; } @@ -1070,16 +1072,22 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-separator-menu-item { - margin: 0; + margin: 0 0; padding: 0 0; background: none; border: none; } .popup-separator-menu-item .popup-separator-menu-item-separator { - height: 0; - background: none; - padding: 0; + height: 1px; + margin: 0 0; + background-color: rgba(255, 255, 255, 0.12); + padding: 0 0; +} + +.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { + padding: 0 0; + margin: 0 64px 0 0; } .system-switch-user-submenu-icon.user-icon { @@ -1193,7 +1201,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { -barlevel-overdrive-color: #f8464c; -barlevel-overdrive-separator-width: 2px; -barlevel-border-width: 0; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } .osd-window .level-bar { @@ -3245,25 +3253,27 @@ StWidget.focused .app-well-app-running-dot { } .login-dialog StEntry { - selection-background-color: rgba(255, 255, 255, 0.1); - selected-background-color: rgba(255, 255, 255, 0.1); - selected-color: #0860f2; + selection-background-color: #0860f2; + selected-background-color: #0860f2; + selected-color: white; padding: 4px 8px; min-height: 20px; - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-radius: 100px; - border: 2px solid transparent; + border: none; box-shadow: none; border-radius: 9999px; } .login-dialog StEntry:focus { - border: 2px solid #4d8ef9; - box-shadow: none; + border: none; + background-color: rgba(255, 255, 255, 0.2); } .login-dialog StEntry:insensitive { + border: none; color: rgba(222, 222, 222, 0.35); + background-color: rgba(255, 255, 255, 0.05); } .login-dialog .modal-dialog-button-box { @@ -3346,8 +3356,8 @@ StWidget.focused .app-well-app-running-dot { border-radius: 100px; width: 32px; height: 32px; - border-color: rgba(51, 51, 51, 0.3); - background-color: rgba(51, 51, 51, 0.3); + border: none; + background-color: rgba(255, 255, 255, 0.1); } .login-dialog .cancel-button StIcon, @@ -3362,8 +3372,11 @@ StWidget.focused .app-well-app-running-dot { .caps-lock-warning-label { text-align: center; - padding-bottom: 8px; - color: #F27835; + margin-bottom: 8px; + padding: 2px 6px; + color: white; + background-color: #F27835; + border-radius: 9999px; } .login-dialog-logo-bin { diff --git a/src/main/gnome-shell/gnome-shell-light-alt.css b/src/main/gnome-shell/gnome-shell-light-alt.css index d01f839a..62c7ac39 100644 --- a/src/main/gnome-shell/gnome-shell-light-alt.css +++ b/src/main/gnome-shell/gnome-shell-light-alt.css @@ -118,6 +118,7 @@ StEntry:focus { } StEntry:insensitive { + background-color: rgba(0, 0, 0, 0.05); color: rgba(36, 36, 36, 0.45); } @@ -198,23 +199,23 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { border-radius: 16px; -slider-height: 19px; -slider-background-color: rgba(0, 0, 0, 0.1); - -slider-border-color: rgba(0, 0, 0, 0.12); + -slider-border-color: rgba(0, 0, 0, 0.15); -slider-active-background-color: white; - -slider-active-border-color: rgba(0, 0, 0, 0.12); + -slider-active-border-color: rgba(0, 0, 0, 0.15); -slider-border-width: 1px; -slider-handle-radius: 10px; -slider-handle-border-width: 1px; - -slider-handle-border-color: rgba(0, 0, 0, 0.12); + -slider-handle-border-color: rgba(0, 0, 0, 0.15); -barlevel-height: 19px; -barlevel-background-color: rgba(0, 0, 0, 0.1); - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); -barlevel-active-background-color: white; - -barlevel-active-border-color: rgba(0, 0, 0, 0.12); + -barlevel-active-border-color: rgba(0, 0, 0, 0.15); -barlevel-overdrive-color: #f8464c; - -barlevel-overdrive-border-color: rgba(0, 0, 0, 0.12); + -barlevel-overdrive-border-color: rgba(0, 0, 0, 0.15); -barlevel-overdrive-separator-width: 0; -barlevel-border-width: 1px; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } /* Check Boxes */ @@ -918,7 +919,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { spacing-columns: 1em; } -/* Popovers/Menus */ .candidate-popup-boxpointer, .popup-menu .popup-menu-content, .modal-dialog { background-color: rgba(245, 245, 245, 0.95); border-radius: 12px; @@ -928,46 +928,20 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu { min-width: 12em; color: #424242; - padding: 0 0; -} - -.popup-menu .popup-sub-menu { - background-color: rgba(255, 255, 255, 0.75); - border-radius: 0 0 8px 8px; - border: none; - box-shadow: none; - margin: 0 6px; - transition-duration: 0ms; -} - -.popup-menu .popup-sub-menu .popup-menu-item { - margin: 0; - border-radius: 8px; -} - -.popup-menu .popup-sub-menu .popup-menu-item:hover { - color: white; - background-color: #0860f2; -} - -.popup-menu .popup-sub-menu .popup-menu-item:active { - color: white; - background-color: #095de8; -} - -.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { - border-radius: 0 0 8px 8px; + padding: 0 0 !important; } .popup-menu .popup-menu-content { - padding: 6px 0; + padding: 6px 0 !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25); - margin: 4px 12px 20px; + border: 1px solid rgba(0, 0, 0, 0); + margin: 4px 8px !important; } .popup-menu .popup-menu-item { spacing: 12px; - padding: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; color: #424242; text-shadow: none; border-radius: 8px; @@ -976,13 +950,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-menu .popup-menu-item:ltr { - padding-right: 1.5em; - padding-left: 0; + padding-right: 2em !important; + padding-left: 0 !important; } .popup-menu .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.5em; + padding-right: 0 !important; + padding-left: 2em !important; } .popup-menu .popup-menu-item:checked { @@ -1023,6 +997,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { color: rgba(36, 36, 36, 0.45); } +.popup-menu .popup-sub-menu { + background-color: rgba(255, 255, 255, 0.75); + border-radius: 0 0 8px 8px; + border: none; + box-shadow: none; + margin: 0 6px; + transition-duration: 0ms; +} + +.popup-menu .popup-sub-menu .popup-menu-item { + margin: 0; + border-radius: 8px; +} + +.popup-menu .popup-sub-menu .popup-menu-item:hover { + color: white; + background-color: #0860f2; +} + +.popup-menu .popup-sub-menu .popup-menu-item:active { + color: white; + background-color: #095de8; +} + +.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { + border-radius: 0 0 8px 8px; +} + .popup-menu .popup-inactive-menu-item { color: #424242; } @@ -1070,16 +1072,22 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-separator-menu-item { - margin: 0; + margin: 0 0; padding: 0 0; background: none; border: none; } .popup-separator-menu-item .popup-separator-menu-item-separator { - height: 0; - background: none; - padding: 0; + height: 1px; + margin: 0 0; + background-color: rgba(0, 0, 0, 0.12); + padding: 0 0; +} + +.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { + padding: 0 0; + margin: 0 64px 0 0; } .system-switch-user-submenu-icon.user-icon { @@ -1193,7 +1201,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { -barlevel-overdrive-color: #f8464c; -barlevel-overdrive-separator-width: 2px; -barlevel-border-width: 0; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } .osd-window .level-bar { @@ -3245,25 +3253,27 @@ StWidget.focused .app-well-app-running-dot { } .login-dialog StEntry { - selection-background-color: rgba(0, 0, 0, 0.2); - selected-background-color: rgba(0, 0, 0, 0.2); - selected-color: #0860f2; + selection-background-color: #0860f2; + selected-background-color: #0860f2; + selected-color: white; padding: 4px 8px; min-height: 20px; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; - border: 2px solid transparent; + border: none; box-shadow: none; border-radius: 9999px; } .login-dialog StEntry:focus { - border: 2px solid #4d8ef9; - box-shadow: none; + border: none; + background-color: rgba(0, 0, 0, 0.2); } .login-dialog StEntry:insensitive { + border: none; color: rgba(36, 36, 36, 0.45); + background-color: rgba(0, 0, 0, 0.05); } .login-dialog .modal-dialog-button-box { @@ -3346,8 +3356,8 @@ StWidget.focused .app-well-app-running-dot { border-radius: 100px; width: 32px; height: 32px; - border-color: rgba(245, 245, 245, 0.3); - background-color: rgba(245, 245, 245, 0.3); + border: none; + background-color: rgba(0, 0, 0, 0.1); } .login-dialog .cancel-button StIcon, @@ -3362,8 +3372,11 @@ StWidget.focused .app-well-app-running-dot { .caps-lock-warning-label { text-align: center; - padding-bottom: 8px; - color: #F27835; + margin-bottom: 8px; + padding: 2px 6px; + color: white; + background-color: #F27835; + border-radius: 9999px; } .login-dialog-logo-bin { diff --git a/src/main/gnome-shell/gnome-shell-light-solid-alt.css b/src/main/gnome-shell/gnome-shell-light-solid-alt.css index 407b7e33..002da078 100644 --- a/src/main/gnome-shell/gnome-shell-light-solid-alt.css +++ b/src/main/gnome-shell/gnome-shell-light-solid-alt.css @@ -118,6 +118,7 @@ StEntry:focus { } StEntry:insensitive { + background-color: rgba(0, 0, 0, 0.05); color: rgba(36, 36, 36, 0.45); } @@ -198,23 +199,23 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { border-radius: 16px; -slider-height: 19px; -slider-background-color: rgba(0, 0, 0, 0.1); - -slider-border-color: rgba(0, 0, 0, 0.12); + -slider-border-color: rgba(0, 0, 0, 0.15); -slider-active-background-color: white; - -slider-active-border-color: rgba(0, 0, 0, 0.12); + -slider-active-border-color: rgba(0, 0, 0, 0.15); -slider-border-width: 1px; -slider-handle-radius: 10px; -slider-handle-border-width: 1px; - -slider-handle-border-color: rgba(0, 0, 0, 0.12); + -slider-handle-border-color: rgba(0, 0, 0, 0.15); -barlevel-height: 19px; -barlevel-background-color: rgba(0, 0, 0, 0.1); - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); -barlevel-active-background-color: white; - -barlevel-active-border-color: rgba(0, 0, 0, 0.12); + -barlevel-active-border-color: rgba(0, 0, 0, 0.15); -barlevel-overdrive-color: #f8464c; - -barlevel-overdrive-border-color: rgba(0, 0, 0, 0.12); + -barlevel-overdrive-border-color: rgba(0, 0, 0, 0.15); -barlevel-overdrive-separator-width: 0; -barlevel-border-width: 1px; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } /* Check Boxes */ @@ -918,9 +919,8 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { spacing-columns: 1em; } -/* Popovers/Menus */ .candidate-popup-boxpointer, .popup-menu .popup-menu-content, .modal-dialog { - background-color: #f5f5f5; + background-color: whitesmoke; border-radius: 12px; border: none; } @@ -928,46 +928,20 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu { min-width: 12em; color: #424242; - padding: 0 0; -} - -.popup-menu .popup-sub-menu { - background-color: rgba(255, 255, 255, 0.75); - border-radius: 0 0 8px 8px; - border: none; - box-shadow: none; - margin: 0 6px; - transition-duration: 0ms; -} - -.popup-menu .popup-sub-menu .popup-menu-item { - margin: 0; - border-radius: 8px; -} - -.popup-menu .popup-sub-menu .popup-menu-item:hover { - color: white; - background-color: #0860f2; -} - -.popup-menu .popup-sub-menu .popup-menu-item:active { - color: white; - background-color: #095de8; -} - -.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { - border-radius: 0 0 8px 8px; + padding: 0 0 !important; } .popup-menu .popup-menu-content { - padding: 6px 0; + padding: 6px 0 !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25); - margin: 4px 12px 20px; + border: 1px solid rgba(0, 0, 0, 0); + margin: 4px 8px !important; } .popup-menu .popup-menu-item { spacing: 12px; - padding: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; color: #424242; text-shadow: none; border-radius: 8px; @@ -976,13 +950,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-menu .popup-menu-item:ltr { - padding-right: 1.5em; - padding-left: 0; + padding-right: 2em !important; + padding-left: 0 !important; } .popup-menu .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.5em; + padding-right: 0 !important; + padding-left: 2em !important; } .popup-menu .popup-menu-item:checked { @@ -1023,6 +997,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { color: rgba(36, 36, 36, 0.45); } +.popup-menu .popup-sub-menu { + background-color: rgba(255, 255, 255, 0.75); + border-radius: 0 0 8px 8px; + border: none; + box-shadow: none; + margin: 0 6px; + transition-duration: 0ms; +} + +.popup-menu .popup-sub-menu .popup-menu-item { + margin: 0; + border-radius: 8px; +} + +.popup-menu .popup-sub-menu .popup-menu-item:hover { + color: white; + background-color: #0860f2; +} + +.popup-menu .popup-sub-menu .popup-menu-item:active { + color: white; + background-color: #095de8; +} + +.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { + border-radius: 0 0 8px 8px; +} + .popup-menu .popup-inactive-menu-item { color: #424242; } @@ -1061,7 +1063,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .candidate-popup-boxpointer { -arrow-border-radius: 2px; - -arrow-background-color: #f5f5f5; + -arrow-background-color: whitesmoke; -arrow-border-width: 0; -arrow-border-color: transparent; -arrow-base: 5px; @@ -1070,16 +1072,22 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-separator-menu-item { - margin: 0; + margin: 0 0; padding: 0 0; background: none; border: none; } .popup-separator-menu-item .popup-separator-menu-item-separator { - height: 0; - background: none; - padding: 0; + height: 1px; + margin: 0 0; + background-color: rgba(0, 0, 0, 0.12); + padding: 0 0; +} + +.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { + padding: 0 0; + margin: 0 64px 0 0; } .system-switch-user-submenu-icon.user-icon { @@ -1193,7 +1201,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { -barlevel-overdrive-color: #f8464c; -barlevel-overdrive-separator-width: 2px; -barlevel-border-width: 0; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } .osd-window .level-bar { @@ -3245,25 +3253,27 @@ StWidget.focused .app-well-app-running-dot { } .login-dialog StEntry { - selection-background-color: rgba(0, 0, 0, 0.2); - selected-background-color: rgba(0, 0, 0, 0.2); - selected-color: #0860f2; + selection-background-color: #0860f2; + selected-background-color: #0860f2; + selected-color: white; padding: 4px 8px; min-height: 20px; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; - border: 2px solid transparent; + border: none; box-shadow: none; border-radius: 9999px; } .login-dialog StEntry:focus { - border: 2px solid #4d8ef9; - box-shadow: none; + border: none; + background-color: rgba(0, 0, 0, 0.2); } .login-dialog StEntry:insensitive { + border: none; color: rgba(36, 36, 36, 0.45); + background-color: rgba(0, 0, 0, 0.05); } .login-dialog .modal-dialog-button-box { @@ -3346,8 +3356,8 @@ StWidget.focused .app-well-app-running-dot { border-radius: 100px; width: 32px; height: 32px; - border-color: rgba(245, 245, 245, 0.3); - background-color: rgba(245, 245, 245, 0.3); + border: none; + background-color: rgba(0, 0, 0, 0.1); } .login-dialog .cancel-button StIcon, @@ -3362,8 +3372,11 @@ StWidget.focused .app-well-app-running-dot { .caps-lock-warning-label { text-align: center; - padding-bottom: 8px; - color: #F27835; + margin-bottom: 8px; + padding: 2px 6px; + color: white; + background-color: #F27835; + border-radius: 9999px; } .login-dialog-logo-bin { diff --git a/src/main/gnome-shell/gnome-shell-light-solid.css b/src/main/gnome-shell/gnome-shell-light-solid.css index 407b7e33..002da078 100644 --- a/src/main/gnome-shell/gnome-shell-light-solid.css +++ b/src/main/gnome-shell/gnome-shell-light-solid.css @@ -118,6 +118,7 @@ StEntry:focus { } StEntry:insensitive { + background-color: rgba(0, 0, 0, 0.05); color: rgba(36, 36, 36, 0.45); } @@ -198,23 +199,23 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { border-radius: 16px; -slider-height: 19px; -slider-background-color: rgba(0, 0, 0, 0.1); - -slider-border-color: rgba(0, 0, 0, 0.12); + -slider-border-color: rgba(0, 0, 0, 0.15); -slider-active-background-color: white; - -slider-active-border-color: rgba(0, 0, 0, 0.12); + -slider-active-border-color: rgba(0, 0, 0, 0.15); -slider-border-width: 1px; -slider-handle-radius: 10px; -slider-handle-border-width: 1px; - -slider-handle-border-color: rgba(0, 0, 0, 0.12); + -slider-handle-border-color: rgba(0, 0, 0, 0.15); -barlevel-height: 19px; -barlevel-background-color: rgba(0, 0, 0, 0.1); - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); -barlevel-active-background-color: white; - -barlevel-active-border-color: rgba(0, 0, 0, 0.12); + -barlevel-active-border-color: rgba(0, 0, 0, 0.15); -barlevel-overdrive-color: #f8464c; - -barlevel-overdrive-border-color: rgba(0, 0, 0, 0.12); + -barlevel-overdrive-border-color: rgba(0, 0, 0, 0.15); -barlevel-overdrive-separator-width: 0; -barlevel-border-width: 1px; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } /* Check Boxes */ @@ -918,9 +919,8 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { spacing-columns: 1em; } -/* Popovers/Menus */ .candidate-popup-boxpointer, .popup-menu .popup-menu-content, .modal-dialog { - background-color: #f5f5f5; + background-color: whitesmoke; border-radius: 12px; border: none; } @@ -928,46 +928,20 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu { min-width: 12em; color: #424242; - padding: 0 0; -} - -.popup-menu .popup-sub-menu { - background-color: rgba(255, 255, 255, 0.75); - border-radius: 0 0 8px 8px; - border: none; - box-shadow: none; - margin: 0 6px; - transition-duration: 0ms; -} - -.popup-menu .popup-sub-menu .popup-menu-item { - margin: 0; - border-radius: 8px; -} - -.popup-menu .popup-sub-menu .popup-menu-item:hover { - color: white; - background-color: #0860f2; -} - -.popup-menu .popup-sub-menu .popup-menu-item:active { - color: white; - background-color: #095de8; -} - -.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { - border-radius: 0 0 8px 8px; + padding: 0 0 !important; } .popup-menu .popup-menu-content { - padding: 6px 0; + padding: 6px 0 !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25); - margin: 4px 12px 20px; + border: 1px solid rgba(0, 0, 0, 0); + margin: 4px 8px !important; } .popup-menu .popup-menu-item { spacing: 12px; - padding: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; color: #424242; text-shadow: none; border-radius: 8px; @@ -976,13 +950,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-menu .popup-menu-item:ltr { - padding-right: 1.5em; - padding-left: 0; + padding-right: 2em !important; + padding-left: 0 !important; } .popup-menu .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.5em; + padding-right: 0 !important; + padding-left: 2em !important; } .popup-menu .popup-menu-item:checked { @@ -1023,6 +997,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { color: rgba(36, 36, 36, 0.45); } +.popup-menu .popup-sub-menu { + background-color: rgba(255, 255, 255, 0.75); + border-radius: 0 0 8px 8px; + border: none; + box-shadow: none; + margin: 0 6px; + transition-duration: 0ms; +} + +.popup-menu .popup-sub-menu .popup-menu-item { + margin: 0; + border-radius: 8px; +} + +.popup-menu .popup-sub-menu .popup-menu-item:hover { + color: white; + background-color: #0860f2; +} + +.popup-menu .popup-sub-menu .popup-menu-item:active { + color: white; + background-color: #095de8; +} + +.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { + border-radius: 0 0 8px 8px; +} + .popup-menu .popup-inactive-menu-item { color: #424242; } @@ -1061,7 +1063,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .candidate-popup-boxpointer { -arrow-border-radius: 2px; - -arrow-background-color: #f5f5f5; + -arrow-background-color: whitesmoke; -arrow-border-width: 0; -arrow-border-color: transparent; -arrow-base: 5px; @@ -1070,16 +1072,22 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-separator-menu-item { - margin: 0; + margin: 0 0; padding: 0 0; background: none; border: none; } .popup-separator-menu-item .popup-separator-menu-item-separator { - height: 0; - background: none; - padding: 0; + height: 1px; + margin: 0 0; + background-color: rgba(0, 0, 0, 0.12); + padding: 0 0; +} + +.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { + padding: 0 0; + margin: 0 64px 0 0; } .system-switch-user-submenu-icon.user-icon { @@ -1193,7 +1201,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { -barlevel-overdrive-color: #f8464c; -barlevel-overdrive-separator-width: 2px; -barlevel-border-width: 0; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } .osd-window .level-bar { @@ -3245,25 +3253,27 @@ StWidget.focused .app-well-app-running-dot { } .login-dialog StEntry { - selection-background-color: rgba(0, 0, 0, 0.2); - selected-background-color: rgba(0, 0, 0, 0.2); - selected-color: #0860f2; + selection-background-color: #0860f2; + selected-background-color: #0860f2; + selected-color: white; padding: 4px 8px; min-height: 20px; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; - border: 2px solid transparent; + border: none; box-shadow: none; border-radius: 9999px; } .login-dialog StEntry:focus { - border: 2px solid #4d8ef9; - box-shadow: none; + border: none; + background-color: rgba(0, 0, 0, 0.2); } .login-dialog StEntry:insensitive { + border: none; color: rgba(36, 36, 36, 0.45); + background-color: rgba(0, 0, 0, 0.05); } .login-dialog .modal-dialog-button-box { @@ -3346,8 +3356,8 @@ StWidget.focused .app-well-app-running-dot { border-radius: 100px; width: 32px; height: 32px; - border-color: rgba(245, 245, 245, 0.3); - background-color: rgba(245, 245, 245, 0.3); + border: none; + background-color: rgba(0, 0, 0, 0.1); } .login-dialog .cancel-button StIcon, @@ -3362,8 +3372,11 @@ StWidget.focused .app-well-app-running-dot { .caps-lock-warning-label { text-align: center; - padding-bottom: 8px; - color: #F27835; + margin-bottom: 8px; + padding: 2px 6px; + color: white; + background-color: #F27835; + border-radius: 9999px; } .login-dialog-logo-bin { diff --git a/src/main/gnome-shell/gnome-shell-light.css b/src/main/gnome-shell/gnome-shell-light.css index 2d8b104a..766e406d 100644 --- a/src/main/gnome-shell/gnome-shell-light.css +++ b/src/main/gnome-shell/gnome-shell-light.css @@ -118,6 +118,7 @@ StEntry:focus { } StEntry:insensitive { + background-color: rgba(0, 0, 0, 0.05); color: rgba(36, 36, 36, 0.45); } @@ -198,23 +199,23 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { border-radius: 16px; -slider-height: 19px; -slider-background-color: rgba(0, 0, 0, 0.1); - -slider-border-color: rgba(0, 0, 0, 0.12); + -slider-border-color: rgba(0, 0, 0, 0.15); -slider-active-background-color: white; - -slider-active-border-color: rgba(0, 0, 0, 0.12); + -slider-active-border-color: rgba(0, 0, 0, 0.15); -slider-border-width: 1px; -slider-handle-radius: 10px; -slider-handle-border-width: 1px; - -slider-handle-border-color: rgba(0, 0, 0, 0.12); + -slider-handle-border-color: rgba(0, 0, 0, 0.15); -barlevel-height: 19px; -barlevel-background-color: rgba(0, 0, 0, 0.1); - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); -barlevel-active-background-color: white; - -barlevel-active-border-color: rgba(0, 0, 0, 0.12); + -barlevel-active-border-color: rgba(0, 0, 0, 0.15); -barlevel-overdrive-color: #f8464c; - -barlevel-overdrive-border-color: rgba(0, 0, 0, 0.12); + -barlevel-overdrive-border-color: rgba(0, 0, 0, 0.15); -barlevel-overdrive-separator-width: 0; -barlevel-border-width: 1px; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } /* Check Boxes */ @@ -918,7 +919,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { spacing-columns: 1em; } -/* Popovers/Menus */ .candidate-popup-boxpointer, .popup-menu .popup-menu-content, .modal-dialog { background-color: rgba(245, 245, 245, 0.95); border-radius: 12px; @@ -928,46 +928,20 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu { min-width: 12em; color: #424242; - padding: 0 0; -} - -.popup-menu .popup-sub-menu { - background-color: rgba(255, 255, 255, 0.75); - border-radius: 0 0 8px 8px; - border: none; - box-shadow: none; - margin: 0 6px; - transition-duration: 0ms; -} - -.popup-menu .popup-sub-menu .popup-menu-item { - margin: 0; - border-radius: 8px; -} - -.popup-menu .popup-sub-menu .popup-menu-item:hover { - color: white; - background-color: #0860f2; -} - -.popup-menu .popup-sub-menu .popup-menu-item:active { - color: white; - background-color: #095de8; -} - -.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { - border-radius: 0 0 8px 8px; + padding: 0 0 !important; } .popup-menu .popup-menu-content { - padding: 6px 0; + padding: 6px 0 !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25); - margin: 4px 12px 20px; + border: 1px solid rgba(0, 0, 0, 0); + margin: 4px 8px !important; } .popup-menu .popup-menu-item { spacing: 12px; - padding: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; color: #424242; text-shadow: none; border-radius: 8px; @@ -976,13 +950,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-menu .popup-menu-item:ltr { - padding-right: 1.5em; - padding-left: 0; + padding-right: 2em !important; + padding-left: 0 !important; } .popup-menu .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.5em; + padding-right: 0 !important; + padding-left: 2em !important; } .popup-menu .popup-menu-item:checked { @@ -1023,6 +997,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { color: rgba(36, 36, 36, 0.45); } +.popup-menu .popup-sub-menu { + background-color: rgba(255, 255, 255, 0.75); + border-radius: 0 0 8px 8px; + border: none; + box-shadow: none; + margin: 0 6px; + transition-duration: 0ms; +} + +.popup-menu .popup-sub-menu .popup-menu-item { + margin: 0; + border-radius: 8px; +} + +.popup-menu .popup-sub-menu .popup-menu-item:hover { + color: white; + background-color: #0860f2; +} + +.popup-menu .popup-sub-menu .popup-menu-item:active { + color: white; + background-color: #095de8; +} + +.popup-menu .popup-sub-menu .popup-menu-item:not(:first-child):last-child { + border-radius: 0 0 8px 8px; +} + .popup-menu .popup-inactive-menu-item { color: #424242; } @@ -1070,16 +1072,22 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .popup-separator-menu-item { - margin: 0; + margin: 0 0; padding: 0 0; background: none; border: none; } .popup-separator-menu-item .popup-separator-menu-item-separator { - height: 0; - background: none; - padding: 0; + height: 1px; + margin: 0 0; + background-color: rgba(0, 0, 0, 0.12); + padding: 0 0; +} + +.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { + padding: 0 0; + margin: 0 64px 0 0; } .system-switch-user-submenu-icon.user-icon { @@ -1193,7 +1201,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { -barlevel-overdrive-color: #f8464c; -barlevel-overdrive-separator-width: 2px; -barlevel-border-width: 0; - -barlevel-border-color: rgba(0, 0, 0, 0.12); + -barlevel-border-color: rgba(0, 0, 0, 0.15); } .osd-window .level-bar { @@ -3245,25 +3253,27 @@ StWidget.focused .app-well-app-running-dot { } .login-dialog StEntry { - selection-background-color: rgba(0, 0, 0, 0.2); - selected-background-color: rgba(0, 0, 0, 0.2); - selected-color: #0860f2; + selection-background-color: #0860f2; + selected-background-color: #0860f2; + selected-color: white; padding: 4px 8px; min-height: 20px; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; - border: 2px solid transparent; + border: none; box-shadow: none; border-radius: 9999px; } .login-dialog StEntry:focus { - border: 2px solid #4d8ef9; - box-shadow: none; + border: none; + background-color: rgba(0, 0, 0, 0.2); } .login-dialog StEntry:insensitive { + border: none; color: rgba(36, 36, 36, 0.45); + background-color: rgba(0, 0, 0, 0.05); } .login-dialog .modal-dialog-button-box { @@ -3346,8 +3356,8 @@ StWidget.focused .app-well-app-running-dot { border-radius: 100px; width: 32px; height: 32px; - border-color: rgba(245, 245, 245, 0.3); - background-color: rgba(245, 245, 245, 0.3); + border: none; + background-color: rgba(0, 0, 0, 0.1); } .login-dialog .cancel-button StIcon, @@ -3362,8 +3372,11 @@ StWidget.focused .app-well-app-running-dot { .caps-lock-warning-label { text-align: center; - padding-bottom: 8px; - color: #F27835; + margin-bottom: 8px; + padding: 2px 6px; + color: white; + background-color: #F27835; + border-radius: 9999px; } .login-dialog-logo-bin { diff --git a/src/main/gtk-3.0/gtk-dark-solid.css b/src/main/gtk-3.0/gtk-dark-solid.css index fedcdbbe..691887fc 100644 --- a/src/main/gtk-3.0/gtk-dark-solid.css +++ b/src/main/gtk-3.0/gtk-dark-solid.css @@ -1,12 +1,3 @@ -@keyframes switch_ripple_effect { - from { - background-image: radial-gradient(circle farthest-corner at center, #0860f2 0%, transparent 0%); - } - to { - background-image: radial-gradient(circle farthest-corner at center, #0860f2 100%, transparent 0%); - } -} - @keyframes header_ripple_effect { from { background-image: radial-gradient(circle farthest-corner at center, #373737 0%, transparent 0%); @@ -2717,64 +2708,66 @@ scrollbar.vertical slider { min-height: 40px; } -label:disabled selection:checked { - background-image: -gtk-scaled(url("assets/switch-active-insensitive.png"), url("assets/switch-active-insensitive@2.png")); -} - -label:disabled selection:not(:indeterminate) { - background-image: -gtk-scaled(url("assets/switch-insensitive-dark.png"), url("assets/switch-insensitive-dark@2.png")); -} - -label:disabled selection:checked { - background-image: -gtk-scaled(url("assets/toggle-on-disabled.png"), url("assets/toggle-on-disabled@2.png")); -} - -label:disabled selection:not(:indeterminate) { - background-image: -gtk-scaled(url("assets/toggle-off-disabled.png"), url("assets/toggle-off-disabled@2.png")); +@keyframes switch_ripple_effect { + from { + background-image: linear-gradient(0deg, rgba(222, 222, 222, 0.25) 0%, rgba(222, 222, 222, 0.35) 100%), radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); + } + to { + background-image: linear-gradient(0deg, #357ef8 0%, #0860f2 100%), radial-gradient(circle farthest-corner at center, rgba(8, 96, 242, 0.75) 100%, rgba(8, 96, 242, 0) 0%); + } } switch { transition: all 150ms cubic-bezier(0, 0, 0.2, 1); - border-radius: 50px; - background-color: rgba(222, 222, 222, 0.3); + border-radius: 9999px; + background-color: transparent; background-clip: padding-box; - color: rgba(222, 222, 222, 0.3); + color: transparent; + min-widt: 40px; + min-height: 24px; font-size: 0; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + background-image: linear-gradient(0deg, rgba(222, 222, 222, 0.25) 0%, rgba(222, 222, 222, 0.35) 100%), radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); } switch:disabled { - color: rgba(222, 222, 222, 0.15); - background-color: rgba(222, 222, 222, 0.15); + color: transparent; + background-color: transparent; + background-image: linear-gradient(0deg, rgba(222, 222, 222, 0.1) 0%, rgba(222, 222, 222, 0.15) 100%); } switch:checked { animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1); - background-color: #0860f2; - color: rgba(255, 255, 255, 0.65); + background-color: transparent; + color: transparent; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); + transition: background-image 0.3s, box-shadow 0; + background-image: linear-gradient(0deg, #357ef8 0%, #0860f2 100%), radial-gradient(circle farthest-corner at center, rgba(8, 96, 242, 0.75) 100%, transparent 0%); } switch:checked:disabled, label:disabled selection:checked { - background-color: rgba(8, 96, 242, 0.45); - color: rgba(255, 255, 255, 0.35); + background-color: transparent; + background-image: linear-gradient(0deg, #b0cdfc 0%, #7fadfb 100%); + color: transparent; } switch slider { transition: all 150ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1), margin 0; - min-width: 18px; - min-height: 18px; - margin: 2px 0 2px 2px; - border-radius: 50px; - -gtk-outline-radius: 50px; + min-width: 22px; + min-height: 22px; + margin: 1px 0 1px 1px; + border-radius: 9999px; + -gtk-outline-radius: 9999px; background-color: white; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } switch:hover slider { - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1); } switch:checked slider { - margin: 2px 2px 2px 0; + margin: 1px 1px 1px 0; background-color: white; } diff --git a/src/main/gtk-3.0/gtk-dark.css b/src/main/gtk-3.0/gtk-dark.css index 49fb548f..3a6246ac 100644 --- a/src/main/gtk-3.0/gtk-dark.css +++ b/src/main/gtk-3.0/gtk-dark.css @@ -1,12 +1,3 @@ -@keyframes switch_ripple_effect { - from { - background-image: radial-gradient(circle farthest-corner at center, #0860f2 0%, transparent 0%); - } - to { - background-image: radial-gradient(circle farthest-corner at center, #0860f2 100%, transparent 0%); - } -} - @keyframes header_ripple_effect { from { background-image: radial-gradient(circle farthest-corner at center, #373737 0%, transparent 0%); @@ -2717,64 +2708,66 @@ scrollbar.vertical slider { min-height: 40px; } -label:disabled selection:checked { - background-image: -gtk-scaled(url("assets/switch-active-insensitive.png"), url("assets/switch-active-insensitive@2.png")); -} - -label:disabled selection:not(:indeterminate) { - background-image: -gtk-scaled(url("assets/switch-insensitive-dark.png"), url("assets/switch-insensitive-dark@2.png")); -} - -label:disabled selection:checked { - background-image: -gtk-scaled(url("assets/toggle-on-disabled.png"), url("assets/toggle-on-disabled@2.png")); -} - -label:disabled selection:not(:indeterminate) { - background-image: -gtk-scaled(url("assets/toggle-off-disabled.png"), url("assets/toggle-off-disabled@2.png")); +@keyframes switch_ripple_effect { + from { + background-image: linear-gradient(0deg, rgba(222, 222, 222, 0.25) 0%, rgba(222, 222, 222, 0.35) 100%), radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); + } + to { + background-image: linear-gradient(0deg, #357ef8 0%, #0860f2 100%), radial-gradient(circle farthest-corner at center, rgba(8, 96, 242, 0.75) 100%, rgba(8, 96, 242, 0) 0%); + } } switch { transition: all 150ms cubic-bezier(0, 0, 0.2, 1); - border-radius: 50px; - background-color: rgba(222, 222, 222, 0.3); + border-radius: 9999px; + background-color: transparent; background-clip: padding-box; - color: rgba(222, 222, 222, 0.3); + color: transparent; + min-widt: 40px; + min-height: 24px; font-size: 0; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + background-image: linear-gradient(0deg, rgba(222, 222, 222, 0.25) 0%, rgba(222, 222, 222, 0.35) 100%), radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); } switch:disabled { - color: rgba(222, 222, 222, 0.15); - background-color: rgba(222, 222, 222, 0.15); + color: transparent; + background-color: transparent; + background-image: linear-gradient(0deg, rgba(222, 222, 222, 0.1) 0%, rgba(222, 222, 222, 0.15) 100%); } switch:checked { animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1); - background-color: #0860f2; - color: rgba(255, 255, 255, 0.65); + background-color: transparent; + color: transparent; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); + transition: background-image 0.3s, box-shadow 0; + background-image: linear-gradient(0deg, #357ef8 0%, #0860f2 100%), radial-gradient(circle farthest-corner at center, rgba(8, 96, 242, 0.75) 100%, transparent 0%); } switch:checked:disabled, label:disabled selection:checked { - background-color: rgba(8, 96, 242, 0.45); - color: rgba(255, 255, 255, 0.35); + background-color: transparent; + background-image: linear-gradient(0deg, #b0cdfc 0%, #7fadfb 100%); + color: transparent; } switch slider { transition: all 150ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1), margin 0; - min-width: 18px; - min-height: 18px; - margin: 2px 0 2px 2px; - border-radius: 50px; - -gtk-outline-radius: 50px; + min-width: 22px; + min-height: 22px; + margin: 1px 0 1px 1px; + border-radius: 9999px; + -gtk-outline-radius: 9999px; background-color: white; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } switch:hover slider { - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1); } switch:checked slider { - margin: 2px 2px 2px 0; + margin: 1px 1px 1px 0; background-color: white; } diff --git a/src/main/gtk-3.0/gtk-light-solid.css b/src/main/gtk-3.0/gtk-light-solid.css index 69a7e522..8d24d721 100644 --- a/src/main/gtk-3.0/gtk-light-solid.css +++ b/src/main/gtk-3.0/gtk-light-solid.css @@ -1,12 +1,3 @@ -@keyframes switch_ripple_effect { - from { - background-image: radial-gradient(circle farthest-corner at center, #0860f2 0%, transparent 0%); - } - to { - background-image: radial-gradient(circle farthest-corner at center, #0860f2 100%, transparent 0%); - } -} - @keyframes header_ripple_effect { from { background-image: radial-gradient(circle farthest-corner at center, #ffffff 0%, transparent 0%); @@ -2729,64 +2720,66 @@ scrollbar.vertical slider { min-height: 40px; } -label:disabled selection:checked { - background-image: -gtk-scaled(url("assets/switch-active-insensitive.png"), url("assets/switch-active-insensitive@2.png")); -} - -label:disabled selection:not(:indeterminate) { - background-image: -gtk-scaled(url("assets/switch-insensitive.png"), url("assets/switch-insensitive@2.png")); -} - -label:disabled selection:checked { - background-image: -gtk-scaled(url("assets/toggle-on-disabled.png"), url("assets/toggle-on-disabled@2.png")); -} - -label:disabled selection:not(:indeterminate) { - background-image: -gtk-scaled(url("assets/toggle-off-disabled.png"), url("assets/toggle-off-disabled@2.png")); +@keyframes switch_ripple_effect { + from { + background-image: linear-gradient(0deg, rgba(36, 36, 36, 0.25) 0%, rgba(36, 36, 36, 0.35) 100%), radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); + } + to { + background-image: linear-gradient(0deg, #357ef8 0%, #0860f2 100%), radial-gradient(circle farthest-corner at center, rgba(8, 96, 242, 0.75) 100%, rgba(8, 96, 242, 0) 0%); + } } switch { transition: all 150ms cubic-bezier(0, 0, 0.2, 1); - border-radius: 50px; - background-color: rgba(36, 36, 36, 0.3); + border-radius: 9999px; + background-color: transparent; background-clip: padding-box; - color: rgba(36, 36, 36, 0.3); + color: transparent; + min-widt: 40px; + min-height: 24px; font-size: 0; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + background-image: linear-gradient(0deg, rgba(36, 36, 36, 0.25) 0%, rgba(36, 36, 36, 0.35) 100%), radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); } switch:disabled { - color: rgba(36, 36, 36, 0.15); - background-color: rgba(36, 36, 36, 0.15); + color: transparent; + background-color: transparent; + background-image: linear-gradient(0deg, rgba(36, 36, 36, 0.1) 0%, rgba(36, 36, 36, 0.15) 100%); } switch:checked { animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1); - background-color: #0860f2; - color: rgba(255, 255, 255, 0.65); + background-color: transparent; + color: transparent; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); + transition: background-image 0.3s, box-shadow 0; + background-image: linear-gradient(0deg, #357ef8 0%, #0860f2 100%), radial-gradient(circle farthest-corner at center, rgba(8, 96, 242, 0.75) 100%, transparent 0%); } switch:checked:disabled, label:disabled selection:checked { - background-color: rgba(8, 96, 242, 0.45); - color: rgba(255, 255, 255, 0.35); + background-color: transparent; + background-image: linear-gradient(0deg, #b0cdfc 0%, #7fadfb 100%); + color: transparent; } switch slider { transition: all 150ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1), margin 0; - min-width: 18px; - min-height: 18px; - margin: 2px 0 2px 2px; - border-radius: 50px; - -gtk-outline-radius: 50px; + min-width: 22px; + min-height: 22px; + margin: 1px 0 1px 1px; + border-radius: 9999px; + -gtk-outline-radius: 9999px; background-color: white; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } switch:hover slider { - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1); } switch:checked slider { - margin: 2px 2px 2px 0; + margin: 1px 1px 1px 0; background-color: white; } diff --git a/src/main/gtk-3.0/gtk-light.css b/src/main/gtk-3.0/gtk-light.css index df80e6b1..3dd188f3 100644 --- a/src/main/gtk-3.0/gtk-light.css +++ b/src/main/gtk-3.0/gtk-light.css @@ -1,12 +1,3 @@ -@keyframes switch_ripple_effect { - from { - background-image: radial-gradient(circle farthest-corner at center, #0860f2 0%, transparent 0%); - } - to { - background-image: radial-gradient(circle farthest-corner at center, #0860f2 100%, transparent 0%); - } -} - @keyframes header_ripple_effect { from { background-image: radial-gradient(circle farthest-corner at center, #ffffff 0%, transparent 0%); @@ -2729,64 +2720,66 @@ scrollbar.vertical slider { min-height: 40px; } -label:disabled selection:checked { - background-image: -gtk-scaled(url("assets/switch-active-insensitive.png"), url("assets/switch-active-insensitive@2.png")); -} - -label:disabled selection:not(:indeterminate) { - background-image: -gtk-scaled(url("assets/switch-insensitive.png"), url("assets/switch-insensitive@2.png")); -} - -label:disabled selection:checked { - background-image: -gtk-scaled(url("assets/toggle-on-disabled.png"), url("assets/toggle-on-disabled@2.png")); -} - -label:disabled selection:not(:indeterminate) { - background-image: -gtk-scaled(url("assets/toggle-off-disabled.png"), url("assets/toggle-off-disabled@2.png")); +@keyframes switch_ripple_effect { + from { + background-image: linear-gradient(0deg, rgba(36, 36, 36, 0.25) 0%, rgba(36, 36, 36, 0.35) 100%), radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); + } + to { + background-image: linear-gradient(0deg, #357ef8 0%, #0860f2 100%), radial-gradient(circle farthest-corner at center, rgba(8, 96, 242, 0.75) 100%, rgba(8, 96, 242, 0) 0%); + } } switch { transition: all 150ms cubic-bezier(0, 0, 0.2, 1); - border-radius: 50px; - background-color: rgba(36, 36, 36, 0.3); + border-radius: 9999px; + background-color: transparent; background-clip: padding-box; - color: rgba(36, 36, 36, 0.3); + color: transparent; + min-widt: 40px; + min-height: 24px; font-size: 0; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + background-image: linear-gradient(0deg, rgba(36, 36, 36, 0.25) 0%, rgba(36, 36, 36, 0.35) 100%), radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); } switch:disabled { - color: rgba(36, 36, 36, 0.15); - background-color: rgba(36, 36, 36, 0.15); + color: transparent; + background-color: transparent; + background-image: linear-gradient(0deg, rgba(36, 36, 36, 0.1) 0%, rgba(36, 36, 36, 0.15) 100%); } switch:checked { animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1); - background-color: #0860f2; - color: rgba(255, 255, 255, 0.65); + background-color: transparent; + color: transparent; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); + transition: background-image 0.3s, box-shadow 0; + background-image: linear-gradient(0deg, #357ef8 0%, #0860f2 100%), radial-gradient(circle farthest-corner at center, rgba(8, 96, 242, 0.75) 100%, transparent 0%); } switch:checked:disabled, label:disabled selection:checked { - background-color: rgba(8, 96, 242, 0.45); - color: rgba(255, 255, 255, 0.35); + background-color: transparent; + background-image: linear-gradient(0deg, #b0cdfc 0%, #7fadfb 100%); + color: transparent; } switch slider { transition: all 150ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1), margin 0; - min-width: 18px; - min-height: 18px; - margin: 2px 0 2px 2px; - border-radius: 50px; - -gtk-outline-radius: 50px; + min-width: 22px; + min-height: 22px; + margin: 1px 0 1px 1px; + border-radius: 9999px; + -gtk-outline-radius: 9999px; background-color: white; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } switch:hover slider { - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1); } switch:checked slider { - margin: 2px 2px 2px 0; + margin: 1px 1px 1px 0; background-color: white; } diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss index 5e3844ea..11bb95f3 100644 --- a/src/sass/_colors.scss +++ b/src/sass/_colors.scss @@ -164,10 +164,10 @@ $button_active_image: linear-gradient(0deg, $button_active_bottom $button_active_hover_image: linear-gradient(0deg, $button_active_hover_bottom 0%, $button_active_hover_top 100%); // WM colors -$wm_border_light: 0 0 0 2px rgba(black, 0.03), 0 0 0 1px rgba(black, 0.12); -$wm_border_dark: 0 0 0 2px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.75); +$wm_outline_light: 0 0 0 2px rgba(black, 0.03), 0 0 0 1px rgba(black, 0.12); +$wm_outline_dark: 0 0 0 2px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.75); $wm_shadow: if($variant=='light', rgba(black, 0.15), rgba(black, 0.35)); -$wm_border: if($variant=='light', $wm_border_light, $wm_border_dark); +$wm_outline: if($variant=='light', $wm_outline_light, $wm_outline_dark); // WM Buttons diff --git a/src/sass/gnome-shell/_common.scss b/src/sass/gnome-shell/_common.scss index d10300ee..83e41984 100644 --- a/src/sass/gnome-shell/_common.scss +++ b/src/sass/gnome-shell/_common.scss @@ -150,7 +150,7 @@ StScrollBar { $slider_color: if($variant == 'light', white, white); $barlevel_bg_color: if($variant == 'light', rgba(black, 0.1), rgba(white, 0.1)); $barlevel_active_bg_color: if($variant == 'light', white, rgba(white, 0.35)); -$barlevel_boder_color: if($variant == 'light', rgba(black, 0.12), transparent); +$barlevel_boder_color: if($variant == 'light', rgba(black, 0.15), transparent); .slider { height: 20px; @@ -756,12 +756,12 @@ $barlevel_boder_color: if($variant == 'light', rgba(black, 0.12), transparent); spacing-columns: 1em; } -/* Popovers/Menus */ +// Popovers/Menus -$dialog_bg_color: if($variant == 'light', $bg_color, $base_color); +$dialog_bg_color: if($variant == 'light', darken($bg_color, 0%), $base_color); @if $trans=='true' { - $dialog_bg_color: if($variant == 'light', rgba($bg_color, 0.95), rgba($base_color, 0.95)); + $dialog_bg_color: if($variant == 'light', rgba(darken($bg_color, 0%), 0.95), rgba($base_color, 0.95)); } $popop_menuitem_radius: $wm_radius - 4px; @@ -775,56 +775,30 @@ $popop_menuitem_radius: $wm_radius - 4px; .popup-menu { min-width: 12em; color: $alt_fg_color; - padding: 0 0; + padding: 0 0 !important; .popup-menu-arrow { } //defined globally in the TOP BAR - .popup-sub-menu { - background-color: if($variant == 'light', rgba(white, 0.75), rgba(white, 0.15)); - border-radius: 0 0 $popop_menuitem_radius $popop_menuitem_radius; - border: none; - box-shadow: none; - margin: 0 6px; - transition-duration: 0ms; - - .popup-menu-item { - margin: 0; - border-radius: $popop_menuitem_radius; - - &:hover { - color: $selected_fg_color; - background-color: $selected_bg_color; - } - - &:active { - color: $selected_fg_color; - background-color: mix($fg_color, $selected_bg_color, 5%); - } - - &:not(:first-child):last-child { - border-radius: 0 0 $popop_menuitem_radius $popop_menuitem_radius; - } - } - } - .popup-menu-content { - padding: 6px 0; + padding: 6px 0 !important; @extend %theme_dialogs; box-shadow: 0 8px 16px 0 rgba(black, 0.25); - margin: 4px 12px 20px; + border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75)); + margin: 4px 8px !important; } .popup-menu-item { spacing: 12px; - padding: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; color: $alt_fg_color; text-shadow: none; border-radius: $popop_menuitem_radius; margin: 0 6px; transition-duration: 0ms; - &:ltr { padding-right: 1.5em; padding-left: 0; } - &:rtl { padding-right: 0; padding-left: 1.5em; } + &:ltr { padding-right: 2em !important; padding-left: 0 !important; } + &:rtl { padding-right: 0 !important; padding-left: 2em !important; } &:checked { font-weight: normal; @@ -861,6 +835,34 @@ $popop_menuitem_radius: $wm_radius - 4px; &:insensitive { color: $disabled_fg_color; } } + .popup-sub-menu { + background-color: if($variant == 'light', rgba(white, 0.75), rgba(white, 0.15)); + border-radius: 0 0 $popop_menuitem_radius $popop_menuitem_radius; + border: none; + box-shadow: none; + margin: 0 6px; + transition-duration: 0ms; + + .popup-menu-item { + margin: 0; + border-radius: $popop_menuitem_radius; + + &:hover { + color: $selected_fg_color; + background-color: $selected_bg_color; + } + + &:active { + color: $selected_fg_color; + background-color: mix($fg_color, $selected_bg_color, 5%); + } + + &:not(:first-child):last-child { + border-radius: 0 0 $popop_menuitem_radius $popop_menuitem_radius; + } + } + } + .popup-inactive-menu-item { //all icons and other graphical elements color: $alt_fg_color; @@ -909,16 +911,21 @@ $popop_menuitem_radius: $wm_radius - 4px; } .popup-separator-menu-item { - // height: 0; //not really the whole box - margin: 0; + margin: 0 0; padding: 0 0; background: none; border: none; .popup-separator-menu-item-separator { - height: 0; //not really the whole box - background: none; - padding: 0; + height: 1px; //not really the whole box + margin: 0 0; + background-color: $borders_color; + padding: 0 0; + + .popup-sub-menu & { //submenu separators + padding: 0 0; + margin: 0 64px 0 0; + } } } @@ -1023,7 +1030,7 @@ $popop_menuitem_radius: $wm_radius - 4px; -barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-separator-width: 2px; -barlevel-border-width: 0; - -barlevel-border-color: rgba(black, 0.12); + -barlevel-border-color: rgba(black, 0.15); } .level-bar { @@ -2795,22 +2802,20 @@ StWidget.focused .app-well-app-running-dot { max-width: 23em; } -$login_entry_bg: if($variant == 'dark', rgba(black, 0.1), rgba(white, 0.1)); - .login-dialog { //reset border: none; background-color: transparent; StEntry { - selection-background-color: $track_color; - selected-background-color: $track_color; - selected-color: $primary_color; + selection-background-color: $primary_color; + selected-background-color: $primary_color; + selected-color: white; padding: 4px 8px; min-height: $small_size; - @include entry(normal, $bc: $login_entry_bg); - &:focus { @include entry(focus); } - &:insensitive { @include entry(insensitive); } + @include entry(flat-normal); + &:focus { @include entry(flat-focus); } + &:insensitive { @include entry(flat-insensitive); } border-radius: $circular_radius; } @@ -2838,8 +2843,8 @@ $login_entry_bg: if($variant == 'dark', rgba(black, 0.1), rgba(white, 0.1)); border-radius: 100px; width: 32px; height: 32px; - border-color: transparentize($bg_color, 0.7); - background-color: transparentize($bg_color, 0.7); + border: none; + background-color: rgba($borders_color, 0.1); StIcon { icon-size: 16px; } } @@ -2852,8 +2857,11 @@ $login_entry_bg: if($variant == 'dark', rgba(black, 0.1), rgba(white, 0.1)); // Caps-lock warning .caps-lock-warning-label { text-align: center; - padding-bottom: 8px; - color: $warning_color; + margin-bottom: 8px; + padding: 2px 6px; + color: white; + background-color: $warning_color; + border-radius: $circular_radius; } .login-dialog-logo-bin { padding: 24px 0px; } diff --git a/src/sass/gnome-shell/_drawing.scss b/src/sass/gnome-shell/_drawing.scss index 6d5721e1..662caae2 100644 --- a/src/sass/gnome-shell/_drawing.scss +++ b/src/sass/gnome-shell/_drawing.scss @@ -112,8 +112,32 @@ } @if $t == insensitive { + background-color: rgba($bc, 0.05); color: $disabled_fg_color; } + + @if $t == flat-normal { + background-color: $bc; + border-radius: 100px; + border: none; + box-shadow: none; + } + + @if $t == flat-hover { + background-color: $bc; + box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05); + } + + @if $t == flat-focus { + border: none; + background-color: rgba($bc, 0.2); + } + + @if $t == flat-insensitive { + border: none; + color: $disabled_fg_color; + background-color: rgba($bc, 0.05); + } } @mixin search_entry($t, $fc: $primary_color) { diff --git a/src/sass/gtk/_common.scss b/src/sass/gtk/_common.scss index 718069de..ca44ceea 100644 --- a/src/sass/gtk/_common.scss +++ b/src/sass/gtk/_common.scss @@ -2429,166 +2429,80 @@ scrollbar { // Switches // -%reset_switch { - &, &:disabled { // specificity bump - padding: 0; - border: none; - color: transparent; - background: unset; - background-image: unset; - background-repeat: no-repeat; - background-position: right center; - box-shadow: none; - animation: none; - font-size: 0; - outline-color: transparent; +$switch_image: linear-gradient(0deg, rgba($fg_color, 0.25) 0%, rgba($fg_color, 0.35) 100%); +$switch_disabled_image: linear-gradient(0deg, rgba($fg_color, 0.1) 0%, rgba($fg_color, 0.15) 100%); +$switch_checked_image: linear-gradient(0deg, lighten($selected_bg_color, 10%) 0%, $selected_bg_color 100%); +$switch_checked_disabled_image: linear-gradient(0deg, lighten($selected_bg_color, 35%) 0%, lighten($selected_bg_color, 25%) 100%); +$switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1); - &:dir(rtl) { background-position: left center; } +@keyframes switch_ripple_effect { + from { + background-image: $switch_image, radial-gradient(circle farthest-corner at center, + transparent 0%, + transparent 0%); } -} -%switch_pixmap { - // 'indeterminate' is the synthetic wildcard - &:not(:indeterminate) { - @extend %reset_switch; - min-width: 40px; - min-height: 24px; - margin: 0; - background-size: 40px 24px; - transition: all 350ms $ease-out-quad; - - slider:not(:indeterminate) { - @extend %reset_switch; - margin: 0; - background-size: 40px 24px; - } - - // use ugly pixmaps - background-image: -gtk-scaled( - url("assets/switch.png"), - url("assets/switch@2.png")); - &:hover { - transition: all 350ms $ease-out-quad; - background-image: -gtk-scaled( - url("assets/switch-hover.png"), - url("assets/switch-hover@2.png")); - } - - &:checked { - transition: all 350ms $ease-out-quad; - background-image: -gtk-scaled( - url("assets/switch-active.png"), - url("assets/switch-active@2.png")); - - &:hover { - background-image: -gtk-scaled( - url("assets/switch-active-hover.png"), - url("assets/switch-active-hover@2.png")); - } - - &:disabled, - &:disabled:hover { - background-image: -gtk-scaled( - url("assets/switch-active-insensitive.png"), - url("assets/switch-active-insensitive@2.png")); - } - } - - &:disabled, - &:disabled:hover { - background-image: -gtk-scaled( - url("assets/switch-insensitive#{$asset_suffix}.png"), - url("assets/switch-insensitive#{$asset_suffix}@2.png")); - } - } -} - -%switch_mac { - // 'indeterminate' is the synthetic wildcard - &:not(:indeterminate) { - @extend %reset_switch; - min-width: 50px; - min-height: 20px; - margin: 6px 2px; - background-size: 50px 20px; - transition: all 350ms $ease-out-quad; - - slider:not(:indeterminate) { - @extend %reset_switch; - margin: 0; - background-size: 50px 20px; - } - - // use ugly pixmaps - background-image: -gtk-scaled(url("assets/toggle-off.png"), - url("assets/toggle-off@2.png")); - - &:checked { - transition: all 350ms $ease-out-quad; - background-image: -gtk-scaled(url("assets/toggle-on.png"), - url("assets/toggle-on@2.png")); - - &:disabled { - background-image: -gtk-scaled(url("assets/toggle-on-disabled.png"), - url("assets/toggle-on-disabled@2.png")); - } - } - - &:disabled { - background-image: -gtk-scaled(url("assets/toggle-off-disabled.png"), - url("assets/toggle-off-disabled@2.png")); - } + to { + background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, + rgba($selected_bg_color, 0.75) 100%, + rgba($selected_bg_color, 0.0) 0%); } } switch { transition: $longer_transition; - // margin: 6px 0; - border-radius: 50px; - background-color: rgba($fg_color, 0.3); + border-radius: $circular_radius; + background-color: transparent; background-clip: padding-box; - color: rgba($fg_color, 0.3); + color: transparent; + min-widt: 40px; + min-height: 24px; font-size: 0; + box-shadow: inset 0 1px 2px rgba(black, 0.1); + background-image: $switch_image, radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); &:disabled { - color: rgba($fg_color, 0.15); - background-color: rgba($fg_color, 0.15); + color: transparent; + background-color: transparent; + background-image: $switch_disabled_image; } &:checked { animation: $switch_animation; - background-color: $selected_bg_color; - color: rgba(white, 0.65); + background-color: transparent; + color: transparent; + box-shadow: inset 0 1px 2px rgba(black, 0.15); + transition: background-image 0.3s, box-shadow 0; + background-image: $switch_checked_image, radial-gradient(circle farthest-corner at center, rgba($selected_bg_color, 0.75) 100%, transparent 0%); &:disabled { - background-color: rgba($selected_bg_color, 0.45); - color: rgba(white, 0.35); + background-color: transparent; + background-image: $switch_checked_disabled_image; + color: transparent; } } slider { transition: $longer_transition, $shadow_transition, margin 0; - min-width: 18px; - min-height: 18px; - margin: 2px 0 2px 2px; - border-radius: 50px; - -gtk-outline-radius: 50px; + min-width: 22px; + min-height: 22px; + margin: 1px 0 1px 1px; + border-radius: $circular_radius; + -gtk-outline-radius: $circular_radius; background-color: white; - box-shadow: $shadow_5; + box-shadow: 0 1px 2px rgba(black, 0.15); } - &:hover slider { box-shadow: $shadow_4; } + &:hover slider { box-shadow: $shadow_5; } &:checked slider { - margin: 2px 2px 2px 0; + margin: 1px 1px 1px 0; background-color: $selected_fg_color; } &:disabled slider { @include entry(disabled); } &:checked:disabled slider { animation: none; } - - // row & { @extend %switch_pixmap; } } // @@ -3946,7 +3860,7 @@ decoration { box-shadow: 0 3px 3px 0 $wm_shadow, 0 8px 8px 0 $wm_shadow, 0 16px 16px 0 $wm_shadow, - $wm_border; + $wm_outline; // this is used for the resize cursor area margin: 6px; @@ -3957,7 +3871,7 @@ decoration { box-shadow: 0 3px 3px 0 $wm_shadow, 0 8px 8px 0 transparent, 0 16px 16px 0 transparent, - $wm_border; + $wm_outline; } .maximized &, @@ -3968,7 +3882,7 @@ decoration { .tiled-bottom &, .tiled-left & { border-radius: 0; - box-shadow: 0 3px 3px 0 $wm_shadow, $wm_border; + box-shadow: 0 3px 3px 0 $wm_shadow, $wm_outline; } .popup & { @@ -3980,13 +3894,13 @@ decoration { .ssd & { margin: -5px; border-radius: $wm_radius $wm_radius 0 0; - box-shadow: 0 0 5px 0 $wm_shadow, $wm_border; + box-shadow: 0 0 5px 0 $wm_shadow, $wm_outline; &.maximized { border-radius: 0; } } .csd.popup & { border-radius: $mn_radius; - box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15), 0 8px 15px rgba(0, 0, 0, 0.08), $wm_border; + box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15), 0 8px 15px rgba(0, 0, 0, 0.08), $wm_outline; } tooltip.csd & { diff --git a/src/sass/gtk/_drawing.scss b/src/sass/gtk/_drawing.scss index 421dc3a8..ebb41ad1 100644 --- a/src/sass/gtk/_drawing.scss +++ b/src/sass/gtk/_drawing.scss @@ -1,20 +1,4 @@ // Animations -$switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1); - -@keyframes switch_ripple_effect { - from { - background-image: radial-gradient(circle farthest-corner at center, - $selected_bg_color 0%, - transparent 0%); - } - - to { - background-image: radial-gradient(circle farthest-corner at center, - $selected_bg_color 100%, - transparent 0%); - } -} - @keyframes header_ripple_effect { from { background-image: radial-gradient(circle farthest-corner at center,