Merge branch 'main' of github.com:vinceliuice/Colloid-gtk-theme

src/other/firefox/chrome/Colloid/parts/tabsbar.css

@@ -230,9 +230,7 @@ tab {
 }
 
 .tab-icon-overlay[crashed] {
-	list-style-image: none !important;
+	list-style-image: url("../icons/info-symbolic.svg") !important;
-	top: 0 !important;
-	inset-inline-end: 0 !important;
 }
 
 /* Close tab button */

src/sass/gnome-shell/_common.scss

@@ -24,10 +24,60 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
  */
 
 // Stage
-stage {
+// stage {
-  @include fontsize($font_size);
+//   @include fontsize($font_size);
-  color: $text;
+//   color: $text;
+// }
+
+/* General Typography */
+
+%large_title {
+  font-weight: 300;
+  @include fontsize(24);
 }
 
+%title_1 {
+  font-weight: 800;
+  @include fontsize(20);
+}
+
+%title_2 {
+  font-weight: 800;
+  @include fontsize(15);
+}
+
+%title_3 {
+  font-weight: 700;
+  @include fontsize(15);
+}
+
+%title_4 {
+  font-weight: 700;
+  @include fontsize(13);
+}
+
+%heading {
+  font-weight: 700;
+  @include fontsize(11);
+}
+
+%caption_heading {
+  font-weight: 700;
+  @include fontsize(9);
+}
+
+%caption {
+  font-weight: 400;
+  @include fontsize(9);
+}
+
+%smaller {
+  font-weight: 400;
+  @include fontsize(8);
+}
+
+%monospace {font-family: monospace;}
+%numeric { font-feature-settings: "tnum";}
+
 @import 'widgets-40-0';
 @import 'extensions-40-0';

src/sass/gnome-shell/_widgets-42-0.scss

@@ -19,6 +19,7 @@
 @import 'common/notifications';
 @import 'common/osd';
 @import 'common/overview';
+@import 'common/quick-settings';
 @import 'common/panel';
 @import 'common/popovers';
 @import 'common/screen-shield';
@@ -39,5 +40,6 @@
 @import 'widgets-40-0/panel';
 @import 'widgets-42-0/popovers';
 @import 'widgets-40-0/search-entry';
+@import 'widgets-42-0/screenshot';
 @import 'widgets-40-0/window-picker';
 @import 'widgets-40-0/workspace-thumbnails';

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

@@ -21,8 +21,20 @@
   padding: 0 $base_padding * 2;
   border-radius: $base_radius;
   border: none;
+  @extend %button;
 
   .popup-menu & {
     @extend %flat_button;
   }
 }
+
+// buttons on OSD elements
+// that are undecorated by default and use OSD colors
+%osd_button {
+  @include button(flat-normal, $tc:on($osd));
+  &:insensitive { @include button(insensitive, $tc:on($osd), $bc:$osd); }
+  &:focus { @include button(focus, $tc:on($osd), $bc:$osd);}
+  &:hover { @include button(hover, $tc:on($osd), $bc:$osd);}
+  &:active { @include button(active, $tc:on($osd), $bc:$osd);}
+  &:outlined, &:checked { @include button(checked, $tc:on($osd), $bc:$osd);}
+}

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

@@ -21,15 +21,6 @@
   }
 }
 
-.clock-display-box {
-  spacing: 2px;
-
-  .clock {
-    padding-left: $base_padding * 2;
-    padding-right: $base_padding * 2;
-  }
-}
-
 // overall menu
 #calendarArea {
   padding: $base_padding 0;
