diff --git a/src/main/gtk-4.0/gtk-Dark.scss b/src/main/gtk-4.0/gtk-Dark.scss
index 0ff3129..ebe091e 100644
--- a/src/main/gtk-4.0/gtk-Dark.scss
+++ b/src/main/gtk-4.0/gtk-Dark.scss
@@ -6,3 +6,4 @@ $variant: 'dark';
 @import '../../sass/gtk/common-4.0';
 @import '../../sass/gtk/apps-4.0';
 @import '../../sass/gtk/colors-public';
+@import '../../sass/gtk/colors-libadwaita';
diff --git a/src/main/gtk-4.0/gtk-Light.scss b/src/main/gtk-4.0/gtk-Light.scss
index 6b0bca3..95f400b 100644
--- a/src/main/gtk-4.0/gtk-Light.scss
+++ b/src/main/gtk-4.0/gtk-Light.scss
@@ -6,3 +6,4 @@ $variant: 'light';
 @import '../../sass/gtk/common-4.0';
 @import '../../sass/gtk/apps-4.0';
 @import '../../sass/gtk/colors-public';
+@import '../../sass/gtk/colors-libadwaita';
diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss
index bc2ea41..1415aa5 100644
--- a/src/sass/_colors.scss
+++ b/src/sass/_colors.scss
@@ -26,6 +26,11 @@ $hint_fg_color:                     if($variant == 'light', #565656, #999999);
   $hint_fg_color:                   if($variant == 'light', #495265, #8994a9);
 }
 
+//insensitive state derived colors
+$disabled_fg_color:                 if($variant == 'light', transparentize($fg_color, 0.55), transparentize($fg_color, 0.65));
+$alt_disabled_fg_color:             if($variant == 'light', transparentize($alt_fg_color, 0.55), transparentize($alt_fg_color, 0.65));
+$disabled_bg_color:                 if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
+
 $track_color:                       if($variant == 'light', rgba(black, 0.20), rgba(white, 0.16));
 $visit_color:                       if($variant == 'light', rgba(black, 0.16), rgba(white, 0.12));
 $divider_color:                     if($variant == 'light', rgba(black, 0.12), rgba(white, 0.1));
@@ -113,11 +118,6 @@ $suggested_color:                   if($colorscheme == 'nord', $nord_color_blue,
 $progress_color:                    $selected_bg_color;
 $drop_target_color:                 if($colorscheme == 'nord', $nord_color_orange, $theme_color_orange);
 
-//insensitive state derived colors
-$disabled_fg_color:                 if($variant == 'light', transparentize($fg_color, 0.55), transparentize($fg_color, 0.65));
-$alt_disabled_fg_color:             if($variant == 'light', transparentize($alt_fg_color, 0.55), transparentize($alt_fg_color, 0.65));
-$disabled_bg_color:                 if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
-
 // Headerbar colors
 $header_bg:                         if($variant == 'light', #ffffff, if($darker == 'true', #1e1e1e, #373737));
 $header_highlight:                  if($variant == 'dark', if($darker == 'true', #242424, #434343), #f5f5f5); // For metacity
diff --git a/src/sass/gtk/_colors-libadwaita.scss b/src/sass/gtk/_colors-libadwaita.scss
new file mode 100644
index 0000000..6aa0c8a
--- /dev/null
+++ b/src/sass/gtk/_colors-libadwaita.scss
@@ -0,0 +1,159 @@
+$blue_1: #99c1f1;
+$blue_2: #62a0ea;
+$blue_3: #3584e4;
+$blue_4: #1c71d8;
+$blue_5: #1a5fb4;
+$green_1: #8ff0a4;
+$green_2: #57e389;
+$green_3: #33d17a;
+$green_4: #2ec27e;
+$green_5: #26a269;
+$yellow_1: #f9f06b;
+$yellow_2: #f8e45c;
+$yellow_3: #f6d32d;
+$yellow_4: #f5c211;
+$yellow_5: #e5a50a;
+$orange_1: #ffbe6f;
+$orange_2: #ffa348;
+$orange_3: #ff7800;
+$orange_4: #e66100;
+$orange_5: #c64600;
+$red_1: #f66151;
+$red_2: #ed333b;
+$red_3: #e01b24;
+$red_4: #c01c28;
+$red_5: #a51d2d;
+$purple_1: #dc8add;
+$purple_2: #c061cb;
+$purple_3: #9141ac;
+$purple_4: #813d9c;
+$purple_5: #613583;
+$brown_1: #cdab8f;
+$brown_2: #b5835a;
+$brown_3: #986a44;
+$brown_4: #865e3c;
+$brown_5: #63452c;
+$light_1: #ffffff;
+$light_2: #f6f5f4;
+$light_3: #deddda;
+$light_4: #c0bfbc;
+$light_5: #9a9996;
+$dark_1: #77767b;
+$dark_2: #5e5c64;
+$dark_3: #3d3846;
+$dark_4: #241f31;
+$dark_5: #000000;
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using #{$var}.
+
+@define-color blue_1 #{$blue_1};
+@define-color blue_2 #{$blue_2};
+@define-color blue_3 #{$blue_3};
+@define-color blue_4 #{$blue_4};
+@define-color blue_5 #{$blue_5};
+@define-color green_1 #{$green_1};
+@define-color green_2 #{$green_2};
+@define-color green_3 #{$green_3};
+@define-color green_4 #{$green_4};
+@define-color green_5 #{$green_5};
+@define-color yellow_1 #{$yellow_1};
+@define-color yellow_2 #{$yellow_2};
+@define-color yellow_3 #{$yellow_3};
+@define-color yellow_4 #{$yellow_4};
+@define-color yellow_5 #{$yellow_5};
+@define-color orange_1 #{$orange_1};
+@define-color orange_2 #{$orange_2};
+@define-color orange_3 #{$orange_3};
+@define-color orange_4 #{$orange_4};
+@define-color orange_5 #{$orange_5};
+@define-color red_1 #{$red_1};
+@define-color red_2 #{$red_2};
+@define-color red_3 #{$red_3};
+@define-color red_4 #{$red_4};
+@define-color red_5 #{$red_5};
+@define-color purple_1 #{$purple_1};
+@define-color purple_2 #{$purple_2};
+@define-color purple_3 #{$purple_3};
+@define-color purple_4 #{$purple_4};
+@define-color purple_5 #{$purple_5};
+@define-color brown_1 #{$brown_1};
+@define-color brown_2 #{$brown_2};
+@define-color brown_3 #{$brown_3};
+@define-color brown_4 #{$brown_4};
+@define-color brown_5 #{$brown_5};
+@define-color light_1 #{$light_1};
+@define-color light_2 #{$light_2};
+@define-color light_3 #{$light_3};
+@define-color light_4 #{$light_4};
+@define-color light_5 #{$light_5};
+@define-color dark_1 #{$dark_1};
+@define-color dark_2 #{$dark_2};
+@define-color dark_3 #{$dark_3};
+@define-color dark_4 #{$dark_4};
+@define-color dark_5 #{$dark_5};
+
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using #{$var}.
+
+// These are the colors apps are can override. We define the defaults here and
+// define variables for them in _colors.scss
+
+// The main accent color and the matching text value
+@define-color accent_bg_color #{$primary_color};
+@define-color accent_fg_color #{$light_fg_color};
+@define-color accent_color #{$primary_color};
+
+// destructive-action buttons
+@define-color destructive_bg_color #{$destructive_color};
+@define-color destructive_fg_color #{$light_fg_color};
+@define-color destructive_color #{$destructive_color};
+
+// Levelbars, entries, labels and infobars. These don't need text colors
+@define-color success_bg_color #{$success_color};
+@define-color success_fg_color #{$light_fg_color};
+@define-color success_color #{$success_color};
+
+@define-color warning_bg_color #{$warning_color};
+@define-color warning_fg_color #{$light_fg_color};
+@define-color warning_color #{$warning_color};
+
+@define-color error_bg_color #{$error_color};
+@define-color error_fg_color #{$light_fg_color};
+@define-color error_color #{$error_color};
+
+// Window
+@define-color window_bg_color #{$bg_color};
+@define-color window_fg_color #{$text_color};
+
+// Views - e.g. text view or tree view
+@define-color view_bg_color #{$base_color};
+@define-color view_fg_color #{$text_color};
+
+// Header bar, search bar, tab bar
+@define-color headerbar_bg_color #{$header_bg};
+@define-color headerbar_fg_color #{$header_fg};
+@define-color headerbar_border_color #{$borders_color};
+@define-color headerbar_backdrop_color #{$header_bg_backdrop};
+@define-color headerbar_shade_color #{$header_border};
+
+// Cards, boxed lists
+@define-color card_bg_color #{$base_color};
+@define-color card_fg_color #{$text_color};
+@define-color card_shade_color #{$borders_color};
+
+// Dialogs
+@define-color dialog_bg_color #{$dialog_bg_color};
+@define-color dialog_fg_color #{$text_color};
+
+// Popovers
+@define-color popover_bg_color #{$menu_bg};
+@define-color popover_fg_color #{$text_color};
+
+// Miscellaneous
+@define-color shade_color #{$borders_color};
+@define-color scrollbar_outline_color #{$borders_color};
diff --git a/src/sass/gtk/apps/_gnome-40.0.scss b/src/sass/gtk/apps/_gnome-40.0.scss
index 92e87fe..15af25c 100644
--- a/src/sass/gtk/apps/_gnome-40.0.scss
+++ b/src/sass/gtk/apps/_gnome-40.0.scss
@@ -412,13 +412,714 @@ menubutton.flat.popup.sources-button {
 }
 
 //
-// Weather
+// Gnome Weather
 //
 
-.small .forecast-card {
+@define-color weather_temp_chart_fill_color #{rgba($warning_color, 0.5)};
+@define-color weather_temp_chart_stroke_color #{darken($warning_color, 10%)};
+@define-color weather_thermometer_warm_color #{$theme_color_yellow};
+@define-color weather_thermometer_cold_color #{$theme_color_blue};
+
+$weather_thermometer_high_color: $theme_color_yellow;
+$weather_thermometer_low_color: $theme_color_blue;
+$weather_forecast_color: #ae7b03;
+
+#places-label {
+  font-weight: bold;
+}
+
+#temperature-label {
+  font-size: 32pt;
+  font-weight: 900;
+  margin-left: 9px;
+}
+
+#conditions-grid *:backdrop {
+  color: $alt_fg_color;
+}
+
+.content-view.cell {
+  font-weight: bold;
+}
+
+#locationEntry {
+  margin: $container_padding;
+}
+
+.weather-popover {
+  margin-top: $container_padding;
+}
+
+.forecast-card {
+  transition: border-radius 100ms ease-out;
+  border-radius: $bt_radius;
+}
+
+.forecast-card separator {
+  background-color: $borders_color;
+}
+
+#daily-forecast-box {
+  > separator:last-child {
+    background-color: transparent;
+    min-width: 0;
+  }
+}
+
+#conditions-grid,
+#attributionGrid {
+  margin-left: $container_padding * 3;
+  margin-right: $container_padding * 3;
+}
+
+#weather-page .small .forecast-card {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0;
   border-width: 1px 0;
 }
 
