From 88ef6b7bcc305ac984d0a0138abbd78ff519dc5f Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 24 Apr 2022 20:34:59 +0800
Subject: [PATCH] Fixed libadwaita issues

---
 install.sh                                    |   15 +-
 src/_sass/_colors.scss                        |    4 +-
 src/_sass/gtk/_apps-4.0.scss                  |  143 ++
 src/_sass/gtk/_common-4.0.scss                | 1301 +++++++++----
 src/_sass/gtk/_drawing-4.0.scss               |    2 +
 src/cinnamon/cinnamon-dark.css                |   12 +-
 src/cinnamon/cinnamon-light.css               |   12 +-
 src/cinnamon/cinnamon.css                     |   12 +-
 .../shell-3-28/gnome-shell-dark.css           |   18 +-
 .../shell-3-28/gnome-shell-light.css          |    8 +-
 src/gnome-shell/shell-3-28/gnome-shell.css    |    8 +-
 .../shell-40-0/gnome-shell-dark.css           |   18 +-
 .../shell-40-0/gnome-shell-light.css          |    8 +-
 src/gnome-shell/shell-40-0/gnome-shell.css    |    8 +-
 .../shell-42-0/gnome-shell-dark.css           |   18 +-
 .../shell-42-0/gnome-shell-light.css          |    8 +-
 src/gnome-shell/shell-42-0/gnome-shell.css    |    8 +-
 src/gtk/3.0/gtk-dark.css                      |  180 +-
 src/gtk/3.0/gtk-light.css                     |  180 +-
 src/gtk/3.0/gtk.css                           |  180 +-
 src/gtk/4.0/gtk-dark.css                      | 1668 +++++++++++-----
 src/gtk/4.0/gtk-light.css                     | 1678 +++++++++++-----
 src/gtk/4.0/gtk.css                           | 1680 ++++++++++++-----
 23 files changed, 5056 insertions(+), 2113 deletions(-)

diff --git a/install.sh b/install.sh
index 92faeb3e..d0fd47b1 100755
--- a/install.sh
+++ b/install.sh
@@ -120,13 +120,9 @@ install() {
 
   if [[ ${tweaks} == 'true' ]]; then
     sassc $SASSC_OPT ${SRC_DIR}/gtk/3.0/gtk${color}.scss                                ${THEME_DIR}/gtk-3.0/gtk.css
-
-    [[ ${color} != '-dark' ]] && \
     sassc $SASSC_OPT ${SRC_DIR}/gtk/3.0/gtk-dark.scss                                   ${THEME_DIR}/gtk-3.0/gtk-dark.css
   else
     cp -r ${SRC_DIR}/gtk/3.0/gtk${color}.css                                            ${THEME_DIR}/gtk-3.0/gtk.css
-
-    [[ ${color} != '-dark' ]] && \
     cp -r ${SRC_DIR}/gtk/3.0/gtk-dark.css                                               ${THEME_DIR}/gtk-3.0/gtk-dark.css
   fi
 
@@ -148,18 +144,21 @@ install() {
 
   if [[ ${tweaks} == 'true' ]]; then
     sassc $SASSC_OPT ${SRC_DIR}/gtk/4.0/gtk${color}.scss                                ${THEME_DIR}/gtk-4.0/gtk.css
-
-    [[ ${color} != '-dark' ]] && \
     sassc $SASSC_OPT ${SRC_DIR}/gtk/4.0/gtk-dark.scss                                   ${THEME_DIR}/gtk-4.0/gtk-dark.css
   else
     cp -r ${SRC_DIR}/gtk/4.0/gtk${color}.css                                            ${THEME_DIR}/gtk-4.0/gtk.css
-
-    [[ ${color} != '-dark' ]] && \
     cp -r ${SRC_DIR}/gtk/4.0/gtk-dark.css                                               ${THEME_DIR}/gtk-4.0/gtk-dark.css
   fi
 
   cp -r ${SRC_DIR}/gtk/assets/thumbnails/thumbnail${color}${theme}.png                  ${THEME_DIR}/gtk-4.0/thumbnail.png
 
+  # link gtk4.0 for libadwaita
+  mkdir -p                                                                              ${HOME}/.config/gtk-4.0
+  rm -rf ${HOME}/.config/gtk-4.0/{assets,gtk.css,gtk-dark.css}
+  ln -sf ${THEME_DIR}/gtk-4.0/assets                                                    ${HOME}/.config/gtk-4.0/assets
+  ln -sf ${THEME_DIR}/gtk-4.0/gtk.css                                                   ${HOME}/.config/gtk-4.0/gtk.css
+  ln -sf ${THEME_DIR}/gtk-4.0/gtk-dark.css                                              ${HOME}/.config/gtk-4.0/gtk-dark.css
+
   #  Install gnome-shell theme
   mkdir -p                                                                              ${THEME_DIR}/gnome-shell
   cp -r ${SRC_DIR}/gnome-shell/pad-osd.css                                              ${THEME_DIR}/gnome-shell
diff --git a/src/_sass/_colors.scss b/src/_sass/_colors.scss
index f6c6b62d..18bc4775 100644
--- a/src/_sass/_colors.scss
+++ b/src/_sass/_colors.scss
@@ -13,7 +13,7 @@ $osd:                                   themecolor(#222222, $mixstate);
 $panel:                                 if($topbar == 'light', #f2f2f2, themecolor(#202020, $mixstate));
 $header:                                if($topbar == 'light', #eeeeee, themecolor(#363636, $mixstate));
 $menu:                                  if($topbar == 'light', $base, $suface);
-$popover:                               if($variant == 'light', $base, $base);
+$popover:                               if($variant == 'light', $base, $suface);
 
 @if $translucent == 'true' {
   $panel:                              if($topbar == 'light', rgba(white, 0.5), rgba(black, 0.5));
@@ -27,7 +27,7 @@ $indicator:                             indicator();
 // Misc colors
 $frame:                                 if($variant == 'light', rgba(black, 0.12), rgba(black, 0.2));
 $border:                                if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
-$solid-border:                          if($variant == 'light', darken($background, 10%), lighten($background, 12%));
+$solid-border:                          if($variant == 'light', mix(black, $base, 12%), mix(white, $base, 12%));
 $highlight:                             if($topbar == 'light', rgba(white, 0.35), rgba(white, 0.1));
 
 $warning:                               if($variant == 'light', #F4B400, #FDD633);
diff --git a/src/_sass/gtk/_apps-4.0.scss b/src/_sass/gtk/_apps-4.0.scss
index e69de29b..2827b358 100644
--- a/src/_sass/gtk/_apps-4.0.scss
+++ b/src/_sass/gtk/_apps-4.0.scss
@@ -0,0 +1,143 @@
+
+//
+// avatar
+//
+
+avatar {
+  border-radius: $circular_radius;
+  font-weight: bold;
+
+  // The list of colors to generate avatars.
+  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
+  // There are 8 different colors for avtars in the list if you change the number of them you
+  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
+  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
+  $avatarcolorlist: (
+   (#cfe1f5, #83b6ec, #337fdc), // blue
+   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
+   (#cef8d8, #8de6b1, #29ae74), // green
+   (#e6f9d7, #b5e98a, #6ab85b), // lime
+   (#f9f4e1, #f8e359, #d29d09), // yellow
+   (#ffead1, #ffcb62, #d68400), // gold
+   (#ffe5c5, #ffa95a, #ed5b00), // orange
+   (#f8d2ce, #f78773, #e62d42), // raspberry
+   (#fac7de, #e973ab, #e33b6a), // magenta
+   (#e7c2e8, #cb78d4, #9945b5), // purple
+   (#d5d2f5, #9e91e8, #7a59ca), // violet
+   (#f2eade, #e3cf9c, #b08952), // beige
+   (#e5d6ca, #be916d, #785336), // brown
+   (#d8d7d3, #c0bfbc, #6e6d71), // gray
+  );
+
+  @for $i from 1 through length($avatarcolorlist) {
+    &.color#{$i} {
+      $avatarcolor: nth($avatarcolorlist, $i);
+      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
+      color: nth($avatarcolor, 1);
+    }
+  }
+
+  &.contrasted { color: white; }
+
+  &.image { background: none; }
+}
+
+//
+// preferencespage
+//
+
+preferencespage > scrolledwindow > viewport > clamp > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+preferencesgroup > box {
+  &, .labels {
+    border-spacing: $space_size;
+  }
+
+  > box.header:not(.single-line) {
+    margin-bottom: $space_size;
+  }
+
+  > box.single-line {
+    min-height: 34px;
+  }
+}
+
+//
+// AdwStatusPage
+//
+
+statuspage {
+  > scrolledwindow > viewport > box {
+    margin: 36px $space_size * 2;
+    border-spacing: 36px;
+
+    > clamp > box {
+      border-spacing: $space_size * 2;
+
+      > .icon {
+        -gtk-icon-size: 128px;
+
+        color: gtkalpha(currentColor, 0.55);
+
+        &:disabled {
+          opacity: 0.35;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 24px;
+        }
+      }
+    }
+  }
+
+  &.compact > scrolledwindow > viewport > box {
+    margin: 24px 12px;
+    border-spacing: 24px;
+
+    > clamp > box {
+      > .icon {
+        -gtk-icon-size: 96px;
+
+        &:not(:last-child) {
+          margin-bottom: $space_size * 2;
+        }
+      }
+
+      > .title {
+        font-size: 18pt;
+      }
+    }
+  }
+}
+
+// Cards
+
+.card {
+  @at-root %card, & {
+    background-color: $menu;
+    color: $text;
+    border-radius: $menu_radius;
+    box-shadow: 0 0 0 1px transparentize(black, 0.97),
+                0 1px 3px 1px transparentize(black, .93),
+                0 2px 6px 2px transparentize(black, .97);
+
+    .osd &, &.osd {
+      background-color: gtkalpha(currentColor, .1);
+      color: inherit;
+      box-shadow: none;
+    }
+  }
+
+  &.activatable {
+    &:hover {
+      background-image: image(gtkalpha(currentColor, .03));
+    }
+
+    &:active {
+      background-image: image(gtkalpha(currentColor, .08));
+    }
+  }
+}
diff --git a/src/_sass/gtk/_common-4.0.scss b/src/_sass/gtk/_common-4.0.scss
index b31ecf70..8359808e 100644
--- a/src/_sass/gtk/_common-4.0.scss
+++ b/src/_sass/gtk/_common-4.0.scss
@@ -51,16 +51,16 @@ textview {
     > selection { @extend %selected_items; }
   }
 
+  > border {
+    background-color: $base_alt;
+    color: $text-disabled;
+  }
+
   &:drop(active) {
     caret-color: $warning;
   }
 }
 
-textview > border {
-  background-color: $base_alt;
-  color: $text-disabled;
-}
-
 iconview {
   @extend %view;
   &:hover, &:active, &:selected { border-radius: $button_radius; }
@@ -84,12 +84,18 @@ flowbox {
 
   > flowboxchild {
     padding: 4px;
-    border-radius: 2px;
+    border-radius: $button_radius;
 
     &:selected { @extend %selected_items; }
   }
 }
 
+.content-view .tile {
+  &:selected {
+    background-color: transparent;
+  }
+}
+
 gridview {
   > rubberband { @extend rubberband; }
 
@@ -144,7 +150,23 @@ label {
   }
 }
 
-.dim-label { opacity: 0.45; }
+.dim-label { color: $text-secondary; }
+
+.accent {
+  color: $accent;
+}
+
+.success {
+  color: $success;
+}
+
+.warning {
+  color: $warning;
+}
+
+.error {
+  color: $error;
+}
 
 window.assistant {
   .sidebar {
@@ -180,6 +202,31 @@ window.aboutdialog image.large-icons {
   box-shadow: $shadow_4;
 }
 
+//
+// Toasts
+//
+
+toast {
+  margin: $space_size * 2;
+  margin-bottom: $space_size * 4;
+  border-radius: $circular_radius;
+  border-spacing: $space_size;
+  padding: $space_size;
+  box-shadow: $shadow_4, inset 0 1px $highlight;
+  background-color: $popover;
+  color: on($popover);
+  border: none;
+
+  &:dir(ltr) { padding-left: $space_size * 2; }
+  &:dir(rtl) { padding-right: $space_size * 2; }
+
+  > label {
+    margin: 0 $space_size;
+  }
+
+  button { @extend %flat_button; }
+}
+
 //
 // Spinner Animation
 //
@@ -252,39 +299,22 @@ spinner {
   &:disabled { @include entry(flat-disabled); }
 }
 
-%entry_fallback {
-  &, &.flat {
-    @include entry(fallback-normal);
-    &:focus-within { @include entry(fallback-focus); }
-    &:disabled { @include entry(fallback-disabled); }
-  }
-}
-
-%entry_native {
-  .background & {
-    @include entry(normal);
-    &:focus-within { @include entry(focus); }
-    &:disabled { @include entry(disabled); }
-  }
-
-  .background &.flat { @extend %flat_entry; }
-}
-
 entry {
   min-height: $medium_size;
   padding: 0 8px;
+  border-radius: $button_radius;
 
-  // fallback entries for non-native apps
-  @extend %entry_fallback;
+  @include entry(normal);
+  &:focus-within { @include entry(focus); }
+  &:disabled { @include entry(disabled); }
 
-  // standard entries for native Gtk+ apps
-  @extend %entry_native;
+  &.flat { @extend %flat_entry; }
 
   // standard linked-entries for native Gtk+ apps
-  .background .linked > &,
-  .background .linked.vertical > &,
-  .background .linked > &.flat,
-  .background .linked.vertical > &.flat {
+  .linked > &,
+  .linked.vertical > &,
+  .linked > &.flat,
+  .linked.vertical > &.flat {
     @extend %flat_entry;
   }
 
@@ -408,6 +438,7 @@ editablelabel > stack > text {
 //
 // Buttons
 //
+
 // stuff for .needs-attention
 $_dot_color: if($variant=='light', $primary, lighten($primary, 15%));
 @keyframes needs_attention {
@@ -434,22 +465,56 @@ $_dot_color: if($variant=='light', $primary, lighten($primary, 15%));
 }
 
 %combo_flat {
-  border-radius: 0;
   background: none;
   font-weight: normal;
 
+  &,
+  &:first-child,
+  &:last-child,
+  &:only-child { border-radius: 0; }
+
   @include entry(flat-normal);
 
+  &:hover { @include entry(flat-hover); }
+
+  &:checked { @include entry(flat-focus); }
+
+  &:disabled {
+    @include entry(flat-disabled);
+  }
+}
+
+%opaque_button {
+  background-image: image($overlay-normal);
+  color: $text-secondary;
+  box-shadow: none;
+
   &:hover {
-    @include entry(flat-hover);
+    background-image: image($overlay-hover);
+    box-shadow: none;
+    color: $text;
   }
 
-  &:checked {
-    @include entry(flat-focus);
+  &.keyboard-activating,
+  &:active {
+    background-image: image($overlay-active);
+    box-shadow: none;
+    color: $text;
   }
 
-  &:disabled {
-    @include entry(flat-disabled);
+  &:checked {
+    background-image: image($overlay-checked);
+    box-shadow: none;
+    color: $text;
+
+    &:hover {
+      background-image: image($overlay-focus-hover);
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image($overlay-active);
+    }
   }
 }
 
@@ -460,23 +525,13 @@ button {
   border-radius: $button_radius;
   font-weight: 500;
 
-  // fallback buttons for non-native apps
-  @include button(fallback-normal);
-  &:hover { @include button(fallback-hover); }
-  &:active, &:checked { @include button(fallback-active); }
-  &:disabled { @include button(fallback-disabled); }
-  &:checked:disabled { @include button(fallback-checked-disabled); }
-
-  // raised buttons for native Gtk+ apps
-  .background & {
-    @include button(normal);
-    &:hover { @include button(hover); }
-    &:focus { @include button(focus); }
-    &:active { @include button(active); }
-    &:disabled { @include button(disabled); }
-    &:checked { @include button(checked); }
-    &:checked:disabled { @include button(checked-disabled); }
-  }
+  @include button(normal);
+  &:hover { @include button(hover); }
+  &:focus { @include button(focus); }
+  &:active { @include button(active); }
+  &:disabled { @include button(disabled); }
+  &:checked { @include button(checked); }
+  &:checked:disabled { @include button(checked-disabled); }
 
   &.flat {
     @include button(flat-normal);
@@ -487,6 +542,10 @@ button {
     &:checked:disabled { @include button(flat-checked-disabled); }
   }
 
+  &.opaque {
+    @extend %opaque_button;
+  }
+
   &.text-button {
     padding-left: 16px;
     padding-right: 16px;
@@ -498,9 +557,19 @@ button {
     border-radius: $button_radius;
   }
 
-  &.text-button.image-button {
+  &.text-button.image-button, &.image-text-button {
     border-radius: $button_radius;
 
+    > box,
+    > box > box {
+      border-spacing: $space_size - 2px;
+
+      > label {
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+    }
+
     label {
       &:first-child {
         margin-left: 16px - ($medium_size - 24px) / 2;
@@ -525,6 +594,56 @@ button {
     }
   }
 
+  &.arrow-button {
+    padding-left: $space_size * 1.5;
+    padding-right: $space_size * 1.5;
+
+    > box { border-spacing: $space_size - 2px; }
+
+    &.text-button {
+      > box { border-spacing: $space_size - 2px; }
+    }
+  }
+
+  @at-root %pill_button,
+  &.pill {
+    padding: $space_size * 1.5 $space_size * 5;
+    border-radius: $circular_radius;
+  }
+
+  &.card {
+    background-color: $fill;
+    background-clip: padding-box;
+    font-weight: inherit;
+    padding: 0;
+
+    &:hover {
+      background-image: image(gtkalpha(currentColor, 0.03));
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image(gtkalpha(currentColor, 0.08));
+    }
+
+    &:checked {
+      background-color: $fill;
+      background-image: image(gtkalpha(currentColor, 0.1));
+
+      &:hover { background-image: image(gtkalpha(currentColor, 0.13)); }
+
+      &.keyboard-activating,
+      &:active { background-image: image(gtkalpha(currentColor, 0.19)); }
+
+      &.has-open-popup { background-image: image(gtkalpha(currentColor, 0.13)); }
+    }
+
+    &:drop(active) {
+      color: $warning;
+      box-shadow: inset 0 0 0 1px $warning;
+    }
+  }
+
   &.close,
   &.round-button,
   &.circular { // The Bloody Circul Button
@@ -552,12 +671,14 @@ button {
     }
   }
 
-  .background &.combo,
-  .background .linked > &.combo,
-  .background .linked entry + &,
-  .background .linked entry + & + & { @extend %combo_flat; }
+  &.combo,
+  .linked > &.combo,
+  .linked entry + &,
+  .linked entry + &.image-button,
+  .linked entry + &.text-button,
+  .linked entry + menubutton > & { @extend %combo_flat; }
 
-  .background .linked.stack-switcher > & {
+  .linked.stack-switcher > & {
     @extend %flat_button;
     border-radius: 0;
 
@@ -567,7 +688,7 @@ button {
     }
   }
 
-  .background buttonbox.linked > & {
+  buttonbox.linked > & {
     border-radius: $button_radius;
   }
 
@@ -607,7 +728,7 @@ button {
     &.flat { background-color: transparent; }
 
     &, &.flat {
-      color: on($primary, secondary);
+      color: on($osd, secondary);
       box-shadow: none;
 
       &:hover { background-color: rgba(white, 0.1); }
@@ -615,11 +736,11 @@ button {
       &:checked { background-color: rgba(white, 0.15); }
       &:disabled {
         background-color: rgba(white, 0.02);
-        color: on($primary, secondary-disabled);
+        color: on($osd, secondary-disabled);
       }
 
       &:hover, &:active, &:checked, &:focus {
-        color: on($primary);
+        color: on($osd);
         box-shadow: none;
       }
     }
@@ -630,27 +751,27 @@ button {
                              (destructive-action, $destructive) {
     &.#{$b_type} {
       background-color: $b_color;
-      color: on($primary);
+      color: on($b_color);
       box-shadow: $shadow_1;
 
       &:hover {
         @include button(hover, $b_color, on($primary));
         background-color: lighten($b_color, 5%);
-        color: on($primary);
+        color: on($b_color);
       }
 
-      &:disabled { @include button(disabled, $b_color, on($primary)); }
+      &:disabled { @include button(disabled, $b_color, on($b_color)); }
 
-      &:checked { background-color: mix(on($primary), $b_color, percentage(0.3)); }
+      &:checked { background-color: mix(on($b_color), $b_color, percentage(0.3)); }
 
       &.flat {
         background-color: transparent;
         color: $b_color;
-        @include button(flat-normal, $b_color, on($primary));
+        @include button(flat-normal, $b_color, on($b_color));
 
-        &:hover { @include button(flat-hover, $b_color, on($primary)); }
-        &:active, &:checked { @include button(flat-active, $b_color, on($primary)); }
-        &:disabled { @include button(flat-disabled, $b_color, on($primary)); }
+        &:hover { @include button(flat-hover, $b_color, on($b_color)); }
+        &:active, &:checked { @include button(flat-active, $b_color, on($b_color)); }
+        &:disabled { @include button(flat-disabled, $b_color, on($b_color)); }
       }
     }
   }
@@ -722,6 +843,204 @@ toolbutton {
   }
 }
 
+menubutton {
+  &.osd {
+    background: none;
+    color: inherit;
+  }
+
+  &.circular > button { @extend %circular_button; }
+  &.flat > button { @extend %flat_button; }
+  &.pill > button { @extend %pill_button; }
+
+  &.suggested-action {
+    background-color: $suggested;
+    color: on($suggested);
+  }
+
+  &.destructive-action {
+    background-color: $destructive;
+    color: on($destructive);
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    border-radius: $button_radius;
+
+    &.circular, &.pill {
+      border-radius: $circular_radius;
+    }
+
+    > button {
+      @extend %flat_button;
+
+      &, &:checked {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+  }
+
+  &.image-button > button {
+    min-width: 24px;
+    padding-left: $space_size;
+    padding-right: $space_size;
+  }
+
+  arrow {
+    min-height: 16px;
+    min-width: 16px;
+    &.none {
+      -gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
+    }
+    &.down {
+      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    }
+    &.up {
+      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+    }
+    &.left {
+      -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
+    }
+    &.right {
+      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+    }
+  }
+}
+
+splitbutton {
+  border-radius: $button_radius;
+
+  &, & > separator {
+    transition: $shorter_transition;
+    transition-property: background;
+  }
+
+  > separator {
+    margin-top: $space_size;
+    margin-bottom: $space_size;
+    background: none;
+  }
+
+  > menubutton > button {
+    padding-left: $space_size - 2px;
+    padding-right: $space_size - 2px;
+  }
+
+  // Since the inner button doesn't have any style classes on it,
+  // we have to add them manually
+  &.image-button > button {
+    min-width: 24px;
+    padding-left: $space_size;
+    padding-right: $space_size;
+  }
+
+  &.text-button.image-button > button,
+  &.image-text-button > button {
+    padding-left: $space_size * 1.5;
+    padding-right: $space_size * 1.5;
+
+    > box {
+      border-spacing: $space_size;
+    }
+  }
+
+  // Reimplementing linked so we don't blow up css
+  > button:dir(ltr),
+  > menubutton > button:dir(rtl) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: -1px;
+  }
+
+  > button:dir(rtl),
+  > menubutton > button:dir(ltr) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+  }
+
+  @at-root %flat_split_button,
+  &.flat {
+    > separator {
+      background: $border;
+    }
+
+    &:hover,
+    &:active,
+    &:checked {
+      background: gtkalpha(currentColor, 0.07);
+
+      > separator {
+        background: none;
+      }
+    }
+
+    &:focus-within:focus-visible > separator {
+      background: none;
+    }
+
+    > button,
+    > menubutton > button {
+      @extend %flat_button;
+
+      border-radius: $button_radius;
+    }
+  }
+
+  &.suggested-action {
+    background-color: $suggested;
+    color: on($suggested)
+  }
+
+  &.destructive-action {
+    background-color: $destructive;
+    color: on($destructive);
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    > button, > menubutton > button {
+      @extend %opaque_button;
+
+      &, &:checked {
+        color: inherit;
+        background-color: transparent;
+      }
+    }
+
+    > menubutton > button {
+      &:dir(ltr) { box-shadow: inset 1px 0 $border; }
+      &:dir(rtl) { box-shadow: inset -1px 0 $border; }
+    }
+  }
+
+  > menubutton > button > arrow.none {
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+  }
+}
+
+buttoncontent {
+  border-spacing: $space_size;
+
+  > label {
+    font-weight: bold;
+
+    &:dir(ltr) { padding-right: 2px; }
+    &:dir(rtl) { padding-left: 2px; }
+  }
+
+  .arrow-button > box > &,
+  splitbutton > button > & {
+    > label {
+      &:dir(ltr) { padding-right: 0; }
+      &:dir(rtl) { padding-left: 0; }
+    }
+  }
+}
+
 %needs_attention {
   animation: needs_attention $shorter_duration $deceleration_curve forwards;
   background-repeat: no-repeat;
@@ -810,12 +1129,6 @@ modelbutton.flat arrow {
   &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
 }
 
-// oldstyle toolbar buttons
-.toolbar button {
-  margin: 1px;
-  @extend %flat_button;
-}
-
 button.color {
   min-height: $small_size;
   min-width: $small_size;
@@ -887,13 +1200,12 @@ spinbutton {
     // 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_fallback;
 
-    .background &,
-    .background &.flat {
+    &, &.flat {
       @extend %flat_entry;
       transition: $longer_transition;
       border-radius: 0;
+      outline: none;
 
       &, &:focus-within, &:disabled {
         > text {
@@ -902,6 +1214,7 @@ spinbutton {
             background: none;
             border-image: none;
             transition: none;
+            outline: none;
           }
         }
       }
@@ -917,6 +1230,7 @@ spinbutton {
         border-radius: 0;
         box-shadow: none;
         background-color: transparent;
+        outline: none;
       }
     }
 
@@ -965,7 +1279,7 @@ spinbutton {
       min-height: $medium_size;
       min-width: $large_size;
       padding: 0;
-      @extend %entry_fallback;
+      outline: none;
     }
 
     > button {
@@ -1013,44 +1327,16 @@ combobox {
     padding-right: $space_size * 1.5;
   }
 
-  .background & { // unset all properties in combobox node
-    border: unset;
-    border-image: unset;
-    border-radius: unset;
-    background-color: unset;
-    color: unset;
-    box-shadow: unset;
-  }
-
-  // fallback combo-entries for non-native apps
   entry.combo {
-    border-radius: 2px;
-    margin-right: -32px;
-    padding-right: 32px;
-    @include entry(fallback-normal);
-    &:focus { @include entry(fallback-focus); }
-    &:disabled { @include entry(fallback-disabled); }
-  }
-
-  > .linked:not(.vertical) > button:not(:only-child).combo {
-    border: none;
-    border-image: none;
-    box-shadow: none;
-    min-height: 16px;
-    min-width: 16px;
-    margin: 4px;
-    padding: $space_size;
-    @extend %flat_button;
-    @extend %circular_button;
-  }
-
-  // standard combo-entries for native Gtk+ apps
-  .background & entry.combo {
     @include entry(flat-normal);
     &:focus { @include entry(flat-focus); }
     &:disabled { @include entry(flat-disabled); }
   }
 
+  > .linked:not(.vertical) > button.combo {
+    @extend %combo_flat;
+  }
+
   decoration { transition: none; } // workaround for menuitem selection
 
   button.combo cellview {
@@ -1058,19 +1344,6 @@ combobox {
     &:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
   }
 
-  &.linked {
-    button:nth-child(2) {
-      &:dir(ltr) {
-        border-top-right-radius: $button_radius;
-        border-bottom-right-radius: $button_radius;
-      }
-      &:dir(rtl) {
-        border-top-left-radius: $button_radius;
-        border-bottom-left-radius: $button_radius;
-      }
-    }
-  }
-
   &:drop(active) { // FIXME: untested
     box-shadow: none;
   }
@@ -1117,7 +1390,12 @@ toolbar {
   padding: $space_size / 2;
   background-color: $background;
 
-  button { @extend %flat_button; }
+  > separator.spacer { background: none; }
+
+  button {
+    margin: 0 1px;
+    @extend %flat_button;
+  }
 
   // on OSD
   .osd & { background-color: transparent; }
@@ -1126,11 +1404,16 @@ toolbar {
   &.osd {
     padding: $space_size;
     border-radius: 2px;
-    box-shadow: $shadow_2, inset 0 1px $highlight;
-    background-color: $base;
+    box-shadow: $shadow_3, inset 0 1px $highlight;
+    background-color: $osd;
+    color: on($osd);
 
     &:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight; }
 
+    button {
+      @extend %osd_button;
+    }
+
     &.left,
     &.right,
     &.top,
@@ -1217,8 +1500,8 @@ searchbar > revealer > box {
 headerbar {
   transition: background-color $shorter_duration $deceleration_curve,
               color $shorter_duration $deceleration_curve;
-  min-height: $medium_size;
-  padding: 0 $space_size * 2;
+  min-height: $medium-size + $space_size * 2;
+  padding: 0 $space_size;
   box-shadow: $header_shadow;
   background-color: $header;
   color: on($header);
@@ -1230,6 +1513,8 @@ headerbar {
 
   &:disabled { color: on($header, disabled); }
 
+  &:not(.titlebar) { box-shadow: inset 0 1px $highlight, inset 0 -1px $border; }
+
   .title {
     padding: 0 12px;
     font-weight: bold;
@@ -1242,6 +1527,20 @@ headerbar {
     @extend .dim-label;
   }
 
+  box.vertical & {
+    background-color: $header;
+  }
+
+  > windowhandle > box {
+    padding: 0 $space_size / 2;
+
+    &,
+    > box.start,
+    > box.end {
+      border-spacing: $space_size;
+    }
+  }
+
   button:not(.suggested-action):not(.destructive-action) { @extend %header_button; }
 
   button.suggested-action, button.destructive-action {
@@ -1362,8 +1661,9 @@ headerbar {
   // Reset buttons and entris
   .linked > button,
   .linked > entry,
-  .background & .linked entry + button,
-  .background & .linked entry + button + button {
+  .linked entry + button,
+  .linked entry + button.image-button,
+  .linked entry + button.text-button, {
     &, &:hover, &:active, &:checked, &:disabled {
       border-radius: $button_radius;
     }
@@ -1374,14 +1674,6 @@ headerbar {
     > button:not(.suggested-action):not(.destructive-action) { @extend %headerbar_flat_button; }
   }
 
-  > windowhandle > box {
-    &,
-    > box.start,
-    > box.end {
-      border-spacing: $space_size;
-    }
-  }
-
   &.windowhandle {
     viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) {
       margin-top: 0;
@@ -1401,8 +1693,8 @@ headerbar {
 
   // Reset margins for buttons inside menubutton
   menubutton > button {
-    margin-top: 0px;
-    margin-bottom: 0px;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   button:not(.suggested-action):not(.destructive-action) { @extend %header_button; }
@@ -1450,54 +1742,9 @@ headerbar {
   .titlebar > & {
     box-shadow: $header_shadow, inset 0 1px $highlight;
   }
-
-  separator:first-child + &, // tackles the paned container case
-  &:first-child { border-top-left-radius: $button_radius; }
-  &:last-child { border-top-right-radius: $button_radius; }
-
-  stack & { // tackles the stacked headerbars case
-    &:first-child, &:last-child {
-      border-top-left-radius: $button_radius;
-      border-top-right-radius: $button_radius;
-      border: none;
-    }
-  }
-
-  window.tiled &,
-  window.tiled-top &,
-  window.tiled-right &,
-  window.tiled-bottom &,
-  window.tiled-left &,
-  window.maximized &,
-  window.fullscreen &,
-  window.solid-csd & {
-    &,
-    &:first-child,
-    &:last-child,
-    &:only-child {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
 }
 
 .titlebar {
-  &, &.background {
-    border-top-left-radius: $button_radius;
-    border-top-right-radius: $button_radius;
-  }
-
-  .background.tiled &,
-  .background.tiled-top &,
-  .background.tiled-right &,
-  .background.tiled-bottom &,
-  .background.tiled-left &,
-  .background.maximized &,
-  .background.solid-csd & {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
   &.solid-csd headerbar {
     box-shadow: $header_shadow;
   }
@@ -1539,26 +1786,6 @@ headerbar {
   }
 }
 
-window.background > box.vertical > headerbar:not(.titlebar) { // reset headerbar style for not CSD window
-  &, &:backdrop { background-color: $header; }
-  border-radius: 0 0 0 0;
-  box-shadow: none;
-
-  // Fixes split headerbars
-  separator:first-child + &,
-  &:first-child {
-    &, &:backdrop {
-      border-top-left-radius: 0;
-    }
-  }
-
-  &:last-child {
-    &, &:backdrop {
-      border-top-right-radius: 0;
-    }
-  }
-}
-
 %header_separator {
   min-width: 0;
   min-height: 0;
@@ -1616,25 +1843,104 @@ window.devel {
   }
 }
 
+viewswitcher {
+  margin: 0;
+
+  &.wide {
+    border-spacing: $space_size / 2;
+  }
+
+  &.narrow button.toggle {
+    border-radius: 0;
+    margin: 0;
+
+    &:focus-within, &:focus { box-shadow: none; }
+  }
+
+  button.toggle {
+    font-weight: bold;
+    padding: 0;
+
+    > stack > box {
+      &.narrow {
+        font-size: 0.75rem;
+        padding-top: $space_size;
+        padding-bottom: $space_size - 2px;
+        border-spacing: $space_size - 2px;
+
+        > stack > label {
+          padding-left: $space_size;
+          padding-right: $space_size;
+        }
+      }
+
+      &.wide {
+        padding: 2px $space_size * 2;
+        border-spacing: $space_size;
+      }
+    }
+  }
+}
+
+// AdwViewSwitcherBar
+viewswitcherbar actionbar > revealer > box {
+  padding: 0;
+}
+
+// AdwViewSwitcherTitle
+viewswitchertitle viewswitcher {
+  margin-left: $space_size * 2;
+  margin-right: $space_size * 2;
+}
+
+// AdwIndicatorBin
+indicatorbin {
+  > indicator, > mask {
+    min-width: $space_size;
+    min-height: $space_size;
+    border-radius: $circular_radius;
+  }
+
+  > indicator {
+    margin: 1px;
+    background-color: gtkalpha(currentColor, .4);
+
+    > label {
+      font-size: 0.6rem;
+      font-weight: bold;
+      padding: 1px 4px;
+      color: white;
+    }
+  }
+
+  > mask {
+    padding: 1px;
+    background: black;
+  }
+
+  &.needs-attention > indicator {
+    background-color: $primary;
+
+    > label { color: on($primary); }
+  }
+}
+
 //
 // Pathbars
 //
 %pathbar_button,
-.background pathbar > button {
+pathbar > button {
   @extend %flat_button;
-  border-radius: 2px;
+  border-radius: $button_radius;
   padding-left: ($medium_size - 24px) / 2;
   padding-right: ($medium_size - 24px) / 2;
+  margin: 0;
 
-  &:checked {
-    box-shadow: inset 0 -2px $primary;
-
-    &, &:disabled { background-color: transparent; }
-  }
+  &, &:disabled { background-color: $fill; }
 
   &.text-button, &.image-button, & {
-    padding-left: 4px;
-    padding-right: 4px;
+    padding-left: $space_size;
+    padding-right: $space_size;
   }
 
   &.text-button.image-button label {
@@ -1643,18 +1949,18 @@ window.devel {
   }
 
   &.text-button.image-button, & {
-    label:last-child { padding-right: 8px; }
-    label:first-child { padding-left: 8px; }
+    label:last-child { padding-right: $space_size + 2px; }
+    label:first-child { padding-left: $space_size + 2px; }
   }
 
   image {
-    padding-left: 4px;
-    padding-right: 4px;
+    padding-left: $space_size;
+    padding-right: $space_size;
   }
 
   &.slider-button {
-    padding-left: 0;
-    padding-right: 0;
+    padding-left: $space_size / 2;
+    padding-right: $space_size / 2;
   }
 }
 
@@ -1690,13 +1996,19 @@ treeview.view {
 
 
   &.expander {
-    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    min-width: 16px;
+    min-height: 16px;
+    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
 
-    &:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
+    &:dir(rtl) {
+      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
+      -gtk-icon-transform: rotate(90deg);
+    }
 
     color: $text-secondary;
 
     &:hover, &:active { color: $text; }
+    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
     &:disabled { color: $text-secondary-disabled; }
 
     &:selected {
@@ -1764,9 +2076,15 @@ treeview.view {
   acceleditor > label { background-color: $primary; } // see tests/testaccel to test
 }
 
+stack.view treeview.view {
+  min-height: $medium_size;
+}
+
+
 //
 // Menus
 //
+
 menubar {
   padding: 0;
   color: on($header, secondary);
@@ -1811,8 +2129,8 @@ popover.menu {
   & > arrow,
   &.background > contents {
     padding: $space_size;
-    box-shadow: inset 0 1px $highlight, $shadow_4;
-    background-color: $base;
+    box-shadow: $shadow_4;
+    background-color: $menu;
     border: none;
     border-radius: $button_radius;
   }
@@ -1869,6 +2187,7 @@ popover.menu {
     min-width: $item_size * 1.5;
     padding: 0 $space_size * 2;
     border-radius: $button_radius;
+    color: $text-secondary;
 
     &:selected {
       color: $text;
@@ -1890,6 +2209,7 @@ popover.menu {
 //
 // Popovers
 //
+
 %flat_theme_button {
   box-shadow: none;
   background-color: transparent;
@@ -1920,6 +2240,7 @@ popover.menu {
 }
 
 popover.background {
+  color: $text;
   background-color: transparent;
   font: initial; // Decouple the font of popovers from their entry/textview
 
@@ -1928,7 +2249,7 @@ popover.background {
     transition: $shadow_transition;
     padding: 0;
     box-shadow: $shadow_4;
-    background-color: $suface;
+    background-color: $popover;
     border: none;
   }
 
@@ -2006,6 +2327,42 @@ magnifier {
 //
 // Notebooks
 //
+
+%tabs_tab {
+  transition: $shorter_transition;
+  min-height: $small_size;
+  min-width: $small_size;
+  padding: $space_size $space_size * 2;
+  outline-offset: -6px;
+  border-width: 0;         // for reorderable tabs
+  border-color: transparent; //
+  color: $text-secondary;
+  font-weight: 500;
+
+  &:hover {
+    color: $text;
+
+    &.reorderable-page {
+      border-color: $border;
+      background-color: $base_alt;
+    }
+  }
+
+  &:disabled { color: $text-secondary-disabled; }
+
+  &:checked {
+    transition: $shorter_transition;
+    color: $text;
+
+    &:disabled { color: $text-disabled; }
+
+    &.reorderable-page {
+      border-color: $border;
+      background-color: $base;
+    }
+  }
+}
+
 notebook {
   > header {
     border-width: 1px;
@@ -2018,9 +2375,7 @@ notebook {
       > tabs {
         margin-bottom: -1px;
         > tab {
-
-          &:hover { box-shadow: inset 0 -2px gtkalpha($indicator, 0.3); }
-
+          &:hover { box-shadow: inset 0 -2px mix($indicator, $background, 30%); }
           &:checked { box-shadow: inset 0 -2px $indicator; }
         }
       }
@@ -2031,9 +2386,7 @@ notebook {
       > tabs {
         margin-top: -1px;
         > tab {
-
-          &:hover { box-shadow: inset 0 2px gtkalpha($indicator, 0.3); }
-
+          &:hover { box-shadow: inset 0 2px mix($indicator, $background, 30%); }
           &:checked { box-shadow: inset 0 2px $indicator; }
         }
       }
@@ -2044,9 +2397,7 @@ notebook {
       > tabs {
         margin-right: -1px;
         > tab {
-
-          &:hover { box-shadow: inset -2px 0 gtkalpha($indicator, 0.3); }
-
+          &:hover { box-shadow: inset -2px 0 mix($indicator, $background, 30%); }
           &:checked { box-shadow: inset -2px 0 $indicator; }
         }
       }
@@ -2057,9 +2408,7 @@ notebook {
       > tabs {
         margin-left: -1px;
         > tab {
-
-          &:hover { box-shadow: inset 2px 0 gtkalpha($indicator, 0.3); }
-
+          &:hover { box-shadow: inset 2px 0 mix($indicator, $background, 30%); }
           &:checked { box-shadow: inset 2px 0 $indicator; }
         }
       }
@@ -2067,13 +2416,11 @@ notebook {
 
     &.top > tabs > arrow {
       @extend %notebook_vert_arrows;
-
       border-top-style: none;
     }
 
     &.bottom > tabs > arrow {
       @extend %notebook_vert_arrows;
-
       border-bottom-style: none;
     }
 
@@ -2094,13 +2441,11 @@ notebook {
 
     &.left > tabs > arrow {
       @extend %notebook_horz_arrows;
-
       border-left-style: none;
     }
 
     &.right > tabs > arrow {
       @extend %notebook_horz_arrows;
-
       border-right-style: none;
     }
 
@@ -2121,55 +2466,21 @@ notebook {
 
     > tabs > arrow {
       @extend %simple_flat_button;
-
       min-height: 16px;
       min-width: 16px;
       border-radius: 0;
     }
 
     tab {
-      transition: $shorter_transition;
-      min-height: $small_size;
-      min-width: $small_size;
-      padding: $space_size $space_size * 2;
-
-      outline-offset: -6px;
-
-      border-width: 1px;         // for reorderable tabs
-      border-color: transparent; //
-      color: $text-secondary;
-      font-weight: 500;
-
-      &:hover {
-        color: $text;
-
-        &.reorderable-page {
-          border-color: $border;
-          background-color: $base_alt;
-        }
-      }
-
-      &:disabled { color: $text-secondary-disabled; }
-
-      &:checked {
-        transition: $shorter_transition;
-        color: $text;
-
-        &:disabled { color: $text-disabled; }
-
-        &.reorderable-page {
-          border-color: $border;
-          background-color: $base;
-        }
-      }
+      @extend %tabs_tab;
 
       // close button
       // colors the button like the label, overridden otherwise
       button.flat {
-           min-height: 24px;
-           min-width: 24px;
-           padding: 0;
-           border-radius: $circular_radius;
+        min-height: 24px;
+        min-width: 24px;
+        padding: 0;
+        border-radius: $circular_radius;
       }
     }
 
@@ -2222,6 +2533,115 @@ notebook {
   }
 }
 
+tabbar {
+  .box {
+    background-color: transparent;
+    border: none;
+  }
+
+  scrolledwindow.pinned {
+    tabbox > background {
+      &:dir(ltr) {
+        box-shadow: inset -1px 0 $border;
+      }
+
+      &:dir(rtl) {
+        box-shadow: inset 1px 0 $border;
+      }
+    }
+  }
+
+  tabbox {
+    background-color: $background;
+    background-clip: padding-box;
+    box-shadow: inset 0 -1px $border;
+
+    > background {
+      background: none;
+    }
+  }
+
+  tab {
+    @extend %tabs_tab;
+
+    &:hover { box-shadow: inset 0 -2px mix($indicator, $background, 30%); }
+    &:checked { box-shadow: inset 0 -2px $indicator; }
+  }
+
+  .start-action,
+  .end-action {
+    background-color: $fill;
+    background-clip: padding-box;
+    border-color: $border;
+    border-style: solid;
+    transition: background 150ms ease-in-out;
+
+    button {
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .start-action:dir(ltr),
+  .end-action:dir(rtl) {
+    border-right-width: 1px;
+  }
+
+  .start-action:dir(rtl),
+  .end-action:dir(ltr) {
+    border-left-width: 1px;
+  }
+
+  &:not(.inline) {
+    scrolledwindow.pinned {
+      undershoot {
+        border-color: $border;
+      }
+    }
+
+    tabbox > background {
+      background-color: $header;
+    }
+
+    .start-action,
+    .end-action {
+      background-color: gtkalpha($header, .6);
+      border-color: $border;
+    }
+
+    &:backdrop .box {
+      background-color: $header;
+    }
+  }
+}
+
+dnd tab {
+  min-height: $small_size;
+  background-color: $header;
+  color: on($header, secondary);
+  margin: $small_size;
+}
+
+tabbar,
+dnd {
+  tab {
+    padding: $space_size;
+
+    button.image-button {
+      padding: 0;
+      margin: 0;
+      min-width: $small_size;
+      min-height: $small_size;
+      border-radius: $circular_radius;
+    }
+  }
+}
+
+tabview:drop(active),
+tabbox:drop(active) {
+  box-shadow: none;
+}
+
 //
 // Scrollbars
 //
@@ -2962,34 +3382,243 @@ separator {
 //
 // Lists
 //
+
+%boxed_list_row {
+  > &:not(:first-child) { border-top: 1px solid $border; }
+  &:first-child { border-radius: $base_radius $base_radius 0 0; }
+  &:last-child { border-radius: 0 0 $base_radius $base_radius; }
+}
+
 listview,
 list {
   border-color: $border;
   background-color: $base;
+  color: $text;
+  box-shadow: none;
+
+  row { padding: $space-size; }
 
-  > row { padding: 2px; }
-  > row.expander { padding: 0px; }
-  > row.expander .row-header { padding: 2px; }
+  &.content:not(.conversation-listbox),
+  &.boxed-list {
+    border: 1px solid $border;
+    border-radius: $button_radius;
+
+    > row { @extend %boxed_list_row; }
+  }
+
+  &.boxed-list {
+    > row {
+      &.expander {
+        list {
+          background-color: transparent;
+          box-shadow: none;
+          border: none;
+
+          > row { @extend %boxed_list_row; }
+        }
+      }
+    }
+  }
+}
+
+list.frame { border-radius: $button_radius; }
+
+listview.view {
+  color: $text;
+  background-color: transparent;
+
+  popover.menu & {
+    padding: 0;
+    border-radius: $button_radius;
+
+    > row {
+      margin-left: 0;
+      margin-right: 0;
+      border-radius: $button_radius;
+    }
+  }
 }
 
 row {
+  color: $text;
+
+  label.subtitle {
+    font-size: smaller;
+    @extend .dim-label;
+  }
+
+  > box.header {
+    margin-left: $space-size * 2;
+    margin-right: $space-size * 2;
+    min-height: $large-size;
+
+    > .icon:disabled {
+      filter: opacity(0.35);
+    }
+
+    > box.title {
+      margin-top: $space-size;
+      margin-bottom: $space-size;
+      border-spacing: $space-size / 2;
+    }
+  }
+
   @at-root %row_activatable, &.activatable {
     transition: $shorter_transition;
     background-image: none;
 
     &:hover {
-      background-color: $divider;
+      background-color: $fill;
     }
 
     &.has-open-popup,
     &:active {
-      background-color: $track;
+      background-color: $divider;
     }
   }
 
+  button &.activatable {
+    &:focus, &:hover, &:active { box-shadow: none; }
+  }
+
   &:selected { @extend %selected_items; &:hover { background-color: lighten($primary, 5%); } }
 }
 
+//
+// AdwComboRow
+//
+
+row.combo {
+  image.dropdown-arrow:disabled {
+    filter: opacity(0.35);
+  }
+
+  listview.inline {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: inherit;
+
+    &, &:disabled {
+      background: none;
+      color: inherit;
+    }
+  }
+
+  popover > contents {
+    min-width: 120px;
+  }
+}
+
+//
+// AdwExpanderRow
+//
+
+@mixin margin-start($margin) {
+  &:dir(ltr) {
+    margin-left: $margin;
+  }
+
+  &:dir(rtl) {
+    margin-right: $margin;
+  }
+}
+
+row.expander {
+  // Drop transparent background on expander rows to let nested rows handle it,
+  // avoiding double highlights.
+  background: none;
+  padding: 0;
+
+  > box > list {
+    background: none;
+    color: inherit;
+  }
+
+  list.nested {
+    background-color: $fill;
+    color: inherit;
+  }
+
+  list.nested > row {
+    @extend %boxed_list_row;
+  }
+
+  // AdwExpanderRow arrow rotation
+
+  image.expander-row-arrow {
+    @include margin-start(6px);
+  }
+
+  &:checked image.expander-row-arrow {
+    -gtk-icon-transform: rotate(0turn);
+  }
+
+  &:not(:checked) image.expander-row-arrow {
+    @extend .dim-label;
+
+    &:dir(ltr) {
+      -gtk-icon-transform: rotate(-0.25turn);
+    }
+
+    &:dir(rtl) {
+      -gtk-icon-transform: rotate(0.25turn);
+    }
+  }
+
+  &:checked image.expander-row-arrow:not(:disabled) {
+    color: $accent;
+  }
+
+  .osd &:checked image.expander-row-arrow:not(:disabled) {
+    color: inherit;
+  }
+
+  image.expander-row-arrow:disabled {
+    filter: opacity(0.35);
+  }
+}
+
+//
+// Boxed Lists
+//
+
+// Deprecated: use .boxed-list instead
+list.content,
+list.boxed-list {
+  > row {
+    // Regular rows and expander header rows background
+    &, &.expander row.header {
+      @extend %boxed_list_row;
+    }
+
+    &.expander {
+      border: none;
+    }
+
+    // Rounded top
+    &:first-child {
+      &, &.expander row.header {
+        border-top-left-radius: $base_radius;
+        border-top-right-radius: $base_radius;
+      }
+    }
+
+    // Rounded bottom
+    &:last-child {
+      &,
+      &.expander:not(:checked),
+      &.expander:not(:checked) row.header,
+      &.expander:checked list.nested,
+      &.expander:checked list.nested > row:last-child {
+        border-bottom-left-radius: $base_radius;
+        border-bottom-right-radius: $base_radius;
+        border-bottom-width: 0;
+      }
+    }
+  }
+}
+
 columnview {
   // move padding to child cells
   > listview > row {
@@ -3039,9 +3668,15 @@ columnview row:not(:selected) cell editablelabel.editing text selection {
 //
 // App Notifications
 //
+
 .app-notification {
-  @extend %osd;
-  margin: 8px;
+  color: on($osd);
+  border: none;
+  background-color: $osd;
+  border-radius: $menu_radius;
+  padding: $space_size;
+  margin: 0 $space_size $space_size;
+  box-shadow: $shadow_4, inset 0 1px $highlight;
 
   button { @extend %osd_button; }
 
@@ -3052,6 +3687,7 @@ columnview row:not(:selected) cell editablelabel.editing text selection {
 //
 // Expanders
 //
+
 expander {
   transition: all $shorter_duration $standard_curve;
   min-width: 16px;
@@ -3073,9 +3709,11 @@ expander {
   }
 }
 
+
 //
 // Calendar
 //
+
 calendar {
   color: $text-secondary;
   border: 1px solid $border;
@@ -3246,28 +3884,17 @@ filechooserbutton:drop(active) {
   &:dir(ltr),
   &.left,
   &.left:dir(rtl) {
-    border-right: 1px solid $border;
+    border-right: 1px solid $solid-border;
     border-left-style: none;
   }
 
   @at-root %sidebar_right
   &:dir(rtl),
   &.right {
-    border-left: 1px solid $border;
+    border-left: 1px solid $solid-border;
     border-right-style: none;
   }
 
-  listview.view,
-  list { background-color: transparent; }
-  row { transition: none; }
-
-  separator,
-  .separator {
-    min-height: 0;
-    border-color: transparent;
-    background-color: transparent;
-  }
-
   paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
 }
 
@@ -3276,6 +3903,10 @@ stacksidebar {
     border-bottom: none;
   }
 
+  leaflet.unfolded > box > &.sidebar {
+    border: none;
+  }
+
   row {
     padding: $space_size * 2 $space_size;
     transition: none;
@@ -3291,6 +3922,11 @@ stacksidebar {
 
 separator.sidebar {
   background-color: $border;
+
+  &.selection-mode,
+  .selection-mode & {
+    background-color: rgba(white, 0.12);
+  }
 }
 
 //
@@ -3300,14 +3936,14 @@ separator.sidebar {
   padding: $space_size 0; //only vertical padding. horizontal row size would clip
 
   > separator {
-    margin: $space_size;
+    margin: $space_size 0;
   }
 
   > row {
     min-height: ($space_size + 10px) * 2;
     padding: 0 $space_size;
     border-radius: $button_radius;
-    margin: 0 $space_size 2px;
+    margin: 1px $space_size;
 
     &:hover,
     &:focus-visible:focus-within {
@@ -3340,20 +3976,17 @@ separator.sidebar {
 //
 // File chooser
 //
+
 placessidebar {
   > viewport.frame { border-style: none; }
 
-  list { padding: (4px - 3px) 0 4px; }
-
   .navigation-sidebar > row {
     // Needs overriding of the GtkListBoxRow padding
     min-height: $space_size * 5;
-    margin: -1px 0; // Remove unknown margins
-    padding: 0;
 
     // Using margins/padding directly in the SidebarRow
     // will make the animation of the new bookmark row jump
-    > revealer { padding: 0 12px; }
+    > revealer { padding: 0 $space_size * 2; }
 
     &:selected {
       color: on($primary);
@@ -3428,6 +4061,7 @@ placesview {
 //
 // Paned
 //
+
 paned {
   > separator {
     min-width: 1px;
@@ -3438,6 +4072,7 @@ paned {
     // workaround, using background istead of a border since the border will get rendered twice (?)
     background-image: image($solid-border);
     background-size: 1px 1px;
+    box-shadow: none;
 
     &.wide {
       min-width: 6px;
@@ -3528,38 +4163,42 @@ infobar {
 
 // Buttons on selected backgrounds
 %selected_button {
-  & {
-    color: on(dark);
-    background-color: transparentize(on(dark), 1);
-    border: 1px solid transparentize(on(dark), 0.5);
-    box-shadow: none;
-  }
+  color: on(dark);
+  background-color: transparentize(on(dark), 1);
+  border: 1px solid transparentize(on(dark), 0.5);
+  box-shadow: none;
+
   &.flat {
     color: on(dark);
     background-color: transparentize(on(dark), 1);
     box-shadow: none;
+
     &:disabled {
       &, label { color: transparentize(on(dark), 0.6); }
       box-shadow: none;
     }
   }
+
   &:hover {
     color: on(dark);
     background-color: transparentize(on(dark), 0.8);
     border-color: transparentize(on(dark), 0.2);
     box-shadow: none;
   }
+
   &:active, &:active:hover, &:checked {
     color: on(dark);
     background-color: transparentize(on(dark), 0.9);
     border-color: transparentize(on(dark), 0.2);
     box-shadow: none;
   }
+
   &:disabled {
     &, label { color: transparentize(on(dark), 0.5); }
     background-color: transparentize(on(dark), 1);
     border-color: transparentize(on(dark), 0.6);
     box-shadow: none;
+
     &:active, &:checked {
       color: on(dark);
       background-color: transparentize(on(dark), 0.5);
@@ -3572,28 +4211,27 @@ infobar {
 //
 // Tooltips
 //
+
 tooltip {
   &.background {
     // background-color needs to be set this way otherwise it gets drawn twice
     // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
-    box-shadow: inset 0 1px $highlight;
-    background-color: gtkalpha($base, 0.9);
+    background-color: $osd;
+    color: on($osd);
+    box-shadow: $shadow_4, inset 0 1px $highlight;
+    border-radius: $menu_radius;
+    margin: 0 6px 8px 6px;
+    border: none;
   }
 
-  padding: $space_size ($space_size + 4px);
-  border-radius: 3px;
+  margin: 0;
+  padding: $space_size;
   box-shadow: none; // otherwise it gets inherited by windowframe.csd
 
-  &:not(.csd) {
-    border: 1px solid $border;
-    border-radius: 3px;
-    background-clip: $extra_background_clip;
-  }
-
   label {
     // tooltip label has already 6px margins
     min-height: 20px;
-    padding: 0 2px;
+    padding: 0 $space_size / 2;
   }
 
   > box {
@@ -3767,10 +4405,11 @@ colorchooser .popover.osd {
 //
 window {
   border: none;
+  outline: none;
 
   &.csd {
     transition: $shadow_transition;
-    border-radius: $window_radius $window_radius 0 0;
+    border-radius: $window_radius;
     box-shadow: $shadow_5, 0 16px 16px 2px rgba(black, 0), 0 6px 18px 5px rgba(black, 0);
     margin: 0;
 
diff --git a/src/_sass/gtk/_drawing-4.0.scss b/src/_sass/gtk/_drawing-4.0.scss
index 4c54dde6..85a35aad 100644
--- a/src/_sass/gtk/_drawing-4.0.scss
+++ b/src/_sass/gtk/_drawing-4.0.scss
@@ -27,6 +27,7 @@
     box-shadow: $shadow_1;
     background-color: if($fc != $primary, $fc, $base);
     color: if($fc != $indicator, on($indicator), $text-secondary);
+    outline: none;
   }
 
   @if $t == focus {
@@ -34,6 +35,7 @@
     border-image: none;
     box-shadow: $shadow_2;
     color: if($fc != $indicator, on($indicator), $text);
+    outline: none;
   }
 
   @if $t == disabled {
diff --git a/src/cinnamon/cinnamon-dark.css b/src/cinnamon/cinnamon-dark.css
index 2d680cd3..a9970543 100644
--- a/src/cinnamon/cinnamon-dark.css
+++ b/src/cinnamon/cinnamon-dark.css
@@ -712,7 +712,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
 }
 
-#selected.window-caption {
+.window-caption#selected {
   spacing: 25px;
   color: white;
   background-color: #4285F4;
@@ -2395,7 +2395,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   box-shadow: inset 0 -2px #4285F4;
 }
 
-#selected.expo-workspaces-name-entry {
+.expo-workspaces-name-entry#selected {
   color: white;
   caret-color: white;
   background-color: rgba(255, 255, 255, 0.05);
@@ -2407,7 +2407,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   background-color: transparent;
 }
 
-#active.expo-workspace-thumbnail-frame {
+.expo-workspace-thumbnail-frame#active {
   border-radius: 2px;
   border: 2px solid #4285F4;
 }
@@ -2457,7 +2457,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .slingshot .button {
   padding: 4px;
   border-radius: 2px;
-  border-color: #46494e;
+  border-color: #4b4d51;
   background-color: rgba(255, 255, 255, 0.05);
   box-shadow: none;
 }
@@ -2506,7 +2506,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   background-color: rgba(255, 255, 255, 0.05);
   color: rgba(255, 255, 255, 0.7);
   caret-color: rgba(255, 255, 255, 0.7);
-  box-shadow: inset 0 0 0 1px #46494e;
+  box-shadow: inset 0 0 0 1px #4b4d51;
 }
 
 .slingshot .entry:ltr {
@@ -2529,7 +2529,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   border-color: transparent;
   background-color: rgba(255, 255, 255, 0.05);
   color: rgba(255, 255, 255, 0.45);
-  box-shadow: inset 0 0 0 1px #46494e;
+  box-shadow: inset 0 0 0 1px #4b4d51;
 }
 
 .slingshot > StBoxLayout > StBoxLayout {
diff --git a/src/cinnamon/cinnamon-light.css b/src/cinnamon/cinnamon-light.css
index 44ae89b4..2e119b4c 100644
--- a/src/cinnamon/cinnamon-light.css
+++ b/src/cinnamon/cinnamon-light.css
@@ -712,7 +712,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
 }
 
-#selected.window-caption {
+.window-caption#selected {
   spacing: 25px;
   color: white;
   background-color: #4285F4;
@@ -2395,7 +2395,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   box-shadow: inset 0 -2px #4285F4;
 }
 
-#selected.expo-workspaces-name-entry {
+.expo-workspaces-name-entry#selected {
   color: white;
   caret-color: white;
   background-color: rgba(0, 0, 0, 0.05);
@@ -2407,7 +2407,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   background-color: transparent;
 }
 
-#active.expo-workspace-thumbnail-frame {
+.expo-workspace-thumbnail-frame#active {
   border-radius: 2px;
   border: 2px solid #4285F4;
 }
@@ -2457,7 +2457,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .slingshot .button {
   padding: 4px;
   border-radius: 2px;
-  border-color: #d9d9d9;
+  border-color: #e0e0e0;
   background-color: rgba(0, 0, 0, 0.05);
   box-shadow: none;
 }
@@ -2506,7 +2506,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   background-color: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.6);
   caret-color: rgba(0, 0, 0, 0.6);
-  box-shadow: inset 0 0 0 1px #d9d9d9;
+  box-shadow: inset 0 0 0 1px #e0e0e0;
 }
 
 .slingshot .entry:ltr {
@@ -2529,7 +2529,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   border-color: transparent;
   background-color: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.38);
-  box-shadow: inset 0 0 0 1px #d9d9d9;
+  box-shadow: inset 0 0 0 1px #e0e0e0;
 }
 
 .slingshot > StBoxLayout > StBoxLayout {
diff --git a/src/cinnamon/cinnamon.css b/src/cinnamon/cinnamon.css
index 755f5568..875f7463 100644
--- a/src/cinnamon/cinnamon.css
+++ b/src/cinnamon/cinnamon.css
@@ -712,7 +712,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
 }
 
-#selected.window-caption {
+.window-caption#selected {
   spacing: 25px;
   color: white;
   background-color: #4285F4;
@@ -2395,7 +2395,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   box-shadow: inset 0 -2px #4285F4;
 }
 
-#selected.expo-workspaces-name-entry {
+.expo-workspaces-name-entry#selected {
   color: white;
   caret-color: white;
   background-color: rgba(0, 0, 0, 0.05);
@@ -2407,7 +2407,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   background-color: transparent;
 }
 
-#active.expo-workspace-thumbnail-frame {
+.expo-workspace-thumbnail-frame#active {
   border-radius: 2px;
   border: 2px solid #4285F4;
 }
@@ -2457,7 +2457,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .slingshot .button {
   padding: 4px;
   border-radius: 2px;
-  border-color: #d9d9d9;
+  border-color: #e0e0e0;
   background-color: rgba(0, 0, 0, 0.05);
   box-shadow: none;
 }
@@ -2506,7 +2506,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   background-color: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.6);
   caret-color: rgba(0, 0, 0, 0.6);
-  box-shadow: inset 0 0 0 1px #d9d9d9;
+  box-shadow: inset 0 0 0 1px #e0e0e0;
 }
 
 .slingshot .entry:ltr {
@@ -2529,7 +2529,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   border-color: transparent;
   background-color: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.38);
-  box-shadow: inset 0 0 0 1px #d9d9d9;
+  box-shadow: inset 0 0 0 1px #e0e0e0;
 }
 
 .slingshot > StBoxLayout > StBoxLayout {
diff --git a/src/gnome-shell/shell-3-28/gnome-shell-dark.css b/src/gnome-shell/shell-3-28/gnome-shell-dark.css
index c363dab1..f9e3bd5a 100644
--- a/src/gnome-shell/shell-3-28/gnome-shell-dark.css
+++ b/src/gnome-shell/shell-3-28/gnome-shell-dark.css
@@ -706,7 +706,7 @@ StWidget.focused .app-well-app-running-dot {
 
 /* Modal Dialogs */
 .candidate-popup-content, .modal-dialog {
-  background-color: #333539;
+  background-color: #383a3e;
   border-radius: 3px;
   border: none;
   box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, 0.65);
@@ -1952,7 +1952,7 @@ StEntry StLabel.hint-text {
   margin: 2px 5px 8px;
   border-radius: 2px;
   color: rgba(255, 255, 255, 0.7);
-  background-color: #333539;
+  background-color: #383a3e;
   border: none;
   text-shadow: none;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
@@ -1961,14 +1961,14 @@ StEntry StLabel.hint-text {
 
 .notification-banner:hover {
   color: white;
-  background-color: #333539;
+  background-color: #383a3e;
   box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
   margin: 2px 12px 17px;
 }
 
 .notification-banner:focus {
   color: white;
-  background-color: #333539;
+  background-color: #383a3e;
 }
 
 .notification-banner .notification-actions {
@@ -2217,7 +2217,7 @@ StEntry StLabel.hint-text {
   -st-icon-style: symbolic;
 }
 
-#panel #panelActivities.panel-button {
+#panel .panel-button#panelActivities {
   -natural-hpadding: 18px;
 }
 
@@ -2242,11 +2242,11 @@ StEntry StLabel.hint-text {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked, #panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel.lock-screen .panel-button.clock-display:hover, #panel.lock-screen .panel-button.clock-display:active, #panel.lock-screen .panel-button.clock-display:overview, #panel.lock-screen .panel-button.clock-display:focus, #panel.lock-screen .panel-button.clock-display:checked {
+#panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock, #panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel.lock-screen .panel-button.clock-display:hover .clock, #panel.lock-screen .panel-button.clock-display:active .clock, #panel.lock-screen .panel-button.clock-display:overview .clock, #panel.lock-screen .panel-button.clock-display:focus .clock, #panel.lock-screen .panel-button.clock-display:checked .clock {
+#panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
   box-shadow: none;
 }
 
@@ -2292,7 +2292,7 @@ StEntry StLabel.hint-text {
 
 .popup-menu .popup-menu-content {
   padding: 6px 0 !important;
-  background-color: #333539 !important;
+  background-color: #383a3e !important;
   border-radius: 3px;
   border: none;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15);
@@ -2317,7 +2317,7 @@ StEntry StLabel.hint-text {
   background-color: #4285F4 !important;
 }
 
-.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item.selected:checked {
+.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
   color: white !important;
   background-color: #5a95f5 !important;
 }
diff --git a/src/gnome-shell/shell-3-28/gnome-shell-light.css b/src/gnome-shell/shell-3-28/gnome-shell-light.css
index 4a29b28d..b0b92a19 100644
--- a/src/gnome-shell/shell-3-28/gnome-shell-light.css
+++ b/src/gnome-shell/shell-3-28/gnome-shell-light.css
@@ -2217,7 +2217,7 @@ StEntry StLabel.hint-text {
   -st-icon-style: symbolic;
 }
 
-#panel #panelActivities.panel-button {
+#panel .panel-button#panelActivities {
   -natural-hpadding: 18px;
 }
 
@@ -2242,11 +2242,11 @@ StEntry StLabel.hint-text {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked, #panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel.lock-screen .panel-button.clock-display:hover, #panel.lock-screen .panel-button.clock-display:active, #panel.lock-screen .panel-button.clock-display:overview, #panel.lock-screen .panel-button.clock-display:focus, #panel.lock-screen .panel-button.clock-display:checked {
+#panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock, #panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel.lock-screen .panel-button.clock-display:hover .clock, #panel.lock-screen .panel-button.clock-display:active .clock, #panel.lock-screen .panel-button.clock-display:overview .clock, #panel.lock-screen .panel-button.clock-display:focus .clock, #panel.lock-screen .panel-button.clock-display:checked .clock {
+#panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
   box-shadow: none;
 }
 
@@ -2317,7 +2317,7 @@ StEntry StLabel.hint-text {
   background-color: #4285F4 !important;
 }
 
-.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item.selected:checked {
+.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
   color: white !important;
   background-color: #5a95f5 !important;
 }
diff --git a/src/gnome-shell/shell-3-28/gnome-shell.css b/src/gnome-shell/shell-3-28/gnome-shell.css
index 330baa5b..260f2fb6 100644
--- a/src/gnome-shell/shell-3-28/gnome-shell.css
+++ b/src/gnome-shell/shell-3-28/gnome-shell.css
@@ -2217,7 +2217,7 @@ StEntry StLabel.hint-text {
   -st-icon-style: symbolic;
 }
 
-#panel #panelActivities.panel-button {
+#panel .panel-button#panelActivities {
   -natural-hpadding: 18px;
 }
 
@@ -2242,11 +2242,11 @@ StEntry StLabel.hint-text {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked, #panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel.lock-screen .panel-button.clock-display:hover, #panel.lock-screen .panel-button.clock-display:active, #panel.lock-screen .panel-button.clock-display:overview, #panel.lock-screen .panel-button.clock-display:focus, #panel.lock-screen .panel-button.clock-display:checked {
+#panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock, #panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel.lock-screen .panel-button.clock-display:hover .clock, #panel.lock-screen .panel-button.clock-display:active .clock, #panel.lock-screen .panel-button.clock-display:overview .clock, #panel.lock-screen .panel-button.clock-display:focus .clock, #panel.lock-screen .panel-button.clock-display:checked .clock {
+#panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
   box-shadow: none;
 }
 
@@ -2317,7 +2317,7 @@ StEntry StLabel.hint-text {
   background-color: #4285F4 !important;
 }
 
-.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item.selected:checked {
+.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
   color: white !important;
   background-color: #5a95f5 !important;
 }
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 42101308..1dd4e7e1 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell-dark.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell-dark.css
@@ -706,7 +706,7 @@ StWidget.focused .app-well-app-running-dot {
 
 /* Modal Dialogs */
 .candidate-popup-content, .modal-dialog {
-  background-color: #333539;
+  background-color: #383a3e;
   border-radius: 3px;
   border: none;
   box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, 0.65);
@@ -1952,7 +1952,7 @@ StEntry StLabel.hint-text {
   margin: 2px 5px 8px;
   border-radius: 2px;
   color: rgba(255, 255, 255, 0.7);
-  background-color: #333539;
+  background-color: #383a3e;
   border: none;
   text-shadow: none;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
@@ -1961,14 +1961,14 @@ StEntry StLabel.hint-text {
 
 .notification-banner:hover {
   color: white;
-  background-color: #333539;
+  background-color: #383a3e;
   box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
   margin: 2px 12px 17px;
 }
 
 .notification-banner:focus {
   color: white;
-  background-color: #333539;
+  background-color: #383a3e;
 }
 
 .notification-banner .notification-actions {
@@ -2217,7 +2217,7 @@ StEntry StLabel.hint-text {
   -st-icon-style: symbolic;
 }
 
-#panel #panelActivities.panel-button {
+#panel .panel-button#panelActivities {
   -natural-hpadding: 18px;
 }
 
@@ -2242,11 +2242,11 @@ StEntry StLabel.hint-text {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked, #panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel.lock-screen .panel-button.clock-display:hover, #panel.lock-screen .panel-button.clock-display:active, #panel.lock-screen .panel-button.clock-display:overview, #panel.lock-screen .panel-button.clock-display:focus, #panel.lock-screen .panel-button.clock-display:checked {
+#panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock, #panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel.lock-screen .panel-button.clock-display:hover .clock, #panel.lock-screen .panel-button.clock-display:active .clock, #panel.lock-screen .panel-button.clock-display:overview .clock, #panel.lock-screen .panel-button.clock-display:focus .clock, #panel.lock-screen .panel-button.clock-display:checked .clock {
+#panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
   box-shadow: none;
 }
 
@@ -2292,7 +2292,7 @@ StEntry StLabel.hint-text {
 
 .popup-menu .popup-menu-content {
   padding: 6px 0 !important;
-  background-color: #333539 !important;
+  background-color: #383a3e !important;
   border-radius: 3px;
   border: none;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15);
@@ -2317,7 +2317,7 @@ StEntry StLabel.hint-text {
   background-color: #4285F4 !important;
 }
 
-.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item.selected:checked {
+.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
   color: white !important;
   background-color: #5a95f5 !important;
 }
diff --git a/src/gnome-shell/shell-40-0/gnome-shell-light.css b/src/gnome-shell/shell-40-0/gnome-shell-light.css
index a79f3ee2..b298cfc6 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell-light.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell-light.css
@@ -2217,7 +2217,7 @@ StEntry StLabel.hint-text {
   -st-icon-style: symbolic;
 }
 
-#panel #panelActivities.panel-button {
+#panel .panel-button#panelActivities {
   -natural-hpadding: 18px;
 }
 
@@ -2242,11 +2242,11 @@ StEntry StLabel.hint-text {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked, #panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel.lock-screen .panel-button.clock-display:hover, #panel.lock-screen .panel-button.clock-display:active, #panel.lock-screen .panel-button.clock-display:overview, #panel.lock-screen .panel-button.clock-display:focus, #panel.lock-screen .panel-button.clock-display:checked {
+#panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock, #panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel.lock-screen .panel-button.clock-display:hover .clock, #panel.lock-screen .panel-button.clock-display:active .clock, #panel.lock-screen .panel-button.clock-display:overview .clock, #panel.lock-screen .panel-button.clock-display:focus .clock, #panel.lock-screen .panel-button.clock-display:checked .clock {
+#panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
   box-shadow: none;
 }
 
@@ -2317,7 +2317,7 @@ StEntry StLabel.hint-text {
   background-color: #4285F4 !important;
 }
 
-.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item.selected:checked {
+.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
   color: white !important;
   background-color: #5a95f5 !important;
 }
diff --git a/src/gnome-shell/shell-40-0/gnome-shell.css b/src/gnome-shell/shell-40-0/gnome-shell.css
index 99da8fc0..aa7935ae 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell.css
@@ -2217,7 +2217,7 @@ StEntry StLabel.hint-text {
   -st-icon-style: symbolic;
 }
 
-#panel #panelActivities.panel-button {
+#panel .panel-button#panelActivities {
   -natural-hpadding: 18px;
 }
 
@@ -2242,11 +2242,11 @@ StEntry StLabel.hint-text {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked, #panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel.lock-screen .panel-button.clock-display:hover, #panel.lock-screen .panel-button.clock-display:active, #panel.lock-screen .panel-button.clock-display:overview, #panel.lock-screen .panel-button.clock-display:focus, #panel.lock-screen .panel-button.clock-display:checked {
+#panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock, #panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel.lock-screen .panel-button.clock-display:hover .clock, #panel.lock-screen .panel-button.clock-display:active .clock, #panel.lock-screen .panel-button.clock-display:overview .clock, #panel.lock-screen .panel-button.clock-display:focus .clock, #panel.lock-screen .panel-button.clock-display:checked .clock {
+#panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
   box-shadow: none;
 }
 
@@ -2317,7 +2317,7 @@ StEntry StLabel.hint-text {
   background-color: #4285F4 !important;
 }
 
-.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item.selected:checked {
+.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
   color: white !important;
   background-color: #5a95f5 !important;
 }
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 af218bb3..b9975a32 100644
--- a/src/gnome-shell/shell-42-0/gnome-shell-dark.css
+++ b/src/gnome-shell/shell-42-0/gnome-shell-dark.css
@@ -706,7 +706,7 @@ StWidget.focused .app-well-app-running-dot {
 
 /* Modal Dialogs */
 .candidate-popup-content, .modal-dialog {
-  background-color: #333539;
+  background-color: #383a3e;
   border-radius: 3px;
   border: none;
   box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, 0.65);
@@ -1952,7 +1952,7 @@ StEntry StLabel.hint-text {
   margin: 2px 5px 8px;
   border-radius: 2px;
   color: rgba(255, 255, 255, 0.7);
-  background-color: #333539;
+  background-color: #383a3e;
   border: none;
   text-shadow: none;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
@@ -1961,14 +1961,14 @@ StEntry StLabel.hint-text {
 
 .notification-banner:hover {
   color: white;
-  background-color: #333539;
+  background-color: #383a3e;
   box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
   margin: 2px 12px 17px;
 }
 
 .notification-banner:focus {
   color: white;
-  background-color: #333539;
+  background-color: #383a3e;
 }
 
 .notification-banner .notification-actions {
@@ -2217,7 +2217,7 @@ StEntry StLabel.hint-text {
   -st-icon-style: symbolic;
 }
 
-#panel #panelActivities.panel-button {
+#panel .panel-button#panelActivities {
   -natural-hpadding: 18px;
 }
 
@@ -2242,11 +2242,11 @@ StEntry StLabel.hint-text {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked, #panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel.lock-screen .panel-button.clock-display:hover, #panel.lock-screen .panel-button.clock-display:active, #panel.lock-screen .panel-button.clock-display:overview, #panel.lock-screen .panel-button.clock-display:focus, #panel.lock-screen .panel-button.clock-display:checked {
+#panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock, #panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel.lock-screen .panel-button.clock-display:hover .clock, #panel.lock-screen .panel-button.clock-display:active .clock, #panel.lock-screen .panel-button.clock-display:overview .clock, #panel.lock-screen .panel-button.clock-display:focus .clock, #panel.lock-screen .panel-button.clock-display:checked .clock {
+#panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
   box-shadow: none;
 }
 
@@ -2292,7 +2292,7 @@ StEntry StLabel.hint-text {
 
 .popup-menu .popup-menu-content {
   padding: 6px 0 !important;
-  background-color: #333539 !important;
+  background-color: #383a3e !important;
   border-radius: 3px;
   border: none;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15);
@@ -2317,7 +2317,7 @@ StEntry StLabel.hint-text {
   background-color: #4285F4 !important;
 }
 
-.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item.selected:checked {
+.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
   color: white !important;
   background-color: #5a95f5 !important;
 }
diff --git a/src/gnome-shell/shell-42-0/gnome-shell-light.css b/src/gnome-shell/shell-42-0/gnome-shell-light.css
index 930d7767..0957051f 100644
--- a/src/gnome-shell/shell-42-0/gnome-shell-light.css
+++ b/src/gnome-shell/shell-42-0/gnome-shell-light.css
@@ -2217,7 +2217,7 @@ StEntry StLabel.hint-text {
   -st-icon-style: symbolic;
 }
 
-#panel #panelActivities.panel-button {
+#panel .panel-button#panelActivities {
   -natural-hpadding: 18px;
 }
 
@@ -2242,11 +2242,11 @@ StEntry StLabel.hint-text {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked, #panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel.lock-screen .panel-button.clock-display:hover, #panel.lock-screen .panel-button.clock-display:active, #panel.lock-screen .panel-button.clock-display:overview, #panel.lock-screen .panel-button.clock-display:focus, #panel.lock-screen .panel-button.clock-display:checked {
+#panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock, #panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel.lock-screen .panel-button.clock-display:hover .clock, #panel.lock-screen .panel-button.clock-display:active .clock, #panel.lock-screen .panel-button.clock-display:overview .clock, #panel.lock-screen .panel-button.clock-display:focus .clock, #panel.lock-screen .panel-button.clock-display:checked .clock {
+#panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
   box-shadow: none;
 }
 
@@ -2317,7 +2317,7 @@ StEntry StLabel.hint-text {
   background-color: #4285F4 !important;
 }
 
-.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item.selected:checked {
+.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
   color: white !important;
   background-color: #5a95f5 !important;
 }
diff --git a/src/gnome-shell/shell-42-0/gnome-shell.css b/src/gnome-shell/shell-42-0/gnome-shell.css
index 967b9408..ba84369e 100644
--- a/src/gnome-shell/shell-42-0/gnome-shell.css
+++ b/src/gnome-shell/shell-42-0/gnome-shell.css
@@ -2217,7 +2217,7 @@ StEntry StLabel.hint-text {
   -st-icon-style: symbolic;
 }
 
-#panel #panelActivities.panel-button {
+#panel .panel-button#panelActivities {
   -natural-hpadding: 18px;
 }
 
@@ -2242,11 +2242,11 @@ StEntry StLabel.hint-text {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked, #panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel.lock-screen .panel-button.clock-display:hover, #panel.lock-screen .panel-button.clock-display:active, #panel.lock-screen .panel-button.clock-display:overview, #panel.lock-screen .panel-button.clock-display:focus, #panel.lock-screen .panel-button.clock-display:checked {
+#panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display, #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel.lock-screen .panel-button:hover.clock-display, #panel.lock-screen .panel-button:active.clock-display, #panel.lock-screen .panel-button:overview.clock-display, #panel.lock-screen .panel-button:focus.clock-display, #panel.lock-screen .panel-button:checked.clock-display {
   box-shadow: none;
 }
 
-#panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock, #panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel.lock-screen .panel-button.clock-display:hover .clock, #panel.lock-screen .panel-button.clock-display:active .clock, #panel.lock-screen .panel-button.clock-display:overview .clock, #panel.lock-screen .panel-button.clock-display:focus .clock, #panel.lock-screen .panel-button.clock-display:checked .clock {
+#panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock, #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel.lock-screen .panel-button:hover.clock-display .clock, #panel.lock-screen .panel-button:active.clock-display .clock, #panel.lock-screen .panel-button:overview.clock-display .clock, #panel.lock-screen .panel-button:focus.clock-display .clock, #panel.lock-screen .panel-button:checked.clock-display .clock {
   box-shadow: none;
 }
 
@@ -2317,7 +2317,7 @@ StEntry StLabel.hint-text {
   background-color: #4285F4 !important;
 }
 
-.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item.selected:checked {
+.popup-menu .popup-menu-item:checked:focus, .popup-menu .popup-menu-item:checked:hover, .popup-menu .popup-menu-item:checked.selected {
   color: white !important;
   background-color: #5a95f5 !important;
 }
diff --git a/src/gtk/3.0/gtk-dark.css b/src/gtk/3.0/gtk-dark.css
index f75973b7..cfeef108 100644
--- a/src/gtk/3.0/gtk-dark.css
+++ b/src/gtk/3.0/gtk-dark.css
@@ -272,7 +272,7 @@ notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), popover.ba
 }
 
 spinbutton:not(.vertical), entry {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -290,7 +290,7 @@ spinbutton:focus:not(.vertical), entry:focus {
 }
 
 spinbutton:disabled:not(.vertical), entry:disabled {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   border-image: none;
   background-color: #2e3034;
@@ -547,8 +547,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button, .sid
 
 .budgie-run-dialog button:hover, .budgie-polkit-dialog button:hover, .budgie-session-dialog button:hover, .background .raven stackswitcher.linked > button:hover, .mate-panel-menu-bar #PanelApplet button:hover:not(.flat), .tilix-search-frame button:hover, .geary-composer-box button:hover:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:hover,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:hover:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:hover, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:hover, window.csd > box.vertical > box.vertical > toolbar.horizontal button:hover,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:hover, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:hover, layouttabbar button:hover, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:hover,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:hover, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:hover, .nautilus-window headerbar .path-bar-box button:hover, messagedialog .linked.dialog-action-area:not(.vertical) > button:hover, .app-notification button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:hover,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:hover, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:hover, layouttabbar button:hover, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:hover,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:hover, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:hover, .nautilus-window headerbar .path-bar-box button:hover, messagedialog .linked:not(.vertical).dialog-action-area > button:hover, .app-notification button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:hover,
 .background .path-bar button:hover, toolbar button:hover, combobox > .linked:not(.vertical) > button.combo:hover:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:hover, .linked > spinbutton:not(.vertical) > button.down:hover, toolbutton button:hover, .osd button:hover, .background .linked.stack-switcher > button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   color: white;
@@ -556,8 +556,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:hover
 
 .budgie-run-dialog button:active, .budgie-polkit-dialog button:active, .budgie-session-dialog button:active, .background .raven stackswitcher.linked > button:active, .mate-panel-menu-bar #PanelApplet button:active:not(.flat), .tilix-search-frame button:active, .geary-composer-box button:active:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:active,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:active:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:active, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:active, window.csd > box.vertical > box.vertical > toolbar.horizontal button:active,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:active, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:active, layouttabbar button:active, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:active,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, messagedialog .linked.dialog-action-area:not(.vertical) > button:active, .app-notification button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:active,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:active, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:active, layouttabbar button:active, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:active,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, messagedialog .linked:not(.vertical).dialog-action-area > button:active, .app-notification button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:active,
 .background .path-bar button:active, toolbar button:active, combobox > .linked:not(.vertical) > button.combo:active:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:active, .linked > spinbutton:not(.vertical) > button.down:active, toolbutton button:active, .osd button:active, .background .linked.stack-switcher > button:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   animation: ripple_effect 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
@@ -569,8 +569,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:activ
 
 .budgie-run-dialog button:disabled, .budgie-polkit-dialog button:disabled, .budgie-session-dialog button:disabled, .background .raven stackswitcher.linked > button:disabled, .mate-panel-menu-bar #PanelApplet button:disabled:not(.flat), .tilix-search-frame button:disabled, .geary-composer-box button:disabled:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:disabled,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:disabled:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:disabled, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:disabled, window.csd > box.vertical > box.vertical > toolbar.horizontal button:disabled,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:disabled, layouttabbar button:disabled, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:disabled,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:disabled, .nautilus-window headerbar .path-bar-box button:disabled, messagedialog .linked.dialog-action-area:not(.vertical) > button:disabled, .app-notification button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:disabled,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:disabled, layouttabbar button:disabled, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:disabled,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:disabled, .nautilus-window headerbar .path-bar-box button:disabled, messagedialog .linked:not(.vertical).dialog-action-area > button:disabled, .app-notification button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:disabled,
 .background .path-bar button:disabled, toolbar button:disabled, combobox > .linked:not(.vertical) > button.combo:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:disabled, .linked > spinbutton:not(.vertical) > button.down:disabled, toolbutton button:disabled, .osd button:disabled, .background .linked.stack-switcher > button:disabled {
   box-shadow: none;
   background-color: transparent;
@@ -579,8 +579,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:disab
 
 .budgie-run-dialog button:checked, .budgie-polkit-dialog button:checked, .budgie-session-dialog button:checked, .background .raven stackswitcher.linked > button:checked, .mate-panel-menu-bar #PanelApplet button:checked:not(.flat), .tilix-search-frame button:checked, .geary-composer-box button:checked:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:checked,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:checked:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:checked, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:checked, window.csd > box.vertical > box.vertical > toolbar.horizontal button:checked,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked, layouttabbar button:checked, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked, messagedialog .linked.dialog-action-area:not(.vertical) > button:checked, .app-notification button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked, layouttabbar button:checked, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked, messagedialog .linked:not(.vertical).dialog-action-area > button:checked, .app-notification button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked,
 .background .path-bar button:checked, toolbar button:checked, combobox > .linked:not(.vertical) > button.combo:checked:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked, .linked > spinbutton:not(.vertical) > button.down:checked, toolbutton button:checked, .osd button:checked, .background .linked.stack-switcher > button:checked {
   color: white;
   background-color: alpha(currentColor, 0.12);
@@ -588,8 +588,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:check
 
 .budgie-run-dialog button:checked:disabled, .budgie-polkit-dialog button:checked:disabled, .budgie-session-dialog button:checked:disabled, .background .raven stackswitcher.linked > button:checked:disabled, .mate-panel-menu-bar #PanelApplet button:checked:disabled:not(.flat), .tilix-search-frame button:checked:disabled, .geary-composer-box button:checked:disabled:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:checked:disabled,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:checked:disabled:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:checked:disabled, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:checked:disabled, window.csd > box.vertical > box.vertical > toolbar.horizontal button:checked:disabled,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked:disabled, layouttabbar button:checked:disabled, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked:disabled,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked:disabled, .nautilus-window headerbar .path-bar-box button:checked:disabled, messagedialog .linked.dialog-action-area:not(.vertical) > button:checked:disabled, .app-notification button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked:disabled,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked:disabled, layouttabbar button:checked:disabled, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked:disabled,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked:disabled, .nautilus-window headerbar .path-bar-box button:checked:disabled, messagedialog .linked:not(.vertical).dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked:disabled,
 .background .path-bar button:checked:disabled, toolbar button:checked:disabled, combobox > .linked:not(.vertical) > button.combo:checked:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked:disabled, .linked > spinbutton:not(.vertical) > button.down:checked:disabled, toolbutton button:checked:disabled, .osd button:checked:disabled, .background .linked.stack-switcher > button:checked:disabled {
   background-color: alpha(currentColor, 0.06);
   color: rgba(255, 255, 255, 0.45);
@@ -676,7 +676,7 @@ button {
   padding: 6px 10px;
   border-radius: 3px;
   font-weight: 500;
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   background-color: #333539;
   color: rgba(255, 255, 255, 0.7);
@@ -1202,11 +1202,11 @@ spinbutton:not(.vertical) {
   padding: 0;
 }
 
-.background spinbutton:not(.vertical), .background spinbutton.flat:not(.vertical) {
+.background spinbutton:not(.vertical), .background spinbutton:not(.vertical).flat {
   transition: all 225ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.background spinbutton:not(.vertical) entry, .background spinbutton:not(.vertical) entry:focus, .background spinbutton:not(.vertical) entry:disabled, .background spinbutton:not(.vertical):focus entry, .background spinbutton:not(.vertical):focus entry:focus, .background spinbutton:not(.vertical):focus entry:disabled, .background spinbutton:not(.vertical):disabled entry, .background spinbutton:not(.vertical):disabled entry:focus, .background spinbutton:not(.vertical):disabled entry:disabled, .background spinbutton.flat:not(.vertical) entry, .background spinbutton.flat:not(.vertical) entry:focus, .background spinbutton.flat:not(.vertical) entry:disabled, .background spinbutton.flat:not(.vertical):focus entry, .background spinbutton.flat:not(.vertical):focus entry:focus, .background spinbutton.flat:not(.vertical):focus entry:disabled, .background spinbutton.flat:not(.vertical):disabled entry, .background spinbutton.flat:not(.vertical):disabled entry:focus, .background spinbutton.flat:not(.vertical):disabled entry:disabled {
+.background spinbutton:not(.vertical) entry, .background spinbutton:not(.vertical) entry:focus, .background spinbutton:not(.vertical) entry:disabled, .background spinbutton:not(.vertical):focus entry, .background spinbutton:not(.vertical):focus entry:focus, .background spinbutton:not(.vertical):focus entry:disabled, .background spinbutton:not(.vertical):disabled entry, .background spinbutton:not(.vertical):disabled entry:focus, .background spinbutton:not(.vertical):disabled entry:disabled, .background spinbutton:not(.vertical).flat entry, .background spinbutton:not(.vertical).flat entry:focus, .background spinbutton:not(.vertical).flat entry:disabled, .background spinbutton:not(.vertical).flat:focus entry, .background spinbutton:not(.vertical).flat:focus entry:focus, .background spinbutton:not(.vertical).flat:focus entry:disabled, .background spinbutton:not(.vertical).flat:disabled entry, .background spinbutton:not(.vertical).flat:disabled entry:focus, .background spinbutton:not(.vertical).flat:disabled entry:disabled {
   box-shadow: none;
   background: none;
   border-image: none;
@@ -1297,7 +1297,7 @@ combobox entry.combo {
   border-radius: 2px;
   margin-right: -32px;
   padding-right: 32px;
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -1315,14 +1315,14 @@ combobox entry.combo:focus {
 }
 
 combobox entry.combo:disabled {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   border-image: none;
   background-color: #2e3034;
   color: rgba(255, 255, 255, 0.45);
 }
 
-combobox > .linked:not(.vertical) > button.combo:not(:only-child) {
+combobox > .linked:not(.vertical) > button:not(:only-child).combo {
   border: none;
   border-image: none;
   box-shadow: none;
@@ -1467,22 +1467,22 @@ window.background stack scrolledwindow .linked:not(stackswitcher) button:not(.co
   box-shadow: none;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:hover:not(.combo), toolbar.primary-toolbar toolitem.raised button:hover, .nemo-window .toolbar button:hover, .primary-toolbar button:hover {
+window.background stack scrolledwindow :not(stackswitcher).linked button:hover:not(.combo), toolbar.primary-toolbar toolitem.raised button:hover, .nemo-window .toolbar button:hover, .primary-toolbar button:hover {
   background-color: rgba(255, 255, 255, 0.15);
   box-shadow: none;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:disabled:not(.combo), toolbar.primary-toolbar toolitem.raised button:disabled, .nemo-window .toolbar button:disabled, .primary-toolbar button:disabled {
+window.background stack scrolledwindow :not(stackswitcher).linked button:disabled:not(.combo), toolbar.primary-toolbar toolitem.raised button:disabled, .nemo-window .toolbar button:disabled, .primary-toolbar button:disabled {
   background-color: transparent;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:active:not(.combo), toolbar.primary-toolbar toolitem.raised button:active, .nemo-window .toolbar button:active, .primary-toolbar button:active, window.background stack scrolledwindow .linked:not(stackswitcher) button:checked:not(.combo), toolbar.primary-toolbar toolitem.raised button:checked, .nemo-window .toolbar button:checked, .primary-toolbar button:checked {
+window.background stack scrolledwindow :not(stackswitcher).linked button:active:not(.combo), toolbar.primary-toolbar toolitem.raised button:active, .nemo-window .toolbar button:active, .primary-toolbar button:active, window.background stack scrolledwindow :not(stackswitcher).linked button:checked:not(.combo), toolbar.primary-toolbar toolitem.raised button:checked, .nemo-window .toolbar button:checked, .primary-toolbar button:checked {
   color: white;
   background-color: rgba(255, 255, 255, 0.2);
   box-shadow: none;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:checked:disabled:not(.combo), .nemo-window .toolbar button:checked:disabled, .primary-toolbar button:checked:disabled, window.background stack scrolledwindow .linked:not(stackswitcher) button:checked:backdrop:not(.combo), .nemo-window .toolbar button:checked:backdrop, .primary-toolbar button:checked:backdrop {
+window.background stack scrolledwindow :not(stackswitcher).linked button:checked:disabled:not(.combo), .nemo-window .toolbar button:checked:disabled, .primary-toolbar button:checked:disabled, window.background stack scrolledwindow :not(stackswitcher).linked button:checked:backdrop:not(.combo), .nemo-window .toolbar button:checked:backdrop, .primary-toolbar button:checked:backdrop {
   color: rgba(255, 255, 255, 0.5);
   background-color: rgba(255, 255, 255, 0.1);
   box-shadow: none;
@@ -1568,33 +1568,33 @@ headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-acti
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 0%, transparent 0%) 0 0 0/0 0 0;
 }
 
-headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:hover {
+headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:hover {
   border-radius: 0;
   color: #4285F4;
   box-shadow: inset 0 -2px alpha(#4285F4, 0.5);
 }
 
-headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:hover {
+headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:hover {
   background-color: transparent;
 }
 
-headerbar.windowhandle viewswitcher button:checked:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:checked, headerbar.windowhandle viewswitcher button:active:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:active {
+headerbar.windowhandle viewswitcher button:checked:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked, headerbar.windowhandle viewswitcher button:active:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:active {
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 100%, transparent 0%) 0 0 2/0 0 2px;
   background: none;
   color: #4285F4;
   border-radius: 0;
 }
 
-headerbar.windowhandle viewswitcher button:checked:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:checked:disabled, headerbar.windowhandle viewswitcher button:active:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:active:disabled {
+headerbar.windowhandle viewswitcher button:checked:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked:disabled, headerbar.windowhandle viewswitcher button:active:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:active:disabled {
   color: rgba(66, 133, 244, 0.35);
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), rgba(66, 133, 244, 0.35) 100%, transparent 0%) 0 0 2/0 0 2px;
 }
 
-headerbar.windowhandle viewswitcher button:checked:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:checked:hover {
+headerbar.windowhandle viewswitcher button:checked:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked:hover {
   background: none;
 }
 
-headerbar.windowhandle viewswitcher button:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:disabled {
+headerbar.windowhandle viewswitcher button:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:disabled {
   color: rgba(255, 255, 255, 0.3);
 }
 
@@ -1757,28 +1757,28 @@ headerbar .linked:not(.vertical):not(.path-bar) > entry:disabled {
   border-image: none;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button {
+headerbar .linked:not(.vertical).path-bar > button {
   margin: 0;
   border-radius: 0;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:hover {
+headerbar .linked:not(.vertical).path-bar > button:hover {
   color: rgba(66, 133, 244, 0.85);
   box-shadow: inset 0 -3px rgba(66, 133, 244, 0.5);
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:hover, headerbar .linked.path-bar:not(.vertical) > button:hover:disabled {
+headerbar .linked:not(.vertical).path-bar > button:hover, headerbar .linked:not(.vertical).path-bar > button:hover:disabled {
   background: none;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:checked {
+headerbar .linked:not(.vertical).path-bar > button:checked {
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 100%, transparent 0%) 0 0 3/0 0 3px;
   background: none;
   color: #4285F4;
   border-radius: 0;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:checked:hover {
+headerbar .linked:not(.vertical).path-bar > button:checked:hover {
   background: none;
 }
 
@@ -2014,11 +2014,11 @@ treeview.view:drop(active) {
   border-color: #18b8ff;
 }
 
-treeview.view.after:drop(active) {
+treeview.view:drop(active).after {
   border-top-style: none;
 }
 
-treeview.view.before:drop(active) {
+treeview.view:drop(active).before {
   border-bottom-style: none;
 }
 
@@ -2530,7 +2530,7 @@ notebook > header tab:hover {
   color: white;
 }
 
-notebook > header tab.reorderable-page:hover {
+notebook > header tab:hover.reorderable-page {
   border-color: rgba(255, 255, 255, 0.12);
   background-color: #2e3034;
 }
@@ -2550,7 +2550,7 @@ notebook > header tab:checked:disabled {
   color: rgba(255, 255, 255, 0.45);
 }
 
-notebook > header tab.reorderable-page:checked {
+notebook > header tab:checked.reorderable-page {
   border-color: rgba(255, 255, 255, 0.12);
   background-color: #333539;
 }
@@ -2701,19 +2701,19 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
   background-color: rgba(255, 255, 255, 0.3);
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
   min-width: 24px;
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
   min-width: 8px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
   min-height: 24px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
   min-height: 8px;
 }
 
@@ -3739,33 +3739,33 @@ messagedialog .titlebar:backdrop {
   color: rgba(255, 255, 255, 0.7);
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button {
+messagedialog .linked:not(.vertical).dialog-action-area > button {
   padding: 4px 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 0;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button:first-child {
+messagedialog .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button:last-child {
+messagedialog .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action {
   color: #4285F4;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action:hover {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action:hover {
   color: #4285F4;
   background-color: transparent;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action:active {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   animation: ripple_effect 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
   color: white;
@@ -3775,21 +3775,21 @@ messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-actio
   background-size: 0% 0%;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action:disabled {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action:disabled {
   opacity: 0.65;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action {
   color: #FF5252;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action:hover {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action:hover {
   color: #FF5252;
   background-color: transparent;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action:active {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   animation: ripple_effect 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
   color: white;
@@ -3799,7 +3799,7 @@ messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-act
   background-size: 0% 0%;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action:disabled {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action:disabled {
   opacity: 0.65;
 }
 
@@ -3808,18 +3808,18 @@ messagedialog.csd.background {
   border-bottom-right-radius: 3px;
 }
 
-messagedialog.csd .linked.dialog-action-area:not(.vertical) > button {
+messagedialog.csd .linked:not(.vertical).dialog-action-area > button {
   padding: 8px 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 0;
 }
 
-messagedialog.csd .linked.dialog-action-area:not(.vertical) > button:first-child {
+messagedialog.csd .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 2px;
   border-top-left-radius: 0;
 }
 
-messagedialog.csd .linked.dialog-action-area:not(.vertical) > button:last-child {
+messagedialog.csd .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 2px;
   border-top-right-radius: 0;
 }
@@ -3997,7 +3997,7 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#46494e);
+  background-image: image(#4b4d51);
   background-size: 1px 1px;
 }
 
@@ -4005,7 +4005,7 @@ paned > separator.wide {
   min-width: 6px;
   min-height: 6px;
   background-color: #292b2e;
-  background-image: image(#46494e), image(#46494e);
+  background-image: image(#4b4d51), image(#4b4d51);
   background-size: 1px 1px, 1px 1px;
 }
 
@@ -4211,11 +4211,11 @@ colorswatch:drop(active) {
   box-shadow: none;
 }
 
-colorswatch.light:drop(active) overlay {
+colorswatch:drop(active).light overlay {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), 0 0 0 2px #18b8ff;
 }
 
-colorswatch.dark:drop(active) overlay {
+colorswatch:drop(active).dark overlay {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), 0 0 0 2px #18b8ff;
 }
 
@@ -4317,7 +4317,7 @@ messagedialog.csd decoration {
   border: 1px solid #1e1f21;
   border-radius: 0;
   box-shadow: inset 0 0 0 2px #36383c, inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #46494e;
+  background-color: #4b4d51;
 }
 
 .budgie-menu button:checked, .nemo-window .nemo-window-pane widget.entry:selected:focus, .nemo-window .nemo-window-pane widget.entry:selected, .view:selected, textview text selection, iconview:selected, flowbox flowboxchild:selected, entry selection, modelbutton.flat:selected,
@@ -4780,15 +4780,15 @@ window.background stack scrolledwindow stackswitcher.stack-switcher button:check
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 0%, transparent 0%) 0 0 0/0 0 0;
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:hover,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:hover,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:hover, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:hover, .nautilus-window headerbar .path-bar-box button:hover {
   background-color: transparent;
   color: white;
   box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.12);
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:active,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:active,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked {
   color: white;
   background-color: transparent;
@@ -4797,18 +4797,18 @@ window.background stack scrolledwindow stackswitcher.stack-switcher button:check
   background-image: radial-gradient(circle farthest-corner at center, rgba(255, 255, 255, 0.12) 10%, transparent 0%);
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked {
   background: none;
   box-shadow: none;
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:backdrop,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:backdrop,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:backdrop, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:backdrop, .nautilus-window headerbar .path-bar-box button:backdrop {
   color: rgba(255, 255, 255, 0.45);
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:backdrop:disabled,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:backdrop:disabled,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:backdrop:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:backdrop:disabled, .nautilus-window headerbar .path-bar-box button:backdrop:disabled {
   color: rgba(255, 255, 255, 0.3);
 }
@@ -4871,11 +4871,11 @@ window.background stack scrolledwindow stackswitcher.stack-switcher button:check
   background-image: radial-gradient(circle farthest-corner at center, rgba(255, 255, 255, 0.08) 10%, transparent 0%);
 }
 
-.nautilus-window .windowhandle .linked.nautilus-path-bar button.current-dir:not(.suggested-action):not(.destructive-action) {
+.nautilus-window .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir {
   color: white;
 }
 
-.nautilus-window .windowhandle .linked.nautilus-path-bar button.current-dir:not(.suggested-action):not(.destructive-action):hover, .nautilus-window .windowhandle .linked.nautilus-path-bar button.current-dir:not(.suggested-action):not(.destructive-action):active {
+.nautilus-window .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir:hover, .nautilus-window .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir:active {
   background: none;
   box-shadow: none;
 }
@@ -5282,7 +5282,7 @@ window.background > box.vertical > overlay > stack > widget > stack widget > box
 
 .category_page_header_filter_box {
   background-image: image(#292b2e);
-  border-image: linear-gradient(to bottom, #46494e, #46494e) 0 0 1 0/0 0 1px 0 stretch;
+  border-image: linear-gradient(to bottom, #4b4d51, #4b4d51) 0 0 1 0/0 0 1px 0 stretch;
 }
 
 .category_page_header_filter_box button {
@@ -5304,7 +5304,7 @@ window.background > box.vertical > overlay > stack > widget > stack widget > box
 
 .application-details-infobar {
   background-image: image(#333539);
-  border-image: linear-gradient(to bottom, #46494e, #46494e) 1 1 1 1/1px 1px 1px 1px stretch;
+  border-image: linear-gradient(to bottom, #4b4d51, #4b4d51) 1 1 1 1/1px 1px 1px 1px stretch;
 }
 
 window.background > box.vertical box.horizontal > box.vertical > scrolledwindow > viewport.frame > list row.event.activatable {
@@ -5954,7 +5954,7 @@ window.background.chromium > textview text selection:disabled, #MozillaGtkWidget
 }
 
 window.background:not(.csd) > widget > separator {
-  color: #46494e;
+  color: #4b4d51;
 }
 
 window.background:not(.csd) > widget > scrollbar {
@@ -5963,17 +5963,17 @@ window.background:not(.csd) > widget > scrollbar {
 
 window.background:not(.csd) > widget > scrollbar,
 window.background:not(.csd) > widget > frame > border {
-  border-color: #46494e;
+  border-color: #4b4d51;
 }
 
 window.background:not(.csd) > widget > button > button {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   border-radius: 3px;
   box-shadow: none;
 }
 
 window.background:not(.csd) > widget > entry {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -5991,7 +5991,7 @@ window.background:not(.csd) > widget > entry:focus {
 }
 
 window.background:not(.csd) > widget > entry:disabled {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   border-image: none;
   background-color: #2e3034;
@@ -5999,7 +5999,7 @@ window.background:not(.csd) > widget > entry:disabled {
 }
 
 window.background:not(.csd) > widget > button > button, window.background:not(.csd) > widget > button.combo > button {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   background-color: #333539;
   color: rgba(255, 255, 255, 0.7);
@@ -6043,7 +6043,7 @@ window.background:not(.csd) > widget > menubar:disabled {
 }
 
 window.background:not(.csd) > widget > frame {
-  color: #46494e;
+  color: #4b4d51;
 }
 
 window.background:not(.csd) > menu,
@@ -6129,7 +6129,7 @@ window.background:not(.csd) > menu > separator {
 #MozillaGtkWidget.background > window.background > menu > separator {
   padding: 0;
   border: none;
-  background-color: #46494e;
+  background-color: #4b4d51;
 }
 
 #MozillaGtkWidget.background > window.background > menu > menuitem > check {
@@ -6205,11 +6205,11 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget border {
-  border-color: #46494e;
+  border-color: #4b4d51;
 }
 
 #MozillaGtkWidget.background > widget separator {
-  background-color: #46494e;
+  background-color: #4b4d51;
 }
 
 #MozillaGtkWidget.background > widget > scrolledwindow > textview {
@@ -6222,7 +6222,7 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget > button > button, #MozillaGtkWidget.background > widget > button.combo > button {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   background-color: #333539;
   color: rgba(255, 255, 255, 0.7);
@@ -6254,7 +6254,7 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget > entry {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -6272,7 +6272,7 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget > entry:disabled {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   box-shadow: none;
   border-image: none;
   background-color: #2e3034;
@@ -6308,7 +6308,7 @@ window.background.chromium headerbar.titlebar button.titlebutton {
 window.background.chromium button {
   border-width: 1px;
   border-style: solid;
-  border-color: #46494e;
+  border-color: #4b4d51;
   color: white;
   background-color: #35383b;
 }
@@ -6321,7 +6321,7 @@ window.background.chromium entry.chromium {
 window.background.chromium entry.chromium {
   color: white;
   border-image: none;
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
 }
 
 window.background.chromium entry.chromium:focus {
@@ -6335,7 +6335,7 @@ window.background.chromium > menubar {
 }
 
 window.background.chromium > menu {
-  border: 1px solid #46494e;
+  border: 1px solid #4b4d51;
   background-color: #333539;
   color: white;
   border-radius: 0;
@@ -6651,11 +6651,11 @@ widget > box.terminal-titlebar > button.image-button, widget > box.terminal-titl
   border: none;
 }
 
-#XfcePanelWindow.xfce4-panel {
+.xfce4-panel#XfcePanelWindow {
   border: 1px solid #212326;
 }
 
-#XfcePanelWindow.xfce4-panel, #XfcePanelWindow.xfce4-panel.marching-ants {
+.xfce4-panel#XfcePanelWindow, .xfce4-panel#XfcePanelWindow.marching-ants {
   transition: none;
 }
 
@@ -6992,7 +6992,7 @@ window.background stack scrolledwindow button.destructive-action:checked {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:not(.combo) {
+window.background stack scrolledwindow :not(stackswitcher).linked button:not(.combo) {
   border-radius: 3px;
   margin: 0 2px;
 }
@@ -7057,7 +7057,7 @@ UnityDecoration.menubar .menuitem *:hover {
   box-shadow: none;
 }
 
-.background:not(.csd) headerbar.inline-toolbar:not(.titlebar) {
+.background:not(.csd) headerbar:not(.titlebar).inline-toolbar {
   border-style: none;
 }
 
diff --git a/src/gtk/3.0/gtk-light.css b/src/gtk/3.0/gtk-light.css
index f5c857f2..e2810c26 100644
--- a/src/gtk/3.0/gtk-light.css
+++ b/src/gtk/3.0/gtk-light.css
@@ -272,7 +272,7 @@ notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), popover.ba
 }
 
 spinbutton:not(.vertical), entry {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -290,7 +290,7 @@ spinbutton:focus:not(.vertical), entry:focus {
 }
 
 spinbutton:disabled:not(.vertical), entry:disabled {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   background-color: #f9f9f9;
@@ -547,8 +547,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button, .sid
 
 .budgie-run-dialog button:hover, .budgie-polkit-dialog button:hover, .budgie-session-dialog button:hover, .background .raven stackswitcher.linked > button:hover, .mate-panel-menu-bar #PanelApplet button:hover:not(.flat), .tilix-search-frame button:hover, .geary-composer-box button:hover:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:hover,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:hover:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:hover, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:hover, window.csd > box.vertical > box.vertical > toolbar.horizontal button:hover,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:hover, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:hover, layouttabbar button:hover, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:hover,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:hover, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:hover, .nautilus-window headerbar .path-bar-box button:hover, messagedialog .linked.dialog-action-area:not(.vertical) > button:hover, .app-notification button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:hover,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:hover, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:hover, layouttabbar button:hover, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:hover,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:hover, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:hover, .nautilus-window headerbar .path-bar-box button:hover, messagedialog .linked:not(.vertical).dialog-action-area > button:hover, .app-notification button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:hover,
 .background .path-bar button:hover, toolbar button:hover, combobox > .linked:not(.vertical) > button.combo:hover:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:hover, .linked > spinbutton:not(.vertical) > button.down:hover, toolbutton button:hover, .osd button:hover, .background .linked.stack-switcher > button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   color: rgba(0, 0, 0, 0.87);
@@ -556,8 +556,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:hover
 
 .budgie-run-dialog button:active, .budgie-polkit-dialog button:active, .budgie-session-dialog button:active, .background .raven stackswitcher.linked > button:active, .mate-panel-menu-bar #PanelApplet button:active:not(.flat), .tilix-search-frame button:active, .geary-composer-box button:active:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:active,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:active:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:active, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:active, window.csd > box.vertical > box.vertical > toolbar.horizontal button:active,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:active, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:active, layouttabbar button:active, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:active,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, messagedialog .linked.dialog-action-area:not(.vertical) > button:active, .app-notification button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:active,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:active, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:active, layouttabbar button:active, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:active,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, messagedialog .linked:not(.vertical).dialog-action-area > button:active, .app-notification button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:active,
 .background .path-bar button:active, toolbar button:active, combobox > .linked:not(.vertical) > button.combo:active:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:active, .linked > spinbutton:not(.vertical) > button.down:active, toolbutton button:active, .osd button:active, .background .linked.stack-switcher > button:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   animation: ripple_effect 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
@@ -569,8 +569,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:activ
 
 .budgie-run-dialog button:disabled, .budgie-polkit-dialog button:disabled, .budgie-session-dialog button:disabled, .background .raven stackswitcher.linked > button:disabled, .mate-panel-menu-bar #PanelApplet button:disabled:not(.flat), .tilix-search-frame button:disabled, .geary-composer-box button:disabled:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:disabled,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:disabled:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:disabled, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:disabled, window.csd > box.vertical > box.vertical > toolbar.horizontal button:disabled,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:disabled, layouttabbar button:disabled, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:disabled,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:disabled, .nautilus-window headerbar .path-bar-box button:disabled, messagedialog .linked.dialog-action-area:not(.vertical) > button:disabled, .app-notification button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:disabled,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:disabled, layouttabbar button:disabled, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:disabled,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:disabled, .nautilus-window headerbar .path-bar-box button:disabled, messagedialog .linked:not(.vertical).dialog-action-area > button:disabled, .app-notification button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:disabled,
 .background .path-bar button:disabled, toolbar button:disabled, combobox > .linked:not(.vertical) > button.combo:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:disabled, .linked > spinbutton:not(.vertical) > button.down:disabled, toolbutton button:disabled, .osd button:disabled, .background .linked.stack-switcher > button:disabled {
   box-shadow: none;
   background-color: transparent;
@@ -579,8 +579,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:disab
 
 .budgie-run-dialog button:checked, .budgie-polkit-dialog button:checked, .budgie-session-dialog button:checked, .background .raven stackswitcher.linked > button:checked, .mate-panel-menu-bar #PanelApplet button:checked:not(.flat), .tilix-search-frame button:checked, .geary-composer-box button:checked:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:checked,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:checked:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:checked, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:checked, window.csd > box.vertical > box.vertical > toolbar.horizontal button:checked,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked, layouttabbar button:checked, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked, messagedialog .linked.dialog-action-area:not(.vertical) > button:checked, .app-notification button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked, layouttabbar button:checked, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked, messagedialog .linked:not(.vertical).dialog-action-area > button:checked, .app-notification button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked,
 .background .path-bar button:checked, toolbar button:checked, combobox > .linked:not(.vertical) > button.combo:checked:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked, .linked > spinbutton:not(.vertical) > button.down:checked, toolbutton button:checked, .osd button:checked, .background .linked.stack-switcher > button:checked {
   color: rgba(0, 0, 0, 0.87);
   background-color: alpha(currentColor, 0.12);
@@ -588,8 +588,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:check
 
 .budgie-run-dialog button:checked:disabled, .budgie-polkit-dialog button:checked:disabled, .budgie-session-dialog button:checked:disabled, .background .raven stackswitcher.linked > button:checked:disabled, .mate-panel-menu-bar #PanelApplet button:checked:disabled:not(.flat), .tilix-search-frame button:checked:disabled, .geary-composer-box button:checked:disabled:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:checked:disabled,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:checked:disabled:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:checked:disabled, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:checked:disabled, window.csd > box.vertical > box.vertical > toolbar.horizontal button:checked:disabled,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked:disabled, layouttabbar button:checked:disabled, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked:disabled,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked:disabled, .nautilus-window headerbar .path-bar-box button:checked:disabled, messagedialog .linked.dialog-action-area:not(.vertical) > button:checked:disabled, .app-notification button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked:disabled,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked:disabled, layouttabbar button:checked:disabled, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked:disabled,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked:disabled, .nautilus-window headerbar .path-bar-box button:checked:disabled, messagedialog .linked:not(.vertical).dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked:disabled,
 .background .path-bar button:checked:disabled, toolbar button:checked:disabled, combobox > .linked:not(.vertical) > button.combo:checked:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked:disabled, .linked > spinbutton:not(.vertical) > button.down:checked:disabled, toolbutton button:checked:disabled, .osd button:checked:disabled, .background .linked.stack-switcher > button:checked:disabled {
   background-color: alpha(currentColor, 0.06);
   color: rgba(0, 0, 0, 0.38);
@@ -676,7 +676,7 @@ button {
   padding: 6px 10px;
   border-radius: 3px;
   font-weight: 500;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
@@ -1202,11 +1202,11 @@ spinbutton:not(.vertical) {
   padding: 0;
 }
 
-.background spinbutton:not(.vertical), .background spinbutton.flat:not(.vertical) {
+.background spinbutton:not(.vertical), .background spinbutton:not(.vertical).flat {
   transition: all 225ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.background spinbutton:not(.vertical) entry, .background spinbutton:not(.vertical) entry:focus, .background spinbutton:not(.vertical) entry:disabled, .background spinbutton:not(.vertical):focus entry, .background spinbutton:not(.vertical):focus entry:focus, .background spinbutton:not(.vertical):focus entry:disabled, .background spinbutton:not(.vertical):disabled entry, .background spinbutton:not(.vertical):disabled entry:focus, .background spinbutton:not(.vertical):disabled entry:disabled, .background spinbutton.flat:not(.vertical) entry, .background spinbutton.flat:not(.vertical) entry:focus, .background spinbutton.flat:not(.vertical) entry:disabled, .background spinbutton.flat:not(.vertical):focus entry, .background spinbutton.flat:not(.vertical):focus entry:focus, .background spinbutton.flat:not(.vertical):focus entry:disabled, .background spinbutton.flat:not(.vertical):disabled entry, .background spinbutton.flat:not(.vertical):disabled entry:focus, .background spinbutton.flat:not(.vertical):disabled entry:disabled {
+.background spinbutton:not(.vertical) entry, .background spinbutton:not(.vertical) entry:focus, .background spinbutton:not(.vertical) entry:disabled, .background spinbutton:not(.vertical):focus entry, .background spinbutton:not(.vertical):focus entry:focus, .background spinbutton:not(.vertical):focus entry:disabled, .background spinbutton:not(.vertical):disabled entry, .background spinbutton:not(.vertical):disabled entry:focus, .background spinbutton:not(.vertical):disabled entry:disabled, .background spinbutton:not(.vertical).flat entry, .background spinbutton:not(.vertical).flat entry:focus, .background spinbutton:not(.vertical).flat entry:disabled, .background spinbutton:not(.vertical).flat:focus entry, .background spinbutton:not(.vertical).flat:focus entry:focus, .background spinbutton:not(.vertical).flat:focus entry:disabled, .background spinbutton:not(.vertical).flat:disabled entry, .background spinbutton:not(.vertical).flat:disabled entry:focus, .background spinbutton:not(.vertical).flat:disabled entry:disabled {
   box-shadow: none;
   background: none;
   border-image: none;
@@ -1297,7 +1297,7 @@ combobox entry.combo {
   border-radius: 2px;
   margin-right: -32px;
   padding-right: 32px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -1315,14 +1315,14 @@ combobox entry.combo:focus {
 }
 
 combobox entry.combo:disabled {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   background-color: #f9f9f9;
   color: rgba(0, 0, 0, 0.38);
 }
 
-combobox > .linked:not(.vertical) > button.combo:not(:only-child) {
+combobox > .linked:not(.vertical) > button:not(:only-child).combo {
   border: none;
   border-image: none;
   box-shadow: none;
@@ -1467,22 +1467,22 @@ window.background stack scrolledwindow .linked:not(stackswitcher) button:not(.co
   box-shadow: none;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:hover:not(.combo), toolbar.primary-toolbar toolitem.raised button:hover, .nemo-window .toolbar button:hover, .primary-toolbar button:hover {
+window.background stack scrolledwindow :not(stackswitcher).linked button:hover:not(.combo), toolbar.primary-toolbar toolitem.raised button:hover, .nemo-window .toolbar button:hover, .primary-toolbar button:hover {
   background-color: rgba(0, 0, 0, 0.15);
   box-shadow: none;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:disabled:not(.combo), toolbar.primary-toolbar toolitem.raised button:disabled, .nemo-window .toolbar button:disabled, .primary-toolbar button:disabled {
+window.background stack scrolledwindow :not(stackswitcher).linked button:disabled:not(.combo), toolbar.primary-toolbar toolitem.raised button:disabled, .nemo-window .toolbar button:disabled, .primary-toolbar button:disabled {
   background-color: transparent;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:active:not(.combo), toolbar.primary-toolbar toolitem.raised button:active, .nemo-window .toolbar button:active, .primary-toolbar button:active, window.background stack scrolledwindow .linked:not(stackswitcher) button:checked:not(.combo), toolbar.primary-toolbar toolitem.raised button:checked, .nemo-window .toolbar button:checked, .primary-toolbar button:checked {
+window.background stack scrolledwindow :not(stackswitcher).linked button:active:not(.combo), toolbar.primary-toolbar toolitem.raised button:active, .nemo-window .toolbar button:active, .primary-toolbar button:active, window.background stack scrolledwindow :not(stackswitcher).linked button:checked:not(.combo), toolbar.primary-toolbar toolitem.raised button:checked, .nemo-window .toolbar button:checked, .primary-toolbar button:checked {
   color: rgba(0, 0, 0, 0.87);
   background-color: rgba(0, 0, 0, 0.2);
   box-shadow: none;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:checked:disabled:not(.combo), .nemo-window .toolbar button:checked:disabled, .primary-toolbar button:checked:disabled, window.background stack scrolledwindow .linked:not(stackswitcher) button:checked:backdrop:not(.combo), .nemo-window .toolbar button:checked:backdrop, .primary-toolbar button:checked:backdrop {
+window.background stack scrolledwindow :not(stackswitcher).linked button:checked:disabled:not(.combo), .nemo-window .toolbar button:checked:disabled, .primary-toolbar button:checked:disabled, window.background stack scrolledwindow :not(stackswitcher).linked button:checked:backdrop:not(.combo), .nemo-window .toolbar button:checked:backdrop, .primary-toolbar button:checked:backdrop {
   color: rgba(0, 0, 0, 0.5);
   background-color: rgba(0, 0, 0, 0.1);
   box-shadow: none;
@@ -1568,33 +1568,33 @@ headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-acti
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 0%, transparent 0%) 0 0 0/0 0 0;
 }
 
-headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:hover {
+headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:hover {
   border-radius: 0;
   color: #4285F4;
   box-shadow: inset 0 -2px alpha(#4285F4, 0.5);
 }
 
-headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:hover {
+headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:hover {
   background-color: transparent;
 }
 
-headerbar.windowhandle viewswitcher button:checked:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:checked, headerbar.windowhandle viewswitcher button:active:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:active {
+headerbar.windowhandle viewswitcher button:checked:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked, headerbar.windowhandle viewswitcher button:active:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:active {
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 100%, transparent 0%) 0 0 2/0 0 2px;
   background: none;
   color: #4285F4;
   border-radius: 0;
 }
 
-headerbar.windowhandle viewswitcher button:checked:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:checked:disabled, headerbar.windowhandle viewswitcher button:active:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:active:disabled {
+headerbar.windowhandle viewswitcher button:checked:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked:disabled, headerbar.windowhandle viewswitcher button:active:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:active:disabled {
   color: rgba(66, 133, 244, 0.35);
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), rgba(66, 133, 244, 0.35) 100%, transparent 0%) 0 0 2/0 0 2px;
 }
 
-headerbar.windowhandle viewswitcher button:checked:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:checked:hover {
+headerbar.windowhandle viewswitcher button:checked:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked:hover {
   background: none;
 }
 
-headerbar.windowhandle viewswitcher button:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:disabled {
+headerbar.windowhandle viewswitcher button:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
@@ -1757,28 +1757,28 @@ headerbar .linked:not(.vertical):not(.path-bar) > entry:disabled {
   border-image: none;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button {
+headerbar .linked:not(.vertical).path-bar > button {
   margin: 0;
   border-radius: 0;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:hover {
+headerbar .linked:not(.vertical).path-bar > button:hover {
   color: rgba(66, 133, 244, 0.85);
   box-shadow: inset 0 -3px rgba(66, 133, 244, 0.5);
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:hover, headerbar .linked.path-bar:not(.vertical) > button:hover:disabled {
+headerbar .linked:not(.vertical).path-bar > button:hover, headerbar .linked:not(.vertical).path-bar > button:hover:disabled {
   background: none;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:checked {
+headerbar .linked:not(.vertical).path-bar > button:checked {
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 100%, transparent 0%) 0 0 3/0 0 3px;
   background: none;
   color: #4285F4;
   border-radius: 0;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:checked:hover {
+headerbar .linked:not(.vertical).path-bar > button:checked:hover {
   background: none;
 }
 
@@ -2014,11 +2014,11 @@ treeview.view:drop(active) {
   border-color: #18b8ff;
 }
 
-treeview.view.after:drop(active) {
+treeview.view:drop(active).after {
   border-top-style: none;
 }
 
-treeview.view.before:drop(active) {
+treeview.view:drop(active).before {
   border-bottom-style: none;
 }
 
@@ -2530,7 +2530,7 @@ notebook > header tab:hover {
   color: rgba(0, 0, 0, 0.87);
 }
 
-notebook > header tab.reorderable-page:hover {
+notebook > header tab:hover.reorderable-page {
   border-color: rgba(0, 0, 0, 0.12);
   background-color: #f9f9f9;
 }
@@ -2550,7 +2550,7 @@ notebook > header tab:checked:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-notebook > header tab.reorderable-page:checked {
+notebook > header tab:checked.reorderable-page {
   border-color: rgba(0, 0, 0, 0.12);
   background-color: #FFFFFF;
 }
@@ -2701,19 +2701,19 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
   background-color: rgba(0, 0, 0, 0.26);
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
   min-width: 24px;
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
   min-width: 8px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
   min-height: 24px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
   min-height: 8px;
 }
 
@@ -3739,33 +3739,33 @@ messagedialog .titlebar:backdrop {
   color: rgba(0, 0, 0, 0.6);
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button {
+messagedialog .linked:not(.vertical).dialog-action-area > button {
   padding: 4px 12px;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button:first-child {
+messagedialog .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button:last-child {
+messagedialog .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action {
   color: #4285F4;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action:hover {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action:hover {
   color: #4285F4;
   background-color: transparent;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action:active {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   animation: ripple_effect 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
   color: white;
@@ -3775,21 +3775,21 @@ messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-actio
   background-size: 0% 0%;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action:disabled {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action:disabled {
   opacity: 0.65;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action {
   color: #FF5252;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action:hover {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action:hover {
   color: #FF5252;
   background-color: transparent;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action:active {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   animation: ripple_effect 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
   color: white;
@@ -3799,7 +3799,7 @@ messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-act
   background-size: 0% 0%;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action:disabled {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action:disabled {
   opacity: 0.65;
 }
 
@@ -3808,18 +3808,18 @@ messagedialog.csd.background {
   border-bottom-right-radius: 3px;
 }
 
-messagedialog.csd .linked.dialog-action-area:not(.vertical) > button {
+messagedialog.csd .linked:not(.vertical).dialog-action-area > button {
   padding: 8px 16px;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
 
-messagedialog.csd .linked.dialog-action-area:not(.vertical) > button:first-child {
+messagedialog.csd .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 2px;
   border-top-left-radius: 0;
 }
 
-messagedialog.csd .linked.dialog-action-area:not(.vertical) > button:last-child {
+messagedialog.csd .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 2px;
   border-top-right-radius: 0;
 }
@@ -3997,7 +3997,7 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#d9d9d9);
+  background-image: image(#e0e0e0);
   background-size: 1px 1px;
 }
 
@@ -4005,7 +4005,7 @@ paned > separator.wide {
   min-width: 6px;
   min-height: 6px;
   background-color: #F2F2F2;
-  background-image: image(#d9d9d9), image(#d9d9d9);
+  background-image: image(#e0e0e0), image(#e0e0e0);
   background-size: 1px 1px, 1px 1px;
 }
 
@@ -4211,11 +4211,11 @@ colorswatch:drop(active) {
   box-shadow: none;
 }
 
-colorswatch.light:drop(active) overlay {
+colorswatch:drop(active).light overlay {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08), 0 0 0 2px #18b8ff;
 }
 
-colorswatch.dark:drop(active) overlay {
+colorswatch:drop(active).dark overlay {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08), 0 0 0 2px #18b8ff;
 }
 
@@ -4317,7 +4317,7 @@ messagedialog.csd decoration {
   border: 1px solid silver;
   border-radius: 0;
   box-shadow: inset 0 0 0 2px #eeeeee, inset 0 1px rgba(255, 255, 255, 0.35);
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
 }
 
 .budgie-menu button:checked, .nemo-window .nemo-window-pane widget.entry:selected:focus, .nemo-window .nemo-window-pane widget.entry:selected, .view:selected, textview text selection, iconview:selected, flowbox flowboxchild:selected, entry selection, modelbutton.flat:selected,
@@ -4780,15 +4780,15 @@ window.background stack scrolledwindow stackswitcher.stack-switcher button:check
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 0%, transparent 0%) 0 0 0/0 0 0;
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:hover,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:hover,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:hover, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:hover, .nautilus-window headerbar .path-bar-box button:hover {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.87);
   box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:active,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:active,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked {
   color: rgba(0, 0, 0, 0.87);
   background-color: transparent;
@@ -4797,18 +4797,18 @@ window.background stack scrolledwindow stackswitcher.stack-switcher button:check
   background-image: radial-gradient(circle farthest-corner at center, rgba(0, 0, 0, 0.12) 10%, transparent 0%);
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked {
   background: none;
   box-shadow: none;
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:backdrop,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:backdrop,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:backdrop, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:backdrop, .nautilus-window headerbar .path-bar-box button:backdrop {
   color: rgba(0, 0, 0, 0.38);
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:backdrop:disabled,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:backdrop:disabled,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:backdrop:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:backdrop:disabled, .nautilus-window headerbar .path-bar-box button:backdrop:disabled {
   color: rgba(0, 0, 0, 0.26);
 }
@@ -4871,11 +4871,11 @@ window.background stack scrolledwindow stackswitcher.stack-switcher button:check
   background-image: radial-gradient(circle farthest-corner at center, rgba(0, 0, 0, 0.08) 10%, transparent 0%);
 }
 
-.nautilus-window .windowhandle .linked.nautilus-path-bar button.current-dir:not(.suggested-action):not(.destructive-action) {
+.nautilus-window .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir {
   color: rgba(0, 0, 0, 0.87);
 }
 
-.nautilus-window .windowhandle .linked.nautilus-path-bar button.current-dir:not(.suggested-action):not(.destructive-action):hover, .nautilus-window .windowhandle .linked.nautilus-path-bar button.current-dir:not(.suggested-action):not(.destructive-action):active {
+.nautilus-window .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir:hover, .nautilus-window .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir:active {
   background: none;
   box-shadow: none;
 }
@@ -5282,7 +5282,7 @@ window.background > box.vertical > overlay > stack > widget > stack widget > box
 
 .category_page_header_filter_box {
   background-image: image(#F2F2F2);
-  border-image: linear-gradient(to bottom, #d9d9d9, #d9d9d9) 0 0 1 0/0 0 1px 0 stretch;
+  border-image: linear-gradient(to bottom, #e0e0e0, #e0e0e0) 0 0 1 0/0 0 1px 0 stretch;
 }
 
 .category_page_header_filter_box button {
@@ -5304,7 +5304,7 @@ window.background > box.vertical > overlay > stack > widget > stack widget > box
 
 .application-details-infobar {
   background-image: image(#FFFFFF);
-  border-image: linear-gradient(to bottom, #d9d9d9, #d9d9d9) 1 1 1 1/1px 1px 1px 1px stretch;
+  border-image: linear-gradient(to bottom, #e0e0e0, #e0e0e0) 1 1 1 1/1px 1px 1px 1px stretch;
 }
 
 window.background > box.vertical box.horizontal > box.vertical > scrolledwindow > viewport.frame > list row.event.activatable {
@@ -5954,7 +5954,7 @@ window.background.chromium > textview text selection:disabled, #MozillaGtkWidget
 }
 
 window.background:not(.csd) > widget > separator {
-  color: #d9d9d9;
+  color: #e0e0e0;
 }
 
 window.background:not(.csd) > widget > scrollbar {
@@ -5963,17 +5963,17 @@ window.background:not(.csd) > widget > scrollbar {
 
 window.background:not(.csd) > widget > scrollbar,
 window.background:not(.csd) > widget > frame > border {
-  border-color: #d9d9d9;
+  border-color: #e0e0e0;
 }
 
 window.background:not(.csd) > widget > button > button {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   border-radius: 3px;
   box-shadow: none;
 }
 
 window.background:not(.csd) > widget > entry {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -5991,7 +5991,7 @@ window.background:not(.csd) > widget > entry:focus {
 }
 
 window.background:not(.csd) > widget > entry:disabled {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   background-color: #f9f9f9;
@@ -5999,7 +5999,7 @@ window.background:not(.csd) > widget > entry:disabled {
 }
 
 window.background:not(.csd) > widget > button > button, window.background:not(.csd) > widget > button.combo > button {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
@@ -6043,7 +6043,7 @@ window.background:not(.csd) > widget > menubar:disabled {
 }
 
 window.background:not(.csd) > widget > frame {
-  color: #d9d9d9;
+  color: #e0e0e0;
 }
 
 window.background:not(.csd) > menu,
@@ -6129,7 +6129,7 @@ window.background:not(.csd) > menu > separator {
 #MozillaGtkWidget.background > window.background > menu > separator {
   padding: 0;
   border: none;
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
 }
 
 #MozillaGtkWidget.background > window.background > menu > menuitem > check {
@@ -6205,11 +6205,11 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget border {
-  border-color: #d9d9d9;
+  border-color: #e0e0e0;
 }
 
 #MozillaGtkWidget.background > widget separator {
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
 }
 
 #MozillaGtkWidget.background > widget > scrolledwindow > textview {
@@ -6222,7 +6222,7 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget > button > button, #MozillaGtkWidget.background > widget > button.combo > button {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
@@ -6254,7 +6254,7 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget > entry {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -6272,7 +6272,7 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget > entry:disabled {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   background-color: #f9f9f9;
@@ -6308,7 +6308,7 @@ window.background.chromium headerbar.titlebar button.titlebutton {
 window.background.chromium button {
   border-width: 1px;
   border-style: solid;
-  border-color: #d9d9d9;
+  border-color: #e0e0e0;
   color: rgba(0, 0, 0, 0.87);
   background-color: white;
 }
@@ -6321,7 +6321,7 @@ window.background.chromium entry.chromium {
 window.background.chromium entry.chromium {
   color: rgba(0, 0, 0, 0.87);
   border-image: none;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
 }
 
 window.background.chromium entry.chromium:focus {
@@ -6335,7 +6335,7 @@ window.background.chromium > menubar {
 }
 
 window.background.chromium > menu {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.87);
   border-radius: 0;
@@ -6651,11 +6651,11 @@ widget > box.terminal-titlebar > button.image-button, widget > box.terminal-titl
   border: none;
 }
 
-#XfcePanelWindow.xfce4-panel {
+.xfce4-panel#XfcePanelWindow {
   border: 1px solid #f2f2f2;
 }
 
-#XfcePanelWindow.xfce4-panel, #XfcePanelWindow.xfce4-panel.marching-ants {
+.xfce4-panel#XfcePanelWindow, .xfce4-panel#XfcePanelWindow.marching-ants {
   transition: none;
 }
 
@@ -6992,7 +6992,7 @@ window.background stack scrolledwindow button.destructive-action:checked {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08);
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:not(.combo) {
+window.background stack scrolledwindow :not(stackswitcher).linked button:not(.combo) {
   border-radius: 3px;
   margin: 0 2px;
 }
@@ -7057,7 +7057,7 @@ UnityDecoration.menubar .menuitem *:hover {
   box-shadow: none;
 }
 
-.background:not(.csd) headerbar.inline-toolbar:not(.titlebar) {
+.background:not(.csd) headerbar:not(.titlebar).inline-toolbar {
   border-style: none;
 }
 
diff --git a/src/gtk/3.0/gtk.css b/src/gtk/3.0/gtk.css
index dceda044..5d171dec 100644
--- a/src/gtk/3.0/gtk.css
+++ b/src/gtk/3.0/gtk.css
@@ -272,7 +272,7 @@ notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), popover.ba
 }
 
 spinbutton:not(.vertical), entry {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -290,7 +290,7 @@ spinbutton:focus:not(.vertical), entry:focus {
 }
 
 spinbutton:disabled:not(.vertical), entry:disabled {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   background-color: #f9f9f9;
@@ -547,8 +547,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button, .sid
 
 .budgie-run-dialog button:hover, .budgie-polkit-dialog button:hover, .budgie-session-dialog button:hover, .background .raven stackswitcher.linked > button:hover, .mate-panel-menu-bar #PanelApplet button:hover:not(.flat), .tilix-search-frame button:hover, .geary-composer-box button:hover:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:hover,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:hover:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:hover, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:hover, window.csd > box.vertical > box.vertical > toolbar.horizontal button:hover,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:hover, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:hover, layouttabbar button:hover, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:hover,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:hover, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:hover, .nautilus-window headerbar .path-bar-box button:hover, messagedialog .linked.dialog-action-area:not(.vertical) > button:hover, .app-notification button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:hover,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:hover, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:hover, layouttabbar button:hover, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:hover,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:hover, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:hover, .nautilus-window headerbar .path-bar-box button:hover, messagedialog .linked:not(.vertical).dialog-action-area > button:hover, .app-notification button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:hover,
 .background .path-bar button:hover, toolbar button:hover, combobox > .linked:not(.vertical) > button.combo:hover:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:hover, .linked > spinbutton:not(.vertical) > button.down:hover, toolbutton button:hover, .osd button:hover, .background .linked.stack-switcher > button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   color: rgba(0, 0, 0, 0.87);
@@ -556,8 +556,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:hover
 
 .budgie-run-dialog button:active, .budgie-polkit-dialog button:active, .budgie-session-dialog button:active, .background .raven stackswitcher.linked > button:active, .mate-panel-menu-bar #PanelApplet button:active:not(.flat), .tilix-search-frame button:active, .geary-composer-box button:active:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:active,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:active:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:active, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:active, window.csd > box.vertical > box.vertical > toolbar.horizontal button:active,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:active, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:active, layouttabbar button:active, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:active,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, messagedialog .linked.dialog-action-area:not(.vertical) > button:active, .app-notification button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:active,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:active, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:active, layouttabbar button:active, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:active,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, messagedialog .linked:not(.vertical).dialog-action-area > button:active, .app-notification button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:active,
 .background .path-bar button:active, toolbar button:active, combobox > .linked:not(.vertical) > button.combo:active:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:active, .linked > spinbutton:not(.vertical) > button.down:active, toolbutton button:active, .osd button:active, .background .linked.stack-switcher > button:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   animation: ripple_effect 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
@@ -569,8 +569,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:activ
 
 .budgie-run-dialog button:disabled, .budgie-polkit-dialog button:disabled, .budgie-session-dialog button:disabled, .background .raven stackswitcher.linked > button:disabled, .mate-panel-menu-bar #PanelApplet button:disabled:not(.flat), .tilix-search-frame button:disabled, .geary-composer-box button:disabled:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:disabled,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:disabled:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:disabled, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:disabled, window.csd > box.vertical > box.vertical > toolbar.horizontal button:disabled,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:disabled, layouttabbar button:disabled, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:disabled,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:disabled, .nautilus-window headerbar .path-bar-box button:disabled, messagedialog .linked.dialog-action-area:not(.vertical) > button:disabled, .app-notification button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:disabled,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:disabled, layouttabbar button:disabled, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:disabled,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:disabled, .nautilus-window headerbar .path-bar-box button:disabled, messagedialog .linked:not(.vertical).dialog-action-area > button:disabled, .app-notification button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:disabled,
 .background .path-bar button:disabled, toolbar button:disabled, combobox > .linked:not(.vertical) > button.combo:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:disabled, .linked > spinbutton:not(.vertical) > button.down:disabled, toolbutton button:disabled, .osd button:disabled, .background .linked.stack-switcher > button:disabled {
   box-shadow: none;
   background-color: transparent;
@@ -579,8 +579,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:disab
 
 .budgie-run-dialog button:checked, .budgie-polkit-dialog button:checked, .budgie-session-dialog button:checked, .background .raven stackswitcher.linked > button:checked, .mate-panel-menu-bar #PanelApplet button:checked:not(.flat), .tilix-search-frame button:checked, .geary-composer-box button:checked:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:checked,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:checked:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:checked, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:checked, window.csd > box.vertical > box.vertical > toolbar.horizontal button:checked,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked, layouttabbar button:checked, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked, messagedialog .linked.dialog-action-area:not(.vertical) > button:checked, .app-notification button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked, layouttabbar button:checked, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked, messagedialog .linked:not(.vertical).dialog-action-area > button:checked, .app-notification button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked,
 .background .path-bar button:checked, toolbar button:checked, combobox > .linked:not(.vertical) > button.combo:checked:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked, .linked > spinbutton:not(.vertical) > button.down:checked, toolbutton button:checked, .osd button:checked, .background .linked.stack-switcher > button:checked {
   color: rgba(0, 0, 0, 0.87);
   background-color: alpha(currentColor, 0.12);
@@ -588,8 +588,8 @@ window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:check
 
 .budgie-run-dialog button:checked:disabled, .budgie-polkit-dialog button:checked:disabled, .budgie-session-dialog button:checked:disabled, .background .raven stackswitcher.linked > button:checked:disabled, .mate-panel-menu-bar #PanelApplet button:checked:disabled:not(.flat), .tilix-search-frame button:checked:disabled, .geary-composer-box button:checked:disabled:not(.combo), window.background > box.vertical > toolbar.primary-toolbar toolitem > box.horizontal:not(.linked) > button.toggle:checked:disabled,
 window.background > box.vertical > toolbar.primary-toolbar toolitem > .linked > button:checked:disabled:not(.toggle):not(.raised):not(.flat), window.background > box.vertical > toolbar.primary-toolbar toolitem button.flat.scale:checked:disabled, window.background > box.vertical > toolbar.primary-toolbar toolitem .linked > button.image-button.raised:checked:disabled, window.csd > box.vertical > box.vertical > toolbar.horizontal button:checked:disabled,
-window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked:disabled, layouttabbar button:checked:disabled, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked:disabled,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked:disabled, .nautilus-window headerbar .path-bar-box button:checked:disabled, messagedialog .linked.dialog-action-area:not(.vertical) > button:checked:disabled, .app-notification button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked:disabled,
+window.solid-csd > box.vertical > box.vertical > toolbar.horizontal button:checked:disabled, .sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar button.image-button:checked:disabled, layouttabbar button:checked:disabled, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked:disabled,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked:disabled, .nautilus-window headerbar .path-bar-box button:checked:disabled, messagedialog .linked:not(.vertical).dialog-action-area > button:checked:disabled, .app-notification button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), .caja-pathbar button:checked:disabled,
 .background .path-bar button:checked:disabled, toolbar button:checked:disabled, combobox > .linked:not(.vertical) > button.combo:checked:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked:disabled, .linked > spinbutton:not(.vertical) > button.down:checked:disabled, toolbutton button:checked:disabled, .osd button:checked:disabled, .background .linked.stack-switcher > button:checked:disabled {
   background-color: alpha(currentColor, 0.06);
   color: rgba(0, 0, 0, 0.38);
@@ -676,7 +676,7 @@ button {
   padding: 6px 10px;
   border-radius: 3px;
   font-weight: 500;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
@@ -1202,11 +1202,11 @@ spinbutton:not(.vertical) {
   padding: 0;
 }
 
-.background spinbutton:not(.vertical), .background spinbutton.flat:not(.vertical) {
+.background spinbutton:not(.vertical), .background spinbutton:not(.vertical).flat {
   transition: all 225ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.background spinbutton:not(.vertical) entry, .background spinbutton:not(.vertical) entry:focus, .background spinbutton:not(.vertical) entry:disabled, .background spinbutton:not(.vertical):focus entry, .background spinbutton:not(.vertical):focus entry:focus, .background spinbutton:not(.vertical):focus entry:disabled, .background spinbutton:not(.vertical):disabled entry, .background spinbutton:not(.vertical):disabled entry:focus, .background spinbutton:not(.vertical):disabled entry:disabled, .background spinbutton.flat:not(.vertical) entry, .background spinbutton.flat:not(.vertical) entry:focus, .background spinbutton.flat:not(.vertical) entry:disabled, .background spinbutton.flat:not(.vertical):focus entry, .background spinbutton.flat:not(.vertical):focus entry:focus, .background spinbutton.flat:not(.vertical):focus entry:disabled, .background spinbutton.flat:not(.vertical):disabled entry, .background spinbutton.flat:not(.vertical):disabled entry:focus, .background spinbutton.flat:not(.vertical):disabled entry:disabled {
+.background spinbutton:not(.vertical) entry, .background spinbutton:not(.vertical) entry:focus, .background spinbutton:not(.vertical) entry:disabled, .background spinbutton:not(.vertical):focus entry, .background spinbutton:not(.vertical):focus entry:focus, .background spinbutton:not(.vertical):focus entry:disabled, .background spinbutton:not(.vertical):disabled entry, .background spinbutton:not(.vertical):disabled entry:focus, .background spinbutton:not(.vertical):disabled entry:disabled, .background spinbutton:not(.vertical).flat entry, .background spinbutton:not(.vertical).flat entry:focus, .background spinbutton:not(.vertical).flat entry:disabled, .background spinbutton:not(.vertical).flat:focus entry, .background spinbutton:not(.vertical).flat:focus entry:focus, .background spinbutton:not(.vertical).flat:focus entry:disabled, .background spinbutton:not(.vertical).flat:disabled entry, .background spinbutton:not(.vertical).flat:disabled entry:focus, .background spinbutton:not(.vertical).flat:disabled entry:disabled {
   box-shadow: none;
   background: none;
   border-image: none;
@@ -1297,7 +1297,7 @@ combobox entry.combo {
   border-radius: 2px;
   margin-right: -32px;
   padding-right: 32px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -1315,14 +1315,14 @@ combobox entry.combo:focus {
 }
 
 combobox entry.combo:disabled {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   background-color: #f9f9f9;
   color: rgba(0, 0, 0, 0.38);
 }
 
-combobox > .linked:not(.vertical) > button.combo:not(:only-child) {
+combobox > .linked:not(.vertical) > button:not(:only-child).combo {
   border: none;
   border-image: none;
   box-shadow: none;
@@ -1467,22 +1467,22 @@ window.background stack scrolledwindow .linked:not(stackswitcher) button:not(.co
   box-shadow: none;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:hover:not(.combo), toolbar.primary-toolbar toolitem.raised button:hover, .nemo-window .toolbar button:hover, .primary-toolbar button:hover {
+window.background stack scrolledwindow :not(stackswitcher).linked button:hover:not(.combo), toolbar.primary-toolbar toolitem.raised button:hover, .nemo-window .toolbar button:hover, .primary-toolbar button:hover {
   background-color: rgba(0, 0, 0, 0.15);
   box-shadow: none;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:disabled:not(.combo), toolbar.primary-toolbar toolitem.raised button:disabled, .nemo-window .toolbar button:disabled, .primary-toolbar button:disabled {
+window.background stack scrolledwindow :not(stackswitcher).linked button:disabled:not(.combo), toolbar.primary-toolbar toolitem.raised button:disabled, .nemo-window .toolbar button:disabled, .primary-toolbar button:disabled {
   background-color: transparent;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:active:not(.combo), toolbar.primary-toolbar toolitem.raised button:active, .nemo-window .toolbar button:active, .primary-toolbar button:active, window.background stack scrolledwindow .linked:not(stackswitcher) button:checked:not(.combo), toolbar.primary-toolbar toolitem.raised button:checked, .nemo-window .toolbar button:checked, .primary-toolbar button:checked {
+window.background stack scrolledwindow :not(stackswitcher).linked button:active:not(.combo), toolbar.primary-toolbar toolitem.raised button:active, .nemo-window .toolbar button:active, .primary-toolbar button:active, window.background stack scrolledwindow :not(stackswitcher).linked button:checked:not(.combo), toolbar.primary-toolbar toolitem.raised button:checked, .nemo-window .toolbar button:checked, .primary-toolbar button:checked {
   color: rgba(0, 0, 0, 0.87);
   background-color: rgba(0, 0, 0, 0.2);
   box-shadow: none;
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:checked:disabled:not(.combo), .nemo-window .toolbar button:checked:disabled, .primary-toolbar button:checked:disabled, window.background stack scrolledwindow .linked:not(stackswitcher) button:checked:backdrop:not(.combo), .nemo-window .toolbar button:checked:backdrop, .primary-toolbar button:checked:backdrop {
+window.background stack scrolledwindow :not(stackswitcher).linked button:checked:disabled:not(.combo), .nemo-window .toolbar button:checked:disabled, .primary-toolbar button:checked:disabled, window.background stack scrolledwindow :not(stackswitcher).linked button:checked:backdrop:not(.combo), .nemo-window .toolbar button:checked:backdrop, .primary-toolbar button:checked:backdrop {
   color: rgba(0, 0, 0, 0.5);
   background-color: rgba(0, 0, 0, 0.1);
   box-shadow: none;
@@ -1568,33 +1568,33 @@ headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-acti
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 0%, transparent 0%) 0 0 0/0 0 0;
 }
 
-headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:hover {
+headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:hover {
   border-radius: 0;
   color: #4285F4;
   box-shadow: inset 0 -2px alpha(#4285F4, 0.5);
 }
 
-headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:hover {
+headerbar.windowhandle viewswitcher button:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:hover {
   background-color: transparent;
 }
 
-headerbar.windowhandle viewswitcher button:checked:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:checked, headerbar.windowhandle viewswitcher button:active:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:active {
+headerbar.windowhandle viewswitcher button:checked:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked, headerbar.windowhandle viewswitcher button:active:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:active {
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 100%, transparent 0%) 0 0 2/0 0 2px;
   background: none;
   color: #4285F4;
   border-radius: 0;
 }
 
-headerbar.windowhandle viewswitcher button:checked:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:checked:disabled, headerbar.windowhandle viewswitcher button:active:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:active:disabled {
+headerbar.windowhandle viewswitcher button:checked:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked:disabled, headerbar.windowhandle viewswitcher button:active:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:active:disabled {
   color: rgba(66, 133, 244, 0.35);
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), rgba(66, 133, 244, 0.35) 100%, transparent 0%) 0 0 2/0 0 2px;
 }
 
-headerbar.windowhandle viewswitcher button:checked:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:checked:hover {
+headerbar.windowhandle viewswitcher button:checked:hover:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked:hover {
   background: none;
 }
 
-headerbar.windowhandle viewswitcher button:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked.stack-switcher:not(.vertical):not(.path-bar) > button:disabled {
+headerbar.windowhandle viewswitcher button:disabled:not(.titlebutton):not(.suggested-action):not(.destructive-action), headerbar .linked:not(.vertical):not(.path-bar).stack-switcher > button:disabled {
   color: rgba(255, 255, 255, 0.3);
 }
 
@@ -1757,28 +1757,28 @@ headerbar .linked:not(.vertical):not(.path-bar) > entry:disabled {
   border-image: none;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button {
+headerbar .linked:not(.vertical).path-bar > button {
   margin: 0;
   border-radius: 0;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:hover {
+headerbar .linked:not(.vertical).path-bar > button:hover {
   color: rgba(66, 133, 244, 0.85);
   box-shadow: inset 0 -3px rgba(66, 133, 244, 0.5);
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:hover, headerbar .linked.path-bar:not(.vertical) > button:hover:disabled {
+headerbar .linked:not(.vertical).path-bar > button:hover, headerbar .linked:not(.vertical).path-bar > button:hover:disabled {
   background: none;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:checked {
+headerbar .linked:not(.vertical).path-bar > button:checked {
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 100%, transparent 0%) 0 0 3/0 0 3px;
   background: none;
   color: #4285F4;
   border-radius: 0;
 }
 
-headerbar .linked.path-bar:not(.vertical) > button:checked:hover {
+headerbar .linked:not(.vertical).path-bar > button:checked:hover {
   background: none;
 }
 
@@ -2014,11 +2014,11 @@ treeview.view:drop(active) {
   border-color: #18b8ff;
 }
 
-treeview.view.after:drop(active) {
+treeview.view:drop(active).after {
   border-top-style: none;
 }
 
-treeview.view.before:drop(active) {
+treeview.view:drop(active).before {
   border-bottom-style: none;
 }
 
@@ -2530,7 +2530,7 @@ notebook > header tab:hover {
   color: rgba(0, 0, 0, 0.87);
 }
 
-notebook > header tab.reorderable-page:hover {
+notebook > header tab:hover.reorderable-page {
   border-color: rgba(0, 0, 0, 0.12);
   background-color: #f9f9f9;
 }
@@ -2550,7 +2550,7 @@ notebook > header tab:checked:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-notebook > header tab.reorderable-page:checked {
+notebook > header tab:checked.reorderable-page {
   border-color: rgba(0, 0, 0, 0.12);
   background-color: #FFFFFF;
 }
@@ -2701,19 +2701,19 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
   background-color: rgba(0, 0, 0, 0.26);
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
   min-width: 24px;
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
   min-width: 8px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
   min-height: 24px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
   min-height: 8px;
 }
 
@@ -3739,33 +3739,33 @@ messagedialog .titlebar:backdrop {
   color: rgba(0, 0, 0, 0.6);
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button {
+messagedialog .linked:not(.vertical).dialog-action-area > button {
   padding: 4px 12px;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button:first-child {
+messagedialog .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button:last-child {
+messagedialog .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action {
   color: #4285F4;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action:hover {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action:hover {
   color: #4285F4;
   background-color: transparent;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action:active {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   animation: ripple_effect 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
   color: white;
@@ -3775,21 +3775,21 @@ messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-actio
   background-size: 0% 0%;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.suggested-action:disabled {
+messagedialog .linked:not(.vertical).dialog-action-area > button.suggested-action:disabled {
   opacity: 0.65;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action {
   color: #FF5252;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action:hover {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action:hover {
   color: #FF5252;
   background-color: transparent;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action:active {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
   animation: ripple_effect 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
   color: white;
@@ -3799,7 +3799,7 @@ messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-act
   background-size: 0% 0%;
 }
 
-messagedialog .linked.dialog-action-area:not(.vertical) > button.destructive-action:disabled {
+messagedialog .linked:not(.vertical).dialog-action-area > button.destructive-action:disabled {
   opacity: 0.65;
 }
 
@@ -3808,18 +3808,18 @@ messagedialog.csd.background {
   border-bottom-right-radius: 3px;
 }
 
-messagedialog.csd .linked.dialog-action-area:not(.vertical) > button {
+messagedialog.csd .linked:not(.vertical).dialog-action-area > button {
   padding: 8px 16px;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
 
-messagedialog.csd .linked.dialog-action-area:not(.vertical) > button:first-child {
+messagedialog.csd .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 2px;
   border-top-left-radius: 0;
 }
 
-messagedialog.csd .linked.dialog-action-area:not(.vertical) > button:last-child {
+messagedialog.csd .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 2px;
   border-top-right-radius: 0;
 }
@@ -3997,7 +3997,7 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#d9d9d9);
+  background-image: image(#e0e0e0);
   background-size: 1px 1px;
 }
 
@@ -4005,7 +4005,7 @@ paned > separator.wide {
   min-width: 6px;
   min-height: 6px;
   background-color: #F2F2F2;
-  background-image: image(#d9d9d9), image(#d9d9d9);
+  background-image: image(#e0e0e0), image(#e0e0e0);
   background-size: 1px 1px, 1px 1px;
 }
 
@@ -4211,11 +4211,11 @@ colorswatch:drop(active) {
   box-shadow: none;
 }
 
-colorswatch.light:drop(active) overlay {
+colorswatch:drop(active).light overlay {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), 0 0 0 2px #18b8ff;
 }
 
-colorswatch.dark:drop(active) overlay {
+colorswatch:drop(active).dark overlay {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), 0 0 0 2px #18b8ff;
 }
 
@@ -4317,7 +4317,7 @@ messagedialog.csd decoration {
   border: 1px solid #1d1d1d;
   border-radius: 0;
   box-shadow: inset 0 0 0 2px #363636, inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
 }
 
 .budgie-menu button:checked, .nemo-window .nemo-window-pane widget.entry:selected:focus, .nemo-window .nemo-window-pane widget.entry:selected, .view:selected, textview text selection, iconview:selected, flowbox flowboxchild:selected, entry selection, modelbutton.flat:selected,
@@ -4780,15 +4780,15 @@ window.background stack scrolledwindow stackswitcher.stack-switcher button:check
   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #4285F4 0%, transparent 0%) 0 0 0/0 0 0;
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:hover,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:hover,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:hover, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:hover, .nautilus-window headerbar .path-bar-box button:hover {
   background-color: transparent;
   color: white;
   box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.12);
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:active,
-.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, .nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:active,
+.nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:active, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:active, .nautilus-window headerbar .path-bar-box button:active, .nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked {
   color: white;
   background-color: transparent;
@@ -4797,18 +4797,18 @@ window.background stack scrolledwindow stackswitcher.stack-switcher button:check
   background-image: radial-gradient(circle farthest-corner at center, rgba(255, 255, 255, 0.12) 10%, transparent 0%);
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:checked,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:checked,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:checked, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:checked, .nautilus-window headerbar .path-bar-box button:checked {
   background: none;
   box-shadow: none;
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:backdrop,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:backdrop,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:backdrop, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:backdrop, .nautilus-window headerbar .path-bar-box button:backdrop {
   color: rgba(255, 255, 255, 0.45);
 }
 
-.nemo-window .primary-toolbar .linked.path-bar:not(.vertical):not(.stack-switcher) button:backdrop:disabled,
+.nemo-window .primary-toolbar .linked:not(.vertical):not(.stack-switcher).path-bar button:backdrop:disabled,
 .nemo-window .primary-toolbar widget.linked.raised:not(.vertical):not(.path-bar) button:backdrop:disabled, .nautilus-window headerbar .path-bar-box .linked.nautilus-path-bar button.text-button:backdrop:disabled, .nautilus-window headerbar .path-bar-box button:backdrop:disabled {
   color: rgba(255, 255, 255, 0.3);
 }
@@ -4871,11 +4871,11 @@ window.background stack scrolledwindow stackswitcher.stack-switcher button:check
   background-image: radial-gradient(circle farthest-corner at center, rgba(255, 255, 255, 0.08) 10%, transparent 0%);
 }
 
-.nautilus-window .windowhandle .linked.nautilus-path-bar button.current-dir:not(.suggested-action):not(.destructive-action) {
+.nautilus-window .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir {
   color: white;
 }
 
-.nautilus-window .windowhandle .linked.nautilus-path-bar button.current-dir:not(.suggested-action):not(.destructive-action):hover, .nautilus-window .windowhandle .linked.nautilus-path-bar button.current-dir:not(.suggested-action):not(.destructive-action):active {
+.nautilus-window .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir:hover, .nautilus-window .windowhandle .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action).current-dir:active {
   background: none;
   box-shadow: none;
 }
@@ -5282,7 +5282,7 @@ window.background > box.vertical > overlay > stack > widget > stack widget > box
 
 .category_page_header_filter_box {
   background-image: image(#F2F2F2);
-  border-image: linear-gradient(to bottom, #d9d9d9, #d9d9d9) 0 0 1 0/0 0 1px 0 stretch;
+  border-image: linear-gradient(to bottom, #e0e0e0, #e0e0e0) 0 0 1 0/0 0 1px 0 stretch;
 }
 
 .category_page_header_filter_box button {
@@ -5304,7 +5304,7 @@ window.background > box.vertical > overlay > stack > widget > stack widget > box
 
 .application-details-infobar {
   background-image: image(#FFFFFF);
-  border-image: linear-gradient(to bottom, #d9d9d9, #d9d9d9) 1 1 1 1/1px 1px 1px 1px stretch;
+  border-image: linear-gradient(to bottom, #e0e0e0, #e0e0e0) 1 1 1 1/1px 1px 1px 1px stretch;
 }
 
 window.background > box.vertical box.horizontal > box.vertical > scrolledwindow > viewport.frame > list row.event.activatable {
@@ -5954,7 +5954,7 @@ window.background.chromium > textview text selection:disabled, #MozillaGtkWidget
 }
 
 window.background:not(.csd) > widget > separator {
-  color: #d9d9d9;
+  color: #e0e0e0;
 }
 
 window.background:not(.csd) > widget > scrollbar {
@@ -5963,17 +5963,17 @@ window.background:not(.csd) > widget > scrollbar {
 
 window.background:not(.csd) > widget > scrollbar,
 window.background:not(.csd) > widget > frame > border {
-  border-color: #d9d9d9;
+  border-color: #e0e0e0;
 }
 
 window.background:not(.csd) > widget > button > button {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   border-radius: 3px;
   box-shadow: none;
 }
 
 window.background:not(.csd) > widget > entry {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -5991,7 +5991,7 @@ window.background:not(.csd) > widget > entry:focus {
 }
 
 window.background:not(.csd) > widget > entry:disabled {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   background-color: #f9f9f9;
@@ -5999,7 +5999,7 @@ window.background:not(.csd) > widget > entry:disabled {
 }
 
 window.background:not(.csd) > widget > button > button, window.background:not(.csd) > widget > button.combo > button {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
@@ -6043,7 +6043,7 @@ window.background:not(.csd) > widget > menubar:disabled {
 }
 
 window.background:not(.csd) > widget > frame {
-  color: #d9d9d9;
+  color: #e0e0e0;
 }
 
 window.background:not(.csd) > menu,
@@ -6129,7 +6129,7 @@ window.background:not(.csd) > menu > separator {
 #MozillaGtkWidget.background > window.background > menu > separator {
   padding: 0;
   border: none;
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
 }
 
 #MozillaGtkWidget.background > window.background > menu > menuitem > check {
@@ -6205,11 +6205,11 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget border {
-  border-color: #d9d9d9;
+  border-color: #e0e0e0;
 }
 
 #MozillaGtkWidget.background > widget separator {
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
 }
 
 #MozillaGtkWidget.background > widget > scrolledwindow > textview {
@@ -6222,7 +6222,7 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget > button > button, #MozillaGtkWidget.background > widget > button.combo > button {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
@@ -6254,7 +6254,7 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget > entry {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   border-radius: 3px;
@@ -6272,7 +6272,7 @@ window.background:not(.csd) > menu > separator {
 }
 
 #MozillaGtkWidget.background > widget > entry:disabled {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   box-shadow: none;
   border-image: none;
   background-color: #f9f9f9;
@@ -6308,7 +6308,7 @@ window.background.chromium headerbar.titlebar button.titlebutton {
 window.background.chromium button {
   border-width: 1px;
   border-style: solid;
-  border-color: #d9d9d9;
+  border-color: #e0e0e0;
   color: rgba(0, 0, 0, 0.87);
   background-color: white;
 }
@@ -6321,7 +6321,7 @@ window.background.chromium entry.chromium {
 window.background.chromium entry.chromium {
   color: rgba(0, 0, 0, 0.87);
   border-image: none;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
 }
 
 window.background.chromium entry.chromium:focus {
@@ -6335,7 +6335,7 @@ window.background.chromium > menubar {
 }
 
 window.background.chromium > menu {
-  border: 1px solid #d9d9d9;
+  border: 1px solid #e0e0e0;
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.87);
   border-radius: 0;
@@ -6651,11 +6651,11 @@ widget > box.terminal-titlebar > button.image-button, widget > box.terminal-titl
   border: none;
 }
 
-#XfcePanelWindow.xfce4-panel {
+.xfce4-panel#XfcePanelWindow {
   border: 1px solid #202020;
 }
 
-#XfcePanelWindow.xfce4-panel, #XfcePanelWindow.xfce4-panel.marching-ants {
+.xfce4-panel#XfcePanelWindow, .xfce4-panel#XfcePanelWindow.marching-ants {
   transition: none;
 }
 
@@ -6992,7 +6992,7 @@ window.background stack scrolledwindow button.destructive-action:checked {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
 }
 
-window.background stack scrolledwindow .linked:not(stackswitcher) button:not(.combo) {
+window.background stack scrolledwindow :not(stackswitcher).linked button:not(.combo) {
   border-radius: 3px;
   margin: 0 2px;
 }
@@ -7057,7 +7057,7 @@ UnityDecoration.menubar .menuitem *:hover {
   box-shadow: none;
 }
 
-.background:not(.csd) headerbar.inline-toolbar:not(.titlebar) {
+.background:not(.csd) headerbar:not(.titlebar).inline-toolbar {
   border-style: none;
 }
 
diff --git a/src/gtk/4.0/gtk-dark.css b/src/gtk/4.0/gtk-dark.css
index 2917632a..b6aaa9f8 100644
--- a/src/gtk/4.0/gtk-dark.css
+++ b/src/gtk/4.0/gtk-dark.css
@@ -51,15 +51,15 @@ iconview:disabled, textview > text:disabled, .view:disabled {
   color: rgba(255, 255, 255, 0.45);
 }
 
-textview:drop(active) {
-  caret-color: #FDD633;
-}
-
 textview > border {
   background-color: #2e3034;
   color: rgba(255, 255, 255, 0.45);
 }
 
+textview:drop(active) {
+  caret-color: #FDD633;
+}
+
 iconview:hover, iconview:active, iconview:selected {
   border-radius: 3px;
 }
@@ -80,7 +80,11 @@ treeview.view > rubberband, gridview > rubberband, flowbox > rubberband {
 
 flowbox > flowboxchild {
   padding: 4px;
-  border-radius: 2px;
+  border-radius: 3px;
+}
+
+.content-view .tile:selected {
+  background-color: transparent;
 }
 
 gridview > child {
@@ -131,8 +135,24 @@ tab label:disabled, button label:disabled {
   color: inherit;
 }
 
-.dim-label, headerbar .subtitle, entry > text > placeholder, label.separator {
-  opacity: 0.45;
+.dim-label, row.expander:not(:checked) image.expander-row-arrow, row label.subtitle, headerbar .subtitle, entry > text > placeholder, label.separator {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.accent {
+  color: #18b8ff;
+}
+
+.success {
+  color: #81C995;
+}
+
+.warning {
+  color: #FDD633;
+}
+
+.error {
+  color: #F28B82;
 }
 
 window.assistant .sidebar {
@@ -158,7 +178,7 @@ window.aboutdialog image.large-icons {
   -gtk-icon-size: 128px;
 }
 
-.osd .scale-popup > contents, .osd .scale-popup > arrow, .app-notification, .osd popover.background > arrow,
+.osd .scale-popup > contents, .osd .scale-popup > arrow, .osd popover.background > arrow,
 .osd popover.background > contents, popover.background.touch-selection > arrow,
 popover.background.touch-selection > contents, popover.background.magnifier > arrow,
 popover.background.magnifier > contents, .osd {
@@ -172,6 +192,30 @@ popover.background.magnifier > contents, .osd {
   box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
 }
 
+toast {
+  margin: 12px;
+  margin-bottom: 24px;
+  border-radius: 9999px;
+  border-spacing: 6px;
+  padding: 6px;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
+  background-color: #383a3e;
+  color: white;
+  border: none;
+}
+
+toast:dir(ltr) {
+  padding-left: 12px;
+}
+
+toast:dir(rtl) {
+  padding-right: 12px;
+}
+
+toast > label {
+  margin: 0 6px;
+}
+
 @keyframes spin {
   to {
     transform: rotate(1turn);
@@ -239,7 +283,7 @@ spinner:checked:disabled {
 }
 
 window.dialog.message entry, notebook > stack:not(:only-child) entry,
-notebook > stack:not(:only-child) spinbutton:not(.vertical), popover.background entry, .background spinbutton:not(.vertical), .background spinbutton.flat:not(.vertical), .background .linked > entry, .background .linked.vertical > entry, .background .linked > entry.flat, .background .linked.vertical > entry.flat, .background entry.flat {
+notebook > stack:not(:only-child) spinbutton:not(.vertical), popover.background entry, spinbutton:not(.vertical), spinbutton.flat:not(.vertical), .linked > entry, .linked.vertical > entry, .linked > entry.flat, .linked.vertical > entry.flat, entry.flat {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
   background-color: transparent;
@@ -249,80 +293,54 @@ notebook > stack:not(:only-child) spinbutton:not(.vertical), popover.background
 }
 
 window.dialog.message entry:focus-within, notebook > stack:not(:only-child) entry:focus-within,
-notebook > stack:not(:only-child) spinbutton:focus-within:not(.vertical), popover.background entry:focus-within, .background spinbutton:focus-within:not(.vertical), .background .linked > entry:focus-within, .background entry.flat:focus-within {
+notebook > stack:not(:only-child) spinbutton:focus-within:not(.vertical), popover.background entry:focus-within, spinbutton:focus-within:not(.vertical), .linked > entry:focus-within, entry.flat:focus-within {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px #4285F4;
 }
 
 window.dialog.message entry:drop(active), notebook > stack:not(:only-child) entry:drop(active),
-notebook > stack:not(:only-child) spinbutton:drop(active):not(.vertical), popover.background entry:drop(active), .background spinbutton:drop(active):not(.vertical), .background .linked > entry:drop(active), .background entry.flat:drop(active) {
+notebook > stack:not(:only-child) spinbutton:drop(active):not(.vertical), popover.background entry:drop(active), spinbutton:drop(active):not(.vertical), .linked > entry:drop(active), entry.flat:drop(active) {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px rgba(255, 255, 255, 0.45);
 }
 
 window.dialog.message entry:disabled, notebook > stack:not(:only-child) entry:disabled,
-notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), popover.background entry:disabled, .background spinbutton:disabled:not(.vertical), .background .linked > entry:disabled, .background entry.flat:disabled {
+notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), popover.background entry:disabled, spinbutton:disabled:not(.vertical), .linked > entry:disabled, entry.flat:disabled {
   border-width: 0;
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
   background-color: transparent;
   color: rgba(255, 255, 255, 0.45);
 }
 
-spinbutton.vertical > text, spinbutton:not(.vertical), entry {
-  border: 1px solid #46494e;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #333539;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within {
-  border: 1px solid #4285F4;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #333539;
-  color: white;
-}
-
-spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:disabled {
-  border: 1px solid #46494e;
-  box-shadow: none;
-  border-image: none;
-  background-color: #2e3034;
-  color: rgba(255, 255, 255, 0.45);
-}
-
-.background entry {
+entry {
+  min-height: 36px;
+  padding: 0 8px;
+  border-radius: 3px;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   border: none;
   border-image: none;
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #333539;
   color: rgba(255, 255, 255, 0.7);
+  outline: none;
 }
 
-.background entry:focus-within {
+entry:focus-within {
   border: none;
   border-image: none;
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12);
   color: white;
+  outline: none;
 }
 
-.background entry:disabled {
+entry:disabled {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #2e3034;
   color: rgba(255, 255, 255, 0.45);
 }
 
-entry {
-  min-height: 36px;
-  padding: 0 8px;
-}
-
 entry > image {
   color: alpha(currentColor, 0.9);
 }
@@ -381,6 +399,7 @@ entry undershoot.right {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #F28B82;
   color: white;
+  outline: none;
 }
 
 .background entry.error:focus-within, .background entry.search.error:focus-within {
@@ -388,6 +407,7 @@ entry undershoot.right {
   border-image: none;
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12);
   color: white;
+  outline: none;
 }
 
 .background entry.error:disabled, .background entry.search.error:disabled {
@@ -424,6 +444,7 @@ entry undershoot.right {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #FDD633;
   color: white;
+  outline: none;
 }
 
 .background entry.warning:focus-within, .background entry.search.warning:focus-within {
@@ -431,6 +452,7 @@ entry undershoot.right {
   border-image: none;
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12);
   color: white;
+  outline: none;
 }
 
 .background entry.warning:disabled, .background entry.search.warning:disabled {
@@ -523,6 +545,7 @@ editablelabel > stack > text {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #333539;
   color: rgba(255, 255, 255, 0.7);
+  outline: none;
 }
 
 @keyframes needs_attention {
@@ -535,71 +558,71 @@ editablelabel > stack > text {
 }
 
 window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button, window.dialog.message .linked.dialog-action-area:not(.vertical) > button, actionbar > revealer > box button:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model, popover.menu box.inline-buttons button.image-button.model,
-.background pathbar > button,
-toolbar button, dropdown > .linked:not(.vertical) > button.combo:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:not(:only-child), .linked > spinbutton:not(.vertical) > button.up, .linked > spinbutton:not(.vertical) > button.down,
-list > row button.image-button:not(.flat), .toolbar button, toolbutton button, toolbutton button.image-button, toolbutton button.toggle, .background .linked.stack-switcher > button {
+pathbar > button, .toolbar button,
+toolbar button, .linked > spinbutton:not(.vertical) > button.up, .linked > spinbutton:not(.vertical) > button.down,
+list > row button.image-button:not(.flat), splitbutton.flat > button,
+splitbutton.flat > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, menubutton.flat > button, toolbutton button, toolbutton button.image-button, toolbutton button.toggle, .linked.stack-switcher > button, toast button {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px transparent;
   background-color: transparent;
   color: rgba(255, 255, 255, 0.7);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:hover, popover.menu box.inline-buttons button.image-button.model:hover,
-.background pathbar > button:hover,
-toolbar button:hover, dropdown > .linked:not(.vertical) > button.combo:hover:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:hover:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:hover, .linked > spinbutton:not(.vertical) > button.down:hover,
-list > row button.image-button:hover:not(.flat), .toolbar button:hover, toolbutton button:hover, .background .linked.stack-switcher > button:hover {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:hover, popover.menu box.inline-buttons button.image-button.model:hover,
+pathbar > button:hover, .toolbar button:hover,
+toolbar button:hover, .linked > spinbutton:not(.vertical) > button.up:hover, .linked > spinbutton:not(.vertical) > button.down:hover,
+list > row button.image-button:hover:not(.flat), splitbutton.flat > button:hover,
+splitbutton.flat > menubutton > button:hover, menubutton.suggested-action > button:hover, menubutton.destructive-action > button:hover, menubutton.opaque > button:hover, menubutton.flat > button:hover, toolbutton button:hover, .linked.stack-switcher > button:hover, toast button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   color: white;
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:focus, actionbar > revealer > box button:focus:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:focus, popover.menu box.inline-buttons button.image-button.model:focus,
-.background pathbar > button:focus,
-toolbar button:focus, dropdown > .linked:not(.vertical) > button.combo:focus:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:focus:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:focus, .linked > spinbutton:not(.vertical) > button.down:focus,
-list > row button.image-button:focus:not(.flat), .toolbar button:focus, toolbutton button:focus, .background .linked.stack-switcher > button:focus {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:focus, actionbar > revealer > box button:focus:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:focus, popover.menu box.inline-buttons button.image-button.model:focus,
+pathbar > button:focus, .toolbar button:focus,
+toolbar button:focus, .linked > spinbutton:not(.vertical) > button.up:focus, .linked > spinbutton:not(.vertical) > button.down:focus,
+list > row button.image-button:focus:not(.flat), splitbutton.flat > button:focus,
+splitbutton.flat > menubutton > button:focus, menubutton.suggested-action > button:focus, menubutton.destructive-action > button:focus, menubutton.opaque > button:focus, menubutton.flat > button:focus, toolbutton button:focus, .linked.stack-switcher > button:focus, toast button:focus {
   background-color: transparent;
   outline: none;
   transition: none;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.inline-buttons button.image-button.model:active,
-.background pathbar > button:active,
-toolbar button:active, dropdown > .linked:not(.vertical) > button.combo:active:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:active:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:active, .linked > spinbutton:not(.vertical) > button.down:active,
-list > row button.image-button:active:not(.flat), .toolbar button:active, toolbutton button:active, .background .linked.stack-switcher > button:active {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.inline-buttons button.image-button.model:active,
+pathbar > button:active, .toolbar button:active,
+toolbar button:active, .linked > spinbutton:not(.vertical) > button.up:active, .linked > spinbutton:not(.vertical) > button.down:active,
+list > row button.image-button:active:not(.flat), splitbutton.flat > button:active,
+splitbutton.flat > menubutton > button:active, menubutton.suggested-action > button:active, menubutton.destructive-action > button:active, menubutton.opaque > button:active, menubutton.flat > button:active, toolbutton button:active, .linked.stack-switcher > button:active, toast button:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.16);
   color: white;
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:disabled, popover.menu box.inline-buttons button.image-button.model:disabled,
-.background pathbar > button:disabled,
-toolbar button:disabled, dropdown > .linked:not(.vertical) > button.combo:disabled:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:disabled, .linked > spinbutton:not(.vertical) > button.down:disabled,
-list > row button.image-button:disabled:not(.flat), .toolbar button:disabled, toolbutton button:disabled, .background .linked.stack-switcher > button:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:disabled, popover.menu box.inline-buttons button.image-button.model:disabled,
+pathbar > button:disabled, .toolbar button:disabled,
+toolbar button:disabled, .linked > spinbutton:not(.vertical) > button.up:disabled, .linked > spinbutton:not(.vertical) > button.down:disabled,
+list > row button.image-button:disabled:not(.flat), splitbutton.flat > button:disabled,
+splitbutton.flat > menubutton > button:disabled, menubutton.suggested-action > button:disabled, menubutton.destructive-action > button:disabled, menubutton.opaque > button:disabled, menubutton.flat > button:disabled, toolbutton button:disabled, .linked.stack-switcher > button:disabled, toast button:disabled {
   box-shadow: none;
   background-color: transparent;
   color: alpha(currentColor, 0.27);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked, popover.menu box.inline-buttons button.image-button.model:checked,
-.background pathbar > button:checked,
-toolbar button:checked, dropdown > .linked:not(.vertical) > button.combo:checked:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:checked:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked, .linked > spinbutton:not(.vertical) > button.down:checked,
-list > row button.image-button:checked:not(.flat), .toolbar button:checked, toolbutton button:checked, .background .linked.stack-switcher > button:checked {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked, popover.menu box.inline-buttons button.image-button.model:checked,
+pathbar > button:checked, .toolbar button:checked,
+toolbar button:checked, .linked > spinbutton:not(.vertical) > button.up:checked, .linked > spinbutton:not(.vertical) > button.down:checked,
+list > row button.image-button:checked:not(.flat), splitbutton.flat > button:checked,
+splitbutton.flat > menubutton > button:checked, menubutton.suggested-action > button:checked, menubutton.destructive-action > button:checked, menubutton.opaque > button:checked, menubutton.flat > button:checked, toolbutton button:checked, .linked.stack-switcher > button:checked, toast button:checked {
   color: white;
   background-color: alpha(currentColor, 0.12);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked:disabled, popover.menu box.inline-buttons button.image-button.model:checked:disabled,
-.background pathbar > button:checked:disabled,
-toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button.combo:checked:disabled:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:checked:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked:disabled, .linked > spinbutton:not(.vertical) > button.down:checked:disabled,
-list > row button.image-button:checked:disabled:not(.flat), .toolbar button:checked:disabled, toolbutton button:checked:disabled, .background .linked.stack-switcher > button:checked:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked:disabled, popover.menu box.inline-buttons button.image-button.model:checked:disabled,
+pathbar > button:checked:disabled, .toolbar button:checked:disabled,
+toolbar button:checked:disabled, .linked > spinbutton:not(.vertical) > button.up:checked:disabled, .linked > spinbutton:not(.vertical) > button.down:checked:disabled,
+list > row button.image-button:checked:disabled:not(.flat), splitbutton.flat > button:checked:disabled,
+splitbutton.flat > menubutton > button:checked:disabled, menubutton.suggested-action > button:checked:disabled, menubutton.destructive-action > button:checked:disabled, menubutton.opaque > button:checked:disabled, menubutton.flat > button:checked:disabled, toolbutton button:checked:disabled, .linked.stack-switcher > button:checked:disabled, toast button:checked:disabled {
   background-color: alpha(currentColor, 0.06);
   color: rgba(255, 255, 255, 0.45);
 }
@@ -641,8 +664,8 @@ radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disa
   color: alpha(currentColor, 0.27);
 }
 
-.background button.combo, .background .linked > button.combo, .background .linked entry + button, .background .linked entry + button + button {
-  border-radius: 0;
+dropdown > .linked:not(.vertical) > button.combo,
+combobox > .linked:not(.vertical) > button.combo, button.combo, .linked > button.combo, .linked entry + button, .linked entry + button.image-button, .linked entry + button.text-button, .linked entry + menubutton > button {
   background: none;
   font-weight: normal;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
@@ -652,63 +675,71 @@ radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disa
   border-width: 0;
 }
 
-.background button.combo:hover, .background .linked entry + button:hover, .background .linked entry + button + button:hover {
+dropdown > .linked:not(.vertical) > button.combo,
+combobox > .linked:not(.vertical) > button.combo, button.combo, .linked > button.combo, .linked entry + button, .linked entry + button.image-button, .linked entry + button.text-button, .linked entry + menubutton > button {
+  border-radius: 0;
+}
+
+dropdown > .linked:not(.vertical) > button.combo:hover,
+combobox > .linked:not(.vertical) > button.combo:hover, button.combo:hover, .linked entry + button:hover, .linked entry + menubutton > button:hover {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px rgba(255, 255, 255, 0.45);
 }
 
-.background button.combo:checked, .background .linked entry + button:checked, .background .linked entry + button + button:checked {
+dropdown > .linked:not(.vertical) > button.combo:checked,
+combobox > .linked:not(.vertical) > button.combo:checked, button.combo:checked, .linked entry + button:checked, .linked entry + menubutton > button:checked {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px #4285F4;
 }
 
-.background button.combo:disabled, .background .linked entry + button:disabled, .background .linked entry + button + button:disabled {
+dropdown > .linked:not(.vertical) > button.combo:disabled,
+combobox > .linked:not(.vertical) > button.combo:disabled, button.combo:disabled, .linked entry + button:disabled, .linked entry + menubutton > button:disabled {
   border-width: 0;
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
   background-color: transparent;
   color: rgba(255, 255, 255, 0.45);
 }
 
-button {
-  min-height: 24px;
-  min-width: 16px;
-  padding: 6px 9px;
-  border-radius: 3px;
-  font-weight: 500;
-  border: 1px solid #46494e;
-  box-shadow: none;
-  background-color: #333539;
+splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, button.opaque {
+  background-image: image(alpha(currentColor, 0.06));
   color: rgba(255, 255, 255, 0.7);
+  box-shadow: none;
 }
 
-button:hover {
+splitbutton.suggested-action > button:hover, splitbutton.suggested-action > menubutton > button:hover, splitbutton.destructive-action > button:hover, splitbutton.destructive-action > menubutton > button:hover, splitbutton.opaque > button:hover, splitbutton.opaque > menubutton > button:hover, button.opaque:hover {
+  background-image: image(alpha(currentColor, 0.1));
   box-shadow: none;
-  background-color: #3b3d41;
   color: white;
 }
 
-button:active, button:checked {
+splitbutton.suggested-action > button.keyboard-activating, splitbutton.suggested-action > menubutton > button.keyboard-activating, splitbutton.destructive-action > button.keyboard-activating, splitbutton.destructive-action > menubutton > button.keyboard-activating, splitbutton.opaque > button.keyboard-activating, splitbutton.opaque > menubutton > button.keyboard-activating, button.keyboard-activating.opaque, splitbutton.suggested-action > button:active, splitbutton.suggested-action > menubutton > button:active, splitbutton.destructive-action > button:active, splitbutton.destructive-action > menubutton > button:active, splitbutton.opaque > button:active, splitbutton.opaque > menubutton > button:active, button.opaque:active {
+  background-image: image(alpha(currentColor, 0.16));
   box-shadow: none;
-  background-color: #434549;
   color: white;
-  animation: none;
 }
 
-button:disabled {
+splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button:checked, button.opaque:checked {
+  background-image: image(alpha(currentColor, 0.12));
   box-shadow: none;
-  background-color: #323336;
   color: white;
 }
 
-button:checked:disabled {
-  box-shadow: none;
-  background-color: rgba(66, 133, 244, 0.5);
-  color: rgba(255, 255, 255, 0.45);
+splitbutton.suggested-action > button:checked:hover, splitbutton.suggested-action > menubutton > button:checked:hover, splitbutton.destructive-action > button:checked:hover, splitbutton.destructive-action > menubutton > button:checked:hover, splitbutton.opaque > button:checked:hover, splitbutton.opaque > menubutton > button:checked:hover, button.opaque:checked:hover {
+  background-image: image(alpha(currentColor, 0.16));
 }
 
-.background button {
+splitbutton.suggested-action > button:checked.keyboard-activating, splitbutton.suggested-action > menubutton > button:checked.keyboard-activating, splitbutton.destructive-action > button:checked.keyboard-activating, splitbutton.destructive-action > menubutton > button:checked.keyboard-activating, splitbutton.opaque > button:checked.keyboard-activating, splitbutton.opaque > menubutton > button:checked.keyboard-activating, button.opaque:checked.keyboard-activating, splitbutton.suggested-action > button:checked:active, splitbutton.suggested-action > menubutton > button:checked:active, splitbutton.destructive-action > button:checked:active, splitbutton.destructive-action > menubutton > button:checked:active, splitbutton.opaque > button:checked:active, splitbutton.opaque > menubutton > button:checked:active, button.opaque:checked:active {
+  background-image: image(alpha(currentColor, 0.16));
+}
+
+button {
+  min-height: 24px;
+  min-width: 16px;
+  padding: 6px 9px;
+  border-radius: 3px;
+  font-weight: 500;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
   background-color: #333539;
@@ -716,34 +747,34 @@ button:checked:disabled {
   border: none;
 }
 
-.background button:hover {
+button:hover {
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
   color: white;
   background-color: #3f4246;
 }
 
-.background button:focus {
+button:focus {
   color: white;
 }
 
-.background button:active {
+button:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px rgba(255, 255, 255, 0.12);
   color: white;
 }
 
-.background button:disabled {
+button:disabled {
   box-shadow: none;
   background-color: rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.3);
 }
 
-.background button:checked {
+button:checked {
   background-color: #4285F4;
   color: white;
 }
 
-.background button:checked:disabled {
+button:checked:disabled {
   background-color: alpha(#4285F4, 0.25);
   color: alpha(#4285F4, 0.5);
 }
@@ -795,33 +826,101 @@ button.image-button {
   border-radius: 3px;
 }
 
-button.text-button.image-button {
+button.text-button.image-button, button.image-text-button {
   border-radius: 3px;
 }
 
-button.text-button.image-button label:first-child {
+button.text-button.image-button > box,
+button.text-button.image-button > box > box, button.image-text-button > box,
+button.image-text-button > box > box {
+  border-spacing: 4px;
+}
+
+button.text-button.image-button > box > label,
+button.text-button.image-button > box > box > label, button.image-text-button > box > label,
+button.image-text-button > box > box > label {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+button.text-button.image-button label:first-child, button.image-text-button label:first-child {
   margin-left: 10px;
   margin-right: 2px;
 }
 
-button.text-button.image-button label:last-child {
+button.text-button.image-button label:last-child, button.image-text-button label:last-child {
   margin-left: 2px;
   margin-right: 10px;
 }
 
-button.text-button.image-button label:only-child {
+button.text-button.image-button label:only-child, button.image-text-button label:only-child {
   margin-left: 10px;
   margin-right: 10px;
 }
 
-button.text-button.image-button image:not(:only-child):first-child {
+button.text-button.image-button image:not(:only-child):first-child, button.image-text-button image:not(:only-child):first-child {
   margin-left: 4px;
 }
 
-button.text-button.image-button image:not(:only-child):last-child {
+button.text-button.image-button image:not(:only-child):last-child, button.image-text-button image:not(:only-child):last-child {
   margin-right: 4px;
 }
 
+button.arrow-button {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+
+button.arrow-button > box {
+  border-spacing: 4px;
+}
+
+button.arrow-button.text-button > box {
+  border-spacing: 4px;
+}
+
+menubutton.pill > button, button.pill {
+  padding: 9px 30px;
+  border-radius: 9999px;
+}
+
+button.card {
+  background-color: rgba(255, 255, 255, 0.05);
+  background-clip: padding-box;
+  font-weight: inherit;
+  padding: 0;
+}
+
+button.card:hover {
+  background-image: image(alpha(currentColor, 0.03));
+}
+
+button.card.keyboard-activating, button.card:active {
+  background-image: image(alpha(currentColor, 0.08));
+}
+
+button.card:checked {
+  background-color: rgba(255, 255, 255, 0.05);
+  background-image: image(alpha(currentColor, 0.1));
+}
+
+button.card:checked:hover {
+  background-image: image(alpha(currentColor, 0.13));
+}
+
+button.card:checked.keyboard-activating, button.card:checked:active {
+  background-image: image(alpha(currentColor, 0.19));
+}
+
+button.card:checked.has-open-popup {
+  background-image: image(alpha(currentColor, 0.13));
+}
+
+button.card:drop(active) {
+  color: #FDD633;
+  box-shadow: inset 0 0 0 1px #FDD633;
+}
+
 .linked > button.flat, .linked.vertical > button.flat {
   border-radius: 3px;
 }
@@ -834,16 +933,16 @@ button.text-button.image-button image:not(:only-child):last-child {
   border-radius: 3px;
 }
 
-.background .linked.stack-switcher > button {
+.linked.stack-switcher > button {
   border-radius: 0;
 }
 
-.background .linked.stack-switcher > button:checked {
+.linked.stack-switcher > button:checked {
   box-shadow: inset 0 -2px #4285F4;
   background-color: transparent;
 }
 
-.background buttonbox.linked > button {
+buttonbox.linked > button {
   border-radius: 3px;
 }
 
@@ -884,7 +983,8 @@ button.osd:disabled {
 .app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd popover.background > arrow button:not(.suggested-action):not(.destructive-action),
 .osd popover.background > contents button:not(.suggested-action):not(.destructive-action), popover.background.touch-selection > arrow button:not(.suggested-action):not(.destructive-action),
 popover.background.touch-selection > contents button:not(.suggested-action):not(.destructive-action), popover.background.magnifier > arrow button:not(.suggested-action):not(.destructive-action),
-popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .osd button {
+popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .toolbar.osd button,
+toolbar.osd button, .osd button {
   background-color: rgba(255, 255, 255, 0.05);
 }
 
@@ -898,7 +998,9 @@ popover.background.magnifier > contents button.flat:not(.suggested-action):not(.
 .app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd popover.background > arrow button:not(.suggested-action):not(.destructive-action),
 .osd popover.background > contents button:not(.suggested-action):not(.destructive-action), popover.background.touch-selection > arrow button:not(.suggested-action):not(.destructive-action),
 popover.background.touch-selection > contents button:not(.suggested-action):not(.destructive-action), popover.background.magnifier > arrow button:not(.suggested-action):not(.destructive-action),
-popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .osd button {
+popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .toolbar.osd button,
+toolbar.osd button,
+toolbar.osd button.flat, .osd button {
   color: rgba(255, 255, 255, 0.7);
   box-shadow: none;
 }
@@ -1095,124 +1197,300 @@ row button.image-button {
   border-radius: 9999px;
 }
 
-stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label,
-stackswitcher > button.needs-attention > image {
-  animation: needs_attention 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
-  background-repeat: no-repeat;
-  background-position: right 3px;
-  background-size: 6px 6px;
+menubutton.osd {
+  background: none;
+  color: inherit;
 }
 
-stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl),
-stackswitcher > button.needs-attention > image:dir(rtl) {
-  background-position: left 3px;
+menubutton.suggested-action {
+  background-color: #4285F4;
+  color: white;
 }
 
-.linked > button {
-  border-radius: 0;
+menubutton.destructive-action {
+  background-color: #FF5252;
+  color: white;
 }
 
-.linked > button:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+menubutton.suggested-action, menubutton.destructive-action, menubutton.opaque {
+  border-radius: 3px;
 }
 
-.linked > button:last-child {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+menubutton.suggested-action.circular, menubutton.suggested-action.pill, menubutton.destructive-action.circular, menubutton.destructive-action.pill, menubutton.opaque.circular, menubutton.opaque.pill {
+  border-radius: 9999px;
 }
 
-.linked > button:only-child {
-  border-radius: 3px;
+menubutton.suggested-action > button, menubutton.suggested-action > button:checked, menubutton.destructive-action > button, menubutton.destructive-action > button:checked, menubutton.opaque > button, menubutton.opaque > button:checked {
+  background-color: transparent;
+  color: inherit;
 }
 
-.linked.vertical > button {
-  border-radius: 0;
+menubutton.image-button > button {
+  min-width: 24px;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
-.linked.vertical > button:first-child {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+menubutton arrow {
+  min-height: 16px;
+  min-width: 16px;
 }
 
-.linked.vertical > button:last-child {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+menubutton arrow.none {
+  -gtk-icon-source: -gtk-icontheme("open-menu-symbolic");
 }
 
-.linked.vertical > button:only-child {
-  border-radius: 3px;
+menubutton arrow.down {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
 }
 
-/* menu buttons */
-modelbutton.flat {
-  min-height: 32px;
-  padding: 0 9px;
-  border-radius: 3px;
-  color: inherit;
+menubutton arrow.up {
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
 }
 
-modelbutton.flat check:not(:checked):not(:indeterminate),
-modelbutton.flat radio:not(:checked):not(:indeterminate) {
-  color: alpha(currentColor, 0.45);
+menubutton arrow.left {
+  -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
 }
 
-modelbutton.flat check, modelbutton.flat check:hover,
-modelbutton.flat radio,
-modelbutton.flat radio:hover {
-  background-image: none;
+menubutton arrow.right {
+  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
 }
 
-modelbutton.flat check:active,
-modelbutton.flat radio:active {
-  animation: none;
+splitbutton {
+  border-radius: 3px;
 }
 
-modelbutton.flat check:last-child,
-modelbutton.flat radio:last-child {
-  margin-left: -8px;
-  margin-right: -16px;
+splitbutton, splitbutton > separator {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
+  transition-property: background;
 }
 
-modelbutton.flat check:first-child,
-modelbutton.flat radio:first-child {
-  margin-left: -16px;
-  margin-right: -8px;
+splitbutton > separator {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  background: none;
 }
 
-modelbutton.flat arrow {
-  background: none;
-  transition: none;
+splitbutton > menubutton > button {
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
-modelbutton.flat arrow:hover {
-  background: none;
+splitbutton.image-button > button {
+  min-width: 24px;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
-modelbutton.flat arrow.left {
-  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+splitbutton.text-button.image-button > button, splitbutton.image-text-button > button {
+  padding-left: 9px;
+  padding-right: 9px;
 }
 
-modelbutton.flat arrow.right {
-  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+splitbutton.text-button.image-button > button > box, splitbutton.image-text-button > button > box {
+  border-spacing: 6px;
 }
 
-.toolbar button {
-  margin: 1px;
+splitbutton > button:dir(ltr),
+splitbutton > menubutton > button:dir(rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
 }
 
-button.color {
-  min-height: 24px;
-  min-width: 24px;
-  padding: 6px;
+splitbutton > button:dir(rtl),
+splitbutton > menubutton > button:dir(ltr) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
 }
 
-button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay {
-  border-radius: 0;
+splitbutton.flat > separator {
+  background: rgba(255, 255, 255, 0.12);
 }
 
+splitbutton.flat:hover, splitbutton.flat:active, splitbutton.flat:checked {
+  background: alpha(currentColor, 0.07);
+}
 
-list > row button.image-button.suggested-action:not(.flat) {
+splitbutton.flat:hover > separator, splitbutton.flat:active > separator, splitbutton.flat:checked > separator {
+  background: none;
+}
+
+splitbutton.flat:focus-within:focus-visible > separator {
+  background: none;
+}
+
+splitbutton.flat > button,
+splitbutton.flat > menubutton > button {
+  border-radius: 3px;
+}
+
+splitbutton.suggested-action {
+  background-color: #4285F4;
+  color: white;
+}
+
+splitbutton.destructive-action {
+  background-color: #FF5252;
+  color: white;
+}
+
+splitbutton.suggested-action > button, splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button, splitbutton.opaque > menubutton > button:checked {
+  color: inherit;
+  background-color: transparent;
+}
+
+splitbutton.suggested-action > menubutton > button:dir(ltr), splitbutton.destructive-action > menubutton > button:dir(ltr), splitbutton.opaque > menubutton > button:dir(ltr) {
+  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+splitbutton.suggested-action > menubutton > button:dir(rtl), splitbutton.destructive-action > menubutton > button:dir(rtl), splitbutton.opaque > menubutton > button:dir(rtl) {
+  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.12);
+}
+
+splitbutton > menubutton > button > arrow.none {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
+buttoncontent {
+  border-spacing: 6px;
+}
+
+buttoncontent > label {
+  font-weight: bold;
+}
+
+buttoncontent > label:dir(ltr) {
+  padding-right: 2px;
+}
+
+buttoncontent > label:dir(rtl) {
+  padding-left: 2px;
+}
+
+.arrow-button > box > buttoncontent > label:dir(ltr), splitbutton > button > buttoncontent > label:dir(ltr) {
+  padding-right: 0;
+}
+
+.arrow-button > box > buttoncontent > label:dir(rtl), splitbutton > button > buttoncontent > label:dir(rtl) {
+  padding-left: 0;
+}
+
+stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label,
+stackswitcher > button.needs-attention > image {
+  animation: needs_attention 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
+  background-repeat: no-repeat;
+  background-position: right 3px;
+  background-size: 6px 6px;
+}
+
+stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl),
+stackswitcher > button.needs-attention > image:dir(rtl) {
+  background-position: left 3px;
+}
+
+.linked > button {
+  border-radius: 0;
+}
+
+.linked > button:first-child {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.linked > button:last-child {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.linked > button:only-child {
+  border-radius: 3px;
+}
+
+.linked.vertical > button {
+  border-radius: 0;
+}
+
+.linked.vertical > button:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.linked.vertical > button:last-child {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.linked.vertical > button:only-child {
+  border-radius: 3px;
+}
+
+/* menu buttons */
+modelbutton.flat {
+  min-height: 32px;
+  padding: 0 9px;
+  border-radius: 3px;
+  color: inherit;
+}
+
+modelbutton.flat check:not(:checked):not(:indeterminate),
+modelbutton.flat radio:not(:checked):not(:indeterminate) {
+  color: alpha(currentColor, 0.45);
+}
+
+modelbutton.flat check, modelbutton.flat check:hover,
+modelbutton.flat radio,
+modelbutton.flat radio:hover {
+  background-image: none;
+}
+
+modelbutton.flat check:active,
+modelbutton.flat radio:active {
+  animation: none;
+}
+
+modelbutton.flat check:last-child,
+modelbutton.flat radio:last-child {
+  margin-left: -8px;
+  margin-right: -16px;
+}
+
+modelbutton.flat check:first-child,
+modelbutton.flat radio:first-child {
+  margin-left: -16px;
+  margin-right: -8px;
+}
+
+modelbutton.flat arrow {
+  background: none;
+  transition: none;
+}
+
+modelbutton.flat arrow:hover {
+  background: none;
+}
+
+modelbutton.flat arrow.left {
+  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+}
+
+modelbutton.flat arrow.right {
+  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+}
+
+button.color {
+  min-height: 24px;
+  min-width: 24px;
+  padding: 6px;
+}
+
+button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay {
+  border-radius: 0;
+}
+
+
+list > row button.image-button:not(.flat).suggested-action {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
   background-color: #4285F4;
@@ -1221,7 +1499,7 @@ list > row button.image-button.suggested-action:not(.flat) {
 }
 
 
-list > row button.image-button.destructive-action:not(.flat) {
+list > row button.image-button:not(.flat).destructive-action {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
   background-color: #FF5252;
@@ -1277,16 +1555,18 @@ spinbutton:not(.vertical) {
   padding: 0;
 }
 
-.background spinbutton:not(.vertical), .background spinbutton.flat:not(.vertical) {
+spinbutton:not(.vertical), spinbutton:not(.vertical).flat {
   transition: all 225ms cubic-bezier(0, 0, 0.2, 1);
   border-radius: 0;
+  outline: none;
 }
 
-.background spinbutton:not(.vertical) > text, .background spinbutton:not(.vertical) > text:focus-within, .background spinbutton:not(.vertical) > text:disabled, .background spinbutton:not(.vertical):focus-within > text, .background spinbutton:not(.vertical):focus-within > text:focus-within, .background spinbutton:not(.vertical):focus-within > text:disabled, .background spinbutton:not(.vertical):disabled > text, .background spinbutton:not(.vertical):disabled > text:focus-within, .background spinbutton:not(.vertical):disabled > text:disabled, .background spinbutton.flat:not(.vertical) > text, .background spinbutton.flat:not(.vertical) > text:focus-within, .background spinbutton.flat:not(.vertical) > text:disabled, .background spinbutton.flat:not(.vertical):focus-within > text, .background spinbutton.flat:not(.vertical):focus-within > text:focus-within, .background spinbutton.flat:not(.vertical):focus-within > text:disabled, .background spinbutton.flat:not(.vertical):disabled > text, .background spinbutton.flat:not(.vertical):disabled > text:focus-within, .background spinbutton.flat:not(.vertical):disabled > text:disabled {
+spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text:focus-within, spinbutton:not(.vertical) > text:disabled, spinbutton:not(.vertical):focus-within > text, spinbutton:not(.vertical):focus-within > text:focus-within, spinbutton:not(.vertical):focus-within > text:disabled, spinbutton:not(.vertical):disabled > text, spinbutton:not(.vertical):disabled > text:focus-within, spinbutton:not(.vertical):disabled > text:disabled, spinbutton:not(.vertical).flat > text, spinbutton:not(.vertical).flat > text:focus-within, spinbutton:not(.vertical).flat > text:disabled, spinbutton:not(.vertical).flat:focus-within > text, spinbutton:not(.vertical).flat:focus-within > text:focus-within, spinbutton:not(.vertical).flat:focus-within > text:disabled, spinbutton:not(.vertical).flat:disabled > text, spinbutton:not(.vertical).flat:disabled > text:focus-within, spinbutton:not(.vertical).flat:disabled > text:disabled {
   box-shadow: none;
   background: none;
   border-image: none;
   transition: none;
+  outline: none;
 }
 
 spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text:focus-within, spinbutton:not(.vertical) > text:disabled {
@@ -1297,6 +1577,7 @@ spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text:focus-within,
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
+  outline: none;
 }
 
 spinbutton:not(.vertical) > button, spinbutton:not(.vertical) > button:hover, spinbutton:not(.vertical) > button:active, spinbutton:not(.vertical) > button:checked, spinbutton:not(.vertical) > button:disabled {
@@ -1327,6 +1608,7 @@ spinbutton.vertical > text {
   min-height: 36px;
   min-width: 42px;
   padding: 0;
+  outline: none;
 }
 
 spinbutton.vertical > button {
@@ -1375,59 +1657,8 @@ combobox > popover.menu > contents modelbutton {
   padding-right: 9px;
 }
 
-.background dropdown, .background combobox {
-  border: unset;
-  border-image: unset;
-  border-radius: unset;
-  background-color: unset;
-  color: unset;
-  box-shadow: unset;
-}
-
 dropdown entry.combo,
 combobox entry.combo {
-  border-radius: 2px;
-  margin-right: -32px;
-  padding-right: 32px;
-  border: 1px solid #46494e;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #333539;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-dropdown entry.combo:focus,
-combobox entry.combo:focus {
-  border: 1px solid #4285F4;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #333539;
-  color: white;
-}
-
-dropdown entry.combo:disabled,
-combobox entry.combo:disabled {
-  border: 1px solid #46494e;
-  box-shadow: none;
-  border-image: none;
-  background-color: #2e3034;
-  color: rgba(255, 255, 255, 0.45);
-}
-
-dropdown > .linked:not(.vertical) > button.combo:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:not(:only-child) {
-  border: none;
-  border-image: none;
-  box-shadow: none;
-  min-height: 16px;
-  min-width: 16px;
-  margin: 4px;
-  padding: 6px;
-}
-
-.background dropdown entry.combo, .background combobox entry.combo {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
   background-color: transparent;
@@ -1435,13 +1666,15 @@ combobox > .linked:not(.vertical) > button.combo:not(:only-child) {
   border-width: 0;
 }
 
-.background dropdown entry.combo:focus, .background combobox entry.combo:focus {
+dropdown entry.combo:focus,
+combobox entry.combo:focus {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px #4285F4;
 }
 
-.background dropdown entry.combo:disabled, .background combobox entry.combo:disabled {
+dropdown entry.combo:disabled,
+combobox entry.combo:disabled {
   border-width: 0;
   box-shadow: inset 0 -1px rgba(255, 255, 255, 0.3);
   background-color: transparent;
@@ -1463,18 +1696,6 @@ combobox button.combo cellview:dir(rtl) {
   margin-right: -2px;
 }
 
-dropdown.linked button:nth-child(2):dir(ltr),
-combobox.linked button:nth-child(2):dir(ltr) {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-dropdown.linked button:nth-child(2):dir(rtl),
-combobox.linked button:nth-child(2):dir(rtl) {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-
 dropdown:drop(active),
 combobox:drop(active) {
   box-shadow: none;
@@ -1524,6 +1745,16 @@ toolbar {
   background-color: #292b2e;
 }
 
+.toolbar > separator.spacer,
+toolbar > separator.spacer {
+  background: none;
+}
+
+.toolbar button,
+toolbar button {
+  margin: 0 1px;
+}
+
 .osd .toolbar, .osd toolbar {
   background-color: transparent;
 }
@@ -1532,8 +1763,9 @@ toolbar {
 toolbar.osd {
   padding: 6px;
   border-radius: 2px;
-  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #333539;
+  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.2), 0 3px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 5px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
+  background-color: #232528;
+  color: white;
 }
 
 .toolbar.osd:backdrop,
@@ -1684,8 +1916,8 @@ headerbar.windowhandle viewswitcher button:disabled:not(.titlebutton):not(.sugge
 
 headerbar {
   transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1), color 100ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 36px;
-  padding: 0 12px;
+  min-height: 48px;
+  padding: 0 6px;
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #36383c;
   color: white;
@@ -1703,6 +1935,10 @@ headerbar:disabled {
   color: rgba(255, 255, 255, 0.45);
 }
 
+headerbar:not(.titlebar) {
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(255, 255, 255, 0.12);
+}
+
 headerbar .title {
   padding: 0 12px;
   font-weight: bold;
@@ -1713,6 +1949,20 @@ headerbar .subtitle {
   font-size: smaller;
 }
 
+box.vertical headerbar {
+  background-color: #36383c;
+}
+
+headerbar > windowhandle > box {
+  padding: 0 3px;
+}
+
+headerbar > windowhandle > box,
+headerbar > windowhandle > box > box.start,
+headerbar > windowhandle > box > box.end {
+  border-spacing: 6px;
+}
+
 headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled {
   color: alpha(currentColor, 0.3);
 }
@@ -1836,16 +2086,25 @@ headerbar .linked > entry,
 headerbar .linked > entry:hover,
 headerbar .linked > entry:active,
 headerbar .linked > entry:checked,
-headerbar .linked > entry:disabled, .background headerbar .linked entry + button, .background headerbar .linked entry + button:hover, .background headerbar .linked entry + button:active, .background headerbar .linked entry + button:checked, .background headerbar .linked entry + button:disabled, .background headerbar .linked entry + button + button, .background headerbar .linked entry + button + button:hover, .background headerbar .linked entry + button + button:active, .background headerbar .linked entry + button + button:checked, .background headerbar .linked entry + button + button:disabled {
+headerbar .linked > entry:disabled,
+headerbar .linked entry + button,
+headerbar .linked entry + button:hover,
+headerbar .linked entry + button:active,
+headerbar .linked entry + button:checked,
+headerbar .linked entry + button:disabled,
+headerbar .linked entry + button.image-button,
+headerbar .linked entry + button.image-button:hover,
+headerbar .linked entry + button.image-button:active,
+headerbar .linked entry + button.image-button:checked,
+headerbar .linked entry + button.image-button:disabled,
+headerbar .linked entry + button.text-button,
+headerbar .linked entry + button.text-button:hover,
+headerbar .linked entry + button.text-button:active,
+headerbar .linked entry + button.text-button:checked,
+headerbar .linked entry + button.text-button:disabled {
   border-radius: 3px;
 }
 
-headerbar > windowhandle > box,
-headerbar > windowhandle > box > box.start,
-headerbar > windowhandle > box > box.end {
-  border-spacing: 6px;
-}
-
 headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) {
   margin-top: 0;
   margin-bottom: 0;
@@ -1861,8 +2120,8 @@ headerbar menubutton {
 }
 
 headerbar menubutton > button {
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 headerbar switch {
@@ -1892,35 +2151,6 @@ headerbar.titlebar headerbar:not(.titlebar) {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
-separator:first-child + headerbar, headerbar:first-child {
-  border-top-left-radius: 3px;
-}
-
-headerbar:last-child {
-  border-top-right-radius: 3px;
-}
-
-stack headerbar:first-child, stack headerbar:last-child {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  border: none;
-}
-
-window.tiled headerbar, window.tiled headerbar:first-child, window.tiled headerbar:last-child, window.tiled headerbar:only-child, window.tiled-top headerbar, window.tiled-top headerbar:first-child, window.tiled-top headerbar:last-child, window.tiled-top headerbar:only-child, window.tiled-right headerbar, window.tiled-right headerbar:first-child, window.tiled-right headerbar:last-child, window.tiled-right headerbar:only-child, window.tiled-bottom headerbar, window.tiled-bottom headerbar:first-child, window.tiled-bottom headerbar:last-child, window.tiled-bottom headerbar:only-child, window.tiled-left headerbar, window.tiled-left headerbar:first-child, window.tiled-left headerbar:last-child, window.tiled-left headerbar:only-child, window.maximized headerbar, window.maximized headerbar:first-child, window.maximized headerbar:last-child, window.maximized headerbar:only-child, window.fullscreen headerbar, window.fullscreen headerbar:first-child, window.fullscreen headerbar:last-child, window.fullscreen headerbar:only-child, window.solid-csd headerbar, window.solid-csd headerbar:first-child, window.solid-csd headerbar:last-child, window.solid-csd headerbar:only-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.titlebar, .titlebar.background {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-}
-
-.background.tiled .titlebar, .background.tiled-top .titlebar, .background.tiled-right .titlebar, .background.tiled-bottom .titlebar, .background.tiled-left .titlebar, .background.maximized .titlebar, .background.solid-csd .titlebar {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .titlebar.solid-csd headerbar {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
 }
@@ -1961,23 +2191,6 @@ window.csd > .titlebar:not(headerbar) {
   box-shadow: none;
 }
 
-window.background > box.vertical > headerbar:not(.titlebar) {
-  border-radius: 0 0 0 0;
-  box-shadow: none;
-}
-
-window.background > box.vertical > headerbar:not(.titlebar), window.background > box.vertical > headerbar:not(.titlebar):backdrop {
-  background-color: #36383c;
-}
-
-separator:first-child + window.background > box.vertical > headerbar:not(.titlebar), separator:first-child + window.background > box.vertical > headerbar:not(.titlebar):backdrop, window.background > box.vertical > headerbar:not(.titlebar):first-child, window.background > box.vertical > headerbar:not(.titlebar):first-child:backdrop {
-  border-top-left-radius: 0;
-}
-
-window.background > box.vertical > headerbar:not(.titlebar):last-child, window.background > box.vertical > headerbar:not(.titlebar):last-child:backdrop {
-  border-top-right-radius: 0;
-}
-
 headerbar separator.titlebutton, headerbar separator {
   min-width: 0;
   min-height: 0;
@@ -2015,66 +2228,141 @@ window.devel headerbar.titlebar:backdrop {
   /* background-color would flash */
 }
 
+viewswitcher {
+  margin: 0;
+}
 
-.background pathbar > button {
-  border-radius: 2px;
+viewswitcher.wide {
+  border-spacing: 3px;
+}
+
+viewswitcher.narrow button.toggle {
+  border-radius: 0;
+  margin: 0;
+}
+
+viewswitcher.narrow button.toggle:focus-within, viewswitcher.narrow button.toggle:focus {
+  box-shadow: none;
+}
+
+viewswitcher button.toggle {
+  font-weight: bold;
+  padding: 0;
+}
+
+viewswitcher button.toggle > stack > box.narrow {
+  font-size: 0.75rem;
+  padding-top: 6px;
+  padding-bottom: 4px;
+  border-spacing: 4px;
+}
+
+viewswitcher button.toggle > stack > box.narrow > stack > label {
   padding-left: 6px;
   padding-right: 6px;
 }
 
+viewswitcher button.toggle > stack > box.wide {
+  padding: 2px 12px;
+  border-spacing: 6px;
+}
 
-.background pathbar > button:checked {
-  box-shadow: inset 0 -2px #4285F4;
+viewswitcherbar actionbar > revealer > box {
+  padding: 0;
 }
 
+viewswitchertitle viewswitcher {
+  margin-left: 12px;
+  margin-right: 12px;
+}
 
-.background pathbar > button:checked,
-.background pathbar > button:checked:disabled {
-  background-color: transparent;
+indicatorbin > indicator, indicatorbin > mask {
+  min-width: 6px;
+  min-height: 6px;
+  border-radius: 9999px;
 }
 
+indicatorbin > indicator {
+  margin: 1px;
+  background-color: alpha(currentColor, 0.4);
+}
 
-.background pathbar > button.text-button,
-.background pathbar > button.image-button,
-.background pathbar > button {
-  padding-left: 4px;
-  padding-right: 4px;
+indicatorbin > indicator > label {
+  font-size: 0.6rem;
+  font-weight: bold;
+  padding: 1px 4px;
+  color: white;
 }
 
+indicatorbin > mask {
+  padding: 1px;
+  background: black;
+}
 
-.background pathbar > button.text-button.image-button label {
+indicatorbin.needs-attention > indicator {
+  background-color: #4285F4;
+}
+
+indicatorbin.needs-attention > indicator > label {
+  color: white;
+}
+
+
+pathbar > button {
+  border-radius: 3px;
+  padding-left: 6px;
+  padding-right: 6px;
+  margin: 0;
+}
+
+
+pathbar > button,
+pathbar > button:disabled {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+
+pathbar > button.text-button,
+pathbar > button.image-button,
+pathbar > button {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+
+pathbar > button.text-button.image-button label {
   padding-left: 0;
   padding-right: 0;
 }
 
 
-.background pathbar > button.text-button.image-button label:last-child,
-.background pathbar > button label:last-child {
+pathbar > button.text-button.image-button label:last-child,
+pathbar > button label:last-child {
   padding-right: 8px;
 }
 
 
-.background pathbar > button.text-button.image-button label:first-child,
-.background pathbar > button label:first-child {
+pathbar > button.text-button.image-button label:first-child,
+pathbar > button label:first-child {
   padding-left: 8px;
 }
 
 
-.background pathbar > button image {
-  padding-left: 4px;
-  padding-right: 4px;
+pathbar > button image {
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
 
-.background pathbar > button.slider-button {
-  padding-left: 0;
-  padding-right: 0;
+pathbar > button.slider-button {
+  padding-left: 3px;
+  padding-right: 3px;
 }
 
 columnview.view,
 treeview.view {
-  border-left-color: #46494e;
-  border-top-color: #46494e;
+  border-left-color: #4b4d51;
+  border-top-color: #4b4d51;
 }
 
 columnview.view:hover, columnview.view:active, columnview.view:selected,
@@ -2102,24 +2390,27 @@ treeview.view > dndtarget:drop(active) {
   border-color: #18b8ff;
 }
 
-columnview.view > dndtarget.after:drop(active),
-treeview.view > dndtarget.after:drop(active) {
+columnview.view > dndtarget:drop(active).after,
+treeview.view > dndtarget:drop(active).after {
   border-top-style: none;
 }
 
-columnview.view > dndtarget.before:drop(active),
-treeview.view > dndtarget.before:drop(active) {
+columnview.view > dndtarget:drop(active).before,
+treeview.view > dndtarget:drop(active).before {
   border-bottom-style: none;
 }
 
 columnview.view.expander,
 treeview.view.expander {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+  min-width: 16px;
+  min-height: 16px;
+  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
   color: rgba(255, 255, 255, 0.7);
 }
 
 columnview.view.expander:dir(rtl),
 treeview.view.expander:dir(rtl) {
+  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
   -gtk-icon-transform: rotate(90deg);
 }
 
@@ -2129,6 +2420,11 @@ treeview.view.expander:active {
   color: white;
 }
 
+columnview.view.expander:checked,
+treeview.view.expander:checked {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
 columnview.view.expander:disabled,
 treeview.view.expander:disabled {
   color: rgba(255, 255, 255, 0.3);
@@ -2228,6 +2524,10 @@ treeview.view acceleditor > label {
   background-color: #4285F4;
 }
 
+stack.view treeview.view {
+  min-height: 36px;
+}
+
 menubar {
   padding: 0;
   color: rgba(255, 255, 255, 0.7);
@@ -2275,8 +2575,8 @@ popover.menu {
 
 popover.menu > arrow, popover.menu.background > contents {
   padding: 6px;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
-  background-color: #333539;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
+  background-color: #383a3e;
   border: none;
   border-radius: 3px;
 }
@@ -2334,6 +2634,7 @@ popover.menu modelbutton {
   min-width: 48px;
   padding: 0 12px;
   border-radius: 3px;
+  color: rgba(255, 255, 255, 0.7);
 }
 
 popover.menu modelbutton:selected {
@@ -2384,6 +2685,7 @@ popover.background button:checked:disabled:not(.suggested-action):not(.destructi
 }
 
 popover.background {
+  color: white;
   background-color: transparent;
   font: initial;
 }
@@ -2420,7 +2722,7 @@ popover.background > contents > toolbar {
 }
 
 popover.background > contents separator {
-  background-color: #46494e;
+  background-color: #4b4d51;
   margin: 3px;
 }
 
@@ -2458,6 +2760,45 @@ magnifier {
   background-color: #333539;
 }
 
+tabbar tab, notebook > header tab {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
+  min-height: 24px;
+  min-width: 24px;
+  padding: 6px 12px;
+  outline-offset: -6px;
+  border-width: 0;
+  border-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 500;
+}
+
+tabbar tab:hover, notebook > header tab:hover {
+  color: white;
+}
+
+tabbar tab:hover.reorderable-page, notebook > header tab:hover.reorderable-page {
+  border-color: rgba(255, 255, 255, 0.12);
+  background-color: #2e3034;
+}
+
+tabbar tab:disabled, notebook > header tab:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+tabbar tab:checked, notebook > header tab:checked {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
+  color: white;
+}
+
+tabbar tab:checked:disabled, notebook > header tab:checked:disabled {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+tabbar tab:checked.reorderable-page, notebook > header tab:checked.reorderable-page {
+  border-color: rgba(255, 255, 255, 0.12);
+  background-color: #333539;
+}
+
 notebook > header {
   border-width: 1px;
   border-color: rgba(255, 255, 255, 0.12);
@@ -2474,7 +2815,7 @@ notebook > header.top > tabs {
 }
 
 notebook > header.top > tabs > tab:hover {
-  box-shadow: inset 0 -2px alpha(#4285F4, 0.3);
+  box-shadow: inset 0 -2px #314669;
 }
 
 notebook > header.top > tabs > tab:checked {
@@ -2490,7 +2831,7 @@ notebook > header.bottom > tabs {
 }
 
 notebook > header.bottom > tabs > tab:hover {
-  box-shadow: inset 0 2px alpha(#4285F4, 0.3);
+  box-shadow: inset 0 2px #314669;
 }
 
 notebook > header.bottom > tabs > tab:checked {
@@ -2506,7 +2847,7 @@ notebook > header.left > tabs {
 }
 
 notebook > header.left > tabs > tab:hover {
-  box-shadow: inset -2px 0 alpha(#4285F4, 0.3);
+  box-shadow: inset -2px 0 #314669;
 }
 
 notebook > header.left > tabs > tab:checked {
@@ -2522,7 +2863,7 @@ notebook > header.right > tabs {
 }
 
 notebook > header.right > tabs > tab:hover {
-  box-shadow: inset 2px 0 alpha(#4285F4, 0.3);
+  box-shadow: inset 2px 0 #314669;
 }
 
 notebook > header.right > tabs > tab:checked {
@@ -2581,45 +2922,6 @@ notebook > header > tabs > arrow {
   border-radius: 0;
 }
 
-notebook > header tab {
-  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 24px;
-  min-width: 24px;
-  padding: 6px 12px;
-  outline-offset: -6px;
-  border-width: 1px;
-  border-color: transparent;
-  color: rgba(255, 255, 255, 0.7);
-  font-weight: 500;
-}
-
-notebook > header tab:hover {
-  color: white;
-}
-
-notebook > header tab.reorderable-page:hover {
-  border-color: rgba(255, 255, 255, 0.12);
-  background-color: #2e3034;
-}
-
-notebook > header tab:disabled {
-  color: rgba(255, 255, 255, 0.3);
-}
-
-notebook > header tab:checked {
-  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
-  color: white;
-}
-
-notebook > header tab:checked:disabled {
-  color: rgba(255, 255, 255, 0.45);
-}
-
-notebook > header tab.reorderable-page:checked {
-  border-color: rgba(255, 255, 255, 0.12);
-  background-color: #333539;
-}
-
 notebook > header tab button.flat {
   min-height: 24px;
   min-width: 24px;
@@ -2663,8 +2965,108 @@ notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs t
   border-style: solid none;
 }
 
-notebook > stack:not(:only-child) {
-  background-color: #333539;
+notebook > stack:not(:only-child) {
+  background-color: #333539;
+}
+
+tabbar .box {
+  background-color: transparent;
+  border: none;
+}
+
+tabbar scrolledwindow.pinned tabbox > background:dir(ltr) {
+  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.12);
+}
+
+tabbar scrolledwindow.pinned tabbox > background:dir(rtl) {
+  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+tabbar tabbox {
+  background-color: #292b2e;
+  background-clip: padding-box;
+  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
+}
+
+tabbar tabbox > background {
+  background: none;
+}
+
+tabbar tab:hover {
+  box-shadow: inset 0 -2px #314669;
+}
+
+tabbar tab:checked {
+  box-shadow: inset 0 -2px #4285F4;
+}
+
+tabbar .start-action,
+tabbar .end-action {
+  background-color: rgba(255, 255, 255, 0.05);
+  background-clip: padding-box;
+  border-color: rgba(255, 255, 255, 0.12);
+  border-style: solid;
+  transition: background 150ms ease-in-out;
+}
+
+tabbar .start-action button,
+tabbar .end-action button {
+  border: none;
+  border-radius: 0;
+}
+
+tabbar .start-action:dir(ltr),
+tabbar .end-action:dir(rtl) {
+  border-right-width: 1px;
+}
+
+tabbar .start-action:dir(rtl),
+tabbar .end-action:dir(ltr) {
+  border-left-width: 1px;
+}
+
+tabbar:not(.inline) scrolledwindow.pinned undershoot {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+tabbar:not(.inline) tabbox > background {
+  background-color: #36383c;
+}
+
+tabbar:not(.inline) .start-action,
+tabbar:not(.inline) .end-action {
+  background-color: alpha(#36383c, 0.6);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+tabbar:not(.inline):backdrop .box {
+  background-color: #36383c;
+}
+
+dnd tab {
+  min-height: 24px;
+  background-color: #36383c;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 24px;
+}
+
+tabbar tab,
+dnd tab {
+  padding: 6px;
+}
+
+tabbar tab button.image-button,
+dnd tab button.image-button {
+  padding: 0;
+  margin: 0;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 9999px;
+}
+
+tabview:drop(active),
+tabbox:drop(active) {
+  box-shadow: none;
 }
 
 scrollbar {
@@ -2752,19 +3154,19 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
   background-color: rgba(255, 255, 255, 0.3);
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) > range > trough > slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal > range > trough > slider {
   min-width: 24px;
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
   min-width: 8px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) > range > trough > slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical > range > trough > slider {
   min-height: 24px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
   min-height: 8px;
 }
 
@@ -3454,6 +3856,7 @@ levelbar > trough {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #333539;
   color: rgba(255, 255, 255, 0.7);
+  outline: none;
 }
 
 levelbar > trough:disabled {
@@ -3628,25 +4031,97 @@ separator {
   background-color: rgba(255, 255, 255, 0.12);
 }
 
+> list.content > row:not(:first-child), > list.content > row.expander row.header:not(:first-child),
+> list.boxed-list > row.expander row.header:not(:first-child), > row.expander list.nested > row:not(:first-child), > listview.boxed-list > row.expander list > row:not(:first-child),
+> list.boxed-list > row.expander list > row:not(:first-child), > listview.content:not(.conversation-listbox) > row:not(:first-child), > listview.boxed-list > row:not(:first-child),
+> list.content:not(.conversation-listbox) > row:not(:first-child),
+> list.boxed-list > row:not(:first-child) {
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+list.content > row:first-child, list.content > row.expander row.header:first-child,
+list.boxed-list > row.expander row.header:first-child, row.expander list.nested > row:first-child, listview.boxed-list > row.expander list > row:first-child,
+list.boxed-list > row.expander list > row:first-child, listview.content:not(.conversation-listbox) > row:first-child, listview.boxed-list > row:first-child,
+list.boxed-list > row:first-child {
+  border-radius: 2px 2px 0 0;
+}
+
+list.content > row:last-child, list.content > row.expander row.header:last-child,
+list.boxed-list > row.expander row.header:last-child, row.expander list.nested > row:last-child, listview.boxed-list > row.expander list > row:last-child,
+list.boxed-list > row.expander list > row:last-child, listview.content:not(.conversation-listbox) > row:last-child, listview.boxed-list > row:last-child,
+list.boxed-list > row:last-child {
+  border-radius: 0 0 2px 2px;
+}
+
 listview,
 list {
   border-color: rgba(255, 255, 255, 0.12);
   background-color: #333539;
+  color: white;
+  box-shadow: none;
 }
 
-listview > row,
-list > row {
-  padding: 2px;
+listview row,
+list row {
+  padding: 6px;
+}
+
+listview.content:not(.conversation-listbox), listview.boxed-list,
+list.content:not(.conversation-listbox),
+list.boxed-list {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 3px;
 }
 
-listview > row.expander,
-list > row.expander {
-  padding: 0px;
+listview.boxed-list > row.expander list,
+list.boxed-list > row.expander list {
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
 }
 
-listview > row.expander .row-header,
-list > row.expander .row-header {
-  padding: 2px;
+list.frame {
+  border-radius: 3px;
+}
+
+listview.view {
+  color: white;
+  background-color: transparent;
+}
+
+popover.menu listview.view {
+  padding: 0;
+  border-radius: 3px;
+}
+
+popover.menu listview.view > row {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 3px;
+}
+
+row {
+  color: white;
+}
+
+row label.subtitle {
+  font-size: smaller;
+}
+
+row > box.header {
+  margin-left: 12px;
+  margin-right: 12px;
+  min-height: 42px;
+}
+
+row > box.header > .icon:disabled {
+  filter: opacity(0.35);
+}
+
+row > box.header > box.title {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  border-spacing: 3px;
 }
 
 columnview.view > header > button,
@@ -3657,19 +4132,113 @@ treeview.view > header > button, row.activatable {
 
 columnview.view > header > button:hover,
 treeview.view > header > button:hover, row.activatable:hover {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: rgba(255, 255, 255, 0.05);
 }
 
 columnview.view > header > button.has-open-popup,
 treeview.view > header > button.has-open-popup, columnview.view > header > button:active,
 treeview.view > header > button:active, row.activatable.has-open-popup, row.activatable:active {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+button row.activatable:focus, button row.activatable:hover, button row.activatable:active {
+  box-shadow: none;
 }
 
 row:selected:hover {
   background-color: #5a95f5;
 }
 
+row.combo image.dropdown-arrow:disabled {
+  filter: opacity(0.35);
+}
+
+row.combo listview.inline {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: inherit;
+}
+
+row.combo listview.inline, row.combo listview.inline:disabled {
+  background: none;
+  color: inherit;
+}
+
+row.combo popover > contents {
+  min-width: 120px;
+}
+
+row.expander {
+  background: none;
+  padding: 0;
+}
+
+row.expander > box > list {
+  background: none;
+  color: inherit;
+}
+
+row.expander list.nested {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: inherit;
+}
+
+row.expander image.expander-row-arrow:dir(ltr) {
+  margin-left: 6px;
+}
+
+row.expander image.expander-row-arrow:dir(rtl) {
+  margin-right: 6px;
+}
+
+row.expander:checked image.expander-row-arrow {
+  -gtk-icon-transform: rotate(0turn);
+}
+
+row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
+  -gtk-icon-transform: rotate(-0.25turn);
+}
+
+row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
+  -gtk-icon-transform: rotate(0.25turn);
+}
+
+row.expander:checked image.expander-row-arrow:not(:disabled) {
+  color: #18b8ff;
+}
+
+.osd row.expander:checked image.expander-row-arrow:not(:disabled) {
+  color: inherit;
+}
+
+row.expander image.expander-row-arrow:disabled {
+  filter: opacity(0.35);
+}
+
+list.content > row.expander,
+list.boxed-list > row.expander {
+  border: none;
+}
+
+list.content > row:first-child, list.content > row:first-child.expander row.header,
+list.boxed-list > row:first-child,
+list.boxed-list > row:first-child.expander row.header {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
+
+list.content > row:last-child, list.content > row:last-child.expander:not(:checked), list.content > row:last-child.expander:not(:checked) row.header, list.content > row:last-child.expander:checked list.nested, list.content > row:last-child.expander:checked list.nested > row:last-child,
+list.boxed-list > row:last-child,
+list.boxed-list > row:last-child.expander:not(:checked),
+list.boxed-list > row:last-child.expander:not(:checked) row.header,
+list.boxed-list > row:last-child.expander:checked list.nested,
+list.boxed-list > row:last-child.expander:checked list.nested > row:last-child {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-bottom-width: 0;
+}
+
 columnview > listview > row {
   padding: 0;
 }
@@ -3683,7 +4252,7 @@ columnview > listview > row > cell:not(:first-child) {
 }
 
 columnview.column-separators > listview > row > cell {
-  border-left-color: #46494e;
+  border-left-color: #4b4d51;
 }
 
 columnview.data-table > listview > row > cell {
@@ -3710,7 +4279,13 @@ treeexpander {
 }
 
 .app-notification {
-  margin: 8px;
+  color: white;
+  border: none;
+  background-color: #232528;
+  border-radius: 3px;
+  padding: 6px;
+  margin: 0 6px 6px;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .app-notification.frame,
@@ -3810,61 +4385,61 @@ window.dialog.message .titlebar:backdrop {
   color: rgba(255, 255, 255, 0.7);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button {
   padding: 4px 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 0;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:first-child {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:last-child {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action {
   color: #4285F4;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action:hover {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action:hover {
   color: #4285F4;
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action:active {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   color: white;
   border-color: rgba(66, 133, 244, 0.75);
   box-shadow: inset 0 0 0 9999px rgba(66, 133, 244, 0.5);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action:disabled {
   opacity: 0.65;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action {
   color: #FF5252;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action:hover {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action:hover {
   color: #FF5252;
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action:active {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   color: white;
   border-color: rgba(255, 82, 82, 0.75);
   box-shadow: inset 0 0 0 9999px rgba(255, 82, 82, 0.5);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action:disabled {
   opacity: 0.65;
 }
 
@@ -3873,18 +4448,18 @@ window.dialog.message.csd.background {
   border-bottom-right-radius: 2px;
 }
 
-window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button {
+window.dialog.message.csd .linked:not(.vertical).dialog-action-area > button {
   padding: 8px 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 0;
 }
 
-window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button:first-child {
+window.dialog.message.csd .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 2px;
   border-top-left-radius: 0;
 }
 
-window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button:last-child {
+window.dialog.message.csd .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 2px;
   border-top-right-radius: 0;
 }
@@ -3913,31 +4488,15 @@ filechooserbutton:drop(active) {
 }
 
 .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
-  border-right: 1px solid rgba(255, 255, 255, 0.12);
+  border-right: 1px solid #4b4d51;
   border-left-style: none;
 }
 
 .sidebar.right {
-  border-left: 1px solid rgba(255, 255, 255, 0.12);
+  border-left: 1px solid #4b4d51;
   border-right-style: none;
 }
 
-.sidebar listview.view,
-.sidebar list {
-  background-color: transparent;
-}
-
-.sidebar row {
-  transition: none;
-}
-
-.sidebar separator,
-.sidebar .separator {
-  min-height: 0;
-  border-color: transparent;
-  background-color: transparent;
-}
-
 paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
   border-style: none;
 }
@@ -3946,6 +4505,10 @@ stacksidebar list.separators:not(.horizontal) > row:not(.separator) {
   border-bottom: none;
 }
 
+leaflet.unfolded > box > stacksidebar.sidebar {
+  border: none;
+}
+
 stacksidebar row {
   padding: 12px 6px;
   transition: none;
@@ -3960,19 +4523,23 @@ separator.sidebar {
   background-color: rgba(255, 255, 255, 0.12);
 }
 
+separator.sidebar.selection-mode, .selection-mode separator.sidebar {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
 .navigation-sidebar {
   padding: 6px 0;
 }
 
 .navigation-sidebar > separator {
-  margin: 6px;
+  margin: 6px 0;
 }
 
 .navigation-sidebar > row {
   min-height: 32px;
   padding: 0 6px;
   border-radius: 3px;
-  margin: 0 6px 2px;
+  margin: 1px 6px;
 }
 
 .navigation-sidebar > row:hover, .navigation-sidebar > row:focus-visible:focus-within {
@@ -4011,14 +4578,8 @@ placessidebar > viewport.frame {
   border-style: none;
 }
 
-placessidebar list {
-  padding: 1px 0 4px;
-}
-
 placessidebar .navigation-sidebar > row {
   min-height: 30px;
-  margin: -1px 0;
-  padding: 0;
 }
 
 placessidebar .navigation-sidebar > row > revealer {
@@ -4109,15 +4670,16 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#46494e);
+  background-image: image(#4b4d51);
   background-size: 1px 1px;
+  box-shadow: none;
 }
 
 paned > separator.wide {
   min-width: 6px;
   min-height: 6px;
   background-color: #292b2e;
-  background-image: image(#46494e), image(#46494e);
+  background-image: image(#4b4d51), image(#4b4d51);
   background-size: 1px 1px, 1px 1px;
 }
 
@@ -4254,25 +4816,23 @@ infobar.info button:disabled:active, infobar.question button:disabled:active, in
 }
 
 tooltip {
-  padding: 6px 10px;
-  border-radius: 3px;
+  margin: 0;
+  padding: 6px;
   box-shadow: none;
 }
 
 tooltip.background {
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: alpha(#333539, 0.9);
-}
-
-tooltip:not(.csd) {
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  background-color: #232528;
+  color: white;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
   border-radius: 3px;
-  background-clip: border-box;
+  margin: 0 6px 8px 6px;
+  border: none;
 }
 
 tooltip label {
   min-height: 20px;
-  padding: 0 2px;
+  padding: 0 3px;
 }
 
 tooltip > box {
@@ -4339,11 +4899,11 @@ colorswatch:drop(active) {
   box-shadow: none;
 }
 
-colorswatch.light:drop(active) overlay {
+colorswatch:drop(active).light overlay {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), 0 0 0 2px #18b8ff;
 }
 
-colorswatch.dark:drop(active) overlay {
+colorswatch:drop(active).dark overlay {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), 0 0 0 2px #18b8ff;
 }
 
@@ -4426,11 +4986,12 @@ colorchooser .popover.osd:backdrop {
 
 window {
   border: none;
+  outline: none;
 }
 
 window.csd {
   transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
-  border-radius: 3px 3px 0 0;
+  border-radius: 3px;
   box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 16px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 16px 2px rgba(0, 0, 0, 0), 0 6px 18px 5px rgba(0, 0, 0, 0);
   margin: 0;
 }
@@ -4455,7 +5016,7 @@ window.csd.solid-csd {
   border: 1px solid #1e1f21;
   border-radius: 0;
   box-shadow: inset 0 0 0 2px #36383c, inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #46494e;
+  background-color: #4b4d51;
 }
 
 window.maximized, window.fullscreen, window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom {
@@ -4737,8 +5298,7 @@ shortcuts-section {
   font: initial;
 }
 
-button.close, button.round-button, button.circular, dropdown > .linked:not(.vertical) > button.combo:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:not(:only-child), check,
+button.close, button.round-button, button.circular, menubutton.circular > button, check,
 radio {
   border-radius: 100px;
 }
@@ -4871,6 +5431,166 @@ statusbar {
   padding: 6px 10px;
 }
 
+avatar {
+  border-radius: 9999px;
+  font-weight: bold;
+}
+
+avatar.color1 {
+  background-image: linear-gradient(#83b6ec, #337fdc);
+  color: #cfe1f5;
+}
+
+avatar.color2 {
+  background-image: linear-gradient(#7ad9f1, #0f9ac8);
+  color: #caeaf2;
+}
+
+avatar.color3 {
+  background-image: linear-gradient(#8de6b1, #29ae74);
+  color: #cef8d8;
+}
+
+avatar.color4 {
+  background-image: linear-gradient(#b5e98a, #6ab85b);
+  color: #e6f9d7;
+}
+
+avatar.color5 {
+  background-image: linear-gradient(#f8e359, #d29d09);
+  color: #f9f4e1;
+}
+
+avatar.color6 {
+  background-image: linear-gradient(#ffcb62, #d68400);
+  color: #ffead1;
+}
+
+avatar.color7 {
+  background-image: linear-gradient(#ffa95a, #ed5b00);
+  color: #ffe5c5;
+}
+
+avatar.color8 {
+  background-image: linear-gradient(#f78773, #e62d42);
+  color: #f8d2ce;
+}
+
+avatar.color9 {
+  background-image: linear-gradient(#e973ab, #e33b6a);
+  color: #fac7de;
+}
+
+avatar.color10 {
+  background-image: linear-gradient(#cb78d4, #9945b5);
+  color: #e7c2e8;
+}
+
+avatar.color11 {
+  background-image: linear-gradient(#9e91e8, #7a59ca);
+  color: #d5d2f5;
+}
+
+avatar.color12 {
+  background-image: linear-gradient(#e3cf9c, #b08952);
+  color: #f2eade;
+}
+
+avatar.color13 {
+  background-image: linear-gradient(#be916d, #785336);
+  color: #e5d6ca;
+}
+
+avatar.color14 {
+  background-image: linear-gradient(#c0bfbc, #6e6d71);
+  color: #d8d7d3;
+}
+
+avatar.contrasted {
+  color: white;
+}
+
+avatar.image {
+  background: none;
+}
+
+preferencespage > scrolledwindow > viewport > clamp > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+preferencesgroup > box, preferencesgroup > box .labels {
+  border-spacing: 6px;
+}
+
+preferencesgroup > box > box.header:not(.single-line) {
+  margin-bottom: 6px;
+}
+
+preferencesgroup > box > box.single-line {
+  min-height: 34px;
+}
+
+statuspage > scrolledwindow > viewport > box {
+  margin: 36px 12px;
+  border-spacing: 36px;
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box {
+  border-spacing: 12px;
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon {
+  -gtk-icon-size: 128px;
+  color: alpha(currentColor, 0.55);
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:disabled {
+  opacity: 0.35;
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) {
+  margin-bottom: 24px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon {
+  -gtk-icon-size: 96px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) {
+  margin-bottom: 12px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box > clamp > box > .title {
+  font-size: 18pt;
+}
+
+.card {
+  background-color: #383a3e;
+  color: white;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
+}
+
+.osd .card, .card.osd {
+  background-color: alpha(currentColor, 0.1);
+  color: inherit;
+  box-shadow: none;
+}
+
+.card.activatable:hover {
+  background-image: image(alpha(currentColor, 0.03));
+}
+
+.card.activatable:active {
+  background-image: image(alpha(currentColor, 0.08));
+}
+
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
diff --git a/src/gtk/4.0/gtk-light.css b/src/gtk/4.0/gtk-light.css
index f4db4879..342a158f 100644
--- a/src/gtk/4.0/gtk-light.css
+++ b/src/gtk/4.0/gtk-light.css
@@ -51,15 +51,15 @@ iconview:disabled, textview > text:disabled, .view:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-textview:drop(active) {
-  caret-color: #F4B400;
-}
-
 textview > border {
   background-color: #f9f9f9;
   color: rgba(0, 0, 0, 0.38);
 }
 
+textview:drop(active) {
+  caret-color: #F4B400;
+}
+
 iconview:hover, iconview:active, iconview:selected {
   border-radius: 3px;
 }
@@ -80,7 +80,11 @@ treeview.view > rubberband, gridview > rubberband, flowbox > rubberband {
 
 flowbox > flowboxchild {
   padding: 4px;
-  border-radius: 2px;
+  border-radius: 3px;
+}
+
+.content-view .tile:selected {
+  background-color: transparent;
 }
 
 gridview > child {
@@ -131,8 +135,24 @@ tab label:disabled, button label:disabled {
   color: inherit;
 }
 
-.dim-label, headerbar .subtitle, entry > text > placeholder, label.separator {
-  opacity: 0.45;
+.dim-label, row.expander:not(:checked) image.expander-row-arrow, row label.subtitle, headerbar .subtitle, entry > text > placeholder, label.separator {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.accent {
+  color: #18b8ff;
+}
+
+.success {
+  color: #0F9D58;
+}
+
+.warning {
+  color: #F4B400;
+}
+
+.error {
+  color: #DD2C00;
 }
 
 window.assistant .sidebar {
@@ -158,7 +178,7 @@ window.aboutdialog image.large-icons {
   -gtk-icon-size: 128px;
 }
 
-.osd .scale-popup > contents, .osd .scale-popup > arrow, .app-notification, .osd popover.background > arrow,
+.osd .scale-popup > contents, .osd .scale-popup > arrow, .osd popover.background > arrow,
 .osd popover.background > contents, popover.background.touch-selection > arrow,
 popover.background.touch-selection > contents, popover.background.magnifier > arrow,
 popover.background.magnifier > contents, .osd {
@@ -172,6 +192,30 @@ popover.background.magnifier > contents, .osd {
   box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
 }
 
+toast {
+  margin: 12px;
+  margin-bottom: 24px;
+  border-radius: 9999px;
+  border-spacing: 6px;
+  padding: 6px;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.35);
+  background-color: #FFFFFF;
+  color: rgba(0, 0, 0, 0.87);
+  border: none;
+}
+
+toast:dir(ltr) {
+  padding-left: 12px;
+}
+
+toast:dir(rtl) {
+  padding-right: 12px;
+}
+
+toast > label {
+  margin: 0 6px;
+}
+
 @keyframes spin {
   to {
     transform: rotate(1turn);
@@ -239,7 +283,7 @@ spinner:checked:disabled {
 }
 
 window.dialog.message entry, notebook > stack:not(:only-child) entry,
-notebook > stack:not(:only-child) spinbutton:not(.vertical), popover.background entry, .background spinbutton:not(.vertical), .background spinbutton.flat:not(.vertical), .background .linked > entry, .background .linked.vertical > entry, .background .linked > entry.flat, .background .linked.vertical > entry.flat, .background entry.flat {
+notebook > stack:not(:only-child) spinbutton:not(.vertical), popover.background entry, spinbutton:not(.vertical), spinbutton.flat:not(.vertical), .linked > entry, .linked.vertical > entry, .linked > entry.flat, .linked.vertical > entry.flat, entry.flat {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
@@ -249,80 +293,54 @@ notebook > stack:not(:only-child) spinbutton:not(.vertical), popover.background
 }
 
 window.dialog.message entry:focus-within, notebook > stack:not(:only-child) entry:focus-within,
-notebook > stack:not(:only-child) spinbutton:focus-within:not(.vertical), popover.background entry:focus-within, .background spinbutton:focus-within:not(.vertical), .background .linked > entry:focus-within, .background entry.flat:focus-within {
+notebook > stack:not(:only-child) spinbutton:focus-within:not(.vertical), popover.background entry:focus-within, spinbutton:focus-within:not(.vertical), .linked > entry:focus-within, entry.flat:focus-within {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px #4285F4;
 }
 
 window.dialog.message entry:drop(active), notebook > stack:not(:only-child) entry:drop(active),
-notebook > stack:not(:only-child) spinbutton:drop(active):not(.vertical), popover.background entry:drop(active), .background spinbutton:drop(active):not(.vertical), .background .linked > entry:drop(active), .background entry.flat:drop(active) {
+notebook > stack:not(:only-child) spinbutton:drop(active):not(.vertical), popover.background entry:drop(active), spinbutton:drop(active):not(.vertical), .linked > entry:drop(active), entry.flat:drop(active) {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px rgba(0, 0, 0, 0.38);
 }
 
 window.dialog.message entry:disabled, notebook > stack:not(:only-child) entry:disabled,
-notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), popover.background entry:disabled, .background spinbutton:disabled:not(.vertical), .background .linked > entry:disabled, .background entry.flat:disabled {
+notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), popover.background entry:disabled, spinbutton:disabled:not(.vertical), .linked > entry:disabled, entry.flat:disabled {
   border-width: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical > text, spinbutton:not(.vertical), entry {
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #FFFFFF;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within {
-  border: 1px solid #4285F4;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #FFFFFF;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:disabled {
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  border-image: none;
-  background-color: #f9f9f9;
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.background entry {
+entry {
+  min-height: 36px;
+  padding: 0 8px;
+  border-radius: 3px;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   border: none;
   border-image: none;
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08);
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
+  outline: none;
 }
 
-.background entry:focus-within {
+entry:focus-within {
   border: none;
   border-image: none;
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
+  outline: none;
 }
 
-.background entry:disabled {
+entry:disabled {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08);
   background-color: #f9f9f9;
   color: rgba(0, 0, 0, 0.38);
 }
 
-entry {
-  min-height: 36px;
-  padding: 0 8px;
-}
-
 entry > image {
   color: alpha(currentColor, 0.9);
 }
@@ -381,6 +399,7 @@ entry undershoot.right {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08);
   background-color: #DD2C00;
   color: white;
+  outline: none;
 }
 
 .background entry.error:focus-within, .background entry.search.error:focus-within {
@@ -388,6 +407,7 @@ entry undershoot.right {
   border-image: none;
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12);
   color: white;
+  outline: none;
 }
 
 .background entry.error:disabled, .background entry.search.error:disabled {
@@ -424,6 +444,7 @@ entry undershoot.right {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08);
   background-color: #F4B400;
   color: white;
+  outline: none;
 }
 
 .background entry.warning:focus-within, .background entry.search.warning:focus-within {
@@ -431,6 +452,7 @@ entry undershoot.right {
   border-image: none;
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12);
   color: white;
+  outline: none;
 }
 
 .background entry.warning:disabled, .background entry.search.warning:disabled {
@@ -523,6 +545,7 @@ editablelabel > stack > text {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08);
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
+  outline: none;
 }
 
 @keyframes needs_attention {
@@ -535,71 +558,71 @@ editablelabel > stack > text {
 }
 
 window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button, window.dialog.message .linked.dialog-action-area:not(.vertical) > button, actionbar > revealer > box button:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model, popover.menu box.inline-buttons button.image-button.model,
-.background pathbar > button,
-toolbar button, dropdown > .linked:not(.vertical) > button.combo:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:not(:only-child), .linked > spinbutton:not(.vertical) > button.up, .linked > spinbutton:not(.vertical) > button.down,
-list > row button.image-button:not(.flat), .toolbar button, toolbutton button, toolbutton button.image-button, toolbutton button.toggle, .background .linked.stack-switcher > button {
+pathbar > button, .toolbar button,
+toolbar button, .linked > spinbutton:not(.vertical) > button.up, .linked > spinbutton:not(.vertical) > button.down,
+list > row button.image-button:not(.flat), splitbutton.flat > button,
+splitbutton.flat > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, menubutton.flat > button, toolbutton button, toolbutton button.image-button, toolbutton button.toggle, .linked.stack-switcher > button, toast button {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px transparent;
   background-color: transparent;
   color: rgba(0, 0, 0, 0.6);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:hover, popover.menu box.inline-buttons button.image-button.model:hover,
-.background pathbar > button:hover,
-toolbar button:hover, dropdown > .linked:not(.vertical) > button.combo:hover:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:hover:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:hover, .linked > spinbutton:not(.vertical) > button.down:hover,
-list > row button.image-button:hover:not(.flat), .toolbar button:hover, toolbutton button:hover, .background .linked.stack-switcher > button:hover {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:hover, popover.menu box.inline-buttons button.image-button.model:hover,
+pathbar > button:hover, .toolbar button:hover,
+toolbar button:hover, .linked > spinbutton:not(.vertical) > button.up:hover, .linked > spinbutton:not(.vertical) > button.down:hover,
+list > row button.image-button:hover:not(.flat), splitbutton.flat > button:hover,
+splitbutton.flat > menubutton > button:hover, menubutton.suggested-action > button:hover, menubutton.destructive-action > button:hover, menubutton.opaque > button:hover, menubutton.flat > button:hover, toolbutton button:hover, .linked.stack-switcher > button:hover, toast button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   color: rgba(0, 0, 0, 0.87);
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:focus, actionbar > revealer > box button:focus:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:focus, popover.menu box.inline-buttons button.image-button.model:focus,
-.background pathbar > button:focus,
-toolbar button:focus, dropdown > .linked:not(.vertical) > button.combo:focus:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:focus:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:focus, .linked > spinbutton:not(.vertical) > button.down:focus,
-list > row button.image-button:focus:not(.flat), .toolbar button:focus, toolbutton button:focus, .background .linked.stack-switcher > button:focus {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:focus, actionbar > revealer > box button:focus:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:focus, popover.menu box.inline-buttons button.image-button.model:focus,
+pathbar > button:focus, .toolbar button:focus,
+toolbar button:focus, .linked > spinbutton:not(.vertical) > button.up:focus, .linked > spinbutton:not(.vertical) > button.down:focus,
+list > row button.image-button:focus:not(.flat), splitbutton.flat > button:focus,
+splitbutton.flat > menubutton > button:focus, menubutton.suggested-action > button:focus, menubutton.destructive-action > button:focus, menubutton.opaque > button:focus, menubutton.flat > button:focus, toolbutton button:focus, .linked.stack-switcher > button:focus, toast button:focus {
   background-color: transparent;
   outline: none;
   transition: none;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.inline-buttons button.image-button.model:active,
-.background pathbar > button:active,
-toolbar button:active, dropdown > .linked:not(.vertical) > button.combo:active:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:active:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:active, .linked > spinbutton:not(.vertical) > button.down:active,
-list > row button.image-button:active:not(.flat), .toolbar button:active, toolbutton button:active, .background .linked.stack-switcher > button:active {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.inline-buttons button.image-button.model:active,
+pathbar > button:active, .toolbar button:active,
+toolbar button:active, .linked > spinbutton:not(.vertical) > button.up:active, .linked > spinbutton:not(.vertical) > button.down:active,
+list > row button.image-button:active:not(.flat), splitbutton.flat > button:active,
+splitbutton.flat > menubutton > button:active, menubutton.suggested-action > button:active, menubutton.destructive-action > button:active, menubutton.opaque > button:active, menubutton.flat > button:active, toolbutton button:active, .linked.stack-switcher > button:active, toast button:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.16);
   color: rgba(0, 0, 0, 0.87);
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:disabled, popover.menu box.inline-buttons button.image-button.model:disabled,
-.background pathbar > button:disabled,
-toolbar button:disabled, dropdown > .linked:not(.vertical) > button.combo:disabled:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:disabled, .linked > spinbutton:not(.vertical) > button.down:disabled,
-list > row button.image-button:disabled:not(.flat), .toolbar button:disabled, toolbutton button:disabled, .background .linked.stack-switcher > button:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:disabled, popover.menu box.inline-buttons button.image-button.model:disabled,
+pathbar > button:disabled, .toolbar button:disabled,
+toolbar button:disabled, .linked > spinbutton:not(.vertical) > button.up:disabled, .linked > spinbutton:not(.vertical) > button.down:disabled,
+list > row button.image-button:disabled:not(.flat), splitbutton.flat > button:disabled,
+splitbutton.flat > menubutton > button:disabled, menubutton.suggested-action > button:disabled, menubutton.destructive-action > button:disabled, menubutton.opaque > button:disabled, menubutton.flat > button:disabled, toolbutton button:disabled, .linked.stack-switcher > button:disabled, toast button:disabled {
   box-shadow: none;
   background-color: transparent;
   color: alpha(currentColor, 0.27);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked, popover.menu box.inline-buttons button.image-button.model:checked,
-.background pathbar > button:checked,
-toolbar button:checked, dropdown > .linked:not(.vertical) > button.combo:checked:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:checked:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked, .linked > spinbutton:not(.vertical) > button.down:checked,
-list > row button.image-button:checked:not(.flat), .toolbar button:checked, toolbutton button:checked, .background .linked.stack-switcher > button:checked {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked, popover.menu box.inline-buttons button.image-button.model:checked,
+pathbar > button:checked, .toolbar button:checked,
+toolbar button:checked, .linked > spinbutton:not(.vertical) > button.up:checked, .linked > spinbutton:not(.vertical) > button.down:checked,
+list > row button.image-button:checked:not(.flat), splitbutton.flat > button:checked,
+splitbutton.flat > menubutton > button:checked, menubutton.suggested-action > button:checked, menubutton.destructive-action > button:checked, menubutton.opaque > button:checked, menubutton.flat > button:checked, toolbutton button:checked, .linked.stack-switcher > button:checked, toast button:checked {
   color: rgba(0, 0, 0, 0.87);
   background-color: alpha(currentColor, 0.12);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked:disabled, popover.menu box.inline-buttons button.image-button.model:checked:disabled,
-.background pathbar > button:checked:disabled,
-toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button.combo:checked:disabled:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:checked:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked:disabled, .linked > spinbutton:not(.vertical) > button.down:checked:disabled,
-list > row button.image-button:checked:disabled:not(.flat), .toolbar button:checked:disabled, toolbutton button:checked:disabled, .background .linked.stack-switcher > button:checked:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked:disabled, popover.menu box.inline-buttons button.image-button.model:checked:disabled,
+pathbar > button:checked:disabled, .toolbar button:checked:disabled,
+toolbar button:checked:disabled, .linked > spinbutton:not(.vertical) > button.up:checked:disabled, .linked > spinbutton:not(.vertical) > button.down:checked:disabled,
+list > row button.image-button:checked:disabled:not(.flat), splitbutton.flat > button:checked:disabled,
+splitbutton.flat > menubutton > button:checked:disabled, menubutton.suggested-action > button:checked:disabled, menubutton.destructive-action > button:checked:disabled, menubutton.opaque > button:checked:disabled, menubutton.flat > button:checked:disabled, toolbutton button:checked:disabled, .linked.stack-switcher > button:checked:disabled, toast button:checked:disabled {
   background-color: alpha(currentColor, 0.06);
   color: rgba(0, 0, 0, 0.38);
 }
@@ -641,8 +664,8 @@ radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disa
   color: alpha(currentColor, 0.27);
 }
 
-.background button.combo, .background .linked > button.combo, .background .linked entry + button, .background .linked entry + button + button {
-  border-radius: 0;
+dropdown > .linked:not(.vertical) > button.combo,
+combobox > .linked:not(.vertical) > button.combo, button.combo, .linked > button.combo, .linked entry + button, .linked entry + button.image-button, .linked entry + button.text-button, .linked entry + menubutton > button {
   background: none;
   font-weight: normal;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
@@ -652,63 +675,71 @@ radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disa
   border-width: 0;
 }
 
-.background button.combo:hover, .background .linked entry + button:hover, .background .linked entry + button + button:hover {
+dropdown > .linked:not(.vertical) > button.combo,
+combobox > .linked:not(.vertical) > button.combo, button.combo, .linked > button.combo, .linked entry + button, .linked entry + button.image-button, .linked entry + button.text-button, .linked entry + menubutton > button {
+  border-radius: 0;
+}
+
+dropdown > .linked:not(.vertical) > button.combo:hover,
+combobox > .linked:not(.vertical) > button.combo:hover, button.combo:hover, .linked entry + button:hover, .linked entry + menubutton > button:hover {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px rgba(0, 0, 0, 0.38);
 }
 
-.background button.combo:checked, .background .linked entry + button:checked, .background .linked entry + button + button:checked {
+dropdown > .linked:not(.vertical) > button.combo:checked,
+combobox > .linked:not(.vertical) > button.combo:checked, button.combo:checked, .linked entry + button:checked, .linked entry + menubutton > button:checked {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px #4285F4;
 }
 
-.background button.combo:disabled, .background .linked entry + button:disabled, .background .linked entry + button + button:disabled {
+dropdown > .linked:not(.vertical) > button.combo:disabled,
+combobox > .linked:not(.vertical) > button.combo:disabled, button.combo:disabled, .linked entry + button:disabled, .linked entry + menubutton > button:disabled {
   border-width: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
   color: rgba(0, 0, 0, 0.38);
 }
 
-button {
-  min-height: 24px;
-  min-width: 16px;
-  padding: 6px 9px;
-  border-radius: 3px;
-  font-weight: 500;
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  background-color: #FFFFFF;
+splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, button.opaque {
+  background-image: image(alpha(currentColor, 0.06));
   color: rgba(0, 0, 0, 0.6);
+  box-shadow: none;
 }
 
-button:hover {
+splitbutton.suggested-action > button:hover, splitbutton.suggested-action > menubutton > button:hover, splitbutton.destructive-action > button:hover, splitbutton.destructive-action > menubutton > button:hover, splitbutton.opaque > button:hover, splitbutton.opaque > menubutton > button:hover, button.opaque:hover {
+  background-image: image(alpha(currentColor, 0.1));
   box-shadow: none;
-  background-color: rgba(247, 247, 247, 0.9948);
   color: rgba(0, 0, 0, 0.87);
 }
 
-button:active, button:checked {
+splitbutton.suggested-action > button.keyboard-activating, splitbutton.suggested-action > menubutton > button.keyboard-activating, splitbutton.destructive-action > button.keyboard-activating, splitbutton.destructive-action > menubutton > button.keyboard-activating, splitbutton.opaque > button.keyboard-activating, splitbutton.opaque > menubutton > button.keyboard-activating, button.keyboard-activating.opaque, splitbutton.suggested-action > button:active, splitbutton.suggested-action > menubutton > button:active, splitbutton.destructive-action > button:active, splitbutton.destructive-action > menubutton > button:active, splitbutton.opaque > button:active, splitbutton.opaque > menubutton > button:active, button.opaque:active {
+  background-image: image(alpha(currentColor, 0.16));
   box-shadow: none;
-  background-color: rgba(239, 239, 239, 0.9896);
   color: rgba(0, 0, 0, 0.87);
-  animation: none;
 }
 
-button:disabled {
+splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button:checked, button.opaque:checked {
+  background-image: image(alpha(currentColor, 0.12));
   box-shadow: none;
-  background-color: rgba(234, 234, 234, 0.9948);
   color: rgba(0, 0, 0, 0.87);
 }
 
-button:checked:disabled {
-  box-shadow: none;
-  background-color: rgba(66, 133, 244, 0.5);
-  color: rgba(255, 255, 255, 0.45);
+splitbutton.suggested-action > button:checked:hover, splitbutton.suggested-action > menubutton > button:checked:hover, splitbutton.destructive-action > button:checked:hover, splitbutton.destructive-action > menubutton > button:checked:hover, splitbutton.opaque > button:checked:hover, splitbutton.opaque > menubutton > button:checked:hover, button.opaque:checked:hover {
+  background-image: image(alpha(currentColor, 0.16));
 }
 
-.background button {
+splitbutton.suggested-action > button:checked.keyboard-activating, splitbutton.suggested-action > menubutton > button:checked.keyboard-activating, splitbutton.destructive-action > button:checked.keyboard-activating, splitbutton.destructive-action > menubutton > button:checked.keyboard-activating, splitbutton.opaque > button:checked.keyboard-activating, splitbutton.opaque > menubutton > button:checked.keyboard-activating, button.opaque:checked.keyboard-activating, splitbutton.suggested-action > button:checked:active, splitbutton.suggested-action > menubutton > button:checked:active, splitbutton.destructive-action > button:checked:active, splitbutton.destructive-action > menubutton > button:checked:active, splitbutton.opaque > button:checked:active, splitbutton.opaque > menubutton > button:checked:active, button.opaque:checked:active {
+  background-image: image(alpha(currentColor, 0.16));
+}
+
+button {
+  min-height: 24px;
+  min-width: 16px;
+  padding: 6px 9px;
+  border-radius: 3px;
+  font-weight: 500;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08), inset 0 0 0 9999px transparent;
   background-color: #FFFFFF;
@@ -716,34 +747,34 @@ button:checked:disabled {
   border: none;
 }
 
-.background button:hover {
+button:hover {
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
   color: rgba(0, 0, 0, 0.87);
   background-color: white;
 }
 
-.background button:focus {
+button:focus {
   color: rgba(0, 0, 0, 0.87);
 }
 
-.background button:active {
+button:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
 }
 
-.background button:disabled {
+button:disabled {
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.26);
 }
 
-.background button:checked {
+button:checked {
   background-color: #4285F4;
   color: white;
 }
 
-.background button:checked:disabled {
+button:checked:disabled {
   background-color: alpha(#4285F4, 0.25);
   color: alpha(#4285F4, 0.5);
 }
@@ -795,33 +826,101 @@ button.image-button {
   border-radius: 3px;
 }
 
-button.text-button.image-button {
+button.text-button.image-button, button.image-text-button {
   border-radius: 3px;
 }
 
-button.text-button.image-button label:first-child {
+button.text-button.image-button > box,
+button.text-button.image-button > box > box, button.image-text-button > box,
+button.image-text-button > box > box {
+  border-spacing: 4px;
+}
+
+button.text-button.image-button > box > label,
+button.text-button.image-button > box > box > label, button.image-text-button > box > label,
+button.image-text-button > box > box > label {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+button.text-button.image-button label:first-child, button.image-text-button label:first-child {
   margin-left: 10px;
   margin-right: 2px;
 }
 
-button.text-button.image-button label:last-child {
+button.text-button.image-button label:last-child, button.image-text-button label:last-child {
   margin-left: 2px;
   margin-right: 10px;
 }
 
-button.text-button.image-button label:only-child {
+button.text-button.image-button label:only-child, button.image-text-button label:only-child {
   margin-left: 10px;
   margin-right: 10px;
 }
 
-button.text-button.image-button image:not(:only-child):first-child {
+button.text-button.image-button image:not(:only-child):first-child, button.image-text-button image:not(:only-child):first-child {
   margin-left: 4px;
 }
 
-button.text-button.image-button image:not(:only-child):last-child {
+button.text-button.image-button image:not(:only-child):last-child, button.image-text-button image:not(:only-child):last-child {
   margin-right: 4px;
 }
 
+button.arrow-button {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+
+button.arrow-button > box {
+  border-spacing: 4px;
+}
+
+button.arrow-button.text-button > box {
+  border-spacing: 4px;
+}
+
+menubutton.pill > button, button.pill {
+  padding: 9px 30px;
+  border-radius: 9999px;
+}
+
+button.card {
+  background-color: rgba(0, 0, 0, 0.05);
+  background-clip: padding-box;
+  font-weight: inherit;
+  padding: 0;
+}
+
+button.card:hover {
+  background-image: image(alpha(currentColor, 0.03));
+}
+
+button.card.keyboard-activating, button.card:active {
+  background-image: image(alpha(currentColor, 0.08));
+}
+
+button.card:checked {
+  background-color: rgba(0, 0, 0, 0.05);
+  background-image: image(alpha(currentColor, 0.1));
+}
+
+button.card:checked:hover {
+  background-image: image(alpha(currentColor, 0.13));
+}
+
+button.card:checked.keyboard-activating, button.card:checked:active {
+  background-image: image(alpha(currentColor, 0.19));
+}
+
+button.card:checked.has-open-popup {
+  background-image: image(alpha(currentColor, 0.13));
+}
+
+button.card:drop(active) {
+  color: #F4B400;
+  box-shadow: inset 0 0 0 1px #F4B400;
+}
+
 .linked > button.flat, .linked.vertical > button.flat {
   border-radius: 3px;
 }
@@ -834,16 +933,16 @@ button.text-button.image-button image:not(:only-child):last-child {
   border-radius: 3px;
 }
 
-.background .linked.stack-switcher > button {
+.linked.stack-switcher > button {
   border-radius: 0;
 }
 
-.background .linked.stack-switcher > button:checked {
+.linked.stack-switcher > button:checked {
   box-shadow: inset 0 -2px #4285F4;
   background-color: transparent;
 }
 
-.background buttonbox.linked > button {
+buttonbox.linked > button {
   border-radius: 3px;
 }
 
@@ -884,7 +983,8 @@ button.osd:disabled {
 .app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd popover.background > arrow button:not(.suggested-action):not(.destructive-action),
 .osd popover.background > contents button:not(.suggested-action):not(.destructive-action), popover.background.touch-selection > arrow button:not(.suggested-action):not(.destructive-action),
 popover.background.touch-selection > contents button:not(.suggested-action):not(.destructive-action), popover.background.magnifier > arrow button:not(.suggested-action):not(.destructive-action),
-popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .osd button {
+popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .toolbar.osd button,
+toolbar.osd button, .osd button {
   background-color: rgba(255, 255, 255, 0.05);
 }
 
@@ -898,7 +998,9 @@ popover.background.magnifier > contents button.flat:not(.suggested-action):not(.
 .app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd popover.background > arrow button:not(.suggested-action):not(.destructive-action),
 .osd popover.background > contents button:not(.suggested-action):not(.destructive-action), popover.background.touch-selection > arrow button:not(.suggested-action):not(.destructive-action),
 popover.background.touch-selection > contents button:not(.suggested-action):not(.destructive-action), popover.background.magnifier > arrow button:not(.suggested-action):not(.destructive-action),
-popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .osd button {
+popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .toolbar.osd button,
+toolbar.osd button,
+toolbar.osd button.flat, .osd button {
   color: rgba(255, 255, 255, 0.7);
   box-shadow: none;
 }
@@ -1095,133 +1197,309 @@ row button.image-button {
   border-radius: 9999px;
 }
 
-stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label,
-stackswitcher > button.needs-attention > image {
-  animation: needs_attention 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
-  background-repeat: no-repeat;
-  background-position: right 3px;
-  background-size: 6px 6px;
+menubutton.osd {
+  background: none;
+  color: inherit;
 }
 
-stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl),
-stackswitcher > button.needs-attention > image:dir(rtl) {
-  background-position: left 3px;
+menubutton.suggested-action {
+  background-color: #4285F4;
+  color: white;
 }
 
-.linked > button {
-  border-radius: 0;
+menubutton.destructive-action {
+  background-color: #FF5252;
+  color: white;
 }
 
-.linked > button:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+menubutton.suggested-action, menubutton.destructive-action, menubutton.opaque {
+  border-radius: 3px;
 }
 
-.linked > button:last-child {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+menubutton.suggested-action.circular, menubutton.suggested-action.pill, menubutton.destructive-action.circular, menubutton.destructive-action.pill, menubutton.opaque.circular, menubutton.opaque.pill {
+  border-radius: 9999px;
 }
 
-.linked > button:only-child {
-  border-radius: 3px;
+menubutton.suggested-action > button, menubutton.suggested-action > button:checked, menubutton.destructive-action > button, menubutton.destructive-action > button:checked, menubutton.opaque > button, menubutton.opaque > button:checked {
+  background-color: transparent;
+  color: inherit;
 }
 
-.linked.vertical > button {
-  border-radius: 0;
+menubutton.image-button > button {
+  min-width: 24px;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
-.linked.vertical > button:first-child {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+menubutton arrow {
+  min-height: 16px;
+  min-width: 16px;
 }
 
-.linked.vertical > button:last-child {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+menubutton arrow.none {
+  -gtk-icon-source: -gtk-icontheme("open-menu-symbolic");
 }
 
-.linked.vertical > button:only-child {
-  border-radius: 3px;
+menubutton arrow.down {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
 }
 
-/* menu buttons */
-modelbutton.flat {
-  min-height: 32px;
-  padding: 0 9px;
-  border-radius: 3px;
-  color: inherit;
+menubutton arrow.up {
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
 }
 
-modelbutton.flat check:not(:checked):not(:indeterminate),
-modelbutton.flat radio:not(:checked):not(:indeterminate) {
-  color: alpha(currentColor, 0.45);
+menubutton arrow.left {
+  -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
 }
 
-modelbutton.flat check, modelbutton.flat check:hover,
-modelbutton.flat radio,
-modelbutton.flat radio:hover {
-  background-image: none;
+menubutton arrow.right {
+  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
 }
 
-modelbutton.flat check:active,
-modelbutton.flat radio:active {
-  animation: none;
+splitbutton {
+  border-radius: 3px;
 }
 
-modelbutton.flat check:last-child,
-modelbutton.flat radio:last-child {
-  margin-left: -8px;
-  margin-right: -16px;
+splitbutton, splitbutton > separator {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
+  transition-property: background;
 }
 
-modelbutton.flat check:first-child,
-modelbutton.flat radio:first-child {
-  margin-left: -16px;
-  margin-right: -8px;
+splitbutton > separator {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  background: none;
 }
 
-modelbutton.flat arrow {
-  background: none;
-  transition: none;
+splitbutton > menubutton > button {
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
-modelbutton.flat arrow:hover {
-  background: none;
+splitbutton.image-button > button {
+  min-width: 24px;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
-modelbutton.flat arrow.left {
-  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+splitbutton.text-button.image-button > button, splitbutton.image-text-button > button {
+  padding-left: 9px;
+  padding-right: 9px;
 }
 
-modelbutton.flat arrow.right {
-  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+splitbutton.text-button.image-button > button > box, splitbutton.image-text-button > button > box {
+  border-spacing: 6px;
 }
 
-.toolbar button {
-  margin: 1px;
+splitbutton > button:dir(ltr),
+splitbutton > menubutton > button:dir(rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
 }
 
-button.color {
-  min-height: 24px;
-  min-width: 24px;
-  padding: 6px;
+splitbutton > button:dir(rtl),
+splitbutton > menubutton > button:dir(ltr) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
 }
 
-button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay {
-  border-radius: 0;
+splitbutton.flat > separator {
+  background: rgba(0, 0, 0, 0.12);
 }
 
+splitbutton.flat:hover, splitbutton.flat:active, splitbutton.flat:checked {
+  background: alpha(currentColor, 0.07);
+}
 
-list > row button.image-button.suggested-action:not(.flat) {
-  transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08), inset 0 0 0 9999px transparent;
+splitbutton.flat:hover > separator, splitbutton.flat:active > separator, splitbutton.flat:checked > separator {
+  background: none;
+}
+
+splitbutton.flat:focus-within:focus-visible > separator {
+  background: none;
+}
+
+splitbutton.flat > button,
+splitbutton.flat > menubutton > button {
+  border-radius: 3px;
+}
+
+splitbutton.suggested-action {
+  background-color: #4285F4;
+  color: white;
+}
+
+splitbutton.destructive-action {
+  background-color: #FF5252;
+  color: white;
+}
+
+splitbutton.suggested-action > button, splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button, splitbutton.opaque > menubutton > button:checked {
+  color: inherit;
+  background-color: transparent;
+}
+
+splitbutton.suggested-action > menubutton > button:dir(ltr), splitbutton.destructive-action > menubutton > button:dir(ltr), splitbutton.opaque > menubutton > button:dir(ltr) {
+  box-shadow: inset 1px 0 rgba(0, 0, 0, 0.12);
+}
+
+splitbutton.suggested-action > menubutton > button:dir(rtl), splitbutton.destructive-action > menubutton > button:dir(rtl), splitbutton.opaque > menubutton > button:dir(rtl) {
+  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.12);
+}
+
+splitbutton > menubutton > button > arrow.none {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
+buttoncontent {
+  border-spacing: 6px;
+}
+
+buttoncontent > label {
+  font-weight: bold;
+}
+
+buttoncontent > label:dir(ltr) {
+  padding-right: 2px;
+}
+
+buttoncontent > label:dir(rtl) {
+  padding-left: 2px;
+}
+
+.arrow-button > box > buttoncontent > label:dir(ltr), splitbutton > button > buttoncontent > label:dir(ltr) {
+  padding-right: 0;
+}
+
+.arrow-button > box > buttoncontent > label:dir(rtl), splitbutton > button > buttoncontent > label:dir(rtl) {
+  padding-left: 0;
+}
+
+stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label,
+stackswitcher > button.needs-attention > image {
+  animation: needs_attention 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
+  background-repeat: no-repeat;
+  background-position: right 3px;
+  background-size: 6px 6px;
+}
+
+stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl),
+stackswitcher > button.needs-attention > image:dir(rtl) {
+  background-position: left 3px;
+}
+
+.linked > button {
+  border-radius: 0;
+}
+
+.linked > button:first-child {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.linked > button:last-child {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.linked > button:only-child {
+  border-radius: 3px;
+}
+
+.linked.vertical > button {
+  border-radius: 0;
+}
+
+.linked.vertical > button:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.linked.vertical > button:last-child {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.linked.vertical > button:only-child {
+  border-radius: 3px;
+}
+
+/* menu buttons */
+modelbutton.flat {
+  min-height: 32px;
+  padding: 0 9px;
+  border-radius: 3px;
+  color: inherit;
+}
+
+modelbutton.flat check:not(:checked):not(:indeterminate),
+modelbutton.flat radio:not(:checked):not(:indeterminate) {
+  color: alpha(currentColor, 0.45);
+}
+
+modelbutton.flat check, modelbutton.flat check:hover,
+modelbutton.flat radio,
+modelbutton.flat radio:hover {
+  background-image: none;
+}
+
+modelbutton.flat check:active,
+modelbutton.flat radio:active {
+  animation: none;
+}
+
+modelbutton.flat check:last-child,
+modelbutton.flat radio:last-child {
+  margin-left: -8px;
+  margin-right: -16px;
+}
+
+modelbutton.flat check:first-child,
+modelbutton.flat radio:first-child {
+  margin-left: -16px;
+  margin-right: -8px;
+}
+
+modelbutton.flat arrow {
+  background: none;
+  transition: none;
+}
+
+modelbutton.flat arrow:hover {
+  background: none;
+}
+
+modelbutton.flat arrow.left {
+  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+}
+
+modelbutton.flat arrow.right {
+  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+}
+
+button.color {
+  min-height: 24px;
+  min-width: 24px;
+  padding: 6px;
+}
+
+button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay {
+  border-radius: 0;
+}
+
+
+list > row button.image-button:not(.flat).suggested-action {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
+  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08), inset 0 0 0 9999px transparent;
   background-color: #4285F4;
   color: rgba(0, 0, 0, 0.6);
   border: none;
 }
 
 
-list > row button.image-button.destructive-action:not(.flat) {
+list > row button.image-button:not(.flat).destructive-action {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08), inset 0 0 0 9999px transparent;
   background-color: #FF5252;
@@ -1277,16 +1555,18 @@ spinbutton:not(.vertical) {
   padding: 0;
 }
 
-.background spinbutton:not(.vertical), .background spinbutton.flat:not(.vertical) {
+spinbutton:not(.vertical), spinbutton:not(.vertical).flat {
   transition: all 225ms cubic-bezier(0, 0, 0.2, 1);
   border-radius: 0;
+  outline: none;
 }
 
-.background spinbutton:not(.vertical) > text, .background spinbutton:not(.vertical) > text:focus-within, .background spinbutton:not(.vertical) > text:disabled, .background spinbutton:not(.vertical):focus-within > text, .background spinbutton:not(.vertical):focus-within > text:focus-within, .background spinbutton:not(.vertical):focus-within > text:disabled, .background spinbutton:not(.vertical):disabled > text, .background spinbutton:not(.vertical):disabled > text:focus-within, .background spinbutton:not(.vertical):disabled > text:disabled, .background spinbutton.flat:not(.vertical) > text, .background spinbutton.flat:not(.vertical) > text:focus-within, .background spinbutton.flat:not(.vertical) > text:disabled, .background spinbutton.flat:not(.vertical):focus-within > text, .background spinbutton.flat:not(.vertical):focus-within > text:focus-within, .background spinbutton.flat:not(.vertical):focus-within > text:disabled, .background spinbutton.flat:not(.vertical):disabled > text, .background spinbutton.flat:not(.vertical):disabled > text:focus-within, .background spinbutton.flat:not(.vertical):disabled > text:disabled {
+spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text:focus-within, spinbutton:not(.vertical) > text:disabled, spinbutton:not(.vertical):focus-within > text, spinbutton:not(.vertical):focus-within > text:focus-within, spinbutton:not(.vertical):focus-within > text:disabled, spinbutton:not(.vertical):disabled > text, spinbutton:not(.vertical):disabled > text:focus-within, spinbutton:not(.vertical):disabled > text:disabled, spinbutton:not(.vertical).flat > text, spinbutton:not(.vertical).flat > text:focus-within, spinbutton:not(.vertical).flat > text:disabled, spinbutton:not(.vertical).flat:focus-within > text, spinbutton:not(.vertical).flat:focus-within > text:focus-within, spinbutton:not(.vertical).flat:focus-within > text:disabled, spinbutton:not(.vertical).flat:disabled > text, spinbutton:not(.vertical).flat:disabled > text:focus-within, spinbutton:not(.vertical).flat:disabled > text:disabled {
   box-shadow: none;
   background: none;
   border-image: none;
   transition: none;
+  outline: none;
 }
 
 spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text:focus-within, spinbutton:not(.vertical) > text:disabled {
@@ -1297,6 +1577,7 @@ spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text:focus-within,
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
+  outline: none;
 }
 
 spinbutton:not(.vertical) > button, spinbutton:not(.vertical) > button:hover, spinbutton:not(.vertical) > button:active, spinbutton:not(.vertical) > button:checked, spinbutton:not(.vertical) > button:disabled {
@@ -1327,6 +1608,7 @@ spinbutton.vertical > text {
   min-height: 36px;
   min-width: 42px;
   padding: 0;
+  outline: none;
 }
 
 spinbutton.vertical > button {
@@ -1375,59 +1657,8 @@ combobox > popover.menu > contents modelbutton {
   padding-right: 9px;
 }
 
-.background dropdown, .background combobox {
-  border: unset;
-  border-image: unset;
-  border-radius: unset;
-  background-color: unset;
-  color: unset;
-  box-shadow: unset;
-}
-
 dropdown entry.combo,
 combobox entry.combo {
-  border-radius: 2px;
-  margin-right: -32px;
-  padding-right: 32px;
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #FFFFFF;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-dropdown entry.combo:focus,
-combobox entry.combo:focus {
-  border: 1px solid #4285F4;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #FFFFFF;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-dropdown entry.combo:disabled,
-combobox entry.combo:disabled {
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  border-image: none;
-  background-color: #f9f9f9;
-  color: rgba(0, 0, 0, 0.38);
-}
-
-dropdown > .linked:not(.vertical) > button.combo:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:not(:only-child) {
-  border: none;
-  border-image: none;
-  box-shadow: none;
-  min-height: 16px;
-  min-width: 16px;
-  margin: 4px;
-  padding: 6px;
-}
-
-.background dropdown entry.combo, .background combobox entry.combo {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
@@ -1435,13 +1666,15 @@ combobox > .linked:not(.vertical) > button.combo:not(:only-child) {
   border-width: 0;
 }
 
-.background dropdown entry.combo:focus, .background combobox entry.combo:focus {
+dropdown entry.combo:focus,
+combobox entry.combo:focus {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px #4285F4;
 }
 
-.background dropdown entry.combo:disabled, .background combobox entry.combo:disabled {
+dropdown entry.combo:disabled,
+combobox entry.combo:disabled {
   border-width: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
@@ -1463,18 +1696,6 @@ combobox button.combo cellview:dir(rtl) {
   margin-right: -2px;
 }
 
-dropdown.linked button:nth-child(2):dir(ltr),
-combobox.linked button:nth-child(2):dir(ltr) {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-dropdown.linked button:nth-child(2):dir(rtl),
-combobox.linked button:nth-child(2):dir(rtl) {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-
 dropdown:drop(active),
 combobox:drop(active) {
   box-shadow: none;
@@ -1524,6 +1745,16 @@ toolbar {
   background-color: #F2F2F2;
 }
 
+.toolbar > separator.spacer,
+toolbar > separator.spacer {
+  background: none;
+}
+
+.toolbar button,
+toolbar button {
+  margin: 0 1px;
+}
+
 .osd .toolbar, .osd toolbar {
   background-color: transparent;
 }
@@ -1532,8 +1763,9 @@ toolbar {
 toolbar.osd {
   padding: 6px;
   border-radius: 2px;
-  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.35);
-  background-color: #FFFFFF;
+  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.2), 0 3px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 5px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.35);
+  background-color: #222222;
+  color: white;
 }
 
 .toolbar.osd:backdrop,
@@ -1684,8 +1916,8 @@ headerbar.windowhandle viewswitcher button:disabled:not(.titlebutton):not(.sugge
 
 headerbar {
   transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1), color 100ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 36px;
-  padding: 0 12px;
+  min-height: 48px;
+  padding: 0 6px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2);
   background-color: #eeeeee;
   color: rgba(0, 0, 0, 0.87);
@@ -1703,6 +1935,10 @@ headerbar:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
+headerbar:not(.titlebar) {
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px rgba(0, 0, 0, 0.12);
+}
+
 headerbar .title {
   padding: 0 12px;
   font-weight: bold;
@@ -1713,6 +1949,20 @@ headerbar .subtitle {
   font-size: smaller;
 }
 
+box.vertical headerbar {
+  background-color: #eeeeee;
+}
+
+headerbar > windowhandle > box {
+  padding: 0 3px;
+}
+
+headerbar > windowhandle > box,
+headerbar > windowhandle > box > box.start,
+headerbar > windowhandle > box > box.end {
+  border-spacing: 6px;
+}
+
 headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled {
   color: alpha(currentColor, 0.3);
 }
@@ -1836,16 +2086,25 @@ headerbar .linked > entry,
 headerbar .linked > entry:hover,
 headerbar .linked > entry:active,
 headerbar .linked > entry:checked,
-headerbar .linked > entry:disabled, .background headerbar .linked entry + button, .background headerbar .linked entry + button:hover, .background headerbar .linked entry + button:active, .background headerbar .linked entry + button:checked, .background headerbar .linked entry + button:disabled, .background headerbar .linked entry + button + button, .background headerbar .linked entry + button + button:hover, .background headerbar .linked entry + button + button:active, .background headerbar .linked entry + button + button:checked, .background headerbar .linked entry + button + button:disabled {
+headerbar .linked > entry:disabled,
+headerbar .linked entry + button,
+headerbar .linked entry + button:hover,
+headerbar .linked entry + button:active,
+headerbar .linked entry + button:checked,
+headerbar .linked entry + button:disabled,
+headerbar .linked entry + button.image-button,
+headerbar .linked entry + button.image-button:hover,
+headerbar .linked entry + button.image-button:active,
+headerbar .linked entry + button.image-button:checked,
+headerbar .linked entry + button.image-button:disabled,
+headerbar .linked entry + button.text-button,
+headerbar .linked entry + button.text-button:hover,
+headerbar .linked entry + button.text-button:active,
+headerbar .linked entry + button.text-button:checked,
+headerbar .linked entry + button.text-button:disabled {
   border-radius: 3px;
 }
 
-headerbar > windowhandle > box,
-headerbar > windowhandle > box > box.start,
-headerbar > windowhandle > box > box.end {
-  border-spacing: 6px;
-}
-
 headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) {
   margin-top: 0;
   margin-bottom: 0;
@@ -1861,8 +2120,8 @@ headerbar menubutton {
 }
 
 headerbar menubutton > button {
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 headerbar switch {
@@ -1892,35 +2151,6 @@ headerbar.titlebar headerbar:not(.titlebar) {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.35);
 }
 
-separator:first-child + headerbar, headerbar:first-child {
-  border-top-left-radius: 3px;
-}
-
-headerbar:last-child {
-  border-top-right-radius: 3px;
-}
-
-stack headerbar:first-child, stack headerbar:last-child {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  border: none;
-}
-
-window.tiled headerbar, window.tiled headerbar:first-child, window.tiled headerbar:last-child, window.tiled headerbar:only-child, window.tiled-top headerbar, window.tiled-top headerbar:first-child, window.tiled-top headerbar:last-child, window.tiled-top headerbar:only-child, window.tiled-right headerbar, window.tiled-right headerbar:first-child, window.tiled-right headerbar:last-child, window.tiled-right headerbar:only-child, window.tiled-bottom headerbar, window.tiled-bottom headerbar:first-child, window.tiled-bottom headerbar:last-child, window.tiled-bottom headerbar:only-child, window.tiled-left headerbar, window.tiled-left headerbar:first-child, window.tiled-left headerbar:last-child, window.tiled-left headerbar:only-child, window.maximized headerbar, window.maximized headerbar:first-child, window.maximized headerbar:last-child, window.maximized headerbar:only-child, window.fullscreen headerbar, window.fullscreen headerbar:first-child, window.fullscreen headerbar:last-child, window.fullscreen headerbar:only-child, window.solid-csd headerbar, window.solid-csd headerbar:first-child, window.solid-csd headerbar:last-child, window.solid-csd headerbar:only-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.titlebar, .titlebar.background {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-}
-
-.background.tiled .titlebar, .background.tiled-top .titlebar, .background.tiled-right .titlebar, .background.tiled-bottom .titlebar, .background.tiled-left .titlebar, .background.maximized .titlebar, .background.solid-csd .titlebar {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .titlebar.solid-csd headerbar {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.2);
 }
@@ -1961,23 +2191,6 @@ window.csd > .titlebar:not(headerbar) {
   box-shadow: none;
 }
 
-window.background > box.vertical > headerbar:not(.titlebar) {
-  border-radius: 0 0 0 0;
-  box-shadow: none;
-}
-
-window.background > box.vertical > headerbar:not(.titlebar), window.background > box.vertical > headerbar:not(.titlebar):backdrop {
-  background-color: #eeeeee;
-}
-
-separator:first-child + window.background > box.vertical > headerbar:not(.titlebar), separator:first-child + window.background > box.vertical > headerbar:not(.titlebar):backdrop, window.background > box.vertical > headerbar:not(.titlebar):first-child, window.background > box.vertical > headerbar:not(.titlebar):first-child:backdrop {
-  border-top-left-radius: 0;
-}
-
-window.background > box.vertical > headerbar:not(.titlebar):last-child, window.background > box.vertical > headerbar:not(.titlebar):last-child:backdrop {
-  border-top-right-radius: 0;
-}
-
 headerbar separator.titlebutton, headerbar separator {
   min-width: 0;
   min-height: 0;
@@ -2015,66 +2228,141 @@ window.devel headerbar.titlebar:backdrop {
   /* background-color would flash */
 }
 
+viewswitcher {
+  margin: 0;
+}
+
+viewswitcher.wide {
+  border-spacing: 3px;
+}
 
-.background pathbar > button {
-  border-radius: 2px;
+viewswitcher.narrow button.toggle {
+  border-radius: 0;
+  margin: 0;
+}
+
+viewswitcher.narrow button.toggle:focus-within, viewswitcher.narrow button.toggle:focus {
+  box-shadow: none;
+}
+
+viewswitcher button.toggle {
+  font-weight: bold;
+  padding: 0;
+}
+
+viewswitcher button.toggle > stack > box.narrow {
+  font-size: 0.75rem;
+  padding-top: 6px;
+  padding-bottom: 4px;
+  border-spacing: 4px;
+}
+
+viewswitcher button.toggle > stack > box.narrow > stack > label {
   padding-left: 6px;
   padding-right: 6px;
 }
 
+viewswitcher button.toggle > stack > box.wide {
+  padding: 2px 12px;
+  border-spacing: 6px;
+}
 
-.background pathbar > button:checked {
-  box-shadow: inset 0 -2px #4285F4;
+viewswitcherbar actionbar > revealer > box {
+  padding: 0;
 }
 
+viewswitchertitle viewswitcher {
+  margin-left: 12px;
+  margin-right: 12px;
+}
 
-.background pathbar > button:checked,
-.background pathbar > button:checked:disabled {
-  background-color: transparent;
+indicatorbin > indicator, indicatorbin > mask {
+  min-width: 6px;
+  min-height: 6px;
+  border-radius: 9999px;
+}
+
+indicatorbin > indicator {
+  margin: 1px;
+  background-color: alpha(currentColor, 0.4);
 }
 
+indicatorbin > indicator > label {
+  font-size: 0.6rem;
+  font-weight: bold;
+  padding: 1px 4px;
+  color: white;
+}
 
-.background pathbar > button.text-button,
-.background pathbar > button.image-button,
-.background pathbar > button {
-  padding-left: 4px;
-  padding-right: 4px;
+indicatorbin > mask {
+  padding: 1px;
+  background: black;
+}
+
+indicatorbin.needs-attention > indicator {
+  background-color: #4285F4;
+}
+
+indicatorbin.needs-attention > indicator > label {
+  color: white;
+}
+
+
+pathbar > button {
+  border-radius: 3px;
+  padding-left: 6px;
+  padding-right: 6px;
+  margin: 0;
+}
+
+
+pathbar > button,
+pathbar > button:disabled {
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 
-.background pathbar > button.text-button.image-button label {
+pathbar > button.text-button,
+pathbar > button.image-button,
+pathbar > button {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+
+pathbar > button.text-button.image-button label {
   padding-left: 0;
   padding-right: 0;
 }
 
 
-.background pathbar > button.text-button.image-button label:last-child,
-.background pathbar > button label:last-child {
+pathbar > button.text-button.image-button label:last-child,
+pathbar > button label:last-child {
   padding-right: 8px;
 }
 
 
-.background pathbar > button.text-button.image-button label:first-child,
-.background pathbar > button label:first-child {
+pathbar > button.text-button.image-button label:first-child,
+pathbar > button label:first-child {
   padding-left: 8px;
 }
 
 
-.background pathbar > button image {
-  padding-left: 4px;
-  padding-right: 4px;
+pathbar > button image {
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
 
-.background pathbar > button.slider-button {
-  padding-left: 0;
-  padding-right: 0;
+pathbar > button.slider-button {
+  padding-left: 3px;
+  padding-right: 3px;
 }
 
 columnview.view,
 treeview.view {
-  border-left-color: #d9d9d9;
-  border-top-color: #d9d9d9;
+  border-left-color: #e0e0e0;
+  border-top-color: #e0e0e0;
 }
 
 columnview.view:hover, columnview.view:active, columnview.view:selected,
@@ -2102,24 +2390,27 @@ treeview.view > dndtarget:drop(active) {
   border-color: #18b8ff;
 }
 
-columnview.view > dndtarget.after:drop(active),
-treeview.view > dndtarget.after:drop(active) {
+columnview.view > dndtarget:drop(active).after,
+treeview.view > dndtarget:drop(active).after {
   border-top-style: none;
 }
 
-columnview.view > dndtarget.before:drop(active),
-treeview.view > dndtarget.before:drop(active) {
+columnview.view > dndtarget:drop(active).before,
+treeview.view > dndtarget:drop(active).before {
   border-bottom-style: none;
 }
 
 columnview.view.expander,
 treeview.view.expander {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+  min-width: 16px;
+  min-height: 16px;
+  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
   color: rgba(0, 0, 0, 0.6);
 }
 
 columnview.view.expander:dir(rtl),
 treeview.view.expander:dir(rtl) {
+  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
   -gtk-icon-transform: rotate(90deg);
 }
 
@@ -2129,6 +2420,11 @@ treeview.view.expander:active {
   color: rgba(0, 0, 0, 0.87);
 }
 
+columnview.view.expander:checked,
+treeview.view.expander:checked {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
 columnview.view.expander:disabled,
 treeview.view.expander:disabled {
   color: rgba(0, 0, 0, 0.26);
@@ -2228,6 +2524,10 @@ treeview.view acceleditor > label {
   background-color: #4285F4;
 }
 
+stack.view treeview.view {
+  min-height: 36px;
+}
+
 menubar {
   padding: 0;
   color: rgba(0, 0, 0, 0.6);
@@ -2275,7 +2575,7 @@ popover.menu {
 
 popover.menu > arrow, popover.menu.background > contents {
   padding: 6px;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
   background-color: #FFFFFF;
   border: none;
   border-radius: 3px;
@@ -2334,6 +2634,7 @@ popover.menu modelbutton {
   min-width: 48px;
   padding: 0 12px;
   border-radius: 3px;
+  color: rgba(0, 0, 0, 0.6);
 }
 
 popover.menu modelbutton:selected {
@@ -2384,6 +2685,7 @@ popover.background button:checked:disabled:not(.suggested-action):not(.destructi
 }
 
 popover.background {
+  color: rgba(0, 0, 0, 0.87);
   background-color: transparent;
   font: initial;
 }
@@ -2393,7 +2695,7 @@ popover.background > contents {
   transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   padding: 0;
   box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
-  background-color: #fafafa;
+  background-color: #FFFFFF;
   border: none;
 }
 
@@ -2420,7 +2722,7 @@ popover.background > contents > toolbar {
 }
 
 popover.background > contents separator {
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
   margin: 3px;
 }
 
@@ -2458,6 +2760,45 @@ magnifier {
   background-color: #FFFFFF;
 }
 
+tabbar tab, notebook > header tab {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
+  min-height: 24px;
+  min-width: 24px;
+  padding: 6px 12px;
+  outline-offset: -6px;
+  border-width: 0;
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.6);
+  font-weight: 500;
+}
+
+tabbar tab:hover, notebook > header tab:hover {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+tabbar tab:hover.reorderable-page, notebook > header tab:hover.reorderable-page {
+  border-color: rgba(0, 0, 0, 0.12);
+  background-color: #f9f9f9;
+}
+
+tabbar tab:disabled, notebook > header tab:disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+tabbar tab:checked, notebook > header tab:checked {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
+  color: rgba(0, 0, 0, 0.87);
+}
+
+tabbar tab:checked:disabled, notebook > header tab:checked:disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+tabbar tab:checked.reorderable-page, notebook > header tab:checked.reorderable-page {
+  border-color: rgba(0, 0, 0, 0.12);
+  background-color: #FFFFFF;
+}
+
 notebook > header {
   border-width: 1px;
   border-color: rgba(0, 0, 0, 0.12);
@@ -2474,7 +2815,7 @@ notebook > header.top > tabs {
 }
 
 notebook > header.top > tabs > tab:hover {
-  box-shadow: inset 0 -2px alpha(#4285F4, 0.3);
+  box-shadow: inset 0 -2px #bdd1f3;
 }
 
 notebook > header.top > tabs > tab:checked {
@@ -2490,7 +2831,7 @@ notebook > header.bottom > tabs {
 }
 
 notebook > header.bottom > tabs > tab:hover {
-  box-shadow: inset 0 2px alpha(#4285F4, 0.3);
+  box-shadow: inset 0 2px #bdd1f3;
 }
 
 notebook > header.bottom > tabs > tab:checked {
@@ -2506,7 +2847,7 @@ notebook > header.left > tabs {
 }
 
 notebook > header.left > tabs > tab:hover {
-  box-shadow: inset -2px 0 alpha(#4285F4, 0.3);
+  box-shadow: inset -2px 0 #bdd1f3;
 }
 
 notebook > header.left > tabs > tab:checked {
@@ -2522,7 +2863,7 @@ notebook > header.right > tabs {
 }
 
 notebook > header.right > tabs > tab:hover {
-  box-shadow: inset 2px 0 alpha(#4285F4, 0.3);
+  box-shadow: inset 2px 0 #bdd1f3;
 }
 
 notebook > header.right > tabs > tab:checked {
@@ -2581,45 +2922,6 @@ notebook > header > tabs > arrow {
   border-radius: 0;
 }
 
-notebook > header tab {
-  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 24px;
-  min-width: 24px;
-  padding: 6px 12px;
-  outline-offset: -6px;
-  border-width: 1px;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.6);
-  font-weight: 500;
-}
-
-notebook > header tab:hover {
-  color: rgba(0, 0, 0, 0.87);
-}
-
-notebook > header tab.reorderable-page:hover {
-  border-color: rgba(0, 0, 0, 0.12);
-  background-color: #f9f9f9;
-}
-
-notebook > header tab:disabled {
-  color: rgba(0, 0, 0, 0.26);
-}
-
-notebook > header tab:checked {
-  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
-  color: rgba(0, 0, 0, 0.87);
-}
-
-notebook > header tab:checked:disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-notebook > header tab.reorderable-page:checked {
-  border-color: rgba(0, 0, 0, 0.12);
-  background-color: #FFFFFF;
-}
-
 notebook > header tab button.flat {
   min-height: 24px;
   min-width: 24px;
@@ -2658,13 +2960,113 @@ notebook > header.left tabs:not(:only-child):last-child, notebook > header.right
   margin-bottom: 0;
 }
 
-notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
-  margin: -1px 0;
-  border-style: solid none;
+notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
+  margin: -1px 0;
+  border-style: solid none;
+}
+
+notebook > stack:not(:only-child) {
+  background-color: #FFFFFF;
+}
+
+tabbar .box {
+  background-color: transparent;
+  border: none;
+}
+
+tabbar scrolledwindow.pinned tabbox > background:dir(ltr) {
+  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.12);
+}
+
+tabbar scrolledwindow.pinned tabbox > background:dir(rtl) {
+  box-shadow: inset 1px 0 rgba(0, 0, 0, 0.12);
+}
+
+tabbar tabbox {
+  background-color: #F2F2F2;
+  background-clip: padding-box;
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
+}
+
+tabbar tabbox > background {
+  background: none;
+}
+
+tabbar tab:hover {
+  box-shadow: inset 0 -2px #bdd1f3;
+}
+
+tabbar tab:checked {
+  box-shadow: inset 0 -2px #4285F4;
+}
+
+tabbar .start-action,
+tabbar .end-action {
+  background-color: rgba(0, 0, 0, 0.05);
+  background-clip: padding-box;
+  border-color: rgba(0, 0, 0, 0.12);
+  border-style: solid;
+  transition: background 150ms ease-in-out;
+}
+
+tabbar .start-action button,
+tabbar .end-action button {
+  border: none;
+  border-radius: 0;
+}
+
+tabbar .start-action:dir(ltr),
+tabbar .end-action:dir(rtl) {
+  border-right-width: 1px;
+}
+
+tabbar .start-action:dir(rtl),
+tabbar .end-action:dir(ltr) {
+  border-left-width: 1px;
+}
+
+tabbar:not(.inline) scrolledwindow.pinned undershoot {
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+tabbar:not(.inline) tabbox > background {
+  background-color: #eeeeee;
+}
+
+tabbar:not(.inline) .start-action,
+tabbar:not(.inline) .end-action {
+  background-color: alpha(#eeeeee, 0.6);
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+tabbar:not(.inline):backdrop .box {
+  background-color: #eeeeee;
+}
+
+dnd tab {
+  min-height: 24px;
+  background-color: #eeeeee;
+  color: rgba(0, 0, 0, 0.6);
+  margin: 24px;
+}
+
+tabbar tab,
+dnd tab {
+  padding: 6px;
+}
+
+tabbar tab button.image-button,
+dnd tab button.image-button {
+  padding: 0;
+  margin: 0;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 9999px;
 }
 
-notebook > stack:not(:only-child) {
-  background-color: #FFFFFF;
+tabview:drop(active),
+tabbox:drop(active) {
+  box-shadow: none;
 }
 
 scrollbar {
@@ -2752,19 +3154,19 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
   background-color: rgba(0, 0, 0, 0.26);
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) > range > trough > slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal > range > trough > slider {
   min-width: 24px;
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
   min-width: 8px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) > range > trough > slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical > range > trough > slider {
   min-height: 24px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
   min-height: 8px;
 }
 
@@ -3454,6 +3856,7 @@ levelbar > trough {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08);
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
+  outline: none;
 }
 
 levelbar > trough:disabled {
@@ -3628,25 +4031,97 @@ separator {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
+> list.content > row:not(:first-child), > list.content > row.expander row.header:not(:first-child),
+> list.boxed-list > row.expander row.header:not(:first-child), > row.expander list.nested > row:not(:first-child), > listview.boxed-list > row.expander list > row:not(:first-child),
+> list.boxed-list > row.expander list > row:not(:first-child), > listview.content:not(.conversation-listbox) > row:not(:first-child), > listview.boxed-list > row:not(:first-child),
+> list.content:not(.conversation-listbox) > row:not(:first-child),
+> list.boxed-list > row:not(:first-child) {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+list.content > row:first-child, list.content > row.expander row.header:first-child,
+list.boxed-list > row.expander row.header:first-child, row.expander list.nested > row:first-child, listview.boxed-list > row.expander list > row:first-child,
+list.boxed-list > row.expander list > row:first-child, listview.content:not(.conversation-listbox) > row:first-child, listview.boxed-list > row:first-child,
+list.boxed-list > row:first-child {
+  border-radius: 2px 2px 0 0;
+}
+
+list.content > row:last-child, list.content > row.expander row.header:last-child,
+list.boxed-list > row.expander row.header:last-child, row.expander list.nested > row:last-child, listview.boxed-list > row.expander list > row:last-child,
+list.boxed-list > row.expander list > row:last-child, listview.content:not(.conversation-listbox) > row:last-child, listview.boxed-list > row:last-child,
+list.boxed-list > row:last-child {
+  border-radius: 0 0 2px 2px;
+}
+
 listview,
 list {
   border-color: rgba(0, 0, 0, 0.12);
   background-color: #FFFFFF;
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: none;
 }
 
-listview > row,
-list > row {
-  padding: 2px;
+listview row,
+list row {
+  padding: 6px;
 }
 
-listview > row.expander,
-list > row.expander {
-  padding: 0px;
+listview.content:not(.conversation-listbox), listview.boxed-list,
+list.content:not(.conversation-listbox),
+list.boxed-list {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 
-listview > row.expander .row-header,
-list > row.expander .row-header {
-  padding: 2px;
+listview.boxed-list > row.expander list,
+list.boxed-list > row.expander list {
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+}
+
+list.frame {
+  border-radius: 3px;
+}
+
+listview.view {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: transparent;
+}
+
+popover.menu listview.view {
+  padding: 0;
+  border-radius: 3px;
+}
+
+popover.menu listview.view > row {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 3px;
+}
+
+row {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+row label.subtitle {
+  font-size: smaller;
+}
+
+row > box.header {
+  margin-left: 12px;
+  margin-right: 12px;
+  min-height: 42px;
+}
+
+row > box.header > .icon:disabled {
+  filter: opacity(0.35);
+}
+
+row > box.header > box.title {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  border-spacing: 3px;
 }
 
 columnview.view > header > button,
@@ -3657,19 +4132,113 @@ treeview.view > header > button, row.activatable {
 
 columnview.view > header > button:hover,
 treeview.view > header > button:hover, row.activatable:hover {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 columnview.view > header > button.has-open-popup,
 treeview.view > header > button.has-open-popup, columnview.view > header > button:active,
 treeview.view > header > button:active, row.activatable.has-open-popup, row.activatable:active {
-  background-color: rgba(0, 0, 0, 0.26);
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+button row.activatable:focus, button row.activatable:hover, button row.activatable:active {
+  box-shadow: none;
 }
 
 row:selected:hover {
   background-color: #5a95f5;
 }
 
+row.combo image.dropdown-arrow:disabled {
+  filter: opacity(0.35);
+}
+
+row.combo listview.inline {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: inherit;
+}
+
+row.combo listview.inline, row.combo listview.inline:disabled {
+  background: none;
+  color: inherit;
+}
+
+row.combo popover > contents {
+  min-width: 120px;
+}
+
+row.expander {
+  background: none;
+  padding: 0;
+}
+
+row.expander > box > list {
+  background: none;
+  color: inherit;
+}
+
+row.expander list.nested {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: inherit;
+}
+
+row.expander image.expander-row-arrow:dir(ltr) {
+  margin-left: 6px;
+}
+
+row.expander image.expander-row-arrow:dir(rtl) {
+  margin-right: 6px;
+}
+
+row.expander:checked image.expander-row-arrow {
+  -gtk-icon-transform: rotate(0turn);
+}
+
+row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
+  -gtk-icon-transform: rotate(-0.25turn);
+}
+
+row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
+  -gtk-icon-transform: rotate(0.25turn);
+}
+
+row.expander:checked image.expander-row-arrow:not(:disabled) {
+  color: #18b8ff;
+}
+
+.osd row.expander:checked image.expander-row-arrow:not(:disabled) {
+  color: inherit;
+}
+
+row.expander image.expander-row-arrow:disabled {
+  filter: opacity(0.35);
+}
+
+list.content > row.expander,
+list.boxed-list > row.expander {
+  border: none;
+}
+
+list.content > row:first-child, list.content > row:first-child.expander row.header,
+list.boxed-list > row:first-child,
+list.boxed-list > row:first-child.expander row.header {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
+
+list.content > row:last-child, list.content > row:last-child.expander:not(:checked), list.content > row:last-child.expander:not(:checked) row.header, list.content > row:last-child.expander:checked list.nested, list.content > row:last-child.expander:checked list.nested > row:last-child,
+list.boxed-list > row:last-child,
+list.boxed-list > row:last-child.expander:not(:checked),
+list.boxed-list > row:last-child.expander:not(:checked) row.header,
+list.boxed-list > row:last-child.expander:checked list.nested,
+list.boxed-list > row:last-child.expander:checked list.nested > row:last-child {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-bottom-width: 0;
+}
+
 columnview > listview > row {
   padding: 0;
 }
@@ -3683,7 +4252,7 @@ columnview > listview > row > cell:not(:first-child) {
 }
 
 columnview.column-separators > listview > row > cell {
-  border-left-color: #d9d9d9;
+  border-left-color: #e0e0e0;
 }
 
 columnview.data-table > listview > row > cell {
@@ -3710,7 +4279,13 @@ treeexpander {
 }
 
 .app-notification {
-  margin: 8px;
+  color: white;
+  border: none;
+  background-color: #222222;
+  border-radius: 3px;
+  padding: 6px;
+  margin: 0 6px 6px;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.35);
 }
 
 .app-notification.frame,
@@ -3810,61 +4385,61 @@ window.dialog.message .titlebar:backdrop {
   color: rgba(0, 0, 0, 0.6);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button {
   padding: 4px 12px;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:first-child {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:last-child {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action {
   color: #4285F4;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action:hover {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action:hover {
   color: #4285F4;
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action:active {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   color: white;
   border-color: rgba(66, 133, 244, 0.75);
   box-shadow: inset 0 0 0 9999px rgba(66, 133, 244, 0.5);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action:disabled {
   opacity: 0.65;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action {
   color: #FF5252;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action:hover {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action:hover {
   color: #FF5252;
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action:active {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   color: white;
   border-color: rgba(255, 82, 82, 0.75);
   box-shadow: inset 0 0 0 9999px rgba(255, 82, 82, 0.5);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action:disabled {
   opacity: 0.65;
 }
 
@@ -3873,18 +4448,18 @@ window.dialog.message.csd.background {
   border-bottom-right-radius: 2px;
 }
 
-window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button {
+window.dialog.message.csd .linked:not(.vertical).dialog-action-area > button {
   padding: 8px 16px;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
 
-window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button:first-child {
+window.dialog.message.csd .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 2px;
   border-top-left-radius: 0;
 }
 
-window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button:last-child {
+window.dialog.message.csd .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 2px;
   border-top-right-radius: 0;
 }
@@ -3913,31 +4488,15 @@ filechooserbutton:drop(active) {
 }
 
 .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
-  border-right: 1px solid rgba(0, 0, 0, 0.12);
+  border-right: 1px solid #e0e0e0;
   border-left-style: none;
 }
 
 .sidebar.right {
-  border-left: 1px solid rgba(0, 0, 0, 0.12);
+  border-left: 1px solid #e0e0e0;
   border-right-style: none;
 }
 
-.sidebar listview.view,
-.sidebar list {
-  background-color: transparent;
-}
-
-.sidebar row {
-  transition: none;
-}
-
-.sidebar separator,
-.sidebar .separator {
-  min-height: 0;
-  border-color: transparent;
-  background-color: transparent;
-}
-
 paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
   border-style: none;
 }
@@ -3946,6 +4505,10 @@ stacksidebar list.separators:not(.horizontal) > row:not(.separator) {
   border-bottom: none;
 }
 
+leaflet.unfolded > box > stacksidebar.sidebar {
+  border: none;
+}
+
 stacksidebar row {
   padding: 12px 6px;
   transition: none;
@@ -3960,19 +4523,23 @@ separator.sidebar {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
+separator.sidebar.selection-mode, .selection-mode separator.sidebar {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
 .navigation-sidebar {
   padding: 6px 0;
 }
 
 .navigation-sidebar > separator {
-  margin: 6px;
+  margin: 6px 0;
 }
 
 .navigation-sidebar > row {
   min-height: 32px;
   padding: 0 6px;
   border-radius: 3px;
-  margin: 0 6px 2px;
+  margin: 1px 6px;
 }
 
 .navigation-sidebar > row:hover, .navigation-sidebar > row:focus-visible:focus-within {
@@ -4011,14 +4578,8 @@ placessidebar > viewport.frame {
   border-style: none;
 }
 
-placessidebar list {
-  padding: 1px 0 4px;
-}
-
 placessidebar .navigation-sidebar > row {
   min-height: 30px;
-  margin: -1px 0;
-  padding: 0;
 }
 
 placessidebar .navigation-sidebar > row > revealer {
@@ -4109,15 +4670,16 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#d9d9d9);
+  background-image: image(#e0e0e0);
   background-size: 1px 1px;
+  box-shadow: none;
 }
 
 paned > separator.wide {
   min-width: 6px;
   min-height: 6px;
   background-color: #F2F2F2;
-  background-image: image(#d9d9d9), image(#d9d9d9);
+  background-image: image(#e0e0e0), image(#e0e0e0);
   background-size: 1px 1px, 1px 1px;
 }
 
@@ -4254,25 +4816,23 @@ infobar.info button:disabled:active, infobar.question button:disabled:active, in
 }
 
 tooltip {
-  padding: 6px 10px;
-  border-radius: 3px;
+  margin: 0;
+  padding: 6px;
   box-shadow: none;
 }
 
 tooltip.background {
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.35);
-  background-color: alpha(#FFFFFF, 0.9);
-}
-
-tooltip:not(.csd) {
-  border: 1px solid rgba(0, 0, 0, 0.12);
+  background-color: #222222;
+  color: white;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.35);
   border-radius: 3px;
-  background-clip: padding-box;
+  margin: 0 6px 8px 6px;
+  border: none;
 }
 
 tooltip label {
   min-height: 20px;
-  padding: 0 2px;
+  padding: 0 3px;
 }
 
 tooltip > box {
@@ -4339,11 +4899,11 @@ colorswatch:drop(active) {
   box-shadow: none;
 }
 
-colorswatch.light:drop(active) overlay {
+colorswatch:drop(active).light overlay {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08), 0 0 0 2px #18b8ff;
 }
 
-colorswatch.dark:drop(active) overlay {
+colorswatch:drop(active).dark overlay {
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15), 0 1px 2px -1px rgba(0, 0, 0, 0.12), 0 1px 2px -0.6px rgba(0, 0, 0, 0.08), 0 0 0 2px #18b8ff;
 }
 
@@ -4426,11 +4986,12 @@ colorchooser .popover.osd:backdrop {
 
 window {
   border: none;
+  outline: none;
 }
 
 window.csd {
   transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
-  border-radius: 3px 3px 0 0;
+  border-radius: 3px;
   box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 16px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 16px 2px rgba(0, 0, 0, 0), 0 6px 18px 5px rgba(0, 0, 0, 0);
   margin: 0;
 }
@@ -4455,7 +5016,7 @@ window.csd.solid-csd {
   border: 1px solid silver;
   border-radius: 0;
   box-shadow: inset 0 0 0 2px #eeeeee, inset 0 1px rgba(255, 255, 255, 0.35);
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
 }
 
 window.maximized, window.fullscreen, window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom {
@@ -4737,8 +5298,7 @@ shortcuts-section {
   font: initial;
 }
 
-button.close, button.round-button, button.circular, dropdown > .linked:not(.vertical) > button.combo:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:not(:only-child), check,
+button.close, button.round-button, button.circular, menubutton.circular > button, check,
 radio {
   border-radius: 100px;
 }
@@ -4871,6 +5431,166 @@ statusbar {
   padding: 6px 10px;
 }
 
+avatar {
+  border-radius: 9999px;
+  font-weight: bold;
+}
+
+avatar.color1 {
+  background-image: linear-gradient(#83b6ec, #337fdc);
+  color: #cfe1f5;
+}
+
+avatar.color2 {
+  background-image: linear-gradient(#7ad9f1, #0f9ac8);
+  color: #caeaf2;
+}
+
+avatar.color3 {
+  background-image: linear-gradient(#8de6b1, #29ae74);
+  color: #cef8d8;
+}
+
+avatar.color4 {
+  background-image: linear-gradient(#b5e98a, #6ab85b);
+  color: #e6f9d7;
+}
+
+avatar.color5 {
+  background-image: linear-gradient(#f8e359, #d29d09);
+  color: #f9f4e1;
+}
+
+avatar.color6 {
+  background-image: linear-gradient(#ffcb62, #d68400);
+  color: #ffead1;
+}
+
+avatar.color7 {
+  background-image: linear-gradient(#ffa95a, #ed5b00);
+  color: #ffe5c5;
+}
+
+avatar.color8 {
+  background-image: linear-gradient(#f78773, #e62d42);
+  color: #f8d2ce;
+}
+
+avatar.color9 {
+  background-image: linear-gradient(#e973ab, #e33b6a);
+  color: #fac7de;
+}
+
+avatar.color10 {
+  background-image: linear-gradient(#cb78d4, #9945b5);
+  color: #e7c2e8;
+}
+
+avatar.color11 {
+  background-image: linear-gradient(#9e91e8, #7a59ca);
+  color: #d5d2f5;
+}
+
+avatar.color12 {
+  background-image: linear-gradient(#e3cf9c, #b08952);
+  color: #f2eade;
+}
+
+avatar.color13 {
+  background-image: linear-gradient(#be916d, #785336);
+  color: #e5d6ca;
+}
+
+avatar.color14 {
+  background-image: linear-gradient(#c0bfbc, #6e6d71);
+  color: #d8d7d3;
+}
+
+avatar.contrasted {
+  color: white;
+}
+
+avatar.image {
+  background: none;
+}
+
+preferencespage > scrolledwindow > viewport > clamp > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+preferencesgroup > box, preferencesgroup > box .labels {
+  border-spacing: 6px;
+}
+
+preferencesgroup > box > box.header:not(.single-line) {
+  margin-bottom: 6px;
+}
+
+preferencesgroup > box > box.single-line {
+  min-height: 34px;
+}
+
+statuspage > scrolledwindow > viewport > box {
+  margin: 36px 12px;
+  border-spacing: 36px;
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box {
+  border-spacing: 12px;
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon {
+  -gtk-icon-size: 128px;
+  color: alpha(currentColor, 0.55);
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:disabled {
+  opacity: 0.35;
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) {
+  margin-bottom: 24px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon {
+  -gtk-icon-size: 96px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) {
+  margin-bottom: 12px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box > clamp > box > .title {
+  font-size: 18pt;
+}
+
+.card {
+  background-color: #FFFFFF;
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
+}
+
+.osd .card, .card.osd {
+  background-color: alpha(currentColor, 0.1);
+  color: inherit;
+  box-shadow: none;
+}
+
+.card.activatable:hover {
+  background-image: image(alpha(currentColor, 0.03));
+}
+
+.card.activatable:active {
+  background-image: image(alpha(currentColor, 0.08));
+}
+
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
diff --git a/src/gtk/4.0/gtk.css b/src/gtk/4.0/gtk.css
index cde73b7b..a72bace8 100644
--- a/src/gtk/4.0/gtk.css
+++ b/src/gtk/4.0/gtk.css
@@ -51,15 +51,15 @@ iconview:disabled, textview > text:disabled, .view:disabled {
   color: rgba(0, 0, 0, 0.38);
 }
 
-textview:drop(active) {
-  caret-color: #F4B400;
-}
-
 textview > border {
   background-color: #f9f9f9;
   color: rgba(0, 0, 0, 0.38);
 }
 
+textview:drop(active) {
+  caret-color: #F4B400;
+}
+
 iconview:hover, iconview:active, iconview:selected {
   border-radius: 3px;
 }
@@ -80,7 +80,11 @@ treeview.view > rubberband, gridview > rubberband, flowbox > rubberband {
 
 flowbox > flowboxchild {
   padding: 4px;
-  border-radius: 2px;
+  border-radius: 3px;
+}
+
+.content-view .tile:selected {
+  background-color: transparent;
 }
 
 gridview > child {
@@ -131,8 +135,24 @@ tab label:disabled, button label:disabled {
   color: inherit;
 }
 
-.dim-label, headerbar .subtitle, entry > text > placeholder, label.separator {
-  opacity: 0.45;
+.dim-label, row.expander:not(:checked) image.expander-row-arrow, row label.subtitle, headerbar .subtitle, entry > text > placeholder, label.separator {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.accent {
+  color: #18b8ff;
+}
+
+.success {
+  color: #0F9D58;
+}
+
+.warning {
+  color: #F4B400;
+}
+
+.error {
+  color: #DD2C00;
 }
 
 window.assistant .sidebar {
@@ -158,7 +178,7 @@ window.aboutdialog image.large-icons {
   -gtk-icon-size: 128px;
 }
 
-.osd .scale-popup > contents, .osd .scale-popup > arrow, .app-notification, .osd popover.background > arrow,
+.osd .scale-popup > contents, .osd .scale-popup > arrow, .osd popover.background > arrow,
 .osd popover.background > contents, popover.background.touch-selection > arrow,
 popover.background.touch-selection > contents, popover.background.magnifier > arrow,
 popover.background.magnifier > contents, .osd {
@@ -172,6 +192,30 @@ popover.background.magnifier > contents, .osd {
   box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
 }
 
+toast {
+  margin: 12px;
+  margin-bottom: 24px;
+  border-radius: 9999px;
+  border-spacing: 6px;
+  padding: 6px;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
+  background-color: #FFFFFF;
+  color: rgba(0, 0, 0, 0.87);
+  border: none;
+}
+
+toast:dir(ltr) {
+  padding-left: 12px;
+}
+
+toast:dir(rtl) {
+  padding-right: 12px;
+}
+
+toast > label {
+  margin: 0 6px;
+}
+
 @keyframes spin {
   to {
     transform: rotate(1turn);
@@ -239,7 +283,7 @@ spinner:checked:disabled {
 }
 
 window.dialog.message entry, notebook > stack:not(:only-child) entry,
-notebook > stack:not(:only-child) spinbutton:not(.vertical), popover.background entry, .background spinbutton:not(.vertical), .background spinbutton.flat:not(.vertical), .background .linked > entry, .background .linked.vertical > entry, .background .linked > entry.flat, .background .linked.vertical > entry.flat, .background entry.flat {
+notebook > stack:not(:only-child) spinbutton:not(.vertical), popover.background entry, spinbutton:not(.vertical), spinbutton.flat:not(.vertical), .linked > entry, .linked.vertical > entry, .linked > entry.flat, .linked.vertical > entry.flat, entry.flat {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
@@ -249,80 +293,54 @@ notebook > stack:not(:only-child) spinbutton:not(.vertical), popover.background
 }
 
 window.dialog.message entry:focus-within, notebook > stack:not(:only-child) entry:focus-within,
-notebook > stack:not(:only-child) spinbutton:focus-within:not(.vertical), popover.background entry:focus-within, .background spinbutton:focus-within:not(.vertical), .background .linked > entry:focus-within, .background entry.flat:focus-within {
+notebook > stack:not(:only-child) spinbutton:focus-within:not(.vertical), popover.background entry:focus-within, spinbutton:focus-within:not(.vertical), .linked > entry:focus-within, entry.flat:focus-within {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px #4285F4;
 }
 
 window.dialog.message entry:drop(active), notebook > stack:not(:only-child) entry:drop(active),
-notebook > stack:not(:only-child) spinbutton:drop(active):not(.vertical), popover.background entry:drop(active), .background spinbutton:drop(active):not(.vertical), .background .linked > entry:drop(active), .background entry.flat:drop(active) {
+notebook > stack:not(:only-child) spinbutton:drop(active):not(.vertical), popover.background entry:drop(active), spinbutton:drop(active):not(.vertical), .linked > entry:drop(active), entry.flat:drop(active) {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px rgba(0, 0, 0, 0.38);
 }
 
 window.dialog.message entry:disabled, notebook > stack:not(:only-child) entry:disabled,
-notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), popover.background entry:disabled, .background spinbutton:disabled:not(.vertical), .background .linked > entry:disabled, .background entry.flat:disabled {
+notebook > stack:not(:only-child) spinbutton:disabled:not(.vertical), popover.background entry:disabled, spinbutton:disabled:not(.vertical), .linked > entry:disabled, entry.flat:disabled {
   border-width: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
   color: rgba(0, 0, 0, 0.38);
 }
 
-spinbutton.vertical > text, spinbutton:not(.vertical), entry {
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #FFFFFF;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within {
-  border: 1px solid #4285F4;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #FFFFFF;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:disabled {
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  border-image: none;
-  background-color: #f9f9f9;
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.background entry {
+entry {
+  min-height: 36px;
+  padding: 0 8px;
+  border-radius: 3px;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   border: none;
   border-image: none;
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
+  outline: none;
 }
 
-.background entry:focus-within {
+entry:focus-within {
   border: none;
   border-image: none;
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
+  outline: none;
 }
 
-.background entry:disabled {
+entry:disabled {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #f9f9f9;
   color: rgba(0, 0, 0, 0.38);
 }
 
-entry {
-  min-height: 36px;
-  padding: 0 8px;
-}
-
 entry > image {
   color: alpha(currentColor, 0.9);
 }
@@ -381,6 +399,7 @@ entry undershoot.right {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #DD2C00;
   color: white;
+  outline: none;
 }
 
 .background entry.error:focus-within, .background entry.search.error:focus-within {
@@ -388,6 +407,7 @@ entry undershoot.right {
   border-image: none;
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12);
   color: white;
+  outline: none;
 }
 
 .background entry.error:disabled, .background entry.search.error:disabled {
@@ -424,6 +444,7 @@ entry undershoot.right {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #F4B400;
   color: white;
+  outline: none;
 }
 
 .background entry.warning:focus-within, .background entry.search.warning:focus-within {
@@ -431,6 +452,7 @@ entry undershoot.right {
   border-image: none;
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12);
   color: white;
+  outline: none;
 }
 
 .background entry.warning:disabled, .background entry.search.warning:disabled {
@@ -523,6 +545,7 @@ editablelabel > stack > text {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
+  outline: none;
 }
 
 @keyframes needs_attention {
@@ -535,71 +558,71 @@ editablelabel > stack > text {
 }
 
 window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button, window.dialog.message .linked.dialog-action-area:not(.vertical) > button, actionbar > revealer > box button:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model, popover.menu box.inline-buttons button.image-button.model,
-.background pathbar > button,
-toolbar button, dropdown > .linked:not(.vertical) > button.combo:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:not(:only-child), .linked > spinbutton:not(.vertical) > button.up, .linked > spinbutton:not(.vertical) > button.down,
-list > row button.image-button:not(.flat), .toolbar button, toolbutton button, toolbutton button.image-button, toolbutton button.toggle, .background .linked.stack-switcher > button {
+pathbar > button, .toolbar button,
+toolbar button, .linked > spinbutton:not(.vertical) > button.up, .linked > spinbutton:not(.vertical) > button.down,
+list > row button.image-button:not(.flat), splitbutton.flat > button,
+splitbutton.flat > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, menubutton.flat > button, toolbutton button, toolbutton button.image-button, toolbutton button.toggle, .linked.stack-switcher > button, toast button {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px transparent;
   background-color: transparent;
   color: rgba(0, 0, 0, 0.6);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:hover, popover.menu box.inline-buttons button.image-button.model:hover,
-.background pathbar > button:hover,
-toolbar button:hover, dropdown > .linked:not(.vertical) > button.combo:hover:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:hover:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:hover, .linked > spinbutton:not(.vertical) > button.down:hover,
-list > row button.image-button:hover:not(.flat), .toolbar button:hover, toolbutton button:hover, .background .linked.stack-switcher > button:hover {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:hover, actionbar > revealer > box button:hover:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:hover, popover.menu box.inline-buttons button.image-button.model:hover,
+pathbar > button:hover, .toolbar button:hover,
+toolbar button:hover, .linked > spinbutton:not(.vertical) > button.up:hover, .linked > spinbutton:not(.vertical) > button.down:hover,
+list > row button.image-button:hover:not(.flat), splitbutton.flat > button:hover,
+splitbutton.flat > menubutton > button:hover, menubutton.suggested-action > button:hover, menubutton.destructive-action > button:hover, menubutton.opaque > button:hover, menubutton.flat > button:hover, toolbutton button:hover, .linked.stack-switcher > button:hover, toast button:hover {
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.1);
   color: rgba(0, 0, 0, 0.87);
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:focus, actionbar > revealer > box button:focus:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:focus, popover.menu box.inline-buttons button.image-button.model:focus,
-.background pathbar > button:focus,
-toolbar button:focus, dropdown > .linked:not(.vertical) > button.combo:focus:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:focus:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:focus, .linked > spinbutton:not(.vertical) > button.down:focus,
-list > row button.image-button:focus:not(.flat), .toolbar button:focus, toolbutton button:focus, .background .linked.stack-switcher > button:focus {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:focus, actionbar > revealer > box button:focus:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:focus, popover.menu box.inline-buttons button.image-button.model:focus,
+pathbar > button:focus, .toolbar button:focus,
+toolbar button:focus, .linked > spinbutton:not(.vertical) > button.up:focus, .linked > spinbutton:not(.vertical) > button.down:focus,
+list > row button.image-button:focus:not(.flat), splitbutton.flat > button:focus,
+splitbutton.flat > menubutton > button:focus, menubutton.suggested-action > button:focus, menubutton.destructive-action > button:focus, menubutton.opaque > button:focus, menubutton.flat > button:focus, toolbutton button:focus, .linked.stack-switcher > button:focus, toast button:focus {
   background-color: transparent;
   outline: none;
   transition: none;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.inline-buttons button.image-button.model:active,
-.background pathbar > button:active,
-toolbar button:active, dropdown > .linked:not(.vertical) > button.combo:active:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:active:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:active, .linked > spinbutton:not(.vertical) > button.down:active,
-list > row button.image-button:active:not(.flat), .toolbar button:active, toolbutton button:active, .background .linked.stack-switcher > button:active {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:active, actionbar > revealer > box button:active:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.inline-buttons button.image-button.model:active,
+pathbar > button:active, .toolbar button:active,
+toolbar button:active, .linked > spinbutton:not(.vertical) > button.up:active, .linked > spinbutton:not(.vertical) > button.down:active,
+list > row button.image-button:active:not(.flat), splitbutton.flat > button:active,
+splitbutton.flat > menubutton > button:active, menubutton.suggested-action > button:active, menubutton.destructive-action > button:active, menubutton.opaque > button:active, menubutton.flat > button:active, toolbutton button:active, .linked.stack-switcher > button:active, toast button:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.16);
   color: rgba(0, 0, 0, 0.87);
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:disabled, popover.menu box.inline-buttons button.image-button.model:disabled,
-.background pathbar > button:disabled,
-toolbar button:disabled, dropdown > .linked:not(.vertical) > button.combo:disabled:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:disabled, .linked > spinbutton:not(.vertical) > button.down:disabled,
-list > row button.image-button:disabled:not(.flat), .toolbar button:disabled, toolbutton button:disabled, .background .linked.stack-switcher > button:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:disabled, actionbar > revealer > box button:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:disabled, popover.menu box.inline-buttons button.image-button.model:disabled,
+pathbar > button:disabled, .toolbar button:disabled,
+toolbar button:disabled, .linked > spinbutton:not(.vertical) > button.up:disabled, .linked > spinbutton:not(.vertical) > button.down:disabled,
+list > row button.image-button:disabled:not(.flat), splitbutton.flat > button:disabled,
+splitbutton.flat > menubutton > button:disabled, menubutton.suggested-action > button:disabled, menubutton.destructive-action > button:disabled, menubutton.opaque > button:disabled, menubutton.flat > button:disabled, toolbutton button:disabled, .linked.stack-switcher > button:disabled, toast button:disabled {
   box-shadow: none;
   background-color: transparent;
   color: alpha(currentColor, 0.27);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked, popover.menu box.inline-buttons button.image-button.model:checked,
-.background pathbar > button:checked,
-toolbar button:checked, dropdown > .linked:not(.vertical) > button.combo:checked:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:checked:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked, .linked > spinbutton:not(.vertical) > button.down:checked,
-list > row button.image-button:checked:not(.flat), .toolbar button:checked, toolbutton button:checked, .background .linked.stack-switcher > button:checked {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:checked, actionbar > revealer > box button:checked:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked, popover.menu box.inline-buttons button.image-button.model:checked,
+pathbar > button:checked, .toolbar button:checked,
+toolbar button:checked, .linked > spinbutton:not(.vertical) > button.up:checked, .linked > spinbutton:not(.vertical) > button.down:checked,
+list > row button.image-button:checked:not(.flat), splitbutton.flat > button:checked,
+splitbutton.flat > menubutton > button:checked, menubutton.suggested-action > button:checked, menubutton.destructive-action > button:checked, menubutton.opaque > button:checked, menubutton.flat > button:checked, toolbutton button:checked, .linked.stack-switcher > button:checked, toast button:checked {
   color: rgba(0, 0, 0, 0.87);
   background-color: alpha(currentColor, 0.12);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked:disabled, popover.menu box.inline-buttons button.image-button.model:checked:disabled,
-.background pathbar > button:checked:disabled,
-toolbar button:checked:disabled, dropdown > .linked:not(.vertical) > button.combo:checked:disabled:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:checked:disabled:not(:only-child), .linked > spinbutton:not(.vertical) > button.up:checked:disabled, .linked > spinbutton:not(.vertical) > button.down:checked:disabled,
-list > row button.image-button:checked:disabled:not(.flat), .toolbar button:checked:disabled, toolbutton button:checked:disabled, .background .linked.stack-switcher > button:checked:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:checked:disabled, actionbar > revealer > box button:checked:disabled:not(.suggested-action):not(.destructive-action):not(.server-list-button), popover.menu box.circular-buttons button.circular.image-button.model:checked:disabled, popover.menu box.inline-buttons button.image-button.model:checked:disabled,
+pathbar > button:checked:disabled, .toolbar button:checked:disabled,
+toolbar button:checked:disabled, .linked > spinbutton:not(.vertical) > button.up:checked:disabled, .linked > spinbutton:not(.vertical) > button.down:checked:disabled,
+list > row button.image-button:checked:disabled:not(.flat), splitbutton.flat > button:checked:disabled,
+splitbutton.flat > menubutton > button:checked:disabled, menubutton.suggested-action > button:checked:disabled, menubutton.destructive-action > button:checked:disabled, menubutton.opaque > button:checked:disabled, menubutton.flat > button:checked:disabled, toolbutton button:checked:disabled, .linked.stack-switcher > button:checked:disabled, toast button:checked:disabled {
   background-color: alpha(currentColor, 0.06);
   color: rgba(0, 0, 0, 0.38);
 }
@@ -641,8 +664,8 @@ radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disa
   color: alpha(currentColor, 0.27);
 }
 
-.background button.combo, .background .linked > button.combo, .background .linked entry + button, .background .linked entry + button + button {
-  border-radius: 0;
+dropdown > .linked:not(.vertical) > button.combo,
+combobox > .linked:not(.vertical) > button.combo, button.combo, .linked > button.combo, .linked entry + button, .linked entry + button.image-button, .linked entry + button.text-button, .linked entry + menubutton > button {
   background: none;
   font-weight: normal;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
@@ -652,63 +675,71 @@ radio:disabled, scrollbar button:disabled, notebook > header > tabs > arrow:disa
   border-width: 0;
 }
 
-.background button.combo:hover, .background .linked entry + button:hover, .background .linked entry + button + button:hover {
+dropdown > .linked:not(.vertical) > button.combo,
+combobox > .linked:not(.vertical) > button.combo, button.combo, .linked > button.combo, .linked entry + button, .linked entry + button.image-button, .linked entry + button.text-button, .linked entry + menubutton > button {
+  border-radius: 0;
+}
+
+dropdown > .linked:not(.vertical) > button.combo:hover,
+combobox > .linked:not(.vertical) > button.combo:hover, button.combo:hover, .linked entry + button:hover, .linked entry + menubutton > button:hover {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px rgba(0, 0, 0, 0.38);
 }
 
-.background button.combo:checked, .background .linked entry + button:checked, .background .linked entry + button + button:checked {
+dropdown > .linked:not(.vertical) > button.combo:checked,
+combobox > .linked:not(.vertical) > button.combo:checked, button.combo:checked, .linked entry + button:checked, .linked entry + menubutton > button:checked {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px #4285F4;
 }
 
-.background button.combo:disabled, .background .linked entry + button:disabled, .background .linked entry + button + button:disabled {
+dropdown > .linked:not(.vertical) > button.combo:disabled,
+combobox > .linked:not(.vertical) > button.combo:disabled, button.combo:disabled, .linked entry + button:disabled, .linked entry + menubutton > button:disabled {
   border-width: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
   color: rgba(0, 0, 0, 0.38);
 }
 
-button {
-  min-height: 24px;
-  min-width: 16px;
-  padding: 6px 9px;
-  border-radius: 3px;
-  font-weight: 500;
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  background-color: #FFFFFF;
+splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, button.opaque {
+  background-image: image(alpha(currentColor, 0.06));
   color: rgba(0, 0, 0, 0.6);
+  box-shadow: none;
 }
 
-button:hover {
+splitbutton.suggested-action > button:hover, splitbutton.suggested-action > menubutton > button:hover, splitbutton.destructive-action > button:hover, splitbutton.destructive-action > menubutton > button:hover, splitbutton.opaque > button:hover, splitbutton.opaque > menubutton > button:hover, button.opaque:hover {
+  background-image: image(alpha(currentColor, 0.1));
   box-shadow: none;
-  background-color: rgba(247, 247, 247, 0.9948);
   color: rgba(0, 0, 0, 0.87);
 }
 
-button:active, button:checked {
+splitbutton.suggested-action > button.keyboard-activating, splitbutton.suggested-action > menubutton > button.keyboard-activating, splitbutton.destructive-action > button.keyboard-activating, splitbutton.destructive-action > menubutton > button.keyboard-activating, splitbutton.opaque > button.keyboard-activating, splitbutton.opaque > menubutton > button.keyboard-activating, button.keyboard-activating.opaque, splitbutton.suggested-action > button:active, splitbutton.suggested-action > menubutton > button:active, splitbutton.destructive-action > button:active, splitbutton.destructive-action > menubutton > button:active, splitbutton.opaque > button:active, splitbutton.opaque > menubutton > button:active, button.opaque:active {
+  background-image: image(alpha(currentColor, 0.16));
   box-shadow: none;
-  background-color: rgba(239, 239, 239, 0.9896);
   color: rgba(0, 0, 0, 0.87);
-  animation: none;
 }
 
-button:disabled {
+splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button:checked, button.opaque:checked {
+  background-image: image(alpha(currentColor, 0.12));
   box-shadow: none;
-  background-color: rgba(234, 234, 234, 0.9948);
   color: rgba(0, 0, 0, 0.87);
 }
 
-button:checked:disabled {
-  box-shadow: none;
-  background-color: rgba(66, 133, 244, 0.5);
-  color: rgba(255, 255, 255, 0.45);
+splitbutton.suggested-action > button:checked:hover, splitbutton.suggested-action > menubutton > button:checked:hover, splitbutton.destructive-action > button:checked:hover, splitbutton.destructive-action > menubutton > button:checked:hover, splitbutton.opaque > button:checked:hover, splitbutton.opaque > menubutton > button:checked:hover, button.opaque:checked:hover {
+  background-image: image(alpha(currentColor, 0.16));
 }
 
-.background button {
+splitbutton.suggested-action > button:checked.keyboard-activating, splitbutton.suggested-action > menubutton > button:checked.keyboard-activating, splitbutton.destructive-action > button:checked.keyboard-activating, splitbutton.destructive-action > menubutton > button:checked.keyboard-activating, splitbutton.opaque > button:checked.keyboard-activating, splitbutton.opaque > menubutton > button:checked.keyboard-activating, button.opaque:checked.keyboard-activating, splitbutton.suggested-action > button:checked:active, splitbutton.suggested-action > menubutton > button:checked:active, splitbutton.destructive-action > button:checked:active, splitbutton.destructive-action > menubutton > button:checked:active, splitbutton.opaque > button:checked:active, splitbutton.opaque > menubutton > button:checked:active, button.opaque:checked:active {
+  background-image: image(alpha(currentColor, 0.16));
+}
+
+button {
+  min-height: 24px;
+  min-width: 16px;
+  padding: 6px 9px;
+  border-radius: 3px;
+  font-weight: 500;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
   background-color: #FFFFFF;
@@ -716,34 +747,34 @@ button:checked:disabled {
   border: none;
 }
 
-.background button:hover {
+button:hover {
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
   color: rgba(0, 0, 0, 0.87);
   background-color: white;
 }
 
-.background button:focus {
+button:focus {
   color: rgba(0, 0, 0, 0.87);
 }
 
-.background button:active {
+button:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
 }
 
-.background button:disabled {
+button:disabled {
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.26);
 }
 
-.background button:checked {
+button:checked {
   background-color: #4285F4;
   color: white;
 }
 
-.background button:checked:disabled {
+button:checked:disabled {
   background-color: alpha(#4285F4, 0.25);
   color: alpha(#4285F4, 0.5);
 }
@@ -795,33 +826,101 @@ button.image-button {
   border-radius: 3px;
 }
 
-button.text-button.image-button {
+button.text-button.image-button, button.image-text-button {
   border-radius: 3px;
 }
 
-button.text-button.image-button label:first-child {
+button.text-button.image-button > box,
+button.text-button.image-button > box > box, button.image-text-button > box,
+button.image-text-button > box > box {
+  border-spacing: 4px;
+}
+
+button.text-button.image-button > box > label,
+button.text-button.image-button > box > box > label, button.image-text-button > box > label,
+button.image-text-button > box > box > label {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+button.text-button.image-button label:first-child, button.image-text-button label:first-child {
   margin-left: 10px;
   margin-right: 2px;
 }
 
-button.text-button.image-button label:last-child {
+button.text-button.image-button label:last-child, button.image-text-button label:last-child {
   margin-left: 2px;
   margin-right: 10px;
 }
 
-button.text-button.image-button label:only-child {
+button.text-button.image-button label:only-child, button.image-text-button label:only-child {
   margin-left: 10px;
   margin-right: 10px;
 }
 
-button.text-button.image-button image:not(:only-child):first-child {
+button.text-button.image-button image:not(:only-child):first-child, button.image-text-button image:not(:only-child):first-child {
   margin-left: 4px;
 }
 
-button.text-button.image-button image:not(:only-child):last-child {
+button.text-button.image-button image:not(:only-child):last-child, button.image-text-button image:not(:only-child):last-child {
   margin-right: 4px;
 }
 
+button.arrow-button {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+
+button.arrow-button > box {
+  border-spacing: 4px;
+}
+
+button.arrow-button.text-button > box {
+  border-spacing: 4px;
+}
+
+menubutton.pill > button, button.pill {
+  padding: 9px 30px;
+  border-radius: 9999px;
+}
+
+button.card {
+  background-color: rgba(0, 0, 0, 0.05);
+  background-clip: padding-box;
+  font-weight: inherit;
+  padding: 0;
+}
+
+button.card:hover {
+  background-image: image(alpha(currentColor, 0.03));
+}
+
+button.card.keyboard-activating, button.card:active {
+  background-image: image(alpha(currentColor, 0.08));
+}
+
+button.card:checked {
+  background-color: rgba(0, 0, 0, 0.05);
+  background-image: image(alpha(currentColor, 0.1));
+}
+
+button.card:checked:hover {
+  background-image: image(alpha(currentColor, 0.13));
+}
+
+button.card:checked.keyboard-activating, button.card:checked:active {
+  background-image: image(alpha(currentColor, 0.19));
+}
+
+button.card:checked.has-open-popup {
+  background-image: image(alpha(currentColor, 0.13));
+}
+
+button.card:drop(active) {
+  color: #F4B400;
+  box-shadow: inset 0 0 0 1px #F4B400;
+}
+
 .linked > button.flat, .linked.vertical > button.flat {
   border-radius: 3px;
 }
@@ -834,16 +933,16 @@ button.text-button.image-button image:not(:only-child):last-child {
   border-radius: 3px;
 }
 
-.background .linked.stack-switcher > button {
+.linked.stack-switcher > button {
   border-radius: 0;
 }
 
-.background .linked.stack-switcher > button:checked {
+.linked.stack-switcher > button:checked {
   box-shadow: inset 0 -2px #4285F4;
   background-color: transparent;
 }
 
-.background buttonbox.linked > button {
+buttonbox.linked > button {
   border-radius: 3px;
 }
 
@@ -884,7 +983,8 @@ button.osd:disabled {
 .app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd popover.background > arrow button:not(.suggested-action):not(.destructive-action),
 .osd popover.background > contents button:not(.suggested-action):not(.destructive-action), popover.background.touch-selection > arrow button:not(.suggested-action):not(.destructive-action),
 popover.background.touch-selection > contents button:not(.suggested-action):not(.destructive-action), popover.background.magnifier > arrow button:not(.suggested-action):not(.destructive-action),
-popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .osd button {
+popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .toolbar.osd button,
+toolbar.osd button, .osd button {
   background-color: rgba(255, 255, 255, 0.05);
 }
 
@@ -898,7 +998,9 @@ popover.background.magnifier > contents button.flat:not(.suggested-action):not(.
 .app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd popover.background > arrow button:not(.suggested-action):not(.destructive-action),
 .osd popover.background > contents button:not(.suggested-action):not(.destructive-action), popover.background.touch-selection > arrow button:not(.suggested-action):not(.destructive-action),
 popover.background.touch-selection > contents button:not(.suggested-action):not(.destructive-action), popover.background.magnifier > arrow button:not(.suggested-action):not(.destructive-action),
-popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .osd button {
+popover.background.magnifier > contents button:not(.suggested-action):not(.destructive-action), .toolbar.osd button,
+toolbar.osd button,
+toolbar.osd button.flat, .osd button {
   color: rgba(255, 255, 255, 0.7);
   box-shadow: none;
 }
@@ -1095,133 +1197,309 @@ row button.image-button {
   border-radius: 9999px;
 }
 
-stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label,
-stackswitcher > button.needs-attention > image {
-  animation: needs_attention 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
-  background-repeat: no-repeat;
-  background-position: right 3px;
-  background-size: 6px 6px;
+menubutton.osd {
+  background: none;
+  color: inherit;
 }
 
-stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl),
-stackswitcher > button.needs-attention > image:dir(rtl) {
-  background-position: left 3px;
+menubutton.suggested-action {
+  background-color: #4285F4;
+  color: white;
 }
 
-.linked > button {
-  border-radius: 0;
+menubutton.destructive-action {
+  background-color: #FF5252;
+  color: white;
 }
 
-.linked > button:first-child {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+menubutton.suggested-action, menubutton.destructive-action, menubutton.opaque {
+  border-radius: 3px;
 }
 
-.linked > button:last-child {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+menubutton.suggested-action.circular, menubutton.suggested-action.pill, menubutton.destructive-action.circular, menubutton.destructive-action.pill, menubutton.opaque.circular, menubutton.opaque.pill {
+  border-radius: 9999px;
 }
 
-.linked > button:only-child {
-  border-radius: 3px;
+menubutton.suggested-action > button, menubutton.suggested-action > button:checked, menubutton.destructive-action > button, menubutton.destructive-action > button:checked, menubutton.opaque > button, menubutton.opaque > button:checked {
+  background-color: transparent;
+  color: inherit;
 }
 
-.linked.vertical > button {
-  border-radius: 0;
+menubutton.image-button > button {
+  min-width: 24px;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
-.linked.vertical > button:first-child {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+menubutton arrow {
+  min-height: 16px;
+  min-width: 16px;
 }
 
-.linked.vertical > button:last-child {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+menubutton arrow.none {
+  -gtk-icon-source: -gtk-icontheme("open-menu-symbolic");
 }
 
-.linked.vertical > button:only-child {
-  border-radius: 3px;
+menubutton arrow.down {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
 }
 
-/* menu buttons */
-modelbutton.flat {
-  min-height: 32px;
-  padding: 0 9px;
-  border-radius: 3px;
-  color: inherit;
+menubutton arrow.up {
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
 }
 
-modelbutton.flat check:not(:checked):not(:indeterminate),
-modelbutton.flat radio:not(:checked):not(:indeterminate) {
-  color: alpha(currentColor, 0.45);
+menubutton arrow.left {
+  -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
 }
 
-modelbutton.flat check, modelbutton.flat check:hover,
-modelbutton.flat radio,
-modelbutton.flat radio:hover {
-  background-image: none;
+menubutton arrow.right {
+  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
 }
 
-modelbutton.flat check:active,
-modelbutton.flat radio:active {
-  animation: none;
+splitbutton {
+  border-radius: 3px;
 }
 
-modelbutton.flat check:last-child,
-modelbutton.flat radio:last-child {
-  margin-left: -8px;
-  margin-right: -16px;
+splitbutton, splitbutton > separator {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
+  transition-property: background;
 }
 
-modelbutton.flat check:first-child,
-modelbutton.flat radio:first-child {
-  margin-left: -16px;
-  margin-right: -8px;
+splitbutton > separator {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  background: none;
 }
 
-modelbutton.flat arrow {
-  background: none;
-  transition: none;
+splitbutton > menubutton > button {
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
-modelbutton.flat arrow:hover {
-  background: none;
+splitbutton.image-button > button {
+  min-width: 24px;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
-modelbutton.flat arrow.left {
-  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+splitbutton.text-button.image-button > button, splitbutton.image-text-button > button {
+  padding-left: 9px;
+  padding-right: 9px;
 }
 
-modelbutton.flat arrow.right {
-  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+splitbutton.text-button.image-button > button > box, splitbutton.image-text-button > button > box {
+  border-spacing: 6px;
 }
 
-.toolbar button {
-  margin: 1px;
+splitbutton > button:dir(ltr),
+splitbutton > menubutton > button:dir(rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
 }
 
-button.color {
-  min-height: 24px;
-  min-width: 24px;
-  padding: 6px;
+splitbutton > button:dir(rtl),
+splitbutton > menubutton > button:dir(ltr) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
 }
 
-button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay {
-  border-radius: 0;
+splitbutton.flat > separator {
+  background: rgba(0, 0, 0, 0.12);
 }
 
+splitbutton.flat:hover, splitbutton.flat:active, splitbutton.flat:checked {
+  background: alpha(currentColor, 0.07);
+}
 
-list > row button.image-button.suggested-action:not(.flat) {
-  transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
-  box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
+splitbutton.flat:hover > separator, splitbutton.flat:active > separator, splitbutton.flat:checked > separator {
+  background: none;
+}
+
+splitbutton.flat:focus-within:focus-visible > separator {
+  background: none;
+}
+
+splitbutton.flat > button,
+splitbutton.flat > menubutton > button {
+  border-radius: 3px;
+}
+
+splitbutton.suggested-action {
+  background-color: #4285F4;
+  color: white;
+}
+
+splitbutton.destructive-action {
+  background-color: #FF5252;
+  color: white;
+}
+
+splitbutton.suggested-action > button, splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button, splitbutton.opaque > menubutton > button:checked {
+  color: inherit;
+  background-color: transparent;
+}
+
+splitbutton.suggested-action > menubutton > button:dir(ltr), splitbutton.destructive-action > menubutton > button:dir(ltr), splitbutton.opaque > menubutton > button:dir(ltr) {
+  box-shadow: inset 1px 0 rgba(0, 0, 0, 0.12);
+}
+
+splitbutton.suggested-action > menubutton > button:dir(rtl), splitbutton.destructive-action > menubutton > button:dir(rtl), splitbutton.opaque > menubutton > button:dir(rtl) {
+  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.12);
+}
+
+splitbutton > menubutton > button > arrow.none {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
+buttoncontent {
+  border-spacing: 6px;
+}
+
+buttoncontent > label {
+  font-weight: bold;
+}
+
+buttoncontent > label:dir(ltr) {
+  padding-right: 2px;
+}
+
+buttoncontent > label:dir(rtl) {
+  padding-left: 2px;
+}
+
+.arrow-button > box > buttoncontent > label:dir(ltr), splitbutton > button > buttoncontent > label:dir(ltr) {
+  padding-right: 0;
+}
+
+.arrow-button > box > buttoncontent > label:dir(rtl), splitbutton > button > buttoncontent > label:dir(rtl) {
+  padding-left: 0;
+}
+
+stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label,
+stackswitcher > button.needs-attention > image {
+  animation: needs_attention 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
+  background-repeat: no-repeat;
+  background-position: right 3px;
+  background-size: 6px 6px;
+}
+
+stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl),
+stackswitcher > button.needs-attention > image:dir(rtl) {
+  background-position: left 3px;
+}
+
+.linked > button {
+  border-radius: 0;
+}
+
+.linked > button:first-child {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.linked > button:last-child {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.linked > button:only-child {
+  border-radius: 3px;
+}
+
+.linked.vertical > button {
+  border-radius: 0;
+}
+
+.linked.vertical > button:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.linked.vertical > button:last-child {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.linked.vertical > button:only-child {
+  border-radius: 3px;
+}
+
+/* menu buttons */
+modelbutton.flat {
+  min-height: 32px;
+  padding: 0 9px;
+  border-radius: 3px;
+  color: inherit;
+}
+
+modelbutton.flat check:not(:checked):not(:indeterminate),
+modelbutton.flat radio:not(:checked):not(:indeterminate) {
+  color: alpha(currentColor, 0.45);
+}
+
+modelbutton.flat check, modelbutton.flat check:hover,
+modelbutton.flat radio,
+modelbutton.flat radio:hover {
+  background-image: none;
+}
+
+modelbutton.flat check:active,
+modelbutton.flat radio:active {
+  animation: none;
+}
+
+modelbutton.flat check:last-child,
+modelbutton.flat radio:last-child {
+  margin-left: -8px;
+  margin-right: -16px;
+}
+
+modelbutton.flat check:first-child,
+modelbutton.flat radio:first-child {
+  margin-left: -16px;
+  margin-right: -8px;
+}
+
+modelbutton.flat arrow {
+  background: none;
+  transition: none;
+}
+
+modelbutton.flat arrow:hover {
+  background: none;
+}
+
+modelbutton.flat arrow.left {
+  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
+}
+
+modelbutton.flat arrow.right {
+  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
+}
+
+button.color {
+  min-height: 24px;
+  min-width: 24px;
+  padding: 6px;
+}
+
+button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay {
+  border-radius: 0;
+}
+
+
+list > row button.image-button:not(.flat).suggested-action {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
+  box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
   background-color: #4285F4;
   color: rgba(0, 0, 0, 0.6);
   border: none;
 }
 
 
-list > row button.image-button.destructive-action:not(.flat) {
+list > row button.image-button:not(.flat).destructive-action {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), inset 0 0 0 9999px transparent;
   background-color: #FF5252;
@@ -1277,16 +1555,18 @@ spinbutton:not(.vertical) {
   padding: 0;
 }
 
-.background spinbutton:not(.vertical), .background spinbutton.flat:not(.vertical) {
+spinbutton:not(.vertical), spinbutton:not(.vertical).flat {
   transition: all 225ms cubic-bezier(0, 0, 0.2, 1);
   border-radius: 0;
+  outline: none;
 }
 
-.background spinbutton:not(.vertical) > text, .background spinbutton:not(.vertical) > text:focus-within, .background spinbutton:not(.vertical) > text:disabled, .background spinbutton:not(.vertical):focus-within > text, .background spinbutton:not(.vertical):focus-within > text:focus-within, .background spinbutton:not(.vertical):focus-within > text:disabled, .background spinbutton:not(.vertical):disabled > text, .background spinbutton:not(.vertical):disabled > text:focus-within, .background spinbutton:not(.vertical):disabled > text:disabled, .background spinbutton.flat:not(.vertical) > text, .background spinbutton.flat:not(.vertical) > text:focus-within, .background spinbutton.flat:not(.vertical) > text:disabled, .background spinbutton.flat:not(.vertical):focus-within > text, .background spinbutton.flat:not(.vertical):focus-within > text:focus-within, .background spinbutton.flat:not(.vertical):focus-within > text:disabled, .background spinbutton.flat:not(.vertical):disabled > text, .background spinbutton.flat:not(.vertical):disabled > text:focus-within, .background spinbutton.flat:not(.vertical):disabled > text:disabled {
+spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text:focus-within, spinbutton:not(.vertical) > text:disabled, spinbutton:not(.vertical):focus-within > text, spinbutton:not(.vertical):focus-within > text:focus-within, spinbutton:not(.vertical):focus-within > text:disabled, spinbutton:not(.vertical):disabled > text, spinbutton:not(.vertical):disabled > text:focus-within, spinbutton:not(.vertical):disabled > text:disabled, spinbutton:not(.vertical).flat > text, spinbutton:not(.vertical).flat > text:focus-within, spinbutton:not(.vertical).flat > text:disabled, spinbutton:not(.vertical).flat:focus-within > text, spinbutton:not(.vertical).flat:focus-within > text:focus-within, spinbutton:not(.vertical).flat:focus-within > text:disabled, spinbutton:not(.vertical).flat:disabled > text, spinbutton:not(.vertical).flat:disabled > text:focus-within, spinbutton:not(.vertical).flat:disabled > text:disabled {
   box-shadow: none;
   background: none;
   border-image: none;
   transition: none;
+  outline: none;
 }
 
 spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text:focus-within, spinbutton:not(.vertical) > text:disabled {
@@ -1297,6 +1577,7 @@ spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text:focus-within,
   border-radius: 0;
   box-shadow: none;
   background-color: transparent;
+  outline: none;
 }
 
 spinbutton:not(.vertical) > button, spinbutton:not(.vertical) > button:hover, spinbutton:not(.vertical) > button:active, spinbutton:not(.vertical) > button:checked, spinbutton:not(.vertical) > button:disabled {
@@ -1327,6 +1608,7 @@ spinbutton.vertical > text {
   min-height: 36px;
   min-width: 42px;
   padding: 0;
+  outline: none;
 }
 
 spinbutton.vertical > button {
@@ -1375,59 +1657,8 @@ combobox > popover.menu > contents modelbutton {
   padding-right: 9px;
 }
 
-.background dropdown, .background combobox {
-  border: unset;
-  border-image: unset;
-  border-radius: unset;
-  background-color: unset;
-  color: unset;
-  box-shadow: unset;
-}
-
 dropdown entry.combo,
 combobox entry.combo {
-  border-radius: 2px;
-  margin-right: -32px;
-  padding-right: 32px;
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #FFFFFF;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-dropdown entry.combo:focus,
-combobox entry.combo:focus {
-  border: 1px solid #4285F4;
-  box-shadow: none;
-  border-image: none;
-  border-radius: 2px;
-  background-color: #FFFFFF;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-dropdown entry.combo:disabled,
-combobox entry.combo:disabled {
-  border: 1px solid #d9d9d9;
-  box-shadow: none;
-  border-image: none;
-  background-color: #f9f9f9;
-  color: rgba(0, 0, 0, 0.38);
-}
-
-dropdown > .linked:not(.vertical) > button.combo:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:not(:only-child) {
-  border: none;
-  border-image: none;
-  box-shadow: none;
-  min-height: 16px;
-  min-width: 16px;
-  margin: 4px;
-  padding: 6px;
-}
-
-.background dropdown entry.combo, .background combobox entry.combo {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
@@ -1435,13 +1666,15 @@ combobox > .linked:not(.vertical) > button.combo:not(:only-child) {
   border-width: 0;
 }
 
-.background dropdown entry.combo:focus, .background combobox entry.combo:focus {
+dropdown entry.combo:focus,
+combobox entry.combo:focus {
   background: none;
   border-width: 0;
   box-shadow: inset 0 -2px #4285F4;
 }
 
-.background dropdown entry.combo:disabled, .background combobox entry.combo:disabled {
+dropdown entry.combo:disabled,
+combobox entry.combo:disabled {
   border-width: 0;
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.26);
   background-color: transparent;
@@ -1463,18 +1696,6 @@ combobox button.combo cellview:dir(rtl) {
   margin-right: -2px;
 }
 
-dropdown.linked button:nth-child(2):dir(ltr),
-combobox.linked button:nth-child(2):dir(ltr) {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-dropdown.linked button:nth-child(2):dir(rtl),
-combobox.linked button:nth-child(2):dir(rtl) {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-
 dropdown:drop(active),
 combobox:drop(active) {
   box-shadow: none;
@@ -1524,6 +1745,16 @@ toolbar {
   background-color: #F2F2F2;
 }
 
+.toolbar > separator.spacer,
+toolbar > separator.spacer {
+  background: none;
+}
+
+.toolbar button,
+toolbar button {
+  margin: 0 1px;
+}
+
 .osd .toolbar, .osd toolbar {
   background-color: transparent;
 }
@@ -1532,8 +1763,9 @@ toolbar {
 toolbar.osd {
   padding: 6px;
   border-radius: 2px;
-  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 3px -1px rgba(0, 0, 0, 0.14), 0 3px 4px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #FFFFFF;
+  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.2), 0 3px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 5px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
+  background-color: #222222;
+  color: white;
 }
 
 .toolbar.osd:backdrop,
@@ -1684,8 +1916,8 @@ headerbar.windowhandle viewswitcher button:disabled:not(.titlebutton):not(.sugge
 
 headerbar {
   transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1), color 100ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 36px;
-  padding: 0 12px;
+  min-height: 48px;
+  padding: 0 6px;
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #363636;
   color: white;
@@ -1703,6 +1935,10 @@ headerbar:disabled {
   color: rgba(255, 255, 255, 0.45);
 }
 
+headerbar:not(.titlebar) {
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(0, 0, 0, 0.12);
+}
+
 headerbar .title {
   padding: 0 12px;
   font-weight: bold;
@@ -1713,6 +1949,20 @@ headerbar .subtitle {
   font-size: smaller;
 }
 
+box.vertical headerbar {
+  background-color: #363636;
+}
+
+headerbar > windowhandle > box {
+  padding: 0 3px;
+}
+
+headerbar > windowhandle > box,
+headerbar > windowhandle > box > box.start,
+headerbar > windowhandle > box > box.end {
+  border-spacing: 6px;
+}
+
 headerbar button.suggested-action:disabled, headerbar button.destructive-action:disabled {
   color: alpha(currentColor, 0.3);
 }
@@ -1836,16 +2086,25 @@ headerbar .linked > entry,
 headerbar .linked > entry:hover,
 headerbar .linked > entry:active,
 headerbar .linked > entry:checked,
-headerbar .linked > entry:disabled, .background headerbar .linked entry + button, .background headerbar .linked entry + button:hover, .background headerbar .linked entry + button:active, .background headerbar .linked entry + button:checked, .background headerbar .linked entry + button:disabled, .background headerbar .linked entry + button + button, .background headerbar .linked entry + button + button:hover, .background headerbar .linked entry + button + button:active, .background headerbar .linked entry + button + button:checked, .background headerbar .linked entry + button + button:disabled {
+headerbar .linked > entry:disabled,
+headerbar .linked entry + button,
+headerbar .linked entry + button:hover,
+headerbar .linked entry + button:active,
+headerbar .linked entry + button:checked,
+headerbar .linked entry + button:disabled,
+headerbar .linked entry + button.image-button,
+headerbar .linked entry + button.image-button:hover,
+headerbar .linked entry + button.image-button:active,
+headerbar .linked entry + button.image-button:checked,
+headerbar .linked entry + button.image-button:disabled,
+headerbar .linked entry + button.text-button,
+headerbar .linked entry + button.text-button:hover,
+headerbar .linked entry + button.text-button:active,
+headerbar .linked entry + button.text-button:checked,
+headerbar .linked entry + button.text-button:disabled {
   border-radius: 3px;
 }
 
-headerbar > windowhandle > box,
-headerbar > windowhandle > box > box.start,
-headerbar > windowhandle > box > box.end {
-  border-spacing: 6px;
-}
-
 headerbar.windowhandle viewswitcher button:not(.titlebutton):not(.suggested-action):not(.destructive-action) {
   margin-top: 0;
   margin-bottom: 0;
@@ -1861,8 +2120,8 @@ headerbar menubutton {
 }
 
 headerbar menubutton > button {
-  margin-top: 0px;
-  margin-bottom: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 headerbar switch {
@@ -1892,35 +2151,6 @@ headerbar.titlebar headerbar:not(.titlebar) {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
-separator:first-child + headerbar, headerbar:first-child {
-  border-top-left-radius: 3px;
-}
-
-headerbar:last-child {
-  border-top-right-radius: 3px;
-}
-
-stack headerbar:first-child, stack headerbar:last-child {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  border: none;
-}
-
-window.tiled headerbar, window.tiled headerbar:first-child, window.tiled headerbar:last-child, window.tiled headerbar:only-child, window.tiled-top headerbar, window.tiled-top headerbar:first-child, window.tiled-top headerbar:last-child, window.tiled-top headerbar:only-child, window.tiled-right headerbar, window.tiled-right headerbar:first-child, window.tiled-right headerbar:last-child, window.tiled-right headerbar:only-child, window.tiled-bottom headerbar, window.tiled-bottom headerbar:first-child, window.tiled-bottom headerbar:last-child, window.tiled-bottom headerbar:only-child, window.tiled-left headerbar, window.tiled-left headerbar:first-child, window.tiled-left headerbar:last-child, window.tiled-left headerbar:only-child, window.maximized headerbar, window.maximized headerbar:first-child, window.maximized headerbar:last-child, window.maximized headerbar:only-child, window.fullscreen headerbar, window.fullscreen headerbar:first-child, window.fullscreen headerbar:last-child, window.fullscreen headerbar:only-child, window.solid-csd headerbar, window.solid-csd headerbar:first-child, window.solid-csd headerbar:last-child, window.solid-csd headerbar:only-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.titlebar, .titlebar.background {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-}
-
-.background.tiled .titlebar, .background.tiled-top .titlebar, .background.tiled-right .titlebar, .background.tiled-bottom .titlebar, .background.tiled-left .titlebar, .background.maximized .titlebar, .background.solid-csd .titlebar {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .titlebar.solid-csd headerbar {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
 }
@@ -1961,23 +2191,6 @@ window.csd > .titlebar:not(headerbar) {
   box-shadow: none;
 }
 
-window.background > box.vertical > headerbar:not(.titlebar) {
-  border-radius: 0 0 0 0;
-  box-shadow: none;
-}
-
-window.background > box.vertical > headerbar:not(.titlebar), window.background > box.vertical > headerbar:not(.titlebar):backdrop {
-  background-color: #363636;
-}
-
-separator:first-child + window.background > box.vertical > headerbar:not(.titlebar), separator:first-child + window.background > box.vertical > headerbar:not(.titlebar):backdrop, window.background > box.vertical > headerbar:not(.titlebar):first-child, window.background > box.vertical > headerbar:not(.titlebar):first-child:backdrop {
-  border-top-left-radius: 0;
-}
-
-window.background > box.vertical > headerbar:not(.titlebar):last-child, window.background > box.vertical > headerbar:not(.titlebar):last-child:backdrop {
-  border-top-right-radius: 0;
-}
-
 headerbar separator.titlebutton, headerbar separator {
   min-width: 0;
   min-height: 0;
@@ -2015,66 +2228,141 @@ window.devel headerbar.titlebar:backdrop {
   /* background-color would flash */
 }
 
+viewswitcher {
+  margin: 0;
+}
 
-.background pathbar > button {
-  border-radius: 2px;
+viewswitcher.wide {
+  border-spacing: 3px;
+}
+
+viewswitcher.narrow button.toggle {
+  border-radius: 0;
+  margin: 0;
+}
+
+viewswitcher.narrow button.toggle:focus-within, viewswitcher.narrow button.toggle:focus {
+  box-shadow: none;
+}
+
+viewswitcher button.toggle {
+  font-weight: bold;
+  padding: 0;
+}
+
+viewswitcher button.toggle > stack > box.narrow {
+  font-size: 0.75rem;
+  padding-top: 6px;
+  padding-bottom: 4px;
+  border-spacing: 4px;
+}
+
+viewswitcher button.toggle > stack > box.narrow > stack > label {
   padding-left: 6px;
   padding-right: 6px;
 }
 
+viewswitcher button.toggle > stack > box.wide {
+  padding: 2px 12px;
+  border-spacing: 6px;
+}
 
-.background pathbar > button:checked {
-  box-shadow: inset 0 -2px #4285F4;
+viewswitcherbar actionbar > revealer > box {
+  padding: 0;
 }
 
+viewswitchertitle viewswitcher {
+  margin-left: 12px;
+  margin-right: 12px;
+}
 
-.background pathbar > button:checked,
-.background pathbar > button:checked:disabled {
-  background-color: transparent;
+indicatorbin > indicator, indicatorbin > mask {
+  min-width: 6px;
+  min-height: 6px;
+  border-radius: 9999px;
 }
 
+indicatorbin > indicator {
+  margin: 1px;
+  background-color: alpha(currentColor, 0.4);
+}
 
-.background pathbar > button.text-button,
-.background pathbar > button.image-button,
-.background pathbar > button {
-  padding-left: 4px;
-  padding-right: 4px;
+indicatorbin > indicator > label {
+  font-size: 0.6rem;
+  font-weight: bold;
+  padding: 1px 4px;
+  color: white;
+}
+
+indicatorbin > mask {
+  padding: 1px;
+  background: black;
 }
 
+indicatorbin.needs-attention > indicator {
+  background-color: #4285F4;
+}
 
-.background pathbar > button.text-button.image-button label {
+indicatorbin.needs-attention > indicator > label {
+  color: white;
+}
+
+
+pathbar > button {
+  border-radius: 3px;
+  padding-left: 6px;
+  padding-right: 6px;
+  margin: 0;
+}
+
+
+pathbar > button,
+pathbar > button:disabled {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+
+pathbar > button.text-button,
+pathbar > button.image-button,
+pathbar > button {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+
+pathbar > button.text-button.image-button label {
   padding-left: 0;
   padding-right: 0;
 }
 
 
-.background pathbar > button.text-button.image-button label:last-child,
-.background pathbar > button label:last-child {
+pathbar > button.text-button.image-button label:last-child,
+pathbar > button label:last-child {
   padding-right: 8px;
 }
 
 
-.background pathbar > button.text-button.image-button label:first-child,
-.background pathbar > button label:first-child {
+pathbar > button.text-button.image-button label:first-child,
+pathbar > button label:first-child {
   padding-left: 8px;
 }
 
 
-.background pathbar > button image {
-  padding-left: 4px;
-  padding-right: 4px;
+pathbar > button image {
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
 
-.background pathbar > button.slider-button {
-  padding-left: 0;
-  padding-right: 0;
+pathbar > button.slider-button {
+  padding-left: 3px;
+  padding-right: 3px;
 }
 
 columnview.view,
 treeview.view {
-  border-left-color: #d9d9d9;
-  border-top-color: #d9d9d9;
+  border-left-color: #e0e0e0;
+  border-top-color: #e0e0e0;
 }
 
 columnview.view:hover, columnview.view:active, columnview.view:selected,
@@ -2102,24 +2390,27 @@ treeview.view > dndtarget:drop(active) {
   border-color: #18b8ff;
 }
 
-columnview.view > dndtarget.after:drop(active),
-treeview.view > dndtarget.after:drop(active) {
+columnview.view > dndtarget:drop(active).after,
+treeview.view > dndtarget:drop(active).after {
   border-top-style: none;
 }
 
-columnview.view > dndtarget.before:drop(active),
-treeview.view > dndtarget.before:drop(active) {
+columnview.view > dndtarget:drop(active).before,
+treeview.view > dndtarget:drop(active).before {
   border-bottom-style: none;
 }
 
 columnview.view.expander,
 treeview.view.expander {
-  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+  min-width: 16px;
+  min-height: 16px;
+  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
   color: rgba(0, 0, 0, 0.6);
 }
 
 columnview.view.expander:dir(rtl),
 treeview.view.expander:dir(rtl) {
+  -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
   -gtk-icon-transform: rotate(90deg);
 }
 
@@ -2129,6 +2420,11 @@ treeview.view.expander:active {
   color: rgba(0, 0, 0, 0.87);
 }
 
+columnview.view.expander:checked,
+treeview.view.expander:checked {
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
 columnview.view.expander:disabled,
 treeview.view.expander:disabled {
   color: rgba(0, 0, 0, 0.26);
@@ -2228,6 +2524,10 @@ treeview.view acceleditor > label {
   background-color: #4285F4;
 }
 
+stack.view treeview.view {
+  min-height: 36px;
+}
+
 menubar {
   padding: 0;
   color: rgba(255, 255, 255, 0.7);
@@ -2275,8 +2575,8 @@ popover.menu {
 
 popover.menu > arrow, popover.menu.background > contents {
   padding: 6px;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
-  background-color: #FFFFFF;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
+  background-color: white;
   border: none;
   border-radius: 3px;
 }
@@ -2334,6 +2634,7 @@ popover.menu modelbutton {
   min-width: 48px;
   padding: 0 12px;
   border-radius: 3px;
+  color: rgba(0, 0, 0, 0.6);
 }
 
 popover.menu modelbutton:selected {
@@ -2384,6 +2685,7 @@ popover.background button:checked:disabled:not(.suggested-action):not(.destructi
 }
 
 popover.background {
+  color: rgba(0, 0, 0, 0.87);
   background-color: transparent;
   font: initial;
 }
@@ -2393,7 +2695,7 @@ popover.background > contents {
   transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
   padding: 0;
   box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12);
-  background-color: white;
+  background-color: #FFFFFF;
   border: none;
 }
 
@@ -2420,7 +2722,7 @@ popover.background > contents > toolbar {
 }
 
 popover.background > contents separator {
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
   margin: 3px;
 }
 
@@ -2458,6 +2760,45 @@ magnifier {
   background-color: #FFFFFF;
 }
 
+tabbar tab, notebook > header tab {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
+  min-height: 24px;
+  min-width: 24px;
+  padding: 6px 12px;
+  outline-offset: -6px;
+  border-width: 0;
+  border-color: transparent;
+  color: rgba(0, 0, 0, 0.6);
+  font-weight: 500;
+}
+
+tabbar tab:hover, notebook > header tab:hover {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+tabbar tab:hover.reorderable-page, notebook > header tab:hover.reorderable-page {
+  border-color: rgba(0, 0, 0, 0.12);
+  background-color: #f9f9f9;
+}
+
+tabbar tab:disabled, notebook > header tab:disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+tabbar tab:checked, notebook > header tab:checked {
+  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
+  color: rgba(0, 0, 0, 0.87);
+}
+
+tabbar tab:checked:disabled, notebook > header tab:checked:disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+tabbar tab:checked.reorderable-page, notebook > header tab:checked.reorderable-page {
+  border-color: rgba(0, 0, 0, 0.12);
+  background-color: #FFFFFF;
+}
+
 notebook > header {
   border-width: 1px;
   border-color: rgba(0, 0, 0, 0.12);
@@ -2474,7 +2815,7 @@ notebook > header.top > tabs {
 }
 
 notebook > header.top > tabs > tab:hover {
-  box-shadow: inset 0 -2px alpha(#4285F4, 0.3);
+  box-shadow: inset 0 -2px #bdd1f3;
 }
 
 notebook > header.top > tabs > tab:checked {
@@ -2490,7 +2831,7 @@ notebook > header.bottom > tabs {
 }
 
 notebook > header.bottom > tabs > tab:hover {
-  box-shadow: inset 0 2px alpha(#4285F4, 0.3);
+  box-shadow: inset 0 2px #bdd1f3;
 }
 
 notebook > header.bottom > tabs > tab:checked {
@@ -2506,7 +2847,7 @@ notebook > header.left > tabs {
 }
 
 notebook > header.left > tabs > tab:hover {
-  box-shadow: inset -2px 0 alpha(#4285F4, 0.3);
+  box-shadow: inset -2px 0 #bdd1f3;
 }
 
 notebook > header.left > tabs > tab:checked {
@@ -2522,7 +2863,7 @@ notebook > header.right > tabs {
 }
 
 notebook > header.right > tabs > tab:hover {
-  box-shadow: inset 2px 0 alpha(#4285F4, 0.3);
+  box-shadow: inset 2px 0 #bdd1f3;
 }
 
 notebook > header.right > tabs > tab:checked {
@@ -2581,45 +2922,6 @@ notebook > header > tabs > arrow {
   border-radius: 0;
 }
 
-notebook > header tab {
-  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
-  min-height: 24px;
-  min-width: 24px;
-  padding: 6px 12px;
-  outline-offset: -6px;
-  border-width: 1px;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.6);
-  font-weight: 500;
-}
-
-notebook > header tab:hover {
-  color: rgba(0, 0, 0, 0.87);
-}
-
-notebook > header tab.reorderable-page:hover {
-  border-color: rgba(0, 0, 0, 0.12);
-  background-color: #f9f9f9;
-}
-
-notebook > header tab:disabled {
-  color: rgba(0, 0, 0, 0.26);
-}
-
-notebook > header tab:checked {
-  transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
-  color: rgba(0, 0, 0, 0.87);
-}
-
-notebook > header tab:checked:disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-notebook > header tab.reorderable-page:checked {
-  border-color: rgba(0, 0, 0, 0.12);
-  background-color: #FFFFFF;
-}
-
 notebook > header tab button.flat {
   min-height: 24px;
   min-width: 24px;
@@ -2658,13 +2960,113 @@ notebook > header.left tabs:not(:only-child):last-child, notebook > header.right
   margin-bottom: 0;
 }
 
-notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
-  margin: -1px 0;
-  border-style: solid none;
+notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
+  margin: -1px 0;
+  border-style: solid none;
+}
+
+notebook > stack:not(:only-child) {
+  background-color: #FFFFFF;
+}
+
+tabbar .box {
+  background-color: transparent;
+  border: none;
+}
+
+tabbar scrolledwindow.pinned tabbox > background:dir(ltr) {
+  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.12);
+}
+
+tabbar scrolledwindow.pinned tabbox > background:dir(rtl) {
+  box-shadow: inset 1px 0 rgba(0, 0, 0, 0.12);
+}
+
+tabbar tabbox {
+  background-color: #F2F2F2;
+  background-clip: padding-box;
+  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
+}
+
+tabbar tabbox > background {
+  background: none;
+}
+
+tabbar tab:hover {
+  box-shadow: inset 0 -2px #bdd1f3;
+}
+
+tabbar tab:checked {
+  box-shadow: inset 0 -2px #4285F4;
+}
+
+tabbar .start-action,
+tabbar .end-action {
+  background-color: rgba(0, 0, 0, 0.05);
+  background-clip: padding-box;
+  border-color: rgba(0, 0, 0, 0.12);
+  border-style: solid;
+  transition: background 150ms ease-in-out;
+}
+
+tabbar .start-action button,
+tabbar .end-action button {
+  border: none;
+  border-radius: 0;
+}
+
+tabbar .start-action:dir(ltr),
+tabbar .end-action:dir(rtl) {
+  border-right-width: 1px;
+}
+
+tabbar .start-action:dir(rtl),
+tabbar .end-action:dir(ltr) {
+  border-left-width: 1px;
+}
+
+tabbar:not(.inline) scrolledwindow.pinned undershoot {
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+tabbar:not(.inline) tabbox > background {
+  background-color: #363636;
+}
+
+tabbar:not(.inline) .start-action,
+tabbar:not(.inline) .end-action {
+  background-color: alpha(#363636, 0.6);
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+tabbar:not(.inline):backdrop .box {
+  background-color: #363636;
+}
+
+dnd tab {
+  min-height: 24px;
+  background-color: #363636;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 24px;
+}
+
+tabbar tab,
+dnd tab {
+  padding: 6px;
+}
+
+tabbar tab button.image-button,
+dnd tab button.image-button {
+  padding: 0;
+  margin: 0;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 9999px;
 }
 
-notebook > stack:not(:only-child) {
-  background-color: #FFFFFF;
+tabview:drop(active),
+tabbox:drop(active) {
+  box-shadow: none;
 }
 
 scrollbar {
@@ -2752,19 +3154,19 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) button:disabled {
   background-color: rgba(0, 0, 0, 0.26);
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) > range > trough > slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal > range > trough > slider {
   min-width: 24px;
 }
 
-scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
   min-width: 8px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) > range > trough > slider {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical > range > trough > slider {
   min-height: 24px;
 }
 
-scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) button {
+scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
   min-height: 8px;
 }
 
@@ -3454,6 +3856,7 @@ levelbar > trough {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12);
   background-color: #FFFFFF;
   color: rgba(0, 0, 0, 0.6);
+  outline: none;
 }
 
 levelbar > trough:disabled {
@@ -3628,25 +4031,97 @@ separator {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
+> list.content > row:not(:first-child), > list.content > row.expander row.header:not(:first-child),
+> list.boxed-list > row.expander row.header:not(:first-child), > row.expander list.nested > row:not(:first-child), > listview.boxed-list > row.expander list > row:not(:first-child),
+> list.boxed-list > row.expander list > row:not(:first-child), > listview.content:not(.conversation-listbox) > row:not(:first-child), > listview.boxed-list > row:not(:first-child),
+> list.content:not(.conversation-listbox) > row:not(:first-child),
+> list.boxed-list > row:not(:first-child) {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+list.content > row:first-child, list.content > row.expander row.header:first-child,
+list.boxed-list > row.expander row.header:first-child, row.expander list.nested > row:first-child, listview.boxed-list > row.expander list > row:first-child,
+list.boxed-list > row.expander list > row:first-child, listview.content:not(.conversation-listbox) > row:first-child, listview.boxed-list > row:first-child,
+list.boxed-list > row:first-child {
+  border-radius: 2px 2px 0 0;
+}
+
+list.content > row:last-child, list.content > row.expander row.header:last-child,
+list.boxed-list > row.expander row.header:last-child, row.expander list.nested > row:last-child, listview.boxed-list > row.expander list > row:last-child,
+list.boxed-list > row.expander list > row:last-child, listview.content:not(.conversation-listbox) > row:last-child, listview.boxed-list > row:last-child,
+list.boxed-list > row:last-child {
+  border-radius: 0 0 2px 2px;
+}
+
 listview,
 list {
   border-color: rgba(0, 0, 0, 0.12);
   background-color: #FFFFFF;
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: none;
 }
 
-listview > row,
-list > row {
-  padding: 2px;
+listview row,
+list row {
+  padding: 6px;
 }
 
-listview > row.expander,
-list > row.expander {
-  padding: 0px;
+listview.content:not(.conversation-listbox), listview.boxed-list,
+list.content:not(.conversation-listbox),
+list.boxed-list {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
 }
 
-listview > row.expander .row-header,
-list > row.expander .row-header {
-  padding: 2px;
+listview.boxed-list > row.expander list,
+list.boxed-list > row.expander list {
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+}
+
+list.frame {
+  border-radius: 3px;
+}
+
+listview.view {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: transparent;
+}
+
+popover.menu listview.view {
+  padding: 0;
+  border-radius: 3px;
+}
+
+popover.menu listview.view > row {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 3px;
+}
+
+row {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+row label.subtitle {
+  font-size: smaller;
+}
+
+row > box.header {
+  margin-left: 12px;
+  margin-right: 12px;
+  min-height: 42px;
+}
+
+row > box.header > .icon:disabled {
+  filter: opacity(0.35);
+}
+
+row > box.header > box.title {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  border-spacing: 3px;
 }
 
 columnview.view > header > button,
@@ -3657,19 +4132,113 @@ treeview.view > header > button, row.activatable {
 
 columnview.view > header > button:hover,
 treeview.view > header > button:hover, row.activatable:hover {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 columnview.view > header > button.has-open-popup,
 treeview.view > header > button.has-open-popup, columnview.view > header > button:active,
 treeview.view > header > button:active, row.activatable.has-open-popup, row.activatable:active {
-  background-color: rgba(0, 0, 0, 0.26);
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+button row.activatable:focus, button row.activatable:hover, button row.activatable:active {
+  box-shadow: none;
 }
 
 row:selected:hover {
   background-color: #5a95f5;
 }
 
+row.combo image.dropdown-arrow:disabled {
+  filter: opacity(0.35);
+}
+
+row.combo listview.inline {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: inherit;
+}
+
+row.combo listview.inline, row.combo listview.inline:disabled {
+  background: none;
+  color: inherit;
+}
+
+row.combo popover > contents {
+  min-width: 120px;
+}
+
+row.expander {
+  background: none;
+  padding: 0;
+}
+
+row.expander > box > list {
+  background: none;
+  color: inherit;
+}
+
+row.expander list.nested {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: inherit;
+}
+
+row.expander image.expander-row-arrow:dir(ltr) {
+  margin-left: 6px;
+}
+
+row.expander image.expander-row-arrow:dir(rtl) {
+  margin-right: 6px;
+}
+
+row.expander:checked image.expander-row-arrow {
+  -gtk-icon-transform: rotate(0turn);
+}
+
+row.expander:not(:checked) image.expander-row-arrow:dir(ltr) {
+  -gtk-icon-transform: rotate(-0.25turn);
+}
+
+row.expander:not(:checked) image.expander-row-arrow:dir(rtl) {
+  -gtk-icon-transform: rotate(0.25turn);
+}
+
+row.expander:checked image.expander-row-arrow:not(:disabled) {
+  color: #18b8ff;
+}
+
+.osd row.expander:checked image.expander-row-arrow:not(:disabled) {
+  color: inherit;
+}
+
+row.expander image.expander-row-arrow:disabled {
+  filter: opacity(0.35);
+}
+
+list.content > row.expander,
+list.boxed-list > row.expander {
+  border: none;
+}
+
+list.content > row:first-child, list.content > row:first-child.expander row.header,
+list.boxed-list > row:first-child,
+list.boxed-list > row:first-child.expander row.header {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
+
+list.content > row:last-child, list.content > row:last-child.expander:not(:checked), list.content > row:last-child.expander:not(:checked) row.header, list.content > row:last-child.expander:checked list.nested, list.content > row:last-child.expander:checked list.nested > row:last-child,
+list.boxed-list > row:last-child,
+list.boxed-list > row:last-child.expander:not(:checked),
+list.boxed-list > row:last-child.expander:not(:checked) row.header,
+list.boxed-list > row:last-child.expander:checked list.nested,
+list.boxed-list > row:last-child.expander:checked list.nested > row:last-child {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-bottom-width: 0;
+}
+
 columnview > listview > row {
   padding: 0;
 }
@@ -3683,7 +4252,7 @@ columnview > listview > row > cell:not(:first-child) {
 }
 
 columnview.column-separators > listview > row > cell {
-  border-left-color: #d9d9d9;
+  border-left-color: #e0e0e0;
 }
 
 columnview.data-table > listview > row > cell {
@@ -3710,7 +4279,13 @@ treeexpander {
 }
 
 .app-notification {
-  margin: 8px;
+  color: white;
+  border: none;
+  background-color: #222222;
+  border-radius: 3px;
+  padding: 6px;
+  margin: 0 6px 6px;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .app-notification.frame,
@@ -3810,61 +4385,61 @@ window.dialog.message .titlebar:backdrop {
   color: rgba(0, 0, 0, 0.6);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button {
   padding: 4px 12px;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:first-child {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button:last-child {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action {
   color: #4285F4;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action:hover {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action:hover {
   color: #4285F4;
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action:active {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   color: white;
   border-color: rgba(66, 133, 244, 0.75);
   box-shadow: inset 0 0 0 9999px rgba(66, 133, 244, 0.5);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.suggested-action:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.suggested-action:disabled {
   opacity: 0.65;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action {
   color: #FF5252;
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 600ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action:hover {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action:hover {
   color: #FF5252;
   background-color: transparent;
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action:active {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action:active {
   transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
   color: white;
   border-color: rgba(255, 82, 82, 0.75);
   box-shadow: inset 0 0 0 9999px rgba(255, 82, 82, 0.5);
 }
 
-window.dialog.message .linked.dialog-action-area:not(.vertical) > button.destructive-action:disabled {
+window.dialog.message .linked:not(.vertical).dialog-action-area > button.destructive-action:disabled {
   opacity: 0.65;
 }
 
@@ -3873,18 +4448,18 @@ window.dialog.message.csd.background {
   border-bottom-right-radius: 2px;
 }
 
-window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button {
+window.dialog.message.csd .linked:not(.vertical).dialog-action-area > button {
   padding: 8px 16px;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 0;
 }
 
-window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button:first-child {
+window.dialog.message.csd .linked:not(.vertical).dialog-action-area > button:first-child {
   border-bottom-left-radius: 2px;
   border-top-left-radius: 0;
 }
 
-window.dialog.message.csd .linked.dialog-action-area:not(.vertical) > button:last-child {
+window.dialog.message.csd .linked:not(.vertical).dialog-action-area > button:last-child {
   border-bottom-right-radius: 2px;
   border-top-right-radius: 0;
 }
@@ -3913,31 +4488,15 @@ filechooserbutton:drop(active) {
 }
 
 .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
-  border-right: 1px solid rgba(0, 0, 0, 0.12);
+  border-right: 1px solid #e0e0e0;
   border-left-style: none;
 }
 
 .sidebar.right {
-  border-left: 1px solid rgba(0, 0, 0, 0.12);
+  border-left: 1px solid #e0e0e0;
   border-right-style: none;
 }
 
-.sidebar listview.view,
-.sidebar list {
-  background-color: transparent;
-}
-
-.sidebar row {
-  transition: none;
-}
-
-.sidebar separator,
-.sidebar .separator {
-  min-height: 0;
-  border-color: transparent;
-  background-color: transparent;
-}
-
 paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
   border-style: none;
 }
@@ -3946,6 +4505,10 @@ stacksidebar list.separators:not(.horizontal) > row:not(.separator) {
   border-bottom: none;
 }
 
+leaflet.unfolded > box > stacksidebar.sidebar {
+  border: none;
+}
+
 stacksidebar row {
   padding: 12px 6px;
   transition: none;
@@ -3960,19 +4523,23 @@ separator.sidebar {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
+separator.sidebar.selection-mode, .selection-mode separator.sidebar {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
 .navigation-sidebar {
   padding: 6px 0;
 }
 
 .navigation-sidebar > separator {
-  margin: 6px;
+  margin: 6px 0;
 }
 
 .navigation-sidebar > row {
   min-height: 32px;
   padding: 0 6px;
   border-radius: 3px;
-  margin: 0 6px 2px;
+  margin: 1px 6px;
 }
 
 .navigation-sidebar > row:hover, .navigation-sidebar > row:focus-visible:focus-within {
@@ -4011,14 +4578,8 @@ placessidebar > viewport.frame {
   border-style: none;
 }
 
-placessidebar list {
-  padding: 1px 0 4px;
-}
-
 placessidebar .navigation-sidebar > row {
   min-height: 30px;
-  margin: -1px 0;
-  padding: 0;
 }
 
 placessidebar .navigation-sidebar > row > revealer {
@@ -4109,15 +4670,16 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#d9d9d9);
+  background-image: image(#e0e0e0);
   background-size: 1px 1px;
+  box-shadow: none;
 }
 
 paned > separator.wide {
   min-width: 6px;
   min-height: 6px;
   background-color: #F2F2F2;
-  background-image: image(#d9d9d9), image(#d9d9d9);
+  background-image: image(#e0e0e0), image(#e0e0e0);
   background-size: 1px 1px, 1px 1px;
 }
 
@@ -4254,25 +4816,23 @@ infobar.info button:disabled:active, infobar.question button:disabled:active, in
 }
 
 tooltip {
-  padding: 6px 10px;
-  border-radius: 3px;
+  margin: 0;
+  padding: 6px;
   box-shadow: none;
 }
 
 tooltip.background {
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: alpha(#FFFFFF, 0.9);
-}
-
-tooltip:not(.csd) {
-  border: 1px solid rgba(0, 0, 0, 0.12);
+  background-color: #222222;
+  color: white;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 4px 3px -1px rgba(0, 0, 0, 0.14), 0 1px 6px -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
   border-radius: 3px;
-  background-clip: padding-box;
+  margin: 0 6px 8px 6px;
+  border: none;
 }
 
 tooltip label {
   min-height: 20px;
-  padding: 0 2px;
+  padding: 0 3px;
 }
 
 tooltip > box {
@@ -4339,11 +4899,11 @@ colorswatch:drop(active) {
   box-shadow: none;
 }
 
-colorswatch.light:drop(active) overlay {
+colorswatch:drop(active).light overlay {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), 0 0 0 2px #18b8ff;
 }
 
-colorswatch.dark:drop(active) overlay {
+colorswatch:drop(active).dark overlay {
   box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.22), 0 1px 2px -0.6px rgba(0, 0, 0, 0.12), 0 0 0 2px #18b8ff;
 }
 
@@ -4426,11 +4986,12 @@ colorchooser .popover.osd:backdrop {
 
 window {
   border: none;
+  outline: none;
 }
 
 window.csd {
   transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
-  border-radius: 3px 3px 0 0;
+  border-radius: 3px;
   box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 16px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 16px 2px rgba(0, 0, 0, 0), 0 6px 18px 5px rgba(0, 0, 0, 0);
   margin: 0;
 }
@@ -4455,7 +5016,7 @@ window.csd.solid-csd {
   border: 1px solid #1d1d1d;
   border-radius: 0;
   box-shadow: inset 0 0 0 2px #363636, inset 0 1px rgba(255, 255, 255, 0.1);
-  background-color: #d9d9d9;
+  background-color: #e0e0e0;
 }
 
 window.maximized, window.fullscreen, window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom {
@@ -4737,8 +5298,7 @@ shortcuts-section {
   font: initial;
 }
 
-button.close, button.round-button, button.circular, dropdown > .linked:not(.vertical) > button.combo:not(:only-child),
-combobox > .linked:not(.vertical) > button.combo:not(:only-child), check,
+button.close, button.round-button, button.circular, menubutton.circular > button, check,
 radio {
   border-radius: 100px;
 }
@@ -4871,6 +5431,166 @@ statusbar {
   padding: 6px 10px;
 }
 
+avatar {
+  border-radius: 9999px;
+  font-weight: bold;
+}
+
+avatar.color1 {
+  background-image: linear-gradient(#83b6ec, #337fdc);
+  color: #cfe1f5;
+}
+
+avatar.color2 {
+  background-image: linear-gradient(#7ad9f1, #0f9ac8);
+  color: #caeaf2;
+}
+
+avatar.color3 {
+  background-image: linear-gradient(#8de6b1, #29ae74);
+  color: #cef8d8;
+}
+
+avatar.color4 {
+  background-image: linear-gradient(#b5e98a, #6ab85b);
+  color: #e6f9d7;
+}
+
+avatar.color5 {
+  background-image: linear-gradient(#f8e359, #d29d09);
+  color: #f9f4e1;
+}
+
+avatar.color6 {
+  background-image: linear-gradient(#ffcb62, #d68400);
+  color: #ffead1;
+}
+
+avatar.color7 {
+  background-image: linear-gradient(#ffa95a, #ed5b00);
+  color: #ffe5c5;
+}
+
+avatar.color8 {
+  background-image: linear-gradient(#f78773, #e62d42);
+  color: #f8d2ce;
+}
+
+avatar.color9 {
+  background-image: linear-gradient(#e973ab, #e33b6a);
+  color: #fac7de;
+}
+
+avatar.color10 {
+  background-image: linear-gradient(#cb78d4, #9945b5);
+  color: #e7c2e8;
+}
+
+avatar.color11 {
+  background-image: linear-gradient(#9e91e8, #7a59ca);
+  color: #d5d2f5;
+}
+
+avatar.color12 {
+  background-image: linear-gradient(#e3cf9c, #b08952);
+  color: #f2eade;
+}
+
+avatar.color13 {
+  background-image: linear-gradient(#be916d, #785336);
+  color: #e5d6ca;
+}
+
+avatar.color14 {
+  background-image: linear-gradient(#c0bfbc, #6e6d71);
+  color: #d8d7d3;
+}
+
+avatar.contrasted {
+  color: white;
+}
+
+avatar.image {
+  background: none;
+}
+
+preferencespage > scrolledwindow > viewport > clamp > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+preferencesgroup > box, preferencesgroup > box .labels {
+  border-spacing: 6px;
+}
+
+preferencesgroup > box > box.header:not(.single-line) {
+  margin-bottom: 6px;
+}
+
+preferencesgroup > box > box.single-line {
+  min-height: 34px;
+}
+
+statuspage > scrolledwindow > viewport > box {
+  margin: 36px 12px;
+  border-spacing: 36px;
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box {
+  border-spacing: 12px;
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon {
+  -gtk-icon-size: 128px;
+  color: alpha(currentColor, 0.55);
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:disabled {
+  opacity: 0.35;
+}
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) {
+  margin-bottom: 24px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon {
+  -gtk-icon-size: 96px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) {
+  margin-bottom: 12px;
+}
+
+statuspage.compact > scrolledwindow > viewport > box > clamp > box > .title {
+  font-size: 18pt;
+}
+
+.card {
+  background-color: white;
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
+}
+
+.osd .card, .card.osd {
+  background-color: alpha(currentColor, 0.1);
+  color: inherit;
+  box-shadow: none;
+}
+
+.card.activatable:hover {
+  background-image: image(alpha(currentColor, 0.03));
+}
+
+.card.activatable:active {
+  background-image: image(alpha(currentColor, 0.08));
+}
+
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */