[gtk+] HC: Flat titlebuttons became non-flat in backdrop

[Daniel Boles <dboles src gnome org>]

commit 70fa5be9832271eb0f84a89b83903069b458f37f
Author: Daniel Boles <dboles src gnome org>
Date:   Fri Oct 6 02:15:59 2017 +0100

    HC: Flat titlebuttons became non-flat in backdrop
    
    When the window was backdropped, they suddenly regained their border.
    This was clearly not intentional or of any practical use to anyone.
    
    Shuffle around some selectors so that the backdrop ones do not override
    the flat ones and make the borders magically reappear when backdropped.
    
    Note that, whereas standard titlebuttons get the border on :hover, other
    .flat buttons in the headerbar do not. That should probably be fixed too
    
    https://bugzilla.gnome.org/show_bug.cgi?id=788580

 gtk/theme/HighContrast/_common.scss              |   53 +++++++++++-----------
 gtk/theme/HighContrast/gtk-contained-inverse.css |   24 +++++-----
 gtk/theme/HighContrast/gtk-contained.css         |   24 +++++-----
 3 files changed, 51 insertions(+), 50 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 00d7977..a1ed2c8 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -363,8 +363,32 @@ button {
 
     @include button(normal);
 
+    &:disabled {
+      @include button(insensitive);
+
+      &:active,
+      &:checked { @include button(insensitive-active); }
+    }
+
+    &:backdrop {
+      @include button(backdrop);
+
+      -gtk-icon-effect: none;
+
+      &:active,
+      &:checked { @include button(backdrop-active); }
+
+      &:disabled {
+        @include button(backdrop-insensitive);
+
+        &:active,
+        &:checked { @include button(backdrop-insensitive-active); }
+      }
+    }
+
     &.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
@@ -377,9 +401,9 @@ button {
 
         &:active { transition: $_button_transition; }
       }
-      
-      &:backdrop, 
-      &:disabled, 
+
+      &:backdrop,
+      &:disabled,
       &:backdrop:disabled {
         @include button(undecorated-insensitive);
       }
@@ -397,29 +421,6 @@ button {
       transition-duration: 50ms;
     }
 
-    &:backdrop {
-      @include button(backdrop);
-
-      -gtk-icon-filter: none;
-
-      &:active,
-      &:checked { @include button(backdrop-active); }
-
-      &:disabled {
-        @include button(backdrop-insensitive);
-
-        &:active,
-        &:checked { @include button(backdrop-insensitive-active); }
-      }
-    }
-
-    &:disabled {
-      @include button(insensitive);
-
-      &:active,
-      &:checked { @include button(insensitive-active); }
-    }
-
     &.image-button {
       min-width: 24px;
       padding-left: 4px;
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 5e6ac49..ddafbf9 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -158,29 +158,29 @@ spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { backgroun
 
 button.titlebutton, button { min-height: 24px; min-width: 16px; padding: 4px 8px; border: 1px solid; 
border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-width: 2px; 
border-style: solid; color: #fff; background-image: none; background-color: #000; border-color: gray; }
 
-button.sidebar-button, button.titlebutton, button.flat { border-width: 2px; border-style: solid; color: 
#fff; background-color: transparent; background-image: none; border-color: transparent; transition: none; }
+button.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; 
background-color: #070707; border-color: #494949; background-image: none; }
 
-button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { transition: all 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
+button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, 
button:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: #494949; 
background-image: none; background-color: #070707; }
 
-button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { transition: 
all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+button.titlebutton:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #fff; 
background-color: #000; border-color: #737373; background-image: none; -gtk-icon-effect: none; }
 
-button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, 
button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, 
button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: 
solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
+button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, 
button:backdrop:checked { border-width: 2px; border-style: solid; color: black; background-color: #737373; 
border-color: #737373; background-image: none; }
 
-button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #fff; 
background-color: #000; border-color: gray; background-image: none; -gtk-icon-filter: brightness(1.2); }
+button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; 
color: gray; background-color: #070707; border-color: #494949; background-image: none; }
 
-button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; 
border-style: solid; background-image: none; color: black; background-color: white; border-color: gray; 
transition-duration: 50ms; }
+button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, 
button:backdrop:disabled:active, button:backdrop:disabled:checked { border-width: 2px; border-style: solid; 
color: gray; border-color: #494949; background-image: none; background-color: #090909; }
 
-button.titlebutton:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #fff; 
background-color: #000; border-color: #737373; background-image: none; -gtk-icon-filter: none; }
+button.sidebar-button, button.titlebutton, button.flat { border-width: 2px; border-style: solid; color: 
#fff; background-color: transparent; background-image: none; border-color: transparent; transition: none; }
 
-button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, 
button:backdrop:checked { border-width: 2px; border-style: solid; color: black; background-color: #737373; 
border-color: #737373; background-image: none; }
+button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { transition: all 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
 
-button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; 
color: gray; background-color: #070707; border-color: #494949; background-image: none; }
+button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { transition: 
all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
-button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, 
button:backdrop:disabled:active, button:backdrop:disabled:checked { border-width: 2px; border-style: solid; 
color: gray; border-color: #494949; background-image: none; background-color: #090909; }
+button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, 
button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, 
button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: 
solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
 
-button.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; 
background-color: #070707; border-color: #494949; background-image: none; }
+button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #fff; 
background-color: #000; border-color: gray; background-image: none; -gtk-icon-filter: brightness(1.2); }
 
-button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, 
button:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: #494949; 
background-image: none; background-color: #070707; }
+button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; 
border-style: solid; background-image: none; color: black; background-color: white; border-color: gray; 
transition-duration: 50ms; }
 
 button.image-button.titlebutton, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 
4px; }
 
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index b27d057..4991ca9 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -158,29 +158,29 @@ spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { backgroun
 
 button.titlebutton, button { min-height: 24px; min-width: 16px; padding: 4px 8px; border: 1px solid; 
border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-width: 2px; 
border-style: solid; color: #000; background-image: none; background-color: #fff; border-color: gray; }
 
-button.sidebar-button, button.titlebutton, button.flat { border-width: 2px; border-style: solid; color: 
#000; background-color: transparent; background-image: none; border-color: transparent; transition: none; }
+button.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; 
background-color: white; border-color: silver; background-image: none; }
 
-button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { transition: all 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
+button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, 
button:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: silver; 
background-image: none; background-color: white; }
 
-button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { transition: 
all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+button.titlebutton:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #000; 
background-color: #fff; border-color: #8d8d8d; background-image: none; -gtk-icon-effect: none; }
 
-button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, 
button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, 
button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: 
solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
+button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, 
button:backdrop:checked { border-width: 2px; border-style: solid; color: white; background-color: #8d8d8d; 
border-color: #8d8d8d; background-image: none; }
 
-button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #000; 
background-color: #fff; border-color: gray; background-image: none; -gtk-icon-filter: brightness(1.2); }
+button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; 
color: gray; background-color: white; border-color: silver; background-image: none; }
 
-button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; 
border-style: solid; background-image: none; color: white; background-color: black; border-color: gray; 
transition-duration: 50ms; }
+button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, 
button:backdrop:disabled:active, button:backdrop:disabled:checked { border-width: 2px; border-style: solid; 
color: gray; border-color: silver; background-image: none; background-color: #f6f6f6; }
 
-button.titlebutton:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #000; 
background-color: #fff; border-color: #8d8d8d; background-image: none; -gtk-icon-filter: none; }
+button.sidebar-button, button.titlebutton, button.flat { border-width: 2px; border-style: solid; color: 
#000; background-color: transparent; background-image: none; border-color: transparent; transition: none; }
 
-button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop:active, 
button:backdrop:checked { border-width: 2px; border-style: solid; color: white; background-color: #8d8d8d; 
border-color: #8d8d8d; background-image: none; }
+button.sidebar-button:hover, button.titlebutton:hover, button.flat:hover { transition: all 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
 
-button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; 
color: gray; background-color: white; border-color: silver; background-image: none; }
+button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat:hover:active { transition: 
all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
-button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, 
button:backdrop:disabled:active, button:backdrop:disabled:checked { border-width: 2px; border-style: solid; 
color: gray; border-color: silver; background-image: none; background-color: #f6f6f6; }
+button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, 
button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, 
button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: 
solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
 
-button.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; 
background-color: white; border-color: silver; background-image: none; }
+button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #000; 
background-color: #fff; border-color: gray; background-image: none; -gtk-icon-filter: brightness(1.2); }
 
-button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, 
button:disabled:checked { border-width: 2px; border-style: solid; color: gray; border-color: silver; 
background-image: none; background-color: white; }
+button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; 
border-style: solid; background-image: none; color: white; background-color: black; border-color: gray; 
transition-duration: 50ms; }
 
 button.image-button.titlebutton, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 
4px; }