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

[Marco Trevisan (Treviño)]

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

Based on Adwaita

For example when hitting shift+delete on a file in nautilus

[Didier Roche (didrocks)]

Martin is going to review it. I tried it, it's mostly looking good, but there is some offset on the right (the border is smaller than the button background itself)

[Ken VanDine (ken-vandine)]

@3v1n0 is going to fix the offset in a separate branch, approving this to unblock getting other theme fixes landed. Either way it's an improvement.

review: Approve

[lp:~3v1n0/ubuntu-themes/better-destructive-action]

557. By Marco Trevisan (Treviño) on 2017-09-18

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

=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2017-09-18 18:20:28 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2017-09-18 18:20:28 +0000
@@ -67,6 +67,16 @@
     border-color: transparent;
 }
 
+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);
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 1.1)),
+                                     color-stop (0.5, @error_bg_color),
+                                     to (shade (@error_bg_color, 0.95)));
+}
+
 button:backdrop {
     background-image: none;
     background-color: @bg_color;
@@ -81,6 +91,13 @@
     border-image-source: none;
 }
 
+button.destructive-action:backdrop {
+    color: alpha (white, 0.75);
+    background-color: shade (@error_bg_color, 1.2);
+    text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.2);
+    background-image: none;
+}
+
 button:focus {
     border-image-source: -gtk-scaled(url("assets/button-focused.png"),
                                      url("assets/[e-mail]"));
@@ -96,6 +113,7 @@
 }
 
 button:hover:backdrop {
+    background-image: none;
     background-color: shade (@bg_color, 1.04);
     border-image-source: -gtk-scaled(url("assets/backdrop-button-hover.png"),
                                      url("assets/[e-mail]"));
@@ -106,6 +124,17 @@
                                      url("assets/[e-mail]"));
 }
 
+button.destructive-action:hover {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 1.12)),
+                                     color-stop (0.5, @error_bg_color),
+                                     to (shade (@error_bg_color, 0.96)));
+}
+
+button.destructive-action:hover:backdrop {
+    background-image: none;
+    background-color: shade (@error_bg_color, 0.95);
+}
 
 button:disabled {
     background-image: none;
@@ -143,6 +172,16 @@
                                      url("assets/[e-mail]"));
 }
 
+button.destructive-action:checked {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.80)),
+                                     to (shade (@error_bg_color, 1.2)));
+}
+
+button.destructive-action:checked:backdrop {
+    background-image: none;
+}
+
 button:active {
     background-image: -gtk-gradient (linear, left top, left bottom,
                                      from (#dcdcdc),
@@ -156,6 +195,12 @@
                                      url("assets/[e-mail]"));
 }
 
+button.destructive-action:active {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.87)),
+                                     to (shade (@error_bg_color, 1.1)));
+}
+
 button:checked:disabled,
 button:active:disabled {
     background-image: -gtk-gradient (linear, left top, left bottom,
@@ -201,16 +246,6 @@
 }
 */
 
-button.destructive-action {
-    background-image: linear-gradient(to bottom, #e03d3d, #ef2929);
-    border-color: #8e0b0b;
-    border-image: none;
-    color: white;
-    -gtk-icon-shadow: 0 1px shade(#9d4242, 1.15);
-    outline-color: rgba(255, 255, 255, 0.3);
-    text-shadow: 0 1px shade(#9d4242, 1.15);
-}
-
 /******************
  * Linked Widgets *
  *****************/
@@ -2684,13 +2719,19 @@
     border-color: @osd_border_color;
 }
 
+.osd:backdrop {
+    border-color: lighter (@osd_border_color);
+}
+
 .osd.toolbar {
     padding: 12px;
     border-radius: 8px;
 }
 
 .osd button,
-.osd button:backdrop {
+.osd button:backdrop,
+.osd button.destructive-action,
+.osd button.destructive-action:backdrop {
     color: @osd_fg_color;
     background: none;
     border: none;
@@ -2710,8 +2751,19 @@
     border-image: none;
 }
 
+button.osd.destructive-action,
+button.osd.destructive-action:hover,
+button.osd.destructive-action:active {
+    color: @osd_fg_color;
+    background: @error_bg_color;
+    box-shadow: none;
+    border-image: none;
+}
+
 button.osd:hover,
-.osd button:hover {
+button.osd.destructive-action:hover,
+.osd button:hover,
+.osd button.destructive-action:hover {
     color: lighter(@osd_fg_color);
     -gtk-icon-shadow: 0 0 3px @osd_fg_color;
 }
@@ -2722,6 +2774,12 @@
     -gtk-icon-shadow: none;
 }
 
+button.osd.destructive-action:active,
+.osd button.destructive-action:active {
+    color: shade(@osd_fg_color, 0.9);
+    -gtk-icon-shadow: none;
+}
+
 /*************
  * overshoot *
  *************/

=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2017-09-18 18:20:28 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2017-09-18 18:20:28 +0000
@@ -66,6 +66,16 @@
     border-color: transparent;
 }
 
+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);
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 1.1)),
+                                     color-stop (0.5, @error_bg_color),
+                                     to (shade (@error_bg_color, 0.95)));
+}
+
 button:backdrop {
     background-image: none;
     background-color: @bg_color;
@@ -80,6 +90,13 @@
     border-image-source: none;
 }
 
