Merge lp:~laney/ubuntu-themes/progressbars-16.04 into lp:ubuntu-themes/xenial

Proposed by Iain Lane
Status: Merged
Approved by: Iain Lane
Approved revision: 480
Merged at revision: 480
Proposed branch: lp:~laney/ubuntu-themes/progressbars-16.04
Merge into: lp:ubuntu-themes/xenial
Diff against target: 254 lines (+71/-74)
6 files modified
Ambiance/gtk-3.0/gtk-main.css (+7/-0)
Ambiance/gtk-3.0/gtk-widgets-borders.css (+1/-26)
Ambiance/gtk-3.0/gtk-widgets.css (+27/-11)
Radiance/gtk-3.0/gtk-main.css (+7/-0)
Radiance/gtk-3.0/gtk-widgets-borders.css (+1/-26)
Radiance/gtk-3.0/gtk-widgets.css (+28/-11)
To merge this branch: bzr merge lp:~laney/ubuntu-themes/progressbars-16.04
Reviewer Review Type Date Requested Status
Ubuntu Artwork Packagers Pending
Review via email: mp+297889@code.launchpad.net

Commit message

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

Description of the change

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

To post a comment you must log in.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== 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-20 09:44:28 +0000
@@ -53,6 +53,13 @@
5353
54@define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */54@define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
5555
56@define-color progressbar_fill_a shade(@theme_selected_bg_color, 1.07);
57@define-color progressbar_fill_b shade(mix(@theme_selected_bg_color, @selected_bg_color, 0.10), 0.91);
58@define-color button_border_active shade(@theme_selected_bg_color, 0.95);
59@define-color progressbar_backdrop_fill_a shade(@backdrop_selected_bg_color, 1.07);
60@define-color progressbar_backdrop_fill_b shade(mix(@backdrop_selected_bg_color, grey, 0.10), 0.91);
61@define-color button_border_backdrop_active shade(@backdrop_selected_bg_color, 0.95);
62
56@import url("gtk-widgets-borders.css");63@import url("gtk-widgets-borders.css");
57@import url("gtk-widgets-assets.css");64@import url("gtk-widgets-assets.css");
58@import url("gtk-widgets.css");65@import url("gtk-widgets.css");
5966
=== 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-20 09:44:28 +0000
@@ -53,8 +53,7 @@
53.menubar.toolbar .entry.progressbar,53.menubar.toolbar .entry.progressbar,
54.menubar.toolbar .entry.progressbar,54.menubar.toolbar .entry.progressbar,
55.header-bar .entry.progressbar,55.header-bar .entry.progressbar,
56.header-bar .entry.progressbar,56.header-bar .entry.progressbar {
57.entry.progressbar {
58 border-radius: 8px;57 border-radius: 8px;
59 border-width: 0;58 border-width: 0;
60}59}
@@ -219,30 +218,6 @@
219 border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch;218 border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch;
220}219}
221220
222.progressbar,
223.progressbar row,
224.progressbar row:hover,
225.progressbar row:selected,
226.progressbar row:selected:focused {
227 border-image: url("assets/progressbar-horizontal-fill.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
228}
229
230.progressbar.vertical {
231 border-image: url("assets/progressbar-vertical-fill.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
232}
233
234.progressbar:backdrop,
235.progressbar row:backdrop,
236.progressbar row:hover:backdrop,
237.progressbar row:selected:backdrop,
238.progressbar row:selected:focused:backdrop {
239 border-image: url("assets/progressbar-horizontal-fill-backdrop.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
240}
241
242.progressbar.vertical:backdrop {
243 border-image: url("assets/progressbar-vertical-fill-backdrop.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
244}
245
246.scale.trough {221.scale.trough {
247 border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch;222 border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch;
248}223}
249224
=== 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-20 09:44:28 +0000
@@ -464,8 +464,7 @@
464.primary-toolbar .entry.progressbar,464.primary-toolbar .entry.progressbar,
465.primary-toolbar .entry.progressbar,465.primary-toolbar .entry.progressbar,
466.header-bar .entry.progressbar,466.header-bar .entry.progressbar,
467.header-bar .entry.progressbar,467.header-bar .entry.progressbar {
468.entry.progressbar {
469 background-image: -gtk-gradient (linear, left top, left bottom,468 background-image: -gtk-gradient (linear, left top, left bottom,
470 from (shade (@selected_bg_color, 0.8)),469 from (shade (@selected_bg_color, 0.8)),
471 color-stop (0.1, shade (@selected_bg_color, 0.9)),470 color-stop (0.1, shade (@selected_bg_color, 0.9)),
@@ -985,12 +984,21 @@
985.progressbar row:hover,984.progressbar row:hover,
986.progressbar row:selected,985.progressbar row:selected,
987.progressbar row:selected:focused,986.progressbar row:selected:focused,
988.progressbar row:nth-child(odd) {987.progressbar row:nth-child(odd),
989 border-radius: 8px;988.toolbar .progressbar,
990 border-width: 0px;989.entry .progressbar {
991 background-image: none;990 border-radius: 5px;
992 background-color: #db6a3c;
993 border-style: solid;991 border-style: solid;
992 border-width: 1px;
993 background-image: linear-gradient(to bottom,
994 @progressbar_fill_a,
995 @progressbar_fill_b);
996 border-top-color: shade(@button_border_active, 0.80);
997 border-left-color: shade(@button_border_active, 0.85);
998 border-right-color: shade(@button_border_active, 0.85);
999 border-bottom-color: shade(@button_border_active, 0.80);
1000 color: @theme_fg_color;
1001 text-shadow: none;
994}1002}
9951003
996.progressbar:backdrop,1004.progressbar:backdrop,
@@ -1000,10 +1008,18 @@
1000.progressbar row:selected:focused:backdrop,1008.progressbar row:selected:focused:backdrop,
1001.scale.highlight.bottom:backdrop,1009.scale.highlight.bottom:backdrop,
1002.progressbar.vertical:backdrop {1010.progressbar.vertical:backdrop {
1003 border-radius: 8px;1011 border-radius: 5px;
1004 border-width: 0px;1012 border-width: 1px;
1005 background-image: none;1013 border-style: solid;
1006 background-color: @backdrop_filling_bg;1014 background-image: linear-gradient(to bottom,
1015 @progressbar_fill_a,
1016 @progressbar_fill_b);
1017 border-top-color: shade(@button_border_backdrop_active, 0.80);
1018 border-left-color: shade(@button_border_backdrop_active, 0.85);
1019 border-right-color: shade(@button_border_backdrop_active, 0.85);
1020 border-bottom-color: shade(@button_border_backdrop_active, 0.80);
1021 color: @backdrop_fg_color;
1022 text-shadow: none;
1007}1023}
10081024
1009.scale.highlight.left:insensitive {1025.scale.highlight.left:insensitive {
10101026
=== 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-20 09:44:28 +0000
@@ -52,6 +52,13 @@
5252
53@define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */53@define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
5454
55@define-color progressbar_fill_a shade(@theme_selected_bg_color, 1.07);
56@define-color progressbar_fill_b shade(mix(@theme_selected_bg_color, @selected_bg_color, 0.10), 0.91);
57@define-color button_border_active shade(@theme_selected_bg_color, 0.95);
58@define-color progressbar_backdrop_fill_a shade(@backdrop_selected_bg_color, 1.07);
59@define-color progressbar_backdrop_fill_b shade(mix(@backdrop_selected_bg_color, grey, 0.10), 0.91);
60@define-color button_border_backdrop_active shade(@backdrop_selected_bg_color, 0.95);
61
55@import url("gtk-widgets-borders.css");62@import url("gtk-widgets-borders.css");
56@import url("gtk-widgets-borders-radiance.css");63@import url("gtk-widgets-borders-radiance.css");
57@import url("gtk-widgets-assets.css");64@import url("gtk-widgets-assets.css");
5865
=== 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-20 09:44:28 +0000
@@ -53,8 +53,7 @@
53.menubar.toolbar .entry.progressbar,53.menubar.toolbar .entry.progressbar,
54.menubar.toolbar .entry.progressbar,54.menubar.toolbar .entry.progressbar,
55.header-bar .entry.progressbar,55.header-bar .entry.progressbar,
56.header-bar .entry.progressbar,56.header-bar .entry.progressbar {
57.entry.progressbar {
58 border-radius: 8px;57 border-radius: 8px;
59 border-width: 0;58 border-width: 0;
60}59}
@@ -228,30 +227,6 @@
228 border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch;227 border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch;
229}228}
230229
231.progressbar,
232.progressbar row,
233.progressbar row:hover,
234.progressbar row:selected,
235.progressbar row:selected:focused {
236 border-image: url("assets/progressbar-horizontal-fill.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
237}
238
239.progressbar.vertical {
240 border-image: url("assets/progressbar-vertical-fill.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
241}
242
243.progressbar:backdrop,
244.progressbar row:backdrop,
245.progressbar row:hover:backdrop,
246.progressbar row:selected:backdrop,
247.progressbar row:selected:focused:backdrop {
248 border-image: url("assets/progressbar-horizontal-fill-backdrop.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
249}
250
251.progressbar.vertical:backdrop {
252 border-image: url("assets/progressbar-vertical-fill-backdrop.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
253}
254
255.scale.trough {230.scale.trough {
256 border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch;231 border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch;
257}232}
258233
=== 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-20 09:44:28 +0000
@@ -486,8 +486,7 @@
486.primary-toolbar .entry.progressbar,486.primary-toolbar .entry.progressbar,
487.primary-toolbar .entry.progressbar,487.primary-toolbar .entry.progressbar,
488.header-bar .entry.progressbar,488.header-bar .entry.progressbar,
489.header-bar .entry.progressbar,489.header-bar .entry.progressbar {
490.entry.progressbar {
491 background-image: -gtk-gradient (linear, left top, left bottom,490 background-image: -gtk-gradient (linear, left top, left bottom,
492 from (shade (@selected_bg_color, 0.8)),491 from (shade (@selected_bg_color, 0.8)),
493 color-stop (0.1, shade (@selected_bg_color, 0.9)),492 color-stop (0.1, shade (@selected_bg_color, 0.9)),
@@ -1008,12 +1007,22 @@
1008.progressbar row,1007.progressbar row,
1009.progressbar row:hover,1008.progressbar row:hover,
1010.progressbar row:selected,1009.progressbar row:selected,
1011.progressbar row:selected:focused {1010.progressbar row:selected:focused,
1012 border-radius: 8px;1011.progressbar row:nth-child(odd),
1013 border-width: 0px;1012.toolbar .progressbar,
1014 background-image: none;1013.entry .progressbar {
1015 background-color: #db6a3c;1014 border-radius: 5px;
1016 border-style: solid;1015 border-style: solid;
1016 border-width: 1px;
1017 background-image: linear-gradient(to bottom,
1018 @progressbar_fill_a,
1019 @progressbar_fill_b);
1020 border-top-color: shade(@button_border_active, 0.80);
1021 border-left-color: shade(@button_border_active, 0.85);
1022 border-right-color: shade(@button_border_active, 0.85);
1023 border-bottom-color: shade(@button_border_active, 0.80);
1024 color: @theme_fg_color;
1025 text-shadow: none;
1017}1026}
10181027
1019.progressbar:backdrop,1028.progressbar:backdrop,
@@ -1023,10 +1032,18 @@
1023.progressbar row:selected:focused:backdrop,1032.progressbar row:selected:focused:backdrop,
1024.scale.highlight.bottom:backdrop,1033.scale.highlight.bottom:backdrop,
1025.progressbar.vertical:backdrop {1034.progressbar.vertical:backdrop {
1026 border-radius: 8px;1035 border-radius: 5px;
1027 border-width: 0px;1036 border-width: 1px;
1028 background-image: none;1037 border-style: solid;
1029 background-color: @backdrop_filling_bg;1038 background-image: linear-gradient(to bottom,
1039 @progressbar_fill_a,
1040 @progressbar_fill_b);
1041 border-top-color: shade(@button_border_backdrop_active, 0.80);
1042 border-left-color: shade(@button_border_backdrop_active, 0.85);
1043 border-right-color: shade(@button_border_backdrop_active, 0.85);
1044 border-bottom-color: shade(@button_border_backdrop_active, 0.80);
1045 color: @backdrop_fg_color;
1046 text-shadow: none;
1030}1047}
10311048
1032.scale.highlight.left:insensitive {1049.scale.highlight.left:insensitive {

Subscribers

People subscribed via source and target branches