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

Proposed by Marco Trevisan (Treviño) on 2018-04-21
Status: Merged
Approved by: Marco Trevisan (Treviño) on 2018-04-21
Approved revision: 621
Merged at revision: 623
Proposed branch: lp:~3v1n0/ubuntu-themes/placessidebar-improvements
Merge into: lp:ubuntu-themes
Prerequisite: lp:~3v1n0/ubuntu-themes/theme-colors-definitions
Diff against target: 377 lines (+96/-124)
4 files modified
Ambiance/gtk-3.20/gtk-main.css (+1/-1)
Ambiance/gtk-3.20/gtk-widgets.css (+47/-61)
Radiance/gtk-3.20/gtk-main.css (+1/-1)
Radiance/gtk-3.20/gtk-widgets.css (+47/-61)
To merge this branch: bzr merge lp:~3v1n0/ubuntu-themes/placessidebar-improvements
Reviewer Review Type Date Requested Status
Ubuntu Artwork Packagers 2018-04-21 Pending
Review via email: mp+343748@code.launchpad.net

Commit message

Ambiance, Radiance: use proper colors for drop actions on places sidebar

Also use proper selection covering the whole item line.

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.20/gtk-main.css'
2--- Ambiance/gtk-3.20/gtk-main.css 2018-04-21 01:57:34 +0000
3+++ Ambiance/gtk-3.20/gtk-main.css 2018-04-21 01:57:34 +0000
4@@ -50,7 +50,7 @@
5 @define-color panel_darker_color shade (@dark_bg_color, 0.96);
6 @define-color maximized_header_color shade (@dark_bg_color, 1.3);
7 @define-color places_sidebar_bg shade(@dark_bg_color, 1.56);
8-@define-color places_sidebar_backdrop_bg mix(@places_sidebar_bg, @bg_color, 0.15);
9+@define-color places_sidebar_backdrop_bg @wm_bg_b;
10 @define-color places_sidebar_fg_color @selected_fg_color;
11 @define-color places_sidebar_selected_bg_color @selected_bg_color;
12
13
14=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
15--- Ambiance/gtk-3.20/gtk-widgets.css 2018-04-21 01:57:34 +0000
16+++ Ambiance/gtk-3.20/gtk-widgets.css 2018-04-21 01:57:34 +0000
17@@ -2136,8 +2136,8 @@
18
19 paned placessidebar.sidebar:dir(ltr),
20 placessidebar.sidebar:dir(ltr) {
21- box-shadow: inset 39px -1px 0px 0px shade(@places_sidebar_bg, 0.75),
22- inset 38px -1px 0px 0px shade(@places_sidebar_bg, 0.85);
23+ box-shadow: inset 39px 0 0 0 shade(@places_sidebar_bg, 0.75),
24+ inset 38px 0 0 0 shade(@places_sidebar_bg, 0.85);
25 }
26
27 paned placessidebar.sidebar:dir(rtl),
28@@ -2153,16 +2153,10 @@
29 background-color: @places_sidebar_backdrop_bg;
30 }
31
32-paned placessidebar.sidebar:dir(ltr):backdrop,
33-placessidebar.sidebar:dir(ltr):backdrop {
34- box-shadow: inset 39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
35- inset 38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
36-}
37-
38 paned placessidebar.sidebar:dir(rtl):backdrop,
39 placessidebar.sidebar:dir(rtl):backdrop {
40- box-shadow: inset -39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
41- inset -38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
42+ box-shadow: inset -39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
43+ inset -38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
44 }
45
46 placessidebar.sidebar row.sidebar-row {
47@@ -2176,77 +2170,66 @@
48 text-shadow: none;
49 }
50
51+placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row {
52+ color: @question_bg_color;
53+}
54+
55 placessidebar.sidebar row.sidebar-row:hover {
56- background-color: transparent;
57- background-image: linear-gradient(to right,
58- transparent 39px,
59- @places_sidebar_selected_bg_color 39px,
60- @places_sidebar_selected_bg_color 100%);
61 color: @places_sidebar_fg_color;
62 text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
63+ box-shadow: inset 39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @places_sidebar_selected_bg_color, 0.55),
64+ inset 38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @places_sidebar_selected_bg_color, 0.55);
65+ background-color: @places_sidebar_selected_bg_color;
66 }
67
68-placessidebar.sidebar row.sidebar-row:hover:dir(rtl) {
69- background-image: linear-gradient(to left,
70- transparent 39px,
71- @places_sidebar_selected_bg_color 39px,
72- @places_sidebar_selected_bg_color 100%);
73+placessidebar.sidebar row.sidebar-row:hover:selected:dir(rtl) {
74+ box-shadow: inset -39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @places_sidebar_selected_bg_color, 0.85),
75+ inset -38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @places_sidebar_selected_bg_color, 0.85);
76 }
77
78 placessidebar.sidebar row.sidebar-row:hover:backdrop {
79- background-image: linear-gradient(to right,
80- transparent 39px,
81- alpha(@backdrop_selected_bg_color, 0.4) 39px,
82- alpha(@backdrop_selected_bg_color, 0.4) 100%);
83+ box-shadow: inset 39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), alpha(@backdrop_selected_bg_color, 0.4), 0.55),
84+ inset 38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), alpha(@backdrop_selected_bg_color, 0.4), 0.55);
85+ background-color: alpha(@backdrop_selected_bg_color, 0.4);
86 color: @backdrop_selected_fg_color;
87 }
88
89 placessidebar.sidebar row.sidebar-row:hover:dir(rtl):backdrop {
90- background-image: linear-gradient(to left,
91- transparent 39px,
92- alpha(@backdrop_selected_bg_color, 0.4) 39px,
93- alpha(@backdrop_selected_bg_color, 0.4) 100%);
94+ box-shadow: inset -39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), alpha(@backdrop_selected_bg_color, 0.4), 0.55),
95+ inset -38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), alpha(@backdrop_selected_bg_color, 0.4), 0.55);
96 }
97
98 placessidebar.sidebar row.sidebar-row:selected:hover,
99+placessidebar.sidebar row.sidebar-row:selected:hover:dir(rtl)
100+placessidebar.sidebar row.sidebar-row:active:hover,
101+placessidebar.sidebar row.sidebar-row:active:hover:dir(rtl) {
102+ box-shadow: none;
103+ background-color: @places_sidebar_selected_bg_color;
104+ text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
105+ color: @places_sidebar_fg_color;
106+}
107+
108 placessidebar.sidebar row.sidebar-row:active:hover {
109- background-color: transparent;
110- background-image: linear-gradient(to right,
111- @places_sidebar_bg 39px,
112- @places_sidebar_selected_bg_color 39px,
113- @places_sidebar_selected_bg_color 100%);
114- text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
115- color: @places_sidebar_fg_color;
116+ box-shadow: inset 39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @places_sidebar_selected_bg_color, 0.85),
117+ inset 38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @places_sidebar_selected_bg_color, 0.85);
118 }
119
120-placessidebar.sidebar row.sidebar-row:selected:hover:dir(rtl),
121 placessidebar.sidebar row.sidebar-row:active:hover:dir(rtl) {
122- background-image: linear-gradient(to left,
123- @places_sidebar_bg 39px,
124- @places_sidebar_selected_bg_color 39px,
125- @places_sidebar_selected_bg_color 100%);
126+ box-shadow: inset -39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @places_sidebar_selected_bg_color, 0.85),
127+ inset -38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @places_sidebar_selected_bg_color, 0.85);
128 }
129
130 placessidebar.sidebar row.sidebar-row:selected:hover:backdrop,
131 placessidebar.sidebar row.sidebar-row:active:hover:backdrop {
132- background-image: linear-gradient(to right,
133- @places_sidebar_backdrop_bg 39px,
134- alpha(@backdrop_selected_bg_color, 0.4) 39px,
135- alpha(@backdrop_selected_bg_color, 0.4) 100%);
136+ background-color: alpha(@backdrop_selected_bg_color, 0.4);
137 color: @backdrop_selected_fg_color;
138 }
139
140-placessidebar.sidebar row.sidebar-row:selected:hover:backdrop:dir(rtl),
141-placessidebar.sidebar row.sidebar-row:active:hover:backdrop:dir(rtl) {
142- background-image: linear-gradient(to left,
143- @places_sidebar_backdrop_bg 39px,
144- alpha(@backdrop_selected_bg_color, 0.4) 39px,
145- alpha(@backdrop_selected_bg_color, 0.4) 100%);
146-}
147-
148-placessidebar.sidebar row.sidebar-row:selected,
149-placessidebar.sidebar row.sidebar-row:active {
150+placessidebar.sidebar row.sidebar-row:selected {
151 background-color: @places_sidebar_bg;
152+}
153+
154+placessidebar.sidebar row.sidebar-row:selected {
155 color: shade(@places_sidebar_selected_bg_color, 1.03);
156 text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.3), 0.5);
157 }
158@@ -2258,6 +2241,16 @@
159 text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.4), 0.4);
160 }
161
162+placessidebar.sidebar row.sidebar-row:drop(active),
163+placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row:drop(active) {
164+ color: @success_color;
165+}
166+
167+placessidebar.sidebar row.sidebar-row:selected:drop(active) {
168+ background-color: @success_color;
169+ color: @places_sidebar_fg_color;
170+}
171+
172 placessidebar.sidebar row.sidebar-row .sidebar-icon {
173 text-shadow: none;
174 background-image: none;
175@@ -2279,13 +2272,6 @@
176 color: @places_sidebar_fg_color;
177 }
178
179-placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon,
180-placessidebar.sidebar row.sidebar-row:selected .sidebar-icon,
181-placessidebar.sidebar row.sidebar-row:active:hover .sidebar-icon {
182- color: @places_sidebar_selected_bg_color;
183- background-color: transparent;
184-}
185-
186 placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon:backdrop,
187 placessidebar.sidebar row.sidebar-row:selected .sidebar-icon:backdrop,
188 placessidebar.sidebar .sidebar-button:active:backdrop {
189
190=== modified file 'Radiance/gtk-3.20/gtk-main.css'
191--- Radiance/gtk-3.20/gtk-main.css 2018-04-21 01:57:34 +0000
192+++ Radiance/gtk-3.20/gtk-main.css 2018-04-21 01:57:34 +0000
193@@ -50,7 +50,7 @@
194 @define-color panel_darker_color shade (@dark_bg_color, 0.96);
195 @define-color maximized_header_color shade (@dark_bg_color, 1.1);
196 @define-color places_sidebar_bg shade (@dark_bg_color, 1.1);
197-@define-color places_sidebar_backdrop_bg mix(@places_sidebar_bg, @bg_color, 0.15);
198+@define-color places_sidebar_backdrop_bg @wm_bg_b;
199 @define-color places_sidebar_fg_color @fg_color;
200 @define-color places_sidebar_selected_bg_color @selected_bg_color;
201
202
203=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
204--- Radiance/gtk-3.20/gtk-widgets.css 2018-04-21 01:57:34 +0000
205+++ Radiance/gtk-3.20/gtk-widgets.css 2018-04-21 01:57:34 +0000
206@@ -2131,8 +2131,8 @@
207
208 paned placessidebar.sidebar:dir(ltr),
209 placessidebar.sidebar:dir(ltr) {
210- box-shadow: inset 39px -1px 0px 0px shade(@places_sidebar_bg, 0.75),
211- inset 38px -1px 0px 0px shade(@places_sidebar_bg, 0.85);
212+ box-shadow: inset 39px 0 0 0 shade(@places_sidebar_bg, 0.75),
213+ inset 38px 0 0 0 shade(@places_sidebar_bg, 0.85);
214 }
215
216 paned placessidebar.sidebar:dir(rtl),
217@@ -2148,16 +2148,10 @@
218 background-color: @places_sidebar_backdrop_bg;
219 }
220
221-paned placessidebar.sidebar:dir(ltr):backdrop,
222-placessidebar.sidebar:dir(ltr):backdrop {
223- box-shadow: inset 39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
224- inset 38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
225-}
226-
227 paned placessidebar.sidebar:dir(rtl):backdrop,
228 placessidebar.sidebar:dir(rtl):backdrop {
229- box-shadow: inset -39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
230- inset -38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
231+ box-shadow: inset -39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15),
232+ inset -38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15);
233 }
234
235 placessidebar.sidebar row.sidebar-row {
236@@ -2171,77 +2165,66 @@
237 text-shadow: none;
238 }
239
240+placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row {
241+ color: @link_color;
242+}
243+
244 placessidebar.sidebar row.sidebar-row:hover {
245- background-color: transparent;
246- background-image: linear-gradient(to right,
247- transparent 39px,
248- @places_sidebar_selected_bg_color 39px,
249- @places_sidebar_selected_bg_color 100%);
250 color: @places_sidebar_fg_color;
251 text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
252+ box-shadow: inset 39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @places_sidebar_selected_bg_color, 0.55),
253+ inset 38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @places_sidebar_selected_bg_color, 0.55);
254+ background-color: @places_sidebar_selected_bg_color;
255 }
256
257-placessidebar.sidebar row.sidebar-row:hover:dir(rtl) {
258- background-image: linear-gradient(to left,
259- transparent 39px,
260- @places_sidebar_selected_bg_color 39px,
261- @places_sidebar_selected_bg_color 100%);
262+placessidebar.sidebar row.sidebar-row:hover:selected:dir(rtl) {
263+ box-shadow: inset -39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @places_sidebar_selected_bg_color, 0.85),
264+ inset -38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @places_sidebar_selected_bg_color, 0.85);
265 }
266
267 placessidebar.sidebar row.sidebar-row:hover:backdrop {
268- background-image: linear-gradient(to right,
269- transparent 39px,
270- alpha(@backdrop_selected_bg_color, 0.4) 39px,
271- alpha(@backdrop_selected_bg_color, 0.4) 100%);
272+ box-shadow: inset 39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), alpha(@backdrop_selected_bg_color, 0.4), 0.55),
273+ inset 38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), alpha(@backdrop_selected_bg_color, 0.4), 0.55);
274+ background-color: alpha(@backdrop_selected_bg_color, 0.4);
275 color: @backdrop_selected_fg_color;
276 }
277
278 placessidebar.sidebar row.sidebar-row:hover:dir(rtl):backdrop {
279- background-image: linear-gradient(to left,
280- transparent 39px,
281- alpha(@backdrop_selected_bg_color, 0.4) 39px,
282- alpha(@backdrop_selected_bg_color, 0.4) 100%);
283+ box-shadow: inset -39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), alpha(@backdrop_selected_bg_color, 0.4), 0.55),
284+ inset -38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), alpha(@backdrop_selected_bg_color, 0.4), 0.55);
285 }
286
287 placessidebar.sidebar row.sidebar-row:selected:hover,
288+placessidebar.sidebar row.sidebar-row:selected:hover:dir(rtl)
289+placessidebar.sidebar row.sidebar-row:active:hover,
290+placessidebar.sidebar row.sidebar-row:active:hover:dir(rtl) {
291+ box-shadow: none;
292+ background-color: @places_sidebar_selected_bg_color;
293+ text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
294+ color: @places_sidebar_fg_color;
295+}
296+
297 placessidebar.sidebar row.sidebar-row:active:hover {
298- background-color: transparent;
299- background-image: linear-gradient(to right,
300- @places_sidebar_bg 39px,
301- @places_sidebar_selected_bg_color 39px,
302- @places_sidebar_selected_bg_color 100%);
303- text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5);
304- color: @places_sidebar_fg_color;
305+ box-shadow: inset 39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @places_sidebar_selected_bg_color, 0.85),
306+ inset 38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @places_sidebar_selected_bg_color, 0.85);
307 }
308
309-placessidebar.sidebar row.sidebar-row:selected:hover:dir(rtl),
310 placessidebar.sidebar row.sidebar-row:active:hover:dir(rtl) {
311- background-image: linear-gradient(to left,
312- @places_sidebar_bg 39px,
313- @places_sidebar_selected_bg_color 39px,
314- @places_sidebar_selected_bg_color 100%);
315+ box-shadow: inset -39px 0 0 0 mix(shade(@places_sidebar_bg, 0.75), @places_sidebar_selected_bg_color, 0.85),
316+ inset -38px 0 0 0 mix(shade(@places_sidebar_bg, 0.85), @places_sidebar_selected_bg_color, 0.85);
317 }
318
319 placessidebar.sidebar row.sidebar-row:selected:hover:backdrop,
320 placessidebar.sidebar row.sidebar-row:active:hover:backdrop {
321- background-image: linear-gradient(to right,
322- @places_sidebar_backdrop_bg 39px,
323- alpha(@backdrop_selected_bg_color, 0.4) 39px,
324- alpha(@backdrop_selected_bg_color, 0.4) 100%);
325+ background-color: alpha(@backdrop_selected_bg_color, 0.4);
326 color: @backdrop_selected_fg_color;
327 }
328
329-placessidebar.sidebar row.sidebar-row:selected:hover:backdrop:dir(rtl),
330-placessidebar.sidebar row.sidebar-row:active:hover:backdrop:dir(rtl) {
331- background-image: linear-gradient(to left,
332- @places_sidebar_backdrop_bg 39px,
333- alpha(@backdrop_selected_bg_color, 0.4) 39px,
334- alpha(@backdrop_selected_bg_color, 0.4) 100%);
335-}
336-
337-placessidebar.sidebar row.sidebar-row:selected,
338-placessidebar.sidebar row.sidebar-row:active {
339+placessidebar.sidebar row.sidebar-row:selected {
340 background-color: @places_sidebar_bg;
341+}
342+
343+placessidebar.sidebar row.sidebar-row:selected {
344 color: shade(@places_sidebar_selected_bg_color, 1.03);
345 text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.3), 0.5);
346 }
347@@ -2253,6 +2236,16 @@
348 text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.4), 0.4);
349 }
350
351+placessidebar.sidebar row.sidebar-row:drop(active),
352+placessidebar.sidebar row.sidebar-row.sidebar-new-bookmark-row:drop(active) {
353+ color: @success_color;
354+}
355+
356+placessidebar.sidebar row.sidebar-row:selected:drop(active) {
357+ background-color: @success_color;
358+ color: @places_sidebar_fg_color;
359+}
360+
361 placessidebar.sidebar row.sidebar-row .sidebar-icon {
362 text-shadow: none;
363 background-image: none;
364@@ -2274,13 +2267,6 @@
365 color: @places_sidebar_fg_color;
366 }
367
368-placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon,
369-placessidebar.sidebar row.sidebar-row:selected .sidebar-icon,
370-placessidebar.sidebar row.sidebar-row:active:hover .sidebar-icon {
371- color: @places_sidebar_selected_bg_color;
372- background-color: transparent;
373-}
374-
375 placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon:backdrop,
376 placessidebar.sidebar row.sidebar-row:selected .sidebar-icon:backdrop,
377 placessidebar.sidebar .sidebar-button:active:backdrop {

Subscribers

People subscribed via source and target branches