[gnome-shell/wip/snwh/sass-cleanup] theme: fixes to notifications and popovers
- From: Sam Hewitt <snwh src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/snwh/sass-cleanup] theme: fixes to notifications and popovers
- Date: Wed, 18 Sep 2019 15:27:33 +0000 (UTC)
commit becb6e590f60a1d927b38b13670d767dedb6ec86
Author: Sam Hewitt <sam snwh org>
Date: Wed Sep 18 11:26:42 2019 -0400
theme: fixes to notifications and popovers
data/theme/gnome-shell-sass/_common.scss | 12 +-
data/theme/gnome-shell-sass/_drawing.scss | 224 ++++++++++-----------
.../gnome-shell-sass/widgets/_notifications.scss | 22 +-
data/theme/gnome-shell-sass/widgets/_popovers.scss | 2 +-
data/theme/gnome-shell.scss | 2 +-
5 files changed, 132 insertions(+), 130 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index dbd35b2721..20c80826dc 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -33,11 +33,11 @@ $base_spacing: 6px;
// border radii
$base_border_radius: 5px;
-$dialog_border_radius:$base_border_radius * 2 + 4px;
+$dialog_border_radius:$base_border_radius * 2;
// non-standard colors
-// $bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
-$bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
+$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
+// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
$active_bg_color: if($variant == 'light', darken($bg_color, 14%), darken($bg_color, 9%));
@@ -140,11 +140,12 @@ stage {
.button {
background-color: $bg_color;
color: $fg_color;
+ box-shadow: none;
&, &:hover, &:focus, &:active, &:disabled {
- box-shadow: none;
border-color: $bubble_borders_color;
}
+
&:hover { background-color: $hover_bg_color; }
&:active {
background-color: $selected_bg_color;
@@ -165,10 +166,11 @@ stage {
// buttons in dialogs
%bubble_button {
- border-right-width: 1px;
@include button(normal, $c:$bg_color, $tc:$fg_color);
padding: $base_padding * 2;
+ border-right-width: 1px;
border-top: 1px solid $bubble_borders_color;
+ box-shadow:none !important;
&:insensitive { @include button(insensitive, $c:$bg_color, $tc:$fg_color); }
&:hover { @include button(hover, $c:$hover_bg_color, $tc:$fg_color); }
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 71471e5c38..141c1bc58c 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -4,23 +4,23 @@
@function _widget_edge($c:$borders_edge) {
// outer highlight "used" on most widgets
- @return 0 1px $c;
+ @return 0 1px $c;
}
// provide font size in rem, with px fallback
@mixin fontsize($size: 24, $base: 16) {
- font-size: round($size) + pt;
- //font-size: ($size / $base) * 1rem;
+ font-size: round($size) + pt;
+ //font-size: ($size / $base) * 1rem;
}
@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
//
// Helper function to stack up to 4 box-shadows;
//
- @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
- @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
- @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
- @else { box-shadow: $shadow1; }
+ @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
+ @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
+ @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
+ @else { box-shadow: $shadow1; }
}
// entries
@@ -38,29 +38,29 @@
// normal, focus, insensitive
//
- @if $t==normal {
- background-color: $base_color;
- border-color: $borders_color;
-
- }
- @if $t==focus {
- border-color: if($fc==$selected_bg_color,
- $selected_borders_color,
- darken($fc,35%));
- }
- @if $t==hover { }
- @if $t==insensitive {
- color: $insensitive_fg_color;
- border-color: $insensitive_bg_color;
- box-shadow: none;
- }
+ @if $t==normal {
+ background-color: $base_color;
+ border-color: $borders_color;
+
+ }
+ @if $t==focus {
+ border-color: if($fc==$selected_bg_color,
+ $selected_borders_color,
+ darken($fc,35%));
+ }
+ @if $t==hover { }
+ @if $t==insensitive {
+ color: $insensitive_fg_color;
+ border-color: $insensitive_bg_color;
+ box-shadow: none;
+ }
}
// buttons
@function _border_color ($c) { @return darken($c,25%); } // colored buttons want
- // the border form the
- // base color
+
// the border form the
+
// base color
@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
//
@@ -69,9 +69,9 @@
// $tc is the text color
// $bg is the background color
//
- $_lbg: lightness($bg)/100%;
- @if lightness($tc)<50% { @return rgba(255,255,255,1-$_lbg/($_lbg*1.3)); }
- @else { @return rgba(0,0,0,$_lbg*0.8); }
+ $_lbg: lightness($bg)/100%;
+ @if lightness($tc)<50% { @return rgba(255,255,255,1-$_lbg/($_lbg*1.3)); }
+ @else { @return rgba(0,0,0,$_lbg*0.8); }
}
@function _button_hilight_color($c) {
@@ -80,11 +80,11 @@
//
// $c: base color;
//
- @if lightness($c)>90% { @return white; }
- @else if lightness($c)>80% { @return rgba(255,255,255, 0.3); }
- @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
- @else if lightness($c)>40% { @return rgba(255,255,255, 0.7); }
- @else { @return rgba(255,255,255, 0.9); }
+ @if lightness($c)>90% { @return white; }
+ @else if lightness($c)>80% { @return rgba(255,255,255, 0.3); }
+ @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
+ @else if lightness($c)>40% { @return rgba(255,255,255, 0.7); }
+ @else { @return rgba(255,255,255, 0.9); }
}
@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
@@ -96,16 +96,16 @@
// TODO: this functions needs a way to deal with special cases
//
- $_shadow: _text_shadow_color($tc, $bg);
+ $_shadow: _text_shadow_color($tc, $bg);
- @if lightness($tc)<50% {
- text-shadow: 0 1px $_shadow;
- icon-shadow: 0 1px $_shadow;
- }
- @else {
- text-shadow: 0 -1px $_shadow;
- icon-shadow: 0 -1px $_shadow;
- }
+ @if lightness($tc)<50% {
+ text-shadow: 0 1px $_shadow;
+ icon-shadow: 0 1px $_shadow;
+ }
+ @else {
+ text-shadow: 0 -1px $_shadow;
+ icon-shadow: 0 -1px $_shadow;
+ }
}
@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) {
@@ -124,79 +124,67 @@
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
- $_hilight_color: _button_hilight_color($c);
- $_button_edge: if($edge == none, none, _widget_edge($edge));
- $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
- $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
-
- @if $t==normal {
- //
- // normal button
- //
-
- color: $tc;
- background-color: $c;
- border-color: $borders_color;
- box-shadow: $_button_shadow;
- text-shadow: 0 1px black;
- icon-shadow: 0 1px black;
- }
- @if $t==focus {
- //
- // focused button
- //
- color: $tc;
- text-shadow: 0 1px black;
- icon-shadow: 0 1px black;
- box-shadow: inset 0px 0px 0px 2px $selected_bg_color;
- //border-color: $selected_bg_color;
- }
-
- @else if $t==hover {
- //
- // active osd button
- //
- color: $tc;
- border-color: $borders_color;
- background-color: $c;
- box-shadow: $_button_shadow;
- text-shadow: 0 1px black;
- icon-shadow: 0 1px black;
-
- }
- @else if $t==active {
- //
- // active osd button
- //
- color: $tc;
- border-color: $borders_color;
- background-color: $c;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none;
- }
- @else if $t==insensitive {
-
- color: $insensitive_fg_color;
- border-color: $insensitive_borders_color;
- background-color: $insensitive_bg_color;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none;
- }
- @else if $t==undecorated {
- //
- // reset
- //
- border-color: transparent;
- background-color: transparent;
- background-image: none;
-
- @include _shadows(inset 0 1px rgba(255,255,255,1),
- $_blank_edge);
-
- text-shadow: none;
- icon-shadow: none;
- }
-}
-
+ $_hilight_color: _button_hilight_color($c);
+ $_button_edge: if($edge == none, none, _widget_edge($edge));
+ $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
+ $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
+
+ // normal button
+ @if $t==normal {
+ color: $tc;
+ background-color: $c;
+ border-color: $borders_color;
+ box-shadow: $_button_shadow;
+ text-shadow: 0 1px black;
+ icon-shadow: 0 1px black;
+ }
+
+ // focused button
+ @if $t==focus {
+ color: $tc;
+ text-shadow: 0 1px black;
+ icon-shadow: 0 1px black;
+ box-shadow: inset 0 0 0 2px $selected_bg_color;
+ //border-color: $selected_bg_color;
+ }
+
+ // active osd button
+ @else if $t==hover {
+ color: $tc;
+ border-color: $borders_color;
+ background-color: $c;
+ box-shadow: $_button_shadow;
+ text-shadow: 0 1px black;
+ icon-shadow: 0 1px black;
+ }
+
+ // active osd button
+ @else if $t==active {
+ color: $tc;
+ border-color: $borders_color;
+ background-color: $c;
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: none;
+ }
+
+ // insensitive button
+ @else if $t==insensitive {
+ color: $insensitive_fg_color;
+ border-color: $insensitive_borders_color;
+ background-color: $insensitive_bg_color;
+ box-shadow: none;
+ text-shadow: none;
+ icon-shadow: none;
+ }
+
+ // reset
+ @else if $t==undecorated {
+ border-color: transparent;
+ background-color: transparent;
+ background-image: none;
+ @include _shadows(inset 0 1px rgba(255,255,255,1),$_blank_edge);
+ text-shadow: none;
+ icon-shadow: none;
+ }
+}
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss
b/data/theme/gnome-shell-sass/widgets/_notifications.scss
index cb7c3a2d39..1da5342ef4 100644
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -5,13 +5,17 @@ $notification_banner_width: 34em;
// Banner notifications
.notification-banner {
- font-size: $base_font_size;
+ min-height: $notification_banner_height;
width: $notification_banner_width;
+ font-size: $base_font_size;
margin: $base_margin;
border-radius: $dialog_border_radius;
border: if($variant == 'light', none, $bubble_borders_color);
- min-height: $notification_banner_height;
- box-shadow: 0 1px 2px rgba(0,0,0, 0.7);
+ box-shadow: 0 1px 2px rgba(0,0,0,0.7);
+
+ .message-title { color: $fg_color }
+ .message-content { color: $fg_color; }
+
&:hover { background: $bg_color; }
&, &:focus, &:active {
@@ -28,9 +32,17 @@ $notification_banner_width: 34em;
// entries
StEntry { @extend %bubble_entry; }
- .notification-icon { padding: 5px; }
- .notification-content { padding: 5px; spacing: 5px; }
+ .notification-icon {
+ padding: 5px;
+ }
+
+ .notification-content {
+ padding: 5px;
+ spacing: 5px;
+ }
+
.secondary-icon { icon-size: $base_icon_size; }
+
.notification-actions {
padding-top: 0;
color: $fg_color;
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 51ff69afb4..b663e3e57e 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -63,7 +63,7 @@
-arrow-border-radius: $base_border_radius+4;
-arrow-background-color: $bg_color;
-arrow-border-width: 1px;
- -arrow-border-color: if($variant=='light', rgba(0,0,0,0.6), $borders_color);
+ -arrow-border-color: if($variant=='light', $bg_color, $bubble_borders_color);
-arrow-base: 24px;
-arrow-rise: 11px;
-arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); //dreaming. bug #689995
diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell.scss
index 3def5896cf..62237fd5d3 100644
--- a/data/theme/gnome-shell.scss
+++ b/data/theme/gnome-shell.scss
@@ -1,4 +1,4 @@
-$variant: 'dark';
+$variant: 'light';
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
