Adwaita: avoid border clash on transitioning adiacent flat buttons

Flat buttons gets the button decoration on hover, while transitioning
the decorations of adiacent flat buttons are both shown (one fading in
and the other fading out) so the borders clashes, since normally there's
no spacing between them, to avoid it the transition on the normal state
is set to none and added back to the hover state, so the decoration
won't fade out. To make the transition more evident the duration is
increased.

gtk/resources/theme/Adwaita/_common.scss

@@ -428,12 +428,27 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 
 
 .button {
+
+  $_button_transition: all 200ms ease-out;
+
   border: 1px solid;
   border-radius: 3px;
-  transition: all 200ms ease-out;
   padding: 5px 8px 6px;
+  transition: $_button_transition;
   @include button(normal);
-  &.flat { @include button(undecorated); }
+  &.flat {
+    @include button(undecorated);
+    // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
+    // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
+    // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
+    // in this case the duration is increased.
+    transition: none;
+    &:hover {
+      transition: $_button_transition;
+      transition-duration: 500ms;
+      &:active { transition: $_button_transition; }
+    }
+  }
   &:hover {
     @include button(hover);
     -gtk-image-effect: highlight;

gtk/resources/theme/Adwaita/gtk-contained-dark.css

@@ -390,8 +390,8 @@ GtkTextView {
 GtkCalendar.header .button.titlebutton {
   border: 1px solid;
   border-radius: 3px;
-  transition: all 200ms ease-out;
   padding: 5px 8px 6px;
+  transition: all 200ms ease-out;
   color: #eeeeec;
   outline-color: rgba(238, 238, 236, 0.3);
   border-color: #1c1f1f;
@@ -407,7 +407,17 @@ GtkCalendar.header .button.titlebutton {
     background-image: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
     text-shadow: none;
-    icon-shadow: none; }
+    icon-shadow: none;
+    transition: none; }
+    .button.flat:hover, .header-bar .titlebutton.button:hover,
+    .titlebar .titlebutton.button:hover,
+    GtkCalendar.header .titlebutton.button:hover {
+      transition: all 200ms ease-out;
+      transition-duration: 500ms; }
+      .button.flat:hover:active, .header-bar .titlebutton.button:hover:active,
+      .titlebar .titlebutton.button:hover:active,
+      GtkCalendar.header .titlebutton.button:hover:active {
+        transition: all 200ms ease-out; }
   .button:hover, .header-bar .button.titlebutton:hover,
   .titlebar .button.titlebutton:hover,
   GtkCalendar.header .button.titlebutton:hover {
@@ -1892,13 +1902,13 @@ GtkTreeView.view {
   -GtkTreeView-tree-line-width: 1;
   -GtkTreeView-tree-line-pattern: '';
   -GtkTreeView-expander-size: 16;
-  border-left-color: rgba(238, 238, 236, 0.5);
+  border-left-color: #292929;
   border-top-color: #393f3f; }
   GtkTreeView.view:selected, GtkTreeView.view:backdrop:selected {
-    border-left-color: rgba(255, 255, 255, 0.5);
+    border-left-color: #225d9c;
     border-top-color: rgba(238, 238, 236, 0.1); }
   GtkTreeView.view:backdrop {
-    border-left-color: rgba(201, 203, 201, 0.5);
+    border-left-color: #393f3f;
     border-top: #393f3f; }
   GtkTreeView.view.expander {
     -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");

gtk/resources/theme/Adwaita/gtk-contained.css

@@ -382,8 +382,8 @@ GtkTextView {
 GtkCalendar.header .button.titlebutton {
   border: 1px solid;
   border-radius: 3px;
-  transition: all 200ms ease-out;
   padding: 5px 8px 6px;
+  transition: all 200ms ease-out;
   color: #2e3436;
   outline-color: rgba(46, 52, 54, 0.3);
   border-color: #a1a1a1;
@@ -399,7 +399,17 @@ GtkCalendar.header .button.titlebutton {
     background-image: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
-    icon-shadow: none; }
+    icon-shadow: none;
+    transition: none; }
+    .button.flat:hover, .header-bar .titlebutton.button:hover,
+    .titlebar .titlebutton.button:hover,
+    GtkCalendar.header .titlebutton.button:hover {
+      transition: all 200ms ease-out;
+      transition-duration: 500ms; }
+      .button.flat:hover:active, .header-bar .titlebutton.button:hover:active,
+      .titlebar .titlebutton.button:hover:active,
+      GtkCalendar.header .titlebutton.button:hover:active {
+        transition: all 200ms ease-out; }
   .button:hover, .header-bar .button.titlebutton:hover,
   .titlebar .button.titlebutton:hover,
   GtkCalendar.header .button.titlebutton:hover {
@@ -1884,13 +1894,13 @@ GtkTreeView.view {
   -GtkTreeView-tree-line-width: 1;
   -GtkTreeView-tree-line-pattern: '';
   -GtkTreeView-expander-size: 16;
-  border-left-color: rgba(46, 52, 54, 0.5);
+  border-left-color: #fdfdfd;
   border-top-color: #ededed; }
   GtkTreeView.view:selected, GtkTreeView.view:backdrop:selected {
-    border-left-color: rgba(255, 255, 255, 0.5);
+    border-left-color: #4a90d9;
     border-top-color: rgba(46, 52, 54, 0.1); }
   GtkTreeView.view:backdrop {
-    border-left-color: rgba(84, 89, 90, 0.5);
+    border-left-color: #ececec;
     border-top: #ededed; }
   GtkTreeView.view.expander {
     -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");