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

From: Sam Hewitt <snwh src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/snwh/sass-cleanup: 446/475] theme: OSD refinements; overview and panel refinements
Date: Wed, 18 Dec 2019 16:01:49 +0000 (UTC)
commit 8de5bbe83062c211b7d033f7ba99c3f0a321c605
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           | 11 +++
 data/theme/gnome-shell-sass/_common.scss           |  9 ++
 data/theme/gnome-shell-sass/_drawing.scss          | 95 +++++++++++++++++++++-
 .../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, 175 insertions(+), 50 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 57d130c0c4..bf9356c7cb 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -8,7 +8,11 @@ $fg_color: if($variant == 'light', #2e3436, #eeeeec);
 $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%));
+<<<<<<< HEAD
 $borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%));
+=======
+$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
+>>>>>>> de7edaff5... theme: OSD refinements; overview and panel refinements
 $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%));
@@ -24,10 +28,17 @@ $osd_text_color: if($variant == 'light', #000, #fff);
 $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%);
+<<<<<<< HEAD
 $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), lighten($osd_bg_color, 7%));
 
 $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
+=======
+$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);
+
+$shadow_color: rgba(0,0,0,0.9);
+>>>>>>> de7edaff5... theme: OSD refinements; overview and panel refinements
 
 //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 0f4c2175db..807ba964e3 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -33,11 +33,19 @@ $base_spacing: 6px;
 // border radii
 $base_border_radius: 5px;
 
+<<<<<<< HEAD
 $modal_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));
+=======
+$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: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
+>>>>>>> de7edaff5... theme: OSD refinements; overview and panel refinements
 
 
 // hover
@@ -110,6 +118,7 @@ stage {
 
 
 // osd panels
+
 %osd_panel {
        color: $osd_fg_color;
        background-color: $osd_bg_color;
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 6dd42479e4..27dfe2cf81 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -71,9 +71,15 @@
 // $tc is the text color
 // $bg is the background color
 //
+<<<<<<< HEAD
        $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); }
+>>>>>>> de7edaff5... theme: OSD refinements; overview and panel refinements
 }
 
 @function draw_button_hilight_color($c) {
@@ -82,11 +88,19 @@
 //
 // $c: base color;
 //
+<<<<<<< HEAD
        @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); }
+>>>>>>> de7edaff5... theme: OSD refinements; overview and panel refinements
 }
 
 @mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
@@ -126,6 +140,7 @@
 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
 
+<<<<<<< HEAD
        $hilight_color: draw_button_hilight_color($c);
        $button_edge: if($edge == none, none, draw_widget_edge($edge));
        $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
@@ -197,4 +212,82 @@
                text-shadow: none;
                icon-shadow: none;
        }
-}
\ No newline at end of file
+}
+=======
+  $_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;
+  }
+}
+
+>>>>>>> de7edaff5... theme: OSD refinements; overview and panel refinements
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]