[gnome-shell/wip/snwh/sass-cleanup] theme: refine the button drawing functions; update notifications & keyboard buttons
- From: Sam Hewitt <snwh src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/snwh/sass-cleanup] theme: refine the button drawing functions; update notifications & keyboard buttons
- Date: Thu, 5 Dec 2019 19:38:42 +0000 (UTC)
commit 47a078512fa27292ab8b496711c6b05dfd775c30
Author: Sam Hewitt <sam snwh org>
Date: Thu Dec 5 14:38:37 2019 -0500
theme: refine the button drawing functions; update notifications & keyboard buttons
data/theme/gnome-shell-sass/_colors.scss | 4 ++--
data/theme/gnome-shell-sass/_common.scss | 6 +++---
data/theme/gnome-shell-sass/_drawing.scss | 17 +++++++++--------
data/theme/gnome-shell-sass/widgets/_keyboard.scss | 15 ++++++++-------
data/theme/gnome-shell-sass/widgets/_message-list.scss | 18 +++++++++---------
5 files changed, 31 insertions(+), 29 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 38481a22bc..57d130c0c4 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -25,9 +25,9 @@ $osd_bg_color: if($variant == 'light', rgba(255,255,255,0.9), transparentize(dar
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
$osd_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
-$osd_outer_borders_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(255,255,255,0.1));
+$osd_outer_borders_color: if($variant == 'light', rgba(0,0,0,0.1), lighten($osd_bg_color, 7%));
-$shadow_color: rgba(0,0,0,0.4);
+$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 5d52f68938..842dec703f 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -225,13 +225,13 @@ stage {
&:focus,
&:hover {
- margin-top: $base_margin - 1px;
- margin-bottom: $base_margin + 1px;
+ // margin-top: $base_margin - 1px;
+ // margin-bottom: $base_margin + 1px;
@include button(hover);
}
&:active {
@include button(active);
- margin: $base_margin;
+ // margin: $base_margin;
}
}
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 95f3af8d7e..0565474b30 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -61,7 +61,8 @@
//
// colored buttons want the border form the base color
//
- @return if($variant == 'light', darken($c, 18%), darken($c, 8%));
+ // @return if($variant == 'light', darken($c, 18%), darken($c, 8%));
+ @return if($variant == 'light', darken($c, 13%), lighten($c, 7%));
}
@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
@@ -133,11 +134,11 @@
// normal button
@if $t==normal {
color: $tc;
- background-color: lighten($c, 3%);
+ background-color: lighten($c, 3%) !important;
border-width: 1px;
border-style: solid;
border-color: draw_border_color($c);
- @include draw_shadows(0 1px 1px 0 rgba(0,0,0,0.1));
+ @include draw_shadows(0 1px 1px 0 $shadow_color);
// box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
text-shadow: 0 1px $text_shadow_color;
icon-shadow: 0 1px $text_shadow_color;
@@ -155,11 +156,11 @@
// hover osd button
@else if $t==hover {
color: $tc;
- background-color: lighten($c,5%);
+ background-color: lighten($c,5%) !important;
border-width: 1px;
border-style: solid;
border-color: draw_border_color(lighten($c,5%));
- @include draw_shadows(0 1px 1px 0 rgba(0,0,0,0.1));
+ @include draw_shadows(0 1px 1px 0 $shadow_color);
text-shadow: 0 1px $text_shadow_color;
icon-shadow: 0 1px $text_shadow_color;
}
@@ -167,10 +168,10 @@
// active osd button
@else if $t==active {
color: $tc;
- background-color: darken($c,3%);
+ background-color: darken($c,3%) !important;
border-width: 1px;
border-style: solid;
- border-color: draw_border_color($c);
+ border-color: draw_border_color(if($variant == 'light', $c, darken($c,12%)));
text-shadow: none;
icon-shadow: none;
box-shadow: none;
@@ -182,7 +183,7 @@
border-width: 1px;
border-style: solid;
border-color: $insensitive_borders_color;
- background-color: $insensitive_bg_color;
+ background-color: $insensitive_bg_color !important;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
index 84400d53ef..5cd9caf250 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -2,15 +2,14 @@
$key_size: 1.2em;
$key_border_radius: $base_border_radius + 3px;
-$key_bg_color: lighten($bg_color, if($variant=='light', 0%, 2%));
+$key_bg_color: $bg_color;
// $default_key_bg_color: darken($key_bg_color, 4%);
$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
// draw keys using button function
%keyboard_key {
-
- @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
+ @include button(normal, $c:$key_bg_color);
&:focus { @include button(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
@@ -26,14 +25,16 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
.page-indicator-icon {
width: 6px;
- height: 6px
+ height: 6px;
+ &:checked {
+ background-color:red;
+ }
}
}
}
// the container for individual keys
.key-container {
- background-color: transparent;
padding: $base_margin;
spacing: $base_margin;
}
@@ -47,8 +48,8 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
border-radius: $key_border_radius;
- &:grayed { //FIXME
- background-color: $bg_color;
+ &:grayed { //FIXMEy
+ background-color: darken($bg_color, 3%);
color: $osd_fg_color;
border-color: $osd_borders_color;
}
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 4c5e072910..fbcec05adf 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -111,16 +111,16 @@
// border: 0 solid $borders_color;
// border-left-width:1px;
- &:hover {
+ &:last-child:ltr {
+ border-radius: 0 calc(#{$base_border_radius} + 2px) calc(#{$base_border_radius} + 2px) 0;
+ }
+ &:last-child:rtl {
+ border-radius: calc(#{$base_border_radius} + 2px) 0 0 calc(#{$base_border_radius} + 2px);
+ }
+
+ &:hover {
background-color: lighten($hover_bg_color, 5%);
color: $fg_color;
-
- &:last-child:ltr {
- border-radius: 0 $base_border_radius $base_border_radius 0;
- }
- &:last-child:rtl {
- border-radius: $base_border_radius 0 0 $base_border_radius;
- }
}
&:active {
@@ -138,7 +138,7 @@
// when there is no artwork
&.fallback {
- color: darken($fg_color, 10%);
+ color: darken($fg_color, 17%);
background-color: $bg_color;
border: 1px solid transparent;
border-radius: $base_border_radius;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]