From c88ed88cf34b14a01035cbc7430ff232af9e77c4 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 23 Dec 2021 13:23:18 +0800 Subject: [PATCH] Fixed issues --- src/main/cinnamon/cinnamon-dark.css | 2 +- src/main/cinnamon/cinnamon-light.css | 2 +- src/main/cinnamon/cinnamon.css | 2 +- .../shell-40-0/gnome-shell-dark.css | 3 +- .../shell-40-0/gnome-shell-light.css | 3 +- .../gnome-shell/shell-40-0/gnome-shell.css | 3 +- src/main/gtk-3.0/gtk-dark.css | 44 +++++----- src/main/gtk-3.0/gtk-light.css | 46 ++++++----- src/main/gtk-3.0/gtk.css | 46 ++++++----- src/main/gtk-4.0/gtk-dark.css | 80 ++++++++++++------- src/main/gtk-4.0/gtk-light.css | 80 ++++++++++++------- src/main/gtk-4.0/gtk.css | 80 ++++++++++++------- src/sass/_variables.scss | 32 ++++---- .../gnome-shell/widgets-40-0/_app-grid.scss | 3 +- src/sass/gtk/_common-3.0.scss | 30 +++---- src/sass/gtk/_common-4.0.scss | 61 ++++++++------ 16 files changed, 297 insertions(+), 220 deletions(-) diff --git a/src/main/cinnamon/cinnamon-dark.css b/src/main/cinnamon/cinnamon-dark.css index b8c03118..b5c9948b 100644 --- a/src/main/cinnamon/cinnamon-dark.css +++ b/src/main/cinnamon/cinnamon-dark.css @@ -273,7 +273,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: rgba(25, 25, 25, 0.9); color: white; margin: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); font-size: 1em; font-weight: normal; text-align: center; diff --git a/src/main/cinnamon/cinnamon-light.css b/src/main/cinnamon/cinnamon-light.css index bf29f732..9b503f82 100644 --- a/src/main/cinnamon/cinnamon-light.css +++ b/src/main/cinnamon/cinnamon-light.css @@ -273,7 +273,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: rgba(52, 52, 52, 0.9); color: white; margin: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); font-size: 1em; font-weight: normal; text-align: center; diff --git a/src/main/cinnamon/cinnamon.css b/src/main/cinnamon/cinnamon.css index f2548bef..0102b3ba 100644 --- a/src/main/cinnamon/cinnamon.css +++ b/src/main/cinnamon/cinnamon.css @@ -273,7 +273,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: rgba(52, 52, 52, 0.9); color: white; margin: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); font-size: 1em; font-weight: normal; text-align: center; diff --git a/src/main/gnome-shell/shell-40-0/gnome-shell-dark.css b/src/main/gnome-shell/shell-40-0/gnome-shell-dark.css index 248a6b40..bb3969a6 100644 --- a/src/main/gnome-shell/shell-40-0/gnome-shell-dark.css +++ b/src/main/gnome-shell/shell-40-0/gnome-shell-dark.css @@ -2975,9 +2975,10 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .page-navigation-arrow { - margin: 6px; + margin: 0; width: 24px; height: 24px; + color: white; } #dash { diff --git a/src/main/gnome-shell/shell-40-0/gnome-shell-light.css b/src/main/gnome-shell/shell-40-0/gnome-shell-light.css index 6ab8bde9..d23d0946 100644 --- a/src/main/gnome-shell/shell-40-0/gnome-shell-light.css +++ b/src/main/gnome-shell/shell-40-0/gnome-shell-light.css @@ -2975,9 +2975,10 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .page-navigation-arrow { - margin: 6px; + margin: 0; width: 24px; height: 24px; + color: white; } #dash { diff --git a/src/main/gnome-shell/shell-40-0/gnome-shell.css b/src/main/gnome-shell/shell-40-0/gnome-shell.css index 197e50b2..2a5a73f1 100644 --- a/src/main/gnome-shell/shell-40-0/gnome-shell.css +++ b/src/main/gnome-shell/shell-40-0/gnome-shell.css @@ -2975,9 +2975,10 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { } .page-navigation-arrow { - margin: 6px; + margin: 0; width: 24px; height: 24px; + color: white; } #dash { diff --git a/src/main/gtk-3.0/gtk-dark.css b/src/main/gtk-3.0/gtk-dark.css index ce3937f2..cc80a495 100644 --- a/src/main/gtk-3.0/gtk-dark.css +++ b/src/main/gtk-3.0/gtk-dark.css @@ -1180,12 +1180,12 @@ frame.documents-dropdown, .app-notification, toolbar.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 6px; border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } frame.documents-dropdown:backdrop, .app-notification:backdrop, toolbar.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); } frame.left.documents-dropdown, .left.app-notification, frame.right.documents-dropdown, .right.app-notification, frame.top.documents-dropdown, .top.app-notification, frame.bottom.documents-dropdown, .bottom.app-notification, toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { @@ -2005,12 +2005,12 @@ popover.background { popover.background, .csd popover.background { border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.75); background-clip: border-box; } popover.background:backdrop, .csd popover.background:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); + box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.05), 0 2px 3px -1px rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.75); } popover.background > stack { @@ -3861,7 +3861,7 @@ colorswatch overlay:hover { } colorswatch#add-color-button { - border-radius: 6px 6px 0 0; + border-radius: 6px 0 0 6px; } colorswatch#add-color-button:only-child { @@ -3897,15 +3897,19 @@ colorswatch#editor-color-sample overlay { border-radius: 12px; } +colorswatch#editor-color-sample overlay:hover { + box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); +} + colorchooser .popover.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } colorchooser .popover.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); } /******** @@ -3921,7 +3925,7 @@ colorchooser .popover.osd:backdrop { decoration { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 12px; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 36px transparent; + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 36px transparent; margin: 8px; } @@ -3932,7 +3936,7 @@ decoration { } decoration:backdrop { - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 36px transparent; + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 36px transparent; } .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { @@ -3959,7 +3963,7 @@ decoration:backdrop { .csd.popup decoration { border-radius: 12px; border: none; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.75); } tooltip.csd decoration { @@ -5234,7 +5238,7 @@ GdMainIconView.content-view { .documents-counter { margin: 8px; border-radius: 9999px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); background-color: #5b9bf8; color: white; font-weight: bold; @@ -5763,7 +5767,7 @@ window.background.csd.unified.fullscreen > decoration-overlay { *********/ overlay > revealer.left > scrolledwindow.frame, overlay > revealer.right > scrolledwindow.frame { border-style: none; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); } overlay > revealer.left > scrolledwindow.frame { @@ -6622,7 +6626,7 @@ na-tray-applet { .lock-dialog { border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 7px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } @@ -6672,7 +6676,7 @@ MsdOsdWindow.background.osd .progressbar { .budgie-popover { border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); background-clip: border-box; background-color: #2C2C2C; border-radius: 12px; @@ -7111,7 +7115,7 @@ frame.raven-frame > border { .raven { background-color: #3C3C3C; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); } .raven > box { @@ -7290,7 +7294,7 @@ calendar.raven-calendar:selected { margin: 5px 9px; padding: 3px; border-radius: 12px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } @@ -7318,7 +7322,7 @@ calendar.raven-calendar:selected { .budgie-polkit-dialog > decoration, .budgie-run-dialog > decoration { border: none; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); } .budgie-session-dialog label:not(:last-child), @@ -7444,7 +7448,7 @@ window#whiskermenu-window > frame > border { margin: 6px; border: none; background-color: #2C2C2C; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } window#whiskermenu-window box.categories > button.radio { @@ -7490,7 +7494,7 @@ window#whiskermenu-window .title-area > .commands-area > button.flat.command-but } #XfceNotifyWindow { - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); } #XfceNotifyWindow buttonbox { @@ -7580,7 +7584,7 @@ window.background.csd.thunar > grid.horizontal > paned.horizontal > scrolledwind #restart_dialog { margin: 8px; border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } diff --git a/src/main/gtk-3.0/gtk-light.css b/src/main/gtk-3.0/gtk-light.css index eec0671c..51499fdd 100644 --- a/src/main/gtk-3.0/gtk-light.css +++ b/src/main/gtk-3.0/gtk-light.css @@ -1180,12 +1180,12 @@ frame.documents-dropdown, .app-notification, toolbar.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 6px; border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } frame.documents-dropdown:backdrop, .app-notification:backdrop, toolbar.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); } frame.left.documents-dropdown, .left.app-notification, frame.right.documents-dropdown, .right.app-notification, frame.top.documents-dropdown, .top.app-notification, frame.bottom.documents-dropdown, .bottom.app-notification, toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { @@ -2004,13 +2004,13 @@ popover.background { } popover.background, .csd popover.background { - border: 1px solid rgba(0, 0, 0, 0.25); - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + border: 1px solid rgba(0, 0, 0, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.05); background-clip: padding-box; } popover.background:backdrop, .csd popover.background:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.05), 0 2px 3px -1px rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.05); } popover.background > stack { @@ -3861,7 +3861,7 @@ colorswatch overlay:hover { } colorswatch#add-color-button { - border-radius: 6px 6px 0 0; + border-radius: 6px 0 0 6px; } colorswatch#add-color-button:only-child { @@ -3897,15 +3897,19 @@ colorswatch#editor-color-sample overlay { border-radius: 12px; } +colorswatch#editor-color-sample overlay:hover { + box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); +} + colorchooser .popover.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } colorchooser .popover.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); } /******** @@ -3921,12 +3925,12 @@ colorchooser .popover.osd:backdrop { decoration { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 12px; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; margin: 8px; } decoration:backdrop { - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; } .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { @@ -3953,7 +3957,7 @@ decoration:backdrop { .csd.popup decoration { border-radius: 12px; border: none; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12); } tooltip.csd decoration { @@ -5225,7 +5229,7 @@ GdMainIconView.content-view { .documents-counter { margin: 8px; border-radius: 9999px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); background-color: #3c84f7; color: white; font-weight: bold; @@ -5754,7 +5758,7 @@ window.background.csd.unified.fullscreen > decoration-overlay { *********/ overlay > revealer.left > scrolledwindow.frame, overlay > revealer.right > scrolledwindow.frame { border-style: none; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); } overlay > revealer.left > scrolledwindow.frame { @@ -6613,7 +6617,7 @@ na-tray-applet { .lock-dialog { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 7px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } @@ -6663,7 +6667,7 @@ MsdOsdWindow.background.osd .progressbar { .budgie-popover { border: 1px solid rgba(0, 0, 0, 0.12); - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); background-clip: padding-box; background-color: #FFFFFF; border-radius: 12px; @@ -7102,7 +7106,7 @@ frame.raven-frame > border { .raven { background-color: #FFFFFF; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); } .raven > box { @@ -7281,7 +7285,7 @@ calendar.raven-calendar:selected { margin: 5px 9px; padding: 3px; border-radius: 12px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } @@ -7309,7 +7313,7 @@ calendar.raven-calendar:selected { .budgie-polkit-dialog > decoration, .budgie-run-dialog > decoration { border: none; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); } .budgie-session-dialog label:not(:last-child), @@ -7435,7 +7439,7 @@ window#whiskermenu-window > frame > border { margin: 6px; border: none; background-color: #FFFFFF; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.15); } window#whiskermenu-window box.categories > button.radio { @@ -7481,7 +7485,7 @@ window#whiskermenu-window .title-area > .commands-area > button.flat.command-but } #XfceNotifyWindow { - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); } #XfceNotifyWindow buttonbox { @@ -7571,7 +7575,7 @@ window.background.csd.thunar > grid.horizontal > paned.horizontal > scrolledwind #restart_dialog { margin: 8px; border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } diff --git a/src/main/gtk-3.0/gtk.css b/src/main/gtk-3.0/gtk.css index 312e3aca..494f1488 100644 --- a/src/main/gtk-3.0/gtk.css +++ b/src/main/gtk-3.0/gtk.css @@ -1180,12 +1180,12 @@ frame.documents-dropdown, .app-notification, toolbar.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 6px; border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } frame.documents-dropdown:backdrop, .app-notification:backdrop, toolbar.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); } frame.left.documents-dropdown, .left.app-notification, frame.right.documents-dropdown, .right.app-notification, frame.top.documents-dropdown, .top.app-notification, frame.bottom.documents-dropdown, .bottom.app-notification, toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { @@ -2013,13 +2013,13 @@ popover.background { } popover.background, .csd popover.background { - border: 1px solid rgba(0, 0, 0, 0.25); - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + border: 1px solid rgba(0, 0, 0, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.05); background-clip: padding-box; } popover.background:backdrop, .csd popover.background:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.05), 0 2px 3px -1px rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.05); } popover.background > stack { @@ -3870,7 +3870,7 @@ colorswatch overlay:hover { } colorswatch#add-color-button { - border-radius: 6px 6px 0 0; + border-radius: 6px 0 0 6px; } colorswatch#add-color-button:only-child { @@ -3906,15 +3906,19 @@ colorswatch#editor-color-sample overlay { border-radius: 12px; } +colorswatch#editor-color-sample overlay:hover { + box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); +} + colorchooser .popover.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } colorchooser .popover.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); } /******** @@ -3930,12 +3934,12 @@ colorchooser .popover.osd:backdrop { decoration { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 12px; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; margin: 8px; } decoration:backdrop { - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; } .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left decoration { @@ -3962,7 +3966,7 @@ decoration:backdrop { .csd.popup decoration { border-radius: 12px; border: none; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12); } tooltip.csd decoration { @@ -5234,7 +5238,7 @@ GdMainIconView.content-view { .documents-counter { margin: 8px; border-radius: 9999px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); background-color: #3c84f7; color: white; font-weight: bold; @@ -5763,7 +5767,7 @@ window.background.csd.unified.fullscreen > decoration-overlay { *********/ overlay > revealer.left > scrolledwindow.frame, overlay > revealer.right > scrolledwindow.frame { border-style: none; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); } overlay > revealer.left > scrolledwindow.frame { @@ -6622,7 +6626,7 @@ na-tray-applet { .lock-dialog { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 7px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } @@ -6672,7 +6676,7 @@ MsdOsdWindow.background.osd .progressbar { .budgie-popover { border: 1px solid rgba(0, 0, 0, 0.12); - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); background-clip: padding-box; background-color: #FFFFFF; border-radius: 12px; @@ -7111,7 +7115,7 @@ frame.raven-frame > border { .raven { background-color: #FFFFFF; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12); } .raven > box { @@ -7290,7 +7294,7 @@ calendar.raven-calendar:selected { margin: 5px 9px; padding: 3px; border-radius: 12px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } @@ -7318,7 +7322,7 @@ calendar.raven-calendar:selected { .budgie-polkit-dialog > decoration, .budgie-run-dialog > decoration { border: none; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); } .budgie-session-dialog label:not(:last-child), @@ -7444,7 +7448,7 @@ window#whiskermenu-window > frame > border { margin: 6px; border: none; background-color: #FFFFFF; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.15); } window#whiskermenu-window box.categories > button.radio { @@ -7490,7 +7494,7 @@ window#whiskermenu-window .title-area > .commands-area > button.flat.command-but } #XfceNotifyWindow { - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); } #XfceNotifyWindow buttonbox { @@ -7580,7 +7584,7 @@ window.background.csd.thunar > grid.horizontal > paned.horizontal > scrolledwind #restart_dialog { margin: 8px; border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } diff --git a/src/main/gtk-4.0/gtk-dark.css b/src/main/gtk-4.0/gtk-dark.css index 00cdd334..50aa5e74 100644 --- a/src/main/gtk-4.0/gtk-dark.css +++ b/src/main/gtk-4.0/gtk-dark.css @@ -139,7 +139,7 @@ popover.background.magnifier > contents, .osd { .osd { padding: 6px; margin: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); } .osd.circular { @@ -1133,13 +1133,13 @@ toolbar.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 6px; border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } .app-notification:backdrop, .toolbar.osd:backdrop, toolbar.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); } .left.app-notification, .right.app-notification, .top.app-notification, .bottom.app-notification, .toolbar.osd.left, .toolbar.osd.right, .toolbar.osd.top, .toolbar.osd.bottom, @@ -1892,12 +1892,12 @@ popover.background > contents { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background-clip: border-box; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 3px -1px rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.05); } popover.background > arrow:backdrop, popover.background > contents:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75); + box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.05), 0 2px 3px -1px rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.75); } popover.background > contents > list, @@ -4125,7 +4125,7 @@ tooltip { tooltip.background { background-color: rgba(25, 25, 25, 0.9); color: white; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; margin: 2px 6px 8px 6px; border: none; @@ -4139,43 +4139,43 @@ tooltip > box { * Color Chooser * *****************/ colorswatch.top { - border-top-left-radius: 12px; - border-top-right-radius: 12px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } colorswatch.top overlay { - border-top-left-radius: 12px; - border-top-right-radius: 12px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } colorswatch.bottom { - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.bottom overlay { - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.left, colorswatch:first-child:not(.top) { - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; } colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; } colorswatch.right, colorswatch:last-child:not(.bottom) { - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.dark { @@ -4186,17 +4186,31 @@ colorswatch.light { color: rgba(0, 0, 0, 0.87); } +colorchooser colorswatch:hover { + transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); + box-shadow: 0 0 0 2px #5b9bf8; +} + colorswatch#add-color-button { - border-radius: 12px 12px 0 0; + border-radius: 6px 0 0 6px; color: white; } colorswatch#add-color-button:only-child { - border-radius: 12px; + border-radius: 6px; } colorswatch#add-color-button overlay { - background-color: #3C3C3C; + background-color: rgba(255, 255, 255, 0.04); +} + +colorswatch#add-color-button overlay:hover { + background-color: rgba(255, 255, 255, 0.12); + box-shadow: none; +} + +colorswatch#add-color-button overlay:active { + background-color: rgba(255, 255, 255, 0.3); } colorswatch:disabled { @@ -4208,22 +4222,26 @@ colorswatch:disabled overlay { } colorswatch#editor-color-sample { - border-radius: 12px; + border-radius: 6px; } colorswatch#editor-color-sample overlay { - border-radius: 12px; + border-radius: 6px; +} + +colorswatch#editor-color-sample overlay:hover { + box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } colorchooser .popover.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); background-color: #3C3C3C; } colorchooser .popover.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1); } /******** @@ -4243,11 +4261,11 @@ window.csd { outline-offset: -1px; outline-style: solid; outline-width: 1px; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 36px transparent; + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 36px transparent; } window.csd:backdrop { - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 36px transparent; + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 36px transparent; } window.csd.popup { diff --git a/src/main/gtk-4.0/gtk-light.css b/src/main/gtk-4.0/gtk-light.css index 7c8ecfd0..81232320 100644 --- a/src/main/gtk-4.0/gtk-light.css +++ b/src/main/gtk-4.0/gtk-light.css @@ -139,7 +139,7 @@ popover.background.magnifier > contents, .osd { .osd { padding: 6px; margin: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); } .osd.circular { @@ -1133,13 +1133,13 @@ toolbar.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 6px; border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } .app-notification:backdrop, .toolbar.osd:backdrop, toolbar.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); } .left.app-notification, .right.app-notification, .top.app-notification, .bottom.app-notification, .toolbar.osd.left, .toolbar.osd.right, .toolbar.osd.top, .toolbar.osd.bottom, @@ -1892,12 +1892,12 @@ popover.background > contents { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); background-clip: border-box; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 3px -1px rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.05); } popover.background > arrow:backdrop, popover.background > contents:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.05), 0 2px 3px -1px rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12); } popover.background > arrow { @@ -4133,7 +4133,7 @@ tooltip { tooltip.background { background-color: rgba(52, 52, 52, 0.9); color: white; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; margin: 2px 6px 8px 6px; border: none; @@ -4147,43 +4147,43 @@ tooltip > box { * Color Chooser * *****************/ colorswatch.top { - border-top-left-radius: 12px; - border-top-right-radius: 12px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } colorswatch.top overlay { - border-top-left-radius: 12px; - border-top-right-radius: 12px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } colorswatch.bottom { - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.bottom overlay { - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.left, colorswatch:first-child:not(.top) { - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; } colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; } colorswatch.right, colorswatch:last-child:not(.bottom) { - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.dark { @@ -4194,17 +4194,31 @@ colorswatch.light { color: rgba(0, 0, 0, 0.87); } +colorchooser colorswatch:hover { + transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); + box-shadow: 0 0 0 2px #3c84f7; +} + colorswatch#add-color-button { - border-radius: 12px 12px 0 0; + border-radius: 6px 0 0 6px; color: rgba(0, 0, 0, 0.87); } colorswatch#add-color-button:only-child { - border-radius: 12px; + border-radius: 6px; } colorswatch#add-color-button overlay { - background-color: #FFFFFF; + background-color: rgba(0, 0, 0, 0.04); +} + +colorswatch#add-color-button overlay:hover { + background-color: rgba(0, 0, 0, 0.12); + box-shadow: none; +} + +colorswatch#add-color-button overlay:active { + background-color: rgba(0, 0, 0, 0.26); } colorswatch:disabled { @@ -4216,22 +4230,26 @@ colorswatch:disabled overlay { } colorswatch#editor-color-sample { - border-radius: 12px; + border-radius: 6px; } colorswatch#editor-color-sample overlay { - border-radius: 12px; + border-radius: 6px; +} + +colorswatch#editor-color-sample overlay:hover { + box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } colorchooser .popover.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } colorchooser .popover.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); } /******** @@ -4251,11 +4269,11 @@ window.csd { outline-offset: -1px; outline-style: solid; outline-width: 1px; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; } window.csd:backdrop { - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; } window.csd.popup { diff --git a/src/main/gtk-4.0/gtk.css b/src/main/gtk-4.0/gtk.css index 794e6336..0c8db200 100644 --- a/src/main/gtk-4.0/gtk.css +++ b/src/main/gtk-4.0/gtk.css @@ -139,7 +139,7 @@ popover.background.magnifier > contents, .osd { .osd { padding: 6px; margin: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); } .osd.circular { @@ -1133,13 +1133,13 @@ toolbar.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); padding: 6px; border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } .app-notification:backdrop, .toolbar.osd:backdrop, toolbar.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); } .left.app-notification, .right.app-notification, .top.app-notification, .bottom.app-notification, .toolbar.osd.left, .toolbar.osd.right, .toolbar.osd.top, .toolbar.osd.bottom, @@ -1901,12 +1901,12 @@ popover.background > contents { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); background-clip: border-box; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 3px -1px rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.05); } popover.background > arrow:backdrop, popover.background > contents:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.05), 0 2px 3px -1px rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12); } popover.background > arrow { @@ -4142,7 +4142,7 @@ tooltip { tooltip.background { background-color: rgba(52, 52, 52, 0.9); color: white; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; margin: 2px 6px 8px 6px; border: none; @@ -4156,43 +4156,43 @@ tooltip > box { * Color Chooser * *****************/ colorswatch.top { - border-top-left-radius: 12px; - border-top-right-radius: 12px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } colorswatch.top overlay { - border-top-left-radius: 12px; - border-top-right-radius: 12px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } colorswatch.bottom { - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.bottom overlay { - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.left, colorswatch:first-child:not(.top) { - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; } colorswatch.left overlay, colorswatch:first-child:not(.top) overlay { - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; } colorswatch.right, colorswatch:last-child:not(.bottom) { - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; } colorswatch.dark { @@ -4203,17 +4203,31 @@ colorswatch.light { color: rgba(0, 0, 0, 0.87); } +colorchooser colorswatch:hover { + transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); + box-shadow: 0 0 0 2px #3c84f7; +} + colorswatch#add-color-button { - border-radius: 12px 12px 0 0; + border-radius: 6px 0 0 6px; color: rgba(0, 0, 0, 0.87); } colorswatch#add-color-button:only-child { - border-radius: 12px; + border-radius: 6px; } colorswatch#add-color-button overlay { - background-color: #FFFFFF; + background-color: rgba(0, 0, 0, 0.04); +} + +colorswatch#add-color-button overlay:hover { + background-color: rgba(0, 0, 0, 0.12); + box-shadow: none; +} + +colorswatch#add-color-button overlay:active { + background-color: rgba(0, 0, 0, 0.26); } colorswatch:disabled { @@ -4225,22 +4239,26 @@ colorswatch:disabled overlay { } colorswatch#editor-color-sample { - border-radius: 12px; + border-radius: 6px; } colorswatch#editor-color-sample overlay { - border-radius: 12px; + border-radius: 6px; +} + +colorswatch#editor-color-sample overlay:hover { + box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 2px -0.6px rgba(0, 0, 0, 0.17); } colorchooser .popover.osd { transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1); border-radius: 6px; - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); background-color: #FFFFFF; } colorchooser .popover.osd:backdrop { - box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 3px 2px -3px rgba(0, 0, 0, 0.2), 0 2px 2px -1px rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15); } /******** @@ -4260,11 +4278,11 @@ window.csd { outline-offset: -1px; outline-style: solid; outline-width: 1px; - box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; + box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 15px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; } window.csd:backdrop { - box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 36px transparent; } window.csd.popup { diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index f05f7ae4..50175c12 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -60,22 +60,26 @@ $shadow-z1: 0 1px 2px -1px rgba(black, 0.24), 0 1px 2px -.6px rgba(black, 0.17); $shadow-z2: - 0 3px 2px -3px rgba(black, 0.3), + 0 3px 2px -3px rgba(black, 0.2), 0 2px 2px -1px rgba(black, 0.24), - 0 1px (5px * .6) 0 rgba(black, 0.12); + 0 1px 3px 0 rgba(black, 0.12); $shadow-z3: - 0 3px 2px -2px rgba(black, 0.2), - 0 3px (4px * .6) 0 rgba(black, 0.14), - 0 1px (8px * .6) 0 rgba(black, 0.12); + 0 3px 2px -2px rgba(black, 0.05), + 0 2px 3px -1px rgba(black, 0.06), + 0 1px 4px 0 rgba(black, 0.05); $shadow-z4: - 0 2px (4px * .6) -1px rgba(black, 0.2), - 0 4px (5px * .6) 0 rgba(black, 0.14), - 0 1px (10px * .6) 0 rgba(black, 0.12); + 0 2px 3px -1px rgba(black, 0.15), + 0 4px 3px 0 rgba(black, 0.18), + 0 1px 6px 0 rgba(black, 0.12); +$shadow-z5: + 0 2px 3px -1px rgba(black, 0.05), + 0 4px 6px 0 rgba(black, 0.06), + 0 1px 10px 0 rgba(black, 0.05); $shadow-z12: - 0 7px (8px * .6) -4px rgba(black, 0.2), - 0 12px (17px * .6) 2px rgba(black, 0.14), - 0 5px (22px * .6) 4px rgba(black, 0.12); + 0 7px 5px -4px rgba(black, 0.2), + 0 12px 10px 2px rgba(black, 0.14), + 0 5px 13px 4px rgba(black, 0.12); $shadow-z16: - 0 8px (10px * .6) -5px rgba(black, 0.2), - 0 16px (24px * .6) 2px rgba(black, 0.14), - 0 6px (30px * .6) 5px rgba(black, 0.12); + 0 8px 6px -5px rgba(black, 0.2), + 0 16px 15px 2px rgba(black, 0.14), + 0 6px 18px 5px rgba(black, 0.12); diff --git a/src/sass/gnome-shell/widgets-40-0/_app-grid.scss b/src/sass/gnome-shell/widgets-40-0/_app-grid.scss index 4110e193..e4bd4523 100644 --- a/src/sass/gnome-shell/widgets-40-0/_app-grid.scss +++ b/src/sass/gnome-shell/widgets-40-0/_app-grid.scss @@ -55,7 +55,8 @@ $app_icon_spacing: 6px; } .page-navigation-arrow { - margin: $base_margin + 2px; + margin: 0; width: 24px; height: 24px; + color: white; } diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss index 6fec1c9b..294f9c2c 100644 --- a/src/sass/gtk/_common-3.0.scss +++ b/src/sass/gtk/_common-3.0.scss @@ -1780,21 +1780,21 @@ popover.background { &, .csd & { @if $rimless == 'true' { border: none; - box-shadow: $shadow-z4; + box-shadow: $shadow-z5; - &:backdrop { box-shadow: $shadow-z2; } + &:backdrop { box-shadow: $shadow-z3; } } @else if $variant == 'dark' { border: 1px solid highlight($surface); - box-shadow: $shadow-z4, 0 0 0 1px $window-border; + box-shadow: $shadow-z5, 0 0 0 1px $window-border; background-clip: border-box; - &:backdrop { box-shadow: $shadow-z2, 0 0 0 1px $window-border; } + &:backdrop { box-shadow: $shadow-z3, 0 0 0 1px $window-border; } } @else { - border: 1px solid rgba(black, 0.25); - box-shadow: $shadow-z4; + border: 1px solid rgba(black, 0.15); + box-shadow: $shadow-z5; background-clip: padding-box; - &:backdrop { box-shadow: $shadow-z2; } + &:backdrop { box-shadow: $shadow-z3; } } } @@ -2724,10 +2724,7 @@ levelbar { // imitate the entry style trough { - // padding: 2px; border-radius: $corner-radius; - // box-shadow: $shadow-z1; - // background-color: $base; // &:disabled { background-color: $base-alt; } } @@ -3570,12 +3567,10 @@ colorswatch { transition: $transition-shadow; &:hover { box-shadow: 0 0 0 2px $primary; } - - // &:drop(active) { } } &#add-color-button { - border-radius: $corner-radius $corner-radius 0 0; + border-radius: $corner-radius 0 0 $corner-radius; &:only-child { border-radius: $corner-radius; } @@ -3594,15 +3589,12 @@ colorswatch { overlay { box-shadow: none; } } - row:selected & { - } - &#editor-color-sample { border-radius: $menu-radius; overlay { border-radius: $menu-radius; } - // overlay:hover { box-shadow: $shadow-z1; } + overlay:hover { box-shadow: $shadow-z1; } } } @@ -3713,9 +3705,9 @@ decoration { border: none; @if $rimless == 'true' { - box-shadow: $shadow-z4; + box-shadow: $shadow-z5; } @else { - box-shadow: $shadow-z4, 0 0 0 1px $window-border; + box-shadow: $shadow-z5, 0 0 0 1px $window-border; } } diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index 1704d306..534dee71 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -1702,18 +1702,18 @@ popover.background { @if $rimless == 'true' { border: none; - box-shadow: $shadow-z4; + box-shadow: $shadow-z5; } @else { border: 1px solid highlight($surface); background-clip: border-box; - box-shadow: 0 0 0 1px $window-border, $shadow-z4; + box-shadow: 0 0 0 1px $window-border, $shadow-z5; } &:backdrop { @if $rimless == 'true' { - box-shadow: $shadow-z2; + box-shadow: $shadow-z3; } @else { - box-shadow: $shadow-z2, 0 0 0 1px $window-border; + box-shadow: $shadow-z3, 0 0 0 1px $window-border; } } } @@ -3828,44 +3828,44 @@ colorswatch { // nth-child is needed by the custom color strip. &.top { - border-top-left-radius: $menu-radius; - border-top-right-radius: $menu-radius; + border-top-left-radius: $corner-radius; + border-top-right-radius: $corner-radius; overlay { - border-top-left-radius: $menu-radius; - border-top-right-radius: $menu-radius; + border-top-left-radius: $corner-radius; + border-top-right-radius: $corner-radius; } } &.bottom { - border-bottom-left-radius: $menu-radius; - border-bottom-right-radius: $menu-radius; + border-bottom-left-radius: $corner-radius; + border-bottom-right-radius: $corner-radius; overlay { - border-bottom-left-radius: $menu-radius; - border-bottom-right-radius: $menu-radius; + border-bottom-left-radius: $corner-radius; + border-bottom-right-radius: $corner-radius; } } &.left, &:first-child:not(.top) { - border-top-left-radius: $menu-radius; - border-bottom-left-radius: $menu-radius; + border-top-left-radius: $corner-radius; + border-bottom-left-radius: $corner-radius; overlay { - border-top-left-radius: $menu-radius; - border-bottom-left-radius: $menu-radius; + border-top-left-radius: $corner-radius; + border-bottom-left-radius: $corner-radius; } } &.right, &:last-child:not(.bottom) { - border-top-right-radius: $menu-radius; - border-bottom-right-radius: $menu-radius; + border-top-right-radius: $corner-radius; + border-bottom-right-radius: $corner-radius; overlay { - border-top-right-radius: $menu-radius; - border-bottom-right-radius: $menu-radius; + border-top-right-radius: $corner-radius; + border-bottom-right-radius: $corner-radius; } } @@ -3873,14 +3873,23 @@ colorswatch { &.light { color: on(light); } + colorchooser &:hover { + transition: $transition-shadow; + box-shadow: 0 0 0 2px $primary; + } + &#add-color-button { - border-radius: $menu-radius $menu-radius 0 0; + border-radius: $corner-radius 0 0 $corner-radius; color: $text; - &:only-child { border-radius: $menu-radius; } + &:only-child { border-radius: $corner-radius; } overlay { - background-color: $surface; + background-color: $fill; + + &:hover { background-color: $divider; box-shadow: none; } + + &:active { background-color: $track; } } } @@ -3891,9 +3900,11 @@ colorswatch { } &#editor-color-sample { - border-radius: $menu-radius; + border-radius: $corner-radius; - overlay { border-radius: $menu-radius; } + overlay { border-radius: $corner-radius; } + + overlay:hover { box-shadow: $shadow-z1; } } }