Merge lp:~3v1n0/ubuntu-themes/placessidebar-ambiance-rw-inspired into lp:ubuntu-themes

[Marco Trevisan (Treviño)]

Ambiance, Radiance: implement ambiance-rw inspired darker placessidebar

Imported https://www.gnome-look.org/p/1197991/ and reimplemented
to be easier to maintain, limiting gradients usage and adding
implementation for RTL directions and backdrop.
Also, support it for Radiance too.

Before: https://imgur.com/BwKil1e.png
After: https://imgur.com/o1ll5k3.png

Based on https://www.gnome-look.org/p/1197991/
As per design decision: https://github.com/CanonicalLtd/desktop-design/issues/27

DIff might be a bit confusing as not all the prerequisites have been merged. Check commits, please.

[lp:~3v1n0/ubuntu-themes/placessidebar-ambiance-rw-inspired]

621. By Marco Trevisan (Treviño) on 2018-03-22

Ambiance, Radiance: remove unsupported size property

[Andrea Azzarone (azzar1)]

LGTM. The only problem that I can see is the style of the buttons that appears for removable icons. Considering that UIFe is today we can fix it later.

review: Approve

=== modified file 'Ambiance/gtk-3.20/gtk-main.css'
--- Ambiance/gtk-3.20/gtk-main.css	2018-01-17 17:09:29 +0000
+++ Ambiance/gtk-3.20/gtk-main.css	2018-03-22 08:03:56 +0000
@@ -127,6 +127,10 @@
 @define-color panel_lighter_color shade (@dark_bg_color, 1.4);
 @define-color panel_darker_color shade (@dark_bg_color, 0.96);
 @define-color maximized_header_color shade (@dark_bg_color, 1.3);
+@define-color places_sidebar_bg shade(@dark_bg_color, 1.56);
+@define-color places_sidebar_backdrop_bg mix(@places_sidebar_bg, @bg_color, 0.15);
+@define-color places_sidebar_fg_color @selected_fg_color;
+@define-color places_sidebar_selected_bg_color @selected_bg_color;
 
 @define-color suggested_action_bg #38b44a;
 
 
=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2018-03-22 08:03:56 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2018-03-22 08:03:56 +0000
@@ -1114,20 +1114,15 @@
 
 toolbar menu,
 combobox menu {
-    background-image: none;
-    background-color: @bg_color;
-    border-bottom-color: shade (@bg_color, 0.66);
-    border-right-color: shade (@bg_color, 0.7);
-    border-left-color: shade (@bg_color, 0.7);
-    border-top-color: shade (@bg_color, 0.8);
-    border-style: solid;
+    background-image: linear-gradient(to bottom left,
+                                      shade (@bg_color, 1.2),
+                                      shade (@bg_color, 0.97),
+                                      shade (@bg_color, 1.2));
+    background-color: transparent;
+    border: none;
     padding: 0;
 
-    color: @fg_color;
-
-    box-shadow: inset -1px 0 shade (@bg_color, 1.18),
-                inset 1px 0 shade (@bg_color, 1.18),
-                inset 0 1px shade (@bg_color, 1.18);
+    box-shadow: 13px 13px 13px 6px @inactive_shadow_color;
 }
 
 menu:selected {
@@ -1207,15 +1202,15 @@
 }
 
 /* Workaround for lp:949368 */
