Ubuntu theme

Merge lp:~3v1n0/ubuntu-themes/headerbar-maximized-destructive-suggested-actions into lp:ubuntu-themes/artful

  1. headerbar-maximized-destructive-suggested-actions
  2. Merge into 17.10
Proposed by Marco Trevisan (Treviño)
Status: Merged
Approved by: Marco Trevisan (Treviño)
Approved revision: 588
Merged at revision: 587
Proposed branch: lp:~3v1n0/ubuntu-themes/headerbar-maximized-destructive-suggested-actions
Merge into: lp:ubuntu-themes/artful
Diff against target: 505 lines (+392/-2)
2 files modified
Ambiance/gtk-3.20/gtk-widgets.css (+196/-1)
Radiance/gtk-3.20/gtk-widgets.css (+196/-1)
To merge this branch: bzr merge lp:~3v1n0/ubuntu-themes/headerbar-maximized-destructive-suggested-actions
Reviewer Review Type Date Requested Status
Ubuntu Artwork Packagers Pending
Review via email: mp+333729@code.launchpad.net

Commit message

Ambiance, Radiance: Use inverted gradient for button actions in maximized titlebars

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-widgets.css'
2--- Ambiance/gtk-3.20/gtk-widgets.css 2017-10-12 05:18:40 +0000
3+++ Ambiance/gtk-3.20/gtk-widgets.css 2017-11-15 06:51:54 +0000
4@@ -67,7 +67,8 @@
5 border-color: transparent;
6 }
7
8-button.destructive-action {
9+button.destructive-action,
10+headerbar button.destructive-action {
11 color: white;
12 text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.4);
13 background-color: shade (@error_bg_color, 1.1);
14@@ -312,6 +313,26 @@
15 box-shadow: none;
16 }
17
18+.horizontal.linked button:not(:only-child) {
19+ background-clip: padding-box;
20+}
21+
22+.horizontal.linked button.suggested-action:first-child,
23+.horizontal.linked button.destructive-action:first-child {
24+ border-left-width: 1px;
25+ border-radius: 8px 0 0 8px;
26+}
27+
28+.horizontal.linked button.suggested-action:not(:only-child):not(:first-child):not(:last-child) {
29+ border-radius: 0;
30+}
31+
32+.horizontal.linked button.suggested-action:last-child,
33+.horizontal.linked button.destructive-action:last-child {
34+ border-right-width: 1px;
35+ border-radius: 0 8px 8px 0;
36+}
37+
38 .linked.vertical button:backdrop:not(:only-child),
39 .linked.vertical button.destructive-action:backdrop:not(:only-child),
40 .linked.vertical button:disabled:not(:only-child),
41@@ -2567,12 +2588,28 @@
42 border-radius: 12px;
43 }
44
45+.primary-toolbar button.suggested-action:not(:disabled),
46+.maximized headerbar button.suggested-action:not(:disabled),
47+.maximized .titlebar:not(headerbar) button.suggested-action:not(:disabled) {
48+ background-image: -gtk-gradient (linear, left top, left bottom,
49+ from (shade (@suggested_action_bg, 0.90)),
50+ to (shade (@suggested_action_bg, 1.10)));
51+}
52+
53 headerbar button.suggested-action:hover {
54 background-image: -gtk-gradient (linear, left top, left bottom,
55 from (shade (@suggested_action_bg, 0.93)),
56 to (shade (@suggested_action_bg, 0.75)));
57 }
58
59+.primary-toolbar button.suggested-action:hover,
60+.maximized headerbar button.suggested-action:hover,
61+.maximized .titlebar:not(headerbar) button.suggested-action:hover {
62+ background-image: -gtk-gradient (linear, left top, left bottom,
63+ from (shade (@suggested_action_bg, 0.75)),
64+ to (shade (@suggested_action_bg, 0.93)));
65+}
66+
67 headerbar button.suggested-action:backdrop:not(:disabled) * {
68 color: shade (white, 0.65);
69 }
70@@ -2583,12 +2620,28 @@
71 to (shade (@suggested_action_bg, 0.65)));
72 }
73
74+.primary-toolbar button.suggested-action:backdrop:not(:disabled),
75+.maximized headerbar button.suggested-action:backdrop:not(:disabled),
76+.maximized .titlebar:not(headerbar) button.suggested-action:backdrop:not(:disabled) {
77+ background-image: -gtk-gradient (linear, left top, left bottom,
78+ from (shade (@suggested_action_bg, 0.65)),
79+ to (shade (@suggested_action_bg, 0.65)));
80+}
81+
82 headerbar button.suggested-action:hover:backdrop {
83 background-image: -gtk-gradient (linear, left top, left bottom,
84 from (shade (@suggested_action_bg, 0.77)),
85 to (shade (@suggested_action_bg, 0.75)));
86 }
87
88+.primary-toolbar button.suggested-action:hover:backdrop,
89+.maximized headerbar button.suggested-action:hover:backdrop,
90+.maximized .titlebar:not(headerbar) button.suggested-action:hover:backdrop {
91+ background-image: -gtk-gradient (linear, left top, left bottom,
92+ from (shade (@suggested_action_bg, 0.75)),
93+ to (shade (@suggested_action_bg, 0.77)));
94+}
95+
96 headerbar button.suggested-action:hover:backdrop * {
97 color: shade (white, 0.67);
98 }
99@@ -2599,11 +2652,153 @@
100 to (shade (@suggested_action_bg, 0.65)));
101 }
102
103+.primary-toolbar button.suggested-action:active,
104+.maximized headerbar button.suggested-action:active,
105+.maximized .titlebar:not(headerbar) button.suggested-action:active {
106+ background-image: -gtk-gradient (linear, left top, left bottom,
107+ from (shade (@suggested_action_bg, 0.65)),
108+ to (shade (@suggested_action_bg, 0.80)));
109+}
110+
111 headerbar button.suggested-action:disabled * {
112 color: @fg_color;
113 text-shadow: none;
114 }
115
116+.primary-toolbar .linked button.suggested-action,
117+headerbar .linked button.suggested-action {
118+ box-shadow: inset 1px 0 @suggested_action_bg,
119+ inset -1px 0 shade (@suggested_action_bg, 0.65);
120+}
121+
122+.primary-toolbar .linked button.suggested-action:first-child,
123+headerbar .linked button.suggested-action:first-child {
124+ box-shadow: inset -1px 0 shade (@suggested_action_bg, 0.65);
125+}
126+
127+.primary-toolbar .linked button.suggested-action:last-child,
128+headerbar .linked button.suggested-action:last-child {
129+ box-shadow: inset 1px 0 @suggested_action_bg;
130+}
131+
132+.primary-toolbar .linked button.suggested-action:backdrop,
133+headerbar .linked button.suggested-action:backdrop {
134+ box-shadow: inset 1px 0 shade (@suggested_action_bg, 0.65),
135+ inset -1px 0 shade (@suggested_action_bg, 0.65);
136+}
137+
138+/* destructive action */
139+headerbar button.destructive-action:not(:disabled) * {
140+ color: white;
141+ text-shadow: 0 -1px shade (@dark_bg_color, 1.2);
142+}
143+
144+headerbar button.destructive-action:not(:disabled) {
145+ background-image: -gtk-gradient (linear, left top, left bottom,
146+ from (shade (@error_bg_color, 1.10)),
147+ to (shade (@error_bg_color, 0.90)));
148+ border-radius: 12px;
149+}
150+
151+.primary-toolbar button.destructive-action:not(:disabled),
152+.maximized headerbar button.destructive-action:not(:disabled),
153+.maximized .titlebar:not(headerbar) button.destructive-action:not(:disabled) {
154+ background-image: -gtk-gradient (linear, left top, left bottom,
155+ from (shade (@error_bg_color, 0.90)),
156+ to (shade (@error_bg_color, 1.10)));
157+}
158+
159+headerbar button.destructive-action:hover {
160+ background-image: -gtk-gradient (linear, left top, left bottom,
161+ from (shade (@error_bg_color, 0.93)),
162+ to (shade (@error_bg_color, 0.75)));
163+}
164+
165+.primary-toolbar button.destructive-action:hover,
166+.maximized headerbar button.destructive-action:hover,
167+.maximized .titlebar:not(headerbar) button.destructive-action:hover {
168+ background-image: -gtk-gradient (linear, left top, left bottom,
169+ from (shade (@error_bg_color, 0.75)),
170+ to (shade (@error_bg_color, 0.93)));
171+}
172+
173+headerbar button.destructive-action:backdrop:not(:disabled) * {
174+ color: shade (white, 0.65);
175+}
176+
177+headerbar button.destructive-action:backdrop:not(:disabled) {
178+ background-image: -gtk-gradient (linear, left top, left bottom,
179+ from (shade (@error_bg_color, 0.65)),
180+ to (shade (@error_bg_color, 0.65)));
181+}
182+
183+.primary-toolbar button.destructive-action:backdrop:not(:disabled),
184+.maximized headerbar button.destructive-action:backdrop:not(:disabled),
185+.maximized .titlebar:not(headerbar) button.destructive-action:backdrop:not(:disabled) {
186+ background-image: -gtk-gradient (linear, left top, left bottom,
187+ from (shade (@error_bg_color, 0.65)),
188+ to (shade (@error_bg_color, 0.65)));
189+}
190+
191+headerbar button.destructive-action:hover:backdrop {
192+ background-image: -gtk-gradient (linear, left top, left bottom,
193+ from (shade (@error_bg_color, 0.77)),
194+ to (shade (@error_bg_color, 0.75)));
195+}
196+
197+.primary-toolbar button.destructive-action:hover:backdrop,
198+.maximized headerbar button.destructive-action:hover:backdrop,
199+.maximized .titlebar:not(headerbar) button.destructive-action:hover:backdrop {
200+ background-image: -gtk-gradient (linear, left top, left bottom,
201+ from (shade (@error_bg_color, 0.75)),
202+ to (shade (@error_bg_color, 0.77)));
203+}
204+
205+headerbar button.destructive-action:hover:backdrop * {
206+ color: shade (white, 0.67);
207+}
208+
209+headerbar button.destructive-action:active {
210+ background-image: -gtk-gradient (linear, left top, left bottom,
211+ from (shade (@error_bg_color, 0.80)),
212+ to (shade (@error_bg_color, 0.65)));
213+}
214+
215+.primary-toolbar button.destructive-action:active,
216+.maximized headerbar button.destructive-action:active,
217+.maximized .titlebar:not(headerbar) button.destructive-action:active {
218+ background-image: -gtk-gradient (linear, left top, left bottom,
219+ from (shade (@error_bg_color, 0.65)),
220+ to (shade (@error_bg_color, 0.80)));
221+}
222+
223+headerbar button.destructive-action:disabled * {
224+ color: @fg_color;
225+ text-shadow: none;
226+}
227+
228+.primary-toolbar .linked button.destructive-action,
229+headerbar .linked button.destructive-action {
230+ box-shadow: inset 1px 0 @error_bg_color,
231+ inset -1px 0 shade (@error_bg_color, 0.65);
232+}
233+
234+.primary-toolbar .linked button.destructive-action:first-child,
235+headerbar .linked button.destructive-action:first-child {
236+ box-shadow: inset -1px 0 shade (@error_bg_color, 0.65);
237+}
238+
239+.primary-toolbar .linked button.destructive-action:last-child,
240+headerbar .linked button.destructive-action:last-child {
241+ box-shadow: inset 1px 0 @error_bg_color;
242+}
243+
244+.primary-toolbar .linked button.destructive-action:backdrop,
245+headerbar .linked button.destructive-action:backdrop {
246+ box-shadow: inset 1px 0 shade (@error_bg_color, 0.65),
247+ inset -1px 0 shade (@error_bg_color, 0.65);
248+}
249+
250 .primary-toolbar separator,
251 .primary-toolbar separator,
252 .primary-toolbar separator:disabled,
253
254=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
255--- Radiance/gtk-3.20/gtk-widgets.css 2017-10-12 05:18:40 +0000
256+++ Radiance/gtk-3.20/gtk-widgets.css 2017-11-15 06:51:54 +0000
257@@ -66,7 +66,8 @@
258 border-color: transparent;
259 }
260
261-button.destructive-action {
262+button.destructive-action,
263+headerbar button.destructive-action {
264 color: white;
265 text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.4);
266 background-color: shade (@error_bg_color, 1.1);
267@@ -311,6 +312,26 @@
268 box-shadow: none;
269 }
270
271+.horizontal.linked button:not(:only-child) {
272+ background-clip: padding-box;
273+}
274+
275+.horizontal.linked button.suggested-action:first-child,
276+.horizontal.linked button.destructive-action:first-child {
277+ border-left-width: 1px;
278+ border-radius: 8px 0 0 8px;
279+}
280+
281+.horizontal.linked button.suggested-action:not(:only-child):not(:first-child):not(:last-child) {
282+ border-radius: 0;
283+}
284+
285+.horizontal.linked button.suggested-action:last-child,
286+.horizontal.linked button.destructive-action:last-child {
287+ border-right-width: 1px;
288+ border-radius: 0 8px 8px 0;
289+}
290+
291 .linked.vertical button:backdrop:not(:only-child),
292 .linked.vertical button.destructive-action:backdrop:not(:only-child),
293 .linked.vertical button:disabled:not(:only-child),
294@@ -2568,12 +2589,28 @@
295 border-radius: 12px;
296 }
297
298+.primary-toolbar button.suggested-action:not(:disabled),
299+.maximized headerbar button.suggested-action:not(:disabled),
300+.maximized .titlebar:not(headerbar) button.suggested-action:not(:disabled) {
301+ background-image: -gtk-gradient (linear, left top, left bottom,
302+ from (shade (@suggested_action_bg, 0.90)),
303+ to (shade (@suggested_action_bg, 1.10)));
304+}
305+
306 headerbar button.suggested-action:hover {
307 background-image: -gtk-gradient (linear, left top, left bottom,
308 from (shade (@suggested_action_bg, 0.98)),
309 to (shade (@suggested_action_bg, 0.79)));
310 }
311
312+.primary-toolbar button.suggested-action:hover,
313+.maximized headerbar button.suggested-action:hover,
314+.maximized .titlebar:not(headerbar) button.suggested-action:hover {
315+ background-image: -gtk-gradient (linear, left top, left bottom,
316+ from (shade (@suggested_action_bg, 0.75)),
317+ to (shade (@suggested_action_bg, 0.93)));
318+}
319+
320 headerbar button.suggested-action:backdrop:not(:disabled) * {
321 color: alpha (white, 0.65);
322 }
323@@ -2584,12 +2621,28 @@
324 to (alpha (@suggested_action_bg, 0.80)));
325 }
326
327+.primary-toolbar button.suggested-action:backdrop:not(:disabled),
328+.maximized headerbar button.suggested-action:backdrop:not(:disabled),
329+.maximized .titlebar:not(headerbar) button.suggested-action:backdrop:not(:disabled) {
330+ background-image: -gtk-gradient (linear, left top, left bottom,
331+ from (alpha (@suggested_action_bg, 0.80)),
332+ to (alpha (@suggested_action_bg, 0.80)));
333+}
334+
335 headerbar button.suggested-action:hover:backdrop {
336 background-image: -gtk-gradient (linear, left top, left bottom,
337 from (alpha (@suggested_action_bg, 0.70)),
338 to (alpha (@suggested_action_bg, 0.69)));
339 }
340
341+.primary-toolbar button.suggested-action:hover:backdrop,
342+.maximized headerbar button.suggested-action:hover:backdrop,
343+.maximized .titlebar:not(headerbar) button.suggested-action:hover:backdrop {
344+ background-image: -gtk-gradient (linear, left top, left bottom,
345+ from (alpha (@suggested_action_bg, 0.69)),
346+ to (alpha (@suggested_action_bg, 0.70)));
347+}
348+
349 headerbar button.suggested-action:hover:backdrop * {
350 color: alpha (white, 0.67);
351 }
352@@ -2600,11 +2653,153 @@
353 to (shade (@suggested_action_bg, 0.70)));
354 }
355
356+.primary-toolbar button.suggested-action:active,
357+.maximized headerbar button.suggested-action:active,
358+.maximized .titlebar:not(headerbar) button.suggested-action:active {
359+ background-image: -gtk-gradient (linear, left top, left bottom,
360+ from (shade (@suggested_action_bg, 0.65)),
361+ to (shade (@suggested_action_bg, 0.80)));
362+}
363+
364 headerbar button.suggested-action:disabled * {
365 color: @fg_color;
366 text-shadow: none;
367 }
368
369+.primary-toolbar .linked button.suggested-action,
370+headerbar .linked button.suggested-action {
371+ box-shadow: inset 1px 0 @suggested_action_bg,
372+ inset -1px 0 shade (@suggested_action_bg, 0.65);
373+}
374+
375+.primary-toolbar .linked button.suggested-action:first-child,
376+headerbar .linked button.suggested-action:first-child {
377+ box-shadow: inset -1px 0 shade (@suggested_action_bg, 0.65);
378+}
379+
380+.primary-toolbar .linked button.suggested-action:last-child,
381+headerbar .linked button.suggested-action:last-child {
382+ box-shadow: inset 1px 0 @suggested_action_bg;
383+}
384+
385+.primary-toolbar .linked button.suggested-action:backdrop,
386+headerbar .linked button.suggested-action:backdrop {
387+ box-shadow: inset 1px 0 shade (@suggested_action_bg, 0.65),
388+ inset -1px 0 shade (@suggested_action_bg, 0.65);
389+}
390+
391+/* destructive action */
392+headerbar button.destructive-action:not(:disabled) * {
393+ color: white;
394+ text-shadow: 0 -1px shade (@dark_bg_color, 1.2);
395+}
396+
397+headerbar button.destructive-action:not(:disabled) {
398+ background-image: -gtk-gradient (linear, left top, left bottom,
399+ from (shade (@error_bg_color, 1.10)),
400+ to (shade (@error_bg_color, 0.90)));
401+ border-radius: 12px;
402+}
403+
404+.primary-toolbar button.destructive-action:not(:disabled),
405+.maximized headerbar button.destructive-action:not(:disabled),
406+.maximized .titlebar:not(headerbar) button.destructive-action:not(:disabled) {
407+ background-image: -gtk-gradient (linear, left top, left bottom,
408+ from (shade (@error_bg_color, 0.90)),
409+ to (shade (@error_bg_color, 1.10)));
410+}
411+
412+headerbar button.destructive-action:hover {
413+ background-image: -gtk-gradient (linear, left top, left bottom,
414+ from (shade (@error_bg_color, 0.93)),
415+ to (shade (@error_bg_color, 0.75)));
416+}
417+
418+.primary-toolbar button.destructive-action:hover,
419+.maximized headerbar button.destructive-action:hover,
420+.maximized .titlebar:not(headerbar) button.destructive-action:hover {
421+ background-image: -gtk-gradient (linear, left top, left bottom,
422+ from (shade (@error_bg_color, 0.75)),
423+ to (shade (@error_bg_color, 0.93)));
424+}
425+
426+headerbar button.destructive-action:backdrop:not(:disabled) * {
427+ color: shade (white, 0.65);
428+}
429+
430+headerbar button.destructive-action:backdrop:not(:disabled) {
431+ background-image: -gtk-gradient (linear, left top, left bottom,
432+ from (shade (@error_bg_color, 0.65)),
433+ to (shade (@error_bg_color, 0.65)));
434+}
435+
436+.primary-toolbar button.destructive-action:backdrop:not(:disabled),
437+.maximized headerbar button.destructive-action:backdrop:not(:disabled),
438+.maximized .titlebar:not(headerbar) button.destructive-action:backdrop:not(:disabled) {
439+ background-image: -gtk-gradient (linear, left top, left bottom,
440+ from (shade (@error_bg_color, 0.65)),
441+ to (shade (@error_bg_color, 0.65)));
442+}
443+
444+headerbar button.destructive-action:hover:backdrop {
445+ background-image: -gtk-gradient (linear, left top, left bottom,
446+ from (shade (@error_bg_color, 0.77)),
447+ to (shade (@error_bg_color, 0.75)));
448+}
449+
450+.primary-toolbar button.destructive-action:hover:backdrop,
451+.maximized headerbar button.destructive-action:hover:backdrop,
452+.maximized .titlebar:not(headerbar) button.destructive-action:hover:backdrop {
453+ background-image: -gtk-gradient (linear, left top, left bottom,
454+ from (shade (@error_bg_color, 0.75)),
455+ to (shade (@error_bg_color, 0.77)));
456+}
457+
458+headerbar button.destructive-action:hover:backdrop * {
459+ color: shade (white, 0.67);
460+}
461+
462+headerbar button.destructive-action:active {
463+ background-image: -gtk-gradient (linear, left top, left bottom,
464+ from (shade (@error_bg_color, 0.80)),
465+ to (shade (@error_bg_color, 0.65)));
466+}
467+
468+.primary-toolbar button.destructive-action:active,
469+.maximized headerbar button.destructive-action:active,
470+.maximized .titlebar:not(headerbar) button.destructive-action:active {
471+ background-image: -gtk-gradient (linear, left top, left bottom,
472+ from (shade (@error_bg_color, 0.65)),
473+ to (shade (@error_bg_color, 0.80)));
474+}
475+
476+headerbar button.destructive-action:disabled * {
477+ color: @fg_color;
478+ text-shadow: none;
479+}
480+
481+.primary-toolbar .linked button.destructive-action,
482+headerbar .linked button.destructive-action {
483+ box-shadow: inset 1px 0 @error_bg_color,
484+ inset -1px 0 shade (@error_bg_color, 0.65);
485+}
486+
487+.primary-toolbar .linked button.destructive-action:first-child,
488+headerbar .linked button.destructive-action:first-child {
489+ box-shadow: inset -1px 0 shade (@error_bg_color, 0.65);
490+}
491+
492+.primary-toolbar .linked button.destructive-action:last-child,
493+headerbar .linked button.destructive-action:last-child {
494+ box-shadow: inset 1px 0 @error_bg_color;
495+}
496+
497+.primary-toolbar .linked button.destructive-action:backdrop,
498+headerbar .linked button.destructive-action:backdrop {
499+ box-shadow: inset 1px 0 shade (@error_bg_color, 0.65),
500+ inset -1px 0 shade (@error_bg_color, 0.65);
501+}
502+
503 .primary-toolbar separator,
504 .primary-toolbar separator,
505 .primary-toolbar separator:disabled,

Subscribers

People subscribed via source and target branches