Ubuntu theme

Merge lp:~3v1n0/ubuntu-themes/osd-scrollbars-improvements into lp:ubuntu-themes

  1. osd-scrollbars-improvements
  2. Merge into trunk
Proposed by Marco Trevisan (Treviño) on 2015-08-26
Status: Merged
Approved by: Marco Trevisan (Treviño) on 2015-09-10
Approved revision: 462
Merged at revision: 451
Proposed branch: lp:~3v1n0/ubuntu-themes/osd-scrollbars-improvements
Merge into: lp:ubuntu-themes
Diff against target: 333 lines (+177/-20)
6 files modified
Ambiance/gtk-3.0/apps/gnome-terminal.css (+14/-3)
Ambiance/gtk-3.0/gtk-main.css (+3/-0)
Ambiance/gtk-3.0/gtk-widgets.css (+72/-8)
Radiance/gtk-3.0/apps/gnome-terminal.css (+13/-1)
Radiance/gtk-3.0/gtk-main.css (+3/-0)
Radiance/gtk-3.0/gtk-widgets.css (+72/-8)
To merge this branch: bzr merge lp:~3v1n0/ubuntu-themes/osd-scrollbars-improvements
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Approve on 2015-09-09
Lars Karlitski (community) 2015-08-26 Approve on 2015-09-08
Review via email: mp+269245@code.launchpad.net

Commit Message

Ambiance, Radiance: make overlay scrollbars too look more like the ubuntu designed ones

 - Remove the ugly background-gradient (and the highly rounded corners)
 - Show scrollbar track background only when using it (hovering or dragging)
 - Use some margin instead of resizing the scrollbar to get some proximity support on
   mouse enter as well (it will be shown when mouse is near)
 - Add some threshold pixels (2 now) for grabbing the slider
 - Add backdrop version

Description of the Change

This is the result: https://transfer.sh/yS1Zs/out-18.ogv
Threshold might be reduced if we want.

I've made also a version that shows the track only when mouse hovers it, but it needs a gtk patch.

It would be nice to add some transitions on bg changes, but for some reason they don't seem to work.

To post a comment you must log in.
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
Lars Karlitski (larsu) wrote :

Thanks for your work. I do like these better than what I came up with. However, we discussed on irc that we'll wait for an updated design before merging this.

Please link this request to bug #1450747.

Lars Karlitski (larsu) wrote :

We're not going to get any input from design before UI freeze, so let's go with this.

Thanks again!

review: Approve
Marco Trevisan (Treviño) (3v1n0) wrote :

gnome-terminal needed some custom love... Fixed (using some nicer colors for it).

You can test it at https://launchpad.net/~ci-train-ppa-service/+archive/ubuntu/landing-029

lp:~3v1n0/ubuntu-themes/osd-scrollbars-improvements updated on 2015-09-09
461. By Marco Trevisan (Treviño) on 2015-09-09

Scrollbar: ensure we've top-margin on horizontal sliders

PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
lp:~3v1n0/ubuntu-themes/osd-scrollbars-improvements updated on 2015-09-09
462. By Marco Trevisan (Treviño) on 2015-09-09

GnomeTerminal: use less custom theming for gnome-terminal

We only need some upstream patching, see gnome bug
https://bugzilla.gnome.org/show_bug.cgi?id=754796

PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'Ambiance/gtk-3.0/apps/gnome-terminal.css'
2--- Ambiance/gtk-3.0/apps/gnome-terminal.css 2015-01-15 13:09:21 +0000
3+++ Ambiance/gtk-3.0/apps/gnome-terminal.css 2015-09-09 18:23:26 +0000
4@@ -1,8 +1,19 @@
5 /* gnome-terminal */
6+@define-color terminal_bg #300a24;
7+
8 TerminalScreen {
9 -TerminalScreen-background-darkness: 0.95;
10-
11- background-color: #300a24;
12-
13+ background-color: @terminal_bg;
14 color: #fff;
15 }
16+
17+TerminalScreenContainer .scrollbar:hover:not(.slider),
18+TerminalScreenContainer .scrollbar.dragging:not(.slider) {
19+ background-color: alpha(@scrollbar_track_color, 0.4);
20+}
21+
22+/* Since .hovering class is not working here, we always use the same radius */
23+TerminalScreenContainer .scrollbar.slider.hovering,
24+TerminalScreenContainer .scrollbar.slider.dragging {
25+ border-radius: 1px;
26+}
27
28=== modified file 'Ambiance/gtk-3.0/gtk-main.css'
29--- Ambiance/gtk-3.0/gtk-main.css 2015-09-03 09:05:55 +0000
30+++ Ambiance/gtk-3.0/gtk-main.css 2015-09-09 18:23:26 +0000
31@@ -40,6 +40,7 @@
32 /*@define-color backdrop_dark_bg_color mix (@dark_bg_color, @dark_fg_color, 0.75);*/
33 @define-color backdrop_selected_bg_color shade (@bg_color, 0.92);
34 @define-color backdrop_selected_fg_color @fg_color;
35+@define-color backdrop_filling_bg #b0b0b0;
36
37 @define-color focus_color alpha (@selected_bg_color, 0.5);
38 @define-color focus_bg_color alpha (@selected_bg_color, 0.1);
39@@ -50,6 +51,8 @@
40 @define-color osd_bg_color alpha(#202526, 0.7);
41 @define-color osd_border_color alpha(black, 0.7);
42
43+@define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
44+
45 @import url("gtk-widgets-borders.css");
46 @import url("gtk-widgets-assets.css");
47 @import url("gtk-widgets.css");
48
49=== modified file 'Ambiance/gtk-3.0/gtk-widgets.css'
50--- Ambiance/gtk-3.0/gtk-widgets.css 2015-07-21 09:53:24 +0000
51+++ Ambiance/gtk-3.0/gtk-widgets.css 2015-09-09 18:23:26 +0000
52@@ -983,7 +983,7 @@
53 border-radius: 8px;
54 border-width: 0px;
55 background-image: none;
56- background-color: #b0b0b0;
57+ background-color: @backdrop_filling_bg;
58 }
59
60 .scale.highlight.left:insensitive {
61@@ -1050,8 +1050,8 @@
62 .level-bar.fill-block:backdrop,
63 .level-bar.fill-block.level-high:backdrop,
64 .level-bar.fill-block.level-low:backdrop {
65- background-color: #b0b0b0;
66- border-color: #b0b0b0;
67+ background-color: @backdrop_filling_bg;
68+ border-color: @backdrop_filling_bg;
69 background-image: none;
70 }
71
72@@ -1140,26 +1140,90 @@
73 -GtkScrollbar-has-forward-stepper: 0;
74 -GtkScrollbar-trough-border: 0;
75 -GtkScrollbar-min-slider-length: 31;
76- -GtkRange-slider-width: 3;
77+ -GtkRange-slider-width: 10;
78
79+ background-image: none;
80+ background-size: 0;
81 border: none;
82+ border-radius: 0;
83 }
84
85-.scrollbar.hovering,
86+.scrollbar:hover,
87 .scrollbar.dragging {
88- -GtkRange-slider-width: 10;
89- background-color: alpha(@bg_color, 0.8);
90+ background-color: @scrollbar_track_color;
91+}
92+
93+.scrollbar:hover:backdrop,
94+.scrollbar.dragging:backdrop {
95+ background-color: @backdrop_selected_bg_color;
96+}
97+
98+/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
99+ * this allows to keep the slider smaller, but keeping few threshold pixels
100+ */
101+.scrollbar.vertical:hover:dir(ltr),
102+.scrollbar.vertical.dragging:dir(ltr) {
103+ margin-left: 2px;
104+}
105+
106+.scrollbar.vertical:hover:dir(rtl),
107+.scrollbar.vertical.dragging:dir(rtl) {
108+ margin-right: 2px;
109+}
110+
111+.scrollbar.horizontal:hover,
112+.scrollbar.horizontal.dragging,
113+.scrollbar.horizontal.slider:hover,
114+.scrollbar.horizontal.slider.dragging {
115+ margin-top: 2px;
116 }
117
118 .scrollbar.slider {
119 background-color: alpha(@selected_bg_color, 0.8);
120- border-radius: 8px;
121+ border-radius: 1px;
122+}
123+
124+.scrollbar.slider.hovering,
125+.scrollbar.slider.dragging {
126+ border-radius: 2px;
127+ margin: 0;
128+}
129+
130+/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
131+ * this allows to define some kind of proximity effect also on mouse-enter
132+ */
133+.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) {
134+ margin-left: 7px;
135+}
136+
137+.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) {
138+ margin-right: 7px;
139+}
140+
141+.scrollbar.slider.horizontal:not(:hover):not(.dragging) {
142+ margin-top: 7px;
143+}
144+
145+.scrollbar.slider:hover {
146+ background-color: alpha(@selected_bg_color, 0.85);
147 }
148
149 .scrollbar.slider:active {
150 background-color: @selected_bg_color;
151 }
152
153+.scrollbar.slider:backdrop {
154+ background-color: alpha(@backdrop_filling_bg, 0.8);
155+}
156+
157+.scrollbar.slider:hover:backdrop {
158+ background-color: alpha(@backdrop_filling_bg, 0.85);
159+}
160+
161+.scrollbar.slider:active:backdrop {
162+ background-color: @backdrop_filling_bg;
163+}
164+
165 /*******************
166 * scrolled window *
167 *******************/
168
169=== modified file 'Radiance/gtk-3.0/apps/gnome-terminal.css'
170--- Radiance/gtk-3.0/apps/gnome-terminal.css 2011-06-24 13:21:08 +0000
171+++ Radiance/gtk-3.0/apps/gnome-terminal.css 2015-09-09 18:23:26 +0000
172@@ -1,7 +1,19 @@
173 /* gnome-terminal */
174+@define-color terminal_bg #300a24;
175+
176 TerminalScreen {
177 -TerminalScreen-background-darkness: 0.95;
178- background-color: #300a24;
179+ background-color: @terminal_bg;
180 color: #fff;
181 }
182
183+TerminalScreenContainer .scrollbar:hover:not(.slider),
184+TerminalScreenContainer .scrollbar.dragging:not(.slider) {
185+ background-color: alpha(@scrollbar_track_color, 0.4);
186+}
187+
188+/* Since .hovering class is not working here, we always use the same radius */
189+TerminalScreenContainer .scrollbar.slider.hovering,
190+TerminalScreenContainer .scrollbar.slider.dragging {
191+ border-radius: 1px;
192+}
193
194=== modified file 'Radiance/gtk-3.0/gtk-main.css'
195--- Radiance/gtk-3.0/gtk-main.css 2015-09-03 09:05:55 +0000
196+++ Radiance/gtk-3.0/gtk-main.css 2015-09-09 18:23:26 +0000
197@@ -39,6 +39,7 @@
198 @define-color backdrop_dark_fg_color mix (@dark_bg_color, @dark_fg_color, 0.75);
199 @define-color backdrop_selected_bg_color shade (@bg_color, 0.92);
200 @define-color backdrop_selected_fg_color @fg_color;
201+@define-color backdrop_filling_bg #b0b0b0;
202
203 @define-color focus_color alpha (@selected_bg_color, 0.5);
204 @define-color focus_bg_color alpha (@selected_bg_color, 0.1);
205@@ -49,6 +50,8 @@
206 @define-color osd_bg_color alpha(#202526, 0.7);
207 @define-color osd_border_color alpha(black, 0.7);
208
209+@define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
210+
211 @import url("gtk-widgets-borders.css");
212 @import url("gtk-widgets-borders-radiance.css");
213 @import url("gtk-widgets-assets.css");
214
215=== modified file 'Radiance/gtk-3.0/gtk-widgets.css'
216--- Radiance/gtk-3.0/gtk-widgets.css 2015-07-21 09:53:24 +0000
217+++ Radiance/gtk-3.0/gtk-widgets.css 2015-09-09 18:23:26 +0000
218@@ -1006,7 +1006,7 @@
219 border-radius: 8px;
220 border-width: 0px;
221 background-image: none;
222- background-color: #b0b0b0;
223+ background-color: @backdrop_filling_bg;
224 }
225
226 .scale.highlight.left:insensitive {
227@@ -1073,8 +1073,8 @@
228 .level-bar.fill-block:backdrop,
229 .level-bar.fill-block.level-high:backdrop,
230 .level-bar.fill-block.level-low:backdrop {
231- background-color: #b0b0b0;
232- border-color: #b0b0b0;
233+ background-color: @backdrop_filling_bg;
234+ border-color: @backdrop_filling_bg;
235 background-image: none;
236 }
237
238@@ -1162,26 +1162,90 @@
239 -GtkScrollbar-has-forward-stepper: 0;
240 -GtkScrollbar-trough-border: 0;
241 -GtkScrollbar-min-slider-length: 31;
242- -GtkRange-slider-width: 3;
243+ -GtkRange-slider-width: 10;
244
245+ background-image: none;
246+ background-size: 0;
247 border: none;
248+ border-radius: 0;
249 }
250
251-.scrollbar.hovering,
252+.scrollbar:hover,
253 .scrollbar.dragging {
254- -GtkRange-slider-width: 10;
255- background-color: alpha(@bg_color, 0.8);
256+ background-color: @scrollbar_track_color;
257+}
258+
259+.scrollbar:hover:backdrop,
260+.scrollbar.dragging:backdrop {
261+ background-color: @backdrop_selected_bg_color;
262+}
263+
264+/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
265+ * this allows to keep the slider smaller, but keeping few threshold pixels
266+ */
267+.scrollbar.vertical:hover:dir(ltr),
268+.scrollbar.vertical.dragging:dir(ltr) {
269+ margin-left: 2px;
270+}
271+
272+.scrollbar.vertical:hover:dir(rtl),
273+.scrollbar.vertical.dragging:dir(rtl) {
274+ margin-right: 2px;
275+}
276+
277+.scrollbar.horizontal:hover,
278+.scrollbar.horizontal.dragging,
279+.scrollbar.horizontal.slider:hover,
280+.scrollbar.horizontal.slider.dragging {
281+ margin-top: 2px;
282 }
283
284 .scrollbar.slider {
285 background-color: alpha(@selected_bg_color, 0.8);
286- border-radius: 8px;
287+ border-radius: 1px;
288+}
289+
290+.scrollbar.slider.hovering,
291+.scrollbar.slider.dragging {
292+ border-radius: 2px;
293+ margin: 0;
294+}
295+
296+/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
297+ * this allows to define some kind of proximity effect also on mouse-enter
298+ */
299+.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) {
300+ margin-left: 7px;
301+}
302+
303+.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) {
304+ margin-right: 7px;
305+}
306+
307+.scrollbar.slider.horizontal:not(:hover):not(.dragging) {
308+ margin-top: 7px;
309+}
310+
311+.scrollbar.slider:hover {
312+ background-color: alpha(@selected_bg_color, 0.85);
313 }
314
315 .scrollbar.slider:active {
316 background-color: @selected_bg_color;
317 }
318
319+.scrollbar.slider:backdrop {
320+ background-color: alpha(@backdrop_filling_bg, 0.8);
321+}
322+
323+.scrollbar.slider:hover:backdrop {
324+ background-color: alpha(@backdrop_filling_bg, 0.85);
325+}
326+
327+.scrollbar.slider:active:backdrop {
328+ background-color: @backdrop_filling_bg;
329+}
330+
331 /*******************
332 * scrolled window *
333 *******************/

Subscribers

People subscribed via source and target branches