Fixed gnome 45 issues

src/sass/_variables.scss

@@ -49,7 +49,7 @@ $ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1);
 //
 
 $transition: all $duration $ease-out;
-$transition-shadow: box-shadow $duration $ease-out;
+$transition-shadow: box-shadow 200ms ease-out;
 
 //
 // Shadows
@@ -68,9 +68,9 @@ $shadow-z3:
   0 2px 3px -1px rgba(black, 0.06),
   0 1px 4px 0 rgba(black, 0.05);
 $shadow-z4:
-  0 2px 3px -1px rgba(black, 0.15),
+  0 1px 2px 0 rgba(black, 0.15),
-  0 4px 3px 0 rgba(black, 0.18),
+  0 3px 3px 0 rgba(black, 0.18),
-  0 1px 6px 0 rgba(black, 0.12);
+  0 3px 6px 0 rgba(black, 0.12);
 $shadow-z5:
   0 2px 3px -1px rgba(black, 0.05),
   0 4px 6px 0 rgba(black, 0.06),
@@ -84,6 +84,6 @@ $shadow-z12:
   0 12px 10px 2px rgba(black, 0.14),
   0 5px 13px 4px rgba(black, 0.12);
 $shadow-z16:
-  0 8px 6px -5px rgba(black, 0.2),
+  0 1px 3px 0 rgba(black, 0.2),
-  0 16px 15px 2px rgba(black, 0.14),
+  0 15px 16px 2px rgba(black, 0.14),
   0 6px 18px 5px rgba(black, 0.12);

src/sass/gnome-shell/common/_calendar.scss

@@ -131,6 +131,7 @@
     &:active { background-color: $track; }
   }
 
+  .calendar-day,
   .calendar-day-base {
     @include fontsize($font_size - 1);
     text-align: center;
@@ -143,12 +144,17 @@
     border: none;
     font-feature-settings: "tnum";
 
-    &:hover, &:focus { background-color: $divider; }
+    &:hover, &:focus {
+      background-color: $divider;
+      box-shadow: none;
+    }
 
     &:active, &:selected {
       color: $text;
       background-color: $track;
-      border-color: transparent; //avoid jumparound due to today
+      border: none !important; //avoid jumparound due to today
+      box-shadow: none !important;
+      outline: none !important;
     }
 
     &.calendar-day-heading {  //day of week heading
@@ -158,6 +164,12 @@
     }
   }
 
+  &.calendar-weekday {}
+
+  &.calendar-weekend {
+    color: $text-disabled;
+  }
+
   .calendar-day { //border collapse hack - see calendar.js
     border-width: 0;
   }
@@ -172,7 +184,7 @@
 
   .calendar-nonwork-day {
     color: $text-disabled;
-    font-weight: bold;
+    font-weight: normal;
   }
 
   // Today
@@ -206,6 +218,7 @@
   .calendar-day-with-events {
     color: $text-secondary;
     background-image: url("assets/calendar-today.svg");
+    background-size: contain;
 
     &.calendar-work-day {
       color: $text-secondary;
@@ -213,9 +226,10 @@
     }
   }
 
+  .calendar-other-month,
   .calendar-other-month-day {
-    color: $text-secondary-disabled;
+    color: $text-secondary-disabled !important;
-    opacity: 0.5;
+    font-weight: normal;
   }
 
   .calendar-week-number {

src/sass/gnome-shell/common/_panel.scss

@@ -158,6 +158,17 @@
 
     &#panelActivities {
       -natural-hpadding: $base_padding * 3;
+
+      StBoxLayout {
+        spacing: $base_padding;
+      }
+
+      .workspace-dot {
+        border-radius: $circular_radius;
+        min-width: 8px;
+        min-height: 8px;
+        background-color: on($panel-solid);
+      }
     }
   }
 
@@ -203,6 +214,12 @@
           }
         }
       }