-combobox menuitem * {
+combobox menuitem {
     color: @fg_color;
 }
 
-combobox menuitem *:hover {
+combobox menuitem:hover {
     color: @selected_fg_color;
+    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
 }
 
-
 popover modelbutton:hover,
 popover menuitem:checked:hover,
 menuitem:hover,
@@ -2090,56 +2085,186 @@
  ***********/
 
 filechooser box.search-bar,
-#pathbarbox,
-placessidebar.sidebar,
+#pathbarbox {
+    background-color: shade (@bg_color, 0.95);
+    color: @fg_color;
+    text-shadow: none;
+}
+
 placessidebar.sidebar list {
-    background-color: shade (@bg_color, 0.95);
-
-    color: @fg_color;
-    text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.04);
-}
-
-filechooser:backdrop box.search-bar,
-#pathbarbox:backdrop,
-.sidebar list:backdrop,
-placessidebar.sidebar:backdrop,
-placessidebar.sidebar list:backdrop {
-    color: mix (@fg_color, shade (@bg_color, 0.95), 0.2);
-    text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02);
-}
-
-placessidebar.sidebar row,
-placessidebar.sidebar list row,
-.sidebar list {
+    background-color: transparent;
+}
+
+placessidebar.sidebar list separator {
+    background: transparent;
+}
+
+paned placessidebar.sidebar:dir(ltr),
+paned placessidebar.sidebar:dir(rtl),
+placessidebar.sidebar:dir(ltr),
+placessidebar.sidebar:dir(rtl) {
+    border: none;
+    min-width: 150px;
+    background-color: @places_sidebar_bg;
+    color: @places_sidebar_fg_color;
+    text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
+}
+
+paned placessidebar.sidebar:dir(ltr),
+placessidebar.sidebar:dir(ltr) {
+    box-shadow: inset 39px -1px 0px 0px shade(@places_sidebar_bg, 0.75),
+                inset 38px -1px 0px 0px shade(@places_sidebar_bg, 0.85);
+}
+
+paned placessidebar.sidebar:dir(rtl),
+placessidebar.sidebar:dir(rtl) {
+    box-shadow: inset -39px -1px 0px 0px shade(@places_sidebar_bg, 0.75),
+                inset -38px -1px 0px 0px shade(@places_sidebar_bg, 0.85);
+}
+
+paned placessidebar.sidebar:dir(ltr):backdrop,
+paned placessidebar.sidebar:dir(rtl):backdrop,
+placessidebar.sidebar:dir(ltr):backdrop,
+placessidebar.sidebar:dir(rtl):backdrop {
+    background-color: @places_sidebar_backdrop_bg;
+}
+
+paned placessidebar.sidebar:dir(ltr):backdrop,
+placessidebar.sidebar:dir(ltr):backdrop {
+    box-shadow: inset 39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
+                inset 38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
+}
+
+paned placessidebar.sidebar:dir(rtl):backdrop,
+placessidebar.sidebar:dir(rtl):backdrop {
+    box-shadow: inset -39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
+                inset -38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
+}
+
+placessidebar.sidebar row.sidebar-row {
+    color: shade(@places_sidebar_fg_color, 0.9);
+    background-image: none;
+    background-repeat: no-repeat;
+    background-position: top left;
+    background-color: transparent;
     min-height: 30px;
-}
-
-placessidebar.sidebar list row.activatable:hover:not(:selected),
-placessidebar.sidebar list row.has-open-popup {
-    background-color: shade (shade (@bg_color, 0.95), 0.965);
-}
-
-placessidebar.sidebar row:selected,
-placessidebar.sidebar list row:selected {
-    color: @selected_fg_color;
-    text-shadow: 0 1px shade (@selected_bg_color, 0.7);
-}
-
-placessidebar.sidebar row:selected:backdrop,
-placessidebar.sidebar list row:selected:backdrop {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (shade (@bg_color, 0.95), 0.94)),
-                                     to (shade (shade (@bg_color, 0.95), 0.86)));
-    border-top-color: shade (shade (@bg_color, 0.95), 0.88);
-
-    color: @fg_color;
-    text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96);
-}
-
-placessidebar.sidebar .sidebar-icon,
-placessidebar.sidebar list .sidebar-icon {
-    padding-left: 10px;
-    padding-right: 10px;
+    border:none;
+    text-shadow: none;
+}
+
+placessidebar.sidebar row.sidebar-row:hover {
+    background-color: transparent;
+    background-image: linear-gradient(to right,
+                                      transparent 39px,
+                                      @places_sidebar_selected_bg_color 39px,
+                                      @places_sidebar_selected_bg_color 100%);
+    color: @places_sidebar_fg_color;
+    text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
+}
+
+placessidebar.sidebar row.sidebar-row:hover:dir(rtl) {
+    background-image: linear-gradient(to left,
+                                      transparent 39px,
+                                      @places_sidebar_selected_bg_color 39px,
+                                      @places_sidebar_selected_bg_color 100%);
+}
+
+placessidebar.sidebar row.sidebar-row:hover:backdrop {
+    background-image: linear-gradient(to right,
+                                      transparent 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 100%);
+    color: @backdrop_selected_fg_color;
+}
+
+placessidebar.sidebar row.sidebar-row:hover:dir(rtl):backdrop {
+    background-image: linear-gradient(to left,
+                                      transparent 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 100%);
+}
+
+placessidebar.sidebar row.sidebar-row:selected:hover,
+placessidebar.sidebar row.sidebar-row:active:hover {
+    background-color: transparent;
+    background-image: linear-gradient(to right,
+                                      @places_sidebar_bg 39px,
+                                      @places_sidebar_selected_bg_color 39px,
+                                      @places_sidebar_selected_bg_color 100%);
+    text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
+    color: @places_sidebar_fg_color;
+}
+
+placessidebar.sidebar row.sidebar-row:selected:hover:dir(rtl),
+placessidebar.sidebar row.sidebar-row:active:hover:dir(rtl) {
+    background-image: linear-gradient(to left,
+                                      @places_sidebar_bg 39px,
+                                      @places_sidebar_selected_bg_color 39px,
+                                      @places_sidebar_selected_bg_color 100%);
+}
+
+placessidebar.sidebar row.sidebar-row:selected:hover:backdrop,
+placessidebar.sidebar row.sidebar-row:active:hover:backdrop {
+    background-image: linear-gradient(to right,
+                                      @places_sidebar_backdrop_bg 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 100%);
+    color: @backdrop_selected_fg_color;
+}
+
+placessidebar.sidebar row.sidebar-row:selected:hover:backdrop:dir(rtl),
+placessidebar.sidebar row.sidebar-row:active:hover:backdrop:dir(rtl) {
+    background-image: linear-gradient(to left,
+                                      @places_sidebar_backdrop_bg 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 100%);
+}
+
+placessidebar.sidebar row.sidebar-row:selected,
+placessidebar.sidebar row.sidebar-row:active {
+    background-color: @places_sidebar_bg;
+    color: shade(@places_sidebar_selected_bg_color, 1.03);
+    text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.3), 0.5);
+}
+
+placessidebar.sidebar row.sidebar-row:selected:backdrop,
+placessidebar.sidebar row.sidebar-row:active:backdrop {
+    background-color: @places_sidebar_backdrop_bg;
+    color: mix(shade(@places_sidebar_selected_bg_color, 1.03), shade(@places_sidebar_fg_color, 0.9), 0.3);
+    text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.4), 0.4);
+}
+
+placessidebar.sidebar row.sidebar-row .sidebar-icon {
+    text-shadow: none;
+    background-image: none;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+placessidebar.sidebar row.sidebar-row .sidebar-icon:dir(ltr) {
+    margin-left: 0;
+    margin-right: 12px;
+}
+
+placessidebar.sidebar row.sidebar-row .sidebar-icon:dir(rtl) {
+    margin-left: 12px;
+    margin-right: 0;
+}
+
+placessidebar.sidebar row.sidebar-row:hover .sidebar-icon:backdrop {
+    color: @places_sidebar_fg_color;
+}
+
+placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon,
+placessidebar.sidebar row.sidebar-row:selected .sidebar-icon,
+placessidebar.sidebar row.sidebar-row:active:hover .sidebar-icon {
+    color: @places_sidebar_selected_bg_color;
+    background-color: transparent;
+}
+
+placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon:backdrop,
+placessidebar.sidebar row.sidebar-row:selected .sidebar-icon:backdrop {
+    color: mix(shade(@places_sidebar_selected_bg_color, 1.03), shade(@places_sidebar_fg_color, 0.9), 0.3);
 }
 
 .sidebar,
@@ -3259,10 +3384,20 @@
  * popover  *
  ************/
 popover {
-    background-clip: border-box;
+    background-image: linear-gradient(to bottom left,
+                                      shade (@bg_color, 0.98),
+                                      shade (@bg_color, 0.93),
+                                      shade (@bg_color, 0.98));
+    border-radius: 5px;
+    border: none;
+    padding: 2px;
+}
 
+popover:backdrop {
+    background-image: none;
+    background-color: shade (@bg_color, 0.95);
     border-radius: 5px;
-    border: 1px solid darker(@bg_color);
+    border: none;
     padding: 2px;
 }
 
@@ -3291,8 +3426,14 @@
 popover menuitem:backdrop:hover {
     border: none;
     border-image: none;
-    background: transparent;
+    border-radius: 3px;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: -gtk-gradient (linear, left bottom, left top,
+                                     from (shade (@backdrop_selected_bg_color, 0.95)),
+                                     to (shade (@backdrop_selected_bg_color, 0.90)));
     color: @fg_color;
+    text-shadow: 0 -1px alpha (shade (@fg_color, 1.45), 0.7);
 }
 
 popover modelbutton:checked,
@@ -3317,7 +3458,6 @@
     background: none;
 }
 
