Merge lp:~3v1n0/ubuntu-themes/gs-decorations-fixes into lp:ubuntu-themes

[Marco Trevisan (Treviño)]

Ambiance, Radiance: fix shadows, handlers, decorations look for CSD and SSD in GS

 - Gtk Decorations theme adapted to match unity
 - Shadows follows the unity7 design for all the csd widgets
 - Enabled the resize extents for windows
 - Implemented a theme for solid-csd windows
 - Fixed tooltips

[Dmitry Shachnev (mitya57)]

This is working *much* better than the current version. Tested with gnome-control-center, gnome-calcualtor, gnome-software, nautilus — everywhere the headerbars are working fine. Thanks a lot!

review: Approve

[Ken VanDine (ken-vandine)]

Working great and looks good. Thanks for the fix!

review: Approve

[lp:~3v1n0/ubuntu-themes/gs-decorations-fixes]

554. By Marco Trevisan (Treviño) on 2017-05-10

Ambiance, Radiance: ensure all titlebars have the same padding

[Iain Lane (laney)]

I think I'll upload this. Thanks!

review: Approve

=== modified file 'Ambiance/gtk-3.20/apps/unity.css'
--- Ambiance/gtk-3.20/apps/unity.css	2016-08-01 12:10:11 +0000
+++ Ambiance/gtk-3.20/apps/unity.css	2017-05-10 12:39:09 +0000
@@ -6,9 +6,9 @@
 
     -UnityDecoration-shadow-offset-x: 1px;
     -UnityDecoration-shadow-offset-y: 5px;
-    -UnityDecoration-active-shadow-color: rgba (0, 0, 0, 0.75);
+    -UnityDecoration-active-shadow-color: alpha (@active_shadow_color, 0.75);
     -UnityDecoration-active-shadow-radius: 30px;
-    -UnityDecoration-inactive-shadow-color: rgba (0, 0, 0, 0.3);
+    -UnityDecoration-inactive-shadow-color: @inactive_shadow_color;
     -UnityDecoration-inactive-shadow-radius: 25px;
 
     -UnityDecoration-glow-size: 10px;
@@ -19,64 +19,8 @@
     -UnityDecoration-title-alignment: 0.0;
 }
 
