[gtk/wip/jimmac/gtk-Gtk4_blue_focus_rings: 2/2] Focus improvements
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk/wip/jimmac/gtk-Gtk4_blue_focus_rings: 2/2] Focus improvements
- Date: Wed, 8 Apr 2020 18:57:00 +0000 (UTC)
commit d4dd25891fb5bc81107474a8f4687affdda95d07
Author: frederik.feichtmeier <frederik feichtmeier gmail com>
Date: Wed Apr 8 20:26:14 2020 +0200
Focus improvements
- add tab and treeview
- change focus variables: use alt_ prefix instead of coloured_ and descend focus_border_color from
selected_bg_color
gtk/theme/Adwaita/_colors.scss | 4 ++--
gtk/theme/Adwaita/_common.scss | 31 ++++++++++++++++++++++---------
2 files changed, 24 insertions(+), 11 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 6ce87619a5..6c7f211ad1 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -76,5 +76,5 @@ $progress_border_color: $selected_borders_color;
$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
$checkradio_fg_color: $selected_fg_color;
$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%),
darken($checkradio_bg_color,40%));
-$focus_border_color: transparentize(#3584e4, 0.3);
-$coloured_focus_border_color: transparentize(white, 0.3);
+$focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5),
transparentize($selected_bg_color, 0.3));
+$alt_focus_border_color: transparentize(white, 0.5);
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 047c23b6e3..941ef6a707 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -53,7 +53,7 @@ flowboxchild:focus(visible) {
outline-style: solid;
outline-offset: -1px;
outline-width: 2px;
- :selected & { outline-color: $coloured_focus_border_color; }
+ :selected & { outline-color: $alt_focus_border_color; }
}
// Widgets that draw their focus indicator outset and not inset
@@ -70,9 +70,9 @@ button:focus(visible), modelbutton:focus(visible) {
outline-offset: -2px;
outline-width: 2px;
- row:selected & { outline-color: $coloured_focus_border_color; }
+ row:selected & { outline-color: $alt_focus_border_color; }
- &.suggested-action, &.destructive-action { &, &:hover, &:active { outline-color:
$coloured_focus_border_color; } }
+ &.suggested-action, &.destructive-action { &, &:hover, &:active { outline-color: $alt_focus_border_color;
} }
}
// Draw the "outline" around the whole switch not the slider
@@ -81,16 +81,17 @@ switch:focus(visible) {
&:focus {
box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%),
$focus_border_color);
}
- row:selected & { outline-color: $coloured_focus_border_color; }
+ row:selected & { outline-color: $alt_focus_border_color; }
}
checkbutton:focus(visible),
radiobutton:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
- outline-offset: 1px;
+ outline-offset: 3px;
outline-width: 2px;
- row:selected & , treeview:selected & { outline-color: $coloured_focus_border_color; }
+ border-radius: 3px;
+ row:selected & , treeview:selected & { outline-color: $alt_focus_border_color; }
}
row:focus(visible) {
@@ -98,15 +99,28 @@ row:focus(visible) {
outline-offset: -2px;
outline-style: solid;
&:selected {
- outline-color: $coloured_focus_border_color;
+ outline-color: $alt_focus_border_color;
}
}
treeview:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
+ outline-width: 2px;
&:selected {
- outline-color: $coloured_focus_border_color;
+ outline-color: $alt_focus_border_color;
+ }
+}
+
+notebook > header {
+ tabs {
+ &, &:hover, &:backdrop {
+ &, &.right, &.left, &.top, &.bottom {
+ tab:focus(visible), tab:checked:focus(visible) {
+ color: $focus_border_color;
+ }
+ }
+ }
}
}
@@ -2428,7 +2442,6 @@ switch {
checkbutton.text-button, radiobutton.text-button {
// this is for a nice focus on check and radios text
padding: 2px 0;
- outline-offset: 0;
border-spacing: 4px;
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]