Ubuntu theme

Merge lp:~3v1n0/ubuntu-themes/headerbar-destructive-theming into lp:ubuntu-themes/artful

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

Commit message

Ambiance, Radiance: add theming for headerbar .destructive-action button's

Based on same .suggested-action theming.

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:50:05 +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@@ -2604,6 +2625,100 @@
42 text-shadow: none;
43 }
44
45+.primary-toolbar .linked button.suggested-action,
46+headerbar .linked button.suggested-action {
47+ box-shadow: inset 1px 0 @suggested_action_bg,
48+ inset -1px 0 shade (@suggested_action_bg, 0.65);
49+}
50+
51+.primary-toolbar .linked button.suggested-action:first-child,
52+headerbar .linked button.suggested-action:first-child {
53+ box-shadow: inset -1px 0 shade (@suggested_action_bg, 0.65);
54+}
55+
56+.primary-toolbar .linked button.suggested-action:last-child,
57+headerbar .linked button.suggested-action:last-child {
58+ box-shadow: inset 1px 0 @suggested_action_bg;
59+}
60+
61+.primary-toolbar .linked button.suggested-action:backdrop,
62+headerbar .linked button.suggested-action:backdrop {
63+ box-shadow: inset 1px 0 shade (@suggested_action_bg, 0.65),
64+ inset -1px 0 shade (@suggested_action_bg, 0.65);
65+}
66+
67+/* destructive action */
68+headerbar button.destructive-action:not(:disabled) * {
69+ color: white;
70+ text-shadow: 0 -1px shade (@dark_bg_color, 1.2);
71+}
72+
73+headerbar button.destructive-action:not(:disabled) {
74+ background-image: -gtk-gradient (linear, left top, left bottom,
75+ from (shade (@error_bg_color, 1.10)),
76+ to (shade (@error_bg_color, 0.90)));
77+ border-radius: 12px;
78+}
79+
80+headerbar button.destructive-action:hover {
81+ background-image: -gtk-gradient (linear, left top, left bottom,
82+ from (shade (@error_bg_color, 0.93)),
83+ to (shade (@error_bg_color, 0.75)));
84+}
85+
86+headerbar button.destructive-action:backdrop:not(:disabled) * {
87+ color: shade (white, 0.65);
88+}
89+
90+headerbar button.destructive-action:backdrop:not(:disabled) {
91+ background-image: -gtk-gradient (linear, left top, left bottom,
92+ from (shade (@error_bg_color, 0.65)),
93+ to (shade (@error_bg_color, 0.65)));
94+}
95+
96+headerbar button.destructive-action:hover:backdrop {
97+ background-image: -gtk-gradient (linear, left top, left bottom,
98+ from (shade (@error_bg_color, 0.77)),
99+ to (shade (@error_bg_color, 0.75)));
100+}
101+
102+headerbar button.destructive-action:hover:backdrop * {
103+ color: shade (white, 0.67);
104+}
105+
106+headerbar button.destructive-action:active {
107+ background-image: -gtk-gradient (linear, left top, left bottom,
108+ from (shade (@error_bg_color, 0.80)),
109+ to (shade (@error_bg_color, 0.65)));
110+}
111+
112+headerbar button.destructive-action:disabled * {
113+ color: @fg_color;
114+ text-shadow: none;
115+}
116+
117+.primary-toolbar .linked button.destructive-action,
118+headerbar .linked button.destructive-action {
119+ box-shadow: inset 1px 0 @error_bg_color,
120+ inset -1px 0 shade (@error_bg_color, 0.65);
121+}
122+
123+.primary-toolbar .linked button.destructive-action:first-child,
124+headerbar .linked button.destructive-action:first-child {
125+ box-shadow: inset -1px 0 shade (@error_bg_color, 0.65);
126+}
127+
128+.primary-toolbar .linked button.destructive-action:last-child,
129+headerbar .linked button.destructive-action:last-child {
130+ box-shadow: inset 1px 0 @error_bg_color;
131+}
132+
133+.primary-toolbar .linked button.destructive-action:backdrop,
134+headerbar .linked button.destructive-action:backdrop {
135+ box-shadow: inset 1px 0 shade (@error_bg_color, 0.65),
136+ inset -1px 0 shade (@error_bg_color, 0.65);
137+}
138+
139 .primary-toolbar separator,
140 .primary-toolbar separator,
141 .primary-toolbar separator:disabled,
142
143=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
144--- Radiance/gtk-3.20/gtk-widgets.css 2017-10-12 05:18:40 +0000
145+++ Radiance/gtk-3.20/gtk-widgets.css 2017-11-15 06:50:05 +0000
146@@ -66,7 +66,8 @@
147 border-color: transparent;
148 }
149
150-button.destructive-action {
151+button.destructive-action,
152+headerbar button.destructive-action {
153 color: white;
154 text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.4);
155 background-color: shade (@error_bg_color, 1.1);
156@@ -311,6 +312,26 @@
157 box-shadow: none;
158 }
159
160+.horizontal.linked button:not(:only-child) {
161+ background-clip: padding-box;
162+}
163+
164+.horizontal.linked button.suggested-action:first-child,
165+.horizontal.linked button.destructive-action:first-child {
166+ border-left-width: 1px;
167+ border-radius: 8px 0 0 8px;
168+}
169+
170+.horizontal.linked button.suggested-action:not(:only-child):not(:first-child):not(:last-child) {
171+ border-radius: 0;
172+}
173+
174+.horizontal.linked button.suggested-action:last-child,
175+.horizontal.linked button.destructive-action:last-child {
176+ border-right-width: 1px;
177+ border-radius: 0 8px 8px 0;
178+}
179+
180 .linked.vertical button:backdrop:not(:only-child),
181 .linked.vertical button.destructive-action:backdrop:not(:only-child),
182 .linked.vertical button:disabled:not(:only-child),
183@@ -2605,6 +2626,100 @@
184 text-shadow: none;
185 }
186
187+.primary-toolbar .linked button.suggested-action,
188+headerbar .linked button.suggested-action {
189+ box-shadow: inset 1px 0 @suggested_action_bg,
190+ inset -1px 0 shade (@suggested_action_bg, 0.65);
191+}
192+
193+.primary-toolbar .linked button.suggested-action:first-child,
194+headerbar .linked button.suggested-action:first-child {
195+ box-shadow: inset -1px 0 shade (@suggested_action_bg, 0.65);
196+}
197+
198+.primary-toolbar .linked button.suggested-action:last-child,
199+headerbar .linked button.suggested-action:last-child {
200+ box-shadow: inset 1px 0 @suggested_action_bg;
201+}
202+
203+.primary-toolbar .linked button.suggested-action:backdrop,
204+headerbar .linked button.suggested-action:backdrop {
205+ box-shadow: inset 1px 0 shade (@suggested_action_bg, 0.65),
206+ inset -1px 0 shade (@suggested_action_bg, 0.65);
207+}
208+
209+/* destructive action */
210+headerbar button.destructive-action:not(:disabled) * {
211+ color: white;
212+ text-shadow: 0 -1px shade (@dark_bg_color, 1.2);
213+}
214+
215+headerbar button.destructive-action:not(:disabled) {
216+ background-image: -gtk-gradient (linear, left top, left bottom,
217+ from (shade (@error_bg_color, 1.10)),
218+ to (shade (@error_bg_color, 0.90)));
219+ border-radius: 12px;
220+}
221+
222+headerbar button.destructive-action:hover {
223+ background-image: -gtk-gradient (linear, left top, left bottom,
224+ from (shade (@error_bg_color, 0.93)),
225+ to (shade (@error_bg_color, 0.75)));
226+}
227+
228+headerbar button.destructive-action:backdrop:not(:disabled) * {
229+ color: shade (white, 0.65);
230+}
231+
232+headerbar button.destructive-action:backdrop:not(:disabled) {
233+ background-image: -gtk-gradient (linear, left top, left bottom,
234+ from (shade (@error_bg_color, 0.65)),
235+ to (shade (@error_bg_color, 0.65)));
236+}
237+
238+headerbar button.destructive-action:hover:backdrop {
239+ background-image: -gtk-gradient (linear, left top, left bottom,
240+ from (shade (@error_bg_color, 0.77)),
241+ to (shade (@error_bg_color, 0.75)));
242+}
243+
244+headerbar button.destructive-action:hover:backdrop * {
245+ color: shade (white, 0.67);
246+}
247+
248+headerbar button.destructive-action:active {
249+ background-image: -gtk-gradient (linear, left top, left bottom,
250+ from (shade (@error_bg_color, 0.80)),
251+ to (shade (@error_bg_color, 0.65)));
252+}
253+
254+headerbar button.destructive-action:disabled * {
255+ color: @fg_color;
256+ text-shadow: none;
257+}
258+
259+.primary-toolbar .linked button.destructive-action,
260+headerbar .linked button.destructive-action {
261+ box-shadow: inset 1px 0 @error_bg_color,
262+ inset -1px 0 shade (@error_bg_color, 0.65);
263+}
264+
265+.primary-toolbar .linked button.destructive-action:first-child,
266+headerbar .linked button.destructive-action:first-child {
267+ box-shadow: inset -1px 0 shade (@error_bg_color, 0.65);
268+}
269+
270+.primary-toolbar .linked button.destructive-action:last-child,
271+headerbar .linked button.destructive-action:last-child {
272+ box-shadow: inset 1px 0 @error_bg_color;
273+}
274+
275+.primary-toolbar .linked button.destructive-action:backdrop,
276+headerbar .linked button.destructive-action:backdrop {
277+ box-shadow: inset 1px 0 shade (@error_bg_color, 0.65),
278+ inset -1px 0 shade (@error_bg_color, 0.65);
279+}
280+
281 .primary-toolbar separator,
282 .primary-toolbar separator,
283 .primary-toolbar separator:disabled,

Subscribers

People subscribed via source and target branches