-
 /* menu buttons inside popovers */
 modelbutton.flat,
 popover.background checkbutton,
 
=== modified file 'Radiance/gtk-3.20/gtk-main.css'
--- Radiance/gtk-3.20/gtk-main.css	2018-01-17 17:09:29 +0000
+++ Radiance/gtk-3.20/gtk-main.css	2018-03-22 08:03:56 +0000
@@ -126,6 +126,10 @@
 @define-color panel_lighter_color shade (@dark_bg_color, 1.4);
 @define-color panel_darker_color shade (@dark_bg_color, 0.96);
 @define-color maximized_header_color shade (@dark_bg_color, 1.1);
+@define-color places_sidebar_bg shade (@dark_bg_color, 1.1);
+@define-color places_sidebar_backdrop_bg mix(@places_sidebar_bg, @bg_color, 0.15);
+@define-color places_sidebar_fg_color @fg_color;
+@define-color places_sidebar_selected_bg_color @selected_bg_color;
 
 @define-color suggested_action_bg #38b44a;
 
 
=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2018-03-22 08:03:56 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2018-03-22 08:03:56 +0000
@@ -1119,20 +1119,15 @@
 
 toolbar menu,
 combobox menu {
-    background-image: none;
-    background-color: @bg_color;
-    border-bottom-color: shade (@bg_color, 0.66);
-    border-right-color: shade (@bg_color, 0.7);
-    border-left-color: shade (@bg_color, 0.7);
-    border-top-color: shade (@bg_color, 0.8);
-    border-style: solid;
+    background-image: linear-gradient(to bottom left,
+                                      shade (@bg_color, 1.2),
+                                      shade (@bg_color, 0.97),
+                                      shade (@bg_color, 1.2));
+    background-color: transparent;
+    border: none;
     padding: 0;
 
-    color: @fg_color;
-
-    box-shadow: inset -1px 0 shade (@bg_color, 1.18),
-                inset 1px 0 shade (@bg_color, 1.18),
-                inset 0 1px shade (@bg_color, 1.18);
+    box-shadow: 13px 13px 13px 6px @inactive_shadow_color;
 }
 
 menu:selected {
@@ -1212,15 +1207,15 @@
 }
 
 /* Workaround for lp:949368 */
