Merge lp:~3v1n0/ubuntu-themes/gs-decorations-fixes into lp:ubuntu-themes
- gs-decorations-fixes
- Merge into trunk
Proposed by
Marco Trevisan (Treviño)
Status: | Merged | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Approved by: | Iain Lane | ||||||||||||
Approved revision: | 553 | ||||||||||||
Merged at revision: | 539 | ||||||||||||
Proposed branch: | lp:~3v1n0/ubuntu-themes/gs-decorations-fixes | ||||||||||||
Merge into: | lp:ubuntu-themes | ||||||||||||
Diff against target: |
807 lines (+309/-221) 7 files modified
Ambiance/gtk-3.20/apps/unity.css (+4/-60) Ambiance/gtk-3.20/gtk-main.css (+3/-2) Ambiance/gtk-3.20/gtk-widgets.css (+144/-58) Radiance/gtk-3.20/apps/unity.css (+4/-37) Radiance/gtk-3.20/gtk-main.css (+3/-0) Radiance/gtk-3.20/gtk-widgets-radiance.css (+1/-7) Radiance/gtk-3.20/gtk-widgets.css (+150/-57) |
||||||||||||
To merge this branch: | bzr merge lp:~3v1n0/ubuntu-themes/gs-decorations-fixes | ||||||||||||
Related bugs: |
|
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Iain Lane | Approve | ||
Ken VanDine | Approve | ||
Dmitry Shachnev | Approve | ||
Alberts Muktupāvels | Pending | ||
Review via email: mp+323760@code.launchpad.net |
Commit message
Ambiance, Radiance: fix shadows, handlers, decorations look for CSD and SSD in GS
- Gtk Decorations theme adapted to match unity
- Shadows follows the unity7 design for all the csd widgets
- Enabled the resize extents for windows
- Implemented a theme for solid-csd windows
- Fixed tooltips
Description of the change
To post a comment you must log in.
Revision history for this message
Ken VanDine (ken-vandine) wrote : | # |
Working great and looks good. Thanks for the fix!
review:
Approve
- 554. By Marco Trevisan (Treviño)
-
Ambiance, Radiance: ensure all titlebars have the same padding
Revision history for this message
Iain Lane (laney) wrote : | # |
I think I'll upload this. Thanks!
review:
Approve
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === modified file 'Ambiance/gtk-3.20/apps/unity.css' |
2 | --- Ambiance/gtk-3.20/apps/unity.css 2016-08-01 12:10:11 +0000 |
3 | +++ Ambiance/gtk-3.20/apps/unity.css 2017-05-10 12:39:09 +0000 |
4 | @@ -6,9 +6,9 @@ |
5 | |
6 | -UnityDecoration-shadow-offset-x: 1px; |
7 | -UnityDecoration-shadow-offset-y: 5px; |
8 | - -UnityDecoration-active-shadow-color: rgba (0, 0, 0, 0.75); |
9 | + -UnityDecoration-active-shadow-color: alpha (@active_shadow_color, 0.75); |
10 | -UnityDecoration-active-shadow-radius: 30px; |
11 | - -UnityDecoration-inactive-shadow-color: rgba (0, 0, 0, 0.3); |
12 | + -UnityDecoration-inactive-shadow-color: @inactive_shadow_color; |
13 | -UnityDecoration-inactive-shadow-radius: 25px; |
14 | |
15 | -UnityDecoration-glow-size: 10px; |
16 | @@ -19,64 +19,8 @@ |
17 | -UnityDecoration-title-alignment: 0.0; |
18 | } |
19 | |
20 | -UnityDecoration .top { |
21 | - border: 1px solid rgba (0, 3, 5, 0.03); /* shade (@dark_bg_color, 1.04) - shade (@dark_bg_color, 1.5) */ |
22 | - border-bottom-width: 0; |
23 | - border-radius: 6px 6px 0 0; |
24 | - padding: 1px 6px 0 6px; |
25 | - |
26 | - box-shadow: inset 0 0 transparent, inset 0 0 transparent, |
27 | - inset 0 1px shade (@dark_bg_color, 1.6), inset 0 0 transparent; |
28 | - |
29 | - background-color: transparent; |
30 | - background-clip: border-box; |
31 | - background-image: -gtk-gradient (linear, left top, left bottom, |
32 | - from (shade (@dark_bg_color, 1.5)), |
33 | - to (shade (@dark_bg_color, 1.04))); |
34 | - |
35 | - color: @dark_fg_color; |
36 | - text-shadow: 1px 0 #333, -1px 0 #333, 0 1px #333, 0 -1px #333; |
37 | -} |
38 | - |
39 | -UnityDecoration .top:backdrop { |
40 | - border: 1px solid rgba (14, 13, 0, 0.03); /* @dark_bg_color - shade (#474642, 0.92) */; |
41 | - border-bottom-width: 0; |
42 | - background-color: transparent; |
43 | - background-clip: border-box; |
44 | - background-image: -gtk-gradient (linear, left top, left bottom, |
45 | - from (shade (#474642, 0.92)), |
46 | - to (@dark_bg_color)); |
47 | - box-shadow: inset 0 0 transparent, inset 0 0 transparent, |
48 | - inset 0 1px #474642, inset 0 0 transparent; |
49 | - color: #807d78; |
50 | -} |
51 | - |
52 | -UnityDecoration .left, |
53 | -UnityDecoration .right { |
54 | - background-color: shade (@bg_color, 0.7); |
55 | - background-size: 1px 70px; |
56 | - background-repeat: repeat-x; |
57 | - |
58 | - /* start color: mix of the top border color and bg-image gradient end */ |
59 | - background-image: -gtk-gradient (linear, left top, left bottom, |
60 | - color-stop (0, #2b2a2a), |
61 | - color-stop (0.5, #2b2a2a), |
62 | - color-stop (1, shade (@bg_color, 0.7))); |
63 | -} |
64 | - |
65 | -UnityDecoration .left:backdrop, |
66 | -UnityDecoration .right:backdrop { |
67 | - /* start color: mix of the top border color and bg-image gradient end */ |
68 | - background-image: -gtk-gradient (linear, left top, left bottom, |
69 | - color-stop (0, #373632), |
70 | - color-stop (0.5, #373632), |
71 | - color-stop (1, shade (@bg_color, 0.7))); |
72 | -} |
73 | - |
74 | -UnityDecoration .bottom { |
75 | - background-image: none; |
76 | - background-color: shade (@bg_color, 0.7); |
77 | -} |
78 | +/* Definitions of UnityDecoration .top (and :backdrop) are now shared with |
79 | + * Gtk .titlebar (and :backdrop); .left and .right are not used by this theme */ |
80 | |
81 | /* Panel Style */ |
82 | |
83 | |
84 | === modified file 'Ambiance/gtk-3.20/gtk-main.css' |
85 | --- Ambiance/gtk-3.20/gtk-main.css 2016-08-30 09:51:51 +0000 |
86 | +++ Ambiance/gtk-3.20/gtk-main.css 2017-05-10 12:39:09 +0000 |
87 | @@ -13,6 +13,9 @@ |
88 | |
89 | @define-color borders shade(@bg_color, 0.82); |
90 | |
91 | +@define-color active_shadow_color black; |
92 | +@define-color inactive_shadow_color alpha(black, 0.3); |
93 | + |
94 | /* misc colors used by gtk+ |
95 | * |
96 | * Gtk doesn't currently expand color variables for style properties. Thus, |
97 | @@ -54,8 +57,6 @@ |
98 | |
99 | @define-color scale_highlight_bg #df784e; |
100 | |
101 | -@define-color shadow_color alpha(black, 0.5); |
102 | - |
103 | @define-color osd_fg_color #eeeeec; |
104 | @define-color osd_bg_color alpha(#202526, 0.7); |
105 | @define-color osd_border_color alpha(black, 0.7); |
106 | |
107 | === modified file 'Ambiance/gtk-3.20/gtk-widgets.css' |
108 | --- Ambiance/gtk-3.20/gtk-widgets.css 2017-01-25 17:43:32 +0000 |
109 | +++ Ambiance/gtk-3.20/gtk-widgets.css 2017-05-10 12:39:09 +0000 |
110 | @@ -637,17 +637,6 @@ |
111 | border-width: 1px 0px 1px 0px; |
112 | } |
113 | |
114 | - |
115 | -/**************** |
116 | - * window-frame * |
117 | - ****************/ |
118 | - |
119 | -.csd.popup { |
120 | - border-style: none; |
121 | - border-radius: 0; |
122 | - box-shadow: 0 3px 8px @shadow_color; |
123 | -} |
124 | - |
125 | /************ |
126 | * iconview * |
127 | ************/ |
128 | @@ -833,6 +822,11 @@ |
129 | font-weight: normal; |
130 | } |
131 | |
132 | +.background.popup.csd { |
133 | + /* Delete menus background, we don't need border-radious here */ |
134 | + background-color: transparent; |
135 | +} |
136 | + |
137 | /*********** |
138 | * menubar * |
139 | ***********/ |
140 | @@ -1953,12 +1947,8 @@ |
141 | background-color: @base_color; |
142 | } |
143 | |
144 | -headerbar { |
145 | - padding: 2px 6px; |
146 | -} |
147 | - |
148 | /* |
149 | - * Header Bars |
150 | + * Header Bars and decorations |
151 | * |
152 | * The following rules only style header bars when they are used as a window's |
153 | * titlebar widget (i.e., they have .titlebar set as well). |
154 | @@ -1967,19 +1957,132 @@ |
155 | * that prefer showing traditional title bars. The rules for those are further |
156 | * down grouped with normal toolbars. |
157 | */ |
158 | -.titlebar { |
159 | +decoration { |
160 | + margin: 10px; |
161 | + border-radius: 6px 6px 0 0; |
162 | + box-shadow: 1px 5px 13px alpha(@active_shadow_color, 0.85); |
163 | +} |
164 | + |
165 | +decoration:backdrop, |
166 | +tooltip.csd decoration, |
167 | +.popup decoration { |
168 | + box-shadow: 1px 5px 13px transparent, /* this should match normal shadow geometries */ |
169 | + 1px 5px 8px @inactive_shadow_color; |
170 | + transition: 100ms ease-out; |
171 | +} |
172 | + |
173 | +.ssd decoration { |
174 | + box-shadow: none; |
175 | +} |
176 | + |
177 | +popover { |
178 | +/* FIXME: we can't reuse the default shadow definition as increasing marging |
179 | + * would break the tip |
180 | + */ |
181 | + margin: 13px; |
182 | + box-shadow: 1px 3px 6px @inactive_shadow_color; |
183 | +} |
184 | + |
185 | +popover:backdrop, |
186 | +popover.background:backdrop { |
187 | + box-shadow: 1px 3px 6px alpha(@inactive_shadow_color, 0.5); |
188 | +} |
189 | + |
190 | +tooltip decoration { |
191 | + background-color: transparent; |
192 | + background-image: none; |
193 | +} |
194 | + |
195 | +.maximized decoration, |
196 | +.fullscreen decoration, |
197 | +.unity-csd decoration { |
198 | + margin: 0; |
199 | + border-radius: 0; |
200 | + box-shadow: none; |
201 | +} |
202 | + |
203 | +.tiled decoration { |
204 | + border-radius: 0; |
205 | +} |
206 | + |
207 | +.default-decoration.titlebar:not(headerbar), |
208 | +headerbar.default-decoration { |
209 | + min-height: 26px; |
210 | +} |
211 | + |
212 | +.solid-csd .titlebar:backdrop:dir(rtl):not(headerbar), |
213 | +.solid-csd .titlebar:backdrop:dir(ltr):not(headerbar), |
214 | +.solid-csd .titlebar:dir(rtl):not(headerbar), |
215 | +.solid-csd .titlebar:dir(ltr):not(headerbar), |
216 | +.solid-csd headerbar:backdrop:dir(rtl), |
217 | +.solid-csd headerbar:backdrop:dir(ltr), |
218 | +.solid-csd headerbar, |
219 | +.solid-csd headerbar:dir(ltr) { |
220 | + margin-left: 0; |
221 | + margin-right: 0; |
222 | + margin-top: 0; |
223 | + border-radius: 0; |
224 | + box-shadow: none; |
225 | +} |
226 | + |
227 | +.solid-csd decoration { |
228 | + margin: 0; |
229 | + box-shadow: none; |
230 | + border-width: 2px; |
231 | + border-style: solid; |
232 | + border-color: shade (@dark_bg_color, 1.15); |
233 | + border-radius: 0; |
234 | +} |
235 | + |
236 | +.solid-csd:backdrop decoration { |
237 | + border-color: @dark_bg_color |
238 | +} |
239 | + |
240 | +.titlebar, |
241 | +UnityDecoration .top { |
242 | + border: 1px solid rgba (0, 3, 5, 0.03); /* shade (@dark_bg_color, 1.04) - shade (@dark_bg_color, 1.5) */ |
243 | + border-bottom-width: 0; |
244 | + border-radius: 6px 6px 0 0; |
245 | + padding: 1px 6px 0 6px; |
246 | + |
247 | + box-shadow: inset 0 0 transparent, inset 0 0 transparent, |
248 | + inset 0 1px shade (@dark_bg_color, 1.6), inset 0 0 transparent; |
249 | + |
250 | + background-color: transparent; |
251 | + background-clip: border-box; |
252 | background-image: -gtk-gradient (linear, left top, left bottom, |
253 | from (shade (@dark_bg_color, 1.5)), |
254 | + to (shade (@dark_bg_color, 1.04))); |
255 | + |
256 | + color: @dark_fg_color; |
257 | + text-shadow: 1px 0 #333, -1px 0 #333, 0 1px #333, 0 -1px #333; |
258 | +} |
259 | + |
260 | +.titlebar:backdrop, |
261 | +UnityDecoration .top:backdrop { |
262 | + border: 1px solid rgba (14, 13, 0, 0.03); /* @dark_bg_color - shade (#474642, 0.92) */; |
263 | + border-bottom-width: 0; |
264 | + background-color: transparent; |
265 | + background-clip: border-box; |
266 | + background-image: -gtk-gradient (linear, left top, left bottom, |
267 | + from (shade (#474642, 0.92)), |
268 | to (@dark_bg_color)); |
269 | - border-color: shade (@dark_bg_color, 1.5); |
270 | - border-style: solid; |
271 | - border-width: 1px 0 0 0; |
272 | - border-radius: 7px 7px 0 0; |
273 | - |
274 | - color: @dark_fg_color; |
275 | - text-shadow: 0 -1px shade (@dark_bg_color, 0.7); |
276 | - |
277 | - box-shadow: inset 0 1px shade (@dark_bg_color, 1.65); |
278 | + box-shadow: inset 0 0 transparent, inset 0 0 transparent, |
279 | + inset 0 1px #474642, inset 0 0 transparent; |
280 | + color: #807d78; |
281 | +} |
282 | + |
283 | +.maximized .titlebar, |
284 | +.tiled .titlebar { |
285 | + border-radius: 0; |
286 | + border-image: none; |
287 | + border: none; |
288 | + box-shadow: none; |
289 | +} |
290 | + |
291 | +.maximized .titlebar:not(:backdrop):not(.toolbar-mode), |
292 | +.tiled .titlebar:not(:backdrop):not(.toolbar-mode) { |
293 | + box-shadow: inset 0 1px shade (@dark_bg_color, 1.6); |
294 | } |
295 | |
296 | .titlebar .title { |
297 | @@ -1991,23 +2094,6 @@ |
298 | opacity: 0.5; |
299 | } |
300 | |
301 | -.titlebar:backdrop { |
302 | - color: @backdrop_fg_color; |
303 | - background-image: none; |
304 | - background-color: @dark_bg_color; |
305 | - border-top-color: @dark_bg_color; |
306 | - box-shadow: inset 0 1px shade (@dark_bg_color, 1.2); |
307 | -} |
308 | - |
309 | -.maximized .titlebar { |
310 | - border-radius: 0; |
311 | - border: none; |
312 | -} |
313 | - |
314 | -.maximized .titlebar.toolbar-mode { |
315 | - box-shadow: none; |
316 | -} |
317 | - |
318 | .titlebar button.titlebutton { |
319 | background-clip: padding-box; |
320 | border: 1px solid #383734; |
321 | @@ -2050,6 +2136,8 @@ |
322 | } |
323 | |
324 | |
325 | + |
326 | + |
327 | /*********** |
328 | * toolbar * |
329 | ***********/ |
330 | @@ -2070,8 +2158,7 @@ |
331 | * primary-toolbar * |
332 | *******************/ |
333 | .primary-toolbar, |
334 | -headerbar, |
335 | -.maximized headerbar.titlebar:not(:backdrop) { |
336 | +.titlebar.toolbar-mode { |
337 | -GtkWidget-window-dragging: true; |
338 | |
339 | background-image: -gtk-gradient (linear, left top, left bottom, |
340 | @@ -2089,12 +2176,8 @@ |
341 | box-shadow: inset 0 1px shade (@dark_bg_color, 0.94); |
342 | } |
343 | |
344 | -.maximized headerbar.titlebar.toolbar-mode:not(:backdrop) { |
345 | - border-width: 0; |
346 | -} |
347 | - |
348 | .primary-toolbar:backdrop, |
349 | -headerbar:backdrop { |
350 | +.titlebar.toolbar-mode:backdrop { |
351 | background-image: none; |
352 | background-color: @dark_bg_color; |
353 | box-shadow: none; |
354 | @@ -2105,11 +2188,13 @@ |
355 | } |
356 | |
357 | .primary-toolbar:disabled, |
358 | +.titlebar.toolbar-mode:disabled, |
359 | headerbar:disabled { |
360 | text-shadow: 0 -1px shade (@dark_bg_color, 0.7); |
361 | } |
362 | |
363 | .primary-toolbar button, |
364 | +.titlebar button, |
365 | headerbar button, |
366 | headerbar button:disabled, |
367 | .primary-toolbar button.flat:hover { |
368 | @@ -2365,12 +2450,20 @@ |
369 | background-image: -gtk-gradient (radial, center 0, 0, center 0, 0.8, |
370 | from (alpha (mix (@tooltip_bg_color, #ffffff, 0.2), 0.86)), |
371 | to (alpha (@tooltip_bg_color, 0.86))); |
372 | - border-color: alpha (#ffffff, 0.2); |
373 | + border-color: alpha (white, 0.2); |
374 | border-radius: 5px; |
375 | border-style: solid; |
376 | border-width: 1px; |
377 | } |
378 | |
379 | +tooltip.csd:not(.unity-csd) decoration { |
380 | + border-radius: 5px; |
381 | +} |
382 | + |
383 | +tooltip.background { |
384 | + background-color: transparent; |
385 | +} |
386 | + |
387 | tooltip label { |
388 | color: @tooltip_fg_color; |
389 | } |
390 | @@ -2428,16 +2521,9 @@ |
391 | |
392 | border-radius: 5px; |
393 | border: 1px solid darker(@bg_color); |
394 | - |
395 | - box-shadow: 0 2px 3px @shadow_color; |
396 | - margin: 10px; |
397 | padding: 2px; |
398 | } |
399 | |
400 | -popover:backdrop { |
401 | - box-shadow: none; |
402 | -} |
403 | - |
404 | /* Popover menuitems are actually buttons. The following rules reset most of |
405 | * the button styles for them. |
406 | */ |
407 | |
408 | === modified file 'Radiance/gtk-3.20/apps/unity.css' |
409 | --- Radiance/gtk-3.20/apps/unity.css 2016-08-04 16:31:00 +0000 |
410 | +++ Radiance/gtk-3.20/apps/unity.css 2017-05-10 12:39:09 +0000 |
411 | @@ -6,9 +6,9 @@ |
412 | |
413 | -UnityDecoration-shadow-offset-x: 1px; |
414 | -UnityDecoration-shadow-offset-y: 5px; |
415 | - -UnityDecoration-active-shadow-color: rgba (0, 0, 0, 0.78); |
416 | + -UnityDecoration-active-shadow-color: alpha (@active_shadow_color, 0.78); |
417 | -UnityDecoration-active-shadow-radius: 30px; |
418 | - -UnityDecoration-inactive-shadow-color: rgba (0, 0, 0, 0.3); |
419 | + -UnityDecoration-inactive-shadow-color: @inactive_shadow_color; |
420 | -UnityDecoration-inactive-shadow-radius: 25px; |
421 | |
422 | -UnityDecoration-glow-size: 10px; |
423 | @@ -19,41 +19,8 @@ |
424 | -UnityDecoration-title-alignment: 0.0; |
425 | } |
426 | |
427 | -UnityDecoration .top { |
428 | - border: 1px solid rgba (85, 40, 0, 0.04); /* shade (@dark_bg_color) (shade (#edebe6, 1.06) */ |
429 | - border-bottom-width: 0; |
430 | - border-radius: 6px 6px 0 0; |
431 | - padding: 1px 6px 0 6px; |
432 | - |
433 | - box-shadow: inset 0 0 transparent, inset 0 0 transparent, |
434 | - inset 0 1px shade (@edebe6, 1.065), inset 0 0 transparent; |
435 | - |
436 | - background-color: transparent; |
437 | - background-clip: border-box; |
438 | - background-image: -gtk-gradient (linear, left top, left bottom, |
439 | - from (shade (#edebe6, 1.06)), |
440 | - to (@dark_bg_color)); |
441 | - |
442 | - color: shade (@dark_bg_color, 0.4); |
443 | - text-shadow: 1px 0 shade (@dark_bg_color, 1.06), -1px 0 shade (@dark_bg_color, 1.06), |
444 | - 0 1px shade (@dark_bg_color, 1.06), 0 -1px shade (@dark_bg_color, 1.06); |
445 | -} |
446 | - |
447 | -UnityDecoration .top:backdrop { |
448 | - border: 1px solid rgba (110, 27, 0, 0.04); /* shade @dark_bg_color - shade (#edebe6, 0.96) */ |
449 | - border-bottom-width: 0; |
450 | - background-color: transparent; |
451 | - background-clip: border-box; |
452 | - background-image: -gtk-gradient (linear, left top, left bottom, |
453 | - from (shade (#edebe6, 0.96)), |
454 | - to (@dark_bg_color)); |
455 | - box-shadow: inset 0 0 transparent, inset 0 0 transparent, |
456 | - inset 0 1px shade (#edebe6, 0.97), inset 0 0 transparent; |
457 | - |
458 | - color: #a39e9a; |
459 | - text-shadow: 1px 0 1px shade (@dark_bg_color, 1.08), -1px 0 1px shade (@dark_bg_color, 1.08), |
460 | - 0 1px 1px shade (@dark_bg_color, 1.08), 0 -1px 1px shade (@dark_bg_color, 1.08); |
461 | -} |
462 | +/* Definitions of UnityDecoration .top (and :backdrop) are now shared with |
463 | + * Gtk .titlebar (and :backdrop); .left and .right are not used by this theme */ |
464 | |
465 | UnityDecoration .left, |
466 | UnityDecoration .right { |
467 | |
468 | === modified file 'Radiance/gtk-3.20/gtk-main.css' |
469 | --- Radiance/gtk-3.20/gtk-main.css 2016-08-30 09:51:51 +0000 |
470 | +++ Radiance/gtk-3.20/gtk-main.css 2017-05-10 12:39:09 +0000 |
471 | @@ -13,6 +13,9 @@ |
472 | |
473 | @define-color borders shade(@bg_color, 0.82); |
474 | |
475 | +@define-color active_shadow_color black; |
476 | +@define-color inactive_shadow_color alpha(black, 0.3); |
477 | + |
478 | /* misc colors used by gtk+ |
479 | * |
480 | * Gtk doesn't currently expand color variables for style properties. Thus, |
481 | |
482 | === modified file 'Radiance/gtk-3.20/gtk-widgets-radiance.css' |
483 | --- Radiance/gtk-3.20/gtk-widgets-radiance.css 2016-10-06 18:53:39 +0000 |
484 | +++ Radiance/gtk-3.20/gtk-widgets-radiance.css 2017-05-10 12:39:09 +0000 |
485 | @@ -70,9 +70,7 @@ |
486 | } |
487 | |
488 | /* primary-toolbar */ |
489 | -.primary-toolbar, |
490 | -headerbar, |
491 | -.maximized headerbar.titlebar:not(:backdrop) { |
492 | +.primary-toolbar { |
493 | background-image: -gtk-gradient (linear, left top, left bottom, |
494 | from (shade (@dark_bg_color, 0.96)), |
495 | to (shade (@dark_bg_color, 1.1))); |
496 | @@ -104,7 +102,3 @@ |
497 | from (shade (@dark_bg_color, 1.03)), |
498 | to (shade (@dark_bg_color, 0.96))); |
499 | } |
500 | - |
501 | -.titlebar { |
502 | - border-top-width: 0px; |
503 | -} |
504 | |
505 | === modified file 'Radiance/gtk-3.20/gtk-widgets.css' |
506 | --- Radiance/gtk-3.20/gtk-widgets.css 2016-10-31 04:08:49 +0000 |
507 | +++ Radiance/gtk-3.20/gtk-widgets.css 2017-05-10 12:39:09 +0000 |
508 | @@ -646,17 +646,6 @@ |
509 | border-width: 1px 0px 1px 0px; |
510 | } |
511 | |
512 | - |
513 | -/**************** |
514 | - * window-frame * |
515 | - ****************/ |
516 | - |
517 | -.csd.popup { |
518 | - border-style: none; |
519 | - border-radius: 0; |
520 | - box-shadow: 0 3px 8px @shadow_color; |
521 | -} |
522 | - |
523 | /************ |
524 | * iconview * |
525 | ************/ |
526 | @@ -842,6 +831,11 @@ |
527 | font-weight: normal; |
528 | } |
529 | |
530 | +.background.popup.csd { |
531 | + /* Delete menus background, we don't need border-radious here */ |
532 | + background-color: transparent; |
533 | +} |
534 | + |
535 | /*********** |
536 | * menubar * |
537 | ***********/ |
538 | @@ -1952,12 +1946,8 @@ |
539 | background-color: @base_color; |
540 | } |
541 | |
542 | -headerbar { |
543 | - padding: 2px 6px; |
544 | -} |
545 | - |
546 | /* |
547 | - * Header Bars |
548 | + * Header Bars and decorations |
549 | * |
550 | * The following rules only style header bars when they are used as a window's |
551 | * titlebar widget (i.e., they have .titlebar set as well). |
552 | @@ -1966,16 +1956,136 @@ |
553 | * that prefer showing traditional title bars. The rules for those are further |
554 | * down grouped with normal toolbars. |
555 | */ |
556 | -.titlebar { |
557 | - background-image: -gtk-gradient (linear, left top, left bottom, |
558 | - from (shade (@dark_bg_color, 1.5)), |
559 | - to (@dark_bg_color)); |
560 | - border-color: shade (@dark_bg_color, 1.5); |
561 | +decoration { |
562 | + margin: 10px; |
563 | + border-radius: 6px 6px 0 0; |
564 | + box-shadow: 1px 5px 13px alpha(@active_shadow_color, 0.85); |
565 | +} |
566 | + |
567 | +decoration:backdrop, |
568 | +tooltip.csd decoration, |
569 | +.popup decoration { |
570 | + box-shadow: 1px 5px 13px transparent, /* this should match normal shadow geometries */ |
571 | + 1px 5px 8px @inactive_shadow_color; |
572 | + transition: 100ms ease-out; |
573 | +} |
574 | + |
575 | +.ssd decoration { |
576 | + box-shadow: none; |
577 | +} |
578 | + |
579 | +popover { |
580 | +/* FIXME: we can't reuse the default shadow definition as increasing marging |
581 | + * would break the tip |
582 | + */ |
583 | + margin: 13px; |
584 | + box-shadow: 1px 3px 6px @inactive_shadow_color; |
585 | +} |
586 | + |
587 | +popover:backdrop, |
588 | +popover.background:backdrop { |
589 | + box-shadow: 1px 3px 6px alpha(@inactive_shadow_color, 0.5); |
590 | +} |
591 | + |
592 | +tooltip decoration { |
593 | + background-color: transparent; |
594 | + background-image: none; |
595 | +} |
596 | + |
597 | +.maximized decoration, |
598 | +.fullscreen decoration, |
599 | +.unity-csd decoration { |
600 | + margin: 0; |
601 | + border-radius: 0; |
602 | + box-shadow: none; |
603 | +} |
604 | + |
605 | +.tiled decoration { |
606 | + border-radius: 0; |
607 | +} |
608 | + |
609 | +.default-decoration.titlebar:not(headerbar), |
610 | +headerbar.default-decoration { |
611 | + min-height: 26px; |
612 | +} |
613 | + |
614 | +.solid-csd .titlebar:backdrop:dir(rtl):not(headerbar), |
615 | +.solid-csd .titlebar:backdrop:dir(ltr):not(headerbar), |
616 | +.solid-csd .titlebar:dir(rtl):not(headerbar), |
617 | +.solid-csd .titlebar:dir(ltr):not(headerbar), |
618 | +.solid-csd headerbar:backdrop:dir(rtl), |
619 | +.solid-csd headerbar:backdrop:dir(ltr), |
620 | +.solid-csd headerbar, |
621 | +.solid-csd headerbar:dir(ltr) { |
622 | + margin-left: 0; |
623 | + margin-right: 0; |
624 | + margin-top: 0; |
625 | + border-radius: 0; |
626 | + box-shadow: none; |
627 | +} |
628 | + |
629 | +.solid-csd decoration { |
630 | + margin: 0; |
631 | + box-shadow: none; |
632 | + border-width: 2px; |
633 | border-style: solid; |
634 | - border-width: 1px 0 0 0; |
635 | - border-radius: 7px 7px 0 0; |
636 | - |
637 | - color: @dark_fg_color; |
638 | + border-color: shade (@dark_bg_color, 0.85); |
639 | + border-radius: 0; |
640 | +} |
641 | + |
642 | +.solid-csd:backdrop decoration { |
643 | + border-color: @dark_bg_color |
644 | +} |
645 | + |
646 | +.titlebar, |
647 | +UnityDecoration .top { |
648 | + border: 1px solid rgba (85, 40, 0, 0.04); /* shade (@dark_bg_color) (shade (#edebe6, 1.06) */ |
649 | + border-bottom-width: 0; |
650 | + border-radius: 6px 6px 0 0; |
651 | + padding: 1px 6px 0 6px; |
652 | + |
653 | + box-shadow: inset 0 0 transparent, inset 0 0 transparent, |
654 | + inset 0 1px shade (@edebe6, 1.065), inset 0 0 transparent; |
655 | + |
656 | + background-color: transparent; |
657 | + background-clip: border-box; |
658 | + background-image: -gtk-gradient (linear, left top, left bottom, |
659 | + from (shade (#edebe6, 1.06)), |
660 | + to (@dark_bg_color)); |
661 | + |
662 | + color: shade (@dark_bg_color, 0.4); |
663 | + text-shadow: 1px 0 shade (@dark_bg_color, 1.06), -1px 0 shade (@dark_bg_color, 1.06), |
664 | + 0 1px shade (@dark_bg_color, 1.06), 0 -1px shade (@dark_bg_color, 1.06); |
665 | +} |
666 | + |
667 | +.titlebar:backdrop, |
668 | +UnityDecoration .top:backdrop { |
669 | + border: 1px solid rgba (110, 27, 0, 0.04); /* shade @dark_bg_color - shade (#edebe6, 0.96) */ |
670 | + border-bottom-width: 0; |
671 | + background-color: transparent; |
672 | + background-clip: border-box; |
673 | + background-image: -gtk-gradient (linear, left top, left bottom, |
674 | + from (shade (#edebe6, 0.96)), |
675 | + to (@dark_bg_color)); |
676 | + box-shadow: inset 0 0 transparent, inset 0 0 transparent, |
677 | + inset 0 1px shade (#edebe6, 0.97), inset 0 0 transparent; |
678 | + |
679 | + color: #a39e9a; |
680 | + text-shadow: 1px 0 1px shade (@dark_bg_color, 1.08), -1px 0 1px shade (@dark_bg_color, 1.08), |
681 | + 0 1px 1px shade (@dark_bg_color, 1.08), 0 -1px 1px shade (@dark_bg_color, 1.08); |
682 | +} |
683 | + |
684 | +.maximized .titlebar, |
685 | +.tiled .titlebar { |
686 | + border-radius: 0; |
687 | + border-image: none; |
688 | + border: none; |
689 | + box-shadow: none; |
690 | +} |
691 | + |
692 | +.maximized .titlebar:not(:backdrop):not(.toolbar-mode), |
693 | +.tiled .titlebar:not(:backdrop):not(.toolbar-mode) { |
694 | + box-shadow: inset 0 1px shade (#edebe6, 1.08); |
695 | } |
696 | |
697 | .titlebar .title { |
698 | @@ -1987,23 +2097,6 @@ |
699 | opacity: 0.5; |
700 | } |
701 | |
702 | -.titlebar:backdrop { |
703 | - color: @backdrop_fg_color; |
704 | - background-image: none; |
705 | - background-color: @dark_bg_color; |
706 | - border-top-color: @dark_bg_color; |
707 | - box-shadow: inset 0 1px shade (@dark_bg_color, 1.2); |
708 | -} |
709 | - |
710 | -.maximized .titlebar { |
711 | - border-radius: 0; |
712 | - border: none; |
713 | -} |
714 | - |
715 | -.maximized .titlebar.toolbar-mode { |
716 | - box-shadow: none; |
717 | -} |
718 | - |
719 | .titlebar button.titlebutton { |
720 | background-clip: padding-box; |
721 | border: 1px solid #d0c7bf; |
722 | @@ -2046,6 +2139,8 @@ |
723 | } |
724 | |
725 | |
726 | + |
727 | + |
728 | /*********** |
729 | * toolbar * |
730 | ***********/ |
731 | @@ -2066,8 +2161,7 @@ |
732 | * primary-toolbar * |
733 | *******************/ |
734 | .primary-toolbar, |
735 | -headerbar, |
736 | -.maximized headerbar.titlebar:not(:backdrop) { |
737 | +.titlebar.toolbar-mode { |
738 | -GtkWidget-window-dragging: true; |
739 | |
740 | background-image: -gtk-gradient (linear, left top, left bottom, |
741 | @@ -2085,12 +2179,8 @@ |
742 | box-shadow: inset 0 1px shade (@dark_bg_color, 0.94); |
743 | } |
744 | |
745 | -.maximized headerbar.titlebar.toolbar-mode:not(:backdrop) { |
746 | - border-width: 0; |
747 | -} |
748 | - |
749 | .primary-toolbar:backdrop, |
750 | -headerbar:backdrop { |
751 | +.titlebar.toolbar-mode:backdrop { |
752 | background-image: none; |
753 | background-color: @dark_bg_color; |
754 | box-shadow: none; |
755 | @@ -2101,11 +2191,13 @@ |
756 | } |
757 | |
758 | .primary-toolbar:disabled, |
759 | +.titlebar.toolbar-mode:disabled, |
760 | headerbar:disabled { |
761 | text-shadow: 0 -1px shade (@dark_bg_color, 0.7); |
762 | } |
763 | |
764 | .primary-toolbar button, |
765 | +.titlebar button, |
766 | headerbar button, |
767 | headerbar button:disabled, |
768 | .primary-toolbar button.flat:hover { |
769 | @@ -2361,12 +2453,20 @@ |
770 | background-image: -gtk-gradient (radial, center 0, 0, center 0, 0.8, |
771 | from (alpha (mix (@tooltip_bg_color, #ffffff, 0.2), 0.86)), |
772 | to (alpha (@tooltip_bg_color, 0.86))); |
773 | - border-color: alpha (#ffffff, 0.2); |
774 | + border-color: alpha (white, 0.2); |
775 | border-radius: 5px; |
776 | border-style: solid; |
777 | border-width: 1px; |
778 | } |
779 | |
780 | +tooltip.csd:not(.unity-csd) decoration { |
781 | + border-radius: 5px; |
782 | +} |
783 | + |
784 | +tooltip.background { |
785 | + background-color: transparent; |
786 | +} |
787 | + |
788 | tooltip label { |
789 | color: @tooltip_fg_color; |
790 | } |
791 | @@ -2419,16 +2519,9 @@ |
792 | |
793 | border-radius: 5px; |
794 | border: 1px solid darker(@bg_color); |
795 | - |
796 | - box-shadow: 0 2px 3px @shadow_color; |
797 | - margin: 10px; |
798 | padding: 2px; |
799 | } |
800 | |
801 | -popover:backdrop { |
802 | - box-shadow: none; |
803 | -} |
804 | - |
805 | /* Popover menuitems are actually buttons. The following rules reset most of |
806 | * the button styles for them. |
807 | */ |
This is working *much* better than the current version. Tested with gnome-control- center, gnome-calcualtor, gnome-software, nautilus — everywhere the headerbars are working fine. Thanks a lot!