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

[Marco Trevisan (Treviño)]

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

Based on same .suggested-action theming.

[Iain Lane (laney)]

code looks good, thanks

might be too much of a change to SRU, but I leave that decision to you & others

review: Approve

[Iain Lane (laney)]

https://usercontent.irccloud-cdn.com/file/qAJpfAxx/image.png

&

https://usercontent.irccloud-cdn.com/file/FwRav7nV/image.png

=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2017-10-12 05:18:40 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2017-10-23 08:58:03 +0000
@@ -67,7 +67,8 @@
     border-color: transparent;
 }
 
-button.destructive-action {
+button.destructive-action,
+headerbar button.destructive-action {
     color: white;
     text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.4);
     background-color: shade (@error_bg_color, 1.1);
@@ -312,6 +313,26 @@
     box-shadow: none;
 }
 
+.horizontal.linked button:not(:only-child) {
+    background-clip: padding-box;
+}
+
+.horizontal.linked button.suggested-action:first-child,
+.horizontal.linked button.destructive-action:first-child {
+    border-left-width: 1px;
+    border-radius: 8px 0 0 8px;
+}
+
+.horizontal.linked button.suggested-action:not(:only-child):not(:first-child):not(:last-child) {
+    border-radius: 0;
+}
+
+.horizontal.linked button.suggested-action:last-child,
+.horizontal.linked button.destructive-action:last-child {
+    border-right-width: 1px;
+    border-radius: 0 8px 8px 0;
+}
+
 .linked.vertical button:backdrop:not(:only-child),
 .linked.vertical button.destructive-action:backdrop:not(:only-child),
 .linked.vertical button:disabled:not(:only-child),
@@ -2604,6 +2625,100 @@
     text-shadow: none;
 }
 
+.primary-toolbar .linked button.suggested-action,
+headerbar .linked button.suggested-action {
+    box-shadow: inset 1px 0 @suggested_action_bg,
+                inset -1px 0 shade (@suggested_action_bg, 0.65);
+}
+
+.primary-toolbar .linked button.suggested-action:first-child,
+headerbar .linked button.suggested-action:first-child {
+    box-shadow: inset -1px 0 shade (@suggested_action_bg, 0.65);
+}
+
+.primary-toolbar .linked button.suggested-action:last-child,
+headerbar .linked button.suggested-action:last-child {
+    box-shadow: inset 1px 0 @suggested_action_bg;
+}
+
+.primary-toolbar .linked button.suggested-action:backdrop,
+headerbar .linked button.suggested-action:backdrop {
+    box-shadow: inset 1px 0 shade (@suggested_action_bg, 0.65),
+                inset -1px 0 shade (@suggested_action_bg, 0.65);
+}
+
+/* destructive action */
+headerbar button.destructive-action:not(:disabled) * {
+   color: white;
+   text-shadow: 0 -1px shade (@dark_bg_color, 1.2);
+}
+
+headerbar button.destructive-action:not(:disabled) {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 1.10)),
+                                     to (shade (@error_bg_color, 0.90)));
+    border-radius: 12px;
+}
+
+headerbar button.destructive-action:hover {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.93)),
+                                     to (shade (@error_bg_color, 0.75)));
+}
+
+headerbar button.destructive-action:backdrop:not(:disabled) * {
+    color: shade (white, 0.65);
+}
+
+headerbar button.destructive-action:backdrop:not(:disabled) {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.65)),
+                                     to (shade (@error_bg_color, 0.65)));
+}
+
+headerbar button.destructive-action:hover:backdrop {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.77)),
+                                     to (shade (@error_bg_color, 0.75)));
+}
+
+headerbar button.destructive-action:hover:backdrop * {
+    color: shade (white, 0.67);
+}
+
+headerbar button.destructive-action:active {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.80)),
+                                     to (shade (@error_bg_color, 0.65)));
+}
+
+headerbar button.destructive-action:disabled * {
+    color: @fg_color;
+    text-shadow: none;
+}
+
+.primary-toolbar .linked button.destructive-action,
+headerbar .linked button.destructive-action {
+    box-shadow: inset 1px 0 @error_bg_color,
+                inset -1px 0 shade (@error_bg_color, 0.65);
+}
+
+.primary-toolbar .linked button.destructive-action:first-child,
+headerbar .linked button.destructive-action:first-child {
+    box-shadow: inset -1px 0 shade (@error_bg_color, 0.65);
+}
+
+.primary-toolbar .linked button.destructive-action:last-child,
+headerbar .linked button.destructive-action:last-child {
+    box-shadow: inset 1px 0 @error_bg_color;
+}
+
+.primary-toolbar .linked button.destructive-action:backdrop,
+headerbar .linked button.destructive-action:backdrop {
+    box-shadow: inset 1px 0 shade (@error_bg_color, 0.65),
+                inset -1px 0 shade (@error_bg_color, 0.65);
+}
+
 .primary-toolbar separator,
 .primary-toolbar separator,
 .primary-toolbar separator:disabled,

