GNOME.org
 

[gnome-shell/wip/snwh/stylesheet-papercut-fixes] theme: Papercut fixes from 42 refresh


commit 6f07c16dc1a9eff7cb888734b68c54f4ad507ef3
Author: Sam Hewitt <sam snwh org>
Date:   Wed Feb 2 14:47:42 2022 -0330

    theme: Papercut fixes from 42 refresh
    
    - simplified drawing functions
    - dropped arrow from all popovers
    - cleaned out some legacy css
    - fixed many of the issues in #4969

 data/theme/gnome-shell-sass/_colors.scss           |   1 -
 data/theme/gnome-shell-sass/_common.scss           |  19 ++--
 data/theme/gnome-shell-sass/_drawing.scss          | 124 +++++++--------------
 .../gnome-shell-sass/_high-contrast-colors.scss    |   2 -
 data/theme/gnome-shell-sass/widgets/_app-grid.scss |   6 +-
 data/theme/gnome-shell-sass/widgets/_dash.scss     |   5 +-
 data/theme/gnome-shell-sass/widgets/_panel.scss    |   2 +-
 data/theme/gnome-shell-sass/widgets/_popovers.scss |  73 +++++-------
 .../gnome-shell-sass/widgets/_search-results.scss  |  18 +--
 .../gnome-shell-sass/widgets/_switcher-popup.scss  |  22 +---
 10 files changed, 84 insertions(+), 188 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 31698b2aa8..7eda3d8310 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -14,7 +14,6 @@ $borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color,
 
 $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;
 
 $warning_color: if($variant == 'light', #e5a50a, #f5c211);;
 $error_color: if($variant == 'light', #e01b24, #c01c28);
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 69c450485f..f32a619ca4 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -89,7 +89,7 @@ stage {
 }
 
 // icon tiles
-%icon_tile {
+%tile {
   border-radius: $base_border_radius * 2; // 16px
   padding: $base_padding;
   border: 2px solid transparent;
@@ -103,6 +103,7 @@ stage {
   border-style: solid;
   border-width: 1px;
   min-height: 22px;
+  font-weight: bold;
   padding: $base_padding * 0.5 $base_padding * 4;
 
   @include button(normal);
@@ -121,20 +122,18 @@ stage {
 }
 
 // buttons in dialogs/notifications
-// styled to have no shadow and be lighter in color
 $bubble_button_radius:$base_border_radius*1.25;
 
 %bubble_button {
   padding: $base_padding * 2;
   border: 0 solid $bg_color !important; 
-  border-radius: 0;
   border-right-width: 1px !important; 
 
-  @include button(normal, $bubble_buttons_color, $shadow: none);
-  &:insensitive { @include button(insensitive, $shadow: none); }
-  &:focus { @include button(focus, $shadow: none); }
-  &:hover { @include button(hover, $bubble_buttons_color, $shadow: none); }
-  &:active { @include button(active, $bubble_buttons_color, $shadow: none); }
+  @include button(normal, $bubble_buttons_color);
+  &:insensitive { @include button(insensitive); }
+  &:focus { @include button(focus); }
+  &:hover { @include button(hover, $bubble_buttons_color); }
+  &:active { @include button(active, $bubble_buttons_color); }
   
   &:first-child {
     border-radius: 0 0 0 $bubble_button_radius; 
@@ -144,6 +143,10 @@ $bubble_button_radius:$base_border_radius*1.25;
     border-radius: 0 0 $bubble_button_radius 0;
     border-right-width: 0 !important;
   }
+
+  &:first-child:last-child {
+    border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important; 
+  }
 }
 
 // styling for elements within popovers that look like notifications
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 634fd4d98b..2c602d5ab0 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -57,71 +57,15 @@
 }
 
 // buttons
+// since buttons are all flat an borderless now the mixin is simpler
 
-@function draw_border_color ($c) {
-  //
-  // colored buttons want the border form the base color
-  //
-  @return if($variant == 'light', darken($c, 18%), darken($c, 4%));
-}
-
-@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
-//
-// calculate the color of text shadows
-//
-// $tc is the text color
-// $bg is the background color
-//
-  $lbg: lightness($bg)/100%;
-  @if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
-  @else { @return rgba(0,0,0,1-$lbg*0.8); }
-}
-
-@function draw_button_hilight_color($c) {
-//
-// calculate the right top highlight color for buttons
-//
-// $c: base color;
-//
-  @if lightness($c)>90% { @return white; }
-  @else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
-  @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
-  @else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
-  @else { @return rgba(255,255,255, 0.1); }
-}
-
-@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
-//
-// helper function for the text emboss effect
-//
-// $tc is the optional text color, not the shadow color
-//
-// TODO: this functions needs a way to deal with special cases
-//
-
-  $shadow: draw_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;
-  }
-}
-
-@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
+@mixin button($t, $c:$bg_color, $tc:$fg_color) {
 //
 // Button drawing function
 //
 // $t:    button type,
 // $c:    base button color for colored* types
 // $tc:   optional text color for colored* types
-// $edge: set to none to not draw the bottom edge or specify a color to not
-//        use the default one
-// $shadow: set to none to not draw the drop shadow or specify a color to not
-//          use the default one
 //
 // possible $t values:
 // normal, hover, active, insensitive, insensitive-active,
@@ -129,20 +73,11 @@
 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
 
-  $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)));
-  $button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
-
   // normal button
   @if $t==normal {
     color: $tc;
     background-color: lighten($c, 3%);
     border-color: lighten($c, 3%);
-    @include draw_shadows($button_shadow);
-    // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-    text-shadow: none;
-    icon-shadow: none;
   }
 
   // focused button