-combobox menuitem * {
+combobox menuitem {
     color: @fg_color;
 }
 
-combobox menuitem *:hover {
+combobox menuitem:hover {
     color: @selected_fg_color;
+    text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
 }
 
-
 popover modelbutton:hover,
 popover menuitem:checked:hover,
 menuitem:hover,
@@ -2085,56 +2080,186 @@
  ***********/
 
 filechooser box.search-bar,
-#pathbarbox,
-placessidebar.sidebar,
+#pathbarbox {
+    background-color: shade (@bg_color, 0.95);
+    color: @fg_color;
+    text-shadow: none;
+}
+
 placessidebar.sidebar list {
-    background-color: shade (@bg_color, 0.95);
-
-    color: @fg_color;
-    text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.04);
-}
-
-filechooser:backdrop box.search-bar,
-#pathbarbox:backdrop,
-.sidebar list:backdrop,
-placessidebar.sidebar:backdrop,
-placessidebar.sidebar list:backdrop {
-    color: mix (@fg_color, shade (@bg_color, 0.95), 0.2);
-    text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02);
-}
-
-placessidebar.sidebar row,
-placessidebar.sidebar list row,
-.sidebar list {
+    background-color: transparent;
+}
+
+placessidebar.sidebar list separator {
+    background: transparent;
+}
+
+paned placessidebar.sidebar:dir(ltr),
+paned placessidebar.sidebar:dir(rtl),
+placessidebar.sidebar:dir(ltr),
+placessidebar.sidebar:dir(rtl) {
+    border: none;
+    min-width: 150px;
+    background-color: @places_sidebar_bg;
+    color: @places_sidebar_fg_color;
+    text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
+}
+
+paned placessidebar.sidebar:dir(ltr),
+placessidebar.sidebar:dir(ltr) {
+    box-shadow: inset 39px -1px 0px 0px shade(@places_sidebar_bg, 0.75),
+                inset 38px -1px 0px 0px shade(@places_sidebar_bg, 0.85);
+}
+
+paned placessidebar.sidebar:dir(rtl),
+placessidebar.sidebar:dir(rtl) {
+    box-shadow: inset -39px -1px 0px 0px shade(@places_sidebar_bg, 0.75),
+                inset -38px -1px 0px 0px shade(@places_sidebar_bg, 0.85);
+}
+
+paned placessidebar.sidebar:dir(ltr):backdrop,
+paned placessidebar.sidebar:dir(rtl):backdrop,
+placessidebar.sidebar:dir(ltr):backdrop,
+placessidebar.sidebar:dir(rtl):backdrop {
+    background-color: @places_sidebar_backdrop_bg;
+}
+
+paned placessidebar.sidebar:dir(ltr):backdrop,
+placessidebar.sidebar:dir(ltr):backdrop {
+    box-shadow: inset 39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
+                inset 38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
+}
+
+paned placessidebar.sidebar:dir(rtl):backdrop,
+placessidebar.sidebar:dir(rtl):backdrop {
+    box-shadow: inset -39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
+                inset -38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
+}
+
+placessidebar.sidebar row.sidebar-row {
+    color: shade(@places_sidebar_fg_color, 0.9);
+    background-image: none;
+    background-repeat: no-repeat;
+    background-position: top left;
+    background-color: transparent;
     min-height: 30px;
-}
-
-placessidebar.sidebar list row.activatable:hover:not(:selected),
-placessidebar.sidebar list row.has-open-popup {
-    background-color: shade (shade (@bg_color, 0.95), 0.965);
-}
-
-placessidebar.sidebar row:selected,
-placessidebar.sidebar list row:selected {
-    color: @selected_fg_color;
-    text-shadow: 0 1px shade (@selected_bg_color, 0.7);
-}
-
-placessidebar.sidebar row:selected:backdrop,
-placessidebar.sidebar list row:selected:backdrop {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (shade (@bg_color, 0.95), 0.94)),
-                                     to (shade (shade (@bg_color, 0.95), 0.86)));
-    border-top-color: shade (shade (@bg_color, 0.95), 0.88);
-
-    color: @fg_color;
-    text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96);
-}
-
-placessidebar.sidebar .sidebar-icon,
-placessidebar.sidebar list .sidebar-icon {
-    padding-left: 10px;
-    padding-right: 10px;
+    border:none;
+    text-shadow: none;
+}
+
+placessidebar.sidebar row.sidebar-row:hover {
+    background-color: transparent;
+    background-image: linear-gradient(to right,
+                                      transparent 39px,
+                                      @places_sidebar_selected_bg_color 39px,
+                                      @places_sidebar_selected_bg_color 100%);
+    color: @places_sidebar_fg_color;
+    text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
+}
+
+placessidebar.sidebar row.sidebar-row:hover:dir(rtl) {
+    background-image: linear-gradient(to left,
+                                      transparent 39px,
+                                      @places_sidebar_selected_bg_color 39px,
+                                      @places_sidebar_selected_bg_color 100%);
+}
+
+placessidebar.sidebar row.sidebar-row:hover:backdrop {
+    background-image: linear-gradient(to right,
+                                      transparent 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 100%);
+    color: @backdrop_selected_fg_color;
+}
+
+placessidebar.sidebar row.sidebar-row:hover:dir(rtl):backdrop {
+    background-image: linear-gradient(to left,
+                                      transparent 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 100%);
+}
+
+placessidebar.sidebar row.sidebar-row:selected:hover,
+placessidebar.sidebar row.sidebar-row:active:hover {
+    background-color: transparent;
+    background-image: linear-gradient(to right,
+                                      @places_sidebar_bg 39px,
+                                      @places_sidebar_selected_bg_color 39px,
+                                      @places_sidebar_selected_bg_color 100%);
+    text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
+    color: @places_sidebar_fg_color;
+}
+
+placessidebar.sidebar row.sidebar-row:selected:hover:dir(rtl),
+placessidebar.sidebar row.sidebar-row:active:hover:dir(rtl) {
+    background-image: linear-gradient(to left,
+                                      @places_sidebar_bg 39px,
+                                      @places_sidebar_selected_bg_color 39px,
+                                      @places_sidebar_selected_bg_color 100%);
+}
+
+placessidebar.sidebar row.sidebar-row:selected:hover:backdrop,
+placessidebar.sidebar row.sidebar-row:active:hover:backdrop {
+    background-image: linear-gradient(to right,
+                                      @places_sidebar_backdrop_bg 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 100%);
+    color: @backdrop_selected_fg_color;
+}
+
+placessidebar.sidebar row.sidebar-row:selected:hover:backdrop:dir(rtl),
+placessidebar.sidebar row.sidebar-row:active:hover:backdrop:dir(rtl) {
+    background-image: linear-gradient(to left,
+                                      @places_sidebar_backdrop_bg 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 39px,
+                                      alpha(@backdrop_selected_bg_color, 0.4) 100%);
+}
+
+placessidebar.sidebar row.sidebar-row:selected,
+placessidebar.sidebar row.sidebar-row:active {
+    background-color: @places_sidebar_bg;
+    color: shade(@places_sidebar_selected_bg_color, 1.03);
+    text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.3), 0.5);
+}
+
+placessidebar.sidebar row.sidebar-row:selected:backdrop,
+placessidebar.sidebar row.sidebar-row:active:backdrop {
+    background-color: @places_sidebar_backdrop_bg;
+    color: mix(shade(@places_sidebar_selected_bg_color, 1.03), shade(@places_sidebar_fg_color, 0.9), 0.3);
+    text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.4), 0.4);
+}
+
+placessidebar.sidebar row.sidebar-row .sidebar-icon {
+    text-shadow: none;
+    background-image: none;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+placessidebar.sidebar row.sidebar-row .sidebar-icon:dir(ltr) {
+    margin-left: 0;
+    margin-right: 12px;
+}
+
+placessidebar.sidebar row.sidebar-row .sidebar-icon:dir(rtl) {
+    margin-left: 12px;
+    margin-right: 0;
+}
+
+placessidebar.sidebar row.sidebar-row:hover .sidebar-icon:backdrop {
+    color: @places_sidebar_fg_color;
+}
+
+placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon,
+placessidebar.sidebar row.sidebar-row:selected .sidebar-icon,
+placessidebar.sidebar row.sidebar-row:active:hover .sidebar-icon {
+    color: @places_sidebar_selected_bg_color;
+    background-color: transparent;
+}
+
+placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon:backdrop,
+placessidebar.sidebar row.sidebar-row:selected .sidebar-icon:backdrop {
+    color: mix(shade(@places_sidebar_selected_bg_color, 1.03), shade(@places_sidebar_fg_color, 0.9), 0.3);
 }
 
 .sidebar,
@@ -3252,10 +3377,20 @@
  * popover  *
  ************/
 popover {
-    background-clip: border-box;
+    background-image: linear-gradient(to bottom left,
+                                      shade (@bg_color, 0.98),
+                                      shade (@bg_color, 0.93),
+                                      shade (@bg_color, 0.98));
+    border-radius: 5px;
+    border: none;
+    padding: 2px;
+}
 
+popover:backdrop {
+    background-image: none;
+    background-color: shade (@bg_color, 0.95);
     border-radius: 5px;
-    border: 1px solid darker(@bg_color);
+    border: none;
     padding: 2px;
 }
 
@@ -3284,8 +3419,14 @@
 popover menuitem:backdrop:hover {
     border: none;
     border-image: none;
-    background: transparent;
+    border-radius: 3px;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: -gtk-gradient (linear, left bottom, left top,
+                                     from (shade (@backdrop_selected_bg_color, 0.95)),
+                                     to (shade (@backdrop_selected_bg_color, 0.90)));
     color: @fg_color;
+    text-shadow: 0 -1px alpha (shade (@fg_color, 1.45), 0.7);
 }
 
 popover modelbutton:checked,
@@ -3310,7 +3451,6 @@
     background: none;
 }
 
-
 /* menu buttons inside popovers */
 modelbutton.flat,
 popover.background checkbutton,