[libadwaita/wip/exalm/osd] stylesheet: .osd refinements
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/osd] stylesheet: .osd refinements
- Date: Thu, 2 Dec 2021 10:45:53 +0000 (UTC)
commit a769cf3cf66db327aa7abefb64ce7a71a706c7fc
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Wed Dec 1 19:54:39 2021 +0500
stylesheet: .osd refinements
Make checks, links, switches, progress bars, scales and level bars use
white accent instead, also change their focus rings.
Since focus rings are also used on button.card, make a proper .osd card
style as well.
Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/245
src/stylesheet/_colors.scss | 5 +++++
src/stylesheet/widgets/_buttons.scss | 14 +++++++++++++-
src/stylesheet/widgets/_checks.scss | 12 ++++++++++++
src/stylesheet/widgets/_entries.scss | 8 ++++++++
src/stylesheet/widgets/_level-bar.scss | 6 ++++++
src/stylesheet/widgets/_links.scss | 25 ++++++++++++++++++++-----
src/stylesheet/widgets/_lists.scss | 12 ++++++++++++
src/stylesheet/widgets/_menus.scss | 7 +++++++
src/stylesheet/widgets/_misc.scss | 17 +++++++++++++++++
src/stylesheet/widgets/_progress-bar.scss | 4 ++++
src/stylesheet/widgets/_scale.scss | 11 +++++++++++
src/stylesheet/widgets/_switch.scss | 11 +++++++++++
src/stylesheet/widgets/_toolbars.scss | 6 ++++++
13 files changed, 132 insertions(+), 6 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 6ff2eb86..4f6ac10b 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -68,6 +68,11 @@ $slider_hover_color: white;
$osd_fg_color: transparentize(white, .1);
$osd_text_color: white;
$osd_bg_color: transparentize(black, 0.3);
+$osd_fill_bg_color: transparentize(white, .25);
+$osd_fill_fg_color: transparentize(black, .25);
+$osd_focus_color: transparentize(white, .5);
+$osd_link_color: gtkmix($accent_bg_color, $osd_text_color, 50%);
+$osd_link_visited_color: gtkmix($accent_bg_color, $osd_text_color, 75%);
$tooltip_border_color: transparentize(white, 0.9);
$shadow_color: transparentize(black, 0.9);
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index abb3fa33..7e7b70ff 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -19,6 +19,10 @@ button {
@include focus-ring();
transition: $button_transition;
+ .osd &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
+
@at-root %button_basic_raised, & {
background-color: $button_color;
@@ -107,7 +111,7 @@ button {
&.osd {
min-width: 32px;
min-height: 32px;
- @include focus-ring($outer: true, $offset: 1px);
+ @include focus-ring($outer: true, $offset: 1px, $fc: $osd_focus_color);
transition: $button_transition;
color: $osd_fg_color;
@@ -153,6 +157,10 @@ button {
@include focus-ring($outer: true, $offset: 1px);
transition: $button_transition;
+ .osd &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
+
&:hover {
background-image: image(gtkalpha(currentColor, .1));
}
@@ -209,6 +217,10 @@ button {
@include focus-ring();
transition: $button_transition;
+ .osd &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
+
box-shadow: none;
@if $contrast == 'high' {
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 1389fa8e..b870d54d 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -5,6 +5,10 @@ checkbutton {
@include focus-ring();
+ .osd &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
+
&.text-button {
// this is for a nice focus on check and radios text
padding: 4px;
@@ -47,6 +51,14 @@ radio {
&:disabled {
filter: opacity($disabled_opacity);
}
+
+ .osd & {
+ &:checked,
+ &:indeterminate {
+ background-color: $osd_fill_bg_color;
+ color: $osd_fill_fg_color;
+ }
+ }
}
check {
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index 12c56a12..a58acb2f 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -17,6 +17,10 @@ entry {
@include focus-ring($focus-state: ':focus-within');
+ .osd &:focus-within {
+ outline-color: $osd_focus_color;
+ }
+
> text {
> placeholder {
@extend .dim-label;
@@ -102,6 +106,10 @@ entry {
box-shadow: none;
}
}
+
+ .osd & > progress > trough > progress {
+ border-color: $osd_fill_bg_color;
+ }
}
treeview entry {
diff --git a/src/stylesheet/widgets/_level-bar.scss b/src/stylesheet/widgets/_level-bar.scss
index e3513834..27795a15 100644
--- a/src/stylesheet/widgets/_level-bar.scss
+++ b/src/stylesheet/widgets/_level-bar.scss
@@ -91,4 +91,10 @@ levelbar {
}
}
}
+
+ .osd & > trough > block {
+ &.high, &:not(.empty) {
+ background-color: $osd_fill_bg_color;
+ }
+ }
}
diff --git a/src/stylesheet/widgets/_links.scss b/src/stylesheet/widgets/_links.scss
index a3a5fba6..254a40ed 100644
--- a/src/stylesheet/widgets/_links.scss
+++ b/src/stylesheet/widgets/_links.scss
@@ -1,14 +1,15 @@
-%link,
-link {
+link,
+button.link {
color: $link_color;
text-decoration: underline;
+ font-weight: inherit;
&:visited {
color: $link_visited_color;
}
&:hover {
- color: gtkshade($link_color, 1.1);
+ color: gtkshade(currentColor, 1.1);
}
&:active {
@@ -16,15 +17,29 @@ link {
}
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
+
+ .osd & {
+ color: $osd_link_color;
+
+ &:visited {
+ color: $osd_link_visited_color;
+ }
+
+ &:active {
+ color: $osd_link_color;
+ }
+ }
}
link {
@include focus-ring();
+
+ .osd &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
}
button.link {
- @extend %link;
-
&,
&:hover,
&:active,
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index e32ce14b..56ecf3e4 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -27,6 +27,10 @@ list {
row {
@include focus-ring();
+ .osd &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
+
background-clip: padding-box;
&.activatable {
@@ -138,6 +142,10 @@ row.combo {
%boxed_list_row {
@include focus-ring($offset: -1px);
+ .osd &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
+
transition: 200ms $ease-out-quad;
border-bottom: 1px solid $border_color;
@@ -203,6 +211,10 @@ row.expander {
color: $accent_color;
}
+ .osd &:checked image.expander-row-arrow:not(:disabled) {
+ color: inherit;
+ }
+
image.expander-row-arrow:disabled {
filter: opacity($disabled_opacity);
}
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 2f1aabc0..c15734e6 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -88,6 +88,13 @@ popover.menu {
}
}
+ .osd & {
+ check, radio {
+ background: none;
+ color: inherit;
+ }
+ }
+
check {
&:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-small-symbolic.symbolic.png")),
-gtk-recolor(url("assets/check-small 2-symbolic symbolic
png"))); }
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index fee78f83..ed88a3ef 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -154,10 +154,27 @@ statuspage {
box-shadow: 0 0 0 1px if($contrast == 'high', $border_color, transparentize(black, 0.97)),
0 1px 3px 1px transparentize(black, .93),
0 2px 6px 2px transparentize(black, .97);
+
+ .osd &, &.osd {
+ background-color: gtkalpha(currentColor, .1);
+ color: inherit;
+
+ @if $contrast == 'high' {
+ box-shadow: 0 0 0 1px $border_color;
+ } @else {
+ box-shadow: none;
+ }
+ }
}
@include focus-ring($offset: -1px);
+ .osd &, &.osd {
+ &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
+ }
+
&.activatable {
transition: $button_transition;
diff --git a/src/stylesheet/widgets/_progress-bar.scss b/src/stylesheet/widgets/_progress-bar.scss
index 1f4a6139..6c345091 100644
--- a/src/stylesheet/widgets/_progress-bar.scss
+++ b/src/stylesheet/widgets/_progress-bar.scss
@@ -84,4 +84,8 @@ progressbar {
}
> trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
+
+ .osd & > trough > progress {
+ background-color: $osd_fill_bg_color;
+ }
}
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 3f1d7286..6c21a55f 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -67,6 +67,17 @@ scale {
}
}
+ .osd & {
+ &:focus:focus-visible > trough {
+ outline-color: $osd_focus_color;
+ }
+
+ > trough > highlight {
+ background-color: $osd_fill_bg_color;
+ color: $osd_fill_fg_color;
+ }
+ }
+
&:disabled {
filter: opacity($disabled_opacity);
diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss
index b274a0ff..3d585352 100644
--- a/src/stylesheet/widgets/_switch.scss
+++ b/src/stylesheet/widgets/_switch.scss
@@ -55,4 +55,15 @@ switch {
> image { color: inherit; }
}
}
+
+ .osd & {
+ &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
+
+ &:checked {
+ background-color: transparentize($osd_fill_bg_color, .15);
+ color: $osd_fill_fg_color;
+ }
+ }
}
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 8e081334..32d5eb18 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -7,6 +7,12 @@
}
}
+ &.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+ &:focus:focus-visible {
+ outline-color: $osd_focus_color;
+ }
+ }
+
menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&.image-button > button {
@extend %button_basic_flat;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]