Merge lp:~willcooke/ubuntu-themes/progress-bars into lp:ubuntu-themes

[Will Cooke]

Re-style progress bars to fix them having a border but no background, for example in gnome-system-monitor.

Adds new CSS to style progress bars based on colours rather than images. This fixes the "empty progress bars" bug.

 * Adds new colours to gtk-main.css for progressbar
 * Removes border images from gtk-widgets-borders.css
 * Adds new CSS to gtk-widgets.css to colour borders correctly

Both Ambiance and Radiance are synced with these changes.

Thanks to raveit65 and the Ambiant-MATE project for the pointers.

Fixes lp:#1052936

[Iain Lane (laney)]

tres bien - I just stole this code for the gtk3.20 branch too

The commit message isn't going to work for a Debian changelog, will fix that & get a landing going

Cheers!

review: Approve

=== modified file 'Ambiance/gtk-3.0/gtk-main.css'
--- Ambiance/gtk-3.0/gtk-main.css	2016-03-23 21:44:10 +0000
+++ Ambiance/gtk-3.0/gtk-main.css	2016-06-13 09:43:59 +0000
@@ -53,6 +53,13 @@
 
 @define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
 
+@define-color progressbar_fill_a shade(@theme_selected_bg_color, 1.07);
+@define-color progressbar_fill_b shade(mix(@theme_selected_bg_color, @selected_bg_color, 0.10), 0.91);
+@define-color button_border_active shade(@theme_selected_bg_color, 0.95);
+@define-color progressbar_backdrop_fill_a shade(@backdrop_selected_bg_color, 1.07);
+@define-color progressbar_backdrop_fill_b shade(mix(@backdrop_selected_bg_color, grey, 0.10), 0.91);
+@define-color button_border_backdrop_active shade(@backdrop_selected_bg_color, 0.95);
+
 @import url("gtk-widgets-borders.css");
 @import url("gtk-widgets-assets.css");
 @import url("gtk-widgets.css");

=== modified file 'Ambiance/gtk-3.0/gtk-widgets-borders.css'
--- Ambiance/gtk-3.0/gtk-widgets-borders.css	2015-07-07 14:31:07 +0000
+++ Ambiance/gtk-3.0/gtk-widgets-borders.css	2016-06-13 09:43:59 +0000
@@ -53,8 +53,7 @@
 .menubar.toolbar .entry.progressbar,
 .menubar.toolbar .entry.progressbar,
 .header-bar .entry.progressbar,
-.header-bar .entry.progressbar,
-.entry.progressbar {
+.header-bar .entry.progressbar {
     border-radius: 8px;
     border-width: 0;
 }
@@ -219,30 +218,6 @@
     border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch;
 }
 
