diff options
| author | Daniel Boles <dboles@src.gnome.org> | 2017-09-16 17:02:24 +0100 |
|---|---|---|
| committer | Daniel Boles <dboles@src.gnome.org> | 2017-09-16 17:02:48 +0100 |
| commit | f714500b8de913669da006e8b933a2ffe4e483e6 (patch) | |
| tree | ba08c50168105c43fd3fae188c46c4a47e9a3d51 /gtk/theme | |
| parent | 7c809cfb73a91377f9b9e1909cb3c9c31298a4b0 (diff) | |
| download | gtk+-f714500b8de913669da006e8b933a2ffe4e483e6.tar.gz | |
Adwaita: Fix color of focus outline on colorswatch
The focus outline disappeared as the colour of the swatch got close to
the normal focus outline colour, which is alpha(currentColor, 0.3).
Fix by making the outline an alpha’d version of the tick colour, but
more opaque than normal outlines. 0.6 seems good enough; feel free to
improve it, but at least this ensures the outline can’t vanish anymore.
HighContrast achieves this already because it applies the color property
to the main node, not the overlay. Doing that means the outline is fully
opaque, which is fine for HC obviously but was excessive for Adwaita.
https://bugzilla.gnome.org/show_bug.cgi?id=787757
Diffstat (limited to 'gtk/theme')
| -rw-r--r-- | gtk/theme/Adwaita/_common.scss | 24 | ||||
| -rw-r--r-- | gtk/theme/Adwaita/gtk-contained-dark.css | 4 | ||||
| -rw-r--r-- | gtk/theme/Adwaita/gtk-contained.css | 4 |
3 files changed, 24 insertions, 8 deletions
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index d03dd99125..4901c1fe32 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -4079,20 +4079,28 @@ colorswatch { } } - &.dark overlay { - color: white; + &.dark { + outline-color: transparentize(white, 0.4); + + overlay { + color: white; - &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); } + &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); } - &:backdrop { color: transparentize(white, 0.5); } + &:backdrop { color: transparentize(white, 0.5); } + } } - &.light overlay { - color: black; + &.light { + outline-color: transparentize(black, 0.4); - &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); } + overlay { + color: black; + + &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); } - &:backdrop { color: transparentize(black, 0.5); } + &:backdrop { color: transparentize(black, 0.5); } + } } &:drop(active) { diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 6d582fa941..70db241a39 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -1760,12 +1760,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } +colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); } + colorswatch.dark overlay { color: white; } colorswatch.dark overlay:hover { border-color: #1b1f20; } colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); } +colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); } + colorswatch.light overlay { color: black; } colorswatch.light overlay:hover { border-color: #1b1f20; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 3584f3692f..1bed44af6e 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -1780,12 +1780,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } +colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); } + colorswatch.dark overlay { color: white; } colorswatch.dark overlay:hover { border-color: rgba(0, 0, 0, 0.8); } colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); } +colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); } + colorswatch.light overlay { color: black; } colorswatch.light overlay:hover { border-color: rgba(0, 0, 0, 0.5); } |