[gtk+] HC: Flat titlebuttons became non-flat in backdrop
- From: Daniel Boles <dboles src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] HC: Flat titlebuttons became non-flat in backdrop
- Date: Fri, 6 Oct 2017 01:42:38 +0000 (UTC)
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; }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]