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
This commit is contained in:
Daniel Boles
@ -375,38 +375,11 @@ button {
|
||||
|
||||
@include button(normal);
|
||||
|
||||
&.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;
|
||||
&:disabled {
|
||||
@include button(insensitive);
|
||||
|
||||
&:hover {
|
||||
transition: $_button_transition;
|
||||
transition-duration: 500ms;
|
||||
|
||||
&:active { transition: $_button_transition; }
|
||||
}
|
||||
|
||||
&:backdrop,
|
||||
&:disabled,
|
||||
&:backdrop:disabled {
|
||||
@include button(undecorated-insensitive);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include button(hover);
|
||||
-gtk-icon-effect: highlight;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:checked {
|
||||
@include button(active);
|
||||
|
||||
transition-duration: 50ms;
|
||||
&:active,
|
||||
&:checked { @include button(insensitive-active); }
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
@ -425,11 +398,39 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@include button(insensitive);
|
||||
&.flat {
|
||||
@include button(undecorated);
|
||||
|
||||
&:active,
|
||||
&:checked { @include button(insensitive-active); }
|
||||
// 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; }
|
||||
}
|
||||
|
||||
&:backdrop,
|
||||
&:disabled,
|
||||
&:backdrop:disabled {
|
||||
@include button(undecorated-insensitive);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include button(hover);
|
||||
-gtk-icon-effect: highlight;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:checked {
|
||||
@include button(active);
|
||||
|
||||
transition-duration: 50ms;
|
||||
}
|
||||
|
||||
&.image-button {
|
||||
|
||||
@ -158,6 +158,18 @@ 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.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: 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.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.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:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; }
|
||||
|
||||
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, 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; }
|
||||
@ -170,18 +182,6 @@ button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid;
|
||||
|
||||
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, button:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: #737373; background-image: none; -gtk-icon-effect: 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.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: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.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.image-button.titlebutton, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; }
|
||||
|
||||
button.text-button.titlebutton, button.text-button { padding-left: 16px; padding-right: 16px; }
|
||||
|
||||
@ -158,6 +158,18 @@ 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.titlebutton:disabled, button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: 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.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.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:backdrop:disabled, button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; }
|
||||
|
||||
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, 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; }
|
||||
@ -170,18 +182,6 @@ button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid;
|
||||
|
||||
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, button:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: #8d8d8d; background-image: none; -gtk-icon-effect: 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.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: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.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.image-button.titlebutton, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; }
|
||||
|
||||
button.text-button.titlebutton, button.text-button { padding-left: 16px; padding-right: 16px; }
|
||||
|
||||
Reference in New Issue
Block a user