callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HC: Add border/hilight when hovering flat buttons

Browse Source 
The border and icon highlight are useful feedback that was defeated by
CSS precedence. It worked for .titlebuttons due to their implementation,
but the same was not true for custom .flat buttons. This makes it so.

https://bugzilla.gnome.org/show_bug.cgi?id=788580
This commit is contained in:
Daniel Boles 2017-10-06 02:32:37 +01:00
parent 61137ae163
commit fa04eb26d7
3 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
gtk/theme/HighContrast/_common.scss
View File

@ -421,7 +421,8 @@ button {
} }
} }
&:hover { &:hover,
&.flat:hover {
@include button(hover); @include button(hover);
-gtk-icon-effect: highlight; -gtk-icon-effect: highlight;
} }

2
gtk/theme/HighContrast/gtk-contained-inverse.css
View File

@ -178,7 +178,7 @@ button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat
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.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:hover, button.sidebar-button:hover, button.titlebutton:hover, button:hover, button.flat: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.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; }

2
gtk/theme/HighContrast/gtk-contained.css
View File

@ -178,7 +178,7 @@ button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat
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.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:hover, button.sidebar-button:hover, button.titlebutton:hover, button:hover, button.flat: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.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; }