GNOME.org
 

[gnome-shell/wip/snwh/sass-cleanup] theme: OSD refinements; overview and panel refinements

commit de7edaff5ca142958b3a086bb1e1bb83ae782d6d
Author: Sam Hewitt <sam snwh org>
Date:   Thu Sep 12 16:12:40 2019 -0400

    theme: OSD refinements; overview and panel refinements

 data/theme/gnome-shell-high-contrast.scss          |  6 +-
 data/theme/gnome-shell-sass/_colors.scss           | 13 ++---
 data/theme/gnome-shell-sass/_common.scss           | 17 +++---
 data/theme/gnome-shell-sass/_drawing.scss          | 14 ++---
 .../gnome-shell-sass/_high-contrast-colors.scss    |  7 +--
 data/theme/gnome-shell-sass/widgets/_dash.scss     | 20 ++++---
 .../gnome-shell-sass/widgets/_notifications.scss   |  2 +-
 data/theme/gnome-shell-sass/widgets/_overview.scss |  1 +
 data/theme/gnome-shell-sass/widgets/_panel.scss    |  6 +-
 .../gnome-shell-sass/widgets/_screen-shield.scss   |  3 +-
 .../gnome-shell-sass/widgets/_search-results.scss  |  1 -
 .../widgets/_workspace-switcher.scss               | 64 +++++++++++++---------
 12 files changed, 84 insertions(+), 70 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss
index 4ac340c92a..cbd5fa41bf 100644
--- a/data/theme/gnome-shell-high-contrast.scss
+++ b/data/theme/gnome-shell-high-contrast.scss
@@ -6,11 +6,11 @@ $variant: 'light';
 
 //force symbolic icons
 stage {
-  -st-icon-style: symbolic;
+       -st-icon-style: symbolic;
 }
 
 .toggle-switch { width: 48px; }
 .toggle-switch-us, .toggle-switch-intl {
-  background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
-  &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
+       background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
+       &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
 }
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index b5f28c422c..2f9ed570ca 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -9,7 +9,7 @@ $selected_fg_color: #fff;
 $selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
 $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 
30%));
 $borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
-$borders_edge: if($variant == 'light', transparentize(#fff, 0.2), transparentize($fg_color, 0.93));
+$borders_edge: if($variant == 'light', rgba(255,255,255,0.2), transparentize($fg_color, 0.93));
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 
10%));
 $top_hilight: $borders_edge;
@@ -19,16 +19,15 @@ $error_color: #ff8080;
 $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
 
-$osd_fg_color: if($variant == 'light', #2e3436, #eeeeec);
+$osd_fg_color: $fg_color;
 $osd_text_color: if($variant == 'light', #000, #fff);
-$osd_bg_color: if($variant == 'light', transparentize(#fff, 0.1), transparentize(darken(desaturate(#3d3846, 
100%), 12%),0.04));
+$osd_bg_color: if($variant == 'light', rgba(255,255,255,0.9), transparentize(darken(desaturate(#3d3846, 
100%), 12%),0.04));
 $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', transparentize(#fff, 0.1), transparentize(#000, 0.3));