@@ -151,8 +86,10 @@
     background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
     // border-color: lighten($c, 3%);
     box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
-    text-shadow: none;
-    icon-shadow: none;
+    &:hover {
+      background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+    }
   }
 
   // hover button
@@ -160,9 +97,6 @@
     color: $tc;
     background-color: lighten($c, if($variant == 'light', 8%, 5%));
     border-color: lighten($c, if($variant == 'light', 8%, 5%));
-    @include draw_shadows($button_shadow);
-    text-shadow: none;
-    icon-shadow: none;
   }
 
   // active button
@@ -170,9 +104,6 @@
     color: $tc;
     background-color: darken($c,3%);
     border-color: darken($c,3%);
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: none;
   }
 
   // insensitive button
@@ -180,9 +111,6 @@
     color: $insensitive_fg_color;
     border-color: $insensitive_bg_color;
     background-color: $insensitive_bg_color;
-    box-shadow: none;
-    text-shadow: none;
-    icon-shadow: none;
   }
 
   // reset
@@ -190,20 +118,46 @@
     border-color: transparent;
     background-color: transparent;
     background-image: none;
-    @include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
-    text-shadow: none;
-    icon-shadow: none;
   }
 }
 
+// tile
+@mixin tile($color) {
+  @extend %tile;
+  background-color: transparent;
+
+  &:hover,
+  &:selected:hover {
+    background-color: transparentize($color, .85);
+  }
+
+  &:focus:hover {
+    background-color: transparentize($color, .8);
+  }
+
+  &:selected,
+  &:focus {
+    background-color: transparentize($color, .9);
+  }
+
+  &:outlined,
+  &:checked,
+  &:active {
+    background-color: transparentize(darken($osd_bg_color, 10%), .5);
+  }
+}
+
+
 // overview icons
