From 6315e8790a81da5e5c863ab4b7d9174b87633d22 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sat, 26 Nov 2022 16:49:47 +0800
Subject: [PATCH 1/7] update

---
 README.md  | 2 +-
 install.sh | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ebf34fc..7e679db 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ OPTIONS:
 
   -l, --libadwaita        Link installed Orchis gtk-4.0 theme to config folder for all libadwaita app use Orchis theme
 
-  --round                 Change button's round corner border-radius [Input the px value you want] (Suggest: 2px < value < 16px)
+  --round                 Change theme round corner border-radius [Input the px value you want] (Suggested: 2px < value < 16px)
 
   -r, --remove,
   -u, --uninstall         Uninstall/Remove installed themes
diff --git a/install.sh b/install.sh
index 973f056..135a9e7 100755
--- a/install.sh
+++ b/install.sh
@@ -17,7 +17,7 @@ OPTIONS:
 
   -l, --libadwaita        Link installed Orchis gtk-4.0 theme to config folder for all libadwaita app use Orchis theme
 
-  --round                 Change button's round corner border-radius [Input the px value you want] (Suggest: 2px < value < 16px)
+  --round                 Change theme round corner border-radius [Input the px value you want] (Suggested: 2px < value < 16px)
 
   -r, --remove,
   -u, --uninstall         Uninstall/Remove installed themes

From 4a63ea4b6b5b3d4895d3ad59577e1e6cd4355f24 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 27 Nov 2022 01:15:52 +0800
Subject: [PATCH 2/7] Fixed #232

---
 src/_sass/gtk/_common-4.0.scss      | 320 ++++++++++++++---------
 src/_sass/gtk/apps/_gnome-4.0.scss  |  21 +-
 src/_sass/gtk/apps/_libadwaita.scss |   5 +-
 src/gtk/4.0/gtk-Compact.css         | 379 +++++++++++++++++-----------
 src/gtk/4.0/gtk-Dark-Compact.css    | 379 +++++++++++++++++-----------
 src/gtk/4.0/gtk-Dark.css            | 379 +++++++++++++++++-----------
 src/gtk/4.0/gtk-Light-Compact.css   | 379 +++++++++++++++++-----------
 src/gtk/4.0/gtk-Light.css           | 379 +++++++++++++++++-----------
 src/gtk/4.0/gtk.css                 | 379 +++++++++++++++++-----------
 9 files changed, 1571 insertions(+), 1049 deletions(-)

