From 1e961001afbf0dd46b10d85f74736c8b7e5ae9a3 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Thu, 16 Oct 2014 12:46:58 +0200 Subject: [PATCH] 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 | 19 ++++++++++++++++-- .../theme/Adwaita/gtk-contained-dark.css | 20 ++++++++++++++----- gtk/resources/theme/Adwaita/gtk-contained.css | 20 ++++++++++++++----- 3 files changed, 47 insertions(+), 12 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index 34b69a53ae..361f00ab21 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/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; diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index 707f8a0321..53d1d4780c 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/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"); diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index 1d73d9076d..77defbeea4 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/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");