Ubuntu theme

Merge lp:~3v1n0/ubuntu-themes/better-destructive-action into lp:ubuntu-themes

  1. better-destructive-action
  2. Merge into trunk
Proposed by Marco Trevisan (Treviño)
Status: Superseded
Proposed branch: lp:~3v1n0/ubuntu-themes/better-destructive-action
Merge into: lp:ubuntu-themes
Diff against target: 525 lines (+454/-22)
2 files modified
Ambiance/gtk-3.20/gtk-widgets.css (+225/-9)
Radiance/gtk-3.20/gtk-widgets.css (+229/-13)
To merge this branch: bzr merge lp:~3v1n0/ubuntu-themes/better-destructive-action
Reviewer Review Type Date Requested Status
Ubuntu Artwork Packagers Pending
Review via email: mp+329390@code.launchpad.net

This proposal has been superseded by a proposal from 2017-08-22.

Commit message

Ambiance, Radiance: add better definition for button destructive-action

Based on Adwaita

To post a comment you must log in.
lp:~3v1n0/ubuntu-themes/better-destructive-action updated
556. By Marco Trevisan (Treviño)

Ambiance, Radiance: add better definition for button destructive-action

Based on Adwaita

557. By Marco Trevisan (Treviño)

Ambiance, Radiance: rebase destructive-action buttons definition on default ones

Unmerged revisions

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

Subscribers

People subscribed via source and target branches