+
+      &#panelActivities {
+        .workspace-dot {
+          background-color: on(dark);
+        }
+      }
     }
 
     .panel-corner {

src/sass/gtk/_common-4.0.scss

@@ -3442,20 +3442,27 @@ scrolledwindow {
   }
 
   // Overflow indication, works similarly to the overshoot, the size if fixed tho.
-  // @at-root undershoot {
+  &.undershoot-top {
-  //   &.top { @include undershoot(top); }
+    @include undershoot(top);
-  //
+  }
-  //   &.bottom { @include undershoot(bottom); }
-  //
-  //   &.left { @include undershoot(left); }
-  //
-  //   &.right { @include undershoot(right); }
-  // }
 
-  @at-root junction { // the small square between two scrollbars
+  &.undershoot-bottom {
+    @include undershoot(bottom);
+  }
+
+  &.undershoot-start {
+    &:dir(ltr) { @include undershoot(left); }
+    &:dir(rtl) { @include undershoot(right); }
+  }
+
+  &.undershoot-end {
+    &:dir(ltr) { @include undershoot(right); }
+    &:dir(rtl) { @include undershoot(left); }
+  }
+
+  > junction { // the small square between two scrollbars
     border: none;
-    // background-color: $base;
+    background-color: $base;
-    background-image: none;
   }
 }
 
@@ -4348,14 +4355,16 @@ separator.sidebar {
   padding: $space-size * 0.75 0; //only vertical padding. horizontal row size would clip
   border-right: none;
 
-  &, &.view {
+  &, &.view, &.view:disabled {
     background-color: transparent;
     color: inherit;
   }
 
   &.background {
-    background-color: $base-alt;
+    &, &:disabled {
-    color: $text-secondary;
+      background-color: $base-alt;
+      color: $text-secondary;
+    }
   }
 
   > separator {
@@ -4775,15 +4784,11 @@ window {
 
     @if $rimless == 'true' {
       box-shadow: $shadow-z16,
-      0 2px 3px -1px rgba(black, 0),
+      0 0 36px transparent;
-      0 4px 3px 0 rgba(black, 0),
-      0 1px 6px 0 rgba(black, 0);
     } @else {
       box-shadow: $shadow-z16,
-      0 0 0 1px $window-border,
+      0 0 36px transparent,
-      0 2px 3px -1px rgba(black, 0),
+      0 0 0 1px $window-border;
-      0 4px 3px 0 rgba(black, 0),
-      0 1px 6px 0 rgba(black, 0);
     }
 
     &:backdrop {
@@ -4795,15 +4800,11 @@ window {
 
       @if $rimless == 'true' {
         box-shadow: $shadow-z4,
-        0 8px 6px -5px rgba(black, 0),
+        0 0 36px transparent;
-        0 16px 15px 2px rgba(black, 0),
-        0 6px 18px 5px rgba(black, 0);
       } @else {
         box-shadow: $shadow-z4,
-        0 0 0 1px $window-border,
+        0 0 36px transparent,
-        0 8px 6px -5px rgba(black, 0),
+        0 0 0 1px $window-border;
-        0 16px 15px 2px rgba(black, 0),
-        0 6px 18px 5px rgba(black, 0);
       }
     }
 
@@ -4834,6 +4835,12 @@ window {
 
     &:backdrop { background-color: $titlebar-backdrop; }
   }
+
+  // server-side decorations as used by mutter
+  &.ssd {
+    // just doing borders, wm draws actual shadows
+    box-shadow: 0 0 0 1px $border;
+  }
 }
 
 // Windows button

src/sass/gtk/_drawing-4.0.scss

@@ -273,45 +273,72 @@
 }
 
 
-@mixin undershoot($p) {
+@mixin undershoot($p, $c: $frame, $neighbor: false) {
 //
 // undershoot
 //
 // $p: position
+// $c: shade color
+// $neighbor: use ~ instead of >
 //
 // possible $p values:
 // top, bottom, right, left
 //
 
-  $_undershoot_color_dark: $track;
+  $_border_pos: '';
-  $_undershoot_color_light: transparent;
+  $_direction: '';
+  $_selector: if($neighbor, '~', '>');
 
-  $_gradient_dir: left;
+  @if $p==top {
-  $_dash_bg_size: 12px 1px;
+    $_direction: bottom;
-  $_gradient_repeat: repeat-x;
+    $_border_pos: 0 1px;
-  $_bg_pos: left $p;
+  } @else if $p==bottom {
-
+    $_direction: top;
-  @if ($p == left) or ($p == right) {
+    $_border_pos: 0 -1px;
-    $_gradient_dir: top;
+  } @else if $p==left {
-    $_dash_bg_size: 1px 12px;
+    $_direction: right;
-    $_gradient_repeat: repeat-y;
+    $_border_pos: 1px 0;
-    $_bg_pos: $p top;
+  } @else if $p==right {
+    $_direction: left;
+    $_border_pos: -1px 0;
+  } @else {
+    @error "Unknown position #{$p}"
   }
-
+  
-  background-color: transparent; // shouldn't be needed, but better to be sure
+  #{$_selector} undershoot.#{$p} {
-
+    box-shadow: none;
-  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
+    background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent 4px);
-                                    $_undershoot_color_light 50%,
+  }
-                                    $_undershoot_color_dark 50%);
+}
-
+
-  padding-#{$p}: 1px;
+@mixin background-shadow($direction, $color) {
-  background-size: $_dash_bg_size;
+  background-image:
-  background-repeat: $_gradient_repeat;
+  linear-gradient($direction,
-  background-origin: content-box;
+                  gtkalpha($color, 0.7),
-  background-position: $_bg_pos;
+                  gtkalpha($color, 0.14) 40px,
-  margin: 0 4px;
+                  gtkalpha($color, 0) 56px),
-
+  linear-gradient($direction,
-  @if ($p == left) or ($p == right) {
+                  gtkalpha($color, 0.4),
-    margin: 4px 0;
+                  gtkalpha($color, 0.14) 7px,
+                  gtkalpha($color, 0) 24px);
+}
+
+@mixin transition-shadows($color) {
+  > dimming {
+    background: none;
+  }
+  
+  > border {
+    background: none;
+  }
+  
+  > shadow {
+    min-width: 56px;
+    min-height: 56px;
+  
+    &.left  { @include background-shadow(to right,  $color); }
+    &.right { @include background-shadow(to left,   $color); }
+    &.up    { @include background-shadow(to bottom, $color); }
+    &.down  { @include background-shadow(to top,    $color); }
   }
 }

src/sass/gtk/apps/_gnome-3.0.scss

@@ -466,6 +466,11 @@ frame.gedit-map-frame > border {
   }
 }
 
+leaflet list.navigation-sidebar {
+  background-color: $base-alt;
+  border-bottom-left-radius: $window-radius;
+}
+
 .tweak {
   // padding-top: 3px;
   padding: 3px;
@@ -480,23 +485,13 @@ frame.gedit-map-frame > border {
   background-image: image($base);
 }
 
-.tweak-startup,
-.tweak-startup:hover {
-  // background-color: lighter(shade(@theme_bg_color, 0.9));
-  background-image: image($base);
-}
-
 .tweak-group-startup {
-  // background-color: @view_separators;
+  padding: 0;
-  background-image: image($base);
-  // border: 1px solid $frame;
-
   @extend %circular_list;
 
-  row { @extend %circular_row; }
+  > row { @extend %circular_row; }
 
-  row.tweak-startup {
+  > row.tweak-startup {
-    border-radius: $corner-radius;
     background-color: transparent;
     background-image: none;
   }
@@ -504,8 +499,9 @@ frame.gedit-map-frame > border {
 
 // Workaround for 3.26
 list {
-  &.tweak-group {
+  &.tweak-group, &#ListBoxTweakGroup {
     list {
+      padding: 0;
       @extend %circular_list;
 
       row { @extend %circular_row; }
@@ -677,7 +673,7 @@ hdyleaflet, leaflet, box.horizontal > stack.background {
   }
 
   > box.vertical > scrolledwindow > viewport.frame {
-    list:not(.view):not(.tweak-group) {
+    list:not(.view):not(.tweak-group):not(.tweak-group-startup) {
       padding: $space-size / 2;
 
       row.activatable {

src/sass/gtk/apps/_gnome-4.0.scss

@@ -270,20 +270,6 @@ popover.event-popover > contents {
   }
 }
 
-// Edit dialog's header button
-.sources-button {
-  margin-top: 0;
-  margin-bottom: 0;
-  border-radius: 0;
-  border-top-style: none;
-  border-bottom-style: none;
-
-  &:hover:not(:backdrop) {
-    background-image: none;
-    text-shadow: none;
-  }
-}
-
 // defeats the ugly hover effect of the calendar color dot on buttons
 .calendar-color-image {
   -gtk-icon-filter: none;
@@ -312,7 +298,7 @@ datechooser {
   navigator {
     label { font-weight: bold; }
 
-    button, button.image-button {
+    button.toggle, button.image-button {
       min-height: $medium-size;
       min-width: $medium-size;
       padding: 0;
@@ -505,13 +491,19 @@ monthpopover > box {
 }
 
 // Agenda View CSS
-agenda-view list {
+agenda-view {
-  > row {
+  list {
-    padding: 2px $space-size * 2;
+    > row {
+      padding: 2px $space-size * 2;
+    }
+
+    > label {
+      padding: $space-size $space-size * 2;
+    }
   }
 
-  > label {
+  > scrolledwindow > viewport > list.background {
-    padding: $space-size $space-size * 2;
+    background-color: transparent;
   }
 }
 
@@ -536,8 +528,48 @@ datechooser {
   }
 }
 
-menubutton stack > box {
+menubutton {
-  border-spacing: $space-size;
+  &.sources-button {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-radius: 0;
+    border-top-style: none;
+    border-bottom-style: none;
+    
+    &:hover:not(:backdrop) {
+      background-image: none;
+      text-shadow: none;
+    }
+
+    > button {
+      border-radius: 0;
+
+      .title {
+        font-size: 10pt;
+        font-weight: normal;
+        padding: 0 $space-size;
+      }
+
+      .subtitle {
+        font-size: 8pt;
+        padding: 0 $space-size;
+      }
+
+      .calendar-color-image {
+        -gtk-icon-size: 12px;
+      }
+    }
+  }
+
+  stack > box {
+    border-spacing: $space-size;
+  }
+
+  .topbar headerbar &.sources-button {
+    > button {
+      border-radius: 0 0 $corner-radius $corner-radius;
+    }
+  }
 }
 
 //
@@ -604,7 +636,7 @@ screenshot-carousel button,
   padding: $space-size / 2 $space-size * 1.5;
 }
 
-flowboxchild {
+.card flowboxchild {
   &.card {
     border: none;
     box-shadow: none;

src/sass/gtk/apps/_libadwaita.scss

@@ -99,9 +99,15 @@ toast {
 
 viewswitcher {
   margin: 0;
+  border-spacing: $space-size / 2;
 
   &.wide {
-    border-spacing: $space-size / 2;
+    margin-top: $space-size;
+    margin-bottom: $space-size;
+
+    button.toggle {
+      margin: 0;
+    }
   }
 
   &.narrow button.toggle {
@@ -142,9 +148,47 @@ viewswitcherbar actionbar > revealer > box {
 }
 
 // AdwViewSwitcherTitle
-viewswitchertitle viewswitcher {
+viewswitchertitle {
-  margin-left: $space-size * 2;
+  margin-top: 0;
-  margin-right: $space-size * 2;
+  margin-bottom: 0;
+
+  viewswitcher {
+    margin-left: $space-size * 2;
+    margin-right: $space-size * 2;
+
+    &.narrow {
+      margin-top: 0;
+      margin-bottom: 0;
+
+      button.toggle {
+        > stack > box {
+          &.narrow {
+            padding-top: 0;
+            padding-bottom: 0;
+            border-spacing: 0;
+          }
+        }
+      }
+    }
+
+    &.wide {
+      margin-top: $space-size;
+      margin-bottom: $space-size;
+    }
+  }
+
+  windowtitle {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .top-bar headerbar & viewswitcher {
+    &.narrow {
+      button.toggle {
+        border-radius: 0 0 $corner-radius $corner-radius;
+      }
+    }
+  }
 }
 
 // AdwIndicatorBin
@@ -316,3 +360,207 @@ statuspage {
     }
   }
 }
+
+// Transition shadows
+flap,
+leaflet,
+navigation-view,
+overlay-split-view {
+  @include transition-shadows($frame);
+}
+
+// Sidebar
+.unfolded stacksidebar.sidebar { border: none; }
+
+.sidebar-pane {
+  background-color: $base-alt;
+  color: $text;
+
+  &:backdrop {
+    background-color: $background;
+    transition: background-color $duration $ease-out;
+  }
+
+  .navigation-sidebar,
+  headerbar,
+  searchbar > revealer > box {
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+  }
+
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top);
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom);
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top);
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom)
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left); }
+      &:dir(rtl) { @include undershoot(right); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right); }
+      &:dir(rtl) { @include undershoot(left); }
+    }
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($frame);
+  }
+
+  banner > revealer > widget {
+    background-color: gtkmix($primary, $base-alt, 30%);
+    color: $text;
+
+    &:backdrop {
+      background-color: gtkmix($primary, $base-alt, 30%);
+    }
+  }
+
+  &:dir(ltr), &.end:dir(rtl) {
+    border-top-left-radius: $window-radius;
+
+    &, banner > revealer > widget {
+      box-shadow: none;
+      border-right: 1px solid $border;
+    }
+  }
+
+  &:dir(rtl), &.end:dir(ltr) {
+    border-top-right-radius: $window-radius;
+
+    &, banner > revealer > widget {
+      box-shadow: none;
+      border-left: 1px solid $border;
+    }
+  }
+
+  window.maxmized &:dir(ltr),
+  window.maxmized &.end:dir(rtl) {
+    border-top-left-radius: 0;
+  }
+
+  window.maxmized &:dir(rtl),
+  window.maxmized &.end:dir(rtl) {
+    border-top-right-radius: 0;
+  }
+}
+
+/* Middle pane in three-pane setups */
+.content-pane .sidebar-pane,
+.sidebar-pane .content-pane {
+  background-color: $base;
+  color: $text;
+
+  &:backdrop {
+    background-color: $background;
+    transition: background-color $duration $ease-out;
+  }
+
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top);
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom);
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top);
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom)
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left); }
+      &:dir(rtl) { @include undershoot(right); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right); }
+      &:dir(rtl) { @include undershoot(left); }
+    }
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($border);
+  }
+
+  banner > revealer > widget {
+    background-color: gtkmix($primary, $base, 30%);
+    color: $text;
+
+    &:backdrop {
+      background-color: gtkmix($primary, $base, 30%);
+    }
+  }
+
+  &:dir(ltr), &.end:dir(rtl) {
+    border-top-left-radius: $window-radius;
+
+    &, banner > revealer > widget {
+      box-shadow: none;
+      border-right: 1px solid $border;
+    }
+  }
+
+  &:dir(rtl), &.end:dir(ltr) {
+    border-top-right-radius: $window-radius;
+
+    &, banner > revealer > widget {
+      box-shadow: none;
+      border-left: 1px solid $border;
+    }
+  }
+
+  window.maxmized &:dir(ltr),
+  window.maxmized &.end:dir(rtl) {
+    border-top-left-radius: 0;
+  }
+
+  window.maxmized &:dir(rtl),
+  window.maxmized &.end:dir(rtl) {
+    border-top-right-radius: 0;
+  }
+}
+
+.sidebar-pane .sidebar-pane {
+  background-color: transparent;
+  color: inherit;
+}
+
+// Gnome >= 45.0
+.top-bar {
+  headerbar {
+    &, &:backdrop {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  .collapse-spacing {
+    padding: 0;
+  }
+}