+// mixin fo tiles in the overview
 @mixin overview_icon($color) {
   .overview-icon {
-    @extend %icon_tile;
+    @extend %tile;
     color: $color;
   }
 
   &:hover,
+  &:focus:hover,
   &:selected {
     .overview-icon {
       background-color: transparentize($color, .9);
@@ -212,20 +166,20 @@
 
   &:focus {
     .overview-icon {
-      background-color: transparentize($color, .7);
+      background-color: transparentize($color, .95);
       // border-color: $selected_bg_color;
     }
   }
 
   &:drop {
     .overview-icon {
-      border: 2px solid $selected_bg_color; //already 2px transparent so no jumping
+      border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
       background-color: transparentize($selected_bg_color, .8);
     }
   }
 
-  &:focus,
   &:active,
+  &:focus:active,
   &:checked {
     .overview-icon {
       background-color: transparentize(darken($osd_bg_color, 10%), .5);
diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss 
b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index 0b615f20a2..54f6853cfb 100644
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -1,7 +1,6 @@
 // When color definition differs for dark and light variant,
 // it gets @if ed depending on $variant
 
-
 $base_color: #222;
 $bg_color: #000;
 $fg_color: #fff;
@@ -13,7 +12,6 @@ $borders_color: darken($bg_color,12%);
 $borders_edge: transparentize($fg_color, 0.9);
 $link_color: lighten($selected_bg_color,20%);
 $link_visited_color: lighten($selected_bg_color,10%);
-$top_hilight: $borders_edge;
 
 $warning_color: #f57900;
 $error_color: #cc0000;
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 0bc5c74c86..9f44473374 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -21,7 +21,7 @@ $app_grid_fg_color: #fff;
 // Icon tiles in the app grid
 .app-well-app,
 %app_well_app {
-  @include overview-icon($app_grid_fg_color);
+  @include overview_icon($app_grid_fg_color);
 
   .overview-icon.overview-icon-with-label {
     padding: 10px 8px 5px 8px;
@@ -35,7 +35,7 @@ $app_grid_fg_color: #fff;
 /* App Folders */
 .app-well-app.app-folder {
   background-color: $dash_background_color;
-  border-radius: $base_border_radius * 2; // same as %icon_tile
+  border-radius: $base_border_radius * 2; // same as %tile
 }
 
 // expanded folder
@@ -60,7 +60,7 @@ $app_grid_fg_color: #fff;
     & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
 
     & .edit-folder-button {
-      @include button(undecorated, $shadow: none);
+      @include button(undecorated);
       padding: 0;
       width: 36px;
       height: 36px;
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 014844d713..4a8a1f9b61 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -36,6 +36,7 @@ $dash_border_radius: $modal_radius + 8px;
     width: 5px;
     border-radius:5px;
     background-color: $osd_fg_color;
+    margin-top: 2px;
     margin-bottom: 12px;
   }
 }
@@ -53,7 +54,6 @@ $dash_border_radius: $modal_radius + 8px;
 
   // each app item on the dash
   .app-well-app {
-    padding:0;
     margin: 2px;
   }
 
@@ -61,7 +61,6 @@ $dash_border_radius: $modal_radius + 8px;
   .show-apps {
     @include overview_icon($osd_fg_color);
     margin: 2px;
-    padding: 0;
   }
 }
 
@@ -69,7 +68,7 @@ $dash_border_radius: $modal_radius + 8px;
 .dash-separator {
   width: 1px;
   margin: 0 $base_margin*2;
-  background-color: transparentize($borders_color,0.5);
+  background-color: transparentize($borders_color,0.2);
 }
 
 // OSD Tooltip
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index ad63e24ba0..fcf70db7c2 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -1,7 +1,7 @@
 /* Top Bar */
 // a.k.a. the panel
 
-$panel_corner_radius: $base_border_radius+1;
+$panel_corner_radius: 12px;
 $panel_bg_color: #000;
 $panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
 $panel_height: 2.2em;
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss 
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 3ddca4f242..faaf7cda79 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -2,12 +2,14 @@
 
 // the popover itself
 .popup-menu-boxpointer {
+  // override popover styles for panel menus so
+  // we can draw a box shadow and no arrow
   -arrow-border-radius: $modal_radius;
-  -arrow-background-color: $bg_color;
-  -arrow-border-color: $borders_color;
-  -arrow-border-width: 1px;
-  -arrow-base: 24px;
-  -arrow-rise: 12px; 
+  -arrow-background-color: transparent;
+  -arrow-border-color: transparent;
+  -arrow-border-width: 0;
+  -arrow-base: 0;
+  -arrow-rise: $base_margin; // use this as top margin
   -arrow-box-shadow: none; // dreaming bugzilla #689995
   margin: $base_margin; // used as distance from the screen edge
 }
@@ -20,25 +22,10 @@
   //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
   &.panel-menu {
     -boxpointer-gap: $base_margin+2px; // distance from the panel
-    
-    // override popover styles for panel menus so
-    // we can draw a box shadow and no arrow
-    -arrow-border-radius: $modal_radius;
-    -arrow-background-color: transparent;
-    -arrow-border-color: transparent;
-    -arrow-border-width: 0;
-    -arrow-base: 0;
-    -arrow-rise: $base_margin; // use this as top margin
-    -arrow-box-shadow: none; // dreaming bugzilla #689995
-    
     margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
 
     // style the menu content instead
     .popup-menu-content {
-      border-radius: $modal_radius;
-      border: 1px solid $borders_color; 
-      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
-      background-color: $bg_color;
       padding: $base_padding*1.5;
     }
 
@@ -49,6 +36,10 @@
 // popover content;
 .popup-menu-content {
   padding: $base_padding;
+  border-radius: $modal_radius;
+  border: 1px solid $borders_color; 
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+  background-color: $bg_color;
 }
 
 // menu items
@@ -59,8 +50,8 @@
   border-radius: $base_border_radius;
   transition: 0.2s all ease;
 
-  &:ltr { padding-right:1.75em; padding-left: 0; }
-  &:rtl { padding-right: 0; padding-left:1.75em; }
+  &:ltr { padding-right:$base_padding; padding-left: 0; }
+  &:rtl { padding-right: 0; padding-left:$base_padding; }
 
   &:hover {
     background-color: $hover_bg_color;
@@ -68,14 +59,12 @@
 
   &:checked {
     background-color: $hover_bg_color;
-    font-weight: bold;
-
     margin-bottom: 0;
     box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
     border-radius: $base_border_radius $base_border_radius 0 0;
     
     &:hover {
-      background-color: darken($hover_bg_color, 4%);
+      background-color: lighten($hover_bg_color, 5%);
     }
   }
 
@@ -85,8 +74,8 @@
   }
 
   &:active { 
-    background-color: $active_bg_color;
-    color: $active_fg_color;
+    background-color: lighten($active_bg_color,3%);
+    color: lighten($active_fg_color,3%);
   }
 
   &:insensitive { color: transparentize($fg_color,0.5);}
@@ -106,8 +95,6 @@
 // symbolic icons in popover
 .popup-menu-arrow,
 .popup-menu-icon { 
-  margin: 0;
-  padding:0;
   icon-size: 16px !important;
 }
 
@@ -117,32 +104,27 @@
 
 // popover submenus
 .popup-sub-menu {
-  background-color: $hover_bg_color;
   border:none;
+  background-color: $hover_bg_color;
   border-radius: 0 0 $base_border_radius $base_border_radius;
-  padding: 0;
-  margin-top: 0;
-  &:active {
-    background-color: transparent;
-  }
-  
+
   .popup-menu-ornament {
     min-width: 14px !important;
   }
 
   .popup-menu-item {
-    margin: 0;
     border-radius: 0;
+    margin: 0;
     padding: $base_padding*1.5 $base_padding*2;
 
-    &:last-child:hover{
+    &:last-child {
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
   }
 
   .popup-menu-section {
     .popup-menu-item:last-child:hover { border-radius: 0 }
-    &:last-child .popup-menu-item:last-child:hover {
+    &:last-child .popup-menu-item:last-child {
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
   }
@@ -160,16 +142,11 @@
 
 // separator
 .popup-separator-menu-item {
-  padding: 0;
-
-  &:ltr { padding-right:$base_padding; padding-left: 0; }
-  &:rtl { padding-right: 0; padding-left:$base_padding; }
-
+  padding:0;
+  margin: 4px 0;
 
   .popup-separator-menu-item-separator {
     height: 1px; //not really the whole box
-    margin: 0 !important;
-    padding: 0 !important;
     background-color: $borders_color;
   }
 
@@ -199,7 +176,7 @@
   min-width: 22em;
 
   // this is unneeded in at the top-level this menu, hide it
-  .popup-menu-ornament {width:0;padding:0;spacing:0;margin:0;}
+  .popup-menu-ornament {width:0;padding:0;margin:0;}
 
   .popup-menu-item {
     &:ltr { padding-left:$base_padding;padding-right:$base_padding*2; }
@@ -213,8 +190,8 @@
     -st-icon-style: symbolic;
   }
 
+  // account for icons in submenus with padding
   .popup-sub-menu .popup-menu-item > :first-child {
-    // account for icons in submenus with padding
     &:ltr {
       padding-left: 0;
       margin-left: $base_icon_size;
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss 
b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 787311a2e0..c377ba61ff 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -32,23 +32,9 @@
 }
 
 %search_section_content_item {
-  @extend %icon_tile;
+  @include tile($osd_fg_color);
 
-  border-radius: $base_border_radius;
-
-  color: $osd_fg_color;
-
-  &:focus,
-  &:hover,
-  &:selected {
-    background-color: transparentize($osd_fg_color, .9);
-    transition-duration: 200ms;
-  }
-
-  &:active,
-  &:checked {
-    background-color: transparentize(darken($osd_bg_color, 10%), .1);
-  }
+  border-radius: $base_border_radius !important;
 }
 
 // "no results" text
diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss 
b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index 8335b05f65..b3144a2198 100644
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -25,27 +25,7 @@ $switcher_border_radius: $modal_radius + 8px;
 
   // each item in the list
   .item-box {
-    @extend %icon_tile;
-
-    &:outlined {
-      background-color: transparentize($osd_fg_color, 0.7);
-    }
-
-    &:hover,
-    &:selected {
-      background-color: transparentize($osd_fg_color, .9);
-    }
-
-    &:focus {
-      background-color: transparentize($osd_fg_color, .7);
-      // border-color: $selected_bg_color;
-    }
-
-    &:focus,
-    &:active,
-    &:checked {
-      background-color: transparentize(darken($osd_bg_color, 10%), .5);
-    }
+    @include tile($osd_fg_color);
   }
 
   .separator {
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]