csd: tweak CSS for titlebar decorations

- use color defines exported to the metacity theme for buttons and
  titlebars
- remove a stray box shadow
- improve a bit buttons' borders; GTK fixes are needed for a proper
  solution still

3 files changed, 29 insertions, 22 deletions

diff --git a/themes/Adwaita/gtk-3.0/gtk-main-dark.css b/themes/Adwaita/gtk-3.0/gtk-main-dark.css
index 33c13016..1b82ac20 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main-dark.css
@@ -183,6 +183,7 @@
 @define-color wm_highlight shade(@theme_bg_color, 1.4);
 @define-color wm_title_highlight_dark @button_text_shadow;
 @define-color wm_title_highlight alpha(#000000, 0.0);
+@define-color wm_title_shadow @wm_title_highlight_dark;
 
 @define-color wm_bg_a shade (@theme_bg_color, 1.3);
 @define-color wm_bg_b @theme_bg_color;
diff --git a/themes/Adwaita/gtk-3.0/gtk-main.css b/themes/Adwaita/gtk-3.0/gtk-main.css
index 1b0e54ae..bce965b9 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main.css
@@ -183,6 +183,7 @@
 @define-color wm_highlight #ffffff;
 @define-color wm_title_highlight_dark alpha(#ffffff, 0.0);
 @define-color wm_title_highlight #ffffff;
+@define-color wm_title_shadow @wm_title_highlight;
 
 @define-color wm_bg_a shade (@theme_bg_color, 1.1);
 @define-color wm_bg_b @theme_bg_color;
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index e316f8cc..82654057 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -3974,14 +3974,21 @@ GtkBubbleWindow .toolbar {
  *******/
 .titlebar {
     font: Bold 11;
-    text-shadow: 1px 1px lighter (@theme_bg_color);
+    text-shadow: 0 1px @wm_title_shadow;
+
     padding: 0;
     border-style: none;
+
+    box-shadow: none;
+    background-image: linear-gradient(to bottom,
+                                      @wm_bg_a,
+                                      @wm_bg_b);
+    border-radius: 10px 10px 0px 0px;
 }
 
 .titlebar:backdrop {
-    color: darker (@theme_bg_color);
     text-shadow: none;
+    background-image: none;
 }
 
 .titlebar .button {
@@ -3989,28 +3996,37 @@ GtkBubbleWindow .toolbar {
 }
 
 .titlebar .button {
-    border-style: none none solid;
+    border-style: none none solid solid;
     border-color: darker(@theme_bg_color);
     border-image: none;
     border-width: 1px;
     border-radius: 0px;
 
     background-image: linear-gradient(to bottom,
-                                      shade(@theme_bg_color, 1.20),
-                                      shade(@theme_bg_color, 0.80) 55%,
-                                      shade(@theme_bg_color, 0.90));
+                                      @wm_button_bg_a,
+                                      @wm_button_bg_b,
+                                      @wm_button_bg_c,
+                                      @wm_button_bg_d);
 }
 
 .titlebar .button:hover {
     background-image: linear-gradient(to bottom,
-                                      shade(@theme_bg_color, 1.35),
-                                      shade(@theme_bg_color, 0.88) 55%,
-                                      shade(@theme_bg_color, 0.94));
+                                      @wm_button_bg_hover_a,
+                                      @wm_button_bg_hover_b,
+                                      @wm_button_bg_hover_c,
+                                      @wm_button_bg_hover_d);
+}
+
+.titlebar .button:active {
+    background-image: linear-gradient(to bottom,
+                                      @wm_button_bg_active_a,
+                                      @wm_button_bg_active_b,
+                                      @wm_button_bg_active_c);
 }
 
 .titlebar .button:first-child {
-    border-style: none none solid solid;
-    border-bottom-left-radius: 10px;
+    border-style: none none solid none;
+    border-top-left-radius: 10px;
 }
 
 .titlebar .button:last-child {
@@ -4024,17 +4040,6 @@ GtkBubbleWindow .toolbar {
     border-style: none;
 }
 
-.titlebar {
-    background-image: linear-gradient(to bottom,
-                                      shade(@theme_bg_color, 1.20),
-                                      @theme_bg_color);
-    border-radius: 10px 10px 0px 0px;
-}
-
-.titlebar:backdrop {
-    background-image: none;
-}
-
 .window-border {
     border-color: darker(@theme_bg_color);
     border-radius: 10px 10px 0 0;