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

Proposed by Iain Lane on 2016-06-20
Status: Merged
Approved by: Iain Lane on 2016-06-20
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 2016-06-20 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
1=== modified file 'Ambiance/gtk-3.0/gtk-main.css'
2--- Ambiance/gtk-3.0/gtk-main.css 2016-03-23 21:44:10 +0000
3+++ Ambiance/gtk-3.0/gtk-main.css 2016-06-20 09:44:28 +0000
4@@ -53,6 +53,13 @@
5
6 @define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
7
8+@define-color progressbar_fill_a shade(@theme_selected_bg_color, 1.07);
9+@define-color progressbar_fill_b shade(mix(@theme_selected_bg_color, @selected_bg_color, 0.10), 0.91);
10+@define-color button_border_active shade(@theme_selected_bg_color, 0.95);
11+@define-color progressbar_backdrop_fill_a shade(@backdrop_selected_bg_color, 1.07);
12+@define-color progressbar_backdrop_fill_b shade(mix(@backdrop_selected_bg_color, grey, 0.10), 0.91);
13+@define-color button_border_backdrop_active shade(@backdrop_selected_bg_color, 0.95);
14+
15 @import url("gtk-widgets-borders.css");
16 @import url("gtk-widgets-assets.css");
17 @import url("gtk-widgets.css");
18
19=== modified file 'Ambiance/gtk-3.0/gtk-widgets-borders.css'
20--- Ambiance/gtk-3.0/gtk-widgets-borders.css 2015-07-07 14:31:07 +0000
21+++ Ambiance/gtk-3.0/gtk-widgets-borders.css 2016-06-20 09:44:28 +0000
22@@ -53,8 +53,7 @@
23 .menubar.toolbar .entry.progressbar,
24 .menubar.toolbar .entry.progressbar,
25 .header-bar .entry.progressbar,
26-.header-bar .entry.progressbar,
27-.entry.progressbar {
28+.header-bar .entry.progressbar {
29 border-radius: 8px;
30 border-width: 0;
31 }
32@@ -219,30 +218,6 @@
33 border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch;
34 }
35
36-.progressbar,
37-.progressbar row,
38-.progressbar row:hover,
39-.progressbar row:selected,
40-.progressbar row:selected:focused {
41- border-image: url("assets/progressbar-horizontal-fill.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
42-}
43-
44-.progressbar.vertical {
45- border-image: url("assets/progressbar-vertical-fill.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
46-}
47-
48-.progressbar:backdrop,
49-.progressbar row:backdrop,
50-.progressbar row:hover:backdrop,
51-.progressbar row:selected:backdrop,
52-.progressbar row:selected:focused:backdrop {
53- border-image: url("assets/progressbar-horizontal-fill-backdrop.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
54-}
55-
56-.progressbar.vertical:backdrop {
57- border-image: url("assets/progressbar-vertical-fill-backdrop.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
58-}
59-
60 .scale.trough {
61 border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch;
62 }
63
64=== modified file 'Ambiance/gtk-3.0/gtk-widgets.css'
65--- Ambiance/gtk-3.0/gtk-widgets.css 2016-04-15 19:49:14 +0000
66+++ Ambiance/gtk-3.0/gtk-widgets.css 2016-06-20 09:44:28 +0000
67@@ -464,8 +464,7 @@
68 .primary-toolbar .entry.progressbar,
69 .primary-toolbar .entry.progressbar,
70 .header-bar .entry.progressbar,
71-.header-bar .entry.progressbar,
72-.entry.progressbar {
73+.header-bar .entry.progressbar {
74 background-image: -gtk-gradient (linear, left top, left bottom,
75 from (shade (@selected_bg_color, 0.8)),
76 color-stop (0.1, shade (@selected_bg_color, 0.9)),
77@@ -985,12 +984,21 @@
78 .progressbar row:hover,
79 .progressbar row:selected,
80 .progressbar row:selected:focused,
81-.progressbar row:nth-child(odd) {
82- border-radius: 8px;
83- border-width: 0px;
84- background-image: none;
85- background-color: #db6a3c;
86+.progressbar row:nth-child(odd),
87+.toolbar .progressbar,
88+.entry .progressbar {
89+ border-radius: 5px;
90 border-style: solid;
91+ border-width: 1px;
92+ background-image: linear-gradient(to bottom,
93+ @progressbar_fill_a,
94+ @progressbar_fill_b);
95+ border-top-color: shade(@button_border_active, 0.80);
96+ border-left-color: shade(@button_border_active, 0.85);
97+ border-right-color: shade(@button_border_active, 0.85);
98+ border-bottom-color: shade(@button_border_active, 0.80);
99+ color: @theme_fg_color;
100+ text-shadow: none;
101 }
102
103 .progressbar:backdrop,
104@@ -1000,10 +1008,18 @@
105 .progressbar row:selected:focused:backdrop,
106 .scale.highlight.bottom:backdrop,
107 .progressbar.vertical:backdrop {
108- border-radius: 8px;
109- border-width: 0px;
110- background-image: none;
111- background-color: @backdrop_filling_bg;
112+ border-radius: 5px;
113+ border-width: 1px;
114+ border-style: solid;
115+ background-image: linear-gradient(to bottom,
116+ @progressbar_fill_a,
117+ @progressbar_fill_b);
118+ border-top-color: shade(@button_border_backdrop_active, 0.80);
119+ border-left-color: shade(@button_border_backdrop_active, 0.85);
120+ border-right-color: shade(@button_border_backdrop_active, 0.85);
121+ border-bottom-color: shade(@button_border_backdrop_active, 0.80);
122+ color: @backdrop_fg_color;
123+ text-shadow: none;
124 }
125
126 .scale.highlight.left:insensitive {
127
128=== modified file 'Radiance/gtk-3.0/gtk-main.css'
129--- Radiance/gtk-3.0/gtk-main.css 2016-03-23 21:44:10 +0000
130+++ Radiance/gtk-3.0/gtk-main.css 2016-06-20 09:44:28 +0000
131@@ -52,6 +52,13 @@
132
133 @define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
134
135+@define-color progressbar_fill_a shade(@theme_selected_bg_color, 1.07);
136+@define-color progressbar_fill_b shade(mix(@theme_selected_bg_color, @selected_bg_color, 0.10), 0.91);
137+@define-color button_border_active shade(@theme_selected_bg_color, 0.95);
138+@define-color progressbar_backdrop_fill_a shade(@backdrop_selected_bg_color, 1.07);
139+@define-color progressbar_backdrop_fill_b shade(mix(@backdrop_selected_bg_color, grey, 0.10), 0.91);
140+@define-color button_border_backdrop_active shade(@backdrop_selected_bg_color, 0.95);
141+
142 @import url("gtk-widgets-borders.css");
143 @import url("gtk-widgets-borders-radiance.css");
144 @import url("gtk-widgets-assets.css");
145
146=== modified file 'Radiance/gtk-3.0/gtk-widgets-borders.css'
147--- Radiance/gtk-3.0/gtk-widgets-borders.css 2015-07-07 14:31:07 +0000
148+++ Radiance/gtk-3.0/gtk-widgets-borders.css 2016-06-20 09:44:28 +0000
149@@ -53,8 +53,7 @@
150 .menubar.toolbar .entry.progressbar,
151 .menubar.toolbar .entry.progressbar,
152 .header-bar .entry.progressbar,
153-.header-bar .entry.progressbar,
154-.entry.progressbar {
155+.header-bar .entry.progressbar {
156 border-radius: 8px;
157 border-width: 0;
158 }
159@@ -228,30 +227,6 @@
160 border-image: url("assets/switch-button-on-disabled.png") 9 11 9 11 / 9px 11px 9px 11px stretch;
161 }
162
163-.progressbar,
164-.progressbar row,
165-.progressbar row:hover,
166-.progressbar row:selected,
167-.progressbar row:selected:focused {
168- border-image: url("assets/progressbar-horizontal-fill.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
169-}
170-
171-.progressbar.vertical {
172- border-image: url("assets/progressbar-vertical-fill.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
173-}
174-
175-.progressbar:backdrop,
176-.progressbar row:backdrop,
177-.progressbar row:hover:backdrop,
178-.progressbar row:selected:backdrop,
179-.progressbar row:selected:focused:backdrop {
180- border-image: url("assets/progressbar-horizontal-fill-backdrop.png") 5 6 5 6 / 5px 6px 5px 6px stretch;
181-}
182-
183-.progressbar.vertical:backdrop {
184- border-image: url("assets/progressbar-vertical-fill-backdrop.png") 6 5 6 5 / 6px 5px 6px 5px stretch;
185-}
186-
187 .scale.trough {
188 border-image: url("assets/scale-horizontal-trough.png") 2 6 2 6 / 2px 6px 2px 6px stretch;
189 }
190
191=== modified file 'Radiance/gtk-3.0/gtk-widgets.css'
192--- Radiance/gtk-3.0/gtk-widgets.css 2016-04-15 19:49:14 +0000
193+++ Radiance/gtk-3.0/gtk-widgets.css 2016-06-20 09:44:28 +0000
194@@ -486,8 +486,7 @@
195 .primary-toolbar .entry.progressbar,
196 .primary-toolbar .entry.progressbar,
197 .header-bar .entry.progressbar,
198-.header-bar .entry.progressbar,
199-.entry.progressbar {
200+.header-bar .entry.progressbar {
201 background-image: -gtk-gradient (linear, left top, left bottom,
202 from (shade (@selected_bg_color, 0.8)),
203 color-stop (0.1, shade (@selected_bg_color, 0.9)),
204@@ -1008,12 +1007,22 @@
205 .progressbar row,
206 .progressbar row:hover,
207 .progressbar row:selected,
208-.progressbar row:selected:focused {
209- border-radius: 8px;
210- border-width: 0px;
211- background-image: none;
212- background-color: #db6a3c;
213+.progressbar row:selected:focused,
214+.progressbar row:nth-child(odd),
215+.toolbar .progressbar,
216+.entry .progressbar {
217+ border-radius: 5px;
218 border-style: solid;
219+ border-width: 1px;
220+ background-image: linear-gradient(to bottom,
221+ @progressbar_fill_a,
222+ @progressbar_fill_b);
223+ border-top-color: shade(@button_border_active, 0.80);
224+ border-left-color: shade(@button_border_active, 0.85);
225+ border-right-color: shade(@button_border_active, 0.85);
226+ border-bottom-color: shade(@button_border_active, 0.80);
227+ color: @theme_fg_color;
228+ text-shadow: none;
229 }
230
231 .progressbar:backdrop,
232@@ -1023,10 +1032,18 @@
233 .progressbar row:selected:focused:backdrop,
234 .scale.highlight.bottom:backdrop,
235 .progressbar.vertical:backdrop {
236- border-radius: 8px;
237- border-width: 0px;
238- background-image: none;
239- background-color: @backdrop_filling_bg;
240+ border-radius: 5px;
241+ border-width: 1px;
242+ border-style: solid;
243+ background-image: linear-gradient(to bottom,
244+ @progressbar_fill_a,
245+ @progressbar_fill_b);
246+ border-top-color: shade(@button_border_backdrop_active, 0.80);
247+ border-left-color: shade(@button_border_backdrop_active, 0.85);
248+ border-right-color: shade(@button_border_backdrop_active, 0.85);
249+ border-bottom-color: shade(@button_border_backdrop_active, 0.80);
250+ color: @backdrop_fg_color;
251+ text-shadow: none;
252 }
253
254 .scale.highlight.left:insensitive {

Subscribers

People subscribed via source and target branches