-.progressbar,
-.progressbar row,
-.progressbar row:hover,
-.progressbar row:selected,
-.progressbar row:selected:focused {
-    border-image: url("assets/progressbar-horizontal-fill.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
-}
-
-.progressbar.vertical {
-    border-image: url("assets/progressbar-vertical-fill.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
-}
-
-.progressbar:backdrop,
-.progressbar row:backdrop,
-.progressbar row:hover:backdrop,
-.progressbar row:selected:backdrop,
-.progressbar row:selected:focused:backdrop {
-    border-image: url("assets/progressbar-horizontal-fill-backdrop.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
-}
-
-.progressbar.vertical:backdrop {
-    border-image: url("assets/progressbar-vertical-fill-backdrop.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
-}
-
 .scale.trough {
     border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch;
 }

=== modified file 'Ambiance/gtk-3.0/gtk-widgets.css'
--- Ambiance/gtk-3.0/gtk-widgets.css	2016-04-15 19:49:14 +0000
+++ Ambiance/gtk-3.0/gtk-widgets.css	2016-06-13 09:43:59 +0000
@@ -464,8 +464,7 @@
 .primary-toolbar .entry.progressbar,
 .primary-toolbar .entry.progressbar,
 .header-bar .entry.progressbar,
-.header-bar .entry.progressbar,
-.entry.progressbar {
+.header-bar .entry.progressbar {
     background-image: -gtk-gradient (linear, left top, left bottom,
                                      from (shade (@selected_bg_color, 0.8)),
                                      color-stop (0.1, shade (@selected_bg_color, 0.9)),
@@ -985,12 +984,21 @@
 .progressbar row:hover,
 .progressbar row:selected,
 .progressbar row:selected:focused,
-.progressbar row:nth-child(odd) {
-    border-radius: 8px;
-    border-width: 0px;
-    background-image: none;
-    background-color: #db6a3c;
+.progressbar row:nth-child(odd),
+.toolbar .progressbar,
+.entry .progressbar {
+    border-radius: 5px;
     border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom,
+                                      @progressbar_fill_a,
+                                      @progressbar_fill_b);
+    border-top-color: shade(@button_border_active, 0.80);
+    border-left-color: shade(@button_border_active, 0.85);
+    border-right-color: shade(@button_border_active, 0.85);
+    border-bottom-color: shade(@button_border_active, 0.80);
+    color: @theme_fg_color;
+    text-shadow: none;
 }
 
 .progressbar:backdrop,
@@ -1000,10 +1008,18 @@
 .progressbar row:selected:focused:backdrop,
 .scale.highlight.bottom:backdrop,
 .progressbar.vertical:backdrop {
-    border-radius: 8px;
-    border-width: 0px;
-    background-image: none;
-    background-color: @backdrop_filling_bg;
+    border-radius: 5px;
+    border-width: 1px;
+    border-style: solid;
+    background-image: linear-gradient(to bottom,
+                                      @progressbar_fill_a,
+                                      @progressbar_fill_b);
+    border-top-color: shade(@button_border_backdrop_active, 0.80);
+    border-left-color: shade(@button_border_backdrop_active, 0.85);
+    border-right-color: shade(@button_border_backdrop_active, 0.85);
+    border-bottom-color: shade(@button_border_backdrop_active, 0.80);
+    color: @backdrop_fg_color;
+    text-shadow: none;
 }
 
 .scale.highlight.left:insensitive {

=== modified file 'Radiance/gtk-3.0/gtk-main.css'
--- Radiance/gtk-3.0/gtk-main.css	2016-03-23 21:44:10 +0000
+++ Radiance/gtk-3.0/gtk-main.css	2016-06-13 09:43:59 +0000
@@ -52,6 +52,13 @@
 
 @define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
 
+@define-color progressbar_fill_a shade(@theme_selected_bg_color, 1.07);
+@define-color progressbar_fill_b shade(mix(@theme_selected_bg_color, @selected_bg_color, 0.10), 0.91);
+@define-color button_border_active shade(@theme_selected_bg_color, 0.95);
+@define-color progressbar_backdrop_fill_a shade(@backdrop_selected_bg_color, 1.07);
+@define-color progressbar_backdrop_fill_b shade(mix(@backdrop_selected_bg_color, grey, 0.10), 0.91);
+@define-color button_border_backdrop_active shade(@backdrop_selected_bg_color, 0.95);
+
 @import url("gtk-widgets-borders.css");
 @import url("gtk-widgets-borders-radiance.css");
 @import url("gtk-widgets-assets.css");

=== modified file 'Radiance/gtk-3.0/gtk-widgets-borders.css'
--- Radiance/gtk-3.0/gtk-widgets-borders.css	2015-07-07 14:31:07 +0000
+++ Radiance/gtk-3.0/gtk-widgets-borders.css	2016-06-13 09:43:59 +0000
@@ -53,8 +53,7 @@
 .menubar.toolbar .entry.progressbar,
 .menubar.toolbar .entry.progressbar,
 .header-bar .entry.progressbar,
-.header-bar .entry.progressbar,
-.entry.progressbar {
+.header-bar .entry.progressbar {
     border-radius: 8px;
     border-width: 0;
 }
@@ -228,30 +227,6 @@
     border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch;
 }
 
-.progressbar,
-.progressbar row,
-.progressbar row:hover,
-.progressbar row:selected,
-.progressbar row:selected:focused {
-    border-image: url("assets/progressbar-horizontal-fill.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
-}
-
-.progressbar.vertical {
-    border-image: url("assets/progressbar-vertical-fill.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
-}
-
-.progressbar:backdrop,
-.progressbar row:backdrop,
-.progressbar row:hover:backdrop,
-.progressbar row:selected:backdrop,
-.progressbar row:selected:focused:backdrop {
-    border-image: url("assets/progressbar-horizontal-fill-backdrop.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
-}
-
-.progressbar.vertical:backdrop {
-    border-image: url("assets/progressbar-vertical-fill-backdrop.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
-}
-
 .scale.trough {
     border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch;
 }

=== modified file 'Radiance/gtk-3.0/gtk-widgets.css'
--- Radiance/gtk-3.0/gtk-widgets.css	2016-04-15 19:49:14 +0000
+++ Radiance/gtk-3.0/gtk-widgets.css	2016-06-13 09:43:59 +0000
@@ -486,8 +486,7 @@
 .primary-toolbar .entry.progressbar,
 .primary-toolbar .entry.progressbar,
 .header-bar .entry.progressbar,
-.header-bar .entry.progressbar,
-.entry.progressbar {
+.header-bar .entry.progressbar {
     background-image: -gtk-gradient (linear, left top, left bottom,
                                      from (shade (@selected_bg_color, 0.8)),
                                      color-stop (0.1, shade (@selected_bg_color, 0.9)),
@@ -1008,12 +1007,22 @@
 .progressbar row,
 .progressbar row:hover,
 .progressbar row:selected,
-.progressbar row:selected:focused {
-    border-radius: 8px;
-    border-width: 0px;
-    background-image: none;
-    background-color: #db6a3c;
+.progressbar row:selected:focused,
+.progressbar row:nth-child(odd),
+.toolbar .progressbar,
+.entry .progressbar {
+    border-radius: 5px;
     border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom,
+                                      @progressbar_fill_a,
+                                      @progressbar_fill_b);
+    border-top-color: shade(@button_border_active, 0.80);
+    border-left-color: shade(@button_border_active, 0.85);
+    border-right-color: shade(@button_border_active, 0.85);
+    border-bottom-color: shade(@button_border_active, 0.80);
+    color: @theme_fg_color;
+    text-shadow: none;
 }
 
 .progressbar:backdrop,
@@ -1023,10 +1032,18 @@
 .progressbar row:selected:focused:backdrop,
 .scale.highlight.bottom:backdrop,
 .progressbar.vertical:backdrop {
-    border-radius: 8px;
-    border-width: 0px;
-    background-image: none;
-    background-color: @backdrop_filling_bg;
+    border-radius: 5px;
+    border-width: 1px;
+    border-style: solid;
+    background-image: linear-gradient(to bottom,
+                                      @progressbar_fill_a,
+                                      @progressbar_fill_b);
+    border-top-color: shade(@button_border_backdrop_active, 0.80);
+    border-left-color: shade(@button_border_backdrop_active, 0.85);
+    border-right-color: shade(@button_border_backdrop_active, 0.85);
+    border-bottom-color: shade(@button_border_backdrop_active, 0.80);
+    color: @backdrop_fg_color;
+    text-shadow: none;
 }
 
 .scale.highlight.left:insensitive {