diff --git a/src/_sass/gtk/_common-4.0.scss b/src/_sass/gtk/_common-4.0.scss
index 15c7286..a6e94b8 100644
--- a/src/_sass/gtk/_common-4.0.scss
+++ b/src/_sass/gtk/_common-4.0.scss
@@ -271,76 +271,77 @@ spinner {
 /****************
  * Text Entries *
  ****************/
-%entry,
-entry {
-  %entry_basic, & {
-    min-height: $medium-size;
-    padding: 0 8px;
-    border-spacing: $space-size;
-    border-radius: $corner-radius;
-    caret-color: currentColor; // this shouldn't be needed.
-
-    @include entry(normal);
 
-    &:focus-within { @include entry(checked); }
-
-    &:drop(active) { @include entry(hover); }
+%entry-basic {
+  caret-color: currentColor; // this shouldn't be needed.
 
-    &:disabled { @include entry(disabled); }
+  @include entry(normal);
+  &:focus-within { @include entry(checked); }
+  &:drop(active) { @include entry(hover); }
+  &:disabled { @include entry(disabled); }
 
-    // &.search { border-radius: $circular-radius; }
+  image {
+    color: $text-secondary;
 
-    &.flat {
-      min-height: 0;
-      padding: 2px;
-      border-radius: 0;
-      background-color: transparent;
-    }
+    &:hover, &:active { color: $text; }
 
-    image { // icons inside the entry
-      color: $text-secondary;
+    &:disabled { color: $text-disabled; }
+  }
+}
 
-      &:hover, &:active { color: $text; }
+entry {
+  min-height: $medium-size;
+  padding: 0 8px;
+  border-spacing: $space-size;
+  border-radius: $corner-radius;
+  @extend %entry-basic;
 
-      &:disabled { color: $text-disabled; }
+  // &.search { border-radius: $circular-radius; }
 
-      &.left {
-        margin-left: ($medium-size - 16px) / 2 - 8px;
-        margin-right: 6px;
-      }
+  &.flat {
+    min-height: 0;
+    padding: 2px;
+    border-radius: 0;
+    background-color: transparent;
+  }
 
-      &.right {
-        margin-left: 6px;
-        margin-right: ($medium-size - 16px) / 2 - 8px;
-      }
+  image { // icons inside the entry
+    &.left {
+      margin-left: ($medium-size - 16px) / 2 - 8px;
+      margin-right: 6px;
     }
 
-    undershoot {
-      &.left { @include undershoot(left); }
-
-      &.right { @include undershoot(right); }
+    &.right {
+      margin-left: 6px;
+      margin-right: ($medium-size - 16px) / 2 - 8px;
     }
+  }
 
-    > text > selection { @extend %selected_items_primary; }
+  undershoot {
+    &.left { @include undershoot(left); }
 
-    // entry error and warning style
-    @each $e_type, $e_color in (error, $error),
-                               (success, $success),
-                               (warning, $warning) {
-      &.#{$e_type} {
-        @include entry(normal, $e_color);
+    &.right { @include undershoot(right); }
+  }
 
-        image { color: $e_color; }
+  > text > selection { @extend %selected_items_primary; }
 
-        selection {
-          color: on($e_color);
-          background-color: $e_color;
-        }
+  // entry error and warning style
+  @each $e_type, $e_color in (error, $error),
+                             (success, $success),
+                             (warning, $warning) {
+    &.#{$e_type} {
+      @include entry(normal, $e_color);
 
-        &:focus-within { @include entry(checked, $e_color); }
+      image { color: $e_color; }
 
-        &:disabled { @include entry(disabled, $e_color); }
+      selection {
+        color: on($e_color);
+        background-color: $e_color;
       }
+
+      &:focus-within { @include entry(checked, $e_color); }
+
+      &:disabled { @include entry(disabled, $e_color); }
     }
   }
 
@@ -750,20 +751,17 @@ button.link {
  * GtkSpinButton *
  *****************/
 spinbutton {
-  &:not(.vertical) {
-    // in this horizontal configuration, the whole spinbutton
-    // behaves as the entry, so we extend the entry styling
-    // and nuke the style on the internal entry
-    @extend %entry;
-
+  &:not(.vertical),
+  &.vertical {
+    @include entry(normal);
+    &:focus-within { @include entry(checked); }
+    &:disabled { @include entry(disabled); }
+    border-radius: $corner-radius;
     padding: 0;
     border-spacing: 0;
 
     > text {
-      min-width: $large-size - 8px * 2;
-      // reset all the other props since the spinbutton node is styled here
       margin: 0;
-      padding-left: $space-size * 2;
       border-image: none;
       border-radius: 0;
       box-shadow: none;
@@ -773,17 +771,29 @@ spinbutton {
     > button {
       @extend %button-flat-simple;
       @extend %small-button;
-      margin: 0;
-
-      // margin: $space-size;
-      border: solid $space-size transparent;
+      padding: 0;
+      border: $space-size solid transparent;
 
       // Remove unwanted focus indicator
       &:focus:not(:hover):not(:active):not(:disabled) {
         box-shadow: inset 0 0 0 9999px transparent;
         color: $text-secondary;
       }
+    }
+  }
+
+  &:not(.vertical) {
+    // in this horizontal configuration, the whole spinbutton
+    // behaves as the entry, so we extend the entry styling
+    // and nuke the style on the internal entry
 
+    > text {
+      min-width: $large-size - 8px * 2;
+      // reset all the other props since the spinbutton node is styled here
+      padding-left: $space-size * 2;
+    }
+
+    > button {
       &.up:dir(ltr),
       &.down:dir(rtl) { margin-left: -$space-size / 2; }
 
@@ -794,38 +804,16 @@ spinbutton {
 
   // Vertical
   &.vertical {
-    @extend %entry;
-
-    padding: 0;
-
     &:disabled { color: $text-disabled; }
 
     > text {
-      margin: 0;
-      border-image: none;
-      border-radius: 0;
-      box-shadow: none;
-      background-color: transparent;
-
       min-height: $medium-size;
       min-width: $large-size - $space-size;
       padding: 0;
     }
 
     > button {
-      @extend %button-flat-simple;
-      @extend %small-button;
-      padding: 0;
-      border: solid $space-size transparent;
-
-      // Remove unwanted focus indicator
-      &:focus:not(:hover):not(:active) {
-        box-shadow: inset 0 0 0 9999px transparent;
-        color: $text-secondary;
-      }
-
       &.up { margin: 0 $space-size / 2; }
-
       &.down { margin: 0 $space-size / 2; }
     }
   }
@@ -1095,8 +1083,15 @@ searchbar > revealer > box {
 }
 
 %titlebar-entry {
-  background-color: $titlebar-fill;
-  color: $titlebar-text;
+  caret-color: $titlebar-text;
+
+  &, &:focus-within {
+    background-color: $titlebar-fill;
+
+    &, & > text {
+      color: $titlebar-text;
+    }
+  }
 
   &:disabled {
     background-color: $titlebar-fill;
@@ -1115,19 +1110,29 @@ searchbar > revealer > box {
 headerbar {
   transition: background-color $duration $ease-out, color $duration $ease-out;
   box-shadow: inset 0 -1px $divider, inset 0 1px highlight($titlebar);
-  background-color: $titlebar;
   color: $titlebar-text;
   min-height: $large-size;
   padding: 0;
   margin: 0;
   border-radius: $window-radius $window-radius 0 0;
 
+  @if $variant == 'light' and $topbar == 'dark' {
+    background-color: transparent;
+  } @else {
+    background-color: $titlebar;
+  }
+
   &:disabled { color: $titlebar-text-disabled; }
 
   &:backdrop {
-    background-color: $titlebar-backdrop;
     color: $titlebar-text-secondary;
 
+    @if $variant == 'light' and $topbar == 'dark' {
+      background-color: transparent;
+    } @else {
+      background-color: $titlebar-backdrop;
+    }
+
     &:disabled { color: $titlebar-text-secondary-disabled; }
   }
 
@@ -1195,15 +1200,29 @@ headerbar {
 
   button.toggle { border-radius: $circular-radius; }
 
-  popover.background {
+  popover.background { // reset
+    > contents {
+      color: $text;
+
+      .dim-label { color: $text-secondary; }
+    }
+
     button, entry, spinbutton {
       border-radius: $menuitem-radius;
     }
 
-    button:not(.suggested-action):not(.destructive-action):not(.flat) {
+    button:not(.suggested-action):not(.destructive-action) {
       @extend %button-basic;
+
+      &.flat {
+        @extend %button-flat;
+      }
+
+      image { color: $text; }
     }
 
+    entry { @extend %entry-basic; }
+
     .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
       border-radius: 0;
 
@@ -1219,11 +1238,30 @@ headerbar {
 
     &.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button {
       border-radius: $circular-radius;
-    }
-  }
+      color: $titlebar-text-secondary;
 
-  box.vertical & {
-    background-color: $titlebar;
+      &:focus, &:hover, &:active, &:checked { color: $titlebar-text; }
+
+      &:disabled { color: $titlebar-text-secondary-disabled; }
+
+      &:checked:disabled {
+        color: on($primary, disabled);
+      }
+
+      &:backdrop {
+        color: $titlebar-text-disabled;
+
+        &:focus, &:hover, &:active { color: $titlebar-text-secondary; }
+
+        &:disabled { color: $titlebar-text-secondary-disabled; }
+
+        &:checked {
+          color: on($primary, disabled);
+
+          &:disabled { color: on($primary, secondary-disabled); }
+        }
+      }
+    }
   }
 
   > windowhandle > box {
@@ -1375,6 +1413,34 @@ pathbar > button {
   }
 }
 
+.pathbar {
+  background-color: $fill;
+  color: $text-secondary;
+  border: none;
+  border-radius: $corner-radius;
+  padding: 2px;
+
+  headerbar & {
+    margin-top: $space-size;
+    margin-bottom: $space-size;
+    background-color: on($titlebar, fill);
+    color: $titlebar-text-secondary;
+  }
+
+  > button {
+    margin-top: 0;
+    margin-bottom: 0;
+    min-height: 20px;
+    border-radius: $corner-radius - 2px;
+    border: none;
+    box-shadow: none;
+
+    &:last-child {
+      @include button(flat-checked);
+    }
+  }
+}
+
 
 /**************
  * Tree Views *
@@ -1615,32 +1681,6 @@ popover.menu {
     margin-right: 0;
   }
 
-  modelbutton {
-    transition: background-color $duration $ease-out;
-    min-height: $menuitem-size - $space-size;
-    min-width: $menuitem-size * 2;
-    padding: $space-size / 2 $space-size * 1.5;
-    border-radius: $menuitem-radius;
-    color: $text;
-    font: initial;
-    text-shadow: none;
-    border-spacing: $space-size;
-    @extend %button-flat-simple;
-
-    accelerator {
-      color: $text-disabled;
-
-      &:disabled {
-        color: $divider;
-      }
-    }
-
-    arrow {
-      &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
-      &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
-    }
-  }
-
   label.title {
     font-weight: bold;
     padding: 4px ($space-size + 20px); //this will fall apart with font sizing
@@ -1708,6 +1748,33 @@ popover.background {
     &:only-child { border-radius: $menuitem-radius; }
   }
 
+  modelbutton {
+    transition: background-color $duration $ease-out;
+    min-height: $menuitem-size - $space-size;
+    min-width: $menuitem-size * 2;
+    padding: $space-size / 2 $space-size * 1.5;
+    border-radius: $menuitem-radius;
+    color: $text;
+    font: initial;
+    text-shadow: none;
+    border-spacing: $space-size;
+    @extend %button-flat-simple;
+
+    accelerator {
+      color: $text-disabled;
+      margin-left: $space-size * 5;
+
+      &:disabled {
+        color: $divider;
+      }
+    }
+
+    arrow {
+      &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
+      &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
+    }
+  }
+
   &.menu button,
   button.model {
     min-height: 32px;
@@ -2926,8 +2993,13 @@ row {
     @extend %button-flat-simple;
   }
 
-  button:hover &, button:active &, button:checked & {
-    background-color: transparent;
+  button & {
+    &, &:hover, &.has-open-popup, &:active {
+      background-color: transparent;
+      box-shadow: none;
+      background-image: none;
+      transition: none;
+    }
   }
 
   button:checked & {
diff --git a/src/_sass/gtk/apps/_gnome-4.0.scss b/src/_sass/gtk/apps/_gnome-4.0.scss
index b8aa2f5..d3c271b 100644
--- a/src/_sass/gtk/apps/_gnome-4.0.scss
+++ b/src/_sass/gtk/apps/_gnome-4.0.scss
@@ -284,11 +284,17 @@
 
 #NautilusQueryEditor { // search entry
   border-radius: $circular-radius;
+  color: $titlebar-text-secondary;
 
-  > menubutton > button {
-    min-width: 16px;
-    min-height: 16px;
+  &:focus-within { color: $titlebar-text; }
+
+  &:disabled { color: $titlebar-text-secondary-disabled; }
+
+  > menubutton > button.image-button {
+    min-width: $menuitem-size;
+    min-height: $menuitem-size;
     margin: 0;
+    padding: 0;
   }
 
   > text { margin: 0; }
@@ -334,6 +340,7 @@
 //
 // Gnome Control Center
 //
+
 window.dialog {
   > box > stack > box > box {
     > notebook.frame {
@@ -343,6 +350,14 @@ window.dialog {
   }
 }
 
+window.background {
+  > contents > leaflet {
+    stack.background {
+      background-color: transparent;
+    }
+  }
+}
+
 //
 // Calculator
 //
diff --git a/src/_sass/gtk/apps/_libadwaita.scss b/src/_sass/gtk/apps/_libadwaita.scss
index f7bbcf4..38b20de 100644
--- a/src/_sass/gtk/apps/_libadwaita.scss
+++ b/src/_sass/gtk/apps/_libadwaita.scss
@@ -714,11 +714,8 @@ tabbox:drop(active) {
 //
 
 leaflet {
-  outline-color: highlight($titlebar);
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
   border-radius: $window-radius;
+  box-shadow: inset 0 1px highlight($titlebar);
 
   headerbar {
     border-radius: 0;
diff --git a/src/gtk/4.0/gtk-Compact.css b/src/gtk/4.0/gtk-Compact.css
index ebfc806..dfa131b 100644
--- a/src/gtk/4.0/gtk-Compact.css
+++ b/src/gtk/4.0/gtk-Compact.css
@@ -277,12 +277,7 @@ spinner:checked:disabled {
 /****************
  * Text Entries *
  ****************/
-spinbutton.vertical, spinbutton:not(.vertical),
-entry {
-  min-height: 32px;
-  padding: 0 8px;
-  border-spacing: 4px;
-  border-radius: 10px;
+headerbar popover.background entry, entry {
   caret-color: currentColor;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -292,8 +287,7 @@ entry {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.vertical:focus-within, spinbutton:focus-within:not(.vertical),
-entry:focus-within {
+headerbar popover.background entry:focus-within, entry:focus-within {
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
   box-shadow: inset 0 0 0 2px transparent;
@@ -302,16 +296,14 @@ entry:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.vertical:drop(active), spinbutton:drop(active):not(.vertical),
-entry:drop(active) {
+headerbar popover.background entry:drop(active), entry:drop(active) {
   background-color: alpha(currentColor, 0.08);
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
   color: rgba(0, 0, 0, 0.87);
   outline: none;
 }
 
-spinbutton.vertical:disabled, spinbutton:disabled:not(.vertical),
-entry:disabled {
+headerbar popover.background entry:disabled, entry:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -321,48 +313,46 @@ entry:disabled {
   opacity: 1;
 }
 
-spinbutton.vertical:disabled > label, spinbutton:disabled:not(.vertical) > label,
-entry:disabled > label {
+headerbar popover.background entry:disabled > label, entry:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.flat.vertical, spinbutton.flat:not(.vertical),
-entry.flat {
-  min-height: 0;
-  padding: 2px;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-spinbutton.vertical image, spinbutton:not(.vertical) image,
-entry image {
+headerbar popover.background entry image, entry image {
   color: rgba(0, 0, 0, 0.6);
 }
 
-spinbutton.vertical image:hover, spinbutton:not(.vertical) image:hover, spinbutton.vertical image:active, spinbutton:not(.vertical) image:active,
-entry image:hover,
-entry image:active {
+headerbar popover.background entry image:hover, entry image:hover, headerbar popover.background entry image:active, entry image:active {
   color: rgba(0, 0, 0, 0.87);
 }
 
-spinbutton.vertical image:disabled, spinbutton:not(.vertical) image:disabled,
-entry image:disabled {
+headerbar popover.background entry image:disabled, entry image:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical image.left, spinbutton:not(.vertical) image.left,
+entry {
+  min-height: 32px;
+  padding: 0 8px;
+  border-spacing: 4px;
+  border-radius: 10px;
+}
+
+entry.flat {
+  min-height: 0;
+  padding: 2px;
+  border-radius: 0;
+  background-color: transparent;
+}
+
 entry image.left {
   margin-left: 0px;
   margin-right: 6px;
 }
 
-spinbutton.vertical image.right, spinbutton:not(.vertical) image.right,
 entry image.right {
   margin-left: 6px;
   margin-right: 0px;
 }
 
-spinbutton.vertical undershoot.left, spinbutton:not(.vertical) undershoot.left,
 entry undershoot.left {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.26) 50%);
@@ -375,7 +365,6 @@ entry undershoot.left {
   margin: 4px 0;
 }
 
-spinbutton.vertical undershoot.right, spinbutton:not(.vertical) undershoot.right,
 entry undershoot.right {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.26) 50%);
@@ -388,7 +377,6 @@ entry undershoot.right {
   margin: 4px 0;
 }
 
-spinbutton.error.vertical, spinbutton.error:not(.vertical),
 entry.error {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -398,18 +386,15 @@ entry.error {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.error.vertical image, spinbutton.error:not(.vertical) image,
 entry.error image {
   color: #D93025;
 }
 
-spinbutton.error.vertical selection, spinbutton.error:not(.vertical) selection,
 entry.error selection {
   color: white;
   background-color: #D93025;
 }
 
-spinbutton.error.vertical:focus-within, spinbutton.error:focus-within:not(.vertical),
 entry.error:focus-within {
   background-color: rgba(217, 48, 37, 0.08);
   color: #D93025;
@@ -419,7 +404,6 @@ entry.error:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.error.vertical:disabled, spinbutton.error:disabled:not(.vertical),
 entry.error:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(217, 48, 37, 0.04);
@@ -430,12 +414,10 @@ entry.error:disabled {
   opacity: 1;
 }
 
-spinbutton.error.vertical:disabled > label, spinbutton.error:disabled:not(.vertical) > label,
 entry.error:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.success.vertical, spinbutton.success:not(.vertical),
 entry.success {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -445,18 +427,15 @@ entry.success {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.success.vertical image, spinbutton.success:not(.vertical) image,
 entry.success image {
   color: #0F9D58;
 }
 
-spinbutton.success.vertical selection, spinbutton.success:not(.vertical) selection,
 entry.success selection {
   color: white;
   background-color: #0F9D58;
 }
 
-spinbutton.success.vertical:focus-within, spinbutton.success:focus-within:not(.vertical),
 entry.success:focus-within {
   background-color: rgba(15, 157, 88, 0.08);
   color: #0F9D58;
@@ -466,7 +445,6 @@ entry.success:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.success.vertical:disabled, spinbutton.success:disabled:not(.vertical),
 entry.success:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(15, 157, 88, 0.04);
@@ -477,12 +455,10 @@ entry.success:disabled {
   opacity: 1;
 }
 
-spinbutton.success.vertical:disabled > label, spinbutton.success:disabled:not(.vertical) > label,
 entry.success:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.warning.vertical, spinbutton.warning:not(.vertical),
 entry.warning {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -492,18 +468,15 @@ entry.warning {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.warning.vertical image, spinbutton.warning:not(.vertical) image,
 entry.warning image {
   color: #F4B400;
 }
 
-spinbutton.warning.vertical selection, spinbutton.warning:not(.vertical) selection,
 entry.warning selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #F4B400;
 }
 
-spinbutton.warning.vertical:focus-within, spinbutton.warning:focus-within:not(.vertical),
 entry.warning:focus-within {
   background-color: rgba(244, 180, 0, 0.08);
   color: #F4B400;
@@ -513,7 +486,6 @@ entry.warning:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.warning.vertical:disabled, spinbutton.warning:disabled:not(.vertical),
 entry.warning:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(244, 180, 0, 0.04);
@@ -524,14 +496,10 @@ entry.warning:disabled {
   opacity: 1;
 }
 
-spinbutton.warning.vertical:disabled > label, spinbutton.warning:disabled:not(.vertical) > label,
 entry.warning:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical > progress, spinbutton:not(.vertical) > progress,
-spinbutton.vertical progress > trough > progress,
-spinbutton:not(.vertical) progress > trough > progress,
 entry > progress,
 entry progress > trough > progress {
   margin: 2px -8px;
@@ -620,7 +588,7 @@ editablelabel > stack > text {
   color: rgba(255, 255, 255, 0.5);
 }
 
-headerbar popover.background button:not(.suggested-action):not(.destructive-action):not(.flat), button {
+headerbar popover.background button:not(.suggested-action):not(.destructive-action), button {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   outline: none;
   box-shadow: inset 0 0 0 9999px transparent;
@@ -632,15 +600,15 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
   color: rgba(0, 0, 0, 0.87);
 }
 
-headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action):not(.flat), button:focus {
+headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action), button:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08), inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:hover {
+headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action), button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
-headerbar popover.background button:active:not(.suggested-action):not(.destructive-action):not(.flat), button:active {
+headerbar popover.background button:active:not(.suggested-action):not(.destructive-action), button:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
   animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -648,7 +616,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
   background-size: 100% 100%;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:disabled {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action), button:disabled {
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -656,21 +624,21 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat) > label, button:disabled > label {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action):not(.flat), button:checked {
+headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #1A73E8;
   color: white;
 }
 
-headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:hover {
+headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action), button:checked:hover {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:disabled {
+headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action), button:checked:disabled {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -689,9 +657,9 @@ button:drop(active) {
 }
 
 .nautilus-window tabbar tab:active > button.flat, .nautilus-window tabbar tab:checked > button.flat, .nautilus-window tabbar tab:selected > button.flat, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button, stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action), windowcontrols button, placessidebar .navigation-sidebar > row button.sidebar-button, calendar > header > button, row button.circular, check,
-radio, scrollbar button, notebook > header > tabs > arrow, popover.menu modelbutton, spinbutton.vertical > button, spinbutton:not(.vertical) > button, tabbar tab button.image-button,
+radio, scrollbar button, notebook > header > tabs > arrow, popover.background modelbutton, spinbutton:not(.vertical) > button, spinbutton.vertical > button, tabbar tab button.image-button,
 dnd tab button.image-button, splitbutton.flat > button,
-splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
+splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar popover.background button.flat:not(.suggested-action):not(.destructive-action), headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
 toolbar button, dropdown > .linked:not(.vertical) > button:not(:only-child),
 combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
@@ -706,9 +674,9 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
 }
 
 .nautilus-window tabbar tab:active > button.flat:focus, .nautilus-window tabbar tab:checked > button.flat:focus, .nautilus-window tabbar tab:selected > button.flat:focus, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:focus, stackswitcher.linked:not(.vertical) > button:focus:not(.suggested-action):not(.destructive-action), windowcontrols button:focus, placessidebar .navigation-sidebar > row button.sidebar-button:focus, calendar > header > button:focus, row button.circular:focus, check:focus,
-radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.menu modelbutton:focus, spinbutton.vertical > button:focus, spinbutton:not(.vertical) > button:focus, tabbar tab button.image-button:focus,
+radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.background modelbutton:focus, spinbutton:not(.vertical) > button:focus, spinbutton.vertical > button:focus, tabbar tab button.image-button:focus,
 dnd tab button.image-button:focus, splitbutton.flat > button:focus,
-splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
+splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar popover.background button.flat:focus:not(.suggested-action):not(.destructive-action), headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
 toolbar button:focus, dropdown > .linked:not(.vertical) > button:focus:not(:only-child),
 combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
@@ -716,9 +684,9 @@ combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:f
 }
 
 .nautilus-window tabbar tab:active > button.flat:hover, .nautilus-window tabbar tab:checked > button.flat:hover, .nautilus-window tabbar tab:selected > button.flat:hover, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:hover, stackswitcher.linked:not(.vertical) > button:hover:not(.suggested-action):not(.destructive-action), windowcontrols button:hover, placessidebar .navigation-sidebar > row button.sidebar-button:hover, calendar > header > button:hover, row button.circular:hover, check:hover,
-radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.menu modelbutton:hover, spinbutton.vertical > button:hover, spinbutton:not(.vertical) > button:hover, tabbar tab button.image-button:hover,
+radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.background modelbutton:hover, spinbutton:not(.vertical) > button:hover, spinbutton.vertical > button:hover, tabbar tab button.image-button:hover,
 dnd tab button.image-button:hover, splitbutton.flat > button:hover,
-splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
+splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar popover.background button.flat:hover:not(.suggested-action):not(.destructive-action), headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
 toolbar button:hover, dropdown > .linked:not(.vertical) > button:hover:not(:only-child),
 combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -726,9 +694,9 @@ combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:h
 }
 
 .nautilus-window tabbar tab:active > button.flat:active, .nautilus-window tabbar tab:checked > button.flat:active, .nautilus-window tabbar tab:selected > button.flat:active, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:active, stackswitcher.linked:not(.vertical) > button:active:not(.suggested-action):not(.destructive-action), windowcontrols button:active, placessidebar .navigation-sidebar > row button.sidebar-button:active, calendar > header > button:active, row button.circular:active, check:active,
-radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.menu modelbutton:active, spinbutton.vertical > button:active, spinbutton:not(.vertical) > button:active, tabbar tab button.image-button:active,
+radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.background modelbutton:active, spinbutton:not(.vertical) > button:active, spinbutton.vertical > button:active, tabbar tab button.image-button:active,
 dnd tab button.image-button:active, splitbutton.flat > button:active,
-splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
+splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar popover.background button.flat:active:not(.suggested-action):not(.destructive-action), headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
 toolbar button:active, dropdown > .linked:not(.vertical) > button:active:not(:only-child),
 combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
@@ -740,9 +708,9 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
 }
 
 .nautilus-window tabbar tab:active > button.flat:disabled, .nautilus-window tabbar tab:checked > button.flat:disabled, .nautilus-window tabbar tab:selected > button.flat:disabled, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:disabled, stackswitcher.linked:not(.vertical) > button:disabled:not(.suggested-action):not(.destructive-action), windowcontrols button:disabled, placessidebar .navigation-sidebar > row button.sidebar-button:disabled, calendar > header > button:disabled, row button.circular:disabled, check:disabled,
-radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.menu modelbutton:disabled, spinbutton.vertical > button:disabled, spinbutton:not(.vertical) > button:disabled, tabbar tab button.image-button:disabled,
+radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.background modelbutton:disabled, spinbutton:not(.vertical) > button:disabled, spinbutton.vertical > button:disabled, tabbar tab button.image-button:disabled,
 dnd tab button.image-button:disabled, splitbutton.flat > button:disabled,
-splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
+splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar popover.background button.flat:disabled:not(.suggested-action):not(.destructive-action), headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
 toolbar button:disabled, dropdown > .linked:not(.vertical) > button:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.flat:disabled {
   box-shadow: none;
@@ -752,7 +720,7 @@ combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.fla
 
 tabbar tab button.image-button:checked,
 dnd tab button.image-button:checked, splitbutton.flat > button:checked,
-splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
+splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar popover.background button.flat:checked:not(.suggested-action):not(.destructive-action), headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
 toolbar button:checked, dropdown > .linked:not(.vertical) > button:checked:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat:checked, button.flat:checked:hover {
   background-color: alpha(currentColor, 0.1);
@@ -761,7 +729,7 @@ combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat
 
 tabbar tab button.image-button:checked:disabled,
 dnd tab button.image-button:checked:disabled, splitbutton.flat > button:checked:disabled,
-splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
+splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar popover.background button.flat:checked:disabled:not(.suggested-action):not(.destructive-action), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
 toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button:checked:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:disabled:not(:only-child), button.flat:checked:disabled {
   background-color: alpha(currentColor, 0.1);
@@ -983,7 +951,7 @@ radio label, button.image-button label, button.close label, button.circular labe
   padding: 0;
 }
 
-.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton.vertical > button, spinbutton:not(.vertical) > button {
+.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton:not(.vertical) > button, spinbutton.vertical > button {
   min-height: 22px;
   min-width: 22px;
   padding: 0;
@@ -1003,39 +971,39 @@ stackswitcher > button.needs-attention > image:dir(rtl) {
   background-position: left 3px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
+.linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
   border-radius: 0;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:first-child, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
+.linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:last-child, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
+.linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:only-child, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
+.linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
   border-radius: 10px;
 }
 
-.linked.vertical > spinbutton.vertical, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
+.linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
   border-radius: 0;
 }
 
-.linked.vertical > spinbutton.vertical:first-child, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child, .linked.vertical > button:first-child {
+.linked.vertical > entry:first-child, .linked.vertical > button:first-child {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
 
-.linked.vertical > spinbutton.vertical:last-child, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child {
+.linked.vertical > entry:last-child, .linked.vertical > button:last-child {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 
-.linked.vertical > spinbutton.vertical:only-child, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child {
+.linked.vertical > entry:only-child, .linked.vertical > button:only-child {
   border-radius: 10px;
 }
 
@@ -1105,31 +1073,64 @@ button.link > label {
 /*****************
  * GtkSpinButton *
  *****************/
-spinbutton:not(.vertical) {
+spinbutton:not(.vertical), spinbutton.vertical {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+  outline: 0 solid transparent;
+  outline-offset: 2px;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: inset 0 0 0 2px transparent;
+  border-radius: 10px;
   padding: 0;
   border-spacing: 0;
 }
 
-spinbutton:not(.vertical) > text {
-  min-width: 24px;
+spinbutton:not(.vertical):focus-within, spinbutton.vertical:focus-within {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: inset 0 0 0 2px transparent;
+  outline-color: #1A73E8;
+  outline-width: 2px;
+  outline-offset: -2px;
+}
+
+spinbutton:not(.vertical):disabled, spinbutton.vertical:disabled {
+  box-shadow: inset 0 0 0 2px transparent;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.38);
+  color: rgba(0, 0, 0, 0.38);
+  outline: none;
+  filter: none;
+  opacity: 1;
+}
+
+spinbutton:not(.vertical):disabled > label, spinbutton.vertical:disabled > label {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+spinbutton:not(.vertical) > text, spinbutton.vertical > text {
   margin: 0;
-  padding-left: 8px;
   border-image: none;
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
 }
 
-spinbutton:not(.vertical) > button {
-  margin: 0;
-  border: solid 4px transparent;
+spinbutton:not(.vertical) > button, spinbutton.vertical > button {
+  padding: 0;
+  border: 4px solid transparent;
 }
 
-spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) {
+spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled), spinbutton.vertical > button:focus:not(:hover):not(:active):not(:disabled) {
   box-shadow: inset 0 0 0 9999px transparent;
   color: rgba(0, 0, 0, 0.6);
 }
 
+spinbutton:not(.vertical) > text {
+  min-width: 24px;
+  padding-left: 8px;
+}
+
 spinbutton:not(.vertical) > button.up:dir(ltr), spinbutton:not(.vertical) > button.down:dir(rtl) {
   margin-left: -2px;
 }
@@ -1138,35 +1139,16 @@ spinbutton:not(.vertical) > button.up:dir(rtl), spinbutton:not(.vertical) > butt
   margin-right: -2px;
 }
 
-spinbutton.vertical {
-  padding: 0;
-}
-
 spinbutton.vertical:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
 spinbutton.vertical > text {
-  margin: 0;
-  border-image: none;
-  border-radius: 0;
-  box-shadow: none;
-  background-color: transparent;
   min-height: 32px;
   min-width: 36px;
   padding: 0;
 }
 
-spinbutton.vertical > button {
-  padding: 0;
-  border: solid 4px transparent;
-}
-
-spinbutton.vertical > button:focus:not(:hover):not(:active) {
-  box-shadow: inset 0 0 0 9999px transparent;
-  color: rgba(0, 0, 0, 0.6);
-}
-
 spinbutton.vertical > button.up {
   margin: 0 2px;
 }
@@ -1490,8 +1472,15 @@ headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructi
   color: rgba(255, 255, 255, 0.3);
 }
 
+headerbar entry {
+  caret-color: white;
+}
+
 headerbar entry {
   background-color: rgba(255, 255, 255, 0.04);
+}
+
+headerbar entry, headerbar entry > text {
   color: white;
 }
 
@@ -1515,12 +1504,12 @@ headerbar entry image:disabled {
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #2C2C2C;
   color: white;
   min-height: 40px;
   padding: 0;
   margin: 0;
   border-radius: 16px 16px 0 0;
+  background-color: transparent;
 }
 
 headerbar:disabled {
@@ -1528,8 +1517,8 @@ headerbar:disabled {
 }
 
 headerbar:backdrop {
-  background-color: #2C2C2C;
   color: rgba(255, 255, 255, 0.7);
+  background-color: transparent;
 }
 
 headerbar:backdrop:disabled {
@@ -1604,10 +1593,22 @@ headerbar button.toggle {
   border-radius: 9999px;
 }
 
+headerbar popover.background > contents {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+headerbar popover.background > contents .dim-label, headerbar popover.background > contents row.expander:not(:checked) image.expander-row-arrow, row.expander:not(:checked) headerbar popover.background > contents image.expander-row-arrow, headerbar popover.background > contents row label.subtitle, row headerbar popover.background > contents label.subtitle {
+  color: rgba(0, 0, 0, 0.6);
+}
+
 headerbar popover.background button, headerbar popover.background entry, headerbar popover.background spinbutton {
   border-radius: 5px;
 }
 
+headerbar popover.background button:not(.suggested-action):not(.destructive-action) image {
+  color: rgba(0, 0, 0, 0.87);
+}
+
 headerbar popover.background .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
   border-radius: 0;
 }
@@ -1631,10 +1632,39 @@ headerbar stackswitcher {
 
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button {
   border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.7);
 }
 
-box.vertical headerbar {
-  background-color: #2C2C2C;
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:active {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked:disabled {
+  color: rgba(255, 255, 255, 0.3);
 }
 
 headerbar > windowhandle > box {
@@ -1768,6 +1798,35 @@ pathbar > button.slider-button {
   padding-right: 4px;
 }
 
+.pathbar {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+  border: none;
+  border-radius: 10px;
+  padding: 2px;
+}
+
+headerbar .pathbar {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.pathbar > button {
+  margin-top: 0;
+  margin-bottom: 0;
+  min-height: 20px;
+  border-radius: 8px;
+  border: none;
+  box-shadow: none;
+}
+
+.pathbar > button:last-child {
+  background-color: alpha(currentColor, 0.1);
+  color: rgba(0, 0, 0, 0.87);
+}
+
 /**************
  * Tree Views *
  **************/
@@ -2061,34 +2120,6 @@ popover.menu check.right {
   margin-right: 0;
 }
 
-popover.menu modelbutton {
-  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 20px;
-  min-width: 48px;
-  padding: 2px 6px;
-  border-radius: 5px;
-  color: rgba(0, 0, 0, 0.87);
-  font: initial;
-  text-shadow: none;
-  border-spacing: 4px;
-}
-
-popover.menu modelbutton accelerator {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-popover.menu modelbutton accelerator:disabled {
-  color: rgba(0, 0, 0, 0.12);
-}
-
-popover.menu modelbutton arrow.left {
-  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
-}
-
-popover.menu modelbutton arrow.right {
-  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
-}
-
 popover.menu label.title {
   font-weight: bold;
   padding: 4px 24px;
@@ -2159,6 +2190,35 @@ popover.background .linked > button:not(.radio):only-child {
   border-radius: 5px;
 }
 
+popover.background modelbutton {
+  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+  min-height: 20px;
+  min-width: 48px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  color: rgba(0, 0, 0, 0.87);
+  font: initial;
+  text-shadow: none;
+  border-spacing: 4px;
+}
+
+popover.background modelbutton accelerator {
+  color: rgba(0, 0, 0, 0.38);
+  margin-left: 20px;
+}
+
+popover.background modelbutton accelerator:disabled {
+  color: rgba(0, 0, 0, 0.12);
+}
+
+popover.background modelbutton arrow.left {
+  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+}
+
+popover.background modelbutton arrow.right {
+  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+}
+
 popover.background.menu button,
 popover.background button.model {
   min-height: 32px;
@@ -3442,8 +3502,11 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button:hover row, button:active row, button:checked row {
+button row, button row:hover, button row.has-open-popup, button row:active {
   background-color: transparent;
+  box-shadow: none;
+  background-image: none;
+  transition: none;
 }
 
 button:checked row {
@@ -4435,8 +4498,7 @@ gridview > child:selected, row:selected, calendar:selected, calendar > grid > la
   background-color: rgba(26, 115, 232, 0.2);
 }
 
-textview text selection:focus, textview text selection, label > selection,
-entry > text > selection, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > selection, calendar > grid > label.today:selected {
+textview text selection:focus, textview text selection, label > selection, entry > text > selection, calendar > grid > label.today:selected {
   color: white;
   background-color: #1A73E8;
 }
@@ -4869,12 +4931,22 @@ popover.entry-completion > contents {
 
 #NautilusQueryEditor {
   border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.7);
 }
 
-#NautilusQueryEditor > menubutton > button {
-  min-width: 16px;
-  min-height: 16px;
+#NautilusQueryEditor:focus-within {
+  color: white;
+}
+
+#NautilusQueryEditor:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+#NautilusQueryEditor > menubutton > button.image-button {
+  min-width: 24px;
+  min-height: 24px;
   margin: 0;
+  padding: 0;
 }
 
 #NautilusQueryEditor > text {
@@ -4925,6 +4997,10 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+window.background > contents > leaflet stack.background {
+  background-color: transparent;
+}
+
 .history-view {
   background-color: #FFFFFF;
 }
@@ -5976,11 +6052,8 @@ tabbox:drop(active) {
 }
 
 leaflet {
-  outline-color: rgba(255, 255, 255, 0.1);
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
   border-radius: 16px;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
 leaflet headerbar {
diff --git a/src/gtk/4.0/gtk-Dark-Compact.css b/src/gtk/4.0/gtk-Dark-Compact.css
index 4662267..d5761a7 100644
--- a/src/gtk/4.0/gtk-Dark-Compact.css
+++ b/src/gtk/4.0/gtk-Dark-Compact.css
@@ -277,12 +277,7 @@ spinner:checked:disabled {
 /****************
  * Text Entries *
  ****************/
-spinbutton.vertical, spinbutton:not(.vertical),
-entry {
-  min-height: 32px;
-  padding: 0 8px;
-  border-spacing: 4px;
-  border-radius: 10px;
+headerbar popover.background entry, entry {
   caret-color: currentColor;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -292,8 +287,7 @@ entry {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.vertical:focus-within, spinbutton:focus-within:not(.vertical),
-entry:focus-within {
+headerbar popover.background entry:focus-within, entry:focus-within {
   background-color: rgba(255, 255, 255, 0.04);
   color: white;
   box-shadow: inset 0 0 0 2px transparent;
@@ -302,16 +296,14 @@ entry:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.vertical:drop(active), spinbutton:drop(active):not(.vertical),
-entry:drop(active) {
+headerbar popover.background entry:drop(active), entry:drop(active) {
   background-color: alpha(currentColor, 0.08);
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
   color: white;
   outline: none;
 }
 
-spinbutton.vertical:disabled, spinbutton:disabled:not(.vertical),
-entry:disabled {
+headerbar popover.background entry:disabled, entry:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
@@ -321,48 +313,46 @@ entry:disabled {
   opacity: 1;
 }
 
-spinbutton.vertical:disabled > label, spinbutton:disabled:not(.vertical) > label,
-entry:disabled > label {
+headerbar popover.background entry:disabled > label, entry:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.flat.vertical, spinbutton.flat:not(.vertical),
-entry.flat {
-  min-height: 0;
-  padding: 2px;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-spinbutton.vertical image, spinbutton:not(.vertical) image,
-entry image {
+headerbar popover.background entry image, entry image {
   color: rgba(255, 255, 255, 0.7);
 }
 
-spinbutton.vertical image:hover, spinbutton:not(.vertical) image:hover, spinbutton.vertical image:active, spinbutton:not(.vertical) image:active,
-entry image:hover,
-entry image:active {
+headerbar popover.background entry image:hover, entry image:hover, headerbar popover.background entry image:active, entry image:active {
   color: white;
 }
 
-spinbutton.vertical image:disabled, spinbutton:not(.vertical) image:disabled,
-entry image:disabled {
+headerbar popover.background entry image:disabled, entry image:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.vertical image.left, spinbutton:not(.vertical) image.left,
+entry {
+  min-height: 32px;
+  padding: 0 8px;
+  border-spacing: 4px;
+  border-radius: 10px;
+}
+
+entry.flat {
+  min-height: 0;
+  padding: 2px;
+  border-radius: 0;
+  background-color: transparent;
+}
+
 entry image.left {
   margin-left: 0px;
   margin-right: 6px;
 }
 
-spinbutton.vertical image.right, spinbutton:not(.vertical) image.right,
 entry image.right {
   margin-left: 6px;
   margin-right: 0px;
 }
 
-spinbutton.vertical undershoot.left, spinbutton:not(.vertical) undershoot.left,
 entry undershoot.left {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(255, 255, 255, 0.3) 50%);
@@ -375,7 +365,6 @@ entry undershoot.left {
   margin: 4px 0;
 }
 
-spinbutton.vertical undershoot.right, spinbutton:not(.vertical) undershoot.right,
 entry undershoot.right {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(255, 255, 255, 0.3) 50%);
@@ -388,7 +377,6 @@ entry undershoot.right {
   margin: 4px 0;
 }
 
-spinbutton.error.vertical, spinbutton.error:not(.vertical),
 entry.error {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -398,18 +386,15 @@ entry.error {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.error.vertical image, spinbutton.error:not(.vertical) image,
 entry.error image {
   color: #F28B82;
 }
 
-spinbutton.error.vertical selection, spinbutton.error:not(.vertical) selection,
 entry.error selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #F28B82;
 }
 
-spinbutton.error.vertical:focus-within, spinbutton.error:focus-within:not(.vertical),
 entry.error:focus-within {
   background-color: rgba(242, 139, 130, 0.08);
   color: #F28B82;
@@ -419,7 +404,6 @@ entry.error:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.error.vertical:disabled, spinbutton.error:disabled:not(.vertical),
 entry.error:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(242, 139, 130, 0.04);
@@ -430,12 +414,10 @@ entry.error:disabled {
   opacity: 1;
 }
 
-spinbutton.error.vertical:disabled > label, spinbutton.error:disabled:not(.vertical) > label,
 entry.error:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.success.vertical, spinbutton.success:not(.vertical),
 entry.success {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -445,18 +427,15 @@ entry.success {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.success.vertical image, spinbutton.success:not(.vertical) image,
 entry.success image {
   color: #81C995;
 }
 
-spinbutton.success.vertical selection, spinbutton.success:not(.vertical) selection,
 entry.success selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #81C995;
 }
 
-spinbutton.success.vertical:focus-within, spinbutton.success:focus-within:not(.vertical),
 entry.success:focus-within {
   background-color: rgba(129, 201, 149, 0.08);
   color: #81C995;
@@ -466,7 +445,6 @@ entry.success:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.success.vertical:disabled, spinbutton.success:disabled:not(.vertical),
 entry.success:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(129, 201, 149, 0.04);
@@ -477,12 +455,10 @@ entry.success:disabled {
   opacity: 1;
 }
 
-spinbutton.success.vertical:disabled > label, spinbutton.success:disabled:not(.vertical) > label,
 entry.success:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.warning.vertical, spinbutton.warning:not(.vertical),
 entry.warning {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -492,18 +468,15 @@ entry.warning {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.warning.vertical image, spinbutton.warning:not(.vertical) image,
 entry.warning image {
   color: #FDD633;
 }
 
-spinbutton.warning.vertical selection, spinbutton.warning:not(.vertical) selection,
 entry.warning selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #FDD633;
 }
 
-spinbutton.warning.vertical:focus-within, spinbutton.warning:focus-within:not(.vertical),
 entry.warning:focus-within {
   background-color: rgba(253, 214, 51, 0.08);
   color: #FDD633;
@@ -513,7 +486,6 @@ entry.warning:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.warning.vertical:disabled, spinbutton.warning:disabled:not(.vertical),
 entry.warning:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(253, 214, 51, 0.04);
@@ -524,14 +496,10 @@ entry.warning:disabled {
   opacity: 1;
 }
 
-spinbutton.warning.vertical:disabled > label, spinbutton.warning:disabled:not(.vertical) > label,
 entry.warning:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.vertical > progress, spinbutton:not(.vertical) > progress,
-spinbutton.vertical progress > trough > progress,
-spinbutton:not(.vertical) progress > trough > progress,
 entry > progress,
 entry progress > trough > progress {
   margin: 2px -8px;
@@ -620,7 +588,7 @@ editablelabel > stack > text {
   color: rgba(255, 255, 255, 0.5);
 }
 
-headerbar popover.background button:not(.suggested-action):not(.destructive-action):not(.flat), button {
+headerbar popover.background button:not(.suggested-action):not(.destructive-action), button {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   outline: none;
   box-shadow: inset 0 0 0 9999px transparent;
@@ -632,15 +600,15 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
   color: white;
 }
 
-headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action):not(.flat), button:focus {
+headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action), button:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08), inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:hover {
+headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action), button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
-headerbar popover.background button:active:not(.suggested-action):not(.destructive-action):not(.flat), button:active {
+headerbar popover.background button:active:not(.suggested-action):not(.destructive-action), button:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
   animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -648,7 +616,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
   background-size: 100% 100%;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:disabled {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action), button:disabled {
   box-shadow: none;
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
@@ -656,21 +624,21 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat) > label, button:disabled > label {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action):not(.flat), button:checked {
+headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #3281EA;
   color: white;
 }
 
-headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:hover {
+headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action), button:checked:hover {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:disabled {
+headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action), button:checked:disabled {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
@@ -689,9 +657,9 @@ button:drop(active) {
 }
 
 .nautilus-window tabbar tab:active > button.flat, .nautilus-window tabbar tab:checked > button.flat, .nautilus-window tabbar tab:selected > button.flat, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button, stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action), windowcontrols button, placessidebar .navigation-sidebar > row button.sidebar-button, calendar > header > button, row button.circular, check,
-radio, scrollbar button, notebook > header > tabs > arrow, popover.menu modelbutton, spinbutton.vertical > button, spinbutton:not(.vertical) > button, tabbar tab button.image-button,
+radio, scrollbar button, notebook > header > tabs > arrow, popover.background modelbutton, spinbutton:not(.vertical) > button, spinbutton.vertical > button, tabbar tab button.image-button,
 dnd tab button.image-button, splitbutton.flat > button,
-splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
+splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar popover.background button.flat:not(.suggested-action):not(.destructive-action), headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
 toolbar button, dropdown > .linked:not(.vertical) > button:not(:only-child),
 combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
@@ -706,9 +674,9 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
 }
 
 .nautilus-window tabbar tab:active > button.flat:focus, .nautilus-window tabbar tab:checked > button.flat:focus, .nautilus-window tabbar tab:selected > button.flat:focus, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:focus, stackswitcher.linked:not(.vertical) > button:focus:not(.suggested-action):not(.destructive-action), windowcontrols button:focus, placessidebar .navigation-sidebar > row button.sidebar-button:focus, calendar > header > button:focus, row button.circular:focus, check:focus,
-radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.menu modelbutton:focus, spinbutton.vertical > button:focus, spinbutton:not(.vertical) > button:focus, tabbar tab button.image-button:focus,
+radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.background modelbutton:focus, spinbutton:not(.vertical) > button:focus, spinbutton.vertical > button:focus, tabbar tab button.image-button:focus,
 dnd tab button.image-button:focus, splitbutton.flat > button:focus,
-splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
+splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar popover.background button.flat:focus:not(.suggested-action):not(.destructive-action), headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
 toolbar button:focus, dropdown > .linked:not(.vertical) > button:focus:not(:only-child),
 combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
@@ -716,9 +684,9 @@ combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:f
 }
 
 .nautilus-window tabbar tab:active > button.flat:hover, .nautilus-window tabbar tab:checked > button.flat:hover, .nautilus-window tabbar tab:selected > button.flat:hover, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:hover, stackswitcher.linked:not(.vertical) > button:hover:not(.suggested-action):not(.destructive-action), windowcontrols button:hover, placessidebar .navigation-sidebar > row button.sidebar-button:hover, calendar > header > button:hover, row button.circular:hover, check:hover,
-radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.menu modelbutton:hover, spinbutton.vertical > button:hover, spinbutton:not(.vertical) > button:hover, tabbar tab button.image-button:hover,
+radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.background modelbutton:hover, spinbutton:not(.vertical) > button:hover, spinbutton.vertical > button:hover, tabbar tab button.image-button:hover,
 dnd tab button.image-button:hover, splitbutton.flat > button:hover,
-splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
+splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar popover.background button.flat:hover:not(.suggested-action):not(.destructive-action), headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
 toolbar button:hover, dropdown > .linked:not(.vertical) > button:hover:not(:only-child),
 combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -726,9 +694,9 @@ combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:h
 }
 
 .nautilus-window tabbar tab:active > button.flat:active, .nautilus-window tabbar tab:checked > button.flat:active, .nautilus-window tabbar tab:selected > button.flat:active, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:active, stackswitcher.linked:not(.vertical) > button:active:not(.suggested-action):not(.destructive-action), windowcontrols button:active, placessidebar .navigation-sidebar > row button.sidebar-button:active, calendar > header > button:active, row button.circular:active, check:active,
-radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.menu modelbutton:active, spinbutton.vertical > button:active, spinbutton:not(.vertical) > button:active, tabbar tab button.image-button:active,
+radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.background modelbutton:active, spinbutton:not(.vertical) > button:active, spinbutton.vertical > button:active, tabbar tab button.image-button:active,
 dnd tab button.image-button:active, splitbutton.flat > button:active,
-splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
+splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar popover.background button.flat:active:not(.suggested-action):not(.destructive-action), headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
 toolbar button:active, dropdown > .linked:not(.vertical) > button:active:not(:only-child),
 combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
@@ -740,9 +708,9 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
 }
 
 .nautilus-window tabbar tab:active > button.flat:disabled, .nautilus-window tabbar tab:checked > button.flat:disabled, .nautilus-window tabbar tab:selected > button.flat:disabled, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:disabled, stackswitcher.linked:not(.vertical) > button:disabled:not(.suggested-action):not(.destructive-action), windowcontrols button:disabled, placessidebar .navigation-sidebar > row button.sidebar-button:disabled, calendar > header > button:disabled, row button.circular:disabled, check:disabled,
-radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.menu modelbutton:disabled, spinbutton.vertical > button:disabled, spinbutton:not(.vertical) > button:disabled, tabbar tab button.image-button:disabled,
+radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.background modelbutton:disabled, spinbutton:not(.vertical) > button:disabled, spinbutton.vertical > button:disabled, tabbar tab button.image-button:disabled,
 dnd tab button.image-button:disabled, splitbutton.flat > button:disabled,
-splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
+splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar popover.background button.flat:disabled:not(.suggested-action):not(.destructive-action), headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
 toolbar button:disabled, dropdown > .linked:not(.vertical) > button:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.flat:disabled {
   box-shadow: none;
@@ -752,7 +720,7 @@ combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.fla
 
 tabbar tab button.image-button:checked,
 dnd tab button.image-button:checked, splitbutton.flat > button:checked,
-splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
+splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar popover.background button.flat:checked:not(.suggested-action):not(.destructive-action), headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
 toolbar button:checked, dropdown > .linked:not(.vertical) > button:checked:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat:checked, button.flat:checked:hover {
   background-color: alpha(currentColor, 0.1);
@@ -761,7 +729,7 @@ combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat
 
 tabbar tab button.image-button:checked:disabled,
 dnd tab button.image-button:checked:disabled, splitbutton.flat > button:checked:disabled,
-splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
+splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar popover.background button.flat:checked:disabled:not(.suggested-action):not(.destructive-action), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
 toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button:checked:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:disabled:not(:only-child), button.flat:checked:disabled {
   background-color: alpha(currentColor, 0.1);
@@ -983,7 +951,7 @@ radio label, button.image-button label, button.close label, button.circular labe
   padding: 0;
 }
 
-.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton.vertical > button, spinbutton:not(.vertical) > button {
+.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton:not(.vertical) > button, spinbutton.vertical > button {
   min-height: 22px;
   min-width: 22px;
   padding: 0;
@@ -1003,39 +971,39 @@ stackswitcher > button.needs-attention > image:dir(rtl) {
   background-position: left 3px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
+.linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
   border-radius: 0;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:first-child, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
+.linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:last-child, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
+.linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:only-child, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
+.linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
   border-radius: 10px;
 }
 
-.linked.vertical > spinbutton.vertical, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
+.linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
   border-radius: 0;
 }
 
-.linked.vertical > spinbutton.vertical:first-child, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child, .linked.vertical > button:first-child {
+.linked.vertical > entry:first-child, .linked.vertical > button:first-child {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
 
-.linked.vertical > spinbutton.vertical:last-child, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child {
+.linked.vertical > entry:last-child, .linked.vertical > button:last-child {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 
-.linked.vertical > spinbutton.vertical:only-child, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child {
+.linked.vertical > entry:only-child, .linked.vertical > button:only-child {
   border-radius: 10px;
 }
 
@@ -1105,31 +1073,64 @@ button.link > label {
 /*****************
  * GtkSpinButton *
  *****************/
-spinbutton:not(.vertical) {
+spinbutton:not(.vertical), spinbutton.vertical {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+  outline: 0 solid transparent;
+  outline-offset: 2px;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: white;
+  box-shadow: inset 0 0 0 2px transparent;
+  border-radius: 10px;
   padding: 0;
   border-spacing: 0;
 }
 
-spinbutton:not(.vertical) > text {
-  min-width: 24px;
+spinbutton:not(.vertical):focus-within, spinbutton.vertical:focus-within {
+  background-color: rgba(255, 255, 255, 0.04);
+  color: white;
+  box-shadow: inset 0 0 0 2px transparent;
+  outline-color: #3281EA;
+  outline-width: 2px;
+  outline-offset: -2px;
+}
+
+spinbutton:not(.vertical):disabled, spinbutton.vertical:disabled {
+  box-shadow: inset 0 0 0 2px transparent;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.5);
+  outline: none;
+  filter: none;
+  opacity: 1;
+}
+
+spinbutton:not(.vertical):disabled > label, spinbutton.vertical:disabled > label {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+spinbutton:not(.vertical) > text, spinbutton.vertical > text {
   margin: 0;
-  padding-left: 8px;
   border-image: none;
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
 }
 
-spinbutton:not(.vertical) > button {
-  margin: 0;
-  border: solid 4px transparent;
+spinbutton:not(.vertical) > button, spinbutton.vertical > button {
+  padding: 0;
+  border: 4px solid transparent;
 }
 
-spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) {
+spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled), spinbutton.vertical > button:focus:not(:hover):not(:active):not(:disabled) {
   box-shadow: inset 0 0 0 9999px transparent;
   color: rgba(255, 255, 255, 0.7);
 }
 
+spinbutton:not(.vertical) > text {
+  min-width: 24px;
+  padding-left: 8px;
+}
+
 spinbutton:not(.vertical) > button.up:dir(ltr), spinbutton:not(.vertical) > button.down:dir(rtl) {
   margin-left: -2px;
 }
@@ -1138,35 +1139,16 @@ spinbutton:not(.vertical) > button.up:dir(rtl), spinbutton:not(.vertical) > butt
   margin-right: -2px;
 }
 
-spinbutton.vertical {
-  padding: 0;
-}
-
 spinbutton.vertical:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
 
 spinbutton.vertical > text {
-  margin: 0;
-  border-image: none;
-  border-radius: 0;
-  box-shadow: none;
-  background-color: transparent;
   min-height: 32px;
   min-width: 36px;
   padding: 0;
 }
 
-spinbutton.vertical > button {
-  padding: 0;
-  border: solid 4px transparent;
-}
-
-spinbutton.vertical > button:focus:not(:hover):not(:active) {
-  box-shadow: inset 0 0 0 9999px transparent;
-  color: rgba(255, 255, 255, 0.7);
-}
-
 spinbutton.vertical > button.up {
   margin: 0 2px;
 }
@@ -1490,8 +1472,15 @@ headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructi
   color: rgba(255, 255, 255, 0.3);
 }
 
+headerbar entry {
+  caret-color: white;
+}
+
 headerbar entry {
   background-color: rgba(255, 255, 255, 0.04);
+}
+
+headerbar entry, headerbar entry > text {
   color: white;
 }
 
@@ -1515,12 +1504,12 @@ headerbar entry image:disabled {
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #2C2C2C;
   color: white;
   min-height: 40px;
   padding: 0;
   margin: 0;
   border-radius: 16px 16px 0 0;
+  background-color: #2C2C2C;
 }
 
 headerbar:disabled {
@@ -1528,8 +1517,8 @@ headerbar:disabled {
 }
 
 headerbar:backdrop {
-  background-color: #2C2C2C;
   color: rgba(255, 255, 255, 0.7);
+  background-color: #2C2C2C;
 }
 
 headerbar:backdrop:disabled {
@@ -1604,10 +1593,22 @@ headerbar button.toggle {
   border-radius: 9999px;
 }
 
+headerbar popover.background > contents {
+  color: white;
+}
+
+headerbar popover.background > contents .dim-label, headerbar popover.background > contents row.expander:not(:checked) image.expander-row-arrow, row.expander:not(:checked) headerbar popover.background > contents image.expander-row-arrow, headerbar popover.background > contents row label.subtitle, row headerbar popover.background > contents label.subtitle {
+  color: rgba(255, 255, 255, 0.7);
+}
+
 headerbar popover.background button, headerbar popover.background entry, headerbar popover.background spinbutton {
   border-radius: 5px;
 }
 
+headerbar popover.background button:not(.suggested-action):not(.destructive-action) image {
+  color: white;
+}
+
 headerbar popover.background .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
   border-radius: 0;
 }
@@ -1631,10 +1632,39 @@ headerbar stackswitcher {
 
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button {
   border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.7);
 }
 
-box.vertical headerbar {
-  background-color: #2C2C2C;
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:active {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked:disabled {
+  color: rgba(255, 255, 255, 0.3);
 }
 
 headerbar > windowhandle > box {
@@ -1768,6 +1798,35 @@ pathbar > button.slider-button {
   padding-right: 4px;
 }
 
+.pathbar {
+  background-color: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.7);
+  border: none;
+  border-radius: 10px;
+  padding: 2px;
+}
+
+headerbar .pathbar {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.pathbar > button {
+  margin-top: 0;
+  margin-bottom: 0;
+  min-height: 20px;
+  border-radius: 8px;
+  border: none;
+  box-shadow: none;
+}
+
+.pathbar > button:last-child {
+  background-color: alpha(currentColor, 0.1);
+  color: white;
+}
+
 /**************
  * Tree Views *
  **************/
@@ -2061,34 +2120,6 @@ popover.menu check.right {
   margin-right: 0;
 }
 
-popover.menu modelbutton {
-  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 20px;
-  min-width: 48px;
-  padding: 2px 6px;
-  border-radius: 5px;
-  color: white;
-  font: initial;
-  text-shadow: none;
-  border-spacing: 4px;
-}
-
-popover.menu modelbutton accelerator {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-popover.menu modelbutton accelerator:disabled {
-  color: rgba(255, 255, 255, 0.12);
-}
-
-popover.menu modelbutton arrow.left {
-  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
-}
-
-popover.menu modelbutton arrow.right {
-  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
-}
-
 popover.menu label.title {
   font-weight: bold;
   padding: 4px 24px;
@@ -2159,6 +2190,35 @@ popover.background .linked > button:not(.radio):only-child {
   border-radius: 5px;
 }
 
+popover.background modelbutton {
+  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+  min-height: 20px;
+  min-width: 48px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  color: white;
+  font: initial;
+  text-shadow: none;
+  border-spacing: 4px;
+}
+
+popover.background modelbutton accelerator {
+  color: rgba(255, 255, 255, 0.5);
+  margin-left: 20px;
+}
+
+popover.background modelbutton accelerator:disabled {
+  color: rgba(255, 255, 255, 0.12);
+}
+
+popover.background modelbutton arrow.left {
+  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+}
+
+popover.background modelbutton arrow.right {
+  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+}
+
 popover.background.menu button,
 popover.background button.model {
   min-height: 32px;
@@ -3442,8 +3502,11 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button:hover row, button:active row, button:checked row {
+button row, button row:hover, button row.has-open-popup, button row:active {
   background-color: transparent;
+  box-shadow: none;
+  background-image: none;
+  transition: none;
 }
 
 button:checked row {
@@ -4430,8 +4493,7 @@ gridview > child:selected, row:selected, calendar:selected, calendar > grid > la
   background-color: rgba(50, 129, 234, 0.2);
 }
 
-textview text selection:focus, textview text selection, label > selection,
-entry > text > selection, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > selection, calendar > grid > label.today:selected {
+textview text selection:focus, textview text selection, label > selection, entry > text > selection, calendar > grid > label.today:selected {
   color: white;
   background-color: #3281EA;
 }
@@ -4834,12 +4896,22 @@ popover.entry-completion > contents {
 
 #NautilusQueryEditor {
   border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.7);
 }
 
-#NautilusQueryEditor > menubutton > button {
-  min-width: 16px;
-  min-height: 16px;
+#NautilusQueryEditor:focus-within {
+  color: white;
+}
+
+#NautilusQueryEditor:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+#NautilusQueryEditor > menubutton > button.image-button {
+  min-width: 24px;
+  min-height: 24px;
   margin: 0;
+  padding: 0;
 }
 
 #NautilusQueryEditor > text {
@@ -4890,6 +4962,10 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+window.background > contents > leaflet stack.background {
+  background-color: transparent;
+}
+
 .history-view {
   background-color: #2C2C2C;
 }
@@ -5941,11 +6017,8 @@ tabbox:drop(active) {
 }
 
 leaflet {
-  outline-color: rgba(255, 255, 255, 0.1);
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
   border-radius: 16px;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
 leaflet headerbar {
diff --git a/src/gtk/4.0/gtk-Dark.css b/src/gtk/4.0/gtk-Dark.css
index 42223b4..1d755d3 100644
--- a/src/gtk/4.0/gtk-Dark.css
+++ b/src/gtk/4.0/gtk-Dark.css
@@ -277,12 +277,7 @@ spinner:checked:disabled {
 /****************
  * Text Entries *
  ****************/
-spinbutton.vertical, spinbutton:not(.vertical),
-entry {
-  min-height: 36px;
-  padding: 0 8px;
-  border-spacing: 6px;
-  border-radius: 12px;
+headerbar popover.background entry, entry {
   caret-color: currentColor;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -292,8 +287,7 @@ entry {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.vertical:focus-within, spinbutton:focus-within:not(.vertical),
-entry:focus-within {
+headerbar popover.background entry:focus-within, entry:focus-within {
   background-color: rgba(255, 255, 255, 0.04);
   color: white;
   box-shadow: inset 0 0 0 2px transparent;
@@ -302,16 +296,14 @@ entry:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.vertical:drop(active), spinbutton:drop(active):not(.vertical),
-entry:drop(active) {
+headerbar popover.background entry:drop(active), entry:drop(active) {
   background-color: alpha(currentColor, 0.08);
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
   color: white;
   outline: none;
 }
 
-spinbutton.vertical:disabled, spinbutton:disabled:not(.vertical),
-entry:disabled {
+headerbar popover.background entry:disabled, entry:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
@@ -321,48 +313,46 @@ entry:disabled {
   opacity: 1;
 }
 
-spinbutton.vertical:disabled > label, spinbutton:disabled:not(.vertical) > label,
-entry:disabled > label {
+headerbar popover.background entry:disabled > label, entry:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.flat.vertical, spinbutton.flat:not(.vertical),
-entry.flat {
-  min-height: 0;
-  padding: 2px;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-spinbutton.vertical image, spinbutton:not(.vertical) image,
-entry image {
+headerbar popover.background entry image, entry image {
   color: rgba(255, 255, 255, 0.7);
 }
 
-spinbutton.vertical image:hover, spinbutton:not(.vertical) image:hover, spinbutton.vertical image:active, spinbutton:not(.vertical) image:active,
-entry image:hover,
-entry image:active {
+headerbar popover.background entry image:hover, entry image:hover, headerbar popover.background entry image:active, entry image:active {
   color: white;
 }
 
-spinbutton.vertical image:disabled, spinbutton:not(.vertical) image:disabled,
-entry image:disabled {
+headerbar popover.background entry image:disabled, entry image:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.vertical image.left, spinbutton:not(.vertical) image.left,
+entry {
+  min-height: 36px;
+  padding: 0 8px;
+  border-spacing: 6px;
+  border-radius: 12px;
+}
+
+entry.flat {
+  min-height: 0;
+  padding: 2px;
+  border-radius: 0;
+  background-color: transparent;
+}
+
 entry image.left {
   margin-left: 2px;
   margin-right: 6px;
 }
 
-spinbutton.vertical image.right, spinbutton:not(.vertical) image.right,
 entry image.right {
   margin-left: 6px;
   margin-right: 2px;
 }
 
-spinbutton.vertical undershoot.left, spinbutton:not(.vertical) undershoot.left,
 entry undershoot.left {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(255, 255, 255, 0.3) 50%);
@@ -375,7 +365,6 @@ entry undershoot.left {
   margin: 4px 0;
 }
 
-spinbutton.vertical undershoot.right, spinbutton:not(.vertical) undershoot.right,
 entry undershoot.right {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(255, 255, 255, 0.3) 50%);
@@ -388,7 +377,6 @@ entry undershoot.right {
   margin: 4px 0;
 }
 
-spinbutton.error.vertical, spinbutton.error:not(.vertical),
 entry.error {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -398,18 +386,15 @@ entry.error {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.error.vertical image, spinbutton.error:not(.vertical) image,
 entry.error image {
   color: #F28B82;
 }
 
-spinbutton.error.vertical selection, spinbutton.error:not(.vertical) selection,
 entry.error selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #F28B82;
 }
 
-spinbutton.error.vertical:focus-within, spinbutton.error:focus-within:not(.vertical),
 entry.error:focus-within {
   background-color: rgba(242, 139, 130, 0.08);
   color: #F28B82;
@@ -419,7 +404,6 @@ entry.error:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.error.vertical:disabled, spinbutton.error:disabled:not(.vertical),
 entry.error:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(242, 139, 130, 0.04);
@@ -430,12 +414,10 @@ entry.error:disabled {
   opacity: 1;
 }
 
-spinbutton.error.vertical:disabled > label, spinbutton.error:disabled:not(.vertical) > label,
 entry.error:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.success.vertical, spinbutton.success:not(.vertical),
 entry.success {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -445,18 +427,15 @@ entry.success {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.success.vertical image, spinbutton.success:not(.vertical) image,
 entry.success image {
   color: #81C995;
 }
 
-spinbutton.success.vertical selection, spinbutton.success:not(.vertical) selection,
 entry.success selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #81C995;
 }
 
-spinbutton.success.vertical:focus-within, spinbutton.success:focus-within:not(.vertical),
 entry.success:focus-within {
   background-color: rgba(129, 201, 149, 0.08);
   color: #81C995;
@@ -466,7 +445,6 @@ entry.success:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.success.vertical:disabled, spinbutton.success:disabled:not(.vertical),
 entry.success:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(129, 201, 149, 0.04);
@@ -477,12 +455,10 @@ entry.success:disabled {
   opacity: 1;
 }
 
-spinbutton.success.vertical:disabled > label, spinbutton.success:disabled:not(.vertical) > label,
 entry.success:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.warning.vertical, spinbutton.warning:not(.vertical),
 entry.warning {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -492,18 +468,15 @@ entry.warning {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.warning.vertical image, spinbutton.warning:not(.vertical) image,
 entry.warning image {
   color: #FDD633;
 }
 
-spinbutton.warning.vertical selection, spinbutton.warning:not(.vertical) selection,
 entry.warning selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #FDD633;
 }
 
-spinbutton.warning.vertical:focus-within, spinbutton.warning:focus-within:not(.vertical),
 entry.warning:focus-within {
   background-color: rgba(253, 214, 51, 0.08);
   color: #FDD633;
@@ -513,7 +486,6 @@ entry.warning:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.warning.vertical:disabled, spinbutton.warning:disabled:not(.vertical),
 entry.warning:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(253, 214, 51, 0.04);
@@ -524,14 +496,10 @@ entry.warning:disabled {
   opacity: 1;
 }
 
-spinbutton.warning.vertical:disabled > label, spinbutton.warning:disabled:not(.vertical) > label,
 entry.warning:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-spinbutton.vertical > progress, spinbutton:not(.vertical) > progress,
-spinbutton.vertical progress > trough > progress,
-spinbutton:not(.vertical) progress > trough > progress,
 entry > progress,
 entry progress > trough > progress {
   margin: 2px -8px;
@@ -620,7 +588,7 @@ editablelabel > stack > text {
   color: rgba(255, 255, 255, 0.5);
 }
 
-headerbar popover.background button:not(.suggested-action):not(.destructive-action):not(.flat), button {
+headerbar popover.background button:not(.suggested-action):not(.destructive-action), button {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   outline: none;
   box-shadow: inset 0 0 0 9999px transparent;
@@ -632,15 +600,15 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
   color: white;
 }
 
-headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action):not(.flat), button:focus {
+headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action), button:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08), inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:hover {
+headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action), button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
-headerbar popover.background button:active:not(.suggested-action):not(.destructive-action):not(.flat), button:active {
+headerbar popover.background button:active:not(.suggested-action):not(.destructive-action), button:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
   animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -648,7 +616,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
   background-size: 100% 100%;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:disabled {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action), button:disabled {
   box-shadow: none;
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
@@ -656,21 +624,21 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat) > label, button:disabled > label {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
   color: rgba(255, 255, 255, 0.5);
 }
 
-headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action):not(.flat), button:checked {
+headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #3281EA;
   color: white;
 }
 
-headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:hover {
+headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action), button:checked:hover {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:disabled {
+headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action), button:checked:disabled {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
@@ -689,9 +657,9 @@ button:drop(active) {
 }
 
 .nautilus-window tabbar tab:active > button.flat, .nautilus-window tabbar tab:checked > button.flat, .nautilus-window tabbar tab:selected > button.flat, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button, stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action), windowcontrols button, placessidebar .navigation-sidebar > row button.sidebar-button, calendar > header > button, row button.circular, check,
-radio, scrollbar button, notebook > header > tabs > arrow, popover.menu modelbutton, spinbutton.vertical > button, spinbutton:not(.vertical) > button, tabbar tab button.image-button,
+radio, scrollbar button, notebook > header > tabs > arrow, popover.background modelbutton, spinbutton:not(.vertical) > button, spinbutton.vertical > button, tabbar tab button.image-button,
 dnd tab button.image-button, splitbutton.flat > button,
-splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
+splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar popover.background button.flat:not(.suggested-action):not(.destructive-action), headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
 toolbar button, dropdown > .linked:not(.vertical) > button:not(:only-child),
 combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
@@ -706,9 +674,9 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
 }
 
 .nautilus-window tabbar tab:active > button.flat:focus, .nautilus-window tabbar tab:checked > button.flat:focus, .nautilus-window tabbar tab:selected > button.flat:focus, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:focus, stackswitcher.linked:not(.vertical) > button:focus:not(.suggested-action):not(.destructive-action), windowcontrols button:focus, placessidebar .navigation-sidebar > row button.sidebar-button:focus, calendar > header > button:focus, row button.circular:focus, check:focus,
-radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.menu modelbutton:focus, spinbutton.vertical > button:focus, spinbutton:not(.vertical) > button:focus, tabbar tab button.image-button:focus,
+radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.background modelbutton:focus, spinbutton:not(.vertical) > button:focus, spinbutton.vertical > button:focus, tabbar tab button.image-button:focus,
 dnd tab button.image-button:focus, splitbutton.flat > button:focus,
-splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
+splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar popover.background button.flat:focus:not(.suggested-action):not(.destructive-action), headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
 toolbar button:focus, dropdown > .linked:not(.vertical) > button:focus:not(:only-child),
 combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
@@ -716,9 +684,9 @@ combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:f
 }
 
 .nautilus-window tabbar tab:active > button.flat:hover, .nautilus-window tabbar tab:checked > button.flat:hover, .nautilus-window tabbar tab:selected > button.flat:hover, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:hover, stackswitcher.linked:not(.vertical) > button:hover:not(.suggested-action):not(.destructive-action), windowcontrols button:hover, placessidebar .navigation-sidebar > row button.sidebar-button:hover, calendar > header > button:hover, row button.circular:hover, check:hover,
-radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.menu modelbutton:hover, spinbutton.vertical > button:hover, spinbutton:not(.vertical) > button:hover, tabbar tab button.image-button:hover,
+radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.background modelbutton:hover, spinbutton:not(.vertical) > button:hover, spinbutton.vertical > button:hover, tabbar tab button.image-button:hover,
 dnd tab button.image-button:hover, splitbutton.flat > button:hover,
-splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
+splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar popover.background button.flat:hover:not(.suggested-action):not(.destructive-action), headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
 toolbar button:hover, dropdown > .linked:not(.vertical) > button:hover:not(:only-child),
 combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -726,9 +694,9 @@ combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:h
 }
 
 .nautilus-window tabbar tab:active > button.flat:active, .nautilus-window tabbar tab:checked > button.flat:active, .nautilus-window tabbar tab:selected > button.flat:active, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:active, stackswitcher.linked:not(.vertical) > button:active:not(.suggested-action):not(.destructive-action), windowcontrols button:active, placessidebar .navigation-sidebar > row button.sidebar-button:active, calendar > header > button:active, row button.circular:active, check:active,
-radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.menu modelbutton:active, spinbutton.vertical > button:active, spinbutton:not(.vertical) > button:active, tabbar tab button.image-button:active,
+radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.background modelbutton:active, spinbutton:not(.vertical) > button:active, spinbutton.vertical > button:active, tabbar tab button.image-button:active,
 dnd tab button.image-button:active, splitbutton.flat > button:active,
-splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
+splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar popover.background button.flat:active:not(.suggested-action):not(.destructive-action), headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
 toolbar button:active, dropdown > .linked:not(.vertical) > button:active:not(:only-child),
 combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
@@ -740,9 +708,9 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
 }
 
 .nautilus-window tabbar tab:active > button.flat:disabled, .nautilus-window tabbar tab:checked > button.flat:disabled, .nautilus-window tabbar tab:selected > button.flat:disabled, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:disabled, stackswitcher.linked:not(.vertical) > button:disabled:not(.suggested-action):not(.destructive-action), windowcontrols button:disabled, placessidebar .navigation-sidebar > row button.sidebar-button:disabled, calendar > header > button:disabled, row button.circular:disabled, check:disabled,
-radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.menu modelbutton:disabled, spinbutton.vertical > button:disabled, spinbutton:not(.vertical) > button:disabled, tabbar tab button.image-button:disabled,
+radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.background modelbutton:disabled, spinbutton:not(.vertical) > button:disabled, spinbutton.vertical > button:disabled, tabbar tab button.image-button:disabled,
 dnd tab button.image-button:disabled, splitbutton.flat > button:disabled,
-splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
+splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar popover.background button.flat:disabled:not(.suggested-action):not(.destructive-action), headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
 toolbar button:disabled, dropdown > .linked:not(.vertical) > button:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.flat:disabled {
   box-shadow: none;
@@ -752,7 +720,7 @@ combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.fla
 
 tabbar tab button.image-button:checked,
 dnd tab button.image-button:checked, splitbutton.flat > button:checked,
-splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
+splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar popover.background button.flat:checked:not(.suggested-action):not(.destructive-action), headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
 toolbar button:checked, dropdown > .linked:not(.vertical) > button:checked:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat:checked, button.flat:checked:hover {
   background-color: alpha(currentColor, 0.1);
@@ -761,7 +729,7 @@ combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat
 
 tabbar tab button.image-button:checked:disabled,
 dnd tab button.image-button:checked:disabled, splitbutton.flat > button:checked:disabled,
-splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
+splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar popover.background button.flat:checked:disabled:not(.suggested-action):not(.destructive-action), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
 toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button:checked:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:disabled:not(:only-child), button.flat:checked:disabled {
   background-color: alpha(currentColor, 0.1);
@@ -983,7 +951,7 @@ radio label, button.image-button label, button.close label, button.circular labe
   padding: 0;
 }
 
-.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton.vertical > button, spinbutton:not(.vertical) > button {
+.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton:not(.vertical) > button, spinbutton.vertical > button {
   min-height: 24px;
   min-width: 24px;
   padding: 0;
@@ -1003,39 +971,39 @@ stackswitcher > button.needs-attention > image:dir(rtl) {
   background-position: left 3px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
+.linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
   border-radius: 0;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:first-child, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
+.linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:last-child, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
+.linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:only-child, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
+.linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
   border-radius: 12px;
 }
 
-.linked.vertical > spinbutton.vertical, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
+.linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
   border-radius: 0;
 }
 
-.linked.vertical > spinbutton.vertical:first-child, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child, .linked.vertical > button:first-child {
+.linked.vertical > entry:first-child, .linked.vertical > button:first-child {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 }
 
-.linked.vertical > spinbutton.vertical:last-child, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child {
+.linked.vertical > entry:last-child, .linked.vertical > button:last-child {
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
-.linked.vertical > spinbutton.vertical:only-child, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child {
+.linked.vertical > entry:only-child, .linked.vertical > button:only-child {
   border-radius: 12px;
 }
 
@@ -1105,31 +1073,64 @@ button.link > label {
 /*****************
  * GtkSpinButton *
  *****************/
-spinbutton:not(.vertical) {
+spinbutton:not(.vertical), spinbutton.vertical {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+  outline: 0 solid transparent;
+  outline-offset: 2px;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: white;
+  box-shadow: inset 0 0 0 2px transparent;
+  border-radius: 12px;
   padding: 0;
   border-spacing: 0;
 }
 
-spinbutton:not(.vertical) > text {
-  min-width: 32px;
+spinbutton:not(.vertical):focus-within, spinbutton.vertical:focus-within {
+  background-color: rgba(255, 255, 255, 0.04);
+  color: white;
+  box-shadow: inset 0 0 0 2px transparent;
+  outline-color: #3281EA;
+  outline-width: 2px;
+  outline-offset: -2px;
+}
+
+spinbutton:not(.vertical):disabled, spinbutton.vertical:disabled {
+  box-shadow: inset 0 0 0 2px transparent;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.5);
+  outline: none;
+  filter: none;
+  opacity: 1;
+}
+
+spinbutton:not(.vertical):disabled > label, spinbutton.vertical:disabled > label {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+spinbutton:not(.vertical) > text, spinbutton.vertical > text {
   margin: 0;
-  padding-left: 12px;
   border-image: none;
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
 }
 
-spinbutton:not(.vertical) > button {
-  margin: 0;
-  border: solid 6px transparent;
+spinbutton:not(.vertical) > button, spinbutton.vertical > button {
+  padding: 0;
+  border: 6px solid transparent;
 }
 
-spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) {
+spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled), spinbutton.vertical > button:focus:not(:hover):not(:active):not(:disabled) {
   box-shadow: inset 0 0 0 9999px transparent;
   color: rgba(255, 255, 255, 0.7);
 }
 
+spinbutton:not(.vertical) > text {
+  min-width: 32px;
+  padding-left: 12px;
+}
+
 spinbutton:not(.vertical) > button.up:dir(ltr), spinbutton:not(.vertical) > button.down:dir(rtl) {
   margin-left: -3px;
 }
@@ -1138,35 +1139,16 @@ spinbutton:not(.vertical) > button.up:dir(rtl), spinbutton:not(.vertical) > butt
   margin-right: -3px;
 }
 
-spinbutton.vertical {
-  padding: 0;
-}
-
 spinbutton.vertical:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
 
 spinbutton.vertical > text {
-  margin: 0;
-  border-image: none;
-  border-radius: 0;
-  box-shadow: none;
-  background-color: transparent;
   min-height: 36px;
   min-width: 42px;
   padding: 0;
 }
 
-spinbutton.vertical > button {
-  padding: 0;
-  border: solid 6px transparent;
-}
-
-spinbutton.vertical > button:focus:not(:hover):not(:active) {
-  box-shadow: inset 0 0 0 9999px transparent;
-  color: rgba(255, 255, 255, 0.7);
-}
-
 spinbutton.vertical > button.up {
   margin: 0 3px;
 }
@@ -1490,8 +1472,15 @@ headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructi
   color: rgba(255, 255, 255, 0.3);
 }
 
+headerbar entry {
+  caret-color: white;
+}
+
 headerbar entry {
   background-color: rgba(255, 255, 255, 0.04);
+}
+
+headerbar entry, headerbar entry > text {
   color: white;
 }
 
@@ -1515,12 +1504,12 @@ headerbar entry image:disabled {
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #2C2C2C;
   color: white;
   min-height: 48px;
   padding: 0;
   margin: 0;
   border-radius: 18px 18px 0 0;
+  background-color: #2C2C2C;
 }
 
 headerbar:disabled {
@@ -1528,8 +1517,8 @@ headerbar:disabled {
 }
 
 headerbar:backdrop {
-  background-color: #2C2C2C;
   color: rgba(255, 255, 255, 0.7);
+  background-color: #2C2C2C;
 }
 
 headerbar:backdrop:disabled {
@@ -1604,10 +1593,22 @@ headerbar button.toggle {
   border-radius: 9999px;
 }
 
+headerbar popover.background > contents {
+  color: white;
+}
+
+headerbar popover.background > contents .dim-label, headerbar popover.background > contents row.expander:not(:checked) image.expander-row-arrow, row.expander:not(:checked) headerbar popover.background > contents image.expander-row-arrow, headerbar popover.background > contents row label.subtitle, row headerbar popover.background > contents label.subtitle {
+  color: rgba(255, 255, 255, 0.7);
+}
+
 headerbar popover.background button, headerbar popover.background entry, headerbar popover.background spinbutton {
   border-radius: 5px;
 }
 
+headerbar popover.background button:not(.suggested-action):not(.destructive-action) image {
+  color: white;
+}
+
 headerbar popover.background .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
   border-radius: 0;
 }
@@ -1631,10 +1632,39 @@ headerbar stackswitcher {
 
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button {
   border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.7);
 }
 
-box.vertical headerbar {
-  background-color: #2C2C2C;
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:active {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked:disabled {
+  color: rgba(255, 255, 255, 0.3);
 }
 
 headerbar > windowhandle > box {
@@ -1768,6 +1798,35 @@ pathbar > button.slider-button {
   padding-right: 4px;
 }
 
+.pathbar {
+  background-color: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.7);
+  border: none;
+  border-radius: 12px;
+  padding: 2px;
+}
+
+headerbar .pathbar {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.pathbar > button {
+  margin-top: 0;
+  margin-bottom: 0;
+  min-height: 20px;
+  border-radius: 10px;
+  border: none;
+  box-shadow: none;
+}
+
+.pathbar > button:last-child {
+  background-color: alpha(currentColor, 0.1);
+  color: white;
+}
+
 /**************
  * Tree Views *
  **************/
@@ -2061,34 +2120,6 @@ popover.menu check.right {
   margin-right: 0;
 }
 
-popover.menu modelbutton {
-  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 22px;
-  min-width: 56px;
-  padding: 3px 9px;
-  border-radius: 5px;
-  color: white;
-  font: initial;
-  text-shadow: none;
-  border-spacing: 6px;
-}
-
-popover.menu modelbutton accelerator {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-popover.menu modelbutton accelerator:disabled {
-  color: rgba(255, 255, 255, 0.12);
-}
-
-popover.menu modelbutton arrow.left {
-  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
-}
-
-popover.menu modelbutton arrow.right {
-  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
-}
-
 popover.menu label.title {
   font-weight: bold;
   padding: 4px 26px;
@@ -2159,6 +2190,35 @@ popover.background .linked > button:not(.radio):only-child {
   border-radius: 5px;
 }
 
+popover.background modelbutton {
+  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+  min-height: 22px;
+  min-width: 56px;
+  padding: 3px 9px;
+  border-radius: 5px;
+  color: white;
+  font: initial;
+  text-shadow: none;
+  border-spacing: 6px;
+}
+
+popover.background modelbutton accelerator {
+  color: rgba(255, 255, 255, 0.5);
+  margin-left: 30px;
+}
+
+popover.background modelbutton accelerator:disabled {
+  color: rgba(255, 255, 255, 0.12);
+}
+
+popover.background modelbutton arrow.left {
+  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+}
+
+popover.background modelbutton arrow.right {
+  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+}
+
 popover.background.menu button,
 popover.background button.model {
   min-height: 32px;
@@ -3442,8 +3502,11 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button:hover row, button:active row, button:checked row {
+button row, button row:hover, button row.has-open-popup, button row:active {
   background-color: transparent;
+  box-shadow: none;
+  background-image: none;
+  transition: none;
 }
 
 button:checked row {
@@ -4430,8 +4493,7 @@ gridview > child:selected, row:selected, calendar:selected, calendar > grid > la
   background-color: rgba(50, 129, 234, 0.2);
 }
 
-textview text selection:focus, textview text selection, label > selection,
-entry > text > selection, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > selection, calendar > grid > label.today:selected {
+textview text selection:focus, textview text selection, label > selection, entry > text > selection, calendar > grid > label.today:selected {
   color: white;
   background-color: #3281EA;
 }
@@ -4834,12 +4896,22 @@ popover.entry-completion > contents {
 
 #NautilusQueryEditor {
   border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.7);
 }
 
-#NautilusQueryEditor > menubutton > button {
-  min-width: 16px;
-  min-height: 16px;
+#NautilusQueryEditor:focus-within {
+  color: white;
+}
+
+#NautilusQueryEditor:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+#NautilusQueryEditor > menubutton > button.image-button {
+  min-width: 28px;
+  min-height: 28px;
   margin: 0;
+  padding: 0;
 }
 
 #NautilusQueryEditor > text {
@@ -4890,6 +4962,10 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+window.background > contents > leaflet stack.background {
+  background-color: transparent;
+}
+
 .history-view {
   background-color: #2C2C2C;
 }
@@ -5941,11 +6017,8 @@ tabbox:drop(active) {
 }
 
 leaflet {
-  outline-color: rgba(255, 255, 255, 0.1);
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
   border-radius: 18px;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
 leaflet headerbar {
diff --git a/src/gtk/4.0/gtk-Light-Compact.css b/src/gtk/4.0/gtk-Light-Compact.css
index 6e29011..ce8e289 100644
--- a/src/gtk/4.0/gtk-Light-Compact.css
+++ b/src/gtk/4.0/gtk-Light-Compact.css
@@ -277,12 +277,7 @@ spinner:checked:disabled {
 /****************
  * Text Entries *
  ****************/
-spinbutton.vertical, spinbutton:not(.vertical),
-entry {
-  min-height: 32px;
-  padding: 0 8px;
-  border-spacing: 4px;
-  border-radius: 10px;
+headerbar popover.background entry, entry {
   caret-color: currentColor;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -292,8 +287,7 @@ entry {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.vertical:focus-within, spinbutton:focus-within:not(.vertical),
-entry:focus-within {
+headerbar popover.background entry:focus-within, entry:focus-within {
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
   box-shadow: inset 0 0 0 2px transparent;
@@ -302,16 +296,14 @@ entry:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.vertical:drop(active), spinbutton:drop(active):not(.vertical),
-entry:drop(active) {
+headerbar popover.background entry:drop(active), entry:drop(active) {
   background-color: alpha(currentColor, 0.08);
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
   color: rgba(0, 0, 0, 0.87);
   outline: none;
 }
 
-spinbutton.vertical:disabled, spinbutton:disabled:not(.vertical),
-entry:disabled {
+headerbar popover.background entry:disabled, entry:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -321,48 +313,46 @@ entry:disabled {
   opacity: 1;
 }
 
-spinbutton.vertical:disabled > label, spinbutton:disabled:not(.vertical) > label,
-entry:disabled > label {
+headerbar popover.background entry:disabled > label, entry:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.flat.vertical, spinbutton.flat:not(.vertical),
-entry.flat {
-  min-height: 0;
-  padding: 2px;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-spinbutton.vertical image, spinbutton:not(.vertical) image,
-entry image {
+headerbar popover.background entry image, entry image {
   color: rgba(0, 0, 0, 0.6);
 }
 
-spinbutton.vertical image:hover, spinbutton:not(.vertical) image:hover, spinbutton.vertical image:active, spinbutton:not(.vertical) image:active,
-entry image:hover,
-entry image:active {
+headerbar popover.background entry image:hover, entry image:hover, headerbar popover.background entry image:active, entry image:active {
   color: rgba(0, 0, 0, 0.87);
 }
 
-spinbutton.vertical image:disabled, spinbutton:not(.vertical) image:disabled,
-entry image:disabled {
+headerbar popover.background entry image:disabled, entry image:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical image.left, spinbutton:not(.vertical) image.left,
+entry {
+  min-height: 32px;
+  padding: 0 8px;
+  border-spacing: 4px;
+  border-radius: 10px;
+}
+
+entry.flat {
+  min-height: 0;
+  padding: 2px;
+  border-radius: 0;
+  background-color: transparent;
+}
+
 entry image.left {
   margin-left: 0px;
   margin-right: 6px;
 }
 
-spinbutton.vertical image.right, spinbutton:not(.vertical) image.right,
 entry image.right {
   margin-left: 6px;
   margin-right: 0px;
 }
 
-spinbutton.vertical undershoot.left, spinbutton:not(.vertical) undershoot.left,
 entry undershoot.left {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.26) 50%);
@@ -375,7 +365,6 @@ entry undershoot.left {
   margin: 4px 0;
 }
 
-spinbutton.vertical undershoot.right, spinbutton:not(.vertical) undershoot.right,
 entry undershoot.right {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.26) 50%);
@@ -388,7 +377,6 @@ entry undershoot.right {
   margin: 4px 0;
 }
 
-spinbutton.error.vertical, spinbutton.error:not(.vertical),
 entry.error {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -398,18 +386,15 @@ entry.error {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.error.vertical image, spinbutton.error:not(.vertical) image,
 entry.error image {
   color: #D93025;
 }
 
-spinbutton.error.vertical selection, spinbutton.error:not(.vertical) selection,
 entry.error selection {
   color: white;
   background-color: #D93025;
 }
 
-spinbutton.error.vertical:focus-within, spinbutton.error:focus-within:not(.vertical),
 entry.error:focus-within {
   background-color: rgba(217, 48, 37, 0.08);
   color: #D93025;
@@ -419,7 +404,6 @@ entry.error:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.error.vertical:disabled, spinbutton.error:disabled:not(.vertical),
 entry.error:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(217, 48, 37, 0.04);
@@ -430,12 +414,10 @@ entry.error:disabled {
   opacity: 1;
 }
 
-spinbutton.error.vertical:disabled > label, spinbutton.error:disabled:not(.vertical) > label,
 entry.error:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.success.vertical, spinbutton.success:not(.vertical),
 entry.success {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -445,18 +427,15 @@ entry.success {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.success.vertical image, spinbutton.success:not(.vertical) image,
 entry.success image {
   color: #0F9D58;
 }
 
-spinbutton.success.vertical selection, spinbutton.success:not(.vertical) selection,
 entry.success selection {
   color: white;
   background-color: #0F9D58;
 }
 
-spinbutton.success.vertical:focus-within, spinbutton.success:focus-within:not(.vertical),
 entry.success:focus-within {
   background-color: rgba(15, 157, 88, 0.08);
   color: #0F9D58;
@@ -466,7 +445,6 @@ entry.success:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.success.vertical:disabled, spinbutton.success:disabled:not(.vertical),
 entry.success:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(15, 157, 88, 0.04);
@@ -477,12 +455,10 @@ entry.success:disabled {
   opacity: 1;
 }
 
-spinbutton.success.vertical:disabled > label, spinbutton.success:disabled:not(.vertical) > label,
 entry.success:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.warning.vertical, spinbutton.warning:not(.vertical),
 entry.warning {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -492,18 +468,15 @@ entry.warning {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.warning.vertical image, spinbutton.warning:not(.vertical) image,
 entry.warning image {
   color: #F4B400;
 }
 
-spinbutton.warning.vertical selection, spinbutton.warning:not(.vertical) selection,
 entry.warning selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #F4B400;
 }
 
-spinbutton.warning.vertical:focus-within, spinbutton.warning:focus-within:not(.vertical),
 entry.warning:focus-within {
   background-color: rgba(244, 180, 0, 0.08);
   color: #F4B400;
@@ -513,7 +486,6 @@ entry.warning:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.warning.vertical:disabled, spinbutton.warning:disabled:not(.vertical),
 entry.warning:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(244, 180, 0, 0.04);
@@ -524,14 +496,10 @@ entry.warning:disabled {
   opacity: 1;
 }
 
-spinbutton.warning.vertical:disabled > label, spinbutton.warning:disabled:not(.vertical) > label,
 entry.warning:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical > progress, spinbutton:not(.vertical) > progress,
-spinbutton.vertical progress > trough > progress,
-spinbutton:not(.vertical) progress > trough > progress,
 entry > progress,
 entry progress > trough > progress {
   margin: 2px -8px;
@@ -620,7 +588,7 @@ infobar.warning > revealer > box button:checked:disabled, popover.background.tou
   color: rgba(255, 255, 255, 0.5);
 }
 
-headerbar popover.background button:not(.suggested-action):not(.destructive-action):not(.flat), button {
+headerbar popover.background button:not(.suggested-action):not(.destructive-action), button {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   outline: none;
   box-shadow: inset 0 0 0 9999px transparent;
@@ -632,15 +600,15 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
   color: rgba(0, 0, 0, 0.87);
 }
 
-headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action):not(.flat), button:focus {
+headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action), button:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08), inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:hover {
+headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action), button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
-headerbar popover.background button:active:not(.suggested-action):not(.destructive-action):not(.flat), button:active {
+headerbar popover.background button:active:not(.suggested-action):not(.destructive-action), button:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
   animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -648,7 +616,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
   background-size: 100% 100%;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:disabled {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action), button:disabled {
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -656,21 +624,21 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat) > label, button:disabled > label {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action):not(.flat), button:checked {
+headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #1A73E8;
   color: white;
 }
 
-headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:hover {
+headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action), button:checked:hover {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:disabled {
+headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action), button:checked:disabled {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -689,9 +657,9 @@ button:drop(active) {
 }
 
 .nautilus-window tabbar tab > button.flat, .nautilus-window tabbar tab:active > button.flat, .nautilus-window tabbar tab:checked > button.flat, .nautilus-window tabbar tab:selected > button.flat, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button, stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action), windowcontrols button, placessidebar .navigation-sidebar > row button.sidebar-button, calendar > header > button, row button.circular, check,
-radio, scrollbar button, notebook > header > tabs > arrow, popover.menu modelbutton, spinbutton.vertical > button, spinbutton:not(.vertical) > button, tabbar tab button.image-button,
+radio, scrollbar button, notebook > header > tabs > arrow, popover.background modelbutton, spinbutton:not(.vertical) > button, spinbutton.vertical > button, tabbar tab button.image-button,
 dnd tab button.image-button, splitbutton.flat > button,
-splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
+splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar popover.background button.flat:not(.suggested-action):not(.destructive-action), headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
 toolbar button, dropdown > .linked:not(.vertical) > button:not(:only-child),
 combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
@@ -706,9 +674,9 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
 }
 
 .nautilus-window tabbar tab > button.flat:focus, .nautilus-window tabbar tab:active > button.flat:focus, .nautilus-window tabbar tab:checked > button.flat:focus, .nautilus-window tabbar tab:selected > button.flat:focus, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:focus, stackswitcher.linked:not(.vertical) > button:focus:not(.suggested-action):not(.destructive-action), windowcontrols button:focus, placessidebar .navigation-sidebar > row button.sidebar-button:focus, calendar > header > button:focus, row button.circular:focus, check:focus,
-radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.menu modelbutton:focus, spinbutton.vertical > button:focus, spinbutton:not(.vertical) > button:focus, tabbar tab button.image-button:focus,
+radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.background modelbutton:focus, spinbutton:not(.vertical) > button:focus, spinbutton.vertical > button:focus, tabbar tab button.image-button:focus,
 dnd tab button.image-button:focus, splitbutton.flat > button:focus,
-splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
+splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar popover.background button.flat:focus:not(.suggested-action):not(.destructive-action), headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
 toolbar button:focus, dropdown > .linked:not(.vertical) > button:focus:not(:only-child),
 combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
@@ -716,9 +684,9 @@ combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:f
 }
 
 .nautilus-window tabbar tab > button.flat:hover, .nautilus-window tabbar tab:active > button.flat:hover, .nautilus-window tabbar tab:checked > button.flat:hover, .nautilus-window tabbar tab:selected > button.flat:hover, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:hover, stackswitcher.linked:not(.vertical) > button:hover:not(.suggested-action):not(.destructive-action), windowcontrols button:hover, placessidebar .navigation-sidebar > row button.sidebar-button:hover, calendar > header > button:hover, row button.circular:hover, check:hover,
-radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.menu modelbutton:hover, spinbutton.vertical > button:hover, spinbutton:not(.vertical) > button:hover, tabbar tab button.image-button:hover,
+radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.background modelbutton:hover, spinbutton:not(.vertical) > button:hover, spinbutton.vertical > button:hover, tabbar tab button.image-button:hover,
 dnd tab button.image-button:hover, splitbutton.flat > button:hover,
-splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
+splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar popover.background button.flat:hover:not(.suggested-action):not(.destructive-action), headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
 toolbar button:hover, dropdown > .linked:not(.vertical) > button:hover:not(:only-child),
 combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -726,9 +694,9 @@ combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:h
 }
 
 .nautilus-window tabbar tab > button.flat:active, .nautilus-window tabbar tab:active > button.flat:active, .nautilus-window tabbar tab:checked > button.flat:active, .nautilus-window tabbar tab:selected > button.flat:active, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:active, stackswitcher.linked:not(.vertical) > button:active:not(.suggested-action):not(.destructive-action), windowcontrols button:active, placessidebar .navigation-sidebar > row button.sidebar-button:active, calendar > header > button:active, row button.circular:active, check:active,
-radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.menu modelbutton:active, spinbutton.vertical > button:active, spinbutton:not(.vertical) > button:active, tabbar tab button.image-button:active,
+radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.background modelbutton:active, spinbutton:not(.vertical) > button:active, spinbutton.vertical > button:active, tabbar tab button.image-button:active,
 dnd tab button.image-button:active, splitbutton.flat > button:active,
-splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
+splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar popover.background button.flat:active:not(.suggested-action):not(.destructive-action), headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
 toolbar button:active, dropdown > .linked:not(.vertical) > button:active:not(:only-child),
 combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
@@ -740,9 +708,9 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
 }
 
 .nautilus-window tabbar tab > button.flat:disabled, .nautilus-window tabbar tab:active > button.flat:disabled, .nautilus-window tabbar tab:checked > button.flat:disabled, .nautilus-window tabbar tab:selected > button.flat:disabled, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:disabled, stackswitcher.linked:not(.vertical) > button:disabled:not(.suggested-action):not(.destructive-action), windowcontrols button:disabled, placessidebar .navigation-sidebar > row button.sidebar-button:disabled, calendar > header > button:disabled, row button.circular:disabled, check:disabled,
-radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.menu modelbutton:disabled, spinbutton.vertical > button:disabled, spinbutton:not(.vertical) > button:disabled, tabbar tab button.image-button:disabled,
+radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.background modelbutton:disabled, spinbutton:not(.vertical) > button:disabled, spinbutton.vertical > button:disabled, tabbar tab button.image-button:disabled,
 dnd tab button.image-button:disabled, splitbutton.flat > button:disabled,
-splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
+splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar popover.background button.flat:disabled:not(.suggested-action):not(.destructive-action), headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
 toolbar button:disabled, dropdown > .linked:not(.vertical) > button:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.flat:disabled {
   box-shadow: none;
@@ -752,7 +720,7 @@ combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.fla
 
 tabbar tab button.image-button:checked,
 dnd tab button.image-button:checked, splitbutton.flat > button:checked,
-splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
+splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar popover.background button.flat:checked:not(.suggested-action):not(.destructive-action), headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
 toolbar button:checked, dropdown > .linked:not(.vertical) > button:checked:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat:checked, button.flat:checked:hover {
   background-color: alpha(currentColor, 0.1);
@@ -761,7 +729,7 @@ combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat
 
 tabbar tab button.image-button:checked:disabled,
 dnd tab button.image-button:checked:disabled, splitbutton.flat > button:checked:disabled,
-splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
+splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar popover.background button.flat:checked:disabled:not(.suggested-action):not(.destructive-action), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
 toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button:checked:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:disabled:not(:only-child), button.flat:checked:disabled {
   background-color: alpha(currentColor, 0.1);
@@ -983,7 +951,7 @@ radio label, button.image-button label, button.close label, button.circular labe
   padding: 0;
 }
 
-.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton.vertical > button, spinbutton:not(.vertical) > button {
+.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton:not(.vertical) > button, spinbutton.vertical > button {
   min-height: 22px;
   min-width: 22px;
   padding: 0;
@@ -1003,39 +971,39 @@ stackswitcher > button.needs-attention > image:dir(rtl) {
   background-position: left 3px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
+.linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
   border-radius: 0;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:first-child, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
+.linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:last-child, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
+.linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:only-child, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
+.linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
   border-radius: 10px;
 }
 
-.linked.vertical > spinbutton.vertical, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
+.linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
   border-radius: 0;
 }
 
-.linked.vertical > spinbutton.vertical:first-child, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child, .linked.vertical > button:first-child {
+.linked.vertical > entry:first-child, .linked.vertical > button:first-child {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
 
-.linked.vertical > spinbutton.vertical:last-child, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child {
+.linked.vertical > entry:last-child, .linked.vertical > button:last-child {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 
-.linked.vertical > spinbutton.vertical:only-child, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child {
+.linked.vertical > entry:only-child, .linked.vertical > button:only-child {
   border-radius: 10px;
 }
 
@@ -1105,31 +1073,64 @@ button.link > label {
 /*****************
  * GtkSpinButton *
  *****************/
-spinbutton:not(.vertical) {
+spinbutton:not(.vertical), spinbutton.vertical {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+  outline: 0 solid transparent;
+  outline-offset: 2px;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: inset 0 0 0 2px transparent;
+  border-radius: 10px;
   padding: 0;
   border-spacing: 0;
 }
 
-spinbutton:not(.vertical) > text {
-  min-width: 24px;
+spinbutton:not(.vertical):focus-within, spinbutton.vertical:focus-within {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: inset 0 0 0 2px transparent;
+  outline-color: #1A73E8;
+  outline-width: 2px;
+  outline-offset: -2px;
+}
+
+spinbutton:not(.vertical):disabled, spinbutton.vertical:disabled {
+  box-shadow: inset 0 0 0 2px transparent;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.38);
+  color: rgba(0, 0, 0, 0.38);
+  outline: none;
+  filter: none;
+  opacity: 1;
+}
+
+spinbutton:not(.vertical):disabled > label, spinbutton.vertical:disabled > label {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+spinbutton:not(.vertical) > text, spinbutton.vertical > text {
   margin: 0;
-  padding-left: 8px;
   border-image: none;
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
 }
 
-spinbutton:not(.vertical) > button {
-  margin: 0;
-  border: solid 4px transparent;
+spinbutton:not(.vertical) > button, spinbutton.vertical > button {
+  padding: 0;
+  border: 4px solid transparent;
 }
 
-spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) {
+spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled), spinbutton.vertical > button:focus:not(:hover):not(:active):not(:disabled) {
   box-shadow: inset 0 0 0 9999px transparent;
   color: rgba(0, 0, 0, 0.6);
 }
 
+spinbutton:not(.vertical) > text {
+  min-width: 24px;
+  padding-left: 8px;
+}
+
 spinbutton:not(.vertical) > button.up:dir(ltr), spinbutton:not(.vertical) > button.down:dir(rtl) {
   margin-left: -2px;
 }
@@ -1138,35 +1139,16 @@ spinbutton:not(.vertical) > button.up:dir(rtl), spinbutton:not(.vertical) > butt
   margin-right: -2px;
 }
 
-spinbutton.vertical {
-  padding: 0;
-}
-
 spinbutton.vertical:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
 spinbutton.vertical > text {
-  margin: 0;
-  border-image: none;
-  border-radius: 0;
-  box-shadow: none;
-  background-color: transparent;
   min-height: 32px;
   min-width: 36px;
   padding: 0;
 }
 
-spinbutton.vertical > button {
-  padding: 0;
-  border: solid 4px transparent;
-}
-
-spinbutton.vertical > button:focus:not(:hover):not(:active) {
-  box-shadow: inset 0 0 0 9999px transparent;
-  color: rgba(0, 0, 0, 0.6);
-}
-
 spinbutton.vertical > button.up {
   margin: 0 2px;
 }
@@ -1490,8 +1472,15 @@ headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructi
   color: rgba(0, 0, 0, 0.26);
 }
 
+headerbar entry {
+  caret-color: rgba(0, 0, 0, 0.87);
+}
+
 headerbar entry {
   background-color: rgba(0, 0, 0, 0.04);
+}
+
+headerbar entry, headerbar entry > text {
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -1515,12 +1504,12 @@ headerbar entry image:disabled {
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.4);
-  background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.87);
   min-height: 40px;
   padding: 0;
   margin: 0;
   border-radius: 16px 16px 0 0;
+  background-color: #FFFFFF;
 }
 
 headerbar:disabled {
@@ -1528,8 +1517,8 @@ headerbar:disabled {
 }
 
 headerbar:backdrop {
-  background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
+  background-color: #FFFFFF;
 }
 
 headerbar:backdrop:disabled {
@@ -1604,10 +1593,22 @@ headerbar button.toggle {
   border-radius: 9999px;
 }
 
+headerbar popover.background > contents {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+headerbar popover.background > contents .dim-label, headerbar popover.background > contents row.expander:not(:checked) image.expander-row-arrow, row.expander:not(:checked) headerbar popover.background > contents image.expander-row-arrow, headerbar popover.background > contents row label.subtitle, row headerbar popover.background > contents label.subtitle {
+  color: rgba(0, 0, 0, 0.6);
+}
+
 headerbar popover.background button, headerbar popover.background entry, headerbar popover.background spinbutton {
   border-radius: 5px;
 }
 
+headerbar popover.background button:not(.suggested-action):not(.destructive-action) image {
+  color: rgba(0, 0, 0, 0.87);
+}
+
 headerbar popover.background .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
   border-radius: 0;
 }
@@ -1631,10 +1632,39 @@ headerbar stackswitcher {
 
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button {
   border-radius: 9999px;
+  color: rgba(0, 0, 0, 0.6);
 }
 
-box.vertical headerbar {
-  background-color: #FFFFFF;
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:active {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked:disabled {
+  color: rgba(255, 255, 255, 0.3);
 }
 
 headerbar > windowhandle > box {
@@ -1768,6 +1798,35 @@ pathbar > button.slider-button {
   padding-right: 4px;
 }
 
+.pathbar {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+  border: none;
+  border-radius: 10px;
+  padding: 2px;
+}
+
+headerbar .pathbar {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.pathbar > button {
+  margin-top: 0;
+  margin-bottom: 0;
+  min-height: 20px;
+  border-radius: 8px;
+  border: none;
+  box-shadow: none;
+}
+
+.pathbar > button:last-child {
+  background-color: alpha(currentColor, 0.1);
+  color: rgba(0, 0, 0, 0.87);
+}
+
 /**************
  * Tree Views *
  **************/
@@ -2061,34 +2120,6 @@ popover.menu check.right {
   margin-right: 0;
 }
 
-popover.menu modelbutton {
-  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 20px;
-  min-width: 48px;
-  padding: 2px 6px;
-  border-radius: 5px;
-  color: rgba(0, 0, 0, 0.87);
-  font: initial;
-  text-shadow: none;
-  border-spacing: 4px;
-}
-
-popover.menu modelbutton accelerator {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-popover.menu modelbutton accelerator:disabled {
-  color: rgba(0, 0, 0, 0.12);
-}
-
-popover.menu modelbutton arrow.left {
-  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
-}
-
-popover.menu modelbutton arrow.right {
-  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
-}
-
 popover.menu label.title {
   font-weight: bold;
   padding: 4px 24px;
@@ -2159,6 +2190,35 @@ popover.background .linked > button:not(.radio):only-child {
   border-radius: 5px;
 }
 
+popover.background modelbutton {
+  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+  min-height: 20px;
+  min-width: 48px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  color: rgba(0, 0, 0, 0.87);
+  font: initial;
+  text-shadow: none;
+  border-spacing: 4px;
+}
+
+popover.background modelbutton accelerator {
+  color: rgba(0, 0, 0, 0.38);
+  margin-left: 20px;
+}
+
+popover.background modelbutton accelerator:disabled {
+  color: rgba(0, 0, 0, 0.12);
+}
+
+popover.background modelbutton arrow.left {
+  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+}
+
+popover.background modelbutton arrow.right {
+  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+}
+
 popover.background.menu button,
 popover.background button.model {
   min-height: 32px;
@@ -3442,8 +3502,11 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button:hover row, button:active row, button:checked row {
+button row, button row:hover, button row.has-open-popup, button row:active {
   background-color: transparent;
+  box-shadow: none;
+  background-image: none;
+  transition: none;
 }
 
 button:checked row {
@@ -4430,8 +4493,7 @@ gridview > child:selected, row:selected, calendar:selected, calendar > grid > la
   background-color: rgba(26, 115, 232, 0.2);
 }
 
-textview text selection:focus, textview text selection, label > selection,
-entry > text > selection, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > selection, calendar > grid > label.today:selected {
+textview text selection:focus, textview text selection, label > selection, entry > text > selection, calendar > grid > label.today:selected {
   color: white;
   background-color: #1A73E8;
 }
@@ -4833,12 +4895,22 @@ popover.entry-completion > contents {
 
 #NautilusQueryEditor {
   border-radius: 9999px;
+  color: rgba(0, 0, 0, 0.6);
 }
 
-#NautilusQueryEditor > menubutton > button {
-  min-width: 16px;
-  min-height: 16px;
+#NautilusQueryEditor:focus-within {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+#NautilusQueryEditor:disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+#NautilusQueryEditor > menubutton > button.image-button {
+  min-width: 24px;
+  min-height: 24px;
   margin: 0;
+  padding: 0;
 }
 
 #NautilusQueryEditor > text {
@@ -4889,6 +4961,10 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+window.background > contents > leaflet stack.background {
+  background-color: transparent;
+}
+
 .history-view {
   background-color: #FFFFFF;
 }
@@ -5940,11 +6016,8 @@ tabbox:drop(active) {
 }
 
 leaflet {
-  outline-color: rgba(255, 255, 255, 0.4);
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
   border-radius: 16px;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
 }
 
 leaflet headerbar {
diff --git a/src/gtk/4.0/gtk-Light.css b/src/gtk/4.0/gtk-Light.css
index f638e0b..08cb4d6 100644
--- a/src/gtk/4.0/gtk-Light.css
+++ b/src/gtk/4.0/gtk-Light.css
@@ -277,12 +277,7 @@ spinner:checked:disabled {
 /****************
  * Text Entries *
  ****************/
-spinbutton.vertical, spinbutton:not(.vertical),
-entry {
-  min-height: 36px;
-  padding: 0 8px;
-  border-spacing: 6px;
-  border-radius: 12px;
+headerbar popover.background entry, entry {
   caret-color: currentColor;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -292,8 +287,7 @@ entry {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.vertical:focus-within, spinbutton:focus-within:not(.vertical),
-entry:focus-within {
+headerbar popover.background entry:focus-within, entry:focus-within {
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
   box-shadow: inset 0 0 0 2px transparent;
@@ -302,16 +296,14 @@ entry:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.vertical:drop(active), spinbutton:drop(active):not(.vertical),
-entry:drop(active) {
+headerbar popover.background entry:drop(active), entry:drop(active) {
   background-color: alpha(currentColor, 0.08);
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
   color: rgba(0, 0, 0, 0.87);
   outline: none;
 }
 
-spinbutton.vertical:disabled, spinbutton:disabled:not(.vertical),
-entry:disabled {
+headerbar popover.background entry:disabled, entry:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -321,48 +313,46 @@ entry:disabled {
   opacity: 1;
 }
 
-spinbutton.vertical:disabled > label, spinbutton:disabled:not(.vertical) > label,
-entry:disabled > label {
+headerbar popover.background entry:disabled > label, entry:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.flat.vertical, spinbutton.flat:not(.vertical),
-entry.flat {
-  min-height: 0;
-  padding: 2px;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-spinbutton.vertical image, spinbutton:not(.vertical) image,
-entry image {
+headerbar popover.background entry image, entry image {
   color: rgba(0, 0, 0, 0.6);
 }
 
-spinbutton.vertical image:hover, spinbutton:not(.vertical) image:hover, spinbutton.vertical image:active, spinbutton:not(.vertical) image:active,
-entry image:hover,
-entry image:active {
+headerbar popover.background entry image:hover, entry image:hover, headerbar popover.background entry image:active, entry image:active {
   color: rgba(0, 0, 0, 0.87);
 }
 
-spinbutton.vertical image:disabled, spinbutton:not(.vertical) image:disabled,
-entry image:disabled {
+headerbar popover.background entry image:disabled, entry image:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical image.left, spinbutton:not(.vertical) image.left,
+entry {
+  min-height: 36px;
+  padding: 0 8px;
+  border-spacing: 6px;
+  border-radius: 12px;
+}
+
+entry.flat {
+  min-height: 0;
+  padding: 2px;
+  border-radius: 0;
+  background-color: transparent;
+}
+
 entry image.left {
   margin-left: 2px;
   margin-right: 6px;
 }
 
-spinbutton.vertical image.right, spinbutton:not(.vertical) image.right,
 entry image.right {
   margin-left: 6px;
   margin-right: 2px;
 }
 
-spinbutton.vertical undershoot.left, spinbutton:not(.vertical) undershoot.left,
 entry undershoot.left {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.26) 50%);
@@ -375,7 +365,6 @@ entry undershoot.left {
   margin: 4px 0;
 }
 
-spinbutton.vertical undershoot.right, spinbutton:not(.vertical) undershoot.right,
 entry undershoot.right {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.26) 50%);
@@ -388,7 +377,6 @@ entry undershoot.right {
   margin: 4px 0;
 }
 
-spinbutton.error.vertical, spinbutton.error:not(.vertical),
 entry.error {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -398,18 +386,15 @@ entry.error {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.error.vertical image, spinbutton.error:not(.vertical) image,
 entry.error image {
   color: #D93025;
 }
 
-spinbutton.error.vertical selection, spinbutton.error:not(.vertical) selection,
 entry.error selection {
   color: white;
   background-color: #D93025;
 }
 
-spinbutton.error.vertical:focus-within, spinbutton.error:focus-within:not(.vertical),
 entry.error:focus-within {
   background-color: rgba(217, 48, 37, 0.08);
   color: #D93025;
@@ -419,7 +404,6 @@ entry.error:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.error.vertical:disabled, spinbutton.error:disabled:not(.vertical),
 entry.error:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(217, 48, 37, 0.04);
@@ -430,12 +414,10 @@ entry.error:disabled {
   opacity: 1;
 }
 
-spinbutton.error.vertical:disabled > label, spinbutton.error:disabled:not(.vertical) > label,
 entry.error:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.success.vertical, spinbutton.success:not(.vertical),
 entry.success {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -445,18 +427,15 @@ entry.success {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.success.vertical image, spinbutton.success:not(.vertical) image,
 entry.success image {
   color: #0F9D58;
 }
 
-spinbutton.success.vertical selection, spinbutton.success:not(.vertical) selection,
 entry.success selection {
   color: white;
   background-color: #0F9D58;
 }
 
-spinbutton.success.vertical:focus-within, spinbutton.success:focus-within:not(.vertical),
 entry.success:focus-within {
   background-color: rgba(15, 157, 88, 0.08);
   color: #0F9D58;
@@ -466,7 +445,6 @@ entry.success:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.success.vertical:disabled, spinbutton.success:disabled:not(.vertical),
 entry.success:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(15, 157, 88, 0.04);
@@ -477,12 +455,10 @@ entry.success:disabled {
   opacity: 1;
 }
 
-spinbutton.success.vertical:disabled > label, spinbutton.success:disabled:not(.vertical) > label,
 entry.success:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.warning.vertical, spinbutton.warning:not(.vertical),
 entry.warning {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -492,18 +468,15 @@ entry.warning {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.warning.vertical image, spinbutton.warning:not(.vertical) image,
 entry.warning image {
   color: #F4B400;
 }
 
-spinbutton.warning.vertical selection, spinbutton.warning:not(.vertical) selection,
 entry.warning selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #F4B400;
 }
 
-spinbutton.warning.vertical:focus-within, spinbutton.warning:focus-within:not(.vertical),
 entry.warning:focus-within {
   background-color: rgba(244, 180, 0, 0.08);
   color: #F4B400;
@@ -513,7 +486,6 @@ entry.warning:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.warning.vertical:disabled, spinbutton.warning:disabled:not(.vertical),
 entry.warning:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(244, 180, 0, 0.04);
@@ -524,14 +496,10 @@ entry.warning:disabled {
   opacity: 1;
 }
 
-spinbutton.warning.vertical:disabled > label, spinbutton.warning:disabled:not(.vertical) > label,
 entry.warning:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical > progress, spinbutton:not(.vertical) > progress,
-spinbutton.vertical progress > trough > progress,
-spinbutton:not(.vertical) progress > trough > progress,
 entry > progress,
 entry progress > trough > progress {
   margin: 2px -8px;
@@ -620,7 +588,7 @@ infobar.warning > revealer > box button:checked:disabled, popover.background.tou
   color: rgba(255, 255, 255, 0.5);
 }
 
-headerbar popover.background button:not(.suggested-action):not(.destructive-action):not(.flat), button {
+headerbar popover.background button:not(.suggested-action):not(.destructive-action), button {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   outline: none;
   box-shadow: inset 0 0 0 9999px transparent;
@@ -632,15 +600,15 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
   color: rgba(0, 0, 0, 0.87);
 }
 
-headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action):not(.flat), button:focus {
+headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action), button:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08), inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:hover {
+headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action), button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
-headerbar popover.background button:active:not(.suggested-action):not(.destructive-action):not(.flat), button:active {
+headerbar popover.background button:active:not(.suggested-action):not(.destructive-action), button:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
   animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -648,7 +616,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
   background-size: 100% 100%;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:disabled {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action), button:disabled {
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -656,21 +624,21 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat) > label, button:disabled > label {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action):not(.flat), button:checked {
+headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #1A73E8;
   color: white;
 }
 
-headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:hover {
+headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action), button:checked:hover {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:disabled {
+headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action), button:checked:disabled {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -689,9 +657,9 @@ button:drop(active) {
 }
 
 .nautilus-window tabbar tab > button.flat, .nautilus-window tabbar tab:active > button.flat, .nautilus-window tabbar tab:checked > button.flat, .nautilus-window tabbar tab:selected > button.flat, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button, stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action), windowcontrols button, placessidebar .navigation-sidebar > row button.sidebar-button, calendar > header > button, row button.circular, check,
-radio, scrollbar button, notebook > header > tabs > arrow, popover.menu modelbutton, spinbutton.vertical > button, spinbutton:not(.vertical) > button, tabbar tab button.image-button,
+radio, scrollbar button, notebook > header > tabs > arrow, popover.background modelbutton, spinbutton:not(.vertical) > button, spinbutton.vertical > button, tabbar tab button.image-button,
 dnd tab button.image-button, splitbutton.flat > button,
-splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
+splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar popover.background button.flat:not(.suggested-action):not(.destructive-action), headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
 toolbar button, dropdown > .linked:not(.vertical) > button:not(:only-child),
 combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
@@ -706,9 +674,9 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
 }
 
 .nautilus-window tabbar tab > button.flat:focus, .nautilus-window tabbar tab:active > button.flat:focus, .nautilus-window tabbar tab:checked > button.flat:focus, .nautilus-window tabbar tab:selected > button.flat:focus, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:focus, stackswitcher.linked:not(.vertical) > button:focus:not(.suggested-action):not(.destructive-action), windowcontrols button:focus, placessidebar .navigation-sidebar > row button.sidebar-button:focus, calendar > header > button:focus, row button.circular:focus, check:focus,
-radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.menu modelbutton:focus, spinbutton.vertical > button:focus, spinbutton:not(.vertical) > button:focus, tabbar tab button.image-button:focus,
+radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.background modelbutton:focus, spinbutton:not(.vertical) > button:focus, spinbutton.vertical > button:focus, tabbar tab button.image-button:focus,
 dnd tab button.image-button:focus, splitbutton.flat > button:focus,
-splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
+splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar popover.background button.flat:focus:not(.suggested-action):not(.destructive-action), headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
 toolbar button:focus, dropdown > .linked:not(.vertical) > button:focus:not(:only-child),
 combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
@@ -716,9 +684,9 @@ combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:f
 }
 
 .nautilus-window tabbar tab > button.flat:hover, .nautilus-window tabbar tab:active > button.flat:hover, .nautilus-window tabbar tab:checked > button.flat:hover, .nautilus-window tabbar tab:selected > button.flat:hover, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:hover, stackswitcher.linked:not(.vertical) > button:hover:not(.suggested-action):not(.destructive-action), windowcontrols button:hover, placessidebar .navigation-sidebar > row button.sidebar-button:hover, calendar > header > button:hover, row button.circular:hover, check:hover,
-radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.menu modelbutton:hover, spinbutton.vertical > button:hover, spinbutton:not(.vertical) > button:hover, tabbar tab button.image-button:hover,
+radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.background modelbutton:hover, spinbutton:not(.vertical) > button:hover, spinbutton.vertical > button:hover, tabbar tab button.image-button:hover,
 dnd tab button.image-button:hover, splitbutton.flat > button:hover,
-splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
+splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar popover.background button.flat:hover:not(.suggested-action):not(.destructive-action), headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
 toolbar button:hover, dropdown > .linked:not(.vertical) > button:hover:not(:only-child),
 combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -726,9 +694,9 @@ combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:h
 }
 
 .nautilus-window tabbar tab > button.flat:active, .nautilus-window tabbar tab:active > button.flat:active, .nautilus-window tabbar tab:checked > button.flat:active, .nautilus-window tabbar tab:selected > button.flat:active, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:active, stackswitcher.linked:not(.vertical) > button:active:not(.suggested-action):not(.destructive-action), windowcontrols button:active, placessidebar .navigation-sidebar > row button.sidebar-button:active, calendar > header > button:active, row button.circular:active, check:active,
-radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.menu modelbutton:active, spinbutton.vertical > button:active, spinbutton:not(.vertical) > button:active, tabbar tab button.image-button:active,
+radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.background modelbutton:active, spinbutton:not(.vertical) > button:active, spinbutton.vertical > button:active, tabbar tab button.image-button:active,
 dnd tab button.image-button:active, splitbutton.flat > button:active,
-splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
+splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar popover.background button.flat:active:not(.suggested-action):not(.destructive-action), headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
 toolbar button:active, dropdown > .linked:not(.vertical) > button:active:not(:only-child),
 combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
@@ -740,9 +708,9 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
 }
 
 .nautilus-window tabbar tab > button.flat:disabled, .nautilus-window tabbar tab:active > button.flat:disabled, .nautilus-window tabbar tab:checked > button.flat:disabled, .nautilus-window tabbar tab:selected > button.flat:disabled, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:disabled, stackswitcher.linked:not(.vertical) > button:disabled:not(.suggested-action):not(.destructive-action), windowcontrols button:disabled, placessidebar .navigation-sidebar > row button.sidebar-button:disabled, calendar > header > button:disabled, row button.circular:disabled, check:disabled,
-radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.menu modelbutton:disabled, spinbutton.vertical > button:disabled, spinbutton:not(.vertical) > button:disabled, tabbar tab button.image-button:disabled,
+radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.background modelbutton:disabled, spinbutton:not(.vertical) > button:disabled, spinbutton.vertical > button:disabled, tabbar tab button.image-button:disabled,
 dnd tab button.image-button:disabled, splitbutton.flat > button:disabled,
-splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
+splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar popover.background button.flat:disabled:not(.suggested-action):not(.destructive-action), headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
 toolbar button:disabled, dropdown > .linked:not(.vertical) > button:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.flat:disabled {
   box-shadow: none;
@@ -752,7 +720,7 @@ combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.fla
 
 tabbar tab button.image-button:checked,
 dnd tab button.image-button:checked, splitbutton.flat > button:checked,
-splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
+splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar popover.background button.flat:checked:not(.suggested-action):not(.destructive-action), headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
 toolbar button:checked, dropdown > .linked:not(.vertical) > button:checked:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat:checked, button.flat:checked:hover {
   background-color: alpha(currentColor, 0.1);
@@ -761,7 +729,7 @@ combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat
 
 tabbar tab button.image-button:checked:disabled,
 dnd tab button.image-button:checked:disabled, splitbutton.flat > button:checked:disabled,
-splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
+splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar popover.background button.flat:checked:disabled:not(.suggested-action):not(.destructive-action), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
 toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button:checked:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:disabled:not(:only-child), button.flat:checked:disabled {
   background-color: alpha(currentColor, 0.1);
@@ -983,7 +951,7 @@ radio label, button.image-button label, button.close label, button.circular labe
   padding: 0;
 }
 
-.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton.vertical > button, spinbutton:not(.vertical) > button {
+.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton:not(.vertical) > button, spinbutton.vertical > button {
   min-height: 24px;
   min-width: 24px;
   padding: 0;
@@ -1003,39 +971,39 @@ stackswitcher > button.needs-attention > image:dir(rtl) {
   background-position: left 3px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
+.linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
   border-radius: 0;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:first-child, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
+.linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:last-child, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
+.linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:only-child, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
+.linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
   border-radius: 12px;
 }
 
-.linked.vertical > spinbutton.vertical, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
+.linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
   border-radius: 0;
 }
 
-.linked.vertical > spinbutton.vertical:first-child, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child, .linked.vertical > button:first-child {
+.linked.vertical > entry:first-child, .linked.vertical > button:first-child {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 }
 
-.linked.vertical > spinbutton.vertical:last-child, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child {
+.linked.vertical > entry:last-child, .linked.vertical > button:last-child {
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
-.linked.vertical > spinbutton.vertical:only-child, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child {
+.linked.vertical > entry:only-child, .linked.vertical > button:only-child {
   border-radius: 12px;
 }
 
@@ -1105,31 +1073,64 @@ button.link > label {
 /*****************
  * GtkSpinButton *
  *****************/
-spinbutton:not(.vertical) {
+spinbutton:not(.vertical), spinbutton.vertical {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+  outline: 0 solid transparent;
+  outline-offset: 2px;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: inset 0 0 0 2px transparent;
+  border-radius: 12px;
   padding: 0;
   border-spacing: 0;
 }
 
-spinbutton:not(.vertical) > text {
-  min-width: 32px;
+spinbutton:not(.vertical):focus-within, spinbutton.vertical:focus-within {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: inset 0 0 0 2px transparent;
+  outline-color: #1A73E8;
+  outline-width: 2px;
+  outline-offset: -2px;
+}
+
+spinbutton:not(.vertical):disabled, spinbutton.vertical:disabled {
+  box-shadow: inset 0 0 0 2px transparent;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.38);
+  color: rgba(0, 0, 0, 0.38);
+  outline: none;
+  filter: none;
+  opacity: 1;
+}
+
+spinbutton:not(.vertical):disabled > label, spinbutton.vertical:disabled > label {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+spinbutton:not(.vertical) > text, spinbutton.vertical > text {
   margin: 0;
-  padding-left: 12px;
   border-image: none;
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
 }
 
-spinbutton:not(.vertical) > button {
-  margin: 0;
-  border: solid 6px transparent;
+spinbutton:not(.vertical) > button, spinbutton.vertical > button {
+  padding: 0;
+  border: 6px solid transparent;
 }
 
-spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) {
+spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled), spinbutton.vertical > button:focus:not(:hover):not(:active):not(:disabled) {
   box-shadow: inset 0 0 0 9999px transparent;
   color: rgba(0, 0, 0, 0.6);
 }
 
+spinbutton:not(.vertical) > text {
+  min-width: 32px;
+  padding-left: 12px;
+}
+
 spinbutton:not(.vertical) > button.up:dir(ltr), spinbutton:not(.vertical) > button.down:dir(rtl) {
   margin-left: -3px;
 }
@@ -1138,35 +1139,16 @@ spinbutton:not(.vertical) > button.up:dir(rtl), spinbutton:not(.vertical) > butt
   margin-right: -3px;
 }
 
-spinbutton.vertical {
-  padding: 0;
-}
-
 spinbutton.vertical:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
 spinbutton.vertical > text {
-  margin: 0;
-  border-image: none;
-  border-radius: 0;
-  box-shadow: none;
-  background-color: transparent;
   min-height: 36px;
   min-width: 42px;
   padding: 0;
 }
 
-spinbutton.vertical > button {
-  padding: 0;
-  border: solid 6px transparent;
-}
-
-spinbutton.vertical > button:focus:not(:hover):not(:active) {
-  box-shadow: inset 0 0 0 9999px transparent;
-  color: rgba(0, 0, 0, 0.6);
-}
-
 spinbutton.vertical > button.up {
   margin: 0 3px;
 }
@@ -1490,8 +1472,15 @@ headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructi
   color: rgba(0, 0, 0, 0.26);
 }
 
+headerbar entry {
+  caret-color: rgba(0, 0, 0, 0.87);
+}
+
 headerbar entry {
   background-color: rgba(0, 0, 0, 0.04);
+}
+
+headerbar entry, headerbar entry > text {
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -1515,12 +1504,12 @@ headerbar entry image:disabled {
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.4);
-  background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.87);
   min-height: 48px;
   padding: 0;
   margin: 0;
   border-radius: 18px 18px 0 0;
+  background-color: #FFFFFF;
 }
 
 headerbar:disabled {
@@ -1528,8 +1517,8 @@ headerbar:disabled {
 }
 
 headerbar:backdrop {
-  background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
+  background-color: #FFFFFF;
 }
 
 headerbar:backdrop:disabled {
@@ -1604,10 +1593,22 @@ headerbar button.toggle {
   border-radius: 9999px;
 }
 
+headerbar popover.background > contents {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+headerbar popover.background > contents .dim-label, headerbar popover.background > contents row.expander:not(:checked) image.expander-row-arrow, row.expander:not(:checked) headerbar popover.background > contents image.expander-row-arrow, headerbar popover.background > contents row label.subtitle, row headerbar popover.background > contents label.subtitle {
+  color: rgba(0, 0, 0, 0.6);
+}
+
 headerbar popover.background button, headerbar popover.background entry, headerbar popover.background spinbutton {
   border-radius: 5px;
 }
 
+headerbar popover.background button:not(.suggested-action):not(.destructive-action) image {
+  color: rgba(0, 0, 0, 0.87);
+}
+
 headerbar popover.background .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
   border-radius: 0;
 }
@@ -1631,10 +1632,39 @@ headerbar stackswitcher {
 
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button {
   border-radius: 9999px;
+  color: rgba(0, 0, 0, 0.6);
 }
 
-box.vertical headerbar {
-  background-color: #FFFFFF;
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:active {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked:disabled {
+  color: rgba(255, 255, 255, 0.3);
 }
 
 headerbar > windowhandle > box {
@@ -1768,6 +1798,35 @@ pathbar > button.slider-button {
   padding-right: 4px;
 }
 
+.pathbar {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+  border: none;
+  border-radius: 12px;
+  padding: 2px;
+}
+
+headerbar .pathbar {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.pathbar > button {
+  margin-top: 0;
+  margin-bottom: 0;
+  min-height: 20px;
+  border-radius: 10px;
+  border: none;
+  box-shadow: none;
+}
+
+.pathbar > button:last-child {
+  background-color: alpha(currentColor, 0.1);
+  color: rgba(0, 0, 0, 0.87);
+}
+
 /**************
  * Tree Views *
  **************/
@@ -2061,34 +2120,6 @@ popover.menu check.right {
   margin-right: 0;
 }
 
-popover.menu modelbutton {
-  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 22px;
-  min-width: 56px;
-  padding: 3px 9px;
-  border-radius: 5px;
-  color: rgba(0, 0, 0, 0.87);
-  font: initial;
-  text-shadow: none;
-  border-spacing: 6px;
-}
-
-popover.menu modelbutton accelerator {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-popover.menu modelbutton accelerator:disabled {
-  color: rgba(0, 0, 0, 0.12);
-}
-
-popover.menu modelbutton arrow.left {
-  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
-}
-
-popover.menu modelbutton arrow.right {
-  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
-}
-
 popover.menu label.title {
   font-weight: bold;
   padding: 4px 26px;
@@ -2159,6 +2190,35 @@ popover.background .linked > button:not(.radio):only-child {
   border-radius: 5px;
 }
 
+popover.background modelbutton {
+  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+  min-height: 22px;
+  min-width: 56px;
+  padding: 3px 9px;
+  border-radius: 5px;
+  color: rgba(0, 0, 0, 0.87);
+  font: initial;
+  text-shadow: none;
+  border-spacing: 6px;
+}
+
+popover.background modelbutton accelerator {
+  color: rgba(0, 0, 0, 0.38);
+  margin-left: 30px;
+}
+
+popover.background modelbutton accelerator:disabled {
+  color: rgba(0, 0, 0, 0.12);
+}
+
+popover.background modelbutton arrow.left {
+  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+}
+
+popover.background modelbutton arrow.right {
+  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+}
+
 popover.background.menu button,
 popover.background button.model {
   min-height: 32px;
@@ -3442,8 +3502,11 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button:hover row, button:active row, button:checked row {
+button row, button row:hover, button row.has-open-popup, button row:active {
   background-color: transparent;
+  box-shadow: none;
+  background-image: none;
+  transition: none;
 }
 
 button:checked row {
@@ -4430,8 +4493,7 @@ gridview > child:selected, row:selected, calendar:selected, calendar > grid > la
   background-color: rgba(26, 115, 232, 0.2);
 }
 
-textview text selection:focus, textview text selection, label > selection,
-entry > text > selection, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > selection, calendar > grid > label.today:selected {
+textview text selection:focus, textview text selection, label > selection, entry > text > selection, calendar > grid > label.today:selected {
   color: white;
   background-color: #1A73E8;
 }
@@ -4833,12 +4895,22 @@ popover.entry-completion > contents {
 
 #NautilusQueryEditor {
   border-radius: 9999px;
+  color: rgba(0, 0, 0, 0.6);
 }
 
-#NautilusQueryEditor > menubutton > button {
-  min-width: 16px;
-  min-height: 16px;
+#NautilusQueryEditor:focus-within {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+#NautilusQueryEditor:disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+#NautilusQueryEditor > menubutton > button.image-button {
+  min-width: 28px;
+  min-height: 28px;
   margin: 0;
+  padding: 0;
 }
 
 #NautilusQueryEditor > text {
@@ -4889,6 +4961,10 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+window.background > contents > leaflet stack.background {
+  background-color: transparent;
+}
+
 .history-view {
   background-color: #FFFFFF;
 }
@@ -5940,11 +6016,8 @@ tabbox:drop(active) {
 }
 
 leaflet {
-  outline-color: rgba(255, 255, 255, 0.4);
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
   border-radius: 18px;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
 }
 
 leaflet headerbar {
diff --git a/src/gtk/4.0/gtk.css b/src/gtk/4.0/gtk.css
index c22e2a4..1ef19c2 100644
--- a/src/gtk/4.0/gtk.css
+++ b/src/gtk/4.0/gtk.css
@@ -277,12 +277,7 @@ spinner:checked:disabled {
 /****************
  * Text Entries *
  ****************/
-spinbutton.vertical, spinbutton:not(.vertical),
-entry {
-  min-height: 36px;
-  padding: 0 8px;
-  border-spacing: 6px;
-  border-radius: 12px;
+headerbar popover.background entry, entry {
   caret-color: currentColor;
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -292,8 +287,7 @@ entry {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.vertical:focus-within, spinbutton:focus-within:not(.vertical),
-entry:focus-within {
+headerbar popover.background entry:focus-within, entry:focus-within {
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
   box-shadow: inset 0 0 0 2px transparent;
@@ -302,16 +296,14 @@ entry:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.vertical:drop(active), spinbutton:drop(active):not(.vertical),
-entry:drop(active) {
+headerbar popover.background entry:drop(active), entry:drop(active) {
   background-color: alpha(currentColor, 0.08);
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
   color: rgba(0, 0, 0, 0.87);
   outline: none;
 }
 
-spinbutton.vertical:disabled, spinbutton:disabled:not(.vertical),
-entry:disabled {
+headerbar popover.background entry:disabled, entry:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -321,48 +313,46 @@ entry:disabled {
   opacity: 1;
 }
 
-spinbutton.vertical:disabled > label, spinbutton:disabled:not(.vertical) > label,
-entry:disabled > label {
+headerbar popover.background entry:disabled > label, entry:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.flat.vertical, spinbutton.flat:not(.vertical),
-entry.flat {
-  min-height: 0;
-  padding: 2px;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-spinbutton.vertical image, spinbutton:not(.vertical) image,
-entry image {
+headerbar popover.background entry image, entry image {
   color: rgba(0, 0, 0, 0.6);
 }
 
-spinbutton.vertical image:hover, spinbutton:not(.vertical) image:hover, spinbutton.vertical image:active, spinbutton:not(.vertical) image:active,
-entry image:hover,
-entry image:active {
+headerbar popover.background entry image:hover, entry image:hover, headerbar popover.background entry image:active, entry image:active {
   color: rgba(0, 0, 0, 0.87);
 }
 
-spinbutton.vertical image:disabled, spinbutton:not(.vertical) image:disabled,
-entry image:disabled {
+headerbar popover.background entry image:disabled, entry image:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical image.left, spinbutton:not(.vertical) image.left,
+entry {
+  min-height: 36px;
+  padding: 0 8px;
+  border-spacing: 6px;
+  border-radius: 12px;
+}
+
+entry.flat {
+  min-height: 0;
+  padding: 2px;
+  border-radius: 0;
+  background-color: transparent;
+}
+
 entry image.left {
   margin-left: 2px;
   margin-right: 6px;
 }
 
-spinbutton.vertical image.right, spinbutton:not(.vertical) image.right,
 entry image.right {
   margin-left: 6px;
   margin-right: 2px;
 }
 
-spinbutton.vertical undershoot.left, spinbutton:not(.vertical) undershoot.left,
 entry undershoot.left {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.26) 50%);
@@ -375,7 +365,6 @@ entry undershoot.left {
   margin: 4px 0;
 }
 
-spinbutton.vertical undershoot.right, spinbutton:not(.vertical) undershoot.right,
 entry undershoot.right {
   background-color: transparent;
   background-image: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.26) 50%);
@@ -388,7 +377,6 @@ entry undershoot.right {
   margin: 4px 0;
 }
 
-spinbutton.error.vertical, spinbutton.error:not(.vertical),
 entry.error {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -398,18 +386,15 @@ entry.error {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.error.vertical image, spinbutton.error:not(.vertical) image,
 entry.error image {
   color: #D93025;
 }
 
-spinbutton.error.vertical selection, spinbutton.error:not(.vertical) selection,
 entry.error selection {
   color: white;
   background-color: #D93025;
 }
 
-spinbutton.error.vertical:focus-within, spinbutton.error:focus-within:not(.vertical),
 entry.error:focus-within {
   background-color: rgba(217, 48, 37, 0.08);
   color: #D93025;
@@ -419,7 +404,6 @@ entry.error:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.error.vertical:disabled, spinbutton.error:disabled:not(.vertical),
 entry.error:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(217, 48, 37, 0.04);
@@ -430,12 +414,10 @@ entry.error:disabled {
   opacity: 1;
 }
 
-spinbutton.error.vertical:disabled > label, spinbutton.error:disabled:not(.vertical) > label,
 entry.error:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.success.vertical, spinbutton.success:not(.vertical),
 entry.success {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -445,18 +427,15 @@ entry.success {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.success.vertical image, spinbutton.success:not(.vertical) image,
 entry.success image {
   color: #0F9D58;
 }
 
-spinbutton.success.vertical selection, spinbutton.success:not(.vertical) selection,
 entry.success selection {
   color: white;
   background-color: #0F9D58;
 }
 
-spinbutton.success.vertical:focus-within, spinbutton.success:focus-within:not(.vertical),
 entry.success:focus-within {
   background-color: rgba(15, 157, 88, 0.08);
   color: #0F9D58;
@@ -466,7 +445,6 @@ entry.success:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.success.vertical:disabled, spinbutton.success:disabled:not(.vertical),
 entry.success:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(15, 157, 88, 0.04);
@@ -477,12 +455,10 @@ entry.success:disabled {
   opacity: 1;
 }
 
-spinbutton.success.vertical:disabled > label, spinbutton.success:disabled:not(.vertical) > label,
 entry.success:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.warning.vertical, spinbutton.warning:not(.vertical),
 entry.warning {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
   outline: 0 solid transparent;
@@ -492,18 +468,15 @@ entry.warning {
   box-shadow: inset 0 0 0 2px transparent;
 }
 
-spinbutton.warning.vertical image, spinbutton.warning:not(.vertical) image,
 entry.warning image {
   color: #F4B400;
 }
 
-spinbutton.warning.vertical selection, spinbutton.warning:not(.vertical) selection,
 entry.warning selection {
   color: rgba(0, 0, 0, 0.87);
   background-color: #F4B400;
 }
 
-spinbutton.warning.vertical:focus-within, spinbutton.warning:focus-within:not(.vertical),
 entry.warning:focus-within {
   background-color: rgba(244, 180, 0, 0.08);
   color: #F4B400;
@@ -513,7 +486,6 @@ entry.warning:focus-within {
   outline-offset: -2px;
 }
 
-spinbutton.warning.vertical:disabled, spinbutton.warning:disabled:not(.vertical),
 entry.warning:disabled {
   box-shadow: inset 0 0 0 2px transparent;
   background-color: rgba(244, 180, 0, 0.04);
@@ -524,14 +496,10 @@ entry.warning:disabled {
   opacity: 1;
 }
 
-spinbutton.warning.vertical:disabled > label, spinbutton.warning:disabled:not(.vertical) > label,
 entry.warning:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical > progress, spinbutton:not(.vertical) > progress,
-spinbutton.vertical progress > trough > progress,
-spinbutton:not(.vertical) progress > trough > progress,
 entry > progress,
 entry progress > trough > progress {
   margin: 2px -8px;
@@ -620,7 +588,7 @@ editablelabel > stack > text {
   color: rgba(255, 255, 255, 0.5);
 }
 
-headerbar popover.background button:not(.suggested-action):not(.destructive-action):not(.flat), button {
+headerbar popover.background button:not(.suggested-action):not(.destructive-action), button {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   outline: none;
   box-shadow: inset 0 0 0 9999px transparent;
@@ -632,15 +600,15 @@ headerbar popover.background button:not(.suggested-action):not(.destructive-acti
   color: rgba(0, 0, 0, 0.87);
 }
 
-headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action):not(.flat), button:focus {
+headerbar popover.background button:focus:not(.suggested-action):not(.destructive-action), button:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08), inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:hover {
+headerbar popover.background button:hover:not(.suggested-action):not(.destructive-action), button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
 }
 
-headerbar popover.background button:active:not(.suggested-action):not(.destructive-action):not(.flat), button:active {
+headerbar popover.background button:active:not(.suggested-action):not(.destructive-action), button:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms;
   animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -648,7 +616,7 @@ headerbar popover.background button:active:not(.suggested-action):not(.destructi
   background-size: 100% 100%;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:disabled {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action), button:disabled {
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -656,21 +624,21 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action):not(.flat) > label, button:disabled > label {
+headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
   color: rgba(0, 0, 0, 0.38);
 }
 
-headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action):not(.flat), button:checked {
+headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #1A73E8;
   color: white;
 }
 
-headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:hover {
+headerbar popover.background button:checked:hover:not(.suggested-action):not(.destructive-action), button:checked:hover {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.flat), button:checked:disabled {
+headerbar popover.background button:checked:disabled:not(.suggested-action):not(.destructive-action), button:checked:disabled {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
@@ -689,9 +657,9 @@ button:drop(active) {
 }
 
 .nautilus-window tabbar tab:active > button.flat, .nautilus-window tabbar tab:checked > button.flat, .nautilus-window tabbar tab:selected > button.flat, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button, stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action), windowcontrols button, placessidebar .navigation-sidebar > row button.sidebar-button, calendar > header > button, row button.circular, check,
-radio, scrollbar button, notebook > header > tabs > arrow, popover.menu modelbutton, spinbutton.vertical > button, spinbutton:not(.vertical) > button, tabbar tab button.image-button,
+radio, scrollbar button, notebook > header > tabs > arrow, popover.background modelbutton, spinbutton:not(.vertical) > button, spinbutton.vertical > button, tabbar tab button.image-button,
 dnd tab button.image-button, splitbutton.flat > button,
-splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
+splitbutton.flat > menubutton > button, menubutton.flat > button, filechooser #pathbarbox > stack > box > button, window.dialog.message.csd .dialog-action-area > button, .app-notification button, headerbar popover.background button.flat:not(.suggested-action):not(.destructive-action), headerbar button:not(.suggested-action):not(.destructive-action), .toolbar button,
 toolbar button, dropdown > .linked:not(.vertical) > button:not(:only-child),
 combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
@@ -706,9 +674,9 @@ combobox > .linked:not(.vertical) > button:not(:only-child), button.flat {
 }
 
 .nautilus-window tabbar tab:active > button.flat:focus, .nautilus-window tabbar tab:checked > button.flat:focus, .nautilus-window tabbar tab:selected > button.flat:focus, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:focus, stackswitcher.linked:not(.vertical) > button:focus:not(.suggested-action):not(.destructive-action), windowcontrols button:focus, placessidebar .navigation-sidebar > row button.sidebar-button:focus, calendar > header > button:focus, row button.circular:focus, check:focus,
-radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.menu modelbutton:focus, spinbutton.vertical > button:focus, spinbutton:not(.vertical) > button:focus, tabbar tab button.image-button:focus,
+radio:focus, scrollbar button:focus, notebook > header > tabs > arrow:focus, popover.background modelbutton:focus, spinbutton:not(.vertical) > button:focus, spinbutton.vertical > button:focus, tabbar tab button.image-button:focus,
 dnd tab button.image-button:focus, splitbutton.flat > button:focus,
-splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
+splitbutton.flat > menubutton > button:focus, menubutton.flat > button:focus, filechooser #pathbarbox > stack > box > button:focus, window.dialog.message.csd .dialog-action-area > button:focus, .app-notification button:focus, headerbar popover.background button.flat:focus:not(.suggested-action):not(.destructive-action), headerbar button:focus:not(.suggested-action):not(.destructive-action), .toolbar button:focus,
 toolbar button:focus, dropdown > .linked:not(.vertical) > button:focus:not(:only-child),
 combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:focus {
   box-shadow: inset 0 0 0 2px alpha(currentColor, 0.08);
@@ -716,9 +684,9 @@ combobox > .linked:not(.vertical) > button:focus:not(:only-child), button.flat:f
 }
 
 .nautilus-window tabbar tab:active > button.flat:hover, .nautilus-window tabbar tab:checked > button.flat:hover, .nautilus-window tabbar tab:selected > button.flat:hover, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:hover, stackswitcher.linked:not(.vertical) > button:hover:not(.suggested-action):not(.destructive-action), windowcontrols button:hover, placessidebar .navigation-sidebar > row button.sidebar-button:hover, calendar > header > button:hover, row button.circular:hover, check:hover,
-radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.menu modelbutton:hover, spinbutton.vertical > button:hover, spinbutton:not(.vertical) > button:hover, tabbar tab button.image-button:hover,
+radio:hover, scrollbar button:hover, notebook > header > tabs > arrow:hover, popover.background modelbutton:hover, spinbutton:not(.vertical) > button:hover, spinbutton.vertical > button:hover, tabbar tab button.image-button:hover,
 dnd tab button.image-button:hover, splitbutton.flat > button:hover,
-splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
+splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, filechooser #pathbarbox > stack > box > button:hover, window.dialog.message.csd .dialog-action-area > button:hover, .app-notification button:hover, headerbar popover.background button.flat:hover:not(.suggested-action):not(.destructive-action), headerbar button:hover:not(.suggested-action):not(.destructive-action), .toolbar button:hover,
 toolbar button:hover, dropdown > .linked:not(.vertical) > button:hover:not(:only-child),
 combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08);
@@ -726,9 +694,9 @@ combobox > .linked:not(.vertical) > button:hover:not(:only-child), button.flat:h
 }
 
 .nautilus-window tabbar tab:active > button.flat:active, .nautilus-window tabbar tab:checked > button.flat:active, .nautilus-window tabbar tab:selected > button.flat:active, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:active, stackswitcher.linked:not(.vertical) > button:active:not(.suggested-action):not(.destructive-action), windowcontrols button:active, placessidebar .navigation-sidebar > row button.sidebar-button:active, calendar > header > button:active, row button.circular:active, check:active,
-radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.menu modelbutton:active, spinbutton.vertical > button:active, spinbutton:not(.vertical) > button:active, tabbar tab button.image-button:active,
+radio:active, scrollbar button:active, notebook > header > tabs > arrow:active, popover.background modelbutton:active, spinbutton:not(.vertical) > button:active, spinbutton.vertical > button:active, tabbar tab button.image-button:active,
 dnd tab button.image-button:active, splitbutton.flat > button:active,
-splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
+splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, filechooser #pathbarbox > stack > box > button:active, window.dialog.message.csd .dialog-action-area > button:active, .app-notification button:active, headerbar popover.background button.flat:active:not(.suggested-action):not(.destructive-action), headerbar button:active:not(.suggested-action):not(.destructive-action), .toolbar button:active,
 toolbar button:active, dropdown > .linked:not(.vertical) > button:active:not(:only-child),
 combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:active {
   transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms;
@@ -740,9 +708,9 @@ combobox > .linked:not(.vertical) > button:active:not(:only-child), button.flat:
 }
 
 .nautilus-window tabbar tab:active > button.flat:disabled, .nautilus-window tabbar tab:checked > button.flat:disabled, .nautilus-window tabbar tab:selected > button.flat:disabled, .nautilus-window flap.unfolded > placessidebar > scrolledwindow > viewport > list.navigation-sidebar > row.activatable:selected button.sidebar-button:disabled, stackswitcher.linked:not(.vertical) > button:disabled:not(.suggested-action):not(.destructive-action), windowcontrols button:disabled, placessidebar .navigation-sidebar > row button.sidebar-button:disabled, calendar > header > button:disabled, row button.circular:disabled, check:disabled,
-radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.menu modelbutton:disabled, spinbutton.vertical > button:disabled, spinbutton:not(.vertical) > button:disabled, tabbar tab button.image-button:disabled,
+radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disabled, popover.background modelbutton:disabled, spinbutton:not(.vertical) > button:disabled, spinbutton.vertical > button:disabled, tabbar tab button.image-button:disabled,
 dnd tab button.image-button:disabled, splitbutton.flat > button:disabled,
-splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
+splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, filechooser #pathbarbox > stack > box > button:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, .app-notification button:disabled, headerbar popover.background button.flat:disabled:not(.suggested-action):not(.destructive-action), headerbar button:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:disabled,
 toolbar button:disabled, dropdown > .linked:not(.vertical) > button:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.flat:disabled {
   box-shadow: none;
@@ -752,7 +720,7 @@ combobox > .linked:not(.vertical) > button:disabled:not(:only-child), button.fla
 
 tabbar tab button.image-button:checked,
 dnd tab button.image-button:checked, splitbutton.flat > button:checked,
-splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
+splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, filechooser #pathbarbox > stack > box > button:checked, window.dialog.message.csd .dialog-action-area > button:checked, .app-notification button:checked, headerbar popover.background button.flat:checked:not(.suggested-action):not(.destructive-action), headerbar button:checked:not(.suggested-action):not(.destructive-action), .toolbar button:checked,
 toolbar button:checked, dropdown > .linked:not(.vertical) > button:checked:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat:checked, button.flat:checked:hover {
   background-color: alpha(currentColor, 0.1);
@@ -761,7 +729,7 @@ combobox > .linked:not(.vertical) > button:checked:not(:only-child), button.flat
 
 tabbar tab button.image-button:checked:disabled,
 dnd tab button.image-button:checked:disabled, splitbutton.flat > button:checked:disabled,
-splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
+splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, headerbar popover.background button.flat:checked:disabled:not(.suggested-action):not(.destructive-action), headerbar button:checked:disabled:not(.suggested-action):not(.destructive-action), .toolbar button:checked:disabled,
 toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button:checked:disabled:not(:only-child),
 combobox > .linked:not(.vertical) > button:checked:disabled:not(:only-child), button.flat:checked:disabled {
   background-color: alpha(currentColor, 0.1);
@@ -983,7 +951,7 @@ radio label, button.image-button label, button.close label, button.circular labe
   padding: 0;
 }
 
-.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton.vertical > button, spinbutton:not(.vertical) > button {
+.nautilus-window .floating-bar button, placessidebar .navigation-sidebar > row button.sidebar-button, notebook > header tab button.flat, popover.menu box.circular-buttons button.circular.image-button.model, spinbutton:not(.vertical) > button, spinbutton.vertical > button {
   min-height: 24px;
   min-width: 24px;
   padding: 0;
@@ -1003,39 +971,39 @@ stackswitcher > button.needs-attention > image:dir(rtl) {
   background-position: left 3px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical, .linked:not(.vertical) > spinbutton:not(.vertical), .linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
+.linked:not(.vertical) > entry, .linked:not(.vertical) > button, .linked:not(.vertical) > button.image-button {
   border-radius: 0;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:first-child, .linked:not(.vertical) > spinbutton:first-child:not(.vertical), .linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
+.linked:not(.vertical) > entry:first-child, .linked:not(.vertical) > button:first-child {
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:last-child, .linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
+.linked:not(.vertical) > entry:last-child, .linked:not(.vertical) > button:last-child {
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
-.linked:not(.vertical) > spinbutton.vertical:only-child, .linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
+.linked:not(.vertical) > entry:only-child, .linked:not(.vertical) > button:only-child {
   border-radius: 12px;
 }
 
-.linked.vertical > spinbutton.vertical, .linked.vertical > spinbutton:not(.vertical), .linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
+.linked.vertical > entry, .linked.vertical > button, .linked.vertical > button.image-button {
   border-radius: 0;
 }
 
-.linked.vertical > spinbutton.vertical:first-child, .linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical > entry:first-child, .linked.vertical > button:first-child {
+.linked.vertical > entry:first-child, .linked.vertical > button:first-child {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 }
 
-.linked.vertical > spinbutton.vertical:last-child, .linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical > entry:last-child, .linked.vertical > button:last-child {
+.linked.vertical > entry:last-child, .linked.vertical > button:last-child {
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
 }
 
-.linked.vertical > spinbutton.vertical:only-child, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, .linked.vertical > button:only-child {
+.linked.vertical > entry:only-child, .linked.vertical > button:only-child {
   border-radius: 12px;
 }
 
@@ -1105,31 +1073,64 @@ button.link > label {
 /*****************
  * GtkSpinButton *
  *****************/
-spinbutton:not(.vertical) {
+spinbutton:not(.vertical), spinbutton.vertical {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), outline-color 300ms cubic-bezier(0, 0, 0.2, 1), outline-width 300ms cubic-bezier(0, 0, 0.2, 1), outline-offset 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
+  outline: 0 solid transparent;
+  outline-offset: 2px;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: inset 0 0 0 2px transparent;
+  border-radius: 12px;
   padding: 0;
   border-spacing: 0;
 }
 
-spinbutton:not(.vertical) > text {
-  min-width: 32px;
+spinbutton:not(.vertical):focus-within, spinbutton.vertical:focus-within {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: inset 0 0 0 2px transparent;
+  outline-color: #1A73E8;
+  outline-width: 2px;
+  outline-offset: -2px;
+}
+
+spinbutton:not(.vertical):disabled, spinbutton.vertical:disabled {
+  box-shadow: inset 0 0 0 2px transparent;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.38);
+  color: rgba(0, 0, 0, 0.38);
+  outline: none;
+  filter: none;
+  opacity: 1;
+}
+
+spinbutton:not(.vertical):disabled > label, spinbutton.vertical:disabled > label {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+spinbutton:not(.vertical) > text, spinbutton.vertical > text {
   margin: 0;
-  padding-left: 12px;
   border-image: none;
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
 }
 
-spinbutton:not(.vertical) > button {
-  margin: 0;
-  border: solid 6px transparent;
+spinbutton:not(.vertical) > button, spinbutton.vertical > button {
+  padding: 0;
+  border: 6px solid transparent;
 }
 
-spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) {
+spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled), spinbutton.vertical > button:focus:not(:hover):not(:active):not(:disabled) {
   box-shadow: inset 0 0 0 9999px transparent;
   color: rgba(0, 0, 0, 0.6);
 }
 
+spinbutton:not(.vertical) > text {
+  min-width: 32px;
+  padding-left: 12px;
+}
+
 spinbutton:not(.vertical) > button.up:dir(ltr), spinbutton:not(.vertical) > button.down:dir(rtl) {
   margin-left: -3px;
 }
@@ -1138,35 +1139,16 @@ spinbutton:not(.vertical) > button.up:dir(rtl), spinbutton:not(.vertical) > butt
   margin-right: -3px;
 }
 
-spinbutton.vertical {
-  padding: 0;
-}
-
 spinbutton.vertical:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
 spinbutton.vertical > text {
-  margin: 0;
-  border-image: none;
-  border-radius: 0;
-  box-shadow: none;
-  background-color: transparent;
   min-height: 36px;
   min-width: 42px;
   padding: 0;
 }
 
-spinbutton.vertical > button {
-  padding: 0;
-  border: solid 6px transparent;
-}
-
-spinbutton.vertical > button:focus:not(:hover):not(:active) {
-  box-shadow: inset 0 0 0 9999px transparent;
-  color: rgba(0, 0, 0, 0.6);
-}
-
 spinbutton.vertical > button.up {
   margin: 0 3px;
 }
@@ -1490,8 +1472,15 @@ headerbar button:backdrop:checked:disabled:not(.suggested-action):not(.destructi
   color: rgba(255, 255, 255, 0.3);
 }
 
+headerbar entry {
+  caret-color: white;
+}
+
 headerbar entry {
   background-color: rgba(255, 255, 255, 0.04);
+}
+
+headerbar entry, headerbar entry > text {
   color: white;
 }
 
@@ -1515,12 +1504,12 @@ headerbar entry image:disabled {
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #2C2C2C;
   color: white;
   min-height: 48px;
   padding: 0;
   margin: 0;
   border-radius: 18px 18px 0 0;
+  background-color: transparent;
 }
 
 headerbar:disabled {
@@ -1528,8 +1517,8 @@ headerbar:disabled {
 }
 
 headerbar:backdrop {
-  background-color: #2C2C2C;
   color: rgba(255, 255, 255, 0.7);
+  background-color: transparent;
 }
 
 headerbar:backdrop:disabled {
@@ -1604,10 +1593,22 @@ headerbar button.toggle {
   border-radius: 9999px;
 }
 
+headerbar popover.background > contents {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+headerbar popover.background > contents .dim-label, headerbar popover.background > contents row.expander:not(:checked) image.expander-row-arrow, row.expander:not(:checked) headerbar popover.background > contents image.expander-row-arrow, headerbar popover.background > contents row label.subtitle, row headerbar popover.background > contents label.subtitle {
+  color: rgba(0, 0, 0, 0.6);
+}
+
 headerbar popover.background button, headerbar popover.background entry, headerbar popover.background spinbutton {
   border-radius: 5px;
 }
 
+headerbar popover.background button:not(.suggested-action):not(.destructive-action) image {
+  color: rgba(0, 0, 0, 0.87);
+}
+
 headerbar popover.background .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) {
   border-radius: 0;
 }
@@ -1631,10 +1632,39 @@ headerbar stackswitcher {
 
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button {
   border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.7);
 }
 
-box.vertical headerbar {
-  background-color: #2C2C2C;
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:active {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:backdrop:checked:disabled {
+  color: rgba(255, 255, 255, 0.3);
 }
 
 headerbar > windowhandle > box {
@@ -1768,6 +1798,35 @@ pathbar > button.slider-button {
   padding-right: 4px;
 }
 
+.pathbar {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+  border: none;
+  border-radius: 12px;
+  padding: 2px;
+}
+
+headerbar .pathbar {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  background-color: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.pathbar > button {
+  margin-top: 0;
+  margin-bottom: 0;
+  min-height: 20px;
+  border-radius: 10px;
+  border: none;
+  box-shadow: none;
+}
+
+.pathbar > button:last-child {
+  background-color: alpha(currentColor, 0.1);
+  color: rgba(0, 0, 0, 0.87);
+}
+
 /**************
  * Tree Views *
  **************/
@@ -2061,34 +2120,6 @@ popover.menu check.right {
   margin-right: 0;
 }
 
-popover.menu modelbutton {
-  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 22px;
-  min-width: 56px;
-  padding: 3px 9px;
-  border-radius: 5px;
-  color: rgba(0, 0, 0, 0.87);
-  font: initial;
-  text-shadow: none;
-  border-spacing: 6px;
-}
-
-popover.menu modelbutton accelerator {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-popover.menu modelbutton accelerator:disabled {
-  color: rgba(0, 0, 0, 0.12);
-}
-
-popover.menu modelbutton arrow.left {
-  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
-}
-
-popover.menu modelbutton arrow.right {
-  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
-}
-
 popover.menu label.title {
   font-weight: bold;
   padding: 4px 26px;
@@ -2159,6 +2190,35 @@ popover.background .linked > button:not(.radio):only-child {
   border-radius: 5px;
 }
 
+popover.background modelbutton {
+  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+  min-height: 22px;
+  min-width: 56px;
+  padding: 3px 9px;
+  border-radius: 5px;
+  color: rgba(0, 0, 0, 0.87);
+  font: initial;
+  text-shadow: none;
+  border-spacing: 6px;
+}
+
+popover.background modelbutton accelerator {
+  color: rgba(0, 0, 0, 0.38);
+  margin-left: 30px;
+}
+
+popover.background modelbutton accelerator:disabled {
+  color: rgba(0, 0, 0, 0.12);
+}
+
+popover.background modelbutton arrow.left {
+  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+}
+
+popover.background modelbutton arrow.right {
+  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+}
+
 popover.background.menu button,
 popover.background button.model {
   min-height: 32px;
@@ -3442,8 +3502,11 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button:hover row, button:active row, button:checked row {
+button row, button row:hover, button row.has-open-popup, button row:active {
   background-color: transparent;
+  box-shadow: none;
+  background-image: none;
+  transition: none;
 }
 
 button:checked row {
@@ -4435,8 +4498,7 @@ gridview > child:selected, row:selected, calendar:selected, calendar > grid > la
   background-color: rgba(26, 115, 232, 0.2);
 }
 
-textview text selection:focus, textview text selection, label > selection,
-entry > text > selection, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > selection, calendar > grid > label.today:selected {
+textview text selection:focus, textview text selection, label > selection, entry > text > selection, calendar > grid > label.today:selected {
   color: white;
   background-color: #1A73E8;
 }
@@ -4869,12 +4931,22 @@ popover.entry-completion > contents {
 
 #NautilusQueryEditor {
   border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.7);
 }
 
-#NautilusQueryEditor > menubutton > button {
-  min-width: 16px;
-  min-height: 16px;
+#NautilusQueryEditor:focus-within {
+  color: white;
+}
+
+#NautilusQueryEditor:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+#NautilusQueryEditor > menubutton > button.image-button {
+  min-width: 28px;
+  min-height: 28px;
   margin: 0;
+  padding: 0;
 }
 
 #NautilusQueryEditor > text {
@@ -4925,6 +4997,10 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+window.background > contents > leaflet stack.background {
+  background-color: transparent;
+}
+
 .history-view {
   background-color: #FFFFFF;
 }
@@ -5976,11 +6052,8 @@ tabbox:drop(active) {
 }
 
 leaflet {
-  outline-color: rgba(255, 255, 255, 0.1);
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
   border-radius: 18px;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
 leaflet headerbar {

From d73063bf57cb82324c3e155ffce7b63104395994 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 27 Nov 2022 01:21:43 +0800
Subject: [PATCH 3/7] update

---
 src/_sass/gtk/_common-4.0.scss    |  3 ++-
 src/_sass/gtk/_drawing-4.0.scss   |  2 --
 src/gtk/4.0/gtk-Compact.css       | 19 ++-----------------
 src/gtk/4.0/gtk-Dark-Compact.css  | 19 ++-----------------
 src/gtk/4.0/gtk-Dark.css          | 19 ++-----------------
 src/gtk/4.0/gtk-Light-Compact.css | 19 ++-----------------
 src/gtk/4.0/gtk-Light.css         | 19 ++-----------------
 src/gtk/4.0/gtk.css               | 19 ++-----------------
 8 files changed, 14 insertions(+), 105 deletions(-)

diff --git a/src/_sass/gtk/_common-4.0.scss b/src/_sass/gtk/_common-4.0.scss
index a6e94b8..612db54 100644
--- a/src/_sass/gtk/_common-4.0.scss
+++ b/src/_sass/gtk/_common-4.0.scss
@@ -1191,7 +1191,8 @@ headerbar {
     @extend %titlebar-button;
   }
 
-  button.suggested-action, button.destructive-action {
+  button.suggested-action,
+  button.destructive-action {
     &:disabled {
       background-color: $titlebar-fill;
       color: $titlebar-text-disabled;
diff --git a/src/_sass/gtk/_drawing-4.0.scss b/src/_sass/gtk/_drawing-4.0.scss
index 9c9f882..e4f7fa8 100644
--- a/src/_sass/gtk/_drawing-4.0.scss
+++ b/src/_sass/gtk/_drawing-4.0.scss
@@ -135,8 +135,6 @@
     color: $text-disabled;
     filter: none;
     opacity: 1;
-
-    > label { color: $text-disabled; }
   }
 
   @if $t == checked {
diff --git a/src/gtk/4.0/gtk-Compact.css b/src/gtk/4.0/gtk-Compact.css
index dfa131b..74d096c 100644
--- a/src/gtk/4.0/gtk-Compact.css
+++ b/src/gtk/4.0/gtk-Compact.css
@@ -624,10 +624,6 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #1A73E8;
@@ -833,10 +829,6 @@ button.suggested-action:disabled {
   opacity: 1;
 }
 
-button.suggested-action:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 button.suggested-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(26, 115, 232, 0.2), 0 4px 3px 0 rgba(26, 115, 232, 0.14), 0 1px 6px 0 rgba(26, 115, 232, 0.12);
 }
@@ -882,10 +874,6 @@ button.destructive-action:disabled {
   opacity: 1;
 }
 
-button.destructive-action:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 button.destructive-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(217, 48, 37, 0.2), 0 4px 3px 0 rgba(217, 48, 37, 0.14), 0 1px 6px 0 rgba(217, 48, 37, 0.12);
 }
@@ -1310,10 +1298,6 @@ button.combo:only-child:disabled {
   opacity: 1;
 }
 
-button.combo:only-child:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 .app-notification, .toolbar.osd,
 toolbar.osd {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
@@ -1584,7 +1568,8 @@ headerbar .linked:not(.vertical) > entry:not(:only-child) {
   border-radius: 10px;
 }
 
-headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled {
+headerbar button.suggested-action:disabled,
+headerbar button.destructive-action:disabled {
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
 }
diff --git a/src/gtk/4.0/gtk-Dark-Compact.css b/src/gtk/4.0/gtk-Dark-Compact.css
index d5761a7..5cac4c1 100644
--- a/src/gtk/4.0/gtk-Dark-Compact.css
+++ b/src/gtk/4.0/gtk-Dark-Compact.css
@@ -624,10 +624,6 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
-  color: rgba(255, 255, 255, 0.5);
-}
-
 headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #3281EA;
@@ -833,10 +829,6 @@ button.suggested-action:disabled {
   opacity: 1;
 }
 
-button.suggested-action:disabled > label {
-  color: rgba(255, 255, 255, 0.5);
-}
-
 button.suggested-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(50, 129, 234, 0.2), 0 4px 3px 0 rgba(50, 129, 234, 0.14), 0 1px 6px 0 rgba(50, 129, 234, 0.12);
 }
@@ -882,10 +874,6 @@ button.destructive-action:disabled {
   opacity: 1;
 }
 
-button.destructive-action:disabled > label {
-  color: rgba(255, 255, 255, 0.5);
-}
-
 button.destructive-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(242, 139, 130, 0.2), 0 4px 3px 0 rgba(242, 139, 130, 0.14), 0 1px 6px 0 rgba(242, 139, 130, 0.12);
 }
@@ -1310,10 +1298,6 @@ button.combo:only-child:disabled {
   opacity: 1;
 }
 
-button.combo:only-child:disabled > label {
-  color: rgba(255, 255, 255, 0.5);
-}
-
 .app-notification, .toolbar.osd,
 toolbar.osd {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
@@ -1584,7 +1568,8 @@ headerbar .linked:not(.vertical) > entry:not(:only-child) {
   border-radius: 10px;
 }
 
-headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled {
+headerbar button.suggested-action:disabled,
+headerbar button.destructive-action:disabled {
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
 }
diff --git a/src/gtk/4.0/gtk-Dark.css b/src/gtk/4.0/gtk-Dark.css
index 1d755d3..1bdb2cf 100644
--- a/src/gtk/4.0/gtk-Dark.css
+++ b/src/gtk/4.0/gtk-Dark.css
@@ -624,10 +624,6 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
-  color: rgba(255, 255, 255, 0.5);
-}
-
 headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #3281EA;
@@ -833,10 +829,6 @@ button.suggested-action:disabled {
   opacity: 1;
 }
 
-button.suggested-action:disabled > label {
-  color: rgba(255, 255, 255, 0.5);
-}
-
 button.suggested-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(50, 129, 234, 0.2), 0 4px 3px 0 rgba(50, 129, 234, 0.14), 0 1px 6px 0 rgba(50, 129, 234, 0.12);
 }
@@ -882,10 +874,6 @@ button.destructive-action:disabled {
   opacity: 1;
 }
 
-button.destructive-action:disabled > label {
-  color: rgba(255, 255, 255, 0.5);
-}
-
 button.destructive-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(242, 139, 130, 0.2), 0 4px 3px 0 rgba(242, 139, 130, 0.14), 0 1px 6px 0 rgba(242, 139, 130, 0.12);
 }
@@ -1310,10 +1298,6 @@ button.combo:only-child:disabled {
   opacity: 1;
 }
 
-button.combo:only-child:disabled > label {
-  color: rgba(255, 255, 255, 0.5);
-}
-
 .app-notification, .toolbar.osd,
 toolbar.osd {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
@@ -1584,7 +1568,8 @@ headerbar .linked:not(.vertical) > entry:not(:only-child) {
   border-radius: 12px;
 }
 
-headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled {
+headerbar button.suggested-action:disabled,
+headerbar button.destructive-action:disabled {
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
 }
diff --git a/src/gtk/4.0/gtk-Light-Compact.css b/src/gtk/4.0/gtk-Light-Compact.css
index ce8e289..a8edb2d 100644
--- a/src/gtk/4.0/gtk-Light-Compact.css
+++ b/src/gtk/4.0/gtk-Light-Compact.css
@@ -624,10 +624,6 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #1A73E8;
@@ -833,10 +829,6 @@ button.suggested-action:disabled {
   opacity: 1;
 }
 
-button.suggested-action:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 button.suggested-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(26, 115, 232, 0.2), 0 4px 3px 0 rgba(26, 115, 232, 0.14), 0 1px 6px 0 rgba(26, 115, 232, 0.12);
 }
@@ -882,10 +874,6 @@ button.destructive-action:disabled {
   opacity: 1;
 }
 
-button.destructive-action:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 button.destructive-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(217, 48, 37, 0.2), 0 4px 3px 0 rgba(217, 48, 37, 0.14), 0 1px 6px 0 rgba(217, 48, 37, 0.12);
 }
@@ -1310,10 +1298,6 @@ button.combo:only-child:disabled {
   opacity: 1;
 }
 
-button.combo:only-child:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 .app-notification, .toolbar.osd,
 toolbar.osd {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
@@ -1584,7 +1568,8 @@ headerbar .linked:not(.vertical) > entry:not(:only-child) {
   border-radius: 10px;
 }
 
-headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled {
+headerbar button.suggested-action:disabled,
+headerbar button.destructive-action:disabled {
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
 }
diff --git a/src/gtk/4.0/gtk-Light.css b/src/gtk/4.0/gtk-Light.css
index 08cb4d6..248038f 100644
--- a/src/gtk/4.0/gtk-Light.css
+++ b/src/gtk/4.0/gtk-Light.css
@@ -624,10 +624,6 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #1A73E8;
@@ -833,10 +829,6 @@ button.suggested-action:disabled {
   opacity: 1;
 }
 
-button.suggested-action:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 button.suggested-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(26, 115, 232, 0.2), 0 4px 3px 0 rgba(26, 115, 232, 0.14), 0 1px 6px 0 rgba(26, 115, 232, 0.12);
 }
@@ -882,10 +874,6 @@ button.destructive-action:disabled {
   opacity: 1;
 }
 
-button.destructive-action:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 button.destructive-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(217, 48, 37, 0.2), 0 4px 3px 0 rgba(217, 48, 37, 0.14), 0 1px 6px 0 rgba(217, 48, 37, 0.12);
 }
@@ -1310,10 +1298,6 @@ button.combo:only-child:disabled {
   opacity: 1;
 }
 
-button.combo:only-child:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 .app-notification, .toolbar.osd,
 toolbar.osd {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
@@ -1584,7 +1568,8 @@ headerbar .linked:not(.vertical) > entry:not(:only-child) {
   border-radius: 12px;
 }
 
-headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled {
+headerbar button.suggested-action:disabled,
+headerbar button.destructive-action:disabled {
   background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
 }
diff --git a/src/gtk/4.0/gtk.css b/src/gtk/4.0/gtk.css
index 1ef19c2..6213f13 100644
--- a/src/gtk/4.0/gtk.css
+++ b/src/gtk/4.0/gtk.css
@@ -624,10 +624,6 @@ headerbar popover.background button:disabled:not(.suggested-action):not(.destruc
   opacity: 1;
 }
 
-headerbar popover.background button:disabled:not(.suggested-action):not(.destructive-action) > label, button:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 headerbar popover.background button:checked:not(.suggested-action):not(.destructive-action), button:checked {
   box-shadow: none;
   background-color: #1A73E8;
@@ -833,10 +829,6 @@ button.suggested-action:disabled {
   opacity: 1;
 }
 
-button.suggested-action:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 button.suggested-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(26, 115, 232, 0.2), 0 4px 3px 0 rgba(26, 115, 232, 0.14), 0 1px 6px 0 rgba(26, 115, 232, 0.12);
 }
@@ -882,10 +874,6 @@ button.destructive-action:disabled {
   opacity: 1;
 }
 
-button.destructive-action:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 button.destructive-action:hover {
   box-shadow: inset 0 0 0 9999px transparent, 0 2px 2.4px -1px rgba(217, 48, 37, 0.2), 0 4px 3px 0 rgba(217, 48, 37, 0.14), 0 1px 6px 0 rgba(217, 48, 37, 0.12);
 }
@@ -1310,10 +1298,6 @@ button.combo:only-child:disabled {
   opacity: 1;
 }
 
-button.combo:only-child:disabled > label {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 .app-notification, .toolbar.osd,
 toolbar.osd {
   transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
@@ -1584,7 +1568,8 @@ headerbar .linked:not(.vertical) > entry:not(:only-child) {
   border-radius: 12px;
 }
 
-headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled {
+headerbar button.suggested-action:disabled,
+headerbar button.destructive-action:disabled {
   background-color: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
 }

From 930c75e360fe8ce372e94de3fbc387967c71d991 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 27 Nov 2022 14:34:56 +0800
Subject: [PATCH 4/7] update

---
 core.sh                                       |  5 ++-
 src/_sass/gtk/_common-4.0.scss                |  8 +++--
 src/_sass/gtk/apps/_gnome-4.0.scss            |  8 -----
 src/_sass/gtk/apps/_libadwaita.scss           | 20 ++++++++---
 .../sass/widgets/_popovers-42.scss            |  4 +--
 src/gnome-shell/sass/widgets/_scrollbars.scss |  1 +
 .../shell-40-0/gnome-shell-Compact.css        |  1 +
 .../shell-40-0/gnome-shell-Dark-Compact.css   |  1 +
 .../shell-40-0/gnome-shell-Dark.css           |  1 +
 src/gnome-shell/shell-40-0/gnome-shell.css    |  1 +
 .../shell-42-0/gnome-shell-Compact.css        |  4 ++-
 .../shell-42-0/gnome-shell-Dark-Compact.css   |  4 ++-
 .../shell-42-0/gnome-shell-Dark.css           |  4 ++-
 src/gnome-shell/shell-42-0/gnome-shell.css    |  4 ++-
 src/gtk/4.0/gtk-Compact.css                   | 24 ++++++++++----
 src/gtk/4.0/gtk-Dark-Compact.css              | 33 ++++++++++++++-----
 src/gtk/4.0/gtk-Dark.css                      | 33 ++++++++++++++-----
 src/gtk/4.0/gtk-Light-Compact.css             | 24 ++++++++++----
 src/gtk/4.0/gtk-Light.css                     | 24 ++++++++++----
 src/gtk/4.0/gtk.css                           | 24 ++++++++++----
 20 files changed, 158 insertions(+), 70 deletions(-)

diff --git a/core.sh b/core.sh
index 1255de2..5e1522c 100755
--- a/core.sh
+++ b/core.sh
@@ -187,9 +187,8 @@ clean() {
 }
 
 uninstall_link() {
-  [[ -L "${HOME}/.config/gtk-4.0/assets" ]] && rm -rf "${HOME}/.config/gtk-4.0/assets" && echo -e "Removing ${HOME}/.config/gtk-4.0/assets"
-  [[ -L "${HOME}/.config/gtk-4.0/gtk.css" ]] && rm -rf "${HOME}/.config/gtk-4.0/gtk.css" && echo -e "Removing ${HOME}/.config/gtk-4.0/gtk.css"
-  [[ -L "${HOME}/.config/gtk-4.0/gtk-dark.css" ]] && rm -rf "${HOME}/.config/gtk-4.0/gtk-dark.css" && echo -e "Removing ${HOME}/.config/gtk-4.0/gtk-dark.css"
+  rm -rf "${HOME}/.config/gtk-4.0/"{assets,gtk.css,gtk-dark.css}
+  echo -e "\nRemoving ${HOME}/.config/gtk-4.0 links..."
 }
 
 link_libadwaita() {
diff --git a/src/_sass/gtk/_common-4.0.scss b/src/_sass/gtk/_common-4.0.scss
index 612db54..7f51f54 100644
--- a/src/_sass/gtk/_common-4.0.scss
+++ b/src/_sass/gtk/_common-4.0.scss
@@ -1116,7 +1116,7 @@ headerbar {
   margin: 0;
   border-radius: $window-radius $window-radius 0 0;
 
-  @if $variant == 'light' and $topbar == 'dark' {
+  @if $topbar == 'dark' {
     background-color: transparent;
   } @else {
     background-color: $titlebar;
@@ -1127,7 +1127,7 @@ headerbar {
   &:backdrop {
     color: $titlebar-text-secondary;
 
-    @if $variant == 'light' and $topbar == 'dark' {
+    @if $topbar == 'dark' {
       background-color: transparent;
     } @else {
       background-color: $titlebar-backdrop;
@@ -1342,6 +1342,8 @@ headerbar {
   &.default-decoration {
     min-height: $small-size;
     padding: $space-size;
+    background-image: none;
+    background-color: $titlebar;
     box-shadow: inset 0 -1px $divider, inset 0 1px highlight($titlebar);
 
     windowcontrols {
@@ -4023,7 +4025,7 @@ window {
     &.tiled-left { border-radius: 0; }
   }
 
-  @if $variant == 'light' and $topbar == 'dark' {
+  @if $topbar == 'dark' {
     &.background {
       background-color: transparent;
       background-image: linear-gradient(to bottom,
diff --git a/src/_sass/gtk/apps/_gnome-4.0.scss b/src/_sass/gtk/apps/_gnome-4.0.scss
index d3c271b..a3df9ec 100644
--- a/src/_sass/gtk/apps/_gnome-4.0.scss
+++ b/src/_sass/gtk/apps/_gnome-4.0.scss
@@ -350,14 +350,6 @@ window.dialog {
   }
 }
 
-window.background {
-  > contents > leaflet {
-    stack.background {
-      background-color: transparent;
-    }
-  }
-}
-
 //
 // Calculator
 //
diff --git a/src/_sass/gtk/apps/_libadwaita.scss b/src/_sass/gtk/apps/_libadwaita.scss
index 38b20de..05846f4 100644
--- a/src/_sass/gtk/apps/_libadwaita.scss
+++ b/src/_sass/gtk/apps/_libadwaita.scss
@@ -715,16 +715,28 @@ tabbox:drop(active) {
 
 leaflet {
   border-radius: $window-radius;
-  box-shadow: inset 0 1px highlight($titlebar);
+
+  &, &:backdrop {
+    box-shadow: inset 0 1px highlight($titlebar);
+  }
+
+  leaflet { // reset
+    border-radius: 0;
+    outline: none;
+    box-shadow: none;
+
+    &, &:backdrop {
+      box-shadow: none;
+    }
+  }
 
   headerbar {
     border-radius: 0;
     box-shadow: inset 0 -1px $divider;
   }
 
-  leaflet {
-    border-radius: 0;
-    outline: none;
+  stack.background {
+    background-color: transparent;
   }
 
   > box > scrolledwindow > viewport > widget > stack {
diff --git a/src/gnome-shell/sass/widgets/_popovers-42.scss b/src/gnome-shell/sass/widgets/_popovers-42.scss
index c17a87a..277a6dc 100644
--- a/src/gnome-shell/sass/widgets/_popovers-42.scss
+++ b/src/gnome-shell/sass/widgets/_popovers-42.scss
@@ -2,7 +2,7 @@
 
 //.the popover itself
 .popup-menu-boxpointer {
-  // -arrow-border-radius: $popup_radius;
+  -arrow-border-radius: $container_padding;
   -arrow-background-color: transparent;
   -arrow-border-width: 0;
   -arrow-border-color: transparent;
@@ -23,7 +23,7 @@
 
   .popup-menu-content {
     padding: $container_padding;
-    margin: 0 6px 14px;
+    margin: 0 3px 14px;
     background-color: $menu_bg_color;
     border-radius: $popup_radius;
     border: none;
diff --git a/src/gnome-shell/sass/widgets/_scrollbars.scss b/src/gnome-shell/sass/widgets/_scrollbars.scss
index 6049b76..35da966 100644
--- a/src/gnome-shell/sass/widgets/_scrollbars.scss
+++ b/src/gnome-shell/sass/widgets/_scrollbars.scss
@@ -7,6 +7,7 @@ StScrollView {
 
 StScrollBar {
   padding: 0;
+  margin: 6px;
 
   StScrollView & {
     min-width: 8px;
diff --git a/src/gnome-shell/shell-40-0/gnome-shell-Compact.css b/src/gnome-shell/shell-40-0/gnome-shell-Compact.css
index 999922d..7d6e3f8 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell-Compact.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell-Compact.css
@@ -376,6 +376,7 @@ StScrollView.hfade {
 
 StScrollBar {
   padding: 0;
+  margin: 6px;
 }
 
 StScrollView StScrollBar {
diff --git a/src/gnome-shell/shell-40-0/gnome-shell-Dark-Compact.css b/src/gnome-shell/shell-40-0/gnome-shell-Dark-Compact.css
index 785f9f4..a0d1825 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell-Dark-Compact.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell-Dark-Compact.css
@@ -376,6 +376,7 @@ StScrollView.hfade {
 
 StScrollBar {
   padding: 0;
+  margin: 6px;
 }
 
 StScrollView StScrollBar {
diff --git a/src/gnome-shell/shell-40-0/gnome-shell-Dark.css b/src/gnome-shell/shell-40-0/gnome-shell-Dark.css
index 215906f..fb79ccd 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell-Dark.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell-Dark.css
@@ -376,6 +376,7 @@ StScrollView.hfade {
 
 StScrollBar {
   padding: 0;
+  margin: 6px;
 }
 
 StScrollView StScrollBar {
diff --git a/src/gnome-shell/shell-40-0/gnome-shell.css b/src/gnome-shell/shell-40-0/gnome-shell.css
index fe3da65..ecfe74b 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell.css
@@ -376,6 +376,7 @@ StScrollView.hfade {
 
 StScrollBar {
   padding: 0;
+  margin: 6px;
 }
 
 StScrollView StScrollBar {
diff --git a/src/gnome-shell/shell-42-0/gnome-shell-Compact.css b/src/gnome-shell/shell-42-0/gnome-shell-Compact.css
index 0ff5488..d87a462 100644
--- a/src/gnome-shell/shell-42-0/gnome-shell-Compact.css
+++ b/src/gnome-shell/shell-42-0/gnome-shell-Compact.css
@@ -430,6 +430,7 @@ StScrollView.hfade {
 
 StScrollBar {
   padding: 0;
+  margin: 6px;
 }
 
 StScrollView StScrollBar {
@@ -491,6 +492,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 /* Popovers/Menus */
 .popup-menu-boxpointer {
+  -arrow-border-radius: 4px;
   -arrow-background-color: transparent;
   -arrow-border-width: 0;
   -arrow-border-color: transparent;
@@ -511,7 +513,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .popup-menu .popup-menu-content {
   padding: 4px;
-  margin: 0 6px 14px;
+  margin: 0 3px 14px;
   background-color: rgba(255, 255, 255, 0.97);
   border-radius: 18px;
   border: none;
diff --git a/src/gnome-shell/shell-42-0/gnome-shell-Dark-Compact.css b/src/gnome-shell/shell-42-0/gnome-shell-Dark-Compact.css
index 587110c..55cae7b 100644
--- a/src/gnome-shell/shell-42-0/gnome-shell-Dark-Compact.css
+++ b/src/gnome-shell/shell-42-0/gnome-shell-Dark-Compact.css
@@ -430,6 +430,7 @@ StScrollView.hfade {
 
 StScrollBar {
   padding: 0;
+  margin: 6px;
 }
 
 StScrollView StScrollBar {
@@ -491,6 +492,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 /* Popovers/Menus */
 .popup-menu-boxpointer {
+  -arrow-border-radius: 4px;
   -arrow-background-color: transparent;
   -arrow-border-width: 0;
   -arrow-border-color: transparent;
@@ -511,7 +513,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .popup-menu .popup-menu-content {
   padding: 4px;
-  margin: 0 6px 14px;
+  margin: 0 3px 14px;
   background-color: rgba(32, 32, 32, 0.97);
   border-radius: 18px;
   border: none;
diff --git a/src/gnome-shell/shell-42-0/gnome-shell-Dark.css b/src/gnome-shell/shell-42-0/gnome-shell-Dark.css
index b2e8470..028cf89 100644
--- a/src/gnome-shell/shell-42-0/gnome-shell-Dark.css
+++ b/src/gnome-shell/shell-42-0/gnome-shell-Dark.css
@@ -430,6 +430,7 @@ StScrollView.hfade {
 
 StScrollBar {
   padding: 0;
+  margin: 6px;
 }
 
 StScrollView StScrollBar {
@@ -491,6 +492,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 /* Popovers/Menus */
 .popup-menu-boxpointer {
+  -arrow-border-radius: 6px;
   -arrow-background-color: transparent;
   -arrow-border-width: 0;
   -arrow-border-color: transparent;
@@ -511,7 +513,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .popup-menu .popup-menu-content {
   padding: 6px;
-  margin: 0 6px 14px;
+  margin: 0 3px 14px;
   background-color: rgba(32, 32, 32, 0.97);
   border-radius: 20px;
   border: none;
diff --git a/src/gnome-shell/shell-42-0/gnome-shell.css b/src/gnome-shell/shell-42-0/gnome-shell.css
index 02a87f5..eb99911 100644
--- a/src/gnome-shell/shell-42-0/gnome-shell.css
+++ b/src/gnome-shell/shell-42-0/gnome-shell.css
@@ -430,6 +430,7 @@ StScrollView.hfade {
 
 StScrollBar {
   padding: 0;
+  margin: 6px;
 }
 
 StScrollView StScrollBar {
@@ -491,6 +492,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 /* Popovers/Menus */
 .popup-menu-boxpointer {
+  -arrow-border-radius: 6px;
   -arrow-background-color: transparent;
   -arrow-border-width: 0;
   -arrow-border-color: transparent;
@@ -511,7 +513,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .popup-menu .popup-menu-content {
   padding: 6px;
-  margin: 0 6px 14px;
+  margin: 0 3px 14px;
   background-color: rgba(255, 255, 255, 0.97);
   border-radius: 20px;
   border: none;
diff --git a/src/gtk/4.0/gtk-Compact.css b/src/gtk/4.0/gtk-Compact.css
index 74d096c..2b5b9ab 100644
--- a/src/gtk/4.0/gtk-Compact.css
+++ b/src/gtk/4.0/gtk-Compact.css
@@ -1719,6 +1719,8 @@ headerbar .selection-mode {
 headerbar.default-decoration {
   min-height: 22px;
   padding: 4px;
+  background-image: none;
+  background-color: #2C2C2C;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
@@ -4982,10 +4984,6 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
-window.background > contents > leaflet stack.background {
-  background-color: transparent;
-}
-
 .history-view {
   background-color: #FFFFFF;
 }
@@ -6038,17 +6036,29 @@ tabbox:drop(active) {
 
 leaflet {
   border-radius: 16px;
+}
+
+leaflet, leaflet:backdrop {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
+leaflet leaflet {
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+}
+
+leaflet leaflet, leaflet leaflet:backdrop {
+  box-shadow: none;
+}
+
 leaflet headerbar {
   border-radius: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
 }
 
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
+leaflet stack.background {
+  background-color: transparent;
 }
 
 leaflet > box > scrolledwindow > viewport > widget > stack {
diff --git a/src/gtk/4.0/gtk-Dark-Compact.css b/src/gtk/4.0/gtk-Dark-Compact.css
index 5cac4c1..6ba9c2b 100644
--- a/src/gtk/4.0/gtk-Dark-Compact.css
+++ b/src/gtk/4.0/gtk-Dark-Compact.css
@@ -1493,7 +1493,7 @@ headerbar {
   padding: 0;
   margin: 0;
   border-radius: 16px 16px 0 0;
-  background-color: #2C2C2C;
+  background-color: transparent;
 }
 
 headerbar:disabled {
@@ -1502,7 +1502,7 @@ headerbar:disabled {
 
 headerbar:backdrop {
   color: rgba(255, 255, 255, 0.7);
-  background-color: #2C2C2C;
+  background-color: transparent;
 }
 
 headerbar:backdrop:disabled {
@@ -1719,6 +1719,8 @@ headerbar .selection-mode {
 headerbar.default-decoration {
   min-height: 22px;
   padding: 4px;
+  background-image: none;
+  background-color: #2C2C2C;
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
@@ -4423,6 +4425,11 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
   border-radius: 0;
 }
 
+window.background {
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 40px, #212121 40px, #212121);
+}
+
 window:backdrop {
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
@@ -4947,10 +4954,6 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
-window.background > contents > leaflet stack.background {
-  background-color: transparent;
-}
-
 .history-view {
   background-color: #2C2C2C;
 }
@@ -6003,17 +6006,29 @@ tabbox:drop(active) {
 
 leaflet {
   border-radius: 16px;
+}
+
+leaflet, leaflet:backdrop {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
+leaflet leaflet {
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+}
+
+leaflet leaflet, leaflet leaflet:backdrop {
+  box-shadow: none;
+}
+
 leaflet headerbar {
   border-radius: 0;
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
 }
 
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
+leaflet stack.background {
+  background-color: transparent;
 }
 
 leaflet > box > scrolledwindow > viewport > widget > stack {
diff --git a/src/gtk/4.0/gtk-Dark.css b/src/gtk/4.0/gtk-Dark.css
index 1bdb2cf..8b78ba8 100644
--- a/src/gtk/4.0/gtk-Dark.css
+++ b/src/gtk/4.0/gtk-Dark.css
@@ -1493,7 +1493,7 @@ headerbar {
   padding: 0;
   margin: 0;
   border-radius: 18px 18px 0 0;
-  background-color: #2C2C2C;
+  background-color: transparent;
 }
 
 headerbar:disabled {
@@ -1502,7 +1502,7 @@ headerbar:disabled {
 
 headerbar:backdrop {
   color: rgba(255, 255, 255, 0.7);
-  background-color: #2C2C2C;
+  background-color: transparent;
 }
 
 headerbar:backdrop:disabled {
@@ -1719,6 +1719,8 @@ headerbar .selection-mode {
 headerbar.default-decoration {
   min-height: 24px;
   padding: 6px;
+  background-image: none;
+  background-color: #2C2C2C;
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
@@ -4423,6 +4425,11 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
   border-radius: 0;
 }
 
+window.background {
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 48px, #212121 48px, #212121);
+}
+
 window:backdrop {
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
@@ -4947,10 +4954,6 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
-window.background > contents > leaflet stack.background {
-  background-color: transparent;
-}
-
 .history-view {
   background-color: #2C2C2C;
 }
@@ -6003,17 +6006,29 @@ tabbox:drop(active) {
 
 leaflet {
   border-radius: 18px;
+}
+
+leaflet, leaflet:backdrop {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
+leaflet leaflet {
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+}
+
+leaflet leaflet, leaflet leaflet:backdrop {
+  box-shadow: none;
+}
+
 leaflet headerbar {
   border-radius: 0;
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
 }
 
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
+leaflet stack.background {
+  background-color: transparent;
 }
 
 leaflet > box > scrolledwindow > viewport > widget > stack {
diff --git a/src/gtk/4.0/gtk-Light-Compact.css b/src/gtk/4.0/gtk-Light-Compact.css
index a8edb2d..7f6655e 100644
--- a/src/gtk/4.0/gtk-Light-Compact.css
+++ b/src/gtk/4.0/gtk-Light-Compact.css
@@ -1719,6 +1719,8 @@ headerbar .selection-mode {
 headerbar.default-decoration {
   min-height: 22px;
   padding: 4px;
+  background-image: none;
+  background-color: #FFFFFF;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.4);
 }
 
@@ -4946,10 +4948,6 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
-window.background > contents > leaflet stack.background {
-  background-color: transparent;
-}
-
 .history-view {
   background-color: #FFFFFF;
 }
@@ -6002,17 +6000,29 @@ tabbox:drop(active) {
 
 leaflet {
   border-radius: 16px;
+}
+
+leaflet, leaflet:backdrop {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
 }
 
+leaflet leaflet {
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+}
+
+leaflet leaflet, leaflet leaflet:backdrop {
+  box-shadow: none;
+}
+
 leaflet headerbar {
   border-radius: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
 }
 
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
+leaflet stack.background {
+  background-color: transparent;
 }
 
 leaflet > box > scrolledwindow > viewport > widget > stack {
diff --git a/src/gtk/4.0/gtk-Light.css b/src/gtk/4.0/gtk-Light.css
index 248038f..db87aca 100644
--- a/src/gtk/4.0/gtk-Light.css
+++ b/src/gtk/4.0/gtk-Light.css
@@ -1719,6 +1719,8 @@ headerbar .selection-mode {
 headerbar.default-decoration {
   min-height: 24px;
   padding: 6px;
+  background-image: none;
+  background-color: #FFFFFF;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.4);
 }
 
@@ -4946,10 +4948,6 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
-window.background > contents > leaflet stack.background {
-  background-color: transparent;
-}
-
 .history-view {
   background-color: #FFFFFF;
 }
@@ -6002,17 +6000,29 @@ tabbox:drop(active) {
 
 leaflet {
   border-radius: 18px;
+}
+
+leaflet, leaflet:backdrop {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
 }
 
+leaflet leaflet {
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+}
+
+leaflet leaflet, leaflet leaflet:backdrop {
+  box-shadow: none;
+}
+
 leaflet headerbar {
   border-radius: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
 }
 
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
+leaflet stack.background {
+  background-color: transparent;
 }
 
 leaflet > box > scrolledwindow > viewport > widget > stack {
diff --git a/src/gtk/4.0/gtk.css b/src/gtk/4.0/gtk.css
index 6213f13..b518465 100644
--- a/src/gtk/4.0/gtk.css
+++ b/src/gtk/4.0/gtk.css
@@ -1719,6 +1719,8 @@ headerbar .selection-mode {
 headerbar.default-decoration {
   min-height: 24px;
   padding: 6px;
+  background-image: none;
+  background-color: #2C2C2C;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
@@ -4982,10 +4984,6 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
-window.background > contents > leaflet stack.background {
-  background-color: transparent;
-}
-
 .history-view {
   background-color: #FFFFFF;
 }
@@ -6038,17 +6036,29 @@ tabbox:drop(active) {
 
 leaflet {
   border-radius: 18px;
+}
+
+leaflet, leaflet:backdrop {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
+leaflet leaflet {
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+}
+
+leaflet leaflet, leaflet leaflet:backdrop {
+  box-shadow: none;
+}
+
 leaflet headerbar {
   border-radius: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
 }
 
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
+leaflet stack.background {
+  background-color: transparent;
 }
 
 leaflet > box > scrolledwindow > viewport > widget > stack {

From 190f8cc73c6c63f9362e8343b7ea78b9e2a2eb4b Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 27 Nov 2022 20:42:48 +0800
Subject: [PATCH 5/7] update

---
 src/_sass/_colors.scss                |   2 +-
 src/_sass/gtk/_colors-libadwaita.scss | 159 ++++++++++++++++++++++
 src/_sass/gtk/_common-4.0.scss        |  37 ++++-
 src/_sass/gtk/apps/_gnome-4.0.scss    |  42 +++---
 src/_sass/gtk/apps/_libadwaita.scss   |  47 -------
 src/gtk/4.0/gtk-Compact.css           | 175 +++++++++++++++---------
 src/gtk/4.0/gtk-Compact.scss          |   1 +
 src/gtk/4.0/gtk-Dark-Compact.css      | 187 +++++++++++++++++---------
 src/gtk/4.0/gtk-Dark-Compact.scss     |   1 +
 src/gtk/4.0/gtk-Dark.css              | 187 +++++++++++++++++---------
 src/gtk/4.0/gtk-Dark.scss             |   1 +
 src/gtk/4.0/gtk-Light-Compact.css     | 166 +++++++++++++++--------
 src/gtk/4.0/gtk-Light-Compact.scss    |   1 +
 src/gtk/4.0/gtk-Light.css             | 166 +++++++++++++++--------
 src/gtk/4.0/gtk-Light.scss            |   1 +
 src/gtk/4.0/gtk.css                   | 175 +++++++++++++++---------
 src/gtk/4.0/gtk.scss                  |   1 +
 17 files changed, 902 insertions(+), 447 deletions(-)
 create mode 100644 src/_sass/gtk/_colors-libadwaita.scss

diff --git a/src/_sass/_colors.scss b/src/_sass/_colors.scss
index bf7933f..ca158cd 100644
--- a/src/_sass/_colors.scss
+++ b/src/_sass/_colors.scss
@@ -131,7 +131,7 @@ $destructive:                           $error;
 $check_radio_primary:                   if($check_radio == 'default', $success, $primary);
 
 $frame:                                 if($variant == 'light', rgba(black, 0.08), rgba(black, 0.16)); // instead of shadows
-$border:                                if($variant == 'light', rgba(black, 0.12), rgba(black, 0.12));
+$border:                                if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
 $solid-border:                          if($variant == 'light', darken($background, 8%), lighten($background, 12%));
 $border-alt:                            rgba(black, 0.16); // darker border color for Chrome and Firefox
 $titlebar-indicator:                    if($topbar == 'dark', currentColor, $primary);
diff --git a/src/_sass/gtk/_colors-libadwaita.scss b/src/_sass/gtk/_colors-libadwaita.scss
new file mode 100644
index 0000000..a30cf05
--- /dev/null
+++ b/src/_sass/gtk/_colors-libadwaita.scss
@@ -0,0 +1,159 @@
+$blue_1: #99c1f1;
+$blue_2: #62a0ea;
+$blue_3: #3584e4;
+$blue_4: #1c71d8;
+$blue_5: #1a5fb4;
+$green_1: #8ff0a4;
+$green_2: #57e389;
+$green_3: #33d17a;
+$green_4: #2ec27e;
+$green_5: #26a269;
+$yellow_1: #f9f06b;
+$yellow_2: #f8e45c;
+$yellow_3: #f6d32d;
+$yellow_4: #f5c211;
+$yellow_5: #e5a50a;
+$orange_1: #ffbe6f;
+$orange_2: #ffa348;
+$orange_3: #ff7800;
+$orange_4: #e66100;
+$orange_5: #c64600;
+$red_1: #f66151;
+$red_2: #ed333b;
+$red_3: #e01b24;
+$red_4: #c01c28;
+$red_5: #a51d2d;
+$purple_1: #dc8add;
+$purple_2: #c061cb;
+$purple_3: #9141ac;
+$purple_4: #813d9c;
+$purple_5: #613583;
+$brown_1: #cdab8f;
+$brown_2: #b5835a;
+$brown_3: #986a44;
+$brown_4: #865e3c;
+$brown_5: #63452c;
+$light_1: #ffffff;
+$light_2: #f6f5f4;
+$light_3: #deddda;
+$light_4: #c0bfbc;
+$light_5: #9a9996;
+$dark_1: #77767b;
+$dark_2: #5e5c64;
+$dark_3: #3d3846;
+$dark_4: #241f31;
+$dark_5: #000000;
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using #{$var}.
+
+@define-color blue_1 #{$blue_1};
+@define-color blue_2 #{$blue_2};
+@define-color blue_3 #{$blue_3};
+@define-color blue_4 #{$blue_4};
+@define-color blue_5 #{$blue_5};
+@define-color green_1 #{$green_1};
+@define-color green_2 #{$green_2};
+@define-color green_3 #{$green_3};
+@define-color green_4 #{$green_4};
+@define-color green_5 #{$green_5};
+@define-color yellow_1 #{$yellow_1};
+@define-color yellow_2 #{$yellow_2};
+@define-color yellow_3 #{$yellow_3};
+@define-color yellow_4 #{$yellow_4};
+@define-color yellow_5 #{$yellow_5};
+@define-color orange_1 #{$orange_1};
+@define-color orange_2 #{$orange_2};
+@define-color orange_3 #{$orange_3};
+@define-color orange_4 #{$orange_4};
+@define-color orange_5 #{$orange_5};
+@define-color red_1 #{$red_1};
+@define-color red_2 #{$red_2};
+@define-color red_3 #{$red_3};
+@define-color red_4 #{$red_4};
+@define-color red_5 #{$red_5};
+@define-color purple_1 #{$purple_1};
+@define-color purple_2 #{$purple_2};
+@define-color purple_3 #{$purple_3};
+@define-color purple_4 #{$purple_4};
+@define-color purple_5 #{$purple_5};
+@define-color brown_1 #{$brown_1};
+@define-color brown_2 #{$brown_2};
+@define-color brown_3 #{$brown_3};
+@define-color brown_4 #{$brown_4};
+@define-color brown_5 #{$brown_5};
+@define-color light_1 #{$light_1};
+@define-color light_2 #{$light_2};
+@define-color light_3 #{$light_3};
+@define-color light_4 #{$light_4};
+@define-color light_5 #{$light_5};
+@define-color dark_1 #{$dark_1};
+@define-color dark_2 #{$dark_2};
+@define-color dark_3 #{$dark_3};
+@define-color dark_4 #{$dark_4};
+@define-color dark_5 #{$dark_5};
+
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using #{$var}.
+
+// These are the colors apps are can override. We define the defaults here and
+// define variables for them in _colors.scss
+
+// The main accent color and the matching text value
+@define-color accent_bg_color #{$primary};
+@define-color accent_fg_color #{on($primary)};
+@define-color accent_color #{$primary};
+
+// destructive-action buttons
+@define-color destructive_bg_color #{$destructive};
+@define-color destructive_fg_color #{on($destructive)};
+@define-color destructive_color #{$destructive};
+
+// Levelbars, entries, labels and infobars. These don't need text colors
+@define-color success_bg_color #{$success};
+@define-color success_fg_color #{on($success)};
+@define-color success_color #{$success};
+
+@define-color warning_bg_color #{$warning};
+@define-color warning_fg_color #{on($warning)};
+@define-color warning_color #{$warning};
+
+@define-color error_bg_color #{$error};
+@define-color error_fg_color #{on($error)};
+@define-color error_color #{$error};
+
+// Window
+@define-color window_bg_color #{$background};
+@define-color window_fg_color #{$text};
+
+// Views - e.g. text view or tree view
+@define-color view_bg_color #{$base};
+@define-color view_fg_color #{$text};
+
+// Header bar, search bar, tab bar
+@define-color headerbar_bg_color #{$titlebar};
+@define-color headerbar_fg_color #{$titlebar-text};
+@define-color headerbar_border_color #{$border};
+@define-color headerbar_backdrop_color #{$titlebar-backdrop};
+@define-color headerbar_shade_color #{$border};
+
+// Cards, boxed lists
+@define-color card_bg_color #{$base};
+@define-color card_fg_color #{$text};
+@define-color card_shade_color #{$border};
+
+// Dialogs
+@define-color dialog_bg_color #{$base-alt};
+@define-color dialog_fg_color #{$text};
+
+// Popovers
+@define-color popover_bg_color #{$surface};
+@define-color popover_fg_color #{$text};
+
+// Miscellaneous
+@define-color shade_color #{$border};
+@define-color scrollbar_outline_color #{$border};
diff --git a/src/_sass/gtk/_common-4.0.scss b/src/_sass/gtk/_common-4.0.scss
index 7f51f54..c8144a1 100644
--- a/src/_sass/gtk/_common-4.0.scss
+++ b/src/_sass/gtk/_common-4.0.scss
@@ -1109,12 +1109,11 @@ searchbar > revealer > box {
 
 headerbar {
   transition: background-color $duration $ease-out, color $duration $ease-out;
-  box-shadow: inset 0 -1px $divider, inset 0 1px highlight($titlebar);
+  box-shadow: inset 0 -1px $divider;
   color: $titlebar-text;
   min-height: $large-size;
   padding: 0;
   margin: 0;
-  border-radius: $window-radius $window-radius 0 0;
 
   @if $topbar == 'dark' {
     background-color: transparent;
@@ -2744,6 +2743,9 @@ progressbar {
     min-width: $bar-size;
     min-height: $bar-size;
     background-color: transparent;
+    box-shadow: none;
+    margin: 0;
+    padding: 0;
 
     trough { background-color: transparent; }
 
@@ -4010,8 +4012,6 @@ colorchooser .popover.osd {
  **********************/
 window {
   outline: none;
-  transition: $transition-shadow;
-  box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
 
   &.csd {
     border-radius: $window-radius;
@@ -4027,6 +4027,10 @@ window {
 
   @if $topbar == 'dark' {
     &.background {
+      box-shadow: $shadow-z16,
+                  0 16px (24px * .6) 2px transparent,
+                  0 6px (30px * .6) 5px transparent,
+                  inset 0 1px highlight($titlebar);
       background-color: transparent;
       background-image: linear-gradient(to bottom,
                                         $titlebar,
@@ -4034,6 +4038,10 @@ window {
                                         $background $large-size,
                                         $background);
     }
+  } @else {
+    box-shadow: $shadow-z16,
+                0 16px (24px * .6) 2px transparent,
+                0 6px (30px * .6) 5px transparent;
   }
 
   &:backdrop {
@@ -4041,7 +4049,26 @@ window {
     // change when we go to backdrop, to prevent jumping windows.
     // The biggest shadow should be in the same order then in the active state
     // or the jumping will happen during the transition.
-    box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
+    transition: $transition-shadow;
+
+    @if $topbar == 'dark' {
+      &.background {
+        box-shadow: $shadow-z4,
+                    0 16px (24px * .6) 2px transparent,
+                    0 6px (30px * .6) 5px transparent,
+                    inset 0 1px highlight($titlebar);
+        background-color: transparent;
+        background-image: linear-gradient(to bottom,
+                                          $titlebar-backdrop,
+                                          $titlebar-backdrop $large-size,
+                                          $background $large-size,
+                                          $background);
+      }
+    } @else {
+      box-shadow: $shadow-z4,
+                  0 16px (24px * .6) 2px transparent,
+                  0 6px (30px * .6) 5px transparent;
+    }
   }
 
   &.ssd {
diff --git a/src/_sass/gtk/apps/_gnome-4.0.scss b/src/_sass/gtk/apps/_gnome-4.0.scss
index a3df9ec..2b1fd93 100644
--- a/src/_sass/gtk/apps/_gnome-4.0.scss
+++ b/src/_sass/gtk/apps/_gnome-4.0.scss
@@ -350,6 +350,19 @@ window.dialog {
   }
 }
 
+// leaflet
+leaflet {
+  background-color: transparent;
+
+  stack.background {
+    background-color: transparent;
+  }
+
+  > box > scrolledwindow > viewport > widget > stack {
+    background-color: $base;
+  }
+}
+
 //
 // Calculator
 //
@@ -612,13 +625,7 @@ screenshot-carousel box.frame.view {
 
 window.org-gnome-Builder {
   headerbar {
-    box-shadow: inset 0 -1px $border;
-
     splitbutton {
-      button {
-        border-radius: $corner-radius;
-      }
-
       notification button {
         margin: 0;
         min-height: $small-size;
@@ -626,26 +633,21 @@ window.org-gnome-Builder {
         padding: 0;
       }
     }
-
-    menubutton > button {
-      border-radius: $corner-radius;
-      padding: $space-size $space-size * 1.5;
-    }
-
-    paneltogglebutton {
-      button {
-        border-radius: $corner-radius;
-      }
-    }
   }
 }
 
 popover.background.global-search {
-  > arrow, > contents { padding: 0; }
+  > arrow,
+  > contents { padding: 0; }
 }
 
 panelframeswitcher {
   padding: $space-size;
+  border-bottom: 1px solid $border;
+}
+
+panelframetabbar {
+  border-bottom: none;
 }
 
 .frameheader.header {
@@ -672,10 +674,10 @@ panelframeswitcher {
         border-left: 1px solid $border;
 
         menubutton > button {
-          margin: $space-size;
+          margin: $space-size / 2;
           min-height: $small-size;
           min-width: $small-size;
-          padding: $space-size / 2;
+          padding: $space-size;
           border-radius: $corner-radius;
         }
       }
diff --git a/src/_sass/gtk/apps/_libadwaita.scss b/src/_sass/gtk/apps/_libadwaita.scss
index 05846f4..ca0076f 100644
--- a/src/_sass/gtk/apps/_libadwaita.scss
+++ b/src/_sass/gtk/apps/_libadwaita.scss
@@ -707,50 +707,3 @@ tabbox:drop(active) {
 
 // Sidebar
 .unfolded stacksidebar.sidebar { border: none; }
-
-
-//
-// leaflet
-//
-
-leaflet {
-  border-radius: $window-radius;
-
-  &, &:backdrop {
-    box-shadow: inset 0 1px highlight($titlebar);
-  }
-
-  leaflet { // reset
-    border-radius: 0;
-    outline: none;
-    box-shadow: none;
-
-    &, &:backdrop {
-      box-shadow: none;
-    }
-  }
-
-  headerbar {
-    border-radius: 0;
-    box-shadow: inset 0 -1px $divider;
-  }
-
-  stack.background {
-    background-color: transparent;
-  }
-
-  > box > scrolledwindow > viewport > widget > stack {
-    background-color: $base;
-  }
-
-  .maximized &,
-  .fullscreen &,
-  .tiled &,
-  .tiled-top &,
-  .tiled-right &,
-  .tiled-bottom &,
-  .tiled-left & {
-    border-radius: 0;
-    outline: none;
-  }
-}
diff --git a/src/gtk/4.0/gtk-Compact.css b/src/gtk/4.0/gtk-Compact.css
index 2b5b9ab..bc6e7e0 100644
--- a/src/gtk/4.0/gtk-Compact.css
+++ b/src/gtk/4.0/gtk-Compact.css
@@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
 
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
   color: white;
   min-height: 40px;
   padding: 0;
   margin: 0;
-  border-radius: 16px 16px 0 0;
   background-color: transparent;
 }
 
@@ -3202,6 +3201,9 @@ progressbar.osd {
   min-width: 6px;
   min-height: 6px;
   background-color: transparent;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
 }
 
 progressbar.osd trough {
@@ -4413,8 +4415,6 @@ colorchooser .popover.osd:backdrop {
  **********************/
 window {
   outline: none;
-  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
 
 window.csd {
@@ -4426,12 +4426,19 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
 }
 
 window.background {
+  box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
   background-color: transparent;
   background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 40px, #F2F2F2 40px, #F2F2F2);
 }
 
 window:backdrop {
-  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
+  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+window:backdrop.background {
+  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 40px, #F2F2F2 40px, #F2F2F2);
 }
 
 window.ssd {
@@ -4984,6 +4991,18 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+leaflet {
+  background-color: transparent;
+}
+
+leaflet stack.background {
+  background-color: transparent;
+}
+
+leaflet > box > scrolledwindow > viewport > widget > stack {
+  background-color: #FFFFFF;
+}
+
 .history-view {
   background-color: #FFFFFF;
 }
@@ -5206,14 +5225,6 @@ screenshot-carousel box.frame.view {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar {
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-window.org-gnome-Builder headerbar splitbutton button {
-  border-radius: 10px;
-}
-
 window.org-gnome-Builder headerbar splitbutton notification button {
   margin: 0;
   min-height: 22px;
@@ -5221,21 +5232,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar menubutton > button {
-  border-radius: 10px;
-  padding: 4px 6px;
-}
-
-window.org-gnome-Builder headerbar paneltogglebutton button {
-  border-radius: 10px;
-}
-
-popover.background.global-search > arrow, popover.background.global-search > contents {
+popover.background.global-search > arrow,
+popover.background.global-search > contents {
   padding: 0;
 }
 
 panelframeswitcher {
   padding: 4px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+panelframetabbar {
+  border-bottom: none;
 }
 
 .frameheader.header {
@@ -5264,10 +5272,10 @@ panelframeswitcher {
 }
 
 .frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
-  margin: 4px;
+  margin: 2px;
   min-height: 22px;
   min-width: 22px;
-  padding: 2px;
+  padding: 4px;
   border-radius: 10px;
 }
 
@@ -6034,42 +6042,6 @@ tabbox:drop(active) {
   border: none;
 }
 
-leaflet {
-  border-radius: 16px;
-}
-
-leaflet, leaflet:backdrop {
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
-}
-
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
-  box-shadow: none;
-}
-
-leaflet leaflet, leaflet leaflet:backdrop {
-  box-shadow: none;
-}
-
-leaflet headerbar {
-  border-radius: 0;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-leaflet stack.background {
-  background-color: transparent;
-}
-
-leaflet > box > scrolledwindow > viewport > widget > stack {
-  background-color: #FFFFFF;
-}
-
-.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
-  border-radius: 0;
-  outline: none;
-}
-
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
@@ -6200,3 +6172,84 @@ FIXME this is really an API */
 @define-color BLACK_500 #393634;
 @define-color BLACK_700 #33302F;
 @define-color BLACK_900 #2B2928;
+@define-color blue_1 #99c1f1;
+@define-color blue_2 #62a0ea;
+@define-color blue_3 #3584e4;
+@define-color blue_4 #1c71d8;
+@define-color blue_5 #1a5fb4;
+@define-color green_1 #8ff0a4;
+@define-color green_2 #57e389;
+@define-color green_3 #33d17a;
+@define-color green_4 #2ec27e;
+@define-color green_5 #26a269;
+@define-color yellow_1 #f9f06b;
+@define-color yellow_2 #f8e45c;
+@define-color yellow_3 #f6d32d;
+@define-color yellow_4 #f5c211;
+@define-color yellow_5 #e5a50a;
+@define-color orange_1 #ffbe6f;
+@define-color orange_2 #ffa348;
+@define-color orange_3 #ff7800;
+@define-color orange_4 #e66100;
+@define-color orange_5 #c64600;
+@define-color red_1 #f66151;
+@define-color red_2 #ed333b;
+@define-color red_3 #e01b24;
+@define-color red_4 #c01c28;
+@define-color red_5 #a51d2d;
+@define-color purple_1 #dc8add;
+@define-color purple_2 #c061cb;
+@define-color purple_3 #9141ac;
+@define-color purple_4 #813d9c;
+@define-color purple_5 #613583;
+@define-color brown_1 #cdab8f;
+@define-color brown_2 #b5835a;
+@define-color brown_3 #986a44;
+@define-color brown_4 #865e3c;
+@define-color brown_5 #63452c;
+@define-color light_1 #ffffff;
+@define-color light_2 #f6f5f4;
+@define-color light_3 #deddda;
+@define-color light_4 #c0bfbc;
+@define-color light_5 #9a9996;
+@define-color dark_1 #77767b;
+@define-color dark_2 #5e5c64;
+@define-color dark_3 #3d3846;
+@define-color dark_4 #241f31;
+@define-color dark_5 #000000;
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+@define-color accent_bg_color #1A73E8;
+@define-color accent_fg_color white;
+@define-color accent_color #1A73E8;
+@define-color destructive_bg_color #D93025;
+@define-color destructive_fg_color white;
+@define-color destructive_color #D93025;
+@define-color success_bg_color #0F9D58;
+@define-color success_fg_color white;
+@define-color success_color #0F9D58;
+@define-color warning_bg_color #F4B400;
+@define-color warning_fg_color rgba(0, 0, 0, 0.87);
+@define-color warning_color #F4B400;
+@define-color error_bg_color #D93025;
+@define-color error_fg_color white;
+@define-color error_color #D93025;
+@define-color window_bg_color #F2F2F2;
+@define-color window_fg_color rgba(0, 0, 0, 0.87);
+@define-color view_bg_color #FFFFFF;
+@define-color view_fg_color rgba(0, 0, 0, 0.87);
+@define-color headerbar_bg_color #2C2C2C;
+@define-color headerbar_fg_color white;
+@define-color headerbar_border_color rgba(0, 0, 0, 0.12);
+@define-color headerbar_backdrop_color #2C2C2C;
+@define-color headerbar_shade_color rgba(0, 0, 0, 0.12);
+@define-color card_bg_color #FFFFFF;
+@define-color card_fg_color rgba(0, 0, 0, 0.87);
+@define-color card_shade_color rgba(0, 0, 0, 0.12);
+@define-color dialog_bg_color #FAFAFA;
+@define-color dialog_fg_color rgba(0, 0, 0, 0.87);
+@define-color popover_bg_color #FFFFFF;
+@define-color popover_fg_color rgba(0, 0, 0, 0.87);
+@define-color shade_color rgba(0, 0, 0, 0.12);
+@define-color scrollbar_outline_color rgba(0, 0, 0, 0.12);
diff --git a/src/gtk/4.0/gtk-Compact.scss b/src/gtk/4.0/gtk-Compact.scss
index 912e7cf..0e37fc7 100644
--- a/src/gtk/4.0/gtk-Compact.scss
+++ b/src/gtk/4.0/gtk-Compact.scss
@@ -8,3 +8,4 @@ $compact: 'true';
 @import '../../_sass/gtk/common-4.0';
 @import '../../_sass/gtk/apps-4.0';
 @import '../../_sass/gtk/colors-public';
+@import '../../_sass/gtk/colors-libadwaita';
diff --git a/src/gtk/4.0/gtk-Dark-Compact.css b/src/gtk/4.0/gtk-Dark-Compact.css
index 6ba9c2b..749e438 100644
--- a/src/gtk/4.0/gtk-Dark-Compact.css
+++ b/src/gtk/4.0/gtk-Dark-Compact.css
@@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
 
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
   color: white;
   min-height: 40px;
   padding: 0;
   margin: 0;
-  border-radius: 16px 16px 0 0;
   background-color: transparent;
 }
 
@@ -3202,6 +3201,9 @@ progressbar.osd {
   min-width: 6px;
   min-height: 6px;
   background-color: transparent;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
 }
 
 progressbar.osd trough {
@@ -4413,8 +4415,6 @@ colorchooser .popover.osd:backdrop {
  **********************/
 window {
   outline: none;
-  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
 
 window.csd {
@@ -4426,12 +4426,19 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
 }
 
 window.background {
+  box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
   background-color: transparent;
   background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 40px, #212121 40px, #212121);
 }
 
 window:backdrop {
-  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
+  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+window:backdrop.background {
+  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 40px, #212121 40px, #212121);
 }
 
 window.ssd {
@@ -4954,12 +4961,24 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+leaflet {
+  background-color: transparent;
+}
+
+leaflet stack.background {
+  background-color: transparent;
+}
+
+leaflet > box > scrolledwindow > viewport > widget > stack {
+  background-color: #2C2C2C;
+}
+
 .history-view {
   background-color: #2C2C2C;
 }
 
 #displayitem {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .small .card {
@@ -5028,7 +5047,7 @@ app-context-bar > box:first-child > button.flat:first-child {
 }
 
 app-context-bar > box > button.flat {
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: rgba(255, 255, 255, 0.12);
 }
 
 carousel.card {
@@ -5147,19 +5166,19 @@ screenshot-carousel box.frame.view {
   /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
   color: #1c71d8;
   background-color: #fdf8d7;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
   background-size: 10px 10px, 10px 10px;
   background-position: -1px -4px, center -1px;
 }
 
 .category-tile.category-work:hover {
   background-color: #fefcef;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
 }
 
 .category-tile.category-work:active {
   background-color: #fcf4bf;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
 }
 
 .polari-room-list .sidebar {
@@ -5176,14 +5195,6 @@ screenshot-carousel box.frame.view {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar {
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-window.org-gnome-Builder headerbar splitbutton button {
-  border-radius: 10px;
-}
-
 window.org-gnome-Builder headerbar splitbutton notification button {
   margin: 0;
   min-height: 22px;
@@ -5191,21 +5202,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar menubutton > button {
-  border-radius: 10px;
-  padding: 4px 6px;
-}
-
-window.org-gnome-Builder headerbar paneltogglebutton button {
-  border-radius: 10px;
-}
-
-popover.background.global-search > arrow, popover.background.global-search > contents {
+popover.background.global-search > arrow,
+popover.background.global-search > contents {
   padding: 0;
 }
 
 panelframeswitcher {
   padding: 4px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+panelframetabbar {
+  border-bottom: none;
 }
 
 .frameheader.header {
@@ -5230,14 +5238,14 @@ panelframeswitcher {
 
 .frameheader.header tabbar.inline > revealer > box .end-action {
   padding: 0;
-  border-left: 1px solid rgba(0, 0, 0, 0.12);
+  border-left: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
-  margin: 4px;
+  margin: 2px;
   min-height: 22px;
   min-width: 22px;
-  padding: 2px;
+  padding: 4px;
   border-radius: 10px;
 }
 
@@ -6004,42 +6012,6 @@ tabbox:drop(active) {
   border: none;
 }
 
-leaflet {
-  border-radius: 16px;
-}
-
-leaflet, leaflet:backdrop {
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
-}
-
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
-  box-shadow: none;
-}
-
-leaflet leaflet, leaflet leaflet:backdrop {
-  box-shadow: none;
-}
-
-leaflet headerbar {
-  border-radius: 0;
-  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
-}
-
-leaflet stack.background {
-  background-color: transparent;
-}
-
-leaflet > box > scrolledwindow > viewport > widget > stack {
-  background-color: #2C2C2C;
-}
-
-.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
-  border-radius: 0;
-  outline: none;
-}
-
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
@@ -6170,3 +6142,84 @@ FIXME this is really an API */
 @define-color BLACK_500 #393634;
 @define-color BLACK_700 #33302F;
 @define-color BLACK_900 #2B2928;
+@define-color blue_1 #99c1f1;
+@define-color blue_2 #62a0ea;
+@define-color blue_3 #3584e4;
+@define-color blue_4 #1c71d8;
+@define-color blue_5 #1a5fb4;
+@define-color green_1 #8ff0a4;
+@define-color green_2 #57e389;
+@define-color green_3 #33d17a;
+@define-color green_4 #2ec27e;
+@define-color green_5 #26a269;
+@define-color yellow_1 #f9f06b;
+@define-color yellow_2 #f8e45c;
+@define-color yellow_3 #f6d32d;
+@define-color yellow_4 #f5c211;
+@define-color yellow_5 #e5a50a;
+@define-color orange_1 #ffbe6f;
+@define-color orange_2 #ffa348;
+@define-color orange_3 #ff7800;
+@define-color orange_4 #e66100;
+@define-color orange_5 #c64600;
+@define-color red_1 #f66151;
+@define-color red_2 #ed333b;
+@define-color red_3 #e01b24;
+@define-color red_4 #c01c28;
+@define-color red_5 #a51d2d;
+@define-color purple_1 #dc8add;
+@define-color purple_2 #c061cb;
+@define-color purple_3 #9141ac;
+@define-color purple_4 #813d9c;
+@define-color purple_5 #613583;
+@define-color brown_1 #cdab8f;
+@define-color brown_2 #b5835a;
+@define-color brown_3 #986a44;
+@define-color brown_4 #865e3c;
+@define-color brown_5 #63452c;
+@define-color light_1 #ffffff;
+@define-color light_2 #f6f5f4;
+@define-color light_3 #deddda;
+@define-color light_4 #c0bfbc;
+@define-color light_5 #9a9996;
+@define-color dark_1 #77767b;
+@define-color dark_2 #5e5c64;
+@define-color dark_3 #3d3846;
+@define-color dark_4 #241f31;
+@define-color dark_5 #000000;
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+@define-color accent_bg_color #3281EA;
+@define-color accent_fg_color white;
+@define-color accent_color #3281EA;
+@define-color destructive_bg_color #F28B82;
+@define-color destructive_fg_color rgba(0, 0, 0, 0.87);
+@define-color destructive_color #F28B82;
+@define-color success_bg_color #81C995;
+@define-color success_fg_color rgba(0, 0, 0, 0.87);
+@define-color success_color #81C995;
+@define-color warning_bg_color #FDD633;
+@define-color warning_fg_color rgba(0, 0, 0, 0.87);
+@define-color warning_color #FDD633;
+@define-color error_bg_color #F28B82;
+@define-color error_fg_color rgba(0, 0, 0, 0.87);
+@define-color error_color #F28B82;
+@define-color window_bg_color #212121;
+@define-color window_fg_color white;
+@define-color view_bg_color #2C2C2C;
+@define-color view_fg_color white;
+@define-color headerbar_bg_color #2C2C2C;
+@define-color headerbar_fg_color white;
+@define-color headerbar_border_color rgba(255, 255, 255, 0.12);
+@define-color headerbar_backdrop_color #2C2C2C;
+@define-color headerbar_shade_color rgba(255, 255, 255, 0.12);
+@define-color card_bg_color #2C2C2C;
+@define-color card_fg_color white;
+@define-color card_shade_color rgba(255, 255, 255, 0.12);
+@define-color dialog_bg_color #242424;
+@define-color dialog_fg_color white;
+@define-color popover_bg_color #3C3C3C;
+@define-color popover_fg_color white;
+@define-color shade_color rgba(255, 255, 255, 0.12);
+@define-color scrollbar_outline_color rgba(255, 255, 255, 0.12);
diff --git a/src/gtk/4.0/gtk-Dark-Compact.scss b/src/gtk/4.0/gtk-Dark-Compact.scss
index 3adce11..122d1df 100644
--- a/src/gtk/4.0/gtk-Dark-Compact.scss
+++ b/src/gtk/4.0/gtk-Dark-Compact.scss
@@ -8,3 +8,4 @@ $compact: 'true';
 @import '../../_sass/gtk/common-4.0';
 @import '../../_sass/gtk/apps-4.0';
 @import '../../_sass/gtk/colors-public';
+@import '../../_sass/gtk/colors-libadwaita';
diff --git a/src/gtk/4.0/gtk-Dark.css b/src/gtk/4.0/gtk-Dark.css
index 8b78ba8..8ad255a 100644
--- a/src/gtk/4.0/gtk-Dark.css
+++ b/src/gtk/4.0/gtk-Dark.css
@@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
 
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
   color: white;
   min-height: 48px;
   padding: 0;
   margin: 0;
-  border-radius: 18px 18px 0 0;
   background-color: transparent;
 }
 
@@ -3202,6 +3201,9 @@ progressbar.osd {
   min-width: 6px;
   min-height: 6px;
   background-color: transparent;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
 }
 
 progressbar.osd trough {
@@ -4413,8 +4415,6 @@ colorchooser .popover.osd:backdrop {
  **********************/
 window {
   outline: none;
-  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
 
 window.csd {
@@ -4426,12 +4426,19 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
 }
 
 window.background {
+  box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
   background-color: transparent;
   background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 48px, #212121 48px, #212121);
 }
 
 window:backdrop {
-  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
+  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+window:backdrop.background {
+  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 48px, #212121 48px, #212121);
 }
 
 window.ssd {
@@ -4954,12 +4961,24 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+leaflet {
+  background-color: transparent;
+}
+
+leaflet stack.background {
+  background-color: transparent;
+}
+
+leaflet > box > scrolledwindow > viewport > widget > stack {
+  background-color: #2C2C2C;
+}
+
 .history-view {
   background-color: #2C2C2C;
 }
 
 #displayitem {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .small .card {
@@ -5028,7 +5047,7 @@ app-context-bar > box:first-child > button.flat:first-child {
 }
 
 app-context-bar > box > button.flat {
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: rgba(255, 255, 255, 0.12);
 }
 
 carousel.card {
@@ -5147,19 +5166,19 @@ screenshot-carousel box.frame.view {
   /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
   color: #1c71d8;
   background-color: #fdf8d7;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
   background-size: 10px 10px, 10px 10px;
   background-position: -1px -4px, center -1px;
 }
 
 .category-tile.category-work:hover {
   background-color: #fefcef;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
 }
 
 .category-tile.category-work:active {
   background-color: #fcf4bf;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
 }
 
 .polari-room-list .sidebar {
@@ -5176,14 +5195,6 @@ screenshot-carousel box.frame.view {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar {
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-window.org-gnome-Builder headerbar splitbutton button {
-  border-radius: 12px;
-}
-
 window.org-gnome-Builder headerbar splitbutton notification button {
   margin: 0;
   min-height: 24px;
@@ -5191,21 +5202,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar menubutton > button {
-  border-radius: 12px;
-  padding: 6px 9px;
-}
-
-window.org-gnome-Builder headerbar paneltogglebutton button {
-  border-radius: 12px;
-}
-
-popover.background.global-search > arrow, popover.background.global-search > contents {
+popover.background.global-search > arrow,
+popover.background.global-search > contents {
   padding: 0;
 }
 
 panelframeswitcher {
   padding: 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+panelframetabbar {
+  border-bottom: none;
 }
 
 .frameheader.header {
@@ -5230,14 +5238,14 @@ panelframeswitcher {
 
 .frameheader.header tabbar.inline > revealer > box .end-action {
   padding: 0;
-  border-left: 1px solid rgba(0, 0, 0, 0.12);
+  border-left: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
-  margin: 6px;
+  margin: 3px;
   min-height: 24px;
   min-width: 24px;
-  padding: 3px;
+  padding: 6px;
   border-radius: 12px;
 }
 
@@ -6004,42 +6012,6 @@ tabbox:drop(active) {
   border: none;
 }
 
-leaflet {
-  border-radius: 18px;
-}
-
-leaflet, leaflet:backdrop {
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
-}
-
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
-  box-shadow: none;
-}
-
-leaflet leaflet, leaflet leaflet:backdrop {
-  box-shadow: none;
-}
-
-leaflet headerbar {
-  border-radius: 0;
-  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
-}
-
-leaflet stack.background {
-  background-color: transparent;
-}
-
-leaflet > box > scrolledwindow > viewport > widget > stack {
-  background-color: #2C2C2C;
-}
-
-.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
-  border-radius: 0;
-  outline: none;
-}
-
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
@@ -6170,3 +6142,84 @@ FIXME this is really an API */
 @define-color BLACK_500 #393634;
 @define-color BLACK_700 #33302F;
 @define-color BLACK_900 #2B2928;
+@define-color blue_1 #99c1f1;
+@define-color blue_2 #62a0ea;
+@define-color blue_3 #3584e4;
+@define-color blue_4 #1c71d8;
+@define-color blue_5 #1a5fb4;
+@define-color green_1 #8ff0a4;
+@define-color green_2 #57e389;
+@define-color green_3 #33d17a;
+@define-color green_4 #2ec27e;
+@define-color green_5 #26a269;
+@define-color yellow_1 #f9f06b;
+@define-color yellow_2 #f8e45c;
+@define-color yellow_3 #f6d32d;
+@define-color yellow_4 #f5c211;
+@define-color yellow_5 #e5a50a;
+@define-color orange_1 #ffbe6f;
+@define-color orange_2 #ffa348;
+@define-color orange_3 #ff7800;
+@define-color orange_4 #e66100;
+@define-color orange_5 #c64600;
+@define-color red_1 #f66151;
+@define-color red_2 #ed333b;
+@define-color red_3 #e01b24;
+@define-color red_4 #c01c28;
+@define-color red_5 #a51d2d;
+@define-color purple_1 #dc8add;
+@define-color purple_2 #c061cb;
+@define-color purple_3 #9141ac;
+@define-color purple_4 #813d9c;
+@define-color purple_5 #613583;
+@define-color brown_1 #cdab8f;
+@define-color brown_2 #b5835a;
+@define-color brown_3 #986a44;
+@define-color brown_4 #865e3c;
+@define-color brown_5 #63452c;
+@define-color light_1 #ffffff;
+@define-color light_2 #f6f5f4;
+@define-color light_3 #deddda;
+@define-color light_4 #c0bfbc;
+@define-color light_5 #9a9996;
+@define-color dark_1 #77767b;
+@define-color dark_2 #5e5c64;
+@define-color dark_3 #3d3846;
+@define-color dark_4 #241f31;
+@define-color dark_5 #000000;
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+@define-color accent_bg_color #3281EA;
+@define-color accent_fg_color white;
+@define-color accent_color #3281EA;
+@define-color destructive_bg_color #F28B82;
+@define-color destructive_fg_color rgba(0, 0, 0, 0.87);
+@define-color destructive_color #F28B82;
+@define-color success_bg_color #81C995;
+@define-color success_fg_color rgba(0, 0, 0, 0.87);
+@define-color success_color #81C995;
+@define-color warning_bg_color #FDD633;
+@define-color warning_fg_color rgba(0, 0, 0, 0.87);
+@define-color warning_color #FDD633;
+@define-color error_bg_color #F28B82;
+@define-color error_fg_color rgba(0, 0, 0, 0.87);
+@define-color error_color #F28B82;
+@define-color window_bg_color #212121;
+@define-color window_fg_color white;
+@define-color view_bg_color #2C2C2C;
+@define-color view_fg_color white;
+@define-color headerbar_bg_color #2C2C2C;
+@define-color headerbar_fg_color white;
+@define-color headerbar_border_color rgba(255, 255, 255, 0.12);
+@define-color headerbar_backdrop_color #2C2C2C;
+@define-color headerbar_shade_color rgba(255, 255, 255, 0.12);
+@define-color card_bg_color #2C2C2C;
+@define-color card_fg_color white;
+@define-color card_shade_color rgba(255, 255, 255, 0.12);
+@define-color dialog_bg_color #242424;
+@define-color dialog_fg_color white;
+@define-color popover_bg_color #3C3C3C;
+@define-color popover_fg_color white;
+@define-color shade_color rgba(255, 255, 255, 0.12);
+@define-color scrollbar_outline_color rgba(255, 255, 255, 0.12);
diff --git a/src/gtk/4.0/gtk-Dark.scss b/src/gtk/4.0/gtk-Dark.scss
index 8afdf44..d2c9d44 100644
--- a/src/gtk/4.0/gtk-Dark.scss
+++ b/src/gtk/4.0/gtk-Dark.scss
@@ -8,3 +8,4 @@ $compact: 'false';
 @import '../../_sass/gtk/common-4.0';
 @import '../../_sass/gtk/apps-4.0';
 @import '../../_sass/gtk/colors-public';
+@import '../../_sass/gtk/colors-libadwaita';
diff --git a/src/gtk/4.0/gtk-Light-Compact.css b/src/gtk/4.0/gtk-Light-Compact.css
index 7f6655e..26a6138 100644
--- a/src/gtk/4.0/gtk-Light-Compact.css
+++ b/src/gtk/4.0/gtk-Light-Compact.css
@@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
 
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.4);
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
   min-height: 40px;
   padding: 0;
   margin: 0;
-  border-radius: 16px 16px 0 0;
   background-color: #FFFFFF;
 }
 
@@ -3202,6 +3201,9 @@ progressbar.osd {
   min-width: 6px;
   min-height: 6px;
   background-color: transparent;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
 }
 
 progressbar.osd trough {
@@ -4413,7 +4415,6 @@ colorchooser .popover.osd:backdrop {
  **********************/
 window {
   outline: none;
-  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
 
@@ -4426,6 +4427,7 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
 }
 
 window:backdrop {
+  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
 
@@ -4948,6 +4950,18 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+leaflet {
+  background-color: transparent;
+}
+
+leaflet stack.background {
+  background-color: transparent;
+}
+
+leaflet > box > scrolledwindow > viewport > widget > stack {
+  background-color: #FFFFFF;
+}
+
 .history-view {
   background-color: #FFFFFF;
 }
@@ -5170,14 +5184,6 @@ screenshot-carousel box.frame.view {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar {
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-window.org-gnome-Builder headerbar splitbutton button {
-  border-radius: 10px;
-}
-
 window.org-gnome-Builder headerbar splitbutton notification button {
   margin: 0;
   min-height: 22px;
@@ -5185,21 +5191,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar menubutton > button {
-  border-radius: 10px;
-  padding: 4px 6px;
-}
-
-window.org-gnome-Builder headerbar paneltogglebutton button {
-  border-radius: 10px;
-}
-
-popover.background.global-search > arrow, popover.background.global-search > contents {
+popover.background.global-search > arrow,
+popover.background.global-search > contents {
   padding: 0;
 }
 
 panelframeswitcher {
   padding: 4px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+panelframetabbar {
+  border-bottom: none;
 }
 
 .frameheader.header {
@@ -5228,10 +5231,10 @@ panelframeswitcher {
 }
 
 .frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
-  margin: 4px;
+  margin: 2px;
   min-height: 22px;
   min-width: 22px;
-  padding: 2px;
+  padding: 4px;
   border-radius: 10px;
 }
 
@@ -5998,42 +6001,6 @@ tabbox:drop(active) {
   border: none;
 }
 
-leaflet {
-  border-radius: 16px;
-}
-
-leaflet, leaflet:backdrop {
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
-}
-
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
-  box-shadow: none;
-}
-
-leaflet leaflet, leaflet leaflet:backdrop {
-  box-shadow: none;
-}
-
-leaflet headerbar {
-  border-radius: 0;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-leaflet stack.background {
-  background-color: transparent;
-}
-
-leaflet > box > scrolledwindow > viewport > widget > stack {
-  background-color: #FFFFFF;
-}
-
-.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
-  border-radius: 0;
-  outline: none;
-}
-
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
@@ -6164,3 +6131,84 @@ FIXME this is really an API */
 @define-color BLACK_500 #393634;
 @define-color BLACK_700 #33302F;
 @define-color BLACK_900 #2B2928;
+@define-color blue_1 #99c1f1;
+@define-color blue_2 #62a0ea;
+@define-color blue_3 #3584e4;
+@define-color blue_4 #1c71d8;
+@define-color blue_5 #1a5fb4;
+@define-color green_1 #8ff0a4;
+@define-color green_2 #57e389;
+@define-color green_3 #33d17a;
+@define-color green_4 #2ec27e;
+@define-color green_5 #26a269;
+@define-color yellow_1 #f9f06b;
+@define-color yellow_2 #f8e45c;
+@define-color yellow_3 #f6d32d;
+@define-color yellow_4 #f5c211;
+@define-color yellow_5 #e5a50a;
+@define-color orange_1 #ffbe6f;
+@define-color orange_2 #ffa348;
+@define-color orange_3 #ff7800;
+@define-color orange_4 #e66100;
+@define-color orange_5 #c64600;
+@define-color red_1 #f66151;
+@define-color red_2 #ed333b;
+@define-color red_3 #e01b24;
+@define-color red_4 #c01c28;
+@define-color red_5 #a51d2d;
+@define-color purple_1 #dc8add;
+@define-color purple_2 #c061cb;
+@define-color purple_3 #9141ac;
+@define-color purple_4 #813d9c;
+@define-color purple_5 #613583;
+@define-color brown_1 #cdab8f;
+@define-color brown_2 #b5835a;
+@define-color brown_3 #986a44;
+@define-color brown_4 #865e3c;
+@define-color brown_5 #63452c;
+@define-color light_1 #ffffff;
+@define-color light_2 #f6f5f4;
+@define-color light_3 #deddda;
+@define-color light_4 #c0bfbc;
+@define-color light_5 #9a9996;
+@define-color dark_1 #77767b;
+@define-color dark_2 #5e5c64;
+@define-color dark_3 #3d3846;
+@define-color dark_4 #241f31;
+@define-color dark_5 #000000;
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+@define-color accent_bg_color #1A73E8;
+@define-color accent_fg_color white;
+@define-color accent_color #1A73E8;
+@define-color destructive_bg_color #D93025;
+@define-color destructive_fg_color white;
+@define-color destructive_color #D93025;
+@define-color success_bg_color #0F9D58;
+@define-color success_fg_color white;
+@define-color success_color #0F9D58;
+@define-color warning_bg_color #F4B400;
+@define-color warning_fg_color rgba(0, 0, 0, 0.87);
+@define-color warning_color #F4B400;
+@define-color error_bg_color #D93025;
+@define-color error_fg_color white;
+@define-color error_color #D93025;
+@define-color window_bg_color #F2F2F2;
+@define-color window_fg_color rgba(0, 0, 0, 0.87);
+@define-color view_bg_color #FFFFFF;
+@define-color view_fg_color rgba(0, 0, 0, 0.87);
+@define-color headerbar_bg_color #FFFFFF;
+@define-color headerbar_fg_color rgba(0, 0, 0, 0.87);
+@define-color headerbar_border_color rgba(0, 0, 0, 0.12);
+@define-color headerbar_backdrop_color #FFFFFF;
+@define-color headerbar_shade_color rgba(0, 0, 0, 0.12);
+@define-color card_bg_color #FFFFFF;
+@define-color card_fg_color rgba(0, 0, 0, 0.87);
+@define-color card_shade_color rgba(0, 0, 0, 0.12);
+@define-color dialog_bg_color #FAFAFA;
+@define-color dialog_fg_color rgba(0, 0, 0, 0.87);
+@define-color popover_bg_color #FFFFFF;
+@define-color popover_fg_color rgba(0, 0, 0, 0.87);
+@define-color shade_color rgba(0, 0, 0, 0.12);
+@define-color scrollbar_outline_color rgba(0, 0, 0, 0.12);
diff --git a/src/gtk/4.0/gtk-Light-Compact.scss b/src/gtk/4.0/gtk-Light-Compact.scss
index 7d9fc90..c8e57a3 100644
--- a/src/gtk/4.0/gtk-Light-Compact.scss
+++ b/src/gtk/4.0/gtk-Light-Compact.scss
@@ -8,3 +8,4 @@ $compact: 'true';
 @import '../../_sass/gtk/common-4.0';
 @import '../../_sass/gtk/apps-4.0';
 @import '../../_sass/gtk/colors-public';
+@import '../../_sass/gtk/colors-libadwaita';
diff --git a/src/gtk/4.0/gtk-Light.css b/src/gtk/4.0/gtk-Light.css
index db87aca..a33fb96 100644
--- a/src/gtk/4.0/gtk-Light.css
+++ b/src/gtk/4.0/gtk-Light.css
@@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
 
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.4);
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
   min-height: 48px;
   padding: 0;
   margin: 0;
-  border-radius: 18px 18px 0 0;
   background-color: #FFFFFF;
 }
 
@@ -3202,6 +3201,9 @@ progressbar.osd {
   min-width: 6px;
   min-height: 6px;
   background-color: transparent;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
 }
 
 progressbar.osd trough {
@@ -4413,7 +4415,6 @@ colorchooser .popover.osd:backdrop {
  **********************/
 window {
   outline: none;
-  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
 
@@ -4426,6 +4427,7 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
 }
 
 window:backdrop {
+  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
 
@@ -4948,6 +4950,18 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+leaflet {
+  background-color: transparent;
+}
+
+leaflet stack.background {
+  background-color: transparent;
+}
+
+leaflet > box > scrolledwindow > viewport > widget > stack {
+  background-color: #FFFFFF;
+}
+
 .history-view {
   background-color: #FFFFFF;
 }
@@ -5170,14 +5184,6 @@ screenshot-carousel box.frame.view {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar {
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-window.org-gnome-Builder headerbar splitbutton button {
-  border-radius: 12px;
-}
-
 window.org-gnome-Builder headerbar splitbutton notification button {
   margin: 0;
   min-height: 24px;
@@ -5185,21 +5191,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar menubutton > button {
-  border-radius: 12px;
-  padding: 6px 9px;
-}
-
-window.org-gnome-Builder headerbar paneltogglebutton button {
-  border-radius: 12px;
-}
-
-popover.background.global-search > arrow, popover.background.global-search > contents {
+popover.background.global-search > arrow,
+popover.background.global-search > contents {
   padding: 0;
 }
 
 panelframeswitcher {
   padding: 6px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+panelframetabbar {
+  border-bottom: none;
 }
 
 .frameheader.header {
@@ -5228,10 +5231,10 @@ panelframeswitcher {
 }
 
 .frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
-  margin: 6px;
+  margin: 3px;
   min-height: 24px;
   min-width: 24px;
-  padding: 3px;
+  padding: 6px;
   border-radius: 12px;
 }
 
@@ -5998,42 +6001,6 @@ tabbox:drop(active) {
   border: none;
 }
 
-leaflet {
-  border-radius: 18px;
-}
-
-leaflet, leaflet:backdrop {
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
-}
-
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
-  box-shadow: none;
-}
-
-leaflet leaflet, leaflet leaflet:backdrop {
-  box-shadow: none;
-}
-
-leaflet headerbar {
-  border-radius: 0;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-leaflet stack.background {
-  background-color: transparent;
-}
-
-leaflet > box > scrolledwindow > viewport > widget > stack {
-  background-color: #FFFFFF;
-}
-
-.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
-  border-radius: 0;
-  outline: none;
-}
-
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
@@ -6164,3 +6131,84 @@ FIXME this is really an API */
 @define-color BLACK_500 #393634;
 @define-color BLACK_700 #33302F;
 @define-color BLACK_900 #2B2928;
+@define-color blue_1 #99c1f1;
+@define-color blue_2 #62a0ea;
+@define-color blue_3 #3584e4;
+@define-color blue_4 #1c71d8;
+@define-color blue_5 #1a5fb4;
+@define-color green_1 #8ff0a4;
+@define-color green_2 #57e389;
+@define-color green_3 #33d17a;
+@define-color green_4 #2ec27e;
+@define-color green_5 #26a269;
+@define-color yellow_1 #f9f06b;
+@define-color yellow_2 #f8e45c;
+@define-color yellow_3 #f6d32d;
+@define-color yellow_4 #f5c211;
+@define-color yellow_5 #e5a50a;
+@define-color orange_1 #ffbe6f;
+@define-color orange_2 #ffa348;
+@define-color orange_3 #ff7800;
+@define-color orange_4 #e66100;
+@define-color orange_5 #c64600;
+@define-color red_1 #f66151;
+@define-color red_2 #ed333b;
+@define-color red_3 #e01b24;
+@define-color red_4 #c01c28;
+@define-color red_5 #a51d2d;
+@define-color purple_1 #dc8add;
+@define-color purple_2 #c061cb;
+@define-color purple_3 #9141ac;
+@define-color purple_4 #813d9c;
+@define-color purple_5 #613583;
+@define-color brown_1 #cdab8f;
+@define-color brown_2 #b5835a;
+@define-color brown_3 #986a44;
+@define-color brown_4 #865e3c;
+@define-color brown_5 #63452c;
+@define-color light_1 #ffffff;
+@define-color light_2 #f6f5f4;
+@define-color light_3 #deddda;
+@define-color light_4 #c0bfbc;
+@define-color light_5 #9a9996;
+@define-color dark_1 #77767b;
+@define-color dark_2 #5e5c64;
+@define-color dark_3 #3d3846;
+@define-color dark_4 #241f31;
+@define-color dark_5 #000000;
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+@define-color accent_bg_color #1A73E8;
+@define-color accent_fg_color white;
+@define-color accent_color #1A73E8;
+@define-color destructive_bg_color #D93025;
+@define-color destructive_fg_color white;
+@define-color destructive_color #D93025;
+@define-color success_bg_color #0F9D58;
+@define-color success_fg_color white;
+@define-color success_color #0F9D58;
+@define-color warning_bg_color #F4B400;
+@define-color warning_fg_color rgba(0, 0, 0, 0.87);
+@define-color warning_color #F4B400;
+@define-color error_bg_color #D93025;
+@define-color error_fg_color white;
+@define-color error_color #D93025;
+@define-color window_bg_color #F2F2F2;
+@define-color window_fg_color rgba(0, 0, 0, 0.87);
+@define-color view_bg_color #FFFFFF;
+@define-color view_fg_color rgba(0, 0, 0, 0.87);
+@define-color headerbar_bg_color #FFFFFF;
+@define-color headerbar_fg_color rgba(0, 0, 0, 0.87);
+@define-color headerbar_border_color rgba(0, 0, 0, 0.12);
+@define-color headerbar_backdrop_color #FFFFFF;
+@define-color headerbar_shade_color rgba(0, 0, 0, 0.12);
+@define-color card_bg_color #FFFFFF;
+@define-color card_fg_color rgba(0, 0, 0, 0.87);
+@define-color card_shade_color rgba(0, 0, 0, 0.12);
+@define-color dialog_bg_color #FAFAFA;
+@define-color dialog_fg_color rgba(0, 0, 0, 0.87);
+@define-color popover_bg_color #FFFFFF;
+@define-color popover_fg_color rgba(0, 0, 0, 0.87);
+@define-color shade_color rgba(0, 0, 0, 0.12);
+@define-color scrollbar_outline_color rgba(0, 0, 0, 0.12);
diff --git a/src/gtk/4.0/gtk-Light.scss b/src/gtk/4.0/gtk-Light.scss
index 43b24f3..a7a0858 100644
--- a/src/gtk/4.0/gtk-Light.scss
+++ b/src/gtk/4.0/gtk-Light.scss
@@ -8,3 +8,4 @@ $compact: 'false';
 @import '../../_sass/gtk/common-4.0';
 @import '../../_sass/gtk/apps-4.0';
 @import '../../_sass/gtk/colors-public';
+@import '../../_sass/gtk/colors-libadwaita';
diff --git a/src/gtk/4.0/gtk.css b/src/gtk/4.0/gtk.css
index b518465..1a4f799 100644
--- a/src/gtk/4.0/gtk.css
+++ b/src/gtk/4.0/gtk.css
@@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
 
 headerbar {
   transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
   color: white;
   min-height: 48px;
   padding: 0;
   margin: 0;
-  border-radius: 18px 18px 0 0;
   background-color: transparent;
 }
 
@@ -3202,6 +3201,9 @@ progressbar.osd {
   min-width: 6px;
   min-height: 6px;
   background-color: transparent;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
 }
 
 progressbar.osd trough {
@@ -4413,8 +4415,6 @@ colorchooser .popover.osd:backdrop {
  **********************/
 window {
   outline: none;
-  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
 }
 
 window.csd {
@@ -4426,12 +4426,19 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
 }
 
 window.background {
+  box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
   background-color: transparent;
   background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 48px, #F2F2F2 48px, #F2F2F2);
 }
 
 window:backdrop {
-  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
+  transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+window:backdrop.background {
+  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 48px, #F2F2F2 48px, #F2F2F2);
 }
 
 window.ssd {
@@ -4984,6 +4991,18 @@ window.dialog > box > stack > box > box > notebook.frame {
   border-radius: 0;
 }
 
+leaflet {
+  background-color: transparent;
+}
+
+leaflet stack.background {
+  background-color: transparent;
+}
+
+leaflet > box > scrolledwindow > viewport > widget > stack {
+  background-color: #FFFFFF;
+}
+
 .history-view {
   background-color: #FFFFFF;
 }
@@ -5206,14 +5225,6 @@ screenshot-carousel box.frame.view {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar {
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-window.org-gnome-Builder headerbar splitbutton button {
-  border-radius: 12px;
-}
-
 window.org-gnome-Builder headerbar splitbutton notification button {
   margin: 0;
   min-height: 24px;
@@ -5221,21 +5232,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
   padding: 0;
 }
 
-window.org-gnome-Builder headerbar menubutton > button {
-  border-radius: 12px;
-  padding: 6px 9px;
-}
-
-window.org-gnome-Builder headerbar paneltogglebutton button {
-  border-radius: 12px;
-}
-
-popover.background.global-search > arrow, popover.background.global-search > contents {
+popover.background.global-search > arrow,
+popover.background.global-search > contents {
   padding: 0;
 }
 
 panelframeswitcher {
   padding: 6px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+panelframetabbar {
+  border-bottom: none;
 }
 
 .frameheader.header {
@@ -5264,10 +5272,10 @@ panelframeswitcher {
 }
 
 .frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
-  margin: 6px;
+  margin: 3px;
   min-height: 24px;
   min-width: 24px;
-  padding: 3px;
+  padding: 6px;
   border-radius: 12px;
 }
 
@@ -6034,42 +6042,6 @@ tabbox:drop(active) {
   border: none;
 }
 
-leaflet {
-  border-radius: 18px;
-}
-
-leaflet, leaflet:backdrop {
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
-}
-
-leaflet leaflet {
-  border-radius: 0;
-  outline: none;
-  box-shadow: none;
-}
-
-leaflet leaflet, leaflet leaflet:backdrop {
-  box-shadow: none;
-}
-
-leaflet headerbar {
-  border-radius: 0;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
-}
-
-leaflet stack.background {
-  background-color: transparent;
-}
-
-leaflet > box > scrolledwindow > viewport > widget > stack {
-  background-color: #FFFFFF;
-}
-
-.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
-  border-radius: 0;
-  outline: none;
-}
-
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
@@ -6200,3 +6172,84 @@ FIXME this is really an API */
 @define-color BLACK_500 #393634;
 @define-color BLACK_700 #33302F;
 @define-color BLACK_900 #2B2928;
+@define-color blue_1 #99c1f1;
+@define-color blue_2 #62a0ea;
+@define-color blue_3 #3584e4;
+@define-color blue_4 #1c71d8;
+@define-color blue_5 #1a5fb4;
+@define-color green_1 #8ff0a4;
+@define-color green_2 #57e389;
+@define-color green_3 #33d17a;
+@define-color green_4 #2ec27e;
+@define-color green_5 #26a269;
+@define-color yellow_1 #f9f06b;
+@define-color yellow_2 #f8e45c;
+@define-color yellow_3 #f6d32d;
+@define-color yellow_4 #f5c211;
+@define-color yellow_5 #e5a50a;
+@define-color orange_1 #ffbe6f;
+@define-color orange_2 #ffa348;
+@define-color orange_3 #ff7800;
+@define-color orange_4 #e66100;
+@define-color orange_5 #c64600;
+@define-color red_1 #f66151;
+@define-color red_2 #ed333b;
+@define-color red_3 #e01b24;
+@define-color red_4 #c01c28;
+@define-color red_5 #a51d2d;
+@define-color purple_1 #dc8add;
+@define-color purple_2 #c061cb;
+@define-color purple_3 #9141ac;
+@define-color purple_4 #813d9c;
+@define-color purple_5 #613583;
+@define-color brown_1 #cdab8f;
+@define-color brown_2 #b5835a;
+@define-color brown_3 #986a44;
+@define-color brown_4 #865e3c;
+@define-color brown_5 #63452c;
+@define-color light_1 #ffffff;
+@define-color light_2 #f6f5f4;
+@define-color light_3 #deddda;
+@define-color light_4 #c0bfbc;
+@define-color light_5 #9a9996;
+@define-color dark_1 #77767b;
+@define-color dark_2 #5e5c64;
+@define-color dark_3 #3d3846;
+@define-color dark_4 #241f31;
+@define-color dark_5 #000000;
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+@define-color accent_bg_color #1A73E8;
+@define-color accent_fg_color white;
+@define-color accent_color #1A73E8;
+@define-color destructive_bg_color #D93025;
+@define-color destructive_fg_color white;
+@define-color destructive_color #D93025;
+@define-color success_bg_color #0F9D58;
+@define-color success_fg_color white;
+@define-color success_color #0F9D58;
+@define-color warning_bg_color #F4B400;
+@define-color warning_fg_color rgba(0, 0, 0, 0.87);
+@define-color warning_color #F4B400;
+@define-color error_bg_color #D93025;
+@define-color error_fg_color white;
+@define-color error_color #D93025;
+@define-color window_bg_color #F2F2F2;
+@define-color window_fg_color rgba(0, 0, 0, 0.87);
+@define-color view_bg_color #FFFFFF;
+@define-color view_fg_color rgba(0, 0, 0, 0.87);
+@define-color headerbar_bg_color #2C2C2C;
+@define-color headerbar_fg_color white;
+@define-color headerbar_border_color rgba(0, 0, 0, 0.12);
+@define-color headerbar_backdrop_color #2C2C2C;
+@define-color headerbar_shade_color rgba(0, 0, 0, 0.12);
+@define-color card_bg_color #FFFFFF;
+@define-color card_fg_color rgba(0, 0, 0, 0.87);
+@define-color card_shade_color rgba(0, 0, 0, 0.12);
+@define-color dialog_bg_color #FAFAFA;
+@define-color dialog_fg_color rgba(0, 0, 0, 0.87);
+@define-color popover_bg_color #FFFFFF;
+@define-color popover_fg_color rgba(0, 0, 0, 0.87);
+@define-color shade_color rgba(0, 0, 0, 0.12);
+@define-color scrollbar_outline_color rgba(0, 0, 0, 0.12);
diff --git a/src/gtk/4.0/gtk.scss b/src/gtk/4.0/gtk.scss
index cbfceba..41441e2 100644
--- a/src/gtk/4.0/gtk.scss
+++ b/src/gtk/4.0/gtk.scss
@@ -8,3 +8,4 @@ $compact: 'false';
 @import '../../_sass/gtk/common-4.0';
 @import '../../_sass/gtk/apps-4.0';
 @import '../../_sass/gtk/colors-public';
+@import '../../_sass/gtk/colors-libadwaita';

From b2e2d69a7d673f9925114cabeef286a4db7a8744 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 27 Nov 2022 21:33:39 +0800
Subject: [PATCH 6/7] update

---
 src/_sass/gtk/_common-4.0.scss     |  6 +++---
 src/_sass/gtk/apps/_gnome-4.0.scss | 10 ++++++++++
 src/gtk/4.0/gtk-Compact.css        | 16 ++++++++--------
 src/gtk/4.0/gtk-Dark-Compact.css   | 16 ++++++++--------
 src/gtk/4.0/gtk-Dark.css           | 16 ++++++++--------
 src/gtk/4.0/gtk-Light-Compact.css  | 16 ++++++++--------
 src/gtk/4.0/gtk-Light.css          | 16 ++++++++--------
 src/gtk/4.0/gtk.css                | 16 ++++++++--------
 8 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/src/_sass/gtk/_common-4.0.scss b/src/_sass/gtk/_common-4.0.scss
index c8144a1..a2d5bb0 100644
--- a/src/_sass/gtk/_common-4.0.scss
+++ b/src/_sass/gtk/_common-4.0.scss
@@ -1628,7 +1628,7 @@ menubar {
 
 popover.menu {
   box.inline-buttons {
-    padding: 0 $space-size;
+    padding: 0 $space-size + 8px;
 
     button.image-button.model {
       min-height: $menuitem-size;
@@ -1685,7 +1685,7 @@ popover.menu {
 
   label.title {
     font-weight: bold;
-    padding: 4px ($space-size + 20px); //this will fall apart with font sizing
+    padding: $space-size / 2 ($space-size + 6px) * 2 + $space-size + 2px; //this will fall apart with font sizing
   }
 }
 
@@ -2325,7 +2325,7 @@ radio {
 
   &:not(:hover):focus { box-shadow: inset 0 0 0 9999px transparent; }
 
-  popover modelbutton.flat & {
+  popover modelbutton & {
     margin: 0; // this is a workaround for a menu check/radio size allocation issue
     padding: 0;
 
diff --git a/src/_sass/gtk/apps/_gnome-4.0.scss b/src/_sass/gtk/apps/_gnome-4.0.scss
index 2b1fd93..c100e7d 100644
--- a/src/_sass/gtk/apps/_gnome-4.0.scss
+++ b/src/_sass/gtk/apps/_gnome-4.0.scss
@@ -690,6 +690,16 @@ panelframetabbar {
   }
 }
 
+// panelframe {
+//   tabview > stack {
+//     background-color: $fill;
+//
+//     textview.sourceview.view {
+//       background-color: $fill;
+//     }
+//   }
+// }
+
 panelstatusbar {
   background-color: $background;
 
diff --git a/src/gtk/4.0/gtk-Compact.css b/src/gtk/4.0/gtk-Compact.css
index bc6e7e0..4dc1cb8 100644
--- a/src/gtk/4.0/gtk-Compact.css
+++ b/src/gtk/4.0/gtk-Compact.css
@@ -2051,7 +2051,7 @@ menubar > item popover.menu.background popover.menu.background > contents {
  * Popover Base Menus *
  **********************/
 popover.menu box.inline-buttons {
-  padding: 0 4px;
+  padding: 0 12px;
 }
 
 popover.menu box.inline-buttons button.image-button.model {
@@ -2108,7 +2108,7 @@ popover.menu check.right {
 
 popover.menu label.title {
   font-weight: bold;
-  padding: 4px 24px;
+  padding: 2px 26px;
 }
 
 /************
@@ -2755,32 +2755,32 @@ radio:not(:hover):focus {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat radio {
+popover modelbutton check, popover modelbutton radio {
   margin: 0;
   padding: 0;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:focus, popover modelbutton.flat check:hover, popover modelbutton.flat check:focus:hover, popover modelbutton.flat check:active, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:focus, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:focus:hover, popover modelbutton.flat radio:active, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:focus, popover modelbutton check:hover, popover modelbutton check:focus:hover, popover modelbutton check:active, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:focus, popover modelbutton radio:hover, popover modelbutton radio:focus:hover, popover modelbutton radio:active, popover modelbutton radio:disabled {
   transition: none;
   box-shadow: none;
   background: none;
   border: none;
 }
 
-popover modelbutton.flat check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton.flat radio:not(:checked):not(:indeterminate):not(:disabled) {
+popover modelbutton check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton radio:not(:checked):not(:indeterminate):not(:disabled) {
   color: rgba(0, 0, 0, 0.6);
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:hover, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:hover, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:hover, popover modelbutton radio:disabled {
   box-shadow: none;
 }
 
-popover modelbutton.flat check.left:dir(rtl), popover modelbutton.flat radio.left:dir(rtl) {
+popover modelbutton check.left:dir(rtl), popover modelbutton radio.left:dir(rtl) {
   margin-left: -12px;
   margin-right: -4px;
 }
 
-popover modelbutton.flat check.right:dir(ltr), popover modelbutton.flat radio.right:dir(ltr) {
+popover modelbutton check.right:dir(ltr), popover modelbutton radio.right:dir(ltr) {
   margin-left: -4px;
   margin-right: -12px;
 }
diff --git a/src/gtk/4.0/gtk-Dark-Compact.css b/src/gtk/4.0/gtk-Dark-Compact.css
index 749e438..49851b1 100644
--- a/src/gtk/4.0/gtk-Dark-Compact.css
+++ b/src/gtk/4.0/gtk-Dark-Compact.css
@@ -2051,7 +2051,7 @@ menubar > item popover.menu.background popover.menu.background > contents {
  * Popover Base Menus *
  **********************/
 popover.menu box.inline-buttons {
-  padding: 0 4px;
+  padding: 0 12px;
 }
 
 popover.menu box.inline-buttons button.image-button.model {
@@ -2108,7 +2108,7 @@ popover.menu check.right {
 
 popover.menu label.title {
   font-weight: bold;
-  padding: 4px 24px;
+  padding: 2px 26px;
 }
 
 /************
@@ -2755,32 +2755,32 @@ radio:not(:hover):focus {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat radio {
+popover modelbutton check, popover modelbutton radio {
   margin: 0;
   padding: 0;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:focus, popover modelbutton.flat check:hover, popover modelbutton.flat check:focus:hover, popover modelbutton.flat check:active, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:focus, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:focus:hover, popover modelbutton.flat radio:active, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:focus, popover modelbutton check:hover, popover modelbutton check:focus:hover, popover modelbutton check:active, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:focus, popover modelbutton radio:hover, popover modelbutton radio:focus:hover, popover modelbutton radio:active, popover modelbutton radio:disabled {
   transition: none;
   box-shadow: none;
   background: none;
   border: none;
 }
 
-popover modelbutton.flat check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton.flat radio:not(:checked):not(:indeterminate):not(:disabled) {
+popover modelbutton check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton radio:not(:checked):not(:indeterminate):not(:disabled) {
   color: rgba(255, 255, 255, 0.7);
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:hover, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:hover, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:hover, popover modelbutton radio:disabled {
   box-shadow: none;
 }
 
-popover modelbutton.flat check.left:dir(rtl), popover modelbutton.flat radio.left:dir(rtl) {
+popover modelbutton check.left:dir(rtl), popover modelbutton radio.left:dir(rtl) {
   margin-left: -12px;
   margin-right: -4px;
 }
 
-popover modelbutton.flat check.right:dir(ltr), popover modelbutton.flat radio.right:dir(ltr) {
+popover modelbutton check.right:dir(ltr), popover modelbutton radio.right:dir(ltr) {
   margin-left: -4px;
   margin-right: -12px;
 }
diff --git a/src/gtk/4.0/gtk-Dark.css b/src/gtk/4.0/gtk-Dark.css
index 8ad255a..3edfa04 100644
--- a/src/gtk/4.0/gtk-Dark.css
+++ b/src/gtk/4.0/gtk-Dark.css
@@ -2051,7 +2051,7 @@ menubar > item popover.menu.background popover.menu.background > contents {
  * Popover Base Menus *
  **********************/
 popover.menu box.inline-buttons {
-  padding: 0 6px;
+  padding: 0 14px;
 }
 
 popover.menu box.inline-buttons button.image-button.model {
@@ -2108,7 +2108,7 @@ popover.menu check.right {
 
 popover.menu label.title {
   font-weight: bold;
-  padding: 4px 26px;
+  padding: 3px 32px;
 }
 
 /************
@@ -2755,32 +2755,32 @@ radio:not(:hover):focus {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat radio {
+popover modelbutton check, popover modelbutton radio {
   margin: 0;
   padding: 0;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:focus, popover modelbutton.flat check:hover, popover modelbutton.flat check:focus:hover, popover modelbutton.flat check:active, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:focus, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:focus:hover, popover modelbutton.flat radio:active, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:focus, popover modelbutton check:hover, popover modelbutton check:focus:hover, popover modelbutton check:active, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:focus, popover modelbutton radio:hover, popover modelbutton radio:focus:hover, popover modelbutton radio:active, popover modelbutton radio:disabled {
   transition: none;
   box-shadow: none;
   background: none;
   border: none;
 }
 
-popover modelbutton.flat check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton.flat radio:not(:checked):not(:indeterminate):not(:disabled) {
+popover modelbutton check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton radio:not(:checked):not(:indeterminate):not(:disabled) {
   color: rgba(255, 255, 255, 0.7);
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:hover, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:hover, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:hover, popover modelbutton radio:disabled {
   box-shadow: none;
 }
 
-popover modelbutton.flat check.left:dir(rtl), popover modelbutton.flat radio.left:dir(rtl) {
+popover modelbutton check.left:dir(rtl), popover modelbutton radio.left:dir(rtl) {
   margin-left: -12px;
   margin-right: -4px;
 }
 
-popover modelbutton.flat check.right:dir(ltr), popover modelbutton.flat radio.right:dir(ltr) {
+popover modelbutton check.right:dir(ltr), popover modelbutton radio.right:dir(ltr) {
   margin-left: -4px;
   margin-right: -12px;
 }
diff --git a/src/gtk/4.0/gtk-Light-Compact.css b/src/gtk/4.0/gtk-Light-Compact.css
index 26a6138..540aadd 100644
--- a/src/gtk/4.0/gtk-Light-Compact.css
+++ b/src/gtk/4.0/gtk-Light-Compact.css
@@ -2051,7 +2051,7 @@ menubar > item popover.menu.background popover.menu.background > contents {
  * Popover Base Menus *
  **********************/
 popover.menu box.inline-buttons {
-  padding: 0 4px;
+  padding: 0 12px;
 }
 
 popover.menu box.inline-buttons button.image-button.model {
@@ -2108,7 +2108,7 @@ popover.menu check.right {
 
 popover.menu label.title {
   font-weight: bold;
-  padding: 4px 24px;
+  padding: 2px 26px;
 }
 
 /************
@@ -2755,32 +2755,32 @@ radio:not(:hover):focus {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat radio {
+popover modelbutton check, popover modelbutton radio {
   margin: 0;
   padding: 0;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:focus, popover modelbutton.flat check:hover, popover modelbutton.flat check:focus:hover, popover modelbutton.flat check:active, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:focus, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:focus:hover, popover modelbutton.flat radio:active, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:focus, popover modelbutton check:hover, popover modelbutton check:focus:hover, popover modelbutton check:active, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:focus, popover modelbutton radio:hover, popover modelbutton radio:focus:hover, popover modelbutton radio:active, popover modelbutton radio:disabled {
   transition: none;
   box-shadow: none;
   background: none;
   border: none;
 }
 
-popover modelbutton.flat check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton.flat radio:not(:checked):not(:indeterminate):not(:disabled) {
+popover modelbutton check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton radio:not(:checked):not(:indeterminate):not(:disabled) {
   color: rgba(0, 0, 0, 0.6);
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:hover, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:hover, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:hover, popover modelbutton radio:disabled {
   box-shadow: none;
 }
 
-popover modelbutton.flat check.left:dir(rtl), popover modelbutton.flat radio.left:dir(rtl) {
+popover modelbutton check.left:dir(rtl), popover modelbutton radio.left:dir(rtl) {
   margin-left: -12px;
   margin-right: -4px;
 }
 
-popover modelbutton.flat check.right:dir(ltr), popover modelbutton.flat radio.right:dir(ltr) {
+popover modelbutton check.right:dir(ltr), popover modelbutton radio.right:dir(ltr) {
   margin-left: -4px;
   margin-right: -12px;
 }
diff --git a/src/gtk/4.0/gtk-Light.css b/src/gtk/4.0/gtk-Light.css
index a33fb96..6820b98 100644
--- a/src/gtk/4.0/gtk-Light.css
+++ b/src/gtk/4.0/gtk-Light.css
@@ -2051,7 +2051,7 @@ menubar > item popover.menu.background popover.menu.background > contents {
  * Popover Base Menus *
  **********************/
 popover.menu box.inline-buttons {
-  padding: 0 6px;
+  padding: 0 14px;
 }
 
 popover.menu box.inline-buttons button.image-button.model {
@@ -2108,7 +2108,7 @@ popover.menu check.right {
 
 popover.menu label.title {
   font-weight: bold;
-  padding: 4px 26px;
+  padding: 3px 32px;
 }
 
 /************
@@ -2755,32 +2755,32 @@ radio:not(:hover):focus {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat radio {
+popover modelbutton check, popover modelbutton radio {
   margin: 0;
   padding: 0;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:focus, popover modelbutton.flat check:hover, popover modelbutton.flat check:focus:hover, popover modelbutton.flat check:active, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:focus, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:focus:hover, popover modelbutton.flat radio:active, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:focus, popover modelbutton check:hover, popover modelbutton check:focus:hover, popover modelbutton check:active, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:focus, popover modelbutton radio:hover, popover modelbutton radio:focus:hover, popover modelbutton radio:active, popover modelbutton radio:disabled {
   transition: none;
   box-shadow: none;
   background: none;
   border: none;
 }
 
-popover modelbutton.flat check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton.flat radio:not(:checked):not(:indeterminate):not(:disabled) {
+popover modelbutton check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton radio:not(:checked):not(:indeterminate):not(:disabled) {
   color: rgba(0, 0, 0, 0.6);
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:hover, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:hover, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:hover, popover modelbutton radio:disabled {
   box-shadow: none;
 }
 
-popover modelbutton.flat check.left:dir(rtl), popover modelbutton.flat radio.left:dir(rtl) {
+popover modelbutton check.left:dir(rtl), popover modelbutton radio.left:dir(rtl) {
   margin-left: -12px;
   margin-right: -4px;
 }
 
-popover modelbutton.flat check.right:dir(ltr), popover modelbutton.flat radio.right:dir(ltr) {
+popover modelbutton check.right:dir(ltr), popover modelbutton radio.right:dir(ltr) {
   margin-left: -4px;
   margin-right: -12px;
 }
diff --git a/src/gtk/4.0/gtk.css b/src/gtk/4.0/gtk.css
index 1a4f799..eec8b0e 100644
--- a/src/gtk/4.0/gtk.css
+++ b/src/gtk/4.0/gtk.css
@@ -2051,7 +2051,7 @@ menubar > item popover.menu.background popover.menu.background > contents {
  * Popover Base Menus *
  **********************/
 popover.menu box.inline-buttons {
-  padding: 0 6px;
+  padding: 0 14px;
 }
 
 popover.menu box.inline-buttons button.image-button.model {
@@ -2108,7 +2108,7 @@ popover.menu check.right {
 
 popover.menu label.title {
   font-weight: bold;
-  padding: 4px 26px;
+  padding: 3px 32px;
 }
 
 /************
@@ -2755,32 +2755,32 @@ radio:not(:hover):focus {
   box-shadow: inset 0 0 0 9999px transparent;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat radio {
+popover modelbutton check, popover modelbutton radio {
   margin: 0;
   padding: 0;
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:focus, popover modelbutton.flat check:hover, popover modelbutton.flat check:focus:hover, popover modelbutton.flat check:active, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:focus, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:focus:hover, popover modelbutton.flat radio:active, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:focus, popover modelbutton check:hover, popover modelbutton check:focus:hover, popover modelbutton check:active, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:focus, popover modelbutton radio:hover, popover modelbutton radio:focus:hover, popover modelbutton radio:active, popover modelbutton radio:disabled {
   transition: none;
   box-shadow: none;
   background: none;
   border: none;
 }
 
-popover modelbutton.flat check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton.flat radio:not(:checked):not(:indeterminate):not(:disabled) {
+popover modelbutton check:not(:checked):not(:indeterminate):not(:disabled), popover modelbutton radio:not(:checked):not(:indeterminate):not(:disabled) {
   color: rgba(0, 0, 0, 0.6);
 }
 
-popover modelbutton.flat check, popover modelbutton.flat check:hover, popover modelbutton.flat check:disabled, popover modelbutton.flat radio, popover modelbutton.flat radio:hover, popover modelbutton.flat radio:disabled {
+popover modelbutton check, popover modelbutton check:hover, popover modelbutton check:disabled, popover modelbutton radio, popover modelbutton radio:hover, popover modelbutton radio:disabled {
   box-shadow: none;
 }
 
-popover modelbutton.flat check.left:dir(rtl), popover modelbutton.flat radio.left:dir(rtl) {
+popover modelbutton check.left:dir(rtl), popover modelbutton radio.left:dir(rtl) {
   margin-left: -12px;
   margin-right: -4px;
 }
 
-popover modelbutton.flat check.right:dir(ltr), popover modelbutton.flat radio.right:dir(ltr) {
+popover modelbutton check.right:dir(ltr), popover modelbutton radio.right:dir(ltr) {
   margin-left: -4px;
   margin-right: -12px;
 }

From fdefaf61499c971da070212bd68fd775b6cc1393 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 27 Nov 2022 22:16:40 +0800
Subject: [PATCH 7/7] update

---
 src/_sass/gtk/_common-4.0.scss    | 52 ++++++++++++++++++-------------
 src/gtk/4.0/gtk-Compact.css       | 45 +++++++++++++++-----------
 src/gtk/4.0/gtk-Dark-Compact.css  | 45 +++++++++++++++-----------
 src/gtk/4.0/gtk-Dark.css          | 45 +++++++++++++++-----------
 src/gtk/4.0/gtk-Light-Compact.css | 45 +++++++++++++++-----------
 src/gtk/4.0/gtk-Light.css         | 45 +++++++++++++++-----------
 src/gtk/4.0/gtk.css               | 45 +++++++++++++++-----------
 7 files changed, 193 insertions(+), 129 deletions(-)

diff --git a/src/_sass/gtk/_common-4.0.scss b/src/_sass/gtk/_common-4.0.scss
index a2d5bb0..b58bbc0 100644
--- a/src/_sass/gtk/_common-4.0.scss
+++ b/src/_sass/gtk/_common-4.0.scss
@@ -852,16 +852,8 @@ combobox {
 
   // align menu labels with the button label
   > popover.menu {
-    margin-top: $space-size - 2px;
-
-    > contents {
-      padding: $space-size;
-
-      modelbutton {
-        padding-left: $space-size * 1.5;
-        padding-right: $space-size * 1.5;
-      }
-    }
+    margin-top: $space-size;
+    padding: 0;
   }
 
   button.combo cellview {
@@ -1041,7 +1033,10 @@ searchbar > revealer > box {
   background-clip: border-box;
   box-shadow: none;
 
-  entry { margin: 0; }
+  entry,
+  button,
+  menubutton,
+  splitbutton { margin: 0; }
 }
 
 /***************
@@ -1240,12 +1235,16 @@ headerbar {
       border-radius: $circular-radius;
       color: $titlebar-text-secondary;
 
-      &:focus, &:hover, &:active, &:checked { color: $titlebar-text; }
+      &:focus, &:hover, &:active { color: $titlebar-text; }
 
       &:disabled { color: $titlebar-text-secondary-disabled; }
 
-      &:checked:disabled {
-        color: on($primary, disabled);
+      &:checked {
+        color: on($primary);
+
+        &:disabled {
+          color: on($primary, disabled);
+        }
       }
 
       &:backdrop {
@@ -1696,6 +1695,7 @@ popover.menu {
 
 popover.background {
   font: initial;
+  padding: 0;
 
   &, &:backdrop {
     background-color: transparent;
@@ -1737,7 +1737,13 @@ popover.background {
       margin: $space-size / 2 0;
     }
 
-    list separator { margin: 0; }
+    list {
+      > row {
+        padding: $space-size $space-size * 2;
+      }
+
+      separator { margin: 0; }
+    }
   }
 
   // FIXME: Use the popover color instead of transparent as a workaround for .view
@@ -2858,6 +2864,11 @@ actionbar > revealer > box {
   background-color: $base;
   background-clip: border-box;
   box-shadow: none;
+
+  entry,
+  button,
+  menubutton,
+  splitbutton { margin: 0; }
 }
 
 statusbar {
@@ -2936,7 +2947,6 @@ list {
   color: $text-secondary;
 
   > row {
-    padding: 2px;
     background-clip: padding-box;
   }
 
@@ -2998,12 +3008,13 @@ row {
     @extend %button-flat-simple;
   }
 
-  button & {
-    &, &:hover, &.has-open-popup, &:active {
+  button &.activatable {
+    &, &:hover, &.has-open-popup, &:active, &:active:hover {
       background-color: transparent;
       box-shadow: none;
       background-image: none;
       transition: none;
+      animation: none;
     }
   }
 
@@ -3207,7 +3218,6 @@ row.expander {
   }
 
   // AdwExpanderRow arrow rotation
-
   image.expander-row-arrow {
     transition: 200ms $ease-out;
     @include margin-start(6px);
@@ -3221,11 +3231,11 @@ row.expander {
     @extend .dim-label;
 
     &:dir(ltr) {
-      -gtk-icon-transform: rotate(-0.25turn);
+      -gtk-icon-transform: rotate(0.5turn);
     }
 
     &:dir(rtl) {
-      -gtk-icon-transform: rotate(0.25turn);
+      -gtk-icon-transform: rotate(-0.5turn);
     }
   }
 
diff --git a/src/gtk/4.0/gtk-Compact.css b/src/gtk/4.0/gtk-Compact.css
index 4dc1cb8..d133f86 100644
--- a/src/gtk/4.0/gtk-Compact.css
+++ b/src/gtk/4.0/gtk-Compact.css
@@ -1173,18 +1173,8 @@ combobox arrow {
 
 dropdown > popover.menu,
 combobox > popover.menu {
-  margin-top: 2px;
-}
-
-dropdown > popover.menu > contents,
-combobox > popover.menu > contents {
-  padding: 4px;
-}
-
-dropdown > popover.menu > contents modelbutton,
-combobox > popover.menu > contents modelbutton {
-  padding-left: 6px;
-  padding-right: 6px;
+  margin-top: 4px;
+  padding: 0;
 }
 
 dropdown button.combo cellview:dir(ltr),
@@ -1408,7 +1398,10 @@ searchbar > revealer > box {
   box-shadow: none;
 }
 
-searchbar > revealer > box entry {
+searchbar > revealer > box entry,
+searchbar > revealer > box button,
+searchbar > revealer > box menubutton,
+searchbar > revealer > box splitbutton {
   margin: 0;
 }
 
@@ -1619,7 +1612,7 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(255, 255, 255, 0.7);
 }
 
-headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active {
   color: white;
 }
 
@@ -1627,6 +1620,10 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(255, 255, 255, 0.3);
 }
 
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
@@ -2116,6 +2113,7 @@ popover.menu label.title {
  ************/
 popover.background {
   font: initial;
+  padding: 0;
 }
 
 popover.background, popover.background:backdrop {
@@ -2155,6 +2153,10 @@ popover.background > contents separator {
   margin: 2px 0;
 }
 
+popover.background > contents list > row {
+  padding: 4px 8px;
+}
+
 popover.background > contents list separator {
   margin: 0;
 }
@@ -3330,6 +3332,13 @@ actionbar > revealer > box {
   box-shadow: none;
 }
 
+actionbar > revealer > box entry,
+actionbar > revealer > box button,
+actionbar > revealer > box menubutton,
+actionbar > revealer > box splitbutton {
+  margin: 0;
+}
+
 statusbar {
   padding: 4px 12px;
 }
@@ -3425,7 +3434,6 @@ list {
 
 listview > row,
 list > row {
-  padding: 2px;
   background-clip: padding-box;
 }
 
@@ -3491,11 +3499,12 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button row, button row:hover, button row.has-open-popup, button row:active {
+button row.activatable, button row.activatable:hover, button row.activatable.has-open-popup, button row.activatable:active, button row.activatable:active:hover {
   background-color: transparent;
   box-shadow: none;
   background-image: none;
   transition: none;
+  animation: none;
 }
 
 button:checked row {
@@ -3689,11 +3698,11 @@ row.expander:checked image.expander-row-arrow {
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
-  -gtk-icon-transform: rotate(-0.25turn);
+  -gtk-icon-transform: rotate(0.5turn);
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
-  -gtk-icon-transform: rotate(0.25turn);
+  -gtk-icon-transform: rotate(-0.5turn);
 }
 
 row.expander:checked image.expander-row-arrow:not(:disabled) {
diff --git a/src/gtk/4.0/gtk-Dark-Compact.css b/src/gtk/4.0/gtk-Dark-Compact.css
index 49851b1..f1ca101 100644
--- a/src/gtk/4.0/gtk-Dark-Compact.css
+++ b/src/gtk/4.0/gtk-Dark-Compact.css
@@ -1173,18 +1173,8 @@ combobox arrow {
 
 dropdown > popover.menu,
 combobox > popover.menu {
-  margin-top: 2px;
-}
-
-dropdown > popover.menu > contents,
-combobox > popover.menu > contents {
-  padding: 4px;
-}
-
-dropdown > popover.menu > contents modelbutton,
-combobox > popover.menu > contents modelbutton {
-  padding-left: 6px;
-  padding-right: 6px;
+  margin-top: 4px;
+  padding: 0;
 }
 
 dropdown button.combo cellview:dir(ltr),
@@ -1408,7 +1398,10 @@ searchbar > revealer > box {
   box-shadow: none;
 }
 
-searchbar > revealer > box entry {
+searchbar > revealer > box entry,
+searchbar > revealer > box button,
+searchbar > revealer > box menubutton,
+searchbar > revealer > box splitbutton {
   margin: 0;
 }
 
@@ -1619,7 +1612,7 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(255, 255, 255, 0.7);
 }
 
-headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active {
   color: white;
 }
 
@@ -1627,6 +1620,10 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(255, 255, 255, 0.3);
 }
 
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
@@ -2116,6 +2113,7 @@ popover.menu label.title {
  ************/
 popover.background {
   font: initial;
+  padding: 0;
 }
 
 popover.background, popover.background:backdrop {
@@ -2155,6 +2153,10 @@ popover.background > contents separator {
   margin: 2px 0;
 }
 
+popover.background > contents list > row {
+  padding: 4px 8px;
+}
+
 popover.background > contents list separator {
   margin: 0;
 }
@@ -3330,6 +3332,13 @@ actionbar > revealer > box {
   box-shadow: none;
 }
 
+actionbar > revealer > box entry,
+actionbar > revealer > box button,
+actionbar > revealer > box menubutton,
+actionbar > revealer > box splitbutton {
+  margin: 0;
+}
+
 statusbar {
   padding: 4px 12px;
 }
@@ -3425,7 +3434,6 @@ list {
 
 listview > row,
 list > row {
-  padding: 2px;
   background-clip: padding-box;
 }
 
@@ -3491,11 +3499,12 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button row, button row:hover, button row.has-open-popup, button row:active {
+button row.activatable, button row.activatable:hover, button row.activatable.has-open-popup, button row.activatable:active, button row.activatable:active:hover {
   background-color: transparent;
   box-shadow: none;
   background-image: none;
   transition: none;
+  animation: none;
 }
 
 button:checked row {
@@ -3689,11 +3698,11 @@ row.expander:checked image.expander-row-arrow {
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
-  -gtk-icon-transform: rotate(-0.25turn);
+  -gtk-icon-transform: rotate(0.5turn);
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
-  -gtk-icon-transform: rotate(0.25turn);
+  -gtk-icon-transform: rotate(-0.5turn);
 }
 
 row.expander:checked image.expander-row-arrow:not(:disabled) {
diff --git a/src/gtk/4.0/gtk-Dark.css b/src/gtk/4.0/gtk-Dark.css
index 3edfa04..f0fd667 100644
--- a/src/gtk/4.0/gtk-Dark.css
+++ b/src/gtk/4.0/gtk-Dark.css
@@ -1173,18 +1173,8 @@ combobox arrow {
 
 dropdown > popover.menu,
 combobox > popover.menu {
-  margin-top: 4px;
-}
-
-dropdown > popover.menu > contents,
-combobox > popover.menu > contents {
-  padding: 6px;
-}
-
-dropdown > popover.menu > contents modelbutton,
-combobox > popover.menu > contents modelbutton {
-  padding-left: 9px;
-  padding-right: 9px;
+  margin-top: 6px;
+  padding: 0;
 }
 
 dropdown button.combo cellview:dir(ltr),
@@ -1408,7 +1398,10 @@ searchbar > revealer > box {
   box-shadow: none;
 }
 
-searchbar > revealer > box entry {
+searchbar > revealer > box entry,
+searchbar > revealer > box button,
+searchbar > revealer > box menubutton,
+searchbar > revealer > box splitbutton {
   margin: 0;
 }
 
@@ -1619,7 +1612,7 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(255, 255, 255, 0.7);
 }
 
-headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active {
   color: white;
 }
 
@@ -1627,6 +1620,10 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(255, 255, 255, 0.3);
 }
 
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
@@ -2116,6 +2113,7 @@ popover.menu label.title {
  ************/
 popover.background {
   font: initial;
+  padding: 0;
 }
 
 popover.background, popover.background:backdrop {
@@ -2155,6 +2153,10 @@ popover.background > contents separator {
   margin: 3px 0;
 }
 
+popover.background > contents list > row {
+  padding: 6px 12px;
+}
+
 popover.background > contents list separator {
   margin: 0;
 }
@@ -3330,6 +3332,13 @@ actionbar > revealer > box {
   box-shadow: none;
 }
 
+actionbar > revealer > box entry,
+actionbar > revealer > box button,
+actionbar > revealer > box menubutton,
+actionbar > revealer > box splitbutton {
+  margin: 0;
+}
+
 statusbar {
   padding: 6px 18px;
 }
@@ -3425,7 +3434,6 @@ list {
 
 listview > row,
 list > row {
-  padding: 2px;
   background-clip: padding-box;
 }
 
@@ -3491,11 +3499,12 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button row, button row:hover, button row.has-open-popup, button row:active {
+button row.activatable, button row.activatable:hover, button row.activatable.has-open-popup, button row.activatable:active, button row.activatable:active:hover {
   background-color: transparent;
   box-shadow: none;
   background-image: none;
   transition: none;
+  animation: none;
 }
 
 button:checked row {
@@ -3689,11 +3698,11 @@ row.expander:checked image.expander-row-arrow {
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
-  -gtk-icon-transform: rotate(-0.25turn);
+  -gtk-icon-transform: rotate(0.5turn);
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
-  -gtk-icon-transform: rotate(0.25turn);
+  -gtk-icon-transform: rotate(-0.5turn);
 }
 
 row.expander:checked image.expander-row-arrow:not(:disabled) {
diff --git a/src/gtk/4.0/gtk-Light-Compact.css b/src/gtk/4.0/gtk-Light-Compact.css
index 540aadd..304f2af 100644
--- a/src/gtk/4.0/gtk-Light-Compact.css
+++ b/src/gtk/4.0/gtk-Light-Compact.css
@@ -1173,18 +1173,8 @@ combobox arrow {
 
 dropdown > popover.menu,
 combobox > popover.menu {
-  margin-top: 2px;
-}
-
-dropdown > popover.menu > contents,
-combobox > popover.menu > contents {
-  padding: 4px;
-}
-
-dropdown > popover.menu > contents modelbutton,
-combobox > popover.menu > contents modelbutton {
-  padding-left: 6px;
-  padding-right: 6px;
+  margin-top: 4px;
+  padding: 0;
 }
 
 dropdown button.combo cellview:dir(ltr),
@@ -1408,7 +1398,10 @@ searchbar > revealer > box {
   box-shadow: none;
 }
 
-searchbar > revealer > box entry {
+searchbar > revealer > box entry,
+searchbar > revealer > box button,
+searchbar > revealer > box menubutton,
+searchbar > revealer > box splitbutton {
   margin: 0;
 }
 
@@ -1619,7 +1612,7 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(0, 0, 0, 0.6);
 }
 
-headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active {
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -1627,6 +1620,10 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(0, 0, 0, 0.26);
 }
 
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
@@ -2116,6 +2113,7 @@ popover.menu label.title {
  ************/
 popover.background {
   font: initial;
+  padding: 0;
 }
 
 popover.background, popover.background:backdrop {
@@ -2155,6 +2153,10 @@ popover.background > contents separator {
   margin: 2px 0;
 }
 
+popover.background > contents list > row {
+  padding: 4px 8px;
+}
+
 popover.background > contents list separator {
   margin: 0;
 }
@@ -3330,6 +3332,13 @@ actionbar > revealer > box {
   box-shadow: none;
 }
 
+actionbar > revealer > box entry,
+actionbar > revealer > box button,
+actionbar > revealer > box menubutton,
+actionbar > revealer > box splitbutton {
+  margin: 0;
+}
+
 statusbar {
   padding: 4px 12px;
 }
@@ -3425,7 +3434,6 @@ list {
 
 listview > row,
 list > row {
-  padding: 2px;
   background-clip: padding-box;
 }
 
@@ -3491,11 +3499,12 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button row, button row:hover, button row.has-open-popup, button row:active {
+button row.activatable, button row.activatable:hover, button row.activatable.has-open-popup, button row.activatable:active, button row.activatable:active:hover {
   background-color: transparent;
   box-shadow: none;
   background-image: none;
   transition: none;
+  animation: none;
 }
 
 button:checked row {
@@ -3689,11 +3698,11 @@ row.expander:checked image.expander-row-arrow {
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
-  -gtk-icon-transform: rotate(-0.25turn);
+  -gtk-icon-transform: rotate(0.5turn);
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
-  -gtk-icon-transform: rotate(0.25turn);
+  -gtk-icon-transform: rotate(-0.5turn);
 }
 
 row.expander:checked image.expander-row-arrow:not(:disabled) {
diff --git a/src/gtk/4.0/gtk-Light.css b/src/gtk/4.0/gtk-Light.css
index 6820b98..96a5e47 100644
--- a/src/gtk/4.0/gtk-Light.css
+++ b/src/gtk/4.0/gtk-Light.css
@@ -1173,18 +1173,8 @@ combobox arrow {
 
 dropdown > popover.menu,
 combobox > popover.menu {
-  margin-top: 4px;
-}
-
-dropdown > popover.menu > contents,
-combobox > popover.menu > contents {
-  padding: 6px;
-}
-
-dropdown > popover.menu > contents modelbutton,
-combobox > popover.menu > contents modelbutton {
-  padding-left: 9px;
-  padding-right: 9px;
+  margin-top: 6px;
+  padding: 0;
 }
 
 dropdown button.combo cellview:dir(ltr),
@@ -1408,7 +1398,10 @@ searchbar > revealer > box {
   box-shadow: none;
 }
 
-searchbar > revealer > box entry {
+searchbar > revealer > box entry,
+searchbar > revealer > box button,
+searchbar > revealer > box menubutton,
+searchbar > revealer > box splitbutton {
   margin: 0;
 }
 
@@ -1619,7 +1612,7 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(0, 0, 0, 0.6);
 }
 
-headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active {
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -1627,6 +1620,10 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(0, 0, 0, 0.26);
 }
 
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
@@ -2116,6 +2113,7 @@ popover.menu label.title {
  ************/
 popover.background {
   font: initial;
+  padding: 0;
 }
 
 popover.background, popover.background:backdrop {
@@ -2155,6 +2153,10 @@ popover.background > contents separator {
   margin: 3px 0;
 }
 
+popover.background > contents list > row {
+  padding: 6px 12px;
+}
+
 popover.background > contents list separator {
   margin: 0;
 }
@@ -3330,6 +3332,13 @@ actionbar > revealer > box {
   box-shadow: none;
 }
 
+actionbar > revealer > box entry,
+actionbar > revealer > box button,
+actionbar > revealer > box menubutton,
+actionbar > revealer > box splitbutton {
+  margin: 0;
+}
+
 statusbar {
   padding: 6px 18px;
 }
@@ -3425,7 +3434,6 @@ list {
 
 listview > row,
 list > row {
-  padding: 2px;
   background-clip: padding-box;
 }
 
@@ -3491,11 +3499,12 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button row, button row:hover, button row.has-open-popup, button row:active {
+button row.activatable, button row.activatable:hover, button row.activatable.has-open-popup, button row.activatable:active, button row.activatable:active:hover {
   background-color: transparent;
   box-shadow: none;
   background-image: none;
   transition: none;
+  animation: none;
 }
 
 button:checked row {
@@ -3689,11 +3698,11 @@ row.expander:checked image.expander-row-arrow {
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
-  -gtk-icon-transform: rotate(-0.25turn);
+  -gtk-icon-transform: rotate(0.5turn);
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
-  -gtk-icon-transform: rotate(0.25turn);
+  -gtk-icon-transform: rotate(-0.5turn);
 }
 
 row.expander:checked image.expander-row-arrow:not(:disabled) {
diff --git a/src/gtk/4.0/gtk.css b/src/gtk/4.0/gtk.css
index eec8b0e..6f68bf7 100644
--- a/src/gtk/4.0/gtk.css
+++ b/src/gtk/4.0/gtk.css
@@ -1173,18 +1173,8 @@ combobox arrow {
 
 dropdown > popover.menu,
 combobox > popover.menu {
-  margin-top: 4px;
-}
-
-dropdown > popover.menu > contents,
-combobox > popover.menu > contents {
-  padding: 6px;
-}
-
-dropdown > popover.menu > contents modelbutton,
-combobox > popover.menu > contents modelbutton {
-  padding-left: 9px;
-  padding-right: 9px;
+  margin-top: 6px;
+  padding: 0;
 }
 
 dropdown button.combo cellview:dir(ltr),
@@ -1408,7 +1398,10 @@ searchbar > revealer > box {
   box-shadow: none;
 }
 
-searchbar > revealer > box entry {
+searchbar > revealer > box entry,
+searchbar > revealer > box button,
+searchbar > revealer > box menubutton,
+searchbar > revealer > box splitbutton {
   margin: 0;
 }
 
@@ -1619,7 +1612,7 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(255, 255, 255, 0.7);
 }
 
-headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:focus, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:hover, headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:active {
   color: white;
 }
 
@@ -1627,6 +1620,10 @@ headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):no
   color: rgba(255, 255, 255, 0.3);
 }
 
+headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked {
+  color: white;
+}
+
 headerbar stackswitcher.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
@@ -2116,6 +2113,7 @@ popover.menu label.title {
  ************/
 popover.background {
   font: initial;
+  padding: 0;
 }
 
 popover.background, popover.background:backdrop {
@@ -2155,6 +2153,10 @@ popover.background > contents separator {
   margin: 3px 0;
 }
 
+popover.background > contents list > row {
+  padding: 6px 12px;
+}
+
 popover.background > contents list separator {
   margin: 0;
 }
@@ -3330,6 +3332,13 @@ actionbar > revealer > box {
   box-shadow: none;
 }
 
+actionbar > revealer > box entry,
+actionbar > revealer > box button,
+actionbar > revealer > box menubutton,
+actionbar > revealer > box splitbutton {
+  margin: 0;
+}
+
 statusbar {
   padding: 6px 18px;
 }
@@ -3425,7 +3434,6 @@ list {
 
 listview > row,
 list > row {
-  padding: 2px;
   background-clip: padding-box;
 }
 
@@ -3491,11 +3499,12 @@ treeview.view > header > button:active, row.activatable.has-open-popup, row.acti
   background-size: 100% 100%;
 }
 
-button row, button row:hover, button row.has-open-popup, button row:active {
+button row.activatable, button row.activatable:hover, button row.activatable.has-open-popup, button row.activatable:active, button row.activatable:active:hover {
   background-color: transparent;
   box-shadow: none;
   background-image: none;
   transition: none;
+  animation: none;
 }
 
 button:checked row {
@@ -3689,11 +3698,11 @@ row.expander:checked image.expander-row-arrow {
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
-  -gtk-icon-transform: rotate(-0.25turn);
+  -gtk-icon-transform: rotate(0.5turn);
 }
 
 row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
-  -gtk-icon-transform: rotate(0.25turn);
+  -gtk-icon-transform: rotate(-0.5turn);
 }
 
 row.expander:checked image.expander-row-arrow:not(:disabled) {