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

[Daniel Boles <dboles src gnome org>]

commit 61137ae163c673f6dda853c0a1cd905069b8bc1c
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 7c048a7..caeb73a 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -375,8 +375,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
@@ -389,9 +413,9 @@ button {
 
         &:active { transition: $_button_transition; }
       }
-      
-      &:backdrop, 
-      &:disabled, 
+
+      &:backdrop,
+      &:disabled,
       &:backdrop:disabled {
         @include button(undecorated-insensitive);
       }
@@ -409,29 +433,6 @@ button {
       transition-duration: 50ms;
     }
 
-    &: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); }
-      }
-    }
-
-    &: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 018658f..1e58466 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -158,17 +158,9 @@ 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.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.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.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:hover, button:hover { border-width: 2px; border-style: solid; color: #fff; 
background-color: #000; border-color: gray; background-image: none; -gtk-icon-effect: highlight; }
+button.titlebutton:disabled, button: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: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:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #fff; 
background-color: #000; border-color: #737373; background-image: none; -gtk-icon-effect: none; }
 
@@ -178,9 +170,17 @@ button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2
 
 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:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; 
background-color: #070707; border-color: #494949; background-image: 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: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, button.titlebutton:hover, button.flat:hover { transition: all 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
+
+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.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:hover, button:hover { border-width: 2px; border-style: solid; color: #fff; 
background-color: #000; border-color: gray; background-image: none; -gtk-icon-effect: highlight; }
+
+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 79216f5..a2d5fff 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -158,17 +158,9 @@ 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.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.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.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:hover, button:hover { border-width: 2px; border-style: solid; color: #000; 
background-color: #fff; border-color: gray; background-image: none; -gtk-icon-effect: highlight; }
+button.titlebutton:disabled, button: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: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:backdrop, button:backdrop { border-width: 2px; border-style: solid; color: #000; 
background-color: #fff; border-color: #8d8d8d; background-image: none; -gtk-icon-effect: none; }
 
@@ -178,9 +170,17 @@ button.titlebutton:backdrop:disabled, button:backdrop:disabled { border-width: 2
 
 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:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; 
background-color: white; border-color: silver; background-image: 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: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, button.titlebutton:hover, button.flat:hover { transition: all 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; }
+
+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.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:hover, button:hover { border-width: 2px; border-style: solid; color: #000; 
background-color: #fff; border-color: gray; background-image: none; -gtk-icon-effect: highlight; }
+
+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; }