-UnityDecoration .top {
-    border: 1px solid rgba (0, 3, 5, 0.03); /* shade (@dark_bg_color, 1.04) - shade (@dark_bg_color, 1.5) */
-    border-bottom-width: 0;
-    border-radius: 6px 6px 0 0;
-    padding: 1px 6px 0 6px;
-
-    box-shadow: inset 0 0 transparent, inset 0 0 transparent,
-                inset 0 1px shade (@dark_bg_color, 1.6), inset 0 0 transparent;
-
-    background-color: transparent;
-    background-clip: border-box;
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (@dark_bg_color, 1.5)),
-                                     to (shade (@dark_bg_color, 1.04)));
-
-    color: @dark_fg_color;
-    text-shadow: 1px 0 #333, -1px 0 #333, 0 1px #333, 0 -1px #333;
-}
-
-UnityDecoration .top:backdrop {
-    border: 1px solid rgba (14, 13, 0, 0.03); /* @dark_bg_color - shade (#474642, 0.92) */;
-    border-bottom-width: 0;
-    background-color: transparent;
-    background-clip: border-box;
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#474642, 0.92)),
-                                     to (@dark_bg_color));
-    box-shadow: inset 0 0 transparent, inset 0 0 transparent,
-                inset 0 1px #474642, inset 0 0 transparent;
-    color: #807d78;
-}
-
-UnityDecoration .left,
-UnityDecoration .right {
-    background-color: shade (@bg_color, 0.7);
-    background-size: 1px 70px;
-    background-repeat: repeat-x;
-
-    /* start color: mix of the top border color and bg-image gradient end */
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     color-stop (0, #2b2a2a),
-                                     color-stop (0.5, #2b2a2a),
-                                     color-stop (1, shade (@bg_color, 0.7)));
-}
-
-UnityDecoration .left:backdrop,
-UnityDecoration .right:backdrop {
-    /* start color: mix of the top border color and bg-image gradient end */
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     color-stop (0, #373632),
-                                     color-stop (0.5, #373632),
-                                     color-stop (1, shade (@bg_color, 0.7)));
-}
-
-UnityDecoration .bottom {
-    background-image: none;
-    background-color: shade (@bg_color, 0.7);
-}
+/* Definitions of UnityDecoration .top (and :backdrop) are now shared with
+ * Gtk .titlebar (and :backdrop); .left and .right are not used by this theme */
 
 /* Panel Style */
 
 
=== modified file 'Ambiance/gtk-3.20/gtk-main.css'
--- Ambiance/gtk-3.20/gtk-main.css	2016-08-30 09:51:51 +0000
+++ Ambiance/gtk-3.20/gtk-main.css	2017-05-10 12:39:09 +0000
@@ -13,6 +13,9 @@
 
 @define-color borders shade(@bg_color, 0.82);
 
+@define-color active_shadow_color black;
+@define-color inactive_shadow_color alpha(black, 0.3);
+
 /* misc colors used by gtk+
  *
  * Gtk doesn't currently expand color variables for style properties. Thus,
@@ -54,8 +57,6 @@
 
 @define-color scale_highlight_bg #df784e;
 
-@define-color shadow_color alpha(black, 0.5);
-
 @define-color osd_fg_color #eeeeec;
 @define-color osd_bg_color alpha(#202526, 0.7);
 @define-color osd_border_color alpha(black, 0.7);
 
=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2017-01-25 17:43:32 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2017-05-10 12:39:09 +0000
@@ -637,17 +637,6 @@
     border-width: 1px 0px 1px 0px;
 }
 
-
-/****************
- * window-frame *
- ****************/
-
-.csd.popup {
-    border-style: none;
-    border-radius: 0;
-    box-shadow: 0 3px 8px @shadow_color;
-}
-
 /************
  * iconview *
  ************/
@@ -833,6 +822,11 @@
     font-weight: normal;
 }
 
+.background.popup.csd {
+    /* Delete menus background, we don't need border-radious here */
+    background-color: transparent;
+}
+
 /***********
  * menubar *
  ***********/
@@ -1953,12 +1947,8 @@
     background-color: @base_color;
 }
 
-headerbar {
-    padding: 2px 6px;
-}
-
 /*
- * Header Bars
+ * Header Bars and decorations
  *
  * The following rules only style header bars when they are used as a window's
  * titlebar widget (i.e., they have .titlebar set as well).
@@ -1967,19 +1957,132 @@
  * that prefer showing traditional title bars. The rules for those are further
  * down grouped with normal toolbars.
  */