+button.destructive-action:backdrop {
+    color: alpha (white, 0.75);
+    background-color: shade (@error_bg_color, 1.2);
+    text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.2);
+    background-image: none;
+}
+
 button:focus {
     border-image-source: -gtk-scaled(url("assets/button-focused.png"),
                                      url("assets/button-focused.png@2"));
@@ -95,6 +112,7 @@
 }
 
 button:hover:backdrop {
+    background-image: none;
     background-color: shade (@bg_color, 1.04);
     border-image-source: -gtk-scaled(url("assets/backdrop-button-hover.png"),
                                      url("assets/[e-mail]"));
@@ -105,6 +123,17 @@
                                      url("assets/[e-mail]"));
 }
 
+button.destructive-action:hover {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 1.12)),
+                                     color-stop (0.5, @error_bg_color),
+                                     to (shade (@error_bg_color, 0.96)));
+}
+
+button.destructive-action:hover:backdrop {
+    background-image: none;
+    background-color: shade (@error_bg_color, 0.95);
+}
 
 button:disabled {
     background-image: none;
@@ -142,6 +171,16 @@
                                      url("assets/[e-mail]"));
 }
 
+button.destructive-action:checked {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.80)),
+                                     to (shade (@error_bg_color, 1.2)));
+}
+
+button.destructive-action:checked:backdrop {
+    background-image: none;
+}
+
 button:active {
     background-image: -gtk-gradient (linear, left top, left bottom,
                                      from (#dcdcdc),
@@ -155,6 +194,12 @@
                                      url("assets/[e-mail]"));
 }
 
+button.destructive-action:active {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@error_bg_color, 0.87)),
+                                     to (shade (@error_bg_color, 1.1)));
+}
+
 button:checked:disabled,
 button:active:disabled {
     background-image: -gtk-gradient (linear, left top, left bottom,
@@ -200,16 +245,6 @@
 }
 */
 
-button.destructive-action {
-    background-image: linear-gradient(to bottom, #e03d3d, #ef2929);
-    border-color: #8e0b0b;
-    border-image: none;
-    color: white;
-    -gtk-icon-shadow: 0 1px shade(#9d4242, 1.15);
-    outline-color: rgba(255, 255, 255, 0.3);
-    text-shadow: 0 1px shade(#9d4242, 1.15);
-}
-
 /******************
  * Linked Widgets *
  *****************/
@@ -2682,13 +2717,19 @@
     border-color: @osd_border_color;
 }
 
+.osd:backdrop {
+    border-color: lighter (@osd_border_color);
+}
+
 .osd.toolbar {
     padding: 12px;
     border-radius: 8px;
 }
 
 .osd button,
-.osd button:backdrop {
+.osd button:backdrop,
+.osd button.destructive-action,
+.osd button.destructive-action:backdrop {
     color: @osd_fg_color;
     background: none;
     border: none;
@@ -2708,8 +2749,19 @@
     border-image: none;
 }
 
+button.osd.destructive-action,
+button.osd.destructive-action:hover,
+button.osd.destructive-action:active {
+    color: @osd_fg_color;
+    background: @error_bg_color;
+    box-shadow: none;
+    border-image: none;
+}
+
 button.osd:hover,
-.osd button:hover {
+button.osd.destructive-action:hover,
+.osd button:hover,
+.osd button.destructive-action:hover {
     color: lighter(@osd_fg_color);
     -gtk-icon-shadow: 0 0 3px @osd_fg_color;
 }
@@ -2720,6 +2772,12 @@
     -gtk-icon-shadow: none;
 }
 
+button.osd.destructive-action:active,
+.osd button.destructive-action:active {
+    color: shade(@osd_fg_color, 0.9);
+    -gtk-icon-shadow: none;
+}
+
 /*************
  * overshoot *
  *************/