Merge lp:~3v1n0/ubuntu-themes/placessidebar-ambiance-rw-inspired into lp:ubuntu-themes
- placessidebar-ambiance-rw-inspired
- Merge into trunk
Proposed by
Marco Trevisan (Treviño)
Status: | Merged |
---|---|
Approved by: | Andrea Azzarone |
Approved revision: | 621 |
Merged at revision: | 606 |
Proposed branch: | lp:~3v1n0/ubuntu-themes/placessidebar-ambiance-rw-inspired |
Merge into: | lp:ubuntu-themes |
Prerequisite: | lp:~3v1n0/ubuntu-themes/backdrop-views |
Diff against target: |
695 lines (+422/-134) 4 files modified
Ambiance/gtk-3.20/gtk-main.css (+4/-0) Ambiance/gtk-3.20/gtk-widgets.css (+207/-67) Radiance/gtk-3.20/gtk-main.css (+4/-0) Radiance/gtk-3.20/gtk-widgets.css (+207/-67) |
To merge this branch: | bzr merge lp:~3v1n0/ubuntu-themes/placessidebar-ambiance-rw-inspired |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Andrea Azzarone (community) | Approve | ||
Review via email: mp+341878@code.launchpad.net |
This proposal supersedes a proposal from 2018-03-22.
Commit message
Ambiance, Radiance: implement ambiance-rw inspired darker placessidebar
Imported https:/
to be easier to maintain, limiting gradients usage and adding
implementation for RTL directions and backdrop.
Also, support it for Radiance too.
Description of the change
Before: https:/
After: https:/
Based on https:/
As per design decision: https:/
DIff might be a bit confusing as not all the prerequisites have been merged. Check commits, please.
To post a comment you must log in.
- 621. By Marco Trevisan (Treviño)
-
Ambiance, Radiance: remove unsupported size property
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-01-17 17:09:29 +0000 |
3 | +++ Ambiance/gtk-3.20/gtk-main.css 2018-03-22 08:03:56 +0000 |
4 | @@ -127,6 +127,10 @@ |
5 | @define-color panel_lighter_color shade (@dark_bg_color, 1.4); |
6 | @define-color panel_darker_color shade (@dark_bg_color, 0.96); |
7 | @define-color maximized_header_color shade (@dark_bg_color, 1.3); |
8 | +@define-color places_sidebar_bg shade(@dark_bg_color, 1.56); |
9 | +@define-color places_sidebar_backdrop_bg mix(@places_sidebar_bg, @bg_color, 0.15); |
10 | +@define-color places_sidebar_fg_color @selected_fg_color; |
11 | +@define-color places_sidebar_selected_bg_color @selected_bg_color; |
12 | |
13 | @define-color suggested_action_bg #38b44a; |
14 | |
15 | |
16 | === modified file 'Ambiance/gtk-3.20/gtk-widgets.css' |
17 | --- Ambiance/gtk-3.20/gtk-widgets.css 2018-03-22 08:03:56 +0000 |
18 | +++ Ambiance/gtk-3.20/gtk-widgets.css 2018-03-22 08:03:56 +0000 |
19 | @@ -1114,20 +1114,15 @@ |
20 | |
21 | toolbar menu, |
22 | combobox menu { |
23 | - background-image: none; |
24 | - background-color: @bg_color; |
25 | - border-bottom-color: shade (@bg_color, 0.66); |
26 | - border-right-color: shade (@bg_color, 0.7); |
27 | - border-left-color: shade (@bg_color, 0.7); |
28 | - border-top-color: shade (@bg_color, 0.8); |
29 | - border-style: solid; |
30 | + background-image: linear-gradient(to bottom left, |
31 | + shade (@bg_color, 1.2), |
32 | + shade (@bg_color, 0.97), |
33 | + shade (@bg_color, 1.2)); |
34 | + background-color: transparent; |
35 | + border: none; |
36 | padding: 0; |
37 | |
38 | - color: @fg_color; |
39 | - |
40 | - box-shadow: inset -1px 0 shade (@bg_color, 1.18), |
41 | - inset 1px 0 shade (@bg_color, 1.18), |
42 | - inset 0 1px shade (@bg_color, 1.18); |
43 | + box-shadow: 13px 13px 13px 6px @inactive_shadow_color; |
44 | } |
45 | |
46 | menu:selected { |
47 | @@ -1207,15 +1202,15 @@ |
48 | } |
49 | |
50 | /* Workaround for lp:949368 */ |
51 | -combobox menuitem * { |
52 | +combobox menuitem { |
53 | color: @fg_color; |
54 | } |
55 | |
56 | -combobox menuitem *:hover { |
57 | +combobox menuitem:hover { |
58 | color: @selected_fg_color; |
59 | + text-shadow: 0 -1px shade (@dark_bg_color, 0.7); |
60 | } |
61 | |
62 | - |
63 | popover modelbutton:hover, |
64 | popover menuitem:checked:hover, |
65 | menuitem:hover, |
66 | @@ -2090,56 +2085,186 @@ |
67 | ***********/ |
68 | |
69 | filechooser box.search-bar, |
70 | -#pathbarbox, |
71 | -placessidebar.sidebar, |
72 | +#pathbarbox { |
73 | + background-color: shade (@bg_color, 0.95); |
74 | + color: @fg_color; |
75 | + text-shadow: none; |
76 | +} |
77 | + |
78 | placessidebar.sidebar list { |
79 | - background-color: shade (@bg_color, 0.95); |
80 | - |
81 | - color: @fg_color; |
82 | - text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.04); |
83 | -} |
84 | - |
85 | -filechooser:backdrop box.search-bar, |
86 | -#pathbarbox:backdrop, |
87 | -.sidebar list:backdrop, |
88 | -placessidebar.sidebar:backdrop, |
89 | -placessidebar.sidebar list:backdrop { |
90 | - color: mix (@fg_color, shade (@bg_color, 0.95), 0.2); |
91 | - text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02); |
92 | -} |
93 | - |
94 | -placessidebar.sidebar row, |
95 | -placessidebar.sidebar list row, |
96 | -.sidebar list { |
97 | + background-color: transparent; |
98 | +} |
99 | + |
100 | +placessidebar.sidebar list separator { |
101 | + background: transparent; |
102 | +} |
103 | + |
104 | +paned placessidebar.sidebar:dir(ltr), |
105 | +paned placessidebar.sidebar:dir(rtl), |
106 | +placessidebar.sidebar:dir(ltr), |
107 | +placessidebar.sidebar:dir(rtl) { |
108 | + border: none; |
109 | + min-width: 150px; |
110 | + background-color: @places_sidebar_bg; |
111 | + color: @places_sidebar_fg_color; |
112 | + text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5); |
113 | +} |
114 | + |
115 | +paned placessidebar.sidebar:dir(ltr), |
116 | +placessidebar.sidebar:dir(ltr) { |
117 | + box-shadow: inset 39px -1px 0px 0px shade(@places_sidebar_bg, 0.75), |
118 | + inset 38px -1px 0px 0px shade(@places_sidebar_bg, 0.85); |
119 | +} |
120 | + |
121 | +paned placessidebar.sidebar:dir(rtl), |
122 | +placessidebar.sidebar:dir(rtl) { |
123 | + box-shadow: inset -39px -1px 0px 0px shade(@places_sidebar_bg, 0.75), |
124 | + inset -38px -1px 0px 0px shade(@places_sidebar_bg, 0.85); |
125 | +} |
126 | + |
127 | +paned placessidebar.sidebar:dir(ltr):backdrop, |
128 | +paned placessidebar.sidebar:dir(rtl):backdrop, |
129 | +placessidebar.sidebar:dir(ltr):backdrop, |
130 | +placessidebar.sidebar:dir(rtl):backdrop { |
131 | + background-color: @places_sidebar_backdrop_bg; |
132 | +} |
133 | + |
134 | +paned placessidebar.sidebar:dir(ltr):backdrop, |
135 | +placessidebar.sidebar:dir(ltr):backdrop { |
136 | + box-shadow: inset 39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15), |
137 | + inset 38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15); |
138 | +} |
139 | + |
140 | +paned placessidebar.sidebar:dir(rtl):backdrop, |
141 | +placessidebar.sidebar:dir(rtl):backdrop { |
142 | + box-shadow: inset -39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15), |
143 | + inset -38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15); |
144 | +} |
145 | + |
146 | +placessidebar.sidebar row.sidebar-row { |
147 | + color: shade(@places_sidebar_fg_color, 0.9); |
148 | + background-image: none; |
149 | + background-repeat: no-repeat; |
150 | + background-position: top left; |
151 | + background-color: transparent; |
152 | min-height: 30px; |
153 | -} |
154 | - |
155 | -placessidebar.sidebar list row.activatable:hover:not(:selected), |
156 | -placessidebar.sidebar list row.has-open-popup { |
157 | - background-color: shade (shade (@bg_color, 0.95), 0.965); |
158 | -} |
159 | - |
160 | -placessidebar.sidebar row:selected, |
161 | -placessidebar.sidebar list row:selected { |
162 | - color: @selected_fg_color; |
163 | - text-shadow: 0 1px shade (@selected_bg_color, 0.7); |
164 | -} |
165 | - |
166 | -placessidebar.sidebar row:selected:backdrop, |
167 | -placessidebar.sidebar list row:selected:backdrop { |
168 | - background-image: -gtk-gradient (linear, left top, left bottom, |
169 | - from (shade (shade (@bg_color, 0.95), 0.94)), |
170 | - to (shade (shade (@bg_color, 0.95), 0.86))); |
171 | - border-top-color: shade (shade (@bg_color, 0.95), 0.88); |
172 | - |
173 | - color: @fg_color; |
174 | - text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96); |
175 | -} |
176 | - |
177 | -placessidebar.sidebar .sidebar-icon, |
178 | -placessidebar.sidebar list .sidebar-icon { |
179 | - padding-left: 10px; |
180 | - padding-right: 10px; |
181 | + border:none; |
182 | + text-shadow: none; |
183 | +} |
184 | + |
185 | +placessidebar.sidebar row.sidebar-row:hover { |
186 | + background-color: transparent; |
187 | + background-image: linear-gradient(to right, |
188 | + transparent 39px, |
189 | + @places_sidebar_selected_bg_color 39px, |
190 | + @places_sidebar_selected_bg_color 100%); |
191 | + color: @places_sidebar_fg_color; |
192 | + text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5); |
193 | +} |
194 | + |
195 | +placessidebar.sidebar row.sidebar-row:hover:dir(rtl) { |
196 | + background-image: linear-gradient(to left, |
197 | + transparent 39px, |
198 | + @places_sidebar_selected_bg_color 39px, |
199 | + @places_sidebar_selected_bg_color 100%); |
200 | +} |
201 | + |
202 | +placessidebar.sidebar row.sidebar-row:hover:backdrop { |
203 | + background-image: linear-gradient(to right, |
204 | + transparent 39px, |
205 | + alpha(@backdrop_selected_bg_color, 0.4) 39px, |
206 | + alpha(@backdrop_selected_bg_color, 0.4) 100%); |
207 | + color: @backdrop_selected_fg_color; |
208 | +} |
209 | + |
210 | +placessidebar.sidebar row.sidebar-row:hover:dir(rtl):backdrop { |
211 | + background-image: linear-gradient(to left, |
212 | + transparent 39px, |
213 | + alpha(@backdrop_selected_bg_color, 0.4) 39px, |
214 | + alpha(@backdrop_selected_bg_color, 0.4) 100%); |
215 | +} |
216 | + |
217 | +placessidebar.sidebar row.sidebar-row:selected:hover, |
218 | +placessidebar.sidebar row.sidebar-row:active:hover { |
219 | + background-color: transparent; |
220 | + background-image: linear-gradient(to right, |
221 | + @places_sidebar_bg 39px, |
222 | + @places_sidebar_selected_bg_color 39px, |
223 | + @places_sidebar_selected_bg_color 100%); |
224 | + text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5); |
225 | + color: @places_sidebar_fg_color; |
226 | +} |
227 | + |
228 | +placessidebar.sidebar row.sidebar-row:selected:hover:dir(rtl), |
229 | +placessidebar.sidebar row.sidebar-row:active:hover:dir(rtl) { |
230 | + background-image: linear-gradient(to left, |
231 | + @places_sidebar_bg 39px, |
232 | + @places_sidebar_selected_bg_color 39px, |
233 | + @places_sidebar_selected_bg_color 100%); |
234 | +} |
235 | + |
236 | +placessidebar.sidebar row.sidebar-row:selected:hover:backdrop, |
237 | +placessidebar.sidebar row.sidebar-row:active:hover:backdrop { |
238 | + background-image: linear-gradient(to right, |
239 | + @places_sidebar_backdrop_bg 39px, |
240 | + alpha(@backdrop_selected_bg_color, 0.4) 39px, |
241 | + alpha(@backdrop_selected_bg_color, 0.4) 100%); |
242 | + color: @backdrop_selected_fg_color; |
243 | +} |
244 | + |
245 | +placessidebar.sidebar row.sidebar-row:selected:hover:backdrop:dir(rtl), |
246 | +placessidebar.sidebar row.sidebar-row:active:hover:backdrop:dir(rtl) { |
247 | + background-image: linear-gradient(to left, |
248 | + @places_sidebar_backdrop_bg 39px, |
249 | + alpha(@backdrop_selected_bg_color, 0.4) 39px, |
250 | + alpha(@backdrop_selected_bg_color, 0.4) 100%); |
251 | +} |
252 | + |
253 | +placessidebar.sidebar row.sidebar-row:selected, |
254 | +placessidebar.sidebar row.sidebar-row:active { |
255 | + background-color: @places_sidebar_bg; |
256 | + color: shade(@places_sidebar_selected_bg_color, 1.03); |
257 | + text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.3), 0.5); |
258 | +} |
259 | + |
260 | +placessidebar.sidebar row.sidebar-row:selected:backdrop, |
261 | +placessidebar.sidebar row.sidebar-row:active:backdrop { |
262 | + background-color: @places_sidebar_backdrop_bg; |
263 | + color: mix(shade(@places_sidebar_selected_bg_color, 1.03), shade(@places_sidebar_fg_color, 0.9), 0.3); |
264 | + text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.4), 0.4); |
265 | +} |
266 | + |
267 | +placessidebar.sidebar row.sidebar-row .sidebar-icon { |
268 | + text-shadow: none; |
269 | + background-image: none; |
270 | + padding-left: 12px; |
271 | + padding-right: 12px; |
272 | +} |
273 | + |
274 | +placessidebar.sidebar row.sidebar-row .sidebar-icon:dir(ltr) { |
275 | + margin-left: 0; |
276 | + margin-right: 12px; |
277 | +} |
278 | + |
279 | +placessidebar.sidebar row.sidebar-row .sidebar-icon:dir(rtl) { |
280 | + margin-left: 12px; |
281 | + margin-right: 0; |
282 | +} |
283 | + |
284 | +placessidebar.sidebar row.sidebar-row:hover .sidebar-icon:backdrop { |
285 | + color: @places_sidebar_fg_color; |
286 | +} |
287 | + |
288 | +placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon, |
289 | +placessidebar.sidebar row.sidebar-row:selected .sidebar-icon, |
290 | +placessidebar.sidebar row.sidebar-row:active:hover .sidebar-icon { |
291 | + color: @places_sidebar_selected_bg_color; |
292 | + background-color: transparent; |
293 | +} |
294 | + |
295 | +placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon:backdrop, |
296 | +placessidebar.sidebar row.sidebar-row:selected .sidebar-icon:backdrop { |
297 | + color: mix(shade(@places_sidebar_selected_bg_color, 1.03), shade(@places_sidebar_fg_color, 0.9), 0.3); |
298 | } |
299 | |
300 | .sidebar, |
301 | @@ -3259,10 +3384,20 @@ |
302 | * popover * |
303 | ************/ |
304 | popover { |
305 | - background-clip: border-box; |
306 | + background-image: linear-gradient(to bottom left, |
307 | + shade (@bg_color, 0.98), |
308 | + shade (@bg_color, 0.93), |
309 | + shade (@bg_color, 0.98)); |
310 | + border-radius: 5px; |
311 | + border: none; |
312 | + padding: 2px; |
313 | +} |
314 | |
315 | +popover:backdrop { |
316 | + background-image: none; |
317 | + background-color: shade (@bg_color, 0.95); |
318 | border-radius: 5px; |
319 | - border: 1px solid darker(@bg_color); |
320 | + border: none; |
321 | padding: 2px; |
322 | } |
323 | |
324 | @@ -3291,8 +3426,14 @@ |
325 | popover menuitem:backdrop:hover { |
326 | border: none; |
327 | border-image: none; |
328 | - background: transparent; |
329 | + border-radius: 3px; |
330 | + box-shadow: none; |
331 | + background-color: transparent; |
332 | + background-image: -gtk-gradient (linear, left bottom, left top, |
333 | + from (shade (@backdrop_selected_bg_color, 0.95)), |
334 | + to (shade (@backdrop_selected_bg_color, 0.90))); |
335 | color: @fg_color; |
336 | + text-shadow: 0 -1px alpha (shade (@fg_color, 1.45), 0.7); |
337 | } |
338 | |
339 | popover modelbutton:checked, |
340 | @@ -3317,7 +3458,6 @@ |
341 | background: none; |
342 | } |
343 | |
344 | - |
345 | /* menu buttons inside popovers */ |
346 | modelbutton.flat, |
347 | popover.background checkbutton, |
348 | |
349 | === modified file 'Radiance/gtk-3.20/gtk-main.css' |
350 | --- Radiance/gtk-3.20/gtk-main.css 2018-01-17 17:09:29 +0000 |
351 | +++ Radiance/gtk-3.20/gtk-main.css 2018-03-22 08:03:56 +0000 |
352 | @@ -126,6 +126,10 @@ |
353 | @define-color panel_lighter_color shade (@dark_bg_color, 1.4); |
354 | @define-color panel_darker_color shade (@dark_bg_color, 0.96); |
355 | @define-color maximized_header_color shade (@dark_bg_color, 1.1); |
356 | +@define-color places_sidebar_bg shade (@dark_bg_color, 1.1); |
357 | +@define-color places_sidebar_backdrop_bg mix(@places_sidebar_bg, @bg_color, 0.15); |
358 | +@define-color places_sidebar_fg_color @fg_color; |
359 | +@define-color places_sidebar_selected_bg_color @selected_bg_color; |
360 | |
361 | @define-color suggested_action_bg #38b44a; |
362 | |
363 | |
364 | === modified file 'Radiance/gtk-3.20/gtk-widgets.css' |
365 | --- Radiance/gtk-3.20/gtk-widgets.css 2018-03-22 08:03:56 +0000 |
366 | +++ Radiance/gtk-3.20/gtk-widgets.css 2018-03-22 08:03:56 +0000 |
367 | @@ -1119,20 +1119,15 @@ |
368 | |
369 | toolbar menu, |
370 | combobox menu { |
371 | - background-image: none; |
372 | - background-color: @bg_color; |
373 | - border-bottom-color: shade (@bg_color, 0.66); |
374 | - border-right-color: shade (@bg_color, 0.7); |
375 | - border-left-color: shade (@bg_color, 0.7); |
376 | - border-top-color: shade (@bg_color, 0.8); |
377 | - border-style: solid; |
378 | + background-image: linear-gradient(to bottom left, |
379 | + shade (@bg_color, 1.2), |
380 | + shade (@bg_color, 0.97), |
381 | + shade (@bg_color, 1.2)); |
382 | + background-color: transparent; |
383 | + border: none; |
384 | padding: 0; |
385 | |
386 | - color: @fg_color; |
387 | - |
388 | - box-shadow: inset -1px 0 shade (@bg_color, 1.18), |
389 | - inset 1px 0 shade (@bg_color, 1.18), |
390 | - inset 0 1px shade (@bg_color, 1.18); |
391 | + box-shadow: 13px 13px 13px 6px @inactive_shadow_color; |
392 | } |
393 | |
394 | menu:selected { |
395 | @@ -1212,15 +1207,15 @@ |
396 | } |
397 | |
398 | /* Workaround for lp:949368 */ |
399 | -combobox menuitem * { |
400 | +combobox menuitem { |
401 | color: @fg_color; |
402 | } |
403 | |
404 | -combobox menuitem *:hover { |
405 | +combobox menuitem:hover { |
406 | color: @selected_fg_color; |
407 | + text-shadow: 0 -1px shade (@dark_bg_color, 0.7); |
408 | } |
409 | |
410 | - |
411 | popover modelbutton:hover, |
412 | popover menuitem:checked:hover, |
413 | menuitem:hover, |
414 | @@ -2085,56 +2080,186 @@ |
415 | ***********/ |
416 | |
417 | filechooser box.search-bar, |
418 | -#pathbarbox, |
419 | -placessidebar.sidebar, |
420 | +#pathbarbox { |
421 | + background-color: shade (@bg_color, 0.95); |
422 | + color: @fg_color; |
423 | + text-shadow: none; |
424 | +} |
425 | + |
426 | placessidebar.sidebar list { |
427 | - background-color: shade (@bg_color, 0.95); |
428 | - |
429 | - color: @fg_color; |
430 | - text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.04); |
431 | -} |
432 | - |
433 | -filechooser:backdrop box.search-bar, |
434 | -#pathbarbox:backdrop, |
435 | -.sidebar list:backdrop, |
436 | -placessidebar.sidebar:backdrop, |
437 | -placessidebar.sidebar list:backdrop { |
438 | - color: mix (@fg_color, shade (@bg_color, 0.95), 0.2); |
439 | - text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02); |
440 | -} |
441 | - |
442 | -placessidebar.sidebar row, |
443 | -placessidebar.sidebar list row, |
444 | -.sidebar list { |
445 | + background-color: transparent; |
446 | +} |
447 | + |
448 | +placessidebar.sidebar list separator { |
449 | + background: transparent; |
450 | +} |
451 | + |
452 | +paned placessidebar.sidebar:dir(ltr), |
453 | +paned placessidebar.sidebar:dir(rtl), |
454 | +placessidebar.sidebar:dir(ltr), |
455 | +placessidebar.sidebar:dir(rtl) { |
456 | + border: none; |
457 | + min-width: 150px; |
458 | + background-color: @places_sidebar_bg; |
459 | + color: @places_sidebar_fg_color; |
460 | + text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5); |
461 | +} |
462 | + |
463 | +paned placessidebar.sidebar:dir(ltr), |
464 | +placessidebar.sidebar:dir(ltr) { |
465 | + box-shadow: inset 39px -1px 0px 0px shade(@places_sidebar_bg, 0.75), |
466 | + inset 38px -1px 0px 0px shade(@places_sidebar_bg, 0.85); |
467 | +} |
468 | + |
469 | +paned placessidebar.sidebar:dir(rtl), |
470 | +placessidebar.sidebar:dir(rtl) { |
471 | + box-shadow: inset -39px -1px 0px 0px shade(@places_sidebar_bg, 0.75), |
472 | + inset -38px -1px 0px 0px shade(@places_sidebar_bg, 0.85); |
473 | +} |
474 | + |
475 | +paned placessidebar.sidebar:dir(ltr):backdrop, |
476 | +paned placessidebar.sidebar:dir(rtl):backdrop, |
477 | +placessidebar.sidebar:dir(ltr):backdrop, |
478 | +placessidebar.sidebar:dir(rtl):backdrop { |
479 | + background-color: @places_sidebar_backdrop_bg; |
480 | +} |
481 | + |
482 | +paned placessidebar.sidebar:dir(ltr):backdrop, |
483 | +placessidebar.sidebar:dir(ltr):backdrop { |
484 | + box-shadow: inset 39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15), |
485 | + inset 38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15); |
486 | +} |
487 | + |
488 | +paned placessidebar.sidebar:dir(rtl):backdrop, |
489 | +placessidebar.sidebar:dir(rtl):backdrop { |
490 | + box-shadow: inset -39px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.75), @bg_color, 0.15), |
491 | + inset -38px -1px 0px 0px mix(shade(@places_sidebar_bg, 0.85), @bg_color, 0.15); |
492 | +} |
493 | + |
494 | +placessidebar.sidebar row.sidebar-row { |
495 | + color: shade(@places_sidebar_fg_color, 0.9); |
496 | + background-image: none; |
497 | + background-repeat: no-repeat; |
498 | + background-position: top left; |
499 | + background-color: transparent; |
500 | min-height: 30px; |
501 | -} |
502 | - |
503 | -placessidebar.sidebar list row.activatable:hover:not(:selected), |
504 | -placessidebar.sidebar list row.has-open-popup { |
505 | - background-color: shade (shade (@bg_color, 0.95), 0.965); |
506 | -} |
507 | - |
508 | -placessidebar.sidebar row:selected, |
509 | -placessidebar.sidebar list row:selected { |
510 | - color: @selected_fg_color; |
511 | - text-shadow: 0 1px shade (@selected_bg_color, 0.7); |
512 | -} |
513 | - |
514 | -placessidebar.sidebar row:selected:backdrop, |
515 | -placessidebar.sidebar list row:selected:backdrop { |
516 | - background-image: -gtk-gradient (linear, left top, left bottom, |
517 | - from (shade (shade (@bg_color, 0.95), 0.94)), |
518 | - to (shade (shade (@bg_color, 0.95), 0.86))); |
519 | - border-top-color: shade (shade (@bg_color, 0.95), 0.88); |
520 | - |
521 | - color: @fg_color; |
522 | - text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96); |
523 | -} |
524 | - |
525 | -placessidebar.sidebar .sidebar-icon, |
526 | -placessidebar.sidebar list .sidebar-icon { |
527 | - padding-left: 10px; |
528 | - padding-right: 10px; |
529 | + border:none; |
530 | + text-shadow: none; |
531 | +} |
532 | + |
533 | +placessidebar.sidebar row.sidebar-row:hover { |
534 | + background-color: transparent; |
535 | + background-image: linear-gradient(to right, |
536 | + transparent 39px, |
537 | + @places_sidebar_selected_bg_color 39px, |
538 | + @places_sidebar_selected_bg_color 100%); |
539 | + color: @places_sidebar_fg_color; |
540 | + text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5); |
541 | +} |
542 | + |
543 | +placessidebar.sidebar row.sidebar-row:hover:dir(rtl) { |
544 | + background-image: linear-gradient(to left, |
545 | + transparent 39px, |
546 | + @places_sidebar_selected_bg_color 39px, |
547 | + @places_sidebar_selected_bg_color 100%); |
548 | +} |
549 | + |
550 | +placessidebar.sidebar row.sidebar-row:hover:backdrop { |
551 | + background-image: linear-gradient(to right, |
552 | + transparent 39px, |
553 | + alpha(@backdrop_selected_bg_color, 0.4) 39px, |
554 | + alpha(@backdrop_selected_bg_color, 0.4) 100%); |
555 | + color: @backdrop_selected_fg_color; |
556 | +} |
557 | + |
558 | +placessidebar.sidebar row.sidebar-row:hover:dir(rtl):backdrop { |
559 | + background-image: linear-gradient(to left, |
560 | + transparent 39px, |
561 | + alpha(@backdrop_selected_bg_color, 0.4) 39px, |
562 | + alpha(@backdrop_selected_bg_color, 0.4) 100%); |
563 | +} |
564 | + |
565 | +placessidebar.sidebar row.sidebar-row:selected:hover, |
566 | +placessidebar.sidebar row.sidebar-row:active:hover { |
567 | + background-color: transparent; |
568 | + background-image: linear-gradient(to right, |
569 | + @places_sidebar_bg 39px, |
570 | + @places_sidebar_selected_bg_color 39px, |
571 | + @places_sidebar_selected_bg_color 100%); |
572 | + text-shadow: 0 -1px alpha (shade (@fg_color, 1.55), 0.5); |
573 | + color: @places_sidebar_fg_color; |
574 | +} |
575 | + |
576 | +placessidebar.sidebar row.sidebar-row:selected:hover:dir(rtl), |
577 | +placessidebar.sidebar row.sidebar-row:active:hover:dir(rtl) { |
578 | + background-image: linear-gradient(to left, |
579 | + @places_sidebar_bg 39px, |
580 | + @places_sidebar_selected_bg_color 39px, |
581 | + @places_sidebar_selected_bg_color 100%); |
582 | +} |
583 | + |
584 | +placessidebar.sidebar row.sidebar-row:selected:hover:backdrop, |
585 | +placessidebar.sidebar row.sidebar-row:active:hover:backdrop { |
586 | + background-image: linear-gradient(to right, |
587 | + @places_sidebar_backdrop_bg 39px, |
588 | + alpha(@backdrop_selected_bg_color, 0.4) 39px, |
589 | + alpha(@backdrop_selected_bg_color, 0.4) 100%); |
590 | + color: @backdrop_selected_fg_color; |
591 | +} |
592 | + |
593 | +placessidebar.sidebar row.sidebar-row:selected:hover:backdrop:dir(rtl), |
594 | +placessidebar.sidebar row.sidebar-row:active:hover:backdrop:dir(rtl) { |
595 | + background-image: linear-gradient(to left, |
596 | + @places_sidebar_backdrop_bg 39px, |
597 | + alpha(@backdrop_selected_bg_color, 0.4) 39px, |
598 | + alpha(@backdrop_selected_bg_color, 0.4) 100%); |
599 | +} |
600 | + |
601 | +placessidebar.sidebar row.sidebar-row:selected, |
602 | +placessidebar.sidebar row.sidebar-row:active { |
603 | + background-color: @places_sidebar_bg; |
604 | + color: shade(@places_sidebar_selected_bg_color, 1.03); |
605 | + text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.3), 0.5); |
606 | +} |
607 | + |
608 | +placessidebar.sidebar row.sidebar-row:selected:backdrop, |
609 | +placessidebar.sidebar row.sidebar-row:active:backdrop { |
610 | + background-color: @places_sidebar_backdrop_bg; |
611 | + color: mix(shade(@places_sidebar_selected_bg_color, 1.03), shade(@places_sidebar_fg_color, 0.9), 0.3); |
612 | + text-shadow: 0 1px alpha (shade (@places_sidebar_selected_bg_color, 0.4), 0.4); |
613 | +} |
614 | + |
615 | +placessidebar.sidebar row.sidebar-row .sidebar-icon { |
616 | + text-shadow: none; |
617 | + background-image: none; |
618 | + padding-left: 12px; |
619 | + padding-right: 12px; |
620 | +} |
621 | + |
622 | +placessidebar.sidebar row.sidebar-row .sidebar-icon:dir(ltr) { |
623 | + margin-left: 0; |
624 | + margin-right: 12px; |
625 | +} |
626 | + |
627 | +placessidebar.sidebar row.sidebar-row .sidebar-icon:dir(rtl) { |
628 | + margin-left: 12px; |
629 | + margin-right: 0; |
630 | +} |
631 | + |
632 | +placessidebar.sidebar row.sidebar-row:hover .sidebar-icon:backdrop { |
633 | + color: @places_sidebar_fg_color; |
634 | +} |
635 | + |
636 | +placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon, |
637 | +placessidebar.sidebar row.sidebar-row:selected .sidebar-icon, |
638 | +placessidebar.sidebar row.sidebar-row:active:hover .sidebar-icon { |
639 | + color: @places_sidebar_selected_bg_color; |
640 | + background-color: transparent; |
641 | +} |
642 | + |
643 | +placessidebar.sidebar row.sidebar-row:selected.has-open-popup .sidebar-icon:backdrop, |
644 | +placessidebar.sidebar row.sidebar-row:selected .sidebar-icon:backdrop { |
645 | + color: mix(shade(@places_sidebar_selected_bg_color, 1.03), shade(@places_sidebar_fg_color, 0.9), 0.3); |
646 | } |
647 | |
648 | .sidebar, |
649 | @@ -3252,10 +3377,20 @@ |
650 | * popover * |
651 | ************/ |
652 | popover { |
653 | - background-clip: border-box; |
654 | + background-image: linear-gradient(to bottom left, |
655 | + shade (@bg_color, 0.98), |
656 | + shade (@bg_color, 0.93), |
657 | + shade (@bg_color, 0.98)); |
658 | + border-radius: 5px; |
659 | + border: none; |
660 | + padding: 2px; |
661 | +} |
662 | |
663 | +popover:backdrop { |
664 | + background-image: none; |
665 | + background-color: shade (@bg_color, 0.95); |
666 | border-radius: 5px; |
667 | - border: 1px solid darker(@bg_color); |
668 | + border: none; |
669 | padding: 2px; |
670 | } |
671 | |
672 | @@ -3284,8 +3419,14 @@ |
673 | popover menuitem:backdrop:hover { |
674 | border: none; |
675 | border-image: none; |
676 | - background: transparent; |
677 | + border-radius: 3px; |
678 | + box-shadow: none; |
679 | + background-color: transparent; |
680 | + background-image: -gtk-gradient (linear, left bottom, left top, |
681 | + from (shade (@backdrop_selected_bg_color, 0.95)), |
682 | + to (shade (@backdrop_selected_bg_color, 0.90))); |
683 | color: @fg_color; |
684 | + text-shadow: 0 -1px alpha (shade (@fg_color, 1.45), 0.7); |
685 | } |
686 | |
687 | popover modelbutton:checked, |
688 | @@ -3310,7 +3451,6 @@ |
689 | background: none; |
690 | } |
691 | |
692 | - |
693 | /* menu buttons inside popovers */ |
694 | modelbutton.flat, |
695 | popover.background checkbutton, |
LGTM. The only problem that I can see is the style of the buttons that appears for removable icons. Considering that UIFe is today we can fix it later.