update

src/sass/gtk/_common-4.0.scss

@@ -699,8 +699,8 @@ button {
 
   // big standalone buttons like in Documents pager
   &.osd {
-    min-width: $small-size;
+    min-height: 24px;
-    min-width: $small-size;
+    min-width: 24px;
     padding: ($medium-size - 24px) / 2;
     box-shadow: none;
     background-color: rgba(black, 0.35);
@@ -2446,35 +2446,68 @@ tabbar {
   }
 
   .box {
+    background-color: transparent;
+    background-image: none;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
     min-height: $medium-size;
-    border-bottom: none;
+    border: none;
-    background: none;
+    box-shadow: none;
+
+    &:backdrop {
+      background-color: transparent;
+      transition: none;
+
+      > scrolledwindow,
+      > .start-action,
+      > .end-action {
+        filter: none;
+        transition: none;
+      }
+    }
   }
 
-  scrolledwindow.pinned {
+  tabbox {
-    undershoot {
+    padding: 0;
-      border: 0 solid $border;
+    min-height: $medium-size;
+
+    > background {
+      background: none;
     }
 
-    &:dir(rtl) undershoot.left {
+    > separator {
-      border-left-width: 1px;
+      margin: 9px 0;
-    }
+      transition: opacity 150ms ease-in-out;
 
-    &:dir(ltr) undershoot.right {
+      &.hidden {
-      border-right-width: 1px;
+        opacity: 0;
-    }
-
-    tabbox {
-      > background {
-        &:dir(ltr) {
-          box-shadow: inset -1px 0 $border;
-        }
-
-        &:dir(rtl) {
-          box-shadow: inset 1px 0 $border;
-        }
       }
     }
+
+    > tabboxchild {
+      padding: 0;
+    }
+  }
+
+  tab {
+    @extend %tabs_tab;
+    padding: $space-size;
+    margin: $space-size 2px;
+
+    &.needs-attention {
+      background-image: $tab_needs_attention_gradient;
+
+      &:hover {
+        background-image: image(gtkalpha(currentColor, .03)), $tab_needs_attention_gradient;
+      }
+    }
+  }
+
+  tabbox.single-tab tab {
+    &, &:hover, &:active {
+      background: none;
+    }
   }
 
   undershoot {
@@ -2497,114 +2530,51 @@ tabbar {
     @include need-attention-gradient("left");
   }
 
-  tabbox {
-    background-color: $fill;
-    background-image: none;
-    padding: 0;
-    margin: 0;
-    border-radius: 0;
-    border-bottom: 1px solid $border;
-
-    > background {
-      background: none;
-    }
-
-    > separator {
-      margin: 9px 0;
-      min-width: 1px;
-      transition: opacity 150ms ease-in-out;
-
-      &.hidden {
-        opacity: 0;
-      }
-    }
-
-    > tabboxchild {
-      margin: 0 -3px;
-      padding: 0;
-
-      > tab {
-        @extend %tabs_tab;
-        margin: 3px;
-      }
-    }
-  }
-
-  tab {
-    @extend %tabs_tab;
-
-    &.needs-attention {
-      background-image: $tab_needs_attention_gradient;
-
-      &:hover {
-        background-image: image(gtkalpha(currentColor, .03)), $tab_needs_attention_gradient;
-      }
-    }
-  }
-
   .start-action,
   .end-action {
-    background-color: $fill;
+    padding: 6px 5px;
-    background-clip: padding-box;
-    border-color: $border;
-    border-style: solid;
-    transition: background 150ms ease-in-out;
-
-    button {
-      border: none;
-      border-radius: 0;
-    }
   }
 
   .start-action:dir(ltr),
   .end-action:dir(rtl) {
-    border-right-width: 1px;
+    padding-right: 0;
   }
 
   .start-action:dir(rtl),
   .end-action:dir(ltr) {
-    border-left-width: 1px;
+    padding-left: 0;
   }
 
-  &:not(.inline) {
+  &.inline {
-    scrolledwindow.pinned {
+    @extend %tabbar-inline;
-      undershoot {
+  }
-        border-color: $border;
+}
-      }
-    }
 
-    undershoot {
+%tabbar-inline .box {
-      &.left {
+  background-color: transparent;
-        @include undershoot-gradient("right", $titlebar);
+  color: inherit;
-      }
+  box-shadow: none;
+  padding-bottom: 0;
 
-      &.right {
+  &:backdrop {
-        @include undershoot-gradient("left", $titlebar);
+    background-color: transparent;
-      }
+    transition: none;
-    }
 
-    .needs-attention-left undershoot.left {
+    > scrolledwindow,
-      @include need-attention-gradient("right");
+    > .start-action,
+    > .end-action {
+      filter: none;
+      transition: none;
     }
+  }
+}
 
-    .needs-attention-right undershoot.right {
+%tabbar-shrunk {
-      @include need-attention-gradient("left");
+  tabbox,
-    }
+  .start-action,
-
+  .end-action {
-    tabbox > background {
+    padding-top: $space-size / 2;
-      background-color: $titlebar;
+    padding-bottom: $space-size / 2;
-    }
-
-    .start-action,
-    .end-action {
-      background-color: gtkalpha($titlebar, .6);
-      border-color: $border;
-    }
-
-    &:backdrop .box {
-      background-color: $titlebar-backdrop;
-      transition: $transition;
-    }
   }
 }
 
@@ -2638,16 +2608,96 @@ dnd {
       min-width: $small-size;
       min-height: $small-size;
       border-radius: $circular-radius;
+    }
 
-      &.tab-close-button {
+    indicator {
-        margin-right: -$space-size / 2;
+      min-height: 2px;
-      }
+      border-radius: 2px;
+      background: gtkalpha($primary, 0.5);
+      transform: translateY(4px);
     }
   }
 }
 
+tabthumbnail {
+  border-radius: $corner-radius;
+
+  > box {
+    margin: $space-size;
+  }
+
+  &:drop(active) {
+    box-shadow: inset 0 0 0 2px gtkalpha($drop_target_color, .4);
+    background-color: gtkalpha($drop_target_color, .1);
+  }
+
+  transition: $transition-shadow;
+
+  .needs-attention {
+    &:dir(ltr) { transform: translate(8px, -8px); }
+    &:dir(rtl) { transform: translate(-8px, -8px); }
+
+    > widget {
+      background: $primary;
+      min-width: $space-size * 2;
+      min-height: $space-size * 2;
+      border-radius: $modal-radius;
+      margin: $space-size / 2;
+      box-shadow: 0 1px 2px gtkalpha($primary, .4);
+    }
+  }
+
+  .card {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: inherit;
+
+    picture {
+      outline: 1px solid $border;
+      outline-offset: -1px;
+      border-radius: $corner-radius;
+    }
+  }
+
+  &.pinned .card {
+    background-color: $fill;
+    color: $text;
+  }
+
+  .icon-title-box {
+    border-spacing: $space-size;
+  }
+
+  .tab-unpin-icon {
+    margin: $space-size;
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  button.circular {
+    margin: $space-size;
+    background-color: $fill;
+    min-width: 24px;
+    min-height: 24px;
+
+    &:hover {
+      background-color: $overlay-hover;
+    }
+
+    &:active {
+      background-color: $overlay-active;
+    }
+  }
+}
+
+taboverview > .overview  .new-tab-button {
+  margin: 18px;
+}
+
 tabview:drop(active),
-tabbox:drop(active) {
+tabbox:drop(active),
+tabgrid:drop(active) {
   box-shadow: none;
 }
 
@@ -2718,14 +2768,14 @@ scrollbar {
       > range > trough > slider {
         min-width: 4px;
         min-height: 4px;
-        margin: 4px - 1px;
+        margin: 0;
         border: 1px solid rgba($base, 0.3);
       }
 
       button {
         min-width: 4px;
         min-height: 4px;
-        margin: 4px - 1px;
+        margin: 0;
         border: 1px solid rgba($base, 0.3);
         border-radius: $circular-radius;
         background-color: $text-disabled;
@@ -2749,7 +2799,7 @@ scrollbar {
     }
 
     &.dragging,
-    &.hovering { background-color: rgba($surface, 0.9); }
+    &.hovering { background-color: $fill; }
   }
 
   &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
@@ -3429,19 +3479,24 @@ scrolledwindow {
     viewport.frame list { border: none; }
   }
 
-  // This is used when content is touch-dragged past boundaries.
+  > overshoot {
-  // draws a box on top of the content, the size changes programmatically.
+    &.top {
-  @at-root overshoot {
+      @include overshoot(top);
-    &.top { @include overshoot(top); }
+    }
 
-    &.bottom { @include overshoot(bottom); }
+    &.bottom {
+      @include overshoot(bottom);
+    }
 
-    &.left { @include overshoot(left); }
+    &.left {
+      @include overshoot(left);
+    }
 
-    &.right { @include overshoot(right); }
+    &.right {
+      @include overshoot(right);
+    }
   }
 
-  // Overflow indication, works similarly to the overshoot, the size if fixed tho.
   &.undershoot-top {
     @include undershoot(top);
   }
@@ -3459,11 +3514,6 @@ scrolledwindow {
     &:dir(ltr) { @include undershoot(right); }
     &:dir(rtl) { @include undershoot(left); }
   }
-
-  > junction { // the small square between two scrollbars
-    border: none;
-    background-color: $base;
-  }
 }
 
 // vbox and hbox separators
@@ -4200,9 +4250,18 @@ window.messagedialog {
     border-spacing: 10px;
   }
 
-  .response-area > box > button {
+  .response-area button {
     @extend %button-flat;
     @extend %dialog_action_button;
+    margin: 0;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
 
     &.suggested {
       color: $primary;
@@ -4212,35 +4271,6 @@ window.messagedialog {
       color: $destructive;
     }
   }
-
-  &.csd:not(.solid-csd) {
-    border-radius: $window-radius;
-
-    .response-area {
-      > box.horizontal > button {
-        margin: 0;
-
-        &:first-child {
-          margin-left: 0;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      > box.vertical > button {
-        margin-top: 0;
-        margin-bottom: 0;
-
-      &:last-child {
-        border-bottom-left-radius: $window-radius;
-        border-bottom-right-radius: $window-radius;
-        margin-bottom: 0;
-      }
-    }
-    }
-  }
 }
 
 filechooser {
@@ -4278,20 +4308,20 @@ filechooserbutton:drop(active) {
   border-style: none;
   background-color: $base-alt;
 
-  &:not(separator) {
+  // &:not(separator) {
-    &:dir(ltr),
+  //   &:dir(ltr),
-    &.left,
+  //   &.left,
-    &.left:dir(rtl) {
+  //   &.left:dir(rtl) {
-      border-right: 1px solid $border;
+  //     border-right: 1px solid $border;
-      border-left-style: none;
+  //     border-left-style: none;
-    }
+  //   }
 
-    &:dir(rtl),
+  //   &:dir(rtl),
-    &.right {
+  //   &.right {
-      border-left: 1px solid $border;
+  //     border-left: 1px solid $border;
-      border-right-style: none;
+  //     border-right-style: none;
-    }
+  //   }
-  }
+  // }
 
   listview.view,
   list {
@@ -4299,7 +4329,7 @@ filechooserbutton:drop(active) {
     color: inherit;
   }
 
-  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
+  // paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
 }
 
 stacksidebar {

src/sass/gtk/_drawing-4.0.scss

@@ -306,7 +306,7 @@
   }
   
   #{$_selector} undershoot.#{$p} {
-    box-shadow: none;
+    box-shadow: inset $_border_pos $border;
     background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent 4px);
   }
 }
@@ -325,7 +325,7 @@
 
 @mixin transition-shadows($color) {
   > dimming {
-    background: none;
+    background: $color;
   }
   
   > border {

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

@@ -468,14 +468,10 @@ frame.gedit-map-frame > border {
 
 leaflet list.navigation-sidebar {
   background-color: $base-alt;
-  border-bottom-left-radius: $window-radius;
-}
 
-.tweak {
+  window.background.csd:not(.maximized) & {
-  // padding-top: 3px;
+    border-bottom-left-radius: $window-radius;
-  padding: 3px;
+  }
-
-  &.title:hover { box-shadow: none; }
 }
 
 .tweak-group-white,

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

@@ -298,7 +298,9 @@ datechooser {
   navigator {
     label { font-weight: bold; }
 
-    button.toggle, button.image-button {
+    button.flat,
+    button.toggle,
+    button.image-button {
       min-height: $medium-size;
       min-width: $medium-size;
       padding: 0;
@@ -645,7 +647,7 @@ screenshot-carousel button,
   }
 }
 
-button.card.category-tile {
+.category-tile.card {
   padding: $space-size * 3.5;
   border: none;
   border-radius: $corner-radius;

src/sass/gtk/apps/_libadwaita.scss

@@ -369,6 +369,14 @@ overlay-split-view {
   @include transition-shadows($frame);
 }
 
+toolbarview.undershoot-top scrolledwindow {
+  @include undershoot(top);
+}
+
+toolbarview.undershoot-bottom scrolledwindow {
+  @include undershoot(bottom);
+}
+
 // Sidebar
 .unfolded stacksidebar.sidebar { border: none; }
 
@@ -381,14 +389,65 @@ overlay-split-view {
     transition: background-color $duration $ease-out;
   }
 
+  .sidebar-pane {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  .toolbar,
   .navigation-sidebar,
-  headerbar,
   searchbar > revealer > box {
     background-color: transparent;
     box-shadow: none;
     border: none;
   }
 
+  banner > revealer > widget {
+    background-color: gtkmix($primary, $base-alt, 30%);
+    color: $text;
+
+    &:backdrop {
+      background-color: gtkmix($primary, $base-alt, 30%);
+    }
+  }
+}
+
+.content-pane {
+  tabbar {
+    tab {
+      &:checked:not(:active), &:selected:not(:active) {
+        background-color: $overlay-selected;
+        color: $text;
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+/* 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;
+  }
+
+  banner > revealer > widget {
+    background-color: gtkmix($primary, $base, 30%);
+    color: $text;
+
+    &:backdrop {
+      background-color: gtkmix($primary, $base, 30%);
+    }
+  }
+}
+
+.sidebar-pane,
+.content-pane .sidebar-pane,
+.sidebar-pane .content-pane {
   toolbarview.undershoot-top scrolledwindow {
     @include undershoot(top);
   }
@@ -424,18 +483,7 @@ 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;
@@ -443,123 +491,25 @@ overlay-split-view {
   }
 
   &: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 */
+.sidebar-pane,
-.content-pane .sidebar-pane,
+.content-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;
     }
   }
+}
 
+// Gnome >= 45.0
+.top-bar {
   .collapse-spacing {
     padding: 0;
   }