From 2081c88fe47d760fa20b3b47e2e7e59138b6ef4d Mon Sep 17 00:00:00 2001 From: Alexander Mikhaylenko Date: Thu, 20 May 2021 15:37:43 +0500 Subject: [PATCH 1/3] stylesheet: Update switch style Use a similar style to the new checks and radios. Keep the slider light even in dark variant for better visibility, but make it slightly darker when not checked or hovered. Unlike with checks, a border doesn't work well with HC here, so instead use the border color as a background and make the symbols always white. Change the trough colors on hover, since the whole switch is clickable and not just the slider. Add a slight drop shadow to the slider, drop it when insensitive. --- src/stylesheet/_colors.scss | 4 -- src/stylesheet/widgets/_switch.scss | 76 ++++++++++++++++++----------- 2 files changed, 47 insertions(+), 33 deletions(-) diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss index d06d69715..ba0d0c42b 100644 --- a/src/stylesheet/_colors.scss +++ b/src/stylesheet/_colors.scss @@ -57,8 +57,6 @@ $suggested_bg_color: $selected_bg_color; $suggested_border_color: $selected_borders_color; $progress_bg_color: $selected_bg_color; $progress_border_color: $selected_borders_color; -$switch_bg_color: $selected_bg_color; -$switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),darken($switch_bg_color,30%)); $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3)); $alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7)); $dim_label_opacity: 0.55; @@ -86,6 +84,4 @@ $dim_label_opacity: 0.55; $dim_label_opacity: 0.9; - $switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),lighten($switch_bg_color,15%)); - } diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss index 5aeb18412..bb52748e5 100644 --- a/src/stylesheet/widgets/_switch.scss +++ b/src/stylesheet/widgets/_switch.scss @@ -1,49 +1,67 @@ switch { - // similar to the .scale - border: 1px solid $borders_color; + // similar to GtkScale border-radius: 14px; - color: $fg_color; - background-color: $dark_fill; + padding: 2px; + transition: $focus_transition; - @include focus-ring($offset: 0, $outer: true); + @if $contrast == "high" { + background-color: $borders_color; + color: white; - headerbar & { background-color: darken($dark_fill,8%); } //3504 + &:hover { + background-color: mix($borders_color, $text_color, 90%); - &:checked { - color: $selected_fg_color; - border-color: $switch_borders_color; - background-color: $switch_bg_color; - } + &:active { background-color: mix($borders_color, black, 80%); } + } + } + @else { + background-color: transparentize($text_color, .85); + color: $fg_color; + + &:hover { + background-color: transparentize($text_color, .8); + + &:active { background-color: transparentize(black, .75); } + } + + > image { color: transparent; } + } + + @include focus-ring($offset: 0, $outer: true); &:disabled { - color: $insensitive_fg_color; - border-color: $borders_color; - background-color: $insensitive_bg_color; + filter: opacity(0.5); } > slider { - @include button(normal); - - margin: -1px; - min-width: 24px; - min-height: 24px; - border: 1px solid; - border-color: $borders_color; + min-width: 22px; + min-height: 22px; border-radius: 50%; - transition: $button_transition; - } + background-color: mix(white, $base_color, 80%); + box-shadow: 0 2px 4px transparentize(black, .8); - /* only show i / o for the accessible theme */ - @if $contrast == 'normal' { - > image { color: transparent; } + &:disabled { + box-shadow: 0 2px 4px transparent; + } } &:hover > slider { - @include button(hover); + background: white; } - &:checked > slider { border: 1px solid $switch_borders_color; } + &:checked { + color: $selected_fg_color; + background-color: $selected_bg_color; + + &:hover { + background-color: mix($selected_bg_color, $text_color, 90%); - &:disabled > slider { @include button(insensitive); } + &:active { background-color: mix($selected_bg_color, black, 80%); } + } + + > slider { + background-color: $selected_fg_color; + } + } } -- GitLab From c17bcf3ef8fecdb4dec4fd108ae88aec77928d11 Mon Sep 17 00:00:00 2001 From: Alexander Mikhaylenko Date: Thu, 20 May 2021 14:08:55 +0500 Subject: [PATCH 2/3] stylesheet: Update scales and progress bars Use a similar style to the new checks, radios, switches and level bars. Use an always light slider with a drop shadow, change that shadow for hover and active. Since the shadow is not visible in dark variant, also change the slider color in a way that will only affect dark. Since progress bars use the same styles, update them too. --- src/stylesheet/_colors.scss | 2 - src/stylesheet/widgets/_progress-bar.scss | 17 ++- src/stylesheet/widgets/_scale.scss | 129 +++++++++------------- 3 files changed, 61 insertions(+), 87 deletions(-) diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss index ba0d0c42b..03099f7dc 100644 --- a/src/stylesheet/_colors.scss +++ b/src/stylesheet/_colors.scss @@ -55,8 +55,6 @@ $insensitive_borders_color: mix($borders_color, $bg_color, 80%); //special cased widget colors $suggested_bg_color: $selected_bg_color; $suggested_border_color: $selected_borders_color; -$progress_bg_color: $selected_bg_color; -$progress_border_color: $selected_borders_color; $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3)); $alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7)); $dim_label_opacity: 0.55; diff --git a/src/stylesheet/widgets/_progress-bar.scss b/src/stylesheet/widgets/_progress-bar.scss index e82e03568..8cfb203e1 100644 --- a/src/stylesheet/widgets/_progress-bar.scss +++ b/src/stylesheet/widgets/_progress-bar.scss @@ -3,37 +3,34 @@ progressbar { &.horizontal { > trough { min-width: 150px; - &, > progress { min-height: 2px; } + &, > progress { min-height: 4px; } } } &.vertical { > trough { min-height: 80px; - &, > progress { min-width: 2px; } + &, > progress { min-width: 4px; } } } - &.horizontal > trough > progress { margin: 0 -1px; } // the progress node is positioned after the trough border - &.vertical > trough > progress { margin: -1px 0; } // this moves it over it. - // FIXME: insensitive state missing and some other state should be set probably font-size: smaller; color: transparentize($fg_color, 0.6); font-feature-settings: "tnum"; + &:disabled { + filter: opacity(.5); + } + > trough { @extend %scale_trough; > progress { @extend %scale_highlight; /* share most of scales' */ - /* override insensitive that is specific to progress */ - &:disabled { - background-color: $insensitive_fg_color; - border-color: $insensitive_fg_color; - } border-radius: 1.5px; + $_progress-radius: 5px; &.left { border-top-left-radius: $_progress-radius; diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss index 6e9160279..42af47800 100644 --- a/src/stylesheet/widgets/_scale.scss +++ b/src/stylesheet/widgets/_scale.scss @@ -1,40 +1,20 @@ %scale_trough { - border: 1px solid $dark_fill; border-radius: 3px; - background-color: $dark_fill; + background-color: transparentize($text_color, .85); - headerbar & { background-color: darken($dark_fill,8%); } //3504 - - &:disabled { - background-color: $insensitive_bg_color; - border-color: $insensitive_borders_color; + @if $contrast == "high" { + box-shadow: inset 0 0 0 1px $borders_color; } // OSD .osd & { - border-color: $osd_borders_color; - background-color: transparentize($osd_borders_color, 0.2); - - &:disabled { background-color: $osd_insensitive_bg_color; } + background-color: transparentize($osd_text_color, .85); } } %scale_highlight { - border: 1px solid $selected_bg_color; border-radius: 3px; background-color: $selected_bg_color; - - &:disabled { - background-color: transparent; - border-color: transparent; - } - - // OSD - .osd & { - border-color: $osd_borders_color; - - &:disabled { border-color: transparent; } - } } scale { @@ -52,10 +32,6 @@ scale { transition: $focus_transition; @extend %scale_trough; - // those are inside the trough node, I need them to show their own border over the trough one, so negative margin - > fill, - > highlight { margin: -1px; } - // the colored part of the backing bit > highlight { @extend %scale_highlight; } @@ -64,82 +40,74 @@ scale { > fill { @extend %scale_trough; - &:disabled { - border-color: transparent; - background-color: transparent; - } - // OSD .osd & { background-color: mix($osd_fg_color, $osd_borders_color, 25%); - - &:disabled { - border-color: transparent; - background-color: transparent; - } } } > slider { - @include button(normal); - border-width: 1px; - border-style: solid; + background-color: mix(white, $base_color, 80%); + box-shadow: 0 2px 4px transparentize(black, .8); + outline: 1px solid transparentize(black, .9); + border-radius: 100%; transition: $button_transition; transition-property: background, border, box-shadow; // the slider is inside the trough, so to have make it bigger there's a negative margin - min-height: 18px; - min-width: 18px; - margin: -9px; - - &:hover { @include button(hover); } + min-width: 20px; + min-height: 20px; + margin: -8px; + } + } - &:active { border-color: $selected_borders_color; } + &:hover { + > trough { + background-color: transparentize($text_color, .8); - &:disabled { @include button(insensitive); } + > highlight { + background-color: mix($selected_bg_color, $text_color, 90%); + } - // OSD - .osd & { - @include button(osd); - border-color: darken($osd_borders_color, 3%); - background-color: opacify($osd_bg_color, 1); // solid background needed here + > slider { + background-color: white; + } + } + } - &:hover { - @include button(osd-hover); - background-color: opacify($osd_bg_color, 1); // solid background needed here - } + &:disabled { + filter: opacity(.5); - &:active { - @include button(osd-active); - background-color: opacify($osd_bg_color, 1); // solid background needed here - } + > trough > slider { + box-shadow: 0 2px 4px transparent; + outline-color: transparentize(black, .8); + } + } - &:disabled { - @include button(osd-insensitive); - background-color: opacify($osd_bg_color, 1); // solid background needed here - } + @if $contrast == "high" { + &, &:hover, &.dragging, &:disabled { + > trough > slider { + outline-color: transparentize(black, .5); } } } // click-and-hold the slider to activate &.fine-tune { + padding: 9px; + &.horizontal { - padding-top: 9px; - padding-bottom: 9px; min-height: 16px; } &.vertical { - padding-left: 9px; - padding-right: 9px; min-width: 16px; } > trough { // to make the trough grow in fine-tune mode - > slider { margin: -6px; } + > slider { margin: -5px; } > fill, > highlight, @@ -155,13 +123,24 @@ scale { } &.marks-before, &.marks-after { - > trough > slider { - // Adjust box-shadow for the 45deg rotation, for 0 1px we ideally want - // 1/√2px 1/√2px, round that to 1px 1px - $_button_shadow: 1px 1px 2px transparentize($shadow_color, 0.03); + // Adjust box-shadow for the 45deg rotation, for 0px 2px we ideally want + // 1/√2px 1/√2px, round that to 1px 1px + $_shadow_size: 1px 1px; - box-shadow: $_button_shadow; + > trough > slider { transform: rotate(45deg); + + box-shadow: $_shadow_size 4px transparentize(black, .8); + } + + &:hover > trough > slider { + box-shadow: $_shadow_size 4px transparentize(black, .6); + } + + &.dragging, &:disabled { + > trough > slider { + box-shadow: $_shadow_size 4px transparent; + } } } -- GitLab From 172f077d2e80d1a1d0758026e1968a8f94e678f5 Mon Sep 17 00:00:00 2001 From: Alexander Mikhaylenko Date: Fri, 21 May 2021 00:04:12 +0500 Subject: [PATCH 3/3] stylesheet: Tone down hover and active states for checks Match switches and scales, as per Tobias' feedback. --- src/stylesheet/widgets/_checks.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss index c27d812dd..105bde4d3 100644 --- a/src/stylesheet/widgets/_checks.scss +++ b/src/stylesheet/widgets/_checks.scss @@ -24,10 +24,10 @@ radio { } &:hover { - background-color: transparentize($text_color, .75); + background-color: transparentize($text_color, .8); &:active { - background-color: transparentize(black, .65); + background-color: transparentize(black, .75); } } @@ -41,10 +41,10 @@ radio { } &:hover { - background-color: mix($selected_bg_color, $text_color, 80%); + background-color: mix($selected_bg_color, $text_color, 90%); &:active { - background-color: mix($selected_bg_color, black, 60%); + background-color: mix($selected_bg_color, black, 80%); } } } -- GitLab