Merge lp:~3v1n0/ubuntu-themes/better-destructive-action into lp:ubuntu-themes
- better-destructive-action
- 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 |
Prerequisite: | lp:~3v1n0/ubuntu-themes/radiance-headerbar-buttons-fix |
Diff against target: |
503 lines (+450/-18) 2 files modified
Ambiance/gtk-3.20/gtk-widgets.css (+225/-9) Radiance/gtk-3.20/gtk-widgets.css (+225/-9) |
To merge this branch: | bzr merge lp:~3v1n0/ubuntu-themes/better-destructive-action |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Ubuntu Artwork Packagers | Pending | ||
Review via email: mp+329391@code.launchpad.net |
This proposal supersedes a proposal from 2017-08-22.
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
Description of the change
To post a comment you must log in.
- 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:51:20 +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-08-22 19:51:20 +0000 |
255 | +++ Radiance/gtk-3.20/gtk-widgets.css 2017-08-22 19:51:20 +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 * |