Adwaita: draw the trough on progressbars in treeviews

See https://bugzilla.gnome.org/show_bug.cgi?id=737517

3 files changed, 93 insertions, 67 deletions

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 4d148d5913..f9e086ab54 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -1156,6 +1156,53 @@ GtkTreeView.view { // treeview grid lines and expanders, unfortunatelly
     }
     &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
   }
+  &.progressbar { // progress bar in treeviews
+    @if $variant == light { color: $base_color; }
+    border-radius: 4px;
+    border-color: $selected_borders_color;
+    background-image: linear-gradient(to bottom,
+                                      $selected_bg_color,
+                                      darken($selected_bg_color,10%));
+    box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7),
+                                                  transparentize(white,0.85)),
+                      0 1px if($variant=='light', transparentize(black, 0.8),
+                                                  transparentize(black,0.9));
+    &:selected {
+      @if $variant == 'light' {
+         color: $selected_bg_color;
+         box-shadow: none;
+      }
+      @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
+      background-image: linear-gradient(to bottom,
+                                        $base_color,
+                                        darken($base_color,10%));
+      &:backdrop {
+        @if $variant == 'light' { color: $selected_bg_color; }
+        @else { border-color: $backdrop_base_color; }
+        background-color: $backdrop_base_color;
+      }
+    }
+    &:backdrop {
+      @if $variant == 'light' { color: $backdrop_base_color; }
+      @else { border-color: $backdrop_base_color; }
+      background-image: none;
+      box-shadow: none;
+    }
+  }
+  &.trough { // progress bar trough in treeviews
+    background-color: transparentize($fg_color,0.9);
+    border-radius: 4px;
+    &:selected {
+      background-color: if($variant == 'light',
+                           transparentize($selected_fg_color, 0.7),
+                           darken($selected_bg_color, 10%));
+      @if $variant == 'light' {
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: $selected_bg_color;
+      }
+    }
+  }
 }
 
 column-header {
@@ -1222,39 +1269,7 @@ column-header.button.dnd { // for treeview-like derive widgets
     }
   }
 }
-GtkTreeView.view.progressbar { //Progressbar in treeview cells
-  @if $variant == 'light' { color: $base_color; }
-  border-radius: 4px;
-  border-color: $selected_borders_color;
-  background-image: linear-gradient(to bottom,
-                                    $selected_bg_color,
-                                    darken($selected_bg_color,10%));
-  box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7),
-                                                transparentize(white,0.85)),
-              0 1px if($variant=='light', transparentize(black, 0.8),
-                                          transparentize(black,0.9));
-  &:selected {
-    @if $variant == 'light' {
-      color: $selected_bg_color;
-      box-shadow: none;
-    }
-    @else { box-shadow: inset 0 1px transparentize(white,0.95); }
-    background-image: linear-gradient(to bottom,
-                                     $base_color,
-                                     darken($base_color,10%));
-    &:backdrop {
-      @if $variant == 'light' { color: $selected_bg_color; }
-      @else { border-color: $backdrop_base_color; }
-      background-color: $backdrop_base_color;
-    }
-  }
-  &:backdrop {
-    @if $variant == 'light' { color: $backdrop_base_color; }
-    @else { border-color: $backdrop_base_color; }
-    background-image: none;
-    box-shadow: none;
-  }
-}
+
 
 /*********
  * Menus *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 07adc12a51..1b0850318e 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -1788,6 +1788,26 @@ GtkTreeView.view {
       -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
     GtkTreeView.view.expander:backdrop {
       color: #999b99; }
+  GtkTreeView.view.progressbar {
+    border-radius: 4px;
+    border-color: #0f2b48;
+    background-image: linear-gradient(to bottom, #215d9c, #184472);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.1); }
+    GtkTreeView.view.progressbar:selected {
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+      background-image: linear-gradient(to bottom, #292929, #101010); }
+      GtkTreeView.view.progressbar:selected:backdrop {
+        border-color: #2c2c2c;
+        background-color: #2c2c2c; }
+    GtkTreeView.view.progressbar:backdrop {
+      border-color: #2c2c2c;
+      background-image: none;
+      box-shadow: none; }
+  GtkTreeView.view.trough {
+    background-color: rgba(238, 238, 236, 0.1);
+    border-radius: 4px; }
+    GtkTreeView.view.trough:selected {
+      background-color: #184472; }
 
 column-header .button, column-header .header-bar .button.titlebutton, .header-bar column-header .button.titlebutton,
 column-header .titlebar .button.titlebutton,
@@ -1866,22 +1886,6 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
       border-color: #393f3f;
       background-image: none; }
 
-GtkTreeView.view.progressbar {
-  border-radius: 4px;
-  border-color: #0f2b48;
-  background-image: linear-gradient(to bottom, #215d9c, #184472);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.1); }
-  GtkTreeView.view.progressbar:selected {
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
-    background-image: linear-gradient(to bottom, #292929, #101010); }
-    GtkTreeView.view.progressbar:selected:backdrop {
-      border-color: #2c2c2c;
-      background-color: #2c2c2c; }
-  GtkTreeView.view.progressbar:backdrop {
-    border-color: #2c2c2c;
-    background-image: none;
-    box-shadow: none; }
-
 /*********
  * Menus *
  *********/
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index c39fdcc41b..8b215b7741 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -1780,6 +1780,31 @@ GtkTreeView.view {
       -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
     GtkTreeView.view.expander:backdrop {
       color: #86898a; }
+  GtkTreeView.view.progressbar {
+    color: #ffffff;
+    border-radius: 4px;
+    border-color: #184472;
+    background-image: linear-gradient(to bottom, #4a90d9, #2a76c6);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(0, 0, 0, 0.2); }
+    GtkTreeView.view.progressbar:selected {
+      color: #4a90d9;
+      box-shadow: none;
+      background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); }
+      GtkTreeView.view.progressbar:selected:backdrop {
+        color: #4a90d9;
+        background-color: #fcfcfc; }
+    GtkTreeView.view.progressbar:backdrop {
+      color: #fcfcfc;
+      background-image: none;
+      box-shadow: none; }
+  GtkTreeView.view.trough {
+    background-color: rgba(46, 52, 54, 0.1);
+    border-radius: 4px; }
+    GtkTreeView.view.trough:selected {
+      background-color: rgba(255, 255, 255, 0.3);
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: #4a90d9; }
 
 column-header .button, column-header .header-bar .button.titlebutton, .header-bar column-header .button.titlebutton,
 column-header .titlebar .button.titlebutton,
@@ -1858,24 +1883,6 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
       border-color: #ededed;
       background-image: none; }
 
-GtkTreeView.view.progressbar {
-  color: #ffffff;
-  border-radius: 4px;
-  border-color: #184472;
-  background-image: linear-gradient(to bottom, #4a90d9, #2a76c6);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(0, 0, 0, 0.2); }
-  GtkTreeView.view.progressbar:selected {
-    color: #4a90d9;
-    box-shadow: none;
-    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); }
-    GtkTreeView.view.progressbar:selected:backdrop {
-      color: #4a90d9;
-      background-color: #fcfcfc; }
-  GtkTreeView.view.progressbar:backdrop {
-    color: #fcfcfc;
-    background-image: none;
-    box-shadow: none; }
-
 /*********
  * Menus *
  *********/