Merge lp:~3v1n0/ubuntu-themes/vertical-linked-buttons-tuning into lp:ubuntu-themes

[Marco Trevisan (Treviño)]

Ambiance,Radiance: fix vertical linked buttons borders, corners and backgrounds

 - Fix border image for buttons in the middle (see gtk widget factory for reference)
 - Use rotated background gradients
 - Use proper border sizes and borders
 - Add a separator between the elements (and remove the wrongly added horizontal one)

[Iain Lane (laney)]

let's see a before/after screenshot please?

looks good I think!

[Marco Trevisan (Treviño) (3v1n0)]

Here you are: https://imgur.com/a/rUlQL

[Iain Lane (laney)]

nice

review: Approve

=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2017-09-18 18:24:38 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2017-09-19 02:27:54 +0000
@@ -312,22 +312,103 @@
     box-shadow: none;
 }
 
-.linked.vertical button:first-child {
-    border-image-width: 10px 10px 0 10px;
-    border-width: 1px;
-    border-radius: 0;
-}
-
-.linked.vertical button:only-child {
-    border-image-width: 10px;
-    border-width: 1px;
-    border-radius: 0;
-}
-
-.linked.vertical button:last-child {
-    border-image-width: 0 10px 10px 10px;
-    border-width: 1px;
-    border-radius: 0;
+.linked.vertical button:backdrop:not(:only-child),
+.linked.vertical button.destructive-action:backdrop:not(:only-child),
+.linked.vertical button:disabled:not(:only-child),
+.linked.vertical button.destructive-action:disabled:not(:only-child)
+{
+    background-image: inherit;
+}
+
+.linked.vertical button:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@button_bg_color, 1.08)),
+                                     color-stop (0.5, @button_bg_color),
+                                     to (shade (@button_bg_color, 0.94)));
+}
+
+.linked.vertical button.destructive-action:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@error_bg_color, 1.1)),
+                                     color-stop (0.5, @error_bg_color),
+                                     to (shade (@error_bg_color, 0.95)));
+}
+
+.linked.vertical button:hover:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@button_bg_color, 1.12)),
+                                     color-stop (0.5, @button_bg_color),
+                                     to (shade (@button_bg_color, 0.96)));
+}
+
+.linked.vertical button.destructive-action:hover:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@error_bg_color, 1.12)),
+                                     color-stop (0.5, @error_bg_color),
+                                     to (shade (@error_bg_color, 0.96)));
+}
+
+.linked.vertical button:checked:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (#cecece),
+                                     to (#e8e8e8));
+}
+
+.linked.vertical button.destructive-action:checked:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@error_bg_color, 0.80)),
+                                     to (shade (@error_bg_color, 1.2)));
+}
+
+.linked.vertical button:active:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (#dcdcdc),
+                                     to (#f3f3f3));
+}
+
+.linked.vertical button.destructive-action:active:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@error_bg_color, 0.87)),
+                                     to (shade (@error_bg_color, 1.1)));
+}
+
+.linked.vertical button:checked:disabled:not(:only-child),
+.linked.vertical button:active:disabled:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (#e3e3e3),
+                                     to (#f3f3f3));
+}
+
+.linked.vertical button:checked:disabled:backdrop:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (mix (#e3e3e3, @bg_color, 0.5)),
+                                     to (mix (#f3f3f3, @bg_color, 0.5)));
+}
+
+.linked.vertical button {
+    box-shadow: none;
+}
+
+.linked.vertical button:not(:last-child) {
+    box-shadow: inset 0 -1px 0 0 shade (@bg_color, 0.84);
+}
+
+.linked.vertical button:first-child:not(:last-child) {
+    border-width: 1px 1px 0 1px;
+    border-radius: 8px 8px 0 0;
+    border-image-width: 10px 12px 0 12px;
+}
+
+.linked.vertical button:not(:first-child):not(:last-child) {
+    border-radius: 0;
+    border-width: 0 1px 0 1px;
+    border-image-width: 0 12px 0 12px;
+}
+
+.linked.vertical button:last-child:not(:first-child) {
+    border-radius: 0 0 8px 8px;
+    border-width: 0 1px 1px 1px;
+    border-image-width: 0 12px 10px 12px;
 }
 
 *:link,

=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2017-09-18 18:24:38 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2017-09-19 02:27:54 +0000
@@ -311,22 +311,103 @@
     box-shadow: none;
 }
 
-.linked.vertical button:first-child {
-    border-image-width: 10px 10px 0 10px;
-    border-width: 1px;
-    border-radius: 0;
-}
-
-.linked.vertical button:only-child {
-    border-image-width: 10px;
-    border-width: 1px;
-    border-radius: 0;
-}
-
-.linked.vertical button:last-child {
-    border-image-width: 0 10px 10px 10px;
-    border-width: 1px;
-    border-radius: 0;
+.linked.vertical button:backdrop:not(:only-child),
+.linked.vertical button.destructive-action:backdrop:not(:only-child),
+.linked.vertical button:disabled:not(:only-child),
+.linked.vertical button.destructive-action:disabled:not(:only-child)
+{
+    background-image: inherit;
+}
+
+.linked.vertical button:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@button_bg_color, 1.08)),
+                                     color-stop (0.5, @button_bg_color),
+                                     to (shade (@button_bg_color, 0.94)));
+}
+
+.linked.vertical button.destructive-action:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@error_bg_color, 1.1)),
+                                     color-stop (0.5, @error_bg_color),
+                                     to (shade (@error_bg_color, 0.95)));
+}
+
+.linked.vertical button:hover:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@button_bg_color, 1.12)),
+                                     color-stop (0.5, @button_bg_color),
+                                     to (shade (@button_bg_color, 0.96)));
+}
+
+.linked.vertical button.destructive-action:hover:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@error_bg_color, 1.12)),
+                                     color-stop (0.5, @error_bg_color),
+                                     to (shade (@error_bg_color, 0.96)));
+}
+
+.linked.vertical button:checked:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (#cecece),
+                                     to (#e8e8e8));
+}
+
+.linked.vertical button.destructive-action:checked:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@error_bg_color, 0.80)),
+                                     to (shade (@error_bg_color, 1.2)));
+}
+
+.linked.vertical button:active:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (#dcdcdc),
+                                     to (#f3f3f3));
+}
+
+.linked.vertical button.destructive-action:active:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (shade (@error_bg_color, 0.87)),
+                                     to (shade (@error_bg_color, 1.1)));
+}
+
+.linked.vertical button:checked:disabled:not(:only-child),
+.linked.vertical button:active:disabled:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (#e3e3e3),
+                                     to (#f3f3f3));
+}
+
+.linked.vertical button:checked:disabled:backdrop:not(:only-child) {
+    background-image: -gtk-gradient (linear, left top, right top,
+                                     from (mix (#e3e3e3, @bg_color, 0.5)),
+                                     to (mix (#f3f3f3, @bg_color, 0.5)));
+}
+
+.linked.vertical button {
+    box-shadow: none;
+}
+
+.linked.vertical button:not(:last-child) {
+    box-shadow: inset 0 -1px 0 0 shade (@bg_color, 0.84);
+}
+
+.linked.vertical button:first-child:not(:last-child) {
+    border-width: 1px 1px 0 1px;
+    border-radius: 8px 8px 0 0;
+    border-image-width: 10px 12px 0 12px;
+}
+
+.linked.vertical button:not(:first-child):not(:last-child) {
+    border-radius: 0;
+    border-width: 0 1px 0 1px;
+    border-image-width: 0 12px 0 12px;
+}
+
+.linked.vertical button:last-child:not(:first-child) {
+    border-radius: 0 0 8px 8px;
+    border-width: 0 1px 1px 1px;
+    border-image-width: 0 12px 10px 12px;
 }
 
 *:link,