-.titlebar {
+decoration {
+    margin: 10px;
+    border-radius: 6px 6px 0 0;
+    box-shadow: 1px 5px 13px alpha(@active_shadow_color, 0.85);
+}
+
+decoration:backdrop,
+tooltip.csd decoration,
+.popup decoration {
+    box-shadow: 1px 5px 13px transparent, /* this should match normal shadow geometries */
+                1px 5px 8px @inactive_shadow_color;
+    transition: 100ms ease-out;
+}
+
+.ssd decoration {
+    box-shadow: none;
+}
+
+popover {
+/* FIXME: we can't reuse the default shadow definition as increasing marging
+ *        would break the tip
+ */
+    margin: 13px;
+    box-shadow: 1px 3px 6px @inactive_shadow_color;
+}
+
+popover:backdrop,
+popover.background:backdrop {
+    box-shadow: 1px 3px 6px alpha(@inactive_shadow_color, 0.5);
+}
+
+tooltip decoration {
+    background-color: transparent;
+    background-image: none;
+}
+
+.maximized decoration,
+.fullscreen decoration,
+.unity-csd decoration {
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.tiled decoration {
+    border-radius: 0;
+}
+
+.default-decoration.titlebar:not(headerbar),
+headerbar.default-decoration {
+    min-height: 26px;
+}
+
+.solid-csd .titlebar:backdrop:dir(rtl):not(headerbar),
+.solid-csd .titlebar:backdrop:dir(ltr):not(headerbar),
+.solid-csd .titlebar:dir(rtl):not(headerbar),
+.solid-csd .titlebar:dir(ltr):not(headerbar),
+.solid-csd headerbar:backdrop:dir(rtl),
+.solid-csd headerbar:backdrop:dir(ltr),
+.solid-csd headerbar,
+.solid-csd headerbar:dir(ltr) {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.solid-csd decoration {
+    margin: 0;
+    box-shadow: none;
+    border-width: 2px;
+    border-style: solid;
+    border-color: shade (@dark_bg_color, 1.15);
+    border-radius: 0;
+}
+
+.solid-csd:backdrop decoration {
+    border-color: @dark_bg_color
+}
+
+.titlebar,
+UnityDecoration .top {
+    border: 1px solid rgba (0, 3, 5, 0.03); /* shade (@dark_bg_color, 1.04) - shade (@dark_bg_color, 1.5) */
+    border-bottom-width: 0;
+    border-radius: 6px 6px 0 0;
+    padding: 1px 6px 0 6px;
+
+    box-shadow: inset 0 0 transparent, inset 0 0 transparent,
+                inset 0 1px shade (@dark_bg_color, 1.6), inset 0 0 transparent;
+
+    background-color: transparent;
+    background-clip: border-box;
     background-image: -gtk-gradient (linear, left top, left bottom,
                                      from (shade (@dark_bg_color, 1.5)),
+                                     to (shade (@dark_bg_color, 1.04)));
+
+    color: @dark_fg_color;
+    text-shadow: 1px 0 #333, -1px 0 #333, 0 1px #333, 0 -1px #333;
+}
+
+.titlebar:backdrop,
+UnityDecoration .top:backdrop {
+    border: 1px solid rgba (14, 13, 0, 0.03); /* @dark_bg_color - shade (#474642, 0.92) */;
+    border-bottom-width: 0;
+    background-color: transparent;
+    background-clip: border-box;
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (#474642, 0.92)),
                                      to (@dark_bg_color));
-    border-color: shade (@dark_bg_color, 1.5);
-    border-style: solid;
-    border-width: 1px 0 0 0;
-    border-radius: 7px 7px 0 0;
-
-    color: @dark_fg_color;
-    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
-
-    box-shadow: inset 0 1px shade (@dark_bg_color, 1.65);
+    box-shadow: inset 0 0 transparent, inset 0 0 transparent,
+                inset 0 1px #474642, inset 0 0 transparent;
+    color: #807d78;
+}
+
+.maximized .titlebar,
+.tiled .titlebar {
+    border-radius: 0;
+    border-image: none;
+    border: none;
+    box-shadow: none;
+}
+
+.maximized .titlebar:not(:backdrop):not(.toolbar-mode),
+.tiled .titlebar:not(:backdrop):not(.toolbar-mode) {
+    box-shadow: inset 0 1px shade (@dark_bg_color, 1.6);
 }
 
 .titlebar .title {
@@ -1991,23 +2094,6 @@
     opacity: 0.5;
 }
 
-.titlebar:backdrop {
-    color: @backdrop_fg_color;
-    background-image: none;
-    background-color: @dark_bg_color;
-    border-top-color: @dark_bg_color;
-    box-shadow: inset 0 1px shade (@dark_bg_color, 1.2);
-}
-
-.maximized .titlebar {
-    border-radius: 0;
-    border: none;
-}
-
-.maximized .titlebar.toolbar-mode {
-    box-shadow: none;
-}
-
 .titlebar button.titlebutton {
     background-clip: padding-box;
     border: 1px solid #383734;
@@ -2050,6 +2136,8 @@
 }
 
 
+
+
 /***********
  * toolbar *
  ***********/
@@ -2070,8 +2158,7 @@
  * primary-toolbar *
  *******************/
 .primary-toolbar,
-headerbar,
-.maximized headerbar.titlebar:not(:backdrop) {
+.titlebar.toolbar-mode {
     -GtkWidget-window-dragging: true;
 
     background-image: -gtk-gradient (linear, left top, left bottom,
@@ -2089,12 +2176,8 @@
     box-shadow: inset 0 1px shade (@dark_bg_color, 0.94);
 }
 
-.maximized headerbar.titlebar.toolbar-mode:not(:backdrop) {
-    border-width: 0;
-}
-
 .primary-toolbar:backdrop,
-headerbar:backdrop {
+.titlebar.toolbar-mode:backdrop {
     background-image: none;
     background-color: @dark_bg_color;
     box-shadow: none;
@@ -2105,11 +2188,13 @@
 }
 
 .primary-toolbar:disabled,
+.titlebar.toolbar-mode:disabled,
 headerbar:disabled {
     text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
 }
 
 .primary-toolbar button,
+.titlebar button,
 headerbar button,
 headerbar button:disabled,
 .primary-toolbar button.flat:hover {
@@ -2365,12 +2450,20 @@
     background-image: -gtk-gradient (radial, center 0, 0, center 0, 0.8,
                                      from (alpha (mix (@tooltip_bg_color, #ffffff, 0.2), 0.86)),
                                      to (alpha (@tooltip_bg_color, 0.86)));
-    border-color: alpha (#ffffff, 0.2);
+    border-color: alpha (white, 0.2);
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
 }
 
+tooltip.csd:not(.unity-csd) decoration {
+    border-radius: 5px;
+}
+
+tooltip.background {
+    background-color: transparent;
+}
+
 tooltip label {
     color: @tooltip_fg_color;
 }
@@ -2428,16 +2521,9 @@
 
     border-radius: 5px;
     border: 1px solid darker(@bg_color);
-
-    box-shadow: 0 2px 3px @shadow_color;
-    margin: 10px;
     padding: 2px;
 }
 
-popover:backdrop {
-    box-shadow: none;
-}
-
 /* Popover menuitems are actually buttons. The following rules reset most of
  * the button styles for them.
  */
 
=== modified file 'Radiance/gtk-3.20/apps/unity.css'
--- Radiance/gtk-3.20/apps/unity.css	2016-08-04 16:31:00 +0000
+++ Radiance/gtk-3.20/apps/unity.css	2017-05-10 12:39:09 +0000
@@ -6,9 +6,9 @@
 
     -UnityDecoration-shadow-offset-x: 1px;
     -UnityDecoration-shadow-offset-y: 5px;
-    -UnityDecoration-active-shadow-color: rgba (0, 0, 0, 0.78);
+    -UnityDecoration-active-shadow-color: alpha (@active_shadow_color, 0.78);
     -UnityDecoration-active-shadow-radius: 30px;
-    -UnityDecoration-inactive-shadow-color: rgba (0, 0, 0, 0.3);
+    -UnityDecoration-inactive-shadow-color: @inactive_shadow_color;
     -UnityDecoration-inactive-shadow-radius: 25px;
 
     -UnityDecoration-glow-size: 10px;
@@ -19,41 +19,8 @@
     -UnityDecoration-title-alignment: 0.0;
 }
 
-UnityDecoration .top {
-    border: 1px solid rgba (85, 40, 0, 0.04); /* shade (@dark_bg_color) (shade (#edebe6, 1.06) */
-    border-bottom-width: 0;
-    border-radius: 6px 6px 0 0;
-    padding: 1px 6px 0 6px;
-
-    box-shadow: inset 0 0 transparent, inset 0 0 transparent,
-                inset 0 1px shade (@edebe6, 1.065), inset 0 0 transparent;
-
-    background-color: transparent;
-    background-clip: border-box;
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#edebe6, 1.06)),
-                                     to (@dark_bg_color));
-
-    color: shade (@dark_bg_color, 0.4);
-    text-shadow: 1px 0 shade (@dark_bg_color, 1.06), -1px 0 shade (@dark_bg_color, 1.06),
-                 0 1px shade (@dark_bg_color, 1.06), 0 -1px shade (@dark_bg_color, 1.06);
-}
-
-UnityDecoration .top:backdrop {
-    border: 1px solid rgba (110, 27, 0, 0.04); /* shade @dark_bg_color - shade (#edebe6, 0.96) */
-    border-bottom-width: 0;
-    background-color: transparent;
-    background-clip: border-box;
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#edebe6, 0.96)),
-                                     to (@dark_bg_color));
-    box-shadow: inset 0 0 transparent, inset 0 0 transparent,
-                inset 0 1px shade (#edebe6, 0.97), inset 0 0 transparent;
-
-    color: #a39e9a;
-    text-shadow: 1px 0 1px shade (@dark_bg_color, 1.08), -1px 0 1px shade (@dark_bg_color, 1.08),
-                 0 1px 1px shade (@dark_bg_color, 1.08), 0 -1px 1px shade (@dark_bg_color, 1.08);
-}
+/* Definitions of UnityDecoration .top (and :backdrop) are now shared with
+ * Gtk .titlebar (and :backdrop); .left and .right are not used by this theme */
 
 UnityDecoration .left,
 UnityDecoration .right {
 
=== modified file 'Radiance/gtk-3.20/gtk-main.css'
--- Radiance/gtk-3.20/gtk-main.css	2016-08-30 09:51:51 +0000
+++ Radiance/gtk-3.20/gtk-main.css	2017-05-10 12:39:09 +0000
@@ -13,6 +13,9 @@
 
 @define-color borders shade(@bg_color, 0.82);
 
+@define-color active_shadow_color black;
+@define-color inactive_shadow_color alpha(black, 0.3);
+
 /* misc colors used by gtk+
  *
  * Gtk doesn't currently expand color variables for style properties. Thus,
 
=== modified file 'Radiance/gtk-3.20/gtk-widgets-radiance.css'
--- Radiance/gtk-3.20/gtk-widgets-radiance.css	2016-10-06 18:53:39 +0000
+++ Radiance/gtk-3.20/gtk-widgets-radiance.css	2017-05-10 12:39:09 +0000
@@ -70,9 +70,7 @@
 }
 
 /* primary-toolbar */
-.primary-toolbar,
-headerbar,
-.maximized headerbar.titlebar:not(:backdrop) {
+.primary-toolbar {
     background-image: -gtk-gradient (linear, left top, left bottom,
                                      from (shade (@dark_bg_color, 0.96)),
                                      to (shade (@dark_bg_color, 1.1)));
@@ -104,7 +102,3 @@
                                      from (shade (@dark_bg_color, 1.03)),
                                      to (shade (@dark_bg_color, 0.96)));
 }
-
-.titlebar {
-    border-top-width: 0px;
-}
 
=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2016-10-31 04:08:49 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2017-05-10 12:39:09 +0000
@@ -646,17 +646,6 @@
     border-width: 1px 0px 1px 0px;
 }
 
-
-/****************
- * window-frame *
- ****************/
-
-.csd.popup {
-    border-style: none;
-    border-radius: 0;
-    box-shadow: 0 3px 8px @shadow_color;
-}
-
 /************
  * iconview *
  ************/
@@ -842,6 +831,11 @@
     font-weight: normal;
 }
 
+.background.popup.csd {
+    /* Delete menus background, we don't need border-radious here */
+    background-color: transparent;
+}
+
 /***********
  * menubar *
  ***********/
@@ -1952,12 +1946,8 @@
     background-color: @base_color;
 }
 
-headerbar {
-    padding: 2px 6px;
-}
-
 /*
- * Header Bars
+ * Header Bars and decorations
  *
  * The following rules only style header bars when they are used as a window's
  * titlebar widget (i.e., they have .titlebar set as well).
@@ -1966,16 +1956,136 @@
  * that prefer showing traditional title bars. The rules for those are further
  * down grouped with normal toolbars.
  */
-.titlebar {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (@dark_bg_color, 1.5)),
-                                     to (@dark_bg_color));
-    border-color: shade (@dark_bg_color, 1.5);
+decoration {
+    margin: 10px;
+    border-radius: 6px 6px 0 0;
+    box-shadow: 1px 5px 13px alpha(@active_shadow_color, 0.85);
+}
+
+decoration:backdrop,
+tooltip.csd decoration,
+.popup decoration {
+    box-shadow: 1px 5px 13px transparent, /* this should match normal shadow geometries */
+                1px 5px 8px @inactive_shadow_color;
+    transition: 100ms ease-out;
+}
+
+.ssd decoration {
+    box-shadow: none;
+}
+
+popover {
+/* FIXME: we can't reuse the default shadow definition as increasing marging
+ *        would break the tip
+ */
+    margin: 13px;
+    box-shadow: 1px 3px 6px @inactive_shadow_color;
+}
+
+popover:backdrop,
+popover.background:backdrop {
+    box-shadow: 1px 3px 6px alpha(@inactive_shadow_color, 0.5);
+}
+
+tooltip decoration {
+    background-color: transparent;
+    background-image: none;
+}
+
+.maximized decoration,
+.fullscreen decoration,
+.unity-csd decoration {
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.tiled decoration {
+    border-radius: 0;
+}
+
+.default-decoration.titlebar:not(headerbar),
+headerbar.default-decoration {
+    min-height: 26px;
+}
+
+.solid-csd .titlebar:backdrop:dir(rtl):not(headerbar),
+.solid-csd .titlebar:backdrop:dir(ltr):not(headerbar),
+.solid-csd .titlebar:dir(rtl):not(headerbar),
+.solid-csd .titlebar:dir(ltr):not(headerbar),
+.solid-csd headerbar:backdrop:dir(rtl),
+.solid-csd headerbar:backdrop:dir(ltr),
+.solid-csd headerbar,
+.solid-csd headerbar:dir(ltr) {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.solid-csd decoration {
+    margin: 0;
+    box-shadow: none;
+    border-width: 2px;
     border-style: solid;
-    border-width: 1px 0 0 0;
-    border-radius: 7px 7px 0 0;
-
-    color: @dark_fg_color;
+    border-color: shade (@dark_bg_color, 0.85);
+    border-radius: 0;
+}
+
+.solid-csd:backdrop decoration {
+    border-color: @dark_bg_color
+}
+
+.titlebar,
+UnityDecoration .top {
+    border: 1px solid rgba (85, 40, 0, 0.04); /* shade (@dark_bg_color) (shade (#edebe6, 1.06) */
+    border-bottom-width: 0;
+    border-radius: 6px 6px 0 0;
+    padding: 1px 6px 0 6px;
+
+    box-shadow: inset 0 0 transparent, inset 0 0 transparent,
+                inset 0 1px shade (@edebe6, 1.065), inset 0 0 transparent;
+
+    background-color: transparent;
+    background-clip: border-box;
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (#edebe6, 1.06)),
+                                     to (@dark_bg_color));
+
+    color: shade (@dark_bg_color, 0.4);
+    text-shadow: 1px 0 shade (@dark_bg_color, 1.06), -1px 0 shade (@dark_bg_color, 1.06),
+                 0 1px shade (@dark_bg_color, 1.06), 0 -1px shade (@dark_bg_color, 1.06);
+}
+
+.titlebar:backdrop,
+UnityDecoration .top:backdrop {
+    border: 1px solid rgba (110, 27, 0, 0.04); /* shade @dark_bg_color - shade (#edebe6, 0.96) */
+    border-bottom-width: 0;
+    background-color: transparent;
+    background-clip: border-box;
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (#edebe6, 0.96)),
+                                     to (@dark_bg_color));
+    box-shadow: inset 0 0 transparent, inset 0 0 transparent,
+                inset 0 1px shade (#edebe6, 0.97), inset 0 0 transparent;
+
+    color: #a39e9a;
+    text-shadow: 1px 0 1px shade (@dark_bg_color, 1.08), -1px 0 1px shade (@dark_bg_color, 1.08),
+                 0 1px 1px shade (@dark_bg_color, 1.08), 0 -1px 1px shade (@dark_bg_color, 1.08);
+}
+
+.maximized .titlebar,
+.tiled .titlebar {
+    border-radius: 0;
+    border-image: none;
+    border: none;
+    box-shadow: none;
+}
+
+.maximized .titlebar:not(:backdrop):not(.toolbar-mode),
+.tiled .titlebar:not(:backdrop):not(.toolbar-mode) {
+    box-shadow: inset 0 1px shade (#edebe6, 1.08);
 }
 
 .titlebar .title {
@@ -1987,23 +2097,6 @@
     opacity: 0.5;
 }
 
-.titlebar:backdrop {
-    color: @backdrop_fg_color;
-    background-image: none;
-    background-color: @dark_bg_color;
-    border-top-color: @dark_bg_color;
-    box-shadow: inset 0 1px shade (@dark_bg_color, 1.2);
-}
-
-.maximized .titlebar {
-    border-radius: 0;
-    border: none;
-}
-
-.maximized .titlebar.toolbar-mode {
-    box-shadow: none;
-}
-
 .titlebar button.titlebutton {
     background-clip: padding-box;
     border: 1px solid #d0c7bf;
@@ -2046,6 +2139,8 @@
 }
 
 
+
+
 /***********
  * toolbar *
  ***********/
@@ -2066,8 +2161,7 @@
  * primary-toolbar *
  *******************/
 .primary-toolbar,
-headerbar,
-.maximized headerbar.titlebar:not(:backdrop) {
+.titlebar.toolbar-mode {
     -GtkWidget-window-dragging: true;
 
     background-image: -gtk-gradient (linear, left top, left bottom,
@@ -2085,12 +2179,8 @@
     box-shadow: inset 0 1px shade (@dark_bg_color, 0.94);
 }
 
-.maximized headerbar.titlebar.toolbar-mode:not(:backdrop) {
-    border-width: 0;
-}
-
 .primary-toolbar:backdrop,
-headerbar:backdrop {
+.titlebar.toolbar-mode:backdrop {
     background-image: none;
     background-color: @dark_bg_color;
     box-shadow: none;
@@ -2101,11 +2191,13 @@
 }
 
 .primary-toolbar:disabled,
+.titlebar.toolbar-mode:disabled,
 headerbar:disabled {
     text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
 }
 
 .primary-toolbar button,
+.titlebar button,
 headerbar button,
 headerbar button:disabled,
 .primary-toolbar button.flat:hover {
@@ -2361,12 +2453,20 @@
     background-image: -gtk-gradient (radial, center 0, 0, center 0, 0.8,
                                      from (alpha (mix (@tooltip_bg_color, #ffffff, 0.2), 0.86)),
                                      to (alpha (@tooltip_bg_color, 0.86)));
-    border-color: alpha (#ffffff, 0.2);
+    border-color: alpha (white, 0.2);
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
 }
 
+tooltip.csd:not(.unity-csd) decoration {
+    border-radius: 5px;
+}
+
+tooltip.background {
+    background-color: transparent;
+}
+
 tooltip label {
     color: @tooltip_fg_color;
 }
@@ -2419,16 +2519,9 @@
 
     border-radius: 5px;
     border: 1px solid darker(@bg_color);
-
-    box-shadow: 0 2px 3px @shadow_color;
-    margin: 10px;
     padding: 2px;
 }
 
-popover:backdrop {
-    box-shadow: none;
-}
-
 /* Popover menuitems are actually buttons. The following rules reset most of
  * the button styles for them.
  */