AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Blue outlines / focus rings

Browse Source 
- introduce two new colors: $focus_border_color for focused / outlined elements and $_coloured_focus_border_color for focused / outlined elements with a colored background color, like suggested/destructive buttons or selected elements
- set outline / focus color, offset and style accordingly for all widgets
- adapt entry focus color
This commit is contained in:
Frederik F 2020-04-08 21:12:57 +00:00 committed by Jakub Steiner
parent d2bdf3d5a1
commit abe6876f7c
3 changed files with 86 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gtk/theme/Adwaita/_colors.scss
View File

@ -76,3 +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: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3));
$alt_focus_border_color: transparentize(white, 0.5);

119
gtk/theme/Adwaita/_common.scss
View File

@ -11,32 +11,6 @@ $menu_radius: 5px;
$window_radius: $button_radius + 3;
$popover_radius: $button_radius + 4;
button:focus(visible),
checkbutton:focus(visible),
radiobutton:focus(visible),
switch:focus(visible),
label:focus(visible),
row:focus(visible),
flowboxchild:focus(visible) {
// We use the outline properties to signal the focus properties
// to the adwaita engine: using real CSS properties is faster,
// and we don't use any outlines for now.
outline-color: gtkalpha(currentColor, 0.3);
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
}
// Widgets that draw their focus indicator outset and not inset
scale:focus(visible) > trough {
outline-color: gtkalpha(currentColor, 0.3);
outline-style: dashed;
outline-offset: 2px;
outline-width: 1px;
}
/***************
* Base States *
***************/
@ -64,6 +38,86 @@ dnd {
-gtk-icon-size: 32px;
}
/*********
* Outlines *
********/
label:focus(visible),
row:focus(visible),
flowboxchild:focus(visible) {
// We use the outline properties to signal the focus properties
// to the adwaita engine: using real CSS properties is faster,
// and we don't use any outlines for now.
outline-color: $focus_border_color;
outline-style: solid;
outline-offset: -1px;
outline-width: 2px;
:selected & { outline-color: $alt_focus_border_color; }
}
// Widgets that draw their focus indicator outset and not inset
scale:focus(visible) > trough {
outline-color: $focus_border_color;
outline-style: solid;
outline-offset: 10px;
outline-width: 2px;
}
button:focus(visible), modelbutton:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
outline-offset: -2px;
outline-width: 2px;
row:selected & { outline-color: $alt_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
switch:focus(visible) {
&, &:hover { slider { outline-color: transparent; } }
&:focus {
box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $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-width: 2px;
row:selected & , treeview:selected & { outline-color: $alt_focus_border_color; }
}
row:focus(visible) {
outline-color: $focus_border_color;
outline-offset: -2px;
outline-style: solid;
&:selected {
outline-color: $alt_focus_border_color;
}
}
treeview:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
outline-width: 2px;
&:selected {
outline-color: $alt_focus_border_color;
}
}
notebook:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
outline-offset: -1px;
outline-width: 2px;
}
/*
These wildcard seems unavoidable, need to investigate.
Wildcards are bad and troublesome, use them with care,
@ -149,8 +203,6 @@ flowbox {
&:selected {
@extend %selected_items;
outline-offset: -2px;
}
}
}
@ -786,8 +838,6 @@ button {
// child, a label needs just lateral padding while an icon needs vertical
// padding added too.
outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
> label {
padding-left: 6px; // label padding
padding-right: 6px; //
@ -928,7 +978,6 @@ modelbutton.flat {
padding-left: 5px;
padding-right: 5px;
border-radius: $button_radius;
outline-offset: -2px;
@extend %undecorated_button;
@ -2018,8 +2067,6 @@ notebook {
min-width: 30px;
padding: 3px 12px;
outline-offset: -5px;
color: $insensitive_fg_color;
font-weight: bold;
@ -2243,7 +2290,6 @@ treeview ~ scrollbar.vertical {
switch {
font-weight: bold;
font-size: smaller;
outline-offset: -4px;
// similar to the .scale
border: 1px solid $borders_color;
@ -2382,7 +2428,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;
}
@ -2628,8 +2673,6 @@ scale {
// the backing bit
> trough {
@extend %scale_trough;
outline-offset: 2px;
}
// the colored part of the backing bit
@ -4286,8 +4329,6 @@ button.emoji-section {
box-shadow: none;
text-shadow: none;
outline-offset: -5px;
&:dir(ltr):not(:last-child) { margin-right: 0; }
&:dir(rtl):not(:last-child) { margin-left: 0; }

17
gtk/theme/Adwaita/_drawing.scss
View File

@ -22,14 +22,13 @@
}
// entries
@function entry_focus_border($fc:$selected_bg_color) {
@if $variant == 'light' { @return $fc; }
@else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); }
@function entry_focus_border($fc:$focus_border_color) {
@return $fc;
}
@function entry_focus_shadow($fc:$selected_bg_color) { @return inset 0 0 0 1px $fc; }
@function entry_focus_shadow($fc:$focus_border_color) { @return inset 0 0 0 1px $fc; }
@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
@mixin entry($t, $fc:$focus_border_color, $edge: none) {
//
// Entries drawing function
//
@ -198,7 +197,6 @@
// normal button
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c), $borders_color);
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
$button_fill: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
@ -213,7 +211,6 @@
// hovered button
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c), $borders_color);
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
@if $variant == 'light' {
@ -234,7 +231,6 @@
// normal button alternative look
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
@include _button_text_shadow($tc, $c);
@if $variant == 'light' {
@ -254,7 +250,6 @@
// hovered button alternative look
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
@if $variant == 'light' {
$button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
@ -274,7 +269,6 @@
// pushed button
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c), $borders_color);
$button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global;
background-image: $button_fill;
@ -396,7 +390,6 @@
box-shadow: inset 0 1px transparentize(white, 0.9);
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: transparentize($osd_fg_color, 0.7);
}
@else if $t==osd-hover {
@ -414,7 +407,6 @@
box-shadow: inset 0 1px transparentize(white, 0.9);
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: transparentize($osd_fg_color, 0.7);
}
@else if $t==osd-active {
@ -432,7 +424,6 @@
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: transparentize($osd_fg_color, 0.7);
}
@else if $t==osd-insensitive {