@@ -39,7 +30,7 @@
 .datemenu-calendar-column {
   spacing: $base_spacing;
   border: 0 solid $border;
-  padding: 0 $base_padding * 2;
+  padding: 0 $base_margin 0 $base_padding * 2;
 
   &:ltr { margin-right: $base_margin * 2; border-left-width: 0; }
   &:rtl { margin-left: $base_margin * 2; border-right-width: 0; }
@@ -73,7 +64,7 @@
   margin: 0 $base_padding * 2;
   text-shadow: none;
   color: $text-secondary;
-  border-radius: $menu_radius;
+  border-radius: $base_radius;
 
   &:hover, &:focus {
     background-color: overlay($base, hover);
@@ -101,10 +92,10 @@
   border: none;
   box-shadow: none;
   background-color: transparent;
-  padding: 0 $base_padding !important;
+  padding: 0;
-  margin: 0 !important;
+  margin: 0;
   text-shadow: none;
-  border-radius: $menu_radius;
+  // border-radius: $base_radius;
 
   // month
   .calendar-month-label {
@@ -115,7 +106,7 @@
     text-shadow: none;
     @include fontsize($font_size + 1);
 
-    &:focus {}
+    // &:focus {}
   }
 
   // prev/next month icons
@@ -231,9 +222,9 @@
 
   .calendar-week-number {
     width: $item_size - 6px;
-    height: $item_size - 12px;
+    height: 0;
-    margin: 6px $base_margin/2 !important;
+    margin: 8px 0 8px $base_padding !important;
-    padding: 0 0;
+    padding: 0 !important;
     border-radius: $base_radius;
     background-color: $fill;
     color: $text-disabled;

src/sass/gnome-shell/common/_message-list.scss

@@ -5,7 +5,7 @@
   width: if($compact == 'true', 25.5em, 31.5em);
   text-shadow: none;
   border: none;
-  padding: 0;
+  padding: $base_margin 0;
 
   // padding and margins to account for scrollbar
   &:ltr { margin-left: 0; margin-right: 0; padding-right: 0; border-right-width: 0; }

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

@@ -11,7 +11,7 @@
   color: on(black, secondary);
   border-radius: $circular_radius;
   border: none;
-  box-shadow: 0 2px 3px rgba(black, 0.25);
+  box-shadow: none;
   icon-size: $base_icon_size * 4; // 64px
   // margin: 6px;
 

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

@@ -16,7 +16,7 @@
 .popup-menu {
   min-width: if($compact == 'true', 10em, 12em);
   color: $text-secondary !important;
-  padding: 0 !important;
+  padding: 0;
   font-weight: normal;
   border-radius: $menu_radius;
   box-shadow: 0 3px 6px rgba(black, 0.08);
@@ -24,7 +24,7 @@
   @include fontsize($font_size - 1);
 
   .popup-menu-content {
-    padding: $base_padding 0 !important;
+    padding: $base_padding;
     background-color: $popover;
     border-radius: $menu_radius;
     margin: 0;
@@ -41,8 +41,10 @@
     color: $text-secondary !important;
     text-shadow: none;
     border-radius: $base_radius;
-    margin: 0 $base_padding;
+    margin: 0;
+    transition-duration: 100ms;
     font-weight: normal;
+    background-color: transparent;
 
     &:checked {
       font-weight: normal;
@@ -84,7 +86,7 @@
     color: $text-secondary !important;
     border: none;
     box-shadow: none;
-    margin: 0 $base_padding;
+    margin: 0;
     border-radius: 0 0 $base_radius $base_radius;
 
     .popup-menu-item {
@@ -146,3 +148,20 @@
     -st-icon-style: symbolic;
   }
 }
+
+// right-click (and panel) app menu
+.app-menu {
+  max-width: 27.25em;
+
+  // this is unneeded at the top-level in this menu, hide it
+  .popup-menu-ornament { width: 0 !important; }
+
+  .popup-inactive-menu-item:first-child {
+    // "Open Windows" label
+    > StLabel {
+      @extend %caption_heading;
+      &:ltr {margin-right: $base_margin * 2;}
+      &:rtl {margin-left: $base_margin * 2;}
+    }
+  }
+}

src/sass/gnome-shell/common/_quick-settings.scss

@@ -0,0 +1,183 @@
+.quick-settings {
+  padding: $base_padding * 3 !important;
+  border-radius: $base_radius + $base_padding * 3 !important;
+
+  .icon-button, .button {
+    padding: $base_padding * 1.75;
+  }
+
+  .popup-menu-content {
+    padding: $base_padding * 2 !important;
+  }
+}
+
+.quick-settings-grid {
+  spacing-rows: $base_padding * 2;
+  spacing-columns: $base_padding * 2;
+}
+
+.quick-toggle {
+  border-radius: $base_radius;
+  min-width: 12em;
+  max-width: 12em;
+  min-height: 40px;
+  border: none;
+  background-color: $button !important;
+
+  &:hover {
+    background-color: $divider !important;
+  }
+
+  &:active {
+    background-color: rgba($text, 0.15) !important;
+  }
+
+  &:checked {
+    background-color: $primary !important;
+    color: on($primary);
+
+    &:hover {
+      background-color: mix($text, $primary, 6%) !important;
+      color: on($primary);
+    }
+
+    &:active {
+      background-color: mix($text, $primary, 15%) !important;
+      color: on($primary);
+    }
+  }
+
+  & > StBoxLayout { spacing: $base_padding; }
+
+  /* Move padding into the box; this is to allow menu arrows
+     to extend to the border */
+  &.button { padding: 0; }
+  & > StBoxLayout { padding: 0 $base_padding * 2; }
+  &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
+  &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
+
+  .quick-toggle-label { font-weight: bold; }
+  .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
+}
+
+.quick-menu-toggle {
+  &:ltr > StBoxLayout { padding-right: 0; }
+  &:rtl > StBoxLayout { padding-left: 0; }
+
+  .quick-toggle-arrow {
+    background-color: $button !important;
+    padding: $base_padding $base_padding * 1.75;
+
+    &:active {
+      background-color: $divider !important;
+    }
+
+    &:ltr { border-radius: 0 $base_radius $base_radius 0; }
+    &:rtl { border-radius: $base_radius 0 0 $base_radius; }
+  }
+}
+
+.quick-slider {
+  padding: 0 $base_padding;
+
+  & > StBoxLayout { spacing: $base_padding; }
+
+  .slider-bin {
+    &:focus { @include button(focus); }
+    min-height: 16px; // slider size
+    padding: $base_padding;
+    border-radius: $circular_radius;
+  }
+
+  .quick-toggle-icon {
+    icon-size: $base_icon_size;
+  }
+
+  .icon-button {
+    background-color: transparent;
+    color: $text !important;
+
+    &:hover {
+      background-color: $fill;
+    }
+
+    &:active {
+      background-color: $divider;
+    }
+  }
+}
+
+.quick-toggle-menu {
+  background-color: $popover !important;
+  color: $text !important;
+  border-radius: $base_radius + $base_padding * 2 !important;
+  padding: $base_padding * 2;
+  margin: $base_padding * 2 $base_padding * 3 0;
+
+  .popup-menu-item {
+    border-radius: $base_radius !important;
+
+    &:focus, &:hover, &.selected {
+      color: $text !important;
+      background-color: $divider !important;
+    }
+
+    > StIcon { -st-icon-style: symbolic; }
+  }
+
+  & .header {
+    spacing-rows: 0.5 * $base_padding;
+    spacing-columns: $base_padding * 2;
+    padding-bottom: 2 * $base_padding;
+
+    & .icon {
+      icon-size: $base_icon_size * 1.5; // a non-standard symbolic size but ok
+      border-radius: $base_radius;
+      padding: 1.5 * $base_padding;
+      background-color: on($popover, divider) !important;
+
+      &.active {
+        background-color: $primary !important;
+        color: on($primary);
+      }
+    }
+
+    & .title {
+      @extend %title_3;
+    }
+
+    & .subtitle {
+      @extend %caption_heading;
+    }
+  }
+}
+
+.quick-toggle-menu-container {
+}
+
+.quick-settings-system-item {
+  & > StBoxLayout { spacing: 2 * $base_padding; }
+
+  .icon-button {
+    background-color: $button;
+    color: $text;
+    border-radius: $base_radius;
+    @extend %button;
+
+    > StIcon { -st-icon-style: symbolic; }
+  }
+
+  & .power-item {
+    min-height: 0;
+    min-width: 0;
+
+    &:insensitive {
+      @include button(normal);
+      background-color: transparent;
+    }
+  }
+}
+
+.nm-network-item {
+  .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
+}

src/sass/gnome-shell/widgets-42-0/_popovers.scss

@@ -12,11 +12,13 @@
 .popup-separator-menu-item {
   padding: 0;
 
+  .popup-menu-ornament {
+    width: 0 !important;
+  }
+
   .popup-separator-menu-item-separator {
     height: 1px; //not really the whole box
     background-color: $divider;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
     margin: $base_padding 32px;
 
     .popup-sub-menu & { //submenu separators

src/sass/gnome-shell/widgets-42-0/_screenshot.scss

@@ -0,0 +1,204 @@
+// Screenshot UI
+.icon-label-button-container {
+  spacing: $base_padding;
+  @extend %caption;
+
+  StIcon { icon-size: 32px; }
+}
+
+$screenshot_ui_panel_padding: $base_padding * 3;
+$screenshot_ui_shot_cast_margin: 21px;
+$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
+$screenshot_ui_shot_cast_spacing: 3px;
+
+$screenshot_ui_button_red: $error;
+
+.screenshot-ui-panel {
+  @extend %osd_panel;
+  border-radius: $screenshot_ui_panel_border_radius;
+  padding: $screenshot_ui_panel_padding;
+  // Reduce the bottom padding a little to accommodate the large capture button.
+  padding-bottom: $screenshot_ui_panel_padding - 6px;
+  margin-bottom: 4em;
+  spacing: $base_padding * 2;
+}
+
+.screenshot-ui-close-button {
+  @extend .window-close; // copy window close button
+  padding: $base_padding !important; // but with more padding
+  margin-top: 12px;
+  box-shadow: 0 2px 4px 0 rgba(black, 0.15);
+  &.left { margin-left: $base_padding * 2; }
+  &.right { margin-right: $base_padding * 2; }
+}
+
+.screenshot-ui-type-button {
+  @extend %osd_button;
+  min-width: 48px;
+  padding: $base_padding * 2 $base_padding * 3 !important;
+  border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
+}
+
+.screenshot-ui-capture-button {
+  width: 36px;
+  height: 36px;
+  border-radius: $circular_radius;
+  border: 4px on($osd);
+  padding: 4px;
+
+  .screenshot-ui-capture-button-circle {
+    background-color: on($osd);
+    transition-duration: 200ms;
+    &:hover, &:focus { background-color: $divider; }
+    border-radius: $circular_radius;
+  }
+
+  &:hover, &:focus {
+    .screenshot-ui-capture-button-circle {
+      background-color: darken(on($osd), 15%);
+    }
+  }
+
+  &:active {
+    .screenshot-ui-capture-button-circle {
+      background-color: darken(on($osd), 50%);
+    }
+  }
+
+  &:cast {
+    .screenshot-ui-capture-button-circle {
+      background-color: $screenshot_ui_button_red;
+    }
+    &:hover, &:focus {
+      .screenshot-ui-capture-button-circle {
+        background-color: lighten($screenshot_ui_button_red, 5%);
+      }
+    }
+    &:active {
+      .screenshot-ui-capture-button-circle {
+        background-color: darken($screenshot_ui_button_red, 7%);
+      }
+    }
+  }
+}
+
+.screenshot-ui-shot-cast-container {
+  background-color: lighten($osd, 5%);
+  border-radius: $modal_radius;
+  padding: $screenshot_ui_shot_cast_spacing;
+  spacing: $screenshot_ui_shot_cast_spacing;
+
+  &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
+  &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
+}
+
+.screenshot-ui-shot-cast-button {
+  padding: $base_padding $base_padding * 2;
+  background-color: transparent;
+  &:hover, &:focus { background-color: lighten($osd, 10%);}
+  &:active { background-color: $track;}
+  &:checked { background-color: white; color: black;}
+  &:insensitive { color: transparentize(on($osd), 0.5);}
+
+  border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
+
+  StIcon { icon-size: $base_icon_size;}
+}
+
+.screenshot-ui-show-pointer-button {
+  @extend %osd_button;
+  border-radius: $circular_radius;
+  padding: $base_padding * 2 !important;
+  StIcon { icon-size: $base_icon_size;}
+}
+
+.screenshot-ui-area-indicator-shade {
+  background-color: rgba(0,0,0, .3);
+}
+
+.screenshot-ui-area-selector {
+  .screenshot-ui-area-indicator-shade {
+    background-color: rgba(0,0,0, .5);
+  }
+
+  .screenshot-ui-area-indicator-selection {
+    border: 2px white;
+  }
+}
+
+.screenshot-ui-area-selector-handle {
+  border-radius: $circular_radius;
+  background-color: white;
+  box-shadow: 0 1px 3px 2px rgba(0,0,0, .2);
+  width: 24px;
+  height: 24px;
+}
+
+.screenshot-ui-window-selector {
+  background-color: $scrim;
+
+  .screenshot-ui-window-selector-window-container {
+    margin: 100px;
+  }
+
+  &:primary-monitor {
+    .screenshot-ui-window-selector-window-container {
+      // Make some room for the panel.
+      margin-bottom: 200px;
+    }
+  }
+}
+
+.screenshot-ui-window-selector-window-border {
+  transition-duration: 200ms;
+  border-radius: $modal_radius;
+  border: 6px transparent;
+}
+
+.screenshot-ui-window-selector-check {
+  transition-duration: 200ms;
+  color: transparent;
+  border-radius: 99px;
+  border-width: 12px;
+  icon-size: 24px;
+}
+
+.screenshot-ui-window-selector-window {
+  &:hover {
+    .screenshot-ui-window-selector-window-border {
+      border-color: darken($primary, 15%);
+    }
+  }
+  &:checked {
+    .screenshot-ui-window-selector-window-border {
+      border-color: $primary;
+      background-color: transparentize($primary, 0.8);
+    }
+
+    .screenshot-ui-window-selector-check {
+      color: on($primary);
+      background-color: $primary;
+    }
+  }
+}
+
+.screenshot-ui-screen-selector {
+  transition-duration: 200ms;
+  background-color: rgba(0,0,0,.5);
+
+  &:hover { background-color: rgba(0,0,0,.3);}
+  &:active { background-color: rgba(0,0,0,.7);}
+  &:checked {
+    background-color: transparent;
+    border: 2px white;
+  }
+}
+
+.screenshot-ui-tooltip {
+  color: on($osd);
+  background-color: $osd;
+  border-radius: $circular_radius;
+  padding: $base_padding $base_padding * 2;
+  text-align: center;
+  -y-offset: 24px;
+}

src/sass/gtk/_common-4.0.scss

@@ -1172,7 +1172,7 @@ spinbutton {
 /**************
  * ComboBoxes *
  **************/
-dropdown > popover.menu.background > contents { padding: 0; }
+// dropdown > popover.menu.background > contents { padding: 0; }
 
 dropdown > button > box {
   border-spacing: $space-size;
@@ -1203,7 +1203,7 @@ combobox {
    padding: 0;
 
    listview {
-     margin: $space-size 0;
+     margin: 0;
 
      & > row {
        padding: $space-size;
@@ -1461,12 +1461,12 @@ headerbar {
   }
 
   .title {
-    padding: 0 12px;
+    padding: 0 $space-size * 2;
     font-weight: bold;
   }
 
   .subtitle {
-    padding: 0 12px;
+    padding: 0 $space-size * 2;
     font-size: smaller;
   }
 
@@ -1507,12 +1507,15 @@ headerbar {
   entry,
   spinbutton,
   button,
-  stackswitcher {
+  stackswitcher,
+  separator:not(.sidebar) {
     margin-top: $space-size;
     margin-bottom: $space-size;
   }
 
-  menubutton.popup {
+  menubutton > button,
+  spinbutton > button,
+  splitbutton > button {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -1522,8 +1525,8 @@ headerbar {
   }
 
   separator:not(.sidebar) {
-    margin-top: $large-size / 4;
+    // margin-top: $large-size / 4;
-    margin-bottom: $large-size / 4;
+    // margin-bottom: $large-size / 4;
     background-color: $titlebar-divider;
   }
 
@@ -1935,6 +1938,7 @@ menubar {
  **********************/
 popover.menu {
   box.inline-buttons {
+    color: $text;
     padding: 0 $space-size;
 
     button.image-button.model {
@@ -2125,7 +2129,7 @@ magnifier {
               background-image 0ms;
   min-height: $small-size;
   min-width: $small-size;
-  padding: $space-size / 2 $space-size * 2;
+  padding: $space-size / 2 $space-size;
   margin: 0;
   border: none;
   outline: none;
@@ -2145,7 +2149,7 @@ magnifier {
 
   &:disabled { color: $text-secondary-disabled; }
 
-  &:checked {
+  &:checked, &:selected {
     transition: $transition;
     background-color: if($variant == 'light', rgba($base, 1), rgba(white, 0.15));
     color: $text;
@@ -2371,6 +2375,10 @@ $tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
 }
 
 tabbar {
+  > revealer > box {
+    box-shadow: none;
+  }
+
   .box {
     min-height: $medium-size;
     border-bottom: none;
@@ -2390,7 +2398,8 @@ tabbar {
       border-right-width: 1px;
     }
 
-    tabbox > background {
+    tabbox {
+      > background {
         &:dir(ltr) {
           box-shadow: inset -1px 0 $border;
         }
@@ -2400,6 +2409,7 @@ tabbar {
         }
       }
     }
+  }
 
   undershoot {
     transition: background 150ms ease-in-out;
@@ -2422,15 +2432,23 @@ tabbar {
   }
 
   tabbox {
-    background-color: $fill;
+    background-color: rgba($text, if($variant == 'light', 0.08, 0.04));
     background-image: none;
-    padding: $space-size / 2;
+    padding: $space-size / 2 0;
     margin: $space-size / 2;
     border-radius: $modal-radius + $space-size / 2;
 
     > background {
       background: none;
     }
+
+    > tabboxchild {
+      margin: 0;
+
+      > tab {
+        @extend %tabs_tab;
+      }
+    }
   }
 
   tab {
@@ -2711,12 +2729,12 @@ switch {
 
   > slider {
     transition: all $duration $ease-out;
-    min-width: $small-size - 4px;
+    min-width: $small-size - 6px;
-    min-height: $small-size - 4px;
+    min-height: $small-size - 6px;
-    margin: if($variant == 'light', 1px, 0);
+    margin: $space-size / 2;
     border-radius: $circular-radius;
     outline: none;
-    box-shadow: none;
+    box-shadow: $shadow-z3;
     background-color: white;
     border: none;
   }
@@ -2917,6 +2935,7 @@ columnview.view {
 /************
  * GtkScale *
  ************/
+
 scale {
   // sizing
   $_marks_length: 8px;
@@ -2937,45 +2956,17 @@ columnview.view {
   min-width: $trough_size;
 
   &.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
-
   &.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
 
-   // the slider is inside the trough, so to have make it bigger there's a negative margin
+  > trough {
-   slider {
-     min-height: $slider_size;
-     min-width: $slider_size;
-     margin: $slider_margin;
-   }
-
-   // click-and-hold the slider to activate
-   &.fine-tune {
-     &.horizontal {
-       min-height: $finetune_trough_size;
-       padding-top: ($medium-size - $finetune_trough_size) / 2;
-       padding-bottom: ($medium-size - $finetune_trough_size) / 2;
-     }
-
-     &.vertical {
-       min-width: $finetune_trough_size;
-       padding-left: ($medium-size - $finetune_trough_size) / 2;
-       padding-right: ($medium-size - $finetune_trough_size) / 2;
-     }
-
-     // to make the trough grow in fine-tune mode
-     slider { margin: $finetune_slider_margin; }
-   }
-
-   // the backing bit
-   trough {
     transition: background-color $duration $ease-out;
     outline: none;
     background-color: $track;
 
     &:disabled { background-color: $track-disabled; }
-   }
 
     // the colored part of the backing bit
-   highlight {
+    > highlight {
       transition: background-image $duration $ease-out;
       background-image: image($primary);
 
@@ -2987,14 +2978,19 @@ columnview.view {
 
     // this is another differently styled part of the backing bit, the most relevant use case is for example
     // in media player to indicate how much video stream as been cached
-   fill {
+    > fill {
       transition: background-color $duration $ease-out;
       background-color: $track;
 
       &:disabled { background-color: transparent; }
     }
 
-   slider {
+    // the slider is inside the trough, so to have make it bigger there's a negative margin
+    > slider {
+      min-height: $slider_size;
+      min-width: $slider_size;
+      margin: $slider_margin;
+
       transition: all $duration $ease-out;
       border-radius: $circular-radius;
       color: $primary;
@@ -3013,15 +3009,41 @@ columnview.view {
         box-shadow: inset 0 0 0 2px $text-secondary-disabled;
       }
     }
+  }
 
-   marks,
+  // click-and-hold the slider to activate
-   value { color: $text-secondary; }
+  &.fine-tune {
+    &.horizontal {
+      min-height: $finetune_trough_size;
+      padding-top: ($medium-size - $finetune_trough_size) / 2;
+      padding-bottom: ($medium-size - $finetune_trough_size) / 2;
+    }
+
+    &.vertical {
+      min-width: $finetune_trough_size;
+      padding-left: ($medium-size - $finetune_trough_size) / 2;
+      padding-right: ($medium-size - $finetune_trough_size) / 2;
+    }
+
+    // to make the trough grow in fine-tune mode
+    > trough > slider { margin: $finetune_slider_margin; }
+  }
+
+  > marks,
+  > value { color: $text-secondary; }
 
   indicator {
     background-color: $track;
     color: transparent;
   }
 
+  &.marks-before:not(.marks-after),
+  &.marks-after:not(.marks-before) {
+    > trough > slider {
+      transform: rotate(0);
+    }
+  }
+
   //marks margins
   @each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
                                                                   (horizontal, bottom, bottom, top),
@@ -3063,7 +3085,7 @@ columnview.view {
     @each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
                                         ('marks-after', 'marks-after:not(.marks-before)') {
       &.#{$dir_class}.#{$marks_class} {
-        slider {
+        > trough > slider {
           transition: background-color $duration $ease-out,
                       background-size $ripple-fade-out-duration $ease-out,
                       background-image $ripple-fade-out-opacity-duration $ease-out;
@@ -3117,7 +3139,7 @@ columnview.view {
     &.horizontal {
       padding: 0 0 12px 0;
 
-      slider {
+      > trough > slider {
         &:dir(ltr), &:dir(rtl) { // specificity bump
           margin-bottom: $color_slider_margin;
           margin-top: $color_marks_slider_margin;
@@ -3138,7 +3160,7 @@ columnview.view {
       &:dir(rtl) {
         padding: 0 12px 0 0;
 
-        slider {
+        > trough > slider {
           margin-right: $color_slider_margin;
           margin-left: $color_marks_slider_margin;
         }
@@ -3358,6 +3380,10 @@ separator {
   min-width: 1px;
   min-height: 1px;
   background-color: $divider;
+
+  &.spacer {
+    @extend %hide_separators;
+  }
 }
 
 %hide_separators {
@@ -3519,6 +3545,10 @@ row {
     &:focus, &:hover, &:active { box-shadow: none; }
   }
 
+  button:checked &.activatable {
+    color: on($primary);
+  }
+
   &:selected {
     @extend %selected_items;
     color: inherit; // for overlays
@@ -3727,7 +3757,11 @@ window.dialog.message { // Message Dialog styling
   &.background { background-color: $surface; }
 
   box.dialog-vbox.vertical {
-    border-spacing: 10px;
+    border-spacing: $space-size * 2;
+
+    > box.vertical {
+      margin-bottom: $space-size;
+    }
   }
 
   .titlebar {
@@ -3744,19 +3778,21 @@ window.dialog.message { // Message Dialog styling
   }
 
   .dialog-action-area {
-    margin-top: -$space-size;
+    margin-top: $space-size;
     // padding: $space-size;
 
     > button {
       @extend %button-flat;
+      border-radius: 0;
+      border: none;
+      min-height: $menuitem-size;
+      padding: $space-size $space-size * 2;
 
-      &, &:first-child, &:last-child { border-radius: $circular-radius; }
+      &:first-child { border-radius: 0 0 0 $window-radius; }
 
-      &:not(:last-child) { margin-right: $space-size; }
+      &:last-child { border-radius: 0 0 $window-radius 0; }
 
-      &:not(:disabled) { color: $primary; }
+      &:not(:last-child) { border-right: 1px solid $border; }
-
-      // &.suggested-action:not(:disabled) { color: $suggested; }
 
       &.destructive-action:not(:disabled) { color: $destructive; }
     }
@@ -3929,7 +3965,7 @@ row image.sidebar-icon {
   &:disabled { color: $text-secondary-disabled; }
 }
 
-placessidebar.sidebar {
+placessidebar {
   > viewport.frame { border-style: none; }
 
   list > separator { margin: $space-size / 2 0; }
@@ -4077,12 +4113,11 @@ video {
  * GtkInfoBar *
  **************/
 infobar {
-  border: none;
-  margin-bottom: 0;
-
   > revealer > box {
     padding: $space-size;
     border-spacing: $space-size * 2;
+    border-bottom: 1px solid $border;
+    box-shadow: none;
   }
 
   &.info {

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

@@ -86,11 +86,12 @@ $nautilus: $base-alt;
   .floating-bar {
     min-height: 32px;
     padding: 0;
-    margin: 6px;
+    margin: $space-size;
-    border-style: none;
+    border: none;
     border-radius: $corner-radius;
     background-color: $primary;
     color: on($primary);
+    box-shadow: $shadow-z3;
 
     button {
       margin: (32px - $small-size) / 2;

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

@@ -7,6 +7,24 @@
   placesview {
     label { color: $text-secondary; }
   }
+
+  .floating-bar {
+    min-height: 32px;
+    padding: 0;
+    margin: $space-size;
+    border-style: none;
+    border-radius: $corner-radius;
+    background-color: $primary;
+    color: on($primary);
+    box-shadow: $shadow-z3;
+
+    button {
+      margin: (32px - $small-size) / 2;
+      color: on($primary);
+
+      @extend %small-button;
+    }
+  }
 }
 
 #NautilusPathBar {
@@ -26,6 +44,38 @@
   }
 }
 
+#NautilusQueryEditor { // search entry
+  > menubutton > button {
+    min-width: 16px;
+    min-height: 16px;
+    margin: 0;
+  }
+
+  > text { margin: 0; }
+}
+
+#NautilusPathBar {
+  background-color: $titlebar-fill;
+  border-radius: $corner-radius;
+  margin: $space-size 0;
+
+  #NautilusPathButton {
+    margin: 0 $space-size / 2;
+    border-radius: $corner-radius;
+
+    &.current-dir {
+      color: $titlebar-text;
+
+      &:hover, &:active {
+        background: none;
+        box-shadow: none;
+      }
+    }
+
+    &:first-child { margin-left: 0; }
+  }
+}
+
 /**************
  * Extensions *
  **************/
@@ -73,6 +123,23 @@ window.background.csd {
 
 .history-view { background-color: $base; }
 
+#displayitem {
+  border-top: 1px solid $border;
+}
+
+.small .card {
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid $border;
+}
+
+leaflet {
+  button.number-button {
+    background-color: rgba($text, if($variant == 'light', 0.1, 0.15));
+  }
+}
+
 //
 // Contacts
 //
@@ -81,12 +148,6 @@ window.background.csd {
   background: none;
 }
 
-.small .card {
-  border-radius: 0;
-  box-shadow: none;
-  border-bottom: 1px solid $border;
-}
-
 //
 // Gnome Software
 //

src/sass/gtk/apps/_libadwaita.scss

@@ -45,10 +45,10 @@ avatar {
 .card {
   @at-root %card, & {
     border-radius: $corner-radius;
-    box-shadow: $shadow-z3;
+    box-shadow: none;
     border: 1px solid $border;
     background-clip: border-box;
-    background-color: $surface;
+    background-color: $button;
     color: $text-secondary;
   }
 }
@@ -100,6 +100,8 @@ preferencesgroup > box {
       outline-color: $primary;
     }
   }
+
+  .cutout-button { background-color: $base-alt; }
 }
 
 //