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

Proposed by Iain Lane
Status: Superseded
Proposed branch: lp:~laney/ubuntu-themes/progressbars-16.04
Merge into: lp:ubuntu-themes
Diff against target: 314 lines (+103/-76) (has conflicts)
8 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)
debian/changelog (+30/-0)
debian/control (+2/-2)
Text conflict in debian/changelog
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+297888@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.

Unmerged revisions

480. By Iain Lane

Merge branch from willcooke to fix progress bar styling

479. By Iain Lane

releasing package ubuntu-themes version 14.04+16.04.20160415-0ubuntu2

478. By Iain Lane

Update Vcs-Bzr for 16.04

477. By Iain Lane

Adds Terminal specific CSS to change tab colours making it easier to
distinguish the current selected tab from the others. Design have reviewed
and ack'd. LP: #762349

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 {
255
256=== modified file 'debian/changelog'
257--- debian/changelog 2016-06-15 19:52:44 +0000
258+++ debian/changelog 2016-06-20 09:44:28 +0000
259@@ -1,3 +1,4 @@
260+<<<<<<< TREE
261 ubuntu-themes (14.04+16.10.20160615.1-0ubuntu1) yakkety; urgency=medium
262
263 [ Matthieu James ]
264@@ -46,6 +47,35 @@
265
266 -- Sebastien Bacher <seb128@ubuntu.com> Fri, 15 Apr 2016 19:49:25 +0000
267
268+=======
269+ubuntu-themes (14.04+16.04.20160415-0ubuntu2) xenial; urgency=medium
270+
271+ [ Will Cooke ]
272+ * Adds Terminal specific CSS to change tab colours making it easier to
273+ distinguish the current selected tab from the others. Design have reviewed
274+ and ack'd. LP: #762349
275+
276+ [ Iain Lane ]
277+ * Update Vcs-Bzr for 16.04
278+
279+ -- Iain Lane <iain.lane@canonical.com> Tue, 24 May 2016 10:54:25 +0100
280+
281+ubuntu-themes (14.04+16.04.20160415-0ubuntu1) xenial; urgency=medium
282+
283+ [ Adolfo Jayme Barrientos ]
284+ * Add 1px padding to calendar widget elements; looks better. Thanks,
285+ Khurshid Alam. (LP: #1537794)
286+
287+ [ Matthieu James ]
288+ * Suru icon theme: normalization of arrows used in mono icons, plus
289+ minor additions or updates to existing designs. (LP: #1518934)
290+
291+ [ Will Cooke ]
292+ * Adds these fixes for Calendar: (LP: #1551744, #1558659)
293+
294+ -- Sebastien Bacher <seb128@ubuntu.com> Fri, 15 Apr 2016 19:49:25 +0000
295+
296+>>>>>>> MERGE-SOURCE
297 ubuntu-themes (14.04+16.04.20160324.1-0ubuntu1) xenial; urgency=medium
298
299 [ Marco Trevisan (TreviƱo) ]
300
301=== modified file 'debian/control'
302--- debian/control 2015-02-02 14:03:57 +0000
303+++ debian/control 2016-06-20 09:44:28 +0000
304@@ -12,8 +12,8 @@
305 # If you aren't a member of ~ubuntu-art-pkg but need to upload
306 # packaging changes, just go ahead. ~ubuntu-art-pkg will notice
307 # and sync up the code again.
308-Vcs-Bzr: https://code.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk
309-Vcs-Browser: https://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk
310+Vcs-Bzr: https://code.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/16.04
311+Vcs-Browser: https://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/16.04
312
313 Package: light-themes
314 Architecture: all

Subscribers

People subscribed via source and target branches