-$osd_outer_borders_color: transparentize(#fff, 0.84);
+$osd_borders_color:  if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
+$osd_outer_borders_color: rgba(255,255,255,0.16);
 
-$tooltip_borders_color: $osd_outer_borders_color;
-$shadow_color: transparentize(#000, 0.9);
+$shadow_color: rgba(0,0,0,0.9);
 
 //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 4409195048..b627a97d29 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -33,10 +33,11 @@ $base_spacing: 6px;
 // border radii
 $base_border_radius: 5px;
 
-$dialog_border_radius: $base_border_radius + 4px;
+$dialog_border_radius:$base_border_radius * 2 + 4px;
 
 // non-standard colors
-$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
+// $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%));
 
@@ -98,19 +99,21 @@ stage {
 // Common Stylings
 
 // osd panels
+
 %osd_panel {
        color: $osd_fg_color;
        background-color: $osd_bg_color;
        border: 1px solid $osd_outer_borders_color;
-       border-radius: $base_border_radius * 3;
+       border-radius: $base_border_radius * 2 + 4px;
        padding: $base_padding * 2;
 }
 
-// Overview panels
+// Overview panels 
+// for the dash and workspace switcher
 %overview_panel {
        color: $osd_fg_color;
-       background-color: transparentize($osd_bg_color, 0.1);
-       border: none;
+       background-color: transparentize($osd_bg_color, 0.2);
+       border: 1px solid $osd_outer_borders_color;
 }
 
 // icon tiles
@@ -128,7 +131,7 @@ stage {
 %bubble_panel {
        color: $fg_color;
        background-color: $bg_color;
-       border: 1px solid if($variant=='light', transparentize(black, 0.6), $borders_color);
+       border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color);
 
        // entry
        StEntry { @extend %bubble_entry; }
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 8f4611c34a..71471e5c38 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -70,8 +70,8 @@
 // $bg is the background color
 //
   $_lbg: lightness($bg)/100%;
-  @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); }
-  @else { @return transparentize(black,$_lbg*0.8); }
+  @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) {
@@ -81,10 +81,10 @@
 // $c: base color;
 //
   @if lightness($c)>90% { @return white; }
-  @else if lightness($c)>80% { @return transparentize(white, 0.3); }
-  @else if lightness($c)>50% { @return transparentize(white, 0.5); }
-  @else if lightness($c)>40% { @return transparentize(white, 0.7); }
-  @else { @return transparentize(white, 0.9); }
+  @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) {
@@ -192,7 +192,7 @@
     background-color: transparent;
     background-image: none;
 
-    @include _shadows(inset 0 1px transparentize(white,1),
+    @include _shadows(inset 0 1px rgba(255,255,255,1),
                       $_blank_edge);
 
     text-shadow: none;
diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss 
b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index cba0145ac0..2170c6684a 100644
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -22,11 +22,10 @@ $destructive_color: darken(#ef2929,10%);
 
 $osd_fg_color: #eeeeec;
 $osd_bg_color: #2e3436;
-$osd_borders_color: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize(white, 0.9);
+$osd_borders_color: rgba(0,0,0, 0.3);
+$osd_outer_borders_color: rgba(255,255,255, 0.1);
 
-$tooltip_borders_color: $osd_outer_borders_color;
-$shadow_color: transparentize(black, 0.9);
+$shadow_color: rgba(0,0,0, 0.9);
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 8b85ba5b5d..41ca7bfc0b 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -5,11 +5,14 @@ $dash_placeholder_size: 24px;
 #dash {
        @extend %overview_panel;
        font-size: $base_font_size - 2pt;
-       padding: 4px 0;
-       border-radius: 0px $dialog_border_radius $dialog_border_radius 0px;
+       padding: $base_padding 0;
 
-       &:rtl {
+       //fixme: can't have non uniform borders :(
+       border-radius: 0 $dialog_border_radius $dialog_border_radius 0; 
+       border-left-width: 0 !important;
+       &:rtl { 
                border-radius: $dialog_border_radius 0 0 $dialog_border_radius;
+               border-right-width: 0 !important;
        }
 
        .placeholder {
@@ -25,18 +28,19 @@ $dash_placeholder_size: 24px;
 }
 
 .dash-item-container > StWidget {
-       padding: 4px 8px;
+       padding: $base_padding $base_padding * 2;
 }
 
 // OSD Tooltip
 .dash-label {
-       border-radius: 7px;
-       padding: 4px 12px;
+       border-radius: $base_border_radius + 2px;
+       padding: $base_padding $base_padding + 2px;
        color: $osd_fg_color;
        background-color: transparentize($osd_bg_color,0.05);
-       border: 1px solid $osd_outer_borders_color;
+       border:none;
+       box-shadow:0 0 0 1px $osd_outer_borders_color;
        text-align: center;
-       -x-offset: 8px; // distance from the dash edge
+       -x-offset: $base_margin * 2; // distance from the dash edge
 }
 
 // Show apps button
diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss 
b/data/theme/gnome-shell-sass/widgets/_notifications.scss
index 376838d0e1..cb7c3a2d39 100644
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -11,7 +11,7 @@ $notification_banner_width: 34em;
        border-radius: $dialog_border_radius;
        border: if($variant == 'light', none, $bubble_borders_color);
        min-height: $notification_banner_height;
-       box-shadow: 0 1px 2px transparentize(black, 0.7);
+       box-shadow: 0 1px 2px rgba(0,0,0, 0.7);
 
        &:hover { background: $bg_color; }
        &, &:focus, &:active {
diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss 
b/data/theme/gnome-shell-sass/widgets/_overview.scss
index 8c3058d3c8..b48bd05bcb 100644
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/widgets/_overview.scss
@@ -2,6 +2,7 @@
 
 #overview {
        spacing: 24px;
+       background-color: transparent;
 }
 
 .overview-controls {
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 0250c8a580..5857938233 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -2,8 +2,8 @@
 // a.k.a. the panel
 
 $panel_corner_radius: $base_border_radius + 1px;
-$panel_bg_color: if($variant == 'light', #fff, #000);
-$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 10%));
+$panel_bg_color: if($variant == 'light', rgba(0,0,0,0.9), #000);
+$panel_fg_color: if($variant == 'light', darken($bg_color, 15%), darken($fg_color, 10%));
 $panel_height: 1.86em;
 
 
@@ -20,7 +20,7 @@ $panel_height: 1.86em;
                background-color: transparent;
        }
 
-       // spacing between activities<>app menu and such
+       // spacing between activities, app menu and such
        #panelLeft, #panelCenter {
                spacing: $base_spacing;
        }
diff --git a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss 
b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
index 0a5da271bb..0f8a8be288 100644
--- a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
@@ -1,4 +1,3 @@
-
 /* Screen Shield */
 
 $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
@@ -67,7 +66,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
 
 .screen-shield-background { //just the shadow, really
        background: black;
-       box-shadow: 0px 2px 4px transparentize(black,0.6);
+       box-shadow: 0px 2px 4px rgba(0,0,0,0.6);
 }
 
 #lockDialogGroup {
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss 
b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 5015280f14..4626594d95 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -47,7 +47,6 @@
 
        > .overview-icon.overview-icon-with-label {
                padding: 10px 8px 5px 8px;
-               background-color:red;
                spacing: $base_spacing;
        }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss 
b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
index abfdfc8b70..59b0f7fbd5 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
@@ -5,32 +5,34 @@
 
 .workspace-switcher-container {
        @extend %osd_panel;
+       box-shadow: 0 2px 10px 2px rgba(0,0,0,0.2);
 }
 
 .workspace-switcher {
        background: transparent;
-       border: 0px;
-       border-radius: 0px;
-       padding: 0px;
+       border: none;
+       border-radius: 0;
+       padding: 0;
        spacing: $base_spacing * 2;
-}
 
-.ws-switcher-active-up,
-.ws-switcher-active-down,
-.ws-switcher-active-left,
-.ws-switcher-active-right {
-       height: 50px;
-       background-color: $selected_bg_color;
-       color: $selected_fg_color;
-       background-size: 32px;
-       border-radius: $base_border_radius + 3px;
-}
+       .ws-switcher-box {
+               // background: transparent;
+               background: transparent;
+               height: 50px;
+               background-size: 32px;
+               border: 1px solid transparentize($osd_fg_color,0.9);
+               border-radius: $base_border_radius + 3px;
+       }
 
-.ws-switcher-box {
-       height: 50px;
-       border: 1px solid transparentize($osd_fg_color,0.9);
-       background: transparent;
-       border-radius: $base_border_radius + 3px;
+       // active workspace in the switcher
+       .ws-switcher-active-up,
+       .ws-switcher-active-down,
+       .ws-switcher-active-left,
+       .ws-switcher-active-right {
+               background-color: $selected_bg_color;
+               border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), 
lighten($selected_bg_color, 5%));
+               color: $selected_fg_color;
+       }
 }
 
 /* Workspace pager */
@@ -39,12 +41,19 @@
 .workspace-thumbnails { 
        @extend %overview_panel;
        visible-width: 32px; //amount visible before hover
-       spacing: 11px;
-       padding: 8px;
-       border-radius: $dialog_border_radius 0 0 $dialog_border_radius;
-       //border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :(
-       &:rtl { border-radius: 0 $dialog_border_radius $dialog_border_radius 0;}
+       spacing: $base_spacing;
+       padding: $base_padding;
+
+       //fixme: can't have non uniform borders :(
+       border-top-left-radius:0 !important;
+       border-bottom-left-radius:0 !important;
+       border-right-width: 0 !important;
+       &:rtl { 
+               border-radius: 0 $dialog_border_radius $dialog_border_radius 0; 
+               border-left-width: 0 !important;
+       }
 
+       // drag and drop indicator
        .placeholder {
                background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
                background-size: contain;
@@ -54,7 +63,8 @@
 
 // selected indicator
 .workspace-thumbnail-indicator {
-       border: 2px solid $selected_bg_color;
-       border-radius: 2px;
-       padding: 1px;
+       border: 3px solid $selected_bg_color;
+       border-radius: 3px;
+       padding: 0px;
+       // background-color: transparentize($selected_bg_color, 0.9);
 }
\ No newline at end of file
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]