=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2017-10-12 05:18:40 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2017-10-23 08:58:03 +0000
@@ -66,7 +66,8 @@
     border-color: transparent;
 }
 
-button.destructive-action {
+button.destructive-action,
+headerbar button.destructive-action {
     color: white;
     text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.4);
     background-color: shade (@error_bg_color, 1.1);
@@ -311,6 +312,26 @@
     box-shadow: none;
 }
 
+.horizontal.linked button:not(:only-child) {
+    background-clip: padding-box;
+}
+
+.horizontal.linked button.suggested-action:first-child,
+.horizontal.linked button.destructive-action:first-child {
+    border-left-width: 1px;
+    border-radius: 8px 0 0 8px;
+}
+
+.horizontal.linked button.suggested-action:not(:only-child):not(:first-child):not(:last-child) {
+    border-radius: 0;
+}
+
+.horizontal.linked button.suggested-action:last-child,
+.horizontal.linked button.destructive-action:last-child {
+    border-right-width: 1px;
+    border-radius: 0 8px 8px 0;
+}
+
 .linked.vertical button:backdrop:not(:only-child),
 .linked.vertical button.destructive-action:backdrop:not(:only-child),
 .linked.vertical button:disabled:not(:only-child),
@@ -2605,6 +2626,100 @@
     text-shadow: none;
 }
 
+.primary-toolbar .linked button.suggested-action,
+headerbar .linked button.suggested-action {
+    box-shadow: inset 1px 0 @suggested_action_bg,
+                inset -1px 0 shade (@suggested_action_bg, 0.65);
+}
+
+.primary-toolbar .linked button.suggested-action:first-child,
+headerbar .linked button.suggested-action:first-child {
+    box-shadow: inset -1px 0 shade (@suggested_action_bg, 0.65);
+}
+
+.primary-toolbar .linked button.suggested-action:last-child,
+headerbar .linked button.suggested-action:last-child {
+    box-shadow: inset 1px 0 @suggested_action_bg;
+}
+
+.primary-toolbar .linked button.suggested-action:backdrop,
+headerbar .linked button.suggested-action:backdrop {
+    box-shadow: inset 1px 0 shade (@suggested_action_bg, 0.65),
+                inset -1px 0 shade (@suggested_action_bg, 0.65);
+}
+
+/* destructive action */
+headerbar button.destructive-action:not(:disabled) * {
+   color: white;
+   text-shadow: 0 -1px shade (@dark_bg_color, 1.2);
+}
+
+headerbar button.destructive-action:not(:disabled) {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 1.10)),
+                                     to (shade (@error_bg_color, 0.90)));
+    border-radius: 12px;
+}
+
+headerbar button.destructive-action:hover {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.93)),
+                                     to (shade (@error_bg_color, 0.75)));
+}
+
+headerbar button.destructive-action:backdrop:not(:disabled) * {
+    color: shade (white, 0.65);
+}
+
+headerbar button.destructive-action:backdrop:not(:disabled) {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.65)),
+                                     to (shade (@error_bg_color, 0.65)));
+}
+
+headerbar button.destructive-action:hover:backdrop {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.77)),
+                                     to (shade (@error_bg_color, 0.75)));
+}
+
+headerbar button.destructive-action:hover:backdrop * {
+    color: shade (white, 0.67);
+}
+
+headerbar button.destructive-action:active {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.80)),
+                                     to (shade (@error_bg_color, 0.65)));
+}
+
+headerbar button.destructive-action:disabled * {
+    color: @fg_color;
+    text-shadow: none;
+}
+
+.primary-toolbar .linked button.destructive-action,
+headerbar .linked button.destructive-action {
+    box-shadow: inset 1px 0 @error_bg_color,
+                inset -1px 0 shade (@error_bg_color, 0.65);
+}
+
+.primary-toolbar .linked button.destructive-action:first-child,
+headerbar .linked button.destructive-action:first-child {
+    box-shadow: inset -1px 0 shade (@error_bg_color, 0.65);
+}
+
+.primary-toolbar .linked button.destructive-action:last-child,
+headerbar .linked button.destructive-action:last-child {
+    box-shadow: inset 1px 0 @error_bg_color;
+}
+
+.primary-toolbar .linked button.destructive-action:backdrop,
+headerbar .linked button.destructive-action:backdrop {
+    box-shadow: inset 1px 0 shade (@error_bg_color, 0.65),
+                inset -1px 0 shade (@error_bg_color, 0.65);
+}
+
 .primary-toolbar separator,
 .primary-toolbar separator,
 .primary-toolbar separator:disabled,