+.forecast-temperature-label {
+  font-weight: bold;
+  color: $weather_forecast_color;
+}
+
+WeatherThermometer {
+  margin-bottom: $container_padding * 2;
+}
+
+WeatherThermometer > label.high {
+  font-weight: bold;
+  color: $weather_thermometer_high_color;
+}
+
+WeatherThermometer > label.low {
+  font-weight: bold;
+  color: $weather_thermometer_low_color;
+}
+
+.forecast-button {
+  margin: 0 $container_padding * 2;
+
+  > button.image-button {
+    min-height: 28px;
+    min-width: 28px;
+    padding: 0;
+    border-radius: $circular_radius;
+  }
+}
+
+.forecast-graphic {
+  margin: $container_padding * 3;
+}
+
+button.osd.circular > image {
+  padding: 0;
+}
+
+scrolledwindow.inline list,
+scrolledwindow.inline listview {
+  background: none;
+  color: inherit;
+}
+
+scrolledwindow.inline undershoot.top {
+  box-shadow: inset 0 1px $borders_color;
+}
+
+.search-view {
+  background-color: $primary_color;
+  color: $light_fg_color;
+}
+
+.search-view menubutton button:focus:focus-visible {
+  outline-color: rgba(white, 0.3);
+}
+
+image.circular {
+  min-width: $medium_size;
+  min-height: $medium_size;
+  padding: 0;
+  border-radius: $circular_radius;
+}
+
+//
+// Gnome Software
+//
+
+.details-page {
+  margin: $container_padding * 4 0px;
+}
+
+.installed-overlay-box {
+  font-size: smaller;
+  background-color: $primary_color;
+  border-radius: 0;
+  color: $light_fg_color;
+  text-shadow: 0 1px 0 rgba(black, 0.2);
+}
+
+screenshot-carousel box.frame {
+  border-width: 1px 0;
+  border-radius: 0;
+}
+
+screenshot-carousel button,
+.featured-carousel button {
+  margin: $container_padding * 2;
+}
+
+.screenshot-image-main .image1,
+.screenshot-image-main .image2 {
+  margin-top: $container_padding;
+  margin-bottom: $container_padding * 2;
+  margin-left: $container_padding;
+  margin-right: $container_padding;
+}
+
+.app-tile-label {
+  font-size: 105%;
+}
+
+.review-textbox {
+  padding: $container_padding;
+}
+
+.origin-rounded-box {
+  background-color: $divider_color;
+  border-radius: $circular_radius;
+  padding: $container_padding - 2px;
+}
+
+.origin-beta {
+  color: $warning_color;
+}
+
+.origin-button > button {
+  padding: $container_padding / 2 $container_padding * 1.5;
+}
+
+flowboxchild.card {
+  padding: 0;
+  border: none;
+  box-shadow: none;
+  background: none;
+}
+
+button.card.category-tile {
+  padding: $container_padding * 3.5;
+  border: none;
+  border-radius: $bt_radius;
+  min-width: 140px;
+  font-weight: 900;
+  font-size: larger;
+
+  &.category-tile-iconless {
+    padding: $container_padding * 1.5 $container_padding * 2.5;
+    min-width: 130px;
+    font-size: 105%;
+    font-weight: normal;
+  }
+
+  // Styling for specific category buttons.
+  &.category-create {
+    background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-develop {
+    background: #5e5c64;
+    color: white;
+
+    &:hover {
+      background: shade(#5e5c64, 1.2);
+      color: white;
+    }
+
+    &:active {
+      background-color: shade(#5e5c64, .95);
+      color: white;
+    }
+  }
+
+  &.category-learn {
+    background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-play {
+    background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
+    color: #393484;
+
+    &:hover {
+      background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+
+    &:active {
+      background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+  }
+
+  &.category-socialize {
+    background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
+    color: $alt_fg_color;
+
+    &:hover {
+      background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
+    }
+
+    &:active {
+      background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
+    }
+  }
+
+  &.category-work {
+    padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
+    color: #1c71d8;
+    background-color:#fdf8d7;
+    background-image: linear-gradient($borders_color 1px, transparent 1px),
+             linear-gradient(90deg, $borders_color 1px, transparent 1px);
+    background-size: 10px 10px, 10px 10px;
+    background-position: -1px -4px, center -1px;
+
+    &:hover {
+      color: #1c71d8;
+      background-color: lighten(#fdf8d7, 5%);
+      background-image: linear-gradient($borders_color 1px, transparent 1px),
+               linear-gradient(90deg, $borders_color 1px, transparent 1px);
+    }
+
+    &:active {
+      color: #1c71d8;
+      background-color: darken(#fdf8d7, 5%);
+      background-image: linear-gradient($borders_color 1px, transparent 1px),
+               linear-gradient(90deg, $borders_color 1px, transparent 1px);
+    }
+  }
+}
+
+clamp.medium .category-tile:not(.category-tile-iconless),
+clamp.large .category-tile:not(.category-tile-iconless) {
+  font-size: larger;
+}
+
+// The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c
+.featured-tile {
+  all: unset;
+  padding: 0;
+  box-shadow: none;
+  color: $fg_color;
+
+  label.title-1 {
+    margin-top: $container_padding;
+    margin-bottom: $container_padding;
+  }
+
+  &.narrow label.title-1 {
+    font-size: 16pt;
+  }
+}
+
+.application-details-infobar {
+  &, &.info {
+    background-color: $fill_color;
+    color: $fg_color;
+    border: 1px solid $borders_color;
+  }
+
+  &.warning {
+    background-color: $warning_color;
+    color: $light_fg_color;
+    border: 1px solid $divider_color;
+  }
+}
+
+@keyframes install-progress-unknown-move {
+  0% { background-position: 0%; }
+  50% { background-position: 100%; }
+  100% { background-position: 0%; }
+}
+
+.application-details-description .button {
+  padding-left: $container_padding * 4;
+  padding-right: $container_padding * 4;
+}
+
+.install-progress {
+  background-image: linear-gradient(to top, $primary_color 2px, gtkalpha($primary_color, 0) 2px);
+  background-repeat: no-repeat;
+  background-position: 0 bottom;
+  background-size: 0;
+  transition: none;
+}
+
+.install-progress:dir(rtl) { background-position: 100% bottom; }
+
+.review-row > * {
+  margin: $container_padding * 2;
+}
+
+.review-row button { font-size: smaller; }
+
+.review-row .vote-buttons button {
+  margin-right: -1px;
+}
+
+// this is the separator between yes and no vote buttons, gtk+ 3.20 only
+.review-row .vote-buttons button:not(:first-child) {
+  border-image: linear-gradient(to top, $borders_color, $borders_color) 0 0 0 1 / 5px 0 5px 1px;
+}
+
+.review-row .vote-buttons button:hover,
+.review-row .vote-buttons button:active,
+.review-row .vote-buttons button:hover + button,
+.review-row .vote-buttons button:active + button {
+  border-image: none;
+}
+
+review-bar {
+  color: $disabled_fg_color;
+  background-image: none;
+  background-color: $track_color;
+}
+
+.review-histogram star-image {
+  color: $disabled_fg_color;
+}
+
+.version-arrow-label {
+  font-size: x-small;
+}
+
+.overview-more-button {
+  font-size: smaller;
+  padding: 0 $container_padding * 2 + 4px;
+}
+
+.app-row-origin-text {
+  font-size: smaller;
+}
+
+.app-listbox-header {
+  padding: $container_padding;
+  border-bottom: 1px solid $borders_color;
+}
+
+.image-list {
+  background-color: transparent;
+}
+
+box.star {
+  background-color: transparent;
+  background-image: none;
+}
+
+button.star {
+  outline-offset: 0;
+  background-color: transparent;
+  background-image: none;
+  border-image: none;
+  border-radius: 0;
+  border-width: 0;
+  padding: 0;
+  box-shadow: none;
+  outline-offset: -1px;
+}
+
+star-image {
+  color: $theme_color_yellow;
+}
+
+.dimmer-label {
+  opacity: 0.25;
+}
+
+.update-failed-details {
+  font-family: Monospace;
+  font-size: smaller;
+  padding: $container_padding * 2 + 4px;
+}
+
+.upgrade-banner {
+  padding: 0px;
+  border-radius: $bt_radius;
+  border: none;
+}
+
+.upgrade-banner-background {
+  background: linear-gradient(to bottom, $success_color, $suggested_color);
+  color: white;
+}
+
+.upgrade-buttons #button_upgrades_install {
+  padding-left: $container_padding * 2 + 4px;
+  padding-right: $container_padding * 2 + 4px;
+}
+
+scrolledwindow.list-page > viewport > clamp > box {
+  margin: $container_padding * 4 $container_padding * 2;
+  border-spacing: $container_padding * 4;
+}
+
+.update-preferences preferencesgroup > box > box {
+  margin-top: $container_padding * 3;
+}
+
+.section > label:not(:first-child) { margin-top: $container_padding; }
+
+.section > box:not(:first-child) { margin-top: $container_padding * 2; }
+
+clamp.status-page {
+	margin: $container_padding * 6 $container_padding * 2;
+}
+
+clamp.status-page .iconbox {
+  min-height: 128px;
+  min-width: 128px;
+}
+
+clamp.status-page .icon {
+  color: $disabled_fg_color;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+clamp.status-page .icon:not(:last-child) {
+  margin-bottom: $container_padding * 6;
+}
+
+clamp.status-page .title:not(:last-child) {
+  margin-bottom: $container_padding * 2;
+}
+
+app-context-bar {
+  .context-tile {
+    border: 1px solid $borders_color;
+    background-color: transparent;
+    border-radius: 0;
+    padding: $container_padding * 4 $container_padding * 2 $container_padding * 3.5 $container_padding * 2;
+    outline-offset: 5px;
+    transition-property: outline, outline-offset, background-image;
+    border-bottom: none;
+    border-right: none;
+
+    &:hover {
+      background-image: none;
+      background-color: $divider_color;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: $track_color;
+    }
+
+    &:focus:focus-visible {
+      outline-offset: -1px;
+    }
+  }
+
+  &.horizontal box:first-child .context-tile:first-child,
+  &.vertical .context-tile:first-child {
+    border-left: none;
+  }
+
+  &.horizontal .context-tile,
+  &.vertical box:first-child .context-tile {
+  	border-top: none;
+  }
+
+  > box:not(:first-child) > button.flat {
+    border-radius: 0;
+
+    &:last-child {
+      border-radius: 0 $bt_radius $bt_radius 0;
+    }
+  }
+
+  > box:first-child > button.flat {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: $bt_radius 0 0 $bt_radius;
+    }
+  }
+
+  > box > button.flat {
+    border-left-color: $borders_color;
+  }
+}
+
+carousel.card {
+  border: none;
+  background-color: $fill_color;
+}
+
+.context-tile-lozenge {
+  min-height: 28px;
+  min-width: 28px;
+  padding: $container_padding;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: $circular_radius;
+
+  &.large {
+    font-size: 24px;
+    padding: 16px;
+    min-width: 24px;  /* 60px minus the left and right padding */
+    min-height: 24px;  /* 60px minus the top and bottom padding */
+  }
+
+  &.wide-image image {
+    margin-top: -28px;
+    margin-bottom: -28px;
+  }
+
+  image { -gtk-icon-style: symbolic; }
+
+  &.grey {
+    color: $fg_color;
+    background-color: $divider_color;
+  }
+
+  &.green, &.details-rating-0 {
+    color: darken($theme_color_green, 15%);
+    background-color: rgba($theme_color_green, 0.15);
+  }
+
+  &.blue,
+  &.details-rating-5 {
+    color: $theme_color_blue;
+    background-color: rgba($theme_color_blue, 0.15);
+  }
+
+  &.yellow, &.details-rating-12 {
+    color: darken($theme_color_yellow, 15%);
+    background-color: rgba($theme_color_yellow, 0.15);
+  }
+
+  &.details-rating-15 {
+    color: $theme_color_orange;
+    background-color: rgba($theme_color_orange, .15);
+  }
+
+  &.red, &.details-rating-18 {
+    color: darken($theme_color_red, 15%);
+    background-color: rgba($theme_color_red, 0.15);
+  }
+}
+
+.eol-red {
+  font-weight: bold;
+  color: $error_color;
+}
+
+window.narrow .app-title {
+  font-size: 16pt;
+}
+
+window.narrow .app-developer {
+  font-size: small;
+}
+
+.install-progress-label {
+  font-size: smaller;
+  font-feature-settings: "tnum";
+}
+
+scrolledwindow.fake-adw-status-page > viewport > box { margin: $container_padding * 6 $container_padding * 2; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $container_padding * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $container_padding * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $container_padding * 2; }
+
+statuspage.icon-dropshadow image.icon {
+	-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+	                  0 -1px rgba(0,0,0,0.05),
+	                  1px 0 rgba(0,0,0,0.1),
+	                  0 1px rgba(0,0,0,0.3),
+	                  -1px 0 rgba(0,0,0,0.1);
+}
+
+window.info scrollbar.vertical {
+  margin-top: 48px;
+  background: none;
+  box-shadow: none;
+}
+
+window.info scrollbar.vertical trough {
+  margin-top: 0;
+}
+
+// GsAppRow
+row.app > box.header {
+  margin-left: $container_padding * 2;
+  margin-right: $container_padding * 2;
+}
+
+row.app > box.header {
+  border-spacing: $container_padding * 2;
+}
+
+row.app > box.header > image {
+  margin-top: $container_padding * 2;
+  margin-bottom: $container_padding * 2;
+}
+
+row.app label.warning {
+  color: $warning_color;
+}
+
+// GtkSpinner
+
+// Ensure the spinner is hidden before the animation is triggered.
+@keyframes pre-delay {
+  from { opacity: 0; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { filter: opacity(0%); }
+}
+
+/* Give a fade-in animation to spinners. */
+spinner.fade-in:checked {
+  animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
+  animation-delay: 0s, 0.5s, 0.5s;
+}
+
+// Leaflets
+window > contents > leaflet { // Gnome control center
+  > box > stack.background {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      transparent,
+                                      transparent $large_size,
+                                      $bg_color $large_size,
+                                      $bg_color);
+  }
+}
+
 //
 // Misc (other)
 //