From 7538163d37f13d95200e9b3181ce3a31ace894ec Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Fri, 11 Apr 2025 14:44:01 +0800
Subject: [PATCH] Fixed gnome-shell 48 issues

---
 install.sh                                    |  16 +-
 src/sass/gnome-shell/_common.scss             |  20 +-
 src/sass/gnome-shell/_drawing.scss            |  26 +-
 src/sass/gnome-shell/_variables.scss          |   2 +-
 src/sass/gnome-shell/_widgets-48-0.scss       |  49 +++
 src/sass/gnome-shell/common/_buttons.scss     |   3 +-
 .../extensions-40-0/_dash-to-dock.scss        |   2 +-
 .../extensions-46-0/_dash-to-dock.scss        |   4 +-
 .../widgets-46-0/_quick-settings.scss         |  10 +-
 .../gnome-shell/widgets-47-0/_dialogs.scss    |   4 +-
 .../widgets-48-0/_message-list.scss           | 269 ++++++++++++++++
 .../widgets-48-0/_notifications.scss          |  62 ++++
 .../widgets-48-0/_quick-settings.scss         | 290 ++++++++++++++++++
 13 files changed, 713 insertions(+), 44 deletions(-)
 create mode 100644 src/sass/gnome-shell/_widgets-48-0.scss
 create mode 100644 src/sass/gnome-shell/widgets-48-0/_message-list.scss
 create mode 100644 src/sass/gnome-shell/widgets-48-0/_notifications.scss
 create mode 100644 src/sass/gnome-shell/widgets-48-0/_quick-settings.scss

diff --git a/install.sh b/install.sh
index 5c4d0f43..e86c41ad 100755
--- a/install.sh
+++ b/install.sh
@@ -37,23 +37,17 @@ SIZE_VARIANTS=('' '-Compact')
 
 if [[ "$(command -v gnome-shell)" ]]; then
   echo && gnome-shell --version
+
   SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)"
-  if [[ "${SHELL_VERSION:-}" -ge "47" ]]; then
-    GS_VERSION="47-0"
-  elif [[ "${SHELL_VERSION:-}" -ge "46" ]]; then
-    GS_VERSION="46-0"
-  elif [[ "${SHELL_VERSION:-}" -ge "44" ]]; then
-    GS_VERSION="44-0"
-  elif [[ "${SHELL_VERSION:-}" -ge "42" ]]; then
-    GS_VERSION="42-0"
-  elif [[ "${SHELL_VERSION:-}" -ge "40" ]]; then
-    GS_VERSION="40-0"
+
+  if [[ "${SHELL_VERSION:-}" -ge "40" ]]; then
+    GS_VERSION="${SHELL_VERSION}-0"
   else
     GS_VERSION="3-28"
   fi
 else
   echo "'gnome-shell' not found, using styles for last gnome-shell version available."
-  GS_VERSION="47-0"
+  GS_VERSION="48-0"
 fi
 
 usage() {
diff --git a/src/sass/gnome-shell/_common.scss b/src/sass/gnome-shell/_common.scss
index dc97dc48..251878e3 100644
--- a/src/sass/gnome-shell/_common.scss
+++ b/src/sass/gnome-shell/_common.scss
@@ -29,51 +29,51 @@ stage {
   color: $text;
 }
 
-/* General Typography */
 
+/* General Typography */
 %large_title {
   font-weight: 300;
-  @include fontsize(24);
+  @include fontsize(24pt);
 }
 
 %title_1 {
   font-weight: 800;
-  @include fontsize(20);
+  @include fontsize(20pt);
 }
 
 %title_2 {
   font-weight: 800;
-  @include fontsize(15);
+  @include fontsize(15pt);
 }
 
 %title_3 {
   font-weight: 700;
-  @include fontsize(15);
+  @include fontsize(15pt);
 }
 
 %title_4 {
   font-weight: 700;
-  @include fontsize(13);
+  @include fontsize(13pt);
 }
 
 %heading {
   font-weight: 700;
-  @include fontsize(11);
+  @include fontsize(11pt);
 }
 
 %caption_heading {
   font-weight: 700;
-  @include fontsize(9);
+  @include fontsize(9pt);
 }
 
 %caption {
   font-weight: 400;
-  @include fontsize(9);
+  @include fontsize(9pt);
 }
 
 %smaller {
   font-weight: 400;
-  @include fontsize(8);
+  @include fontsize(9pt);
 }
 
 %monospace {font-family: monospace;}
diff --git a/src/sass/gnome-shell/_drawing.scss b/src/sass/gnome-shell/_drawing.scss
index 54f6d2ee..f82b22fe 100644
--- a/src/sass/gnome-shell/_drawing.scss
+++ b/src/sass/gnome-shell/_drawing.scss
@@ -1,7 +1,11 @@
 
-// provide font size in rem, with px fallback
-@mixin fontsize($size: 24, $base: 16) {
-  font-size: round($size) + pt;
+// Mixin to convert provided font size in pt to em units
+@mixin fontsize($size, $base: 16px, $unit: pt) {
+  // if pt, convert into unitless value with the assumption: 1pt = 1.091px
+  $adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
+  $rounded_size: round($adjusted_size / $base) / 1000;
+  font-size: $rounded_size * 1em;
+  // font-size: round($size) + pt;
 }
 
 @mixin entry($t, $fc: $primary, $tc: $text, $bc: $fill) {
@@ -72,26 +76,26 @@
 
   @if $t == normal {
     color: $tc;
-    background-color: $bc;
+    background-color: rgba($tc, 0.05);
     box-shadow: none !important;
   }
 
   @if $t == focus {
     color: $tc;
     box-shadow: none !important;
-    background-color: if($bc == $primary, rgba(white, 0.08), overlay($bc, focus));
+    background-color: if($bc == $primary, rgba(white, 0.08), rgba($tc, 0.08));
   }
 
   @if $t == hover {
     color: $tc;
     box-shadow: none !important;
-    background-color: if($bc == $primary, rgba(white, 0.08), overlay($bc, hover));
+    background-color: if($bc == $primary, rgba(white, 0.1), rgba($tc, 0.1));
   }
 
   @if $t == active {
     color: $tc;
     box-shadow: none !important;
-    background-color: if($bc == $primary, rgba(white, 0.12), overlay($bc, active));
+    background-color: if($bc == $primary, rgba(white, 0.18), rgba($tc, 0.18));
   }
 
   @if $t == checked {
@@ -102,7 +106,7 @@
 
   @if $t == insensitive {
     color: rgba($tc, 0.35);
-    background-color: $bc;
+    background-color: rgba($tc, 0.02);
     box-shadow: none !important;
   }
 
@@ -114,18 +118,18 @@
 
   @if $t == flat-focus {
     color: $tc;
-    background-color: overlay($bc, focus);
+    background-color: rgba($tc, 0.08);
     box-shadow: none !important;
   }
 
   @if $t == flat-hover {
     color: $tc;
-    background-color: overlay($bc, hover);
+    background-color: rgba($tc, 0.1);
   }
 
   @if $t == flat-active {
     color: $tc;
-    background-color: overlay($bc, active);
+    background-color: rgba($tc, 0.18);
     box-shadow: none !important;
   }
 
diff --git a/src/sass/gnome-shell/_variables.scss b/src/sass/gnome-shell/_variables.scss
index d064ea67..3e648ca8 100644
--- a/src/sass/gnome-shell/_variables.scss
+++ b/src/sass/gnome-shell/_variables.scss
@@ -12,7 +12,7 @@ $asset_suffix: if($variant == 'dark', '-dark', '');
 
 // sizes
 $item_size: if($compact == 'false', 32px, 28px);
-$font_size: if($compact == 'false', 11, 10);
+$font_size: if($compact == 'false', 11pt, 10pt);
 
 // padding, margin and spacing
 $base_padding: if($compact == 'false', 6px, 4px);
diff --git a/src/sass/gnome-shell/_widgets-48-0.scss b/src/sass/gnome-shell/_widgets-48-0.scss
new file mode 100644
index 00000000..bb17aeaa
--- /dev/null
+++ b/src/sass/gnome-shell/_widgets-48-0.scss
@@ -0,0 +1,49 @@
+
+@if $gnome_version == 'new' and $colortype == 'system' {
+  $primary:            -st-accent-color;
+  $indicator:          -st-accent-color;
+  $inverse-indicator:  -st-accent-color;
+}
+
+@import 'common/a11y';
+@import 'common/base';
+@import 'common/buttons';
+@import 'common/corner-ripple';
+@import 'common/entries';
+@import 'common/hotplug';
+@import 'common/ibus-popup';
+@import 'common/keyboard';
+@import 'common/login-dialog';
+@import 'common/looking-glass';
+@import 'common/misc';
+@import 'common/network-dialog';
+@import 'common/osd';
+@import 'common/overview';
+@import 'common/panel';
+@import 'common/popovers';
+@import 'common/screen-shield';
+@import 'common/scrollbars';
+@import 'common/search-entry';
+@import 'common/switcher-popup';
+@import 'common/tiled-previews';
+@import 'common/workspace-switcher';
+@import 'widgets-46-0/app-grid';
+@import 'widgets-46-0/calendar';
+@import 'widgets-47-0/check-box';
+@import 'widgets-46-0/dash';
+@import 'widgets-47-0/dialogs';
+@import 'widgets-48-0/message-list';
+@import 'widgets-40-0/misc';
+@import 'widgets-48-0/notifications';
+@import 'widgets-40-0/overview';
+@import 'widgets-42-0/osd';
+@import 'widgets-40-0/panel';
+@import 'widgets-42-0/popovers';
+@import 'widgets-48-0/quick-settings';
+@import 'widgets-40-0/search-entry';
+@import 'widgets-46-0/search-results';
+@import 'widgets-42-0/screenshot';
+@import 'widgets-47-0/slider';
+@import 'widgets-47-0/switches';
+@import 'widgets-40-0/window-picker';
+@import 'widgets-40-0/workspace-thumbnails';
diff --git a/src/sass/gnome-shell/common/_buttons.scss b/src/sass/gnome-shell/common/_buttons.scss
index 61bb4a11..66feea9b 100644
--- a/src/sass/gnome-shell/common/_buttons.scss
+++ b/src/sass/gnome-shell/common/_buttons.scss
@@ -56,8 +56,9 @@ $primary-text: $white;
 
 .icon-button {
   border-radius: $circular_radius;
-  padding: $base_padding;
+  padding: $scaled_padding * 2;
   min-height: $scalable_icon_size;
+  @extend %button;
 
   StIcon {
     icon-size: $scalable_icon_size;
diff --git a/src/sass/gnome-shell/extensions-40-0/_dash-to-dock.scss b/src/sass/gnome-shell/extensions-40-0/_dash-to-dock.scss
index 6a844492..ff866081 100644
--- a/src/sass/gnome-shell/extensions-40-0/_dash-to-dock.scss
+++ b/src/sass/gnome-shell/extensions-40-0/_dash-to-dock.scss
@@ -26,7 +26,7 @@
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
     border-radius: $circular_radius;
     margin: 2px;
-    padding: 0.25em 0.6em;
+    padding: 0.2em 0.4em;
     font-weight: bold;
     text-align: center;
   }
diff --git a/src/sass/gnome-shell/extensions-46-0/_dash-to-dock.scss b/src/sass/gnome-shell/extensions-46-0/_dash-to-dock.scss
index c4327f75..1d2c1bdf 100644
--- a/src/sass/gnome-shell/extensions-46-0/_dash-to-dock.scss
+++ b/src/sass/gnome-shell/extensions-46-0/_dash-to-dock.scss
@@ -18,7 +18,7 @@
     color: white;
     background-color: rgba(black, 0.75);
     text-align: center;
-    padding: 0.25em 0.4em;
+    padding: 0.2em 0.4em;
   }
 
   .notification-badge {
@@ -29,7 +29,7 @@
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
     border-radius: $circular-radius;
     margin: 2px 3px 5px;
-    padding: 0.25em 0.4em;
+    padding: 0.2em 0.4em;
     font-weight: bold;
     text-align: center;
   }
diff --git a/src/sass/gnome-shell/widgets-46-0/_quick-settings.scss b/src/sass/gnome-shell/widgets-46-0/_quick-settings.scss
index 5d58be1b..185185b9 100644
--- a/src/sass/gnome-shell/widgets-46-0/_quick-settings.scss
+++ b/src/sass/gnome-shell/widgets-46-0/_quick-settings.scss
@@ -78,7 +78,7 @@
   .quick-toggle-icon { icon-size: $base_icon_size; }
 }
 
-.quick-menu-toggle, .quick-toggle-has-menu {
+.quick-menu-toggle {
   & .quick-toggle {
     min-width: auto;
     max-width: auto;
@@ -92,7 +92,7 @@
     &:rtl:last-child { border-radius: $base_radius; }
   }
 
-  .quick-toggle-arrow, .quick-toggle-menu-button {
+  .quick-toggle-arrow {
     background-color: $button !important;
     padding: $base_padding $base_padding * 1.75;
     border: none !important;
@@ -101,11 +101,11 @@
     &:hover {
       background-color: $divider !important;
     }
-  
+
     &:active {
       background-color: rgba($text, 0.15) !important;
     }
-  
+
     &:checked {
       background-color: $primary !important;
       color: $primary-text;
@@ -272,7 +272,7 @@
     icon-size: $base_icon_size * 2 !important;
     -st-icon-style: regular !important;
   }
-  & .close-button {
+  & .icon-button {
     @extend .icon-button;
     padding: $base_padding;
   }
diff --git a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
index 145fe547..7ec10201 100644
--- a/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
+++ b/src/sass/gnome-shell/widgets-47-0/_dialogs.scss
@@ -2,7 +2,7 @@
 
 %theme_dialogs {
   background-color: $popover;
-  border-radius: $modal_radius + $base_padding / 2;
+  border-radius: $modal_radius + $base_padding;
 
   @if $rimless == 'false' {
     border: 1px solid $window-border;
@@ -68,7 +68,7 @@
 // modal dialog
 .modal-dialog {
   color: $text-secondary;
-  padding: $base_padding * 1.5;
+  padding: $base_padding * 2;
   @extend %theme_dialogs;
 
   .modal-dialog-content-box {
diff --git a/src/sass/gnome-shell/widgets-48-0/_message-list.scss b/src/sass/gnome-shell/widgets-48-0/_message-list.scss
new file mode 100644
index 00000000..5dfcf277
--- /dev/null
+++ b/src/sass/gnome-shell/widgets-48-0/_message-list.scss
@@ -0,0 +1,269 @@
+/* Message List */
+// a.k.a. notifications in the menu
+
+.message-list {
+  width: if($compact == 'true', 25.5em, 29em);
+  text-shadow: none;
+  border: solid $border;
+  padding: 0;
+
+  // padding and margins to account for scrollbar
+  &:ltr { margin-left: 0; margin-right: $base_margin * 2; padding-right: 0; border-right-width: 0; }
+  &:rtl { margin-right: 0; margin-left: $base_margin * 2; padding-left: 0; border-left-width: 0; }
+
+  .message-list-placeholder {
+    @extend %title_2;
+    spacing: $base_spacing * 2;
+    color: $text-secondary-disabled;
+
+    // icon size and color
+    > StIcon {
+      icon-size: 96px; // non-em asset size
+      margin-bottom: $base_margin * 3;
+      -st-icon-style: symbolic;
+    }
+  }
+}
+
+.message-view {
+  // to account for scrollbar
+  &:ltr { margin-right: $base_margin * 3; }
+  &:rtl { margin-left: $base_margin * 3; }
+
+  -st-vfade-offset: 68px;
+
+  .message {
+    margin-bottom: $base_padding * 2 !important;
+  }
+}
+
+// do-not-disturb + clear button
+.message-list-controls {
+  margin: ($base_margin * 2) ($base_margin * 4) 0;
+  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
+  padding: $base_padding;
+  spacing: $base_padding;
+  @extend %heading;
+
+  .dnd-button {
+    // We need this because the focus outline isn't inset like for the buttons
+    // so the dnd button would grow when it gets focus if we didn't change only
+    // its color when focusing.
+    border-width: 2px;
+    border-color: transparent;
+    border-radius: 32px;
+    border-style: solid;
+
+    &:focus {
+      @if $gnome_version == 'default' {
+        border-color: transparentize($primary, 0.4);
+      } @else {
+        border-color: st-transparentize($primary, 0.4);
+      }
+    }
+  }
+}
+
+// message notification group
+.message-notification-group {
+  spacing: $base_padding * 2;
+
+  .message-group-header {
+    padding: $base_padding;
+    .message-group-title {
+      @extend %title_2;
+      margin: 0 $base_margin;
+    }
+  }
+
+  // close button
+  .message-collapse-button {
+    @extend .icon-button;
+    padding: 4px !important;
+    border: 4px transparent solid;
+  }
+}
+
+// message bubbles
+.message {
+  padding: $base_padding;
+  margin: $base_spacing / 2;
+  border-radius: $window_radius;
+
+  .popup-menu & {
+    border-radius: $base_radius;
+    color: $text-secondary;
+    background-color: mix($text, $base, 5%) !important;
+
+    &:hover {
+      background-color: mix($text, $base, 10%) !important;
+    }
+
+    &:active {
+      background-color: mix($text, $base, 15%) !important;
+    }
+
+    .notification-button { border-radius: $base_radius / 2; }
+  }
+
+  &:second-in-stack {
+    background-color: mix($text, $base, 8%) !important;
+    box-shadow: none;
+  }
+
+  &:lower-in-stack {
+    background-color: mix($text, $base, 11%) !important;
+    box-shadow: none;
+  }
+
+  // subtract side padding to accommodate the close button's border
+  &:ltr { padding-right: $base_padding; }
+  &:rtl { padding-left: $base_padding; }
+
+  // message header
+  .message-header {
+    padding: 0 $scaled_padding;
+    spacing: $base_padding;
+    color: $text-disabled;
+
+    // remove side padding to accommodate the close button
+    &:ltr { padding-right: 0; }
+    &:rtl { padding-left: 0; }
+
+    // header source icon
+    .message-source-icon {
+      icon-size: $base_icon_size; // 16px
+      -st-icon-style: symbolic;
+    }
+
+    // box that contains the source icon, source name and timestamp of the message
+    .message-header-content {
+      spacing: $base_padding;
+      min-height: to_em(24px);
+      padding-bottom: $base_padding;
+
+      // header source title
+      .message-source-title {
+        font-weight: bold;
+      }
+
+      // Time label
+      .event-time {
+        @extend %caption;
+        // Add bottom padding to align the app name with the time horizontally
+        padding-bottom: to_em(1px);
+        color: $text-disabled;
+
+        &:ltr { text-align: right; }
+        &:rtl { text-align: left; }
+      }
+    }
+
+    // buttons in the message header
+    .message-expand-button,
+    .message-close-button {
+      @extend .icon-button;
+      color: $text;
+      background-color: $fill;
+      padding: 4px;
+      border: none;
+
+      &, &:hover, &:active {
+        color: $text;
+      }
+  
+      &:hover, &:focus { background-color: $divider; }
+      &:active, &:active:hover { background-color: $track; }
+      &:insensitive { background-color: $fill;}
+    }
+
+    .message-expand-button {
+      padding: 4px;
+      border: none;
+
+      &:ltr { margin-right: $base_padding; }
+      &:rtl { margin-left: $base_padding; }
+    }
+  }
+
+  // container for message contents
+  .message-box {
+    padding: $base_padding;
+    margin: $base_padding;
+    margin-top: 0;
+    spacing: $base_padding;
+
+    // icon of the message
+    .message-icon {
+      &:ltr { margin-right: $base_padding; }
+      &:rtl { margin-left: $base_padding; }
+
+      // icon size and color
+      icon-size: $base_icon_size * 3; // 48px
+      -st-icon-style: symbolic;
+
+      &.message-themed-icon {
+        border-radius: $circular_radius; // is circular
+        icon-size: $base_icon_size;
+        min-width: $base_icon_size * 3 - $base_padding * 2;
+        min-height: $base_icon_size * 3 - $base_padding * 2;
+        color: $text-disabled;
+        background-color: $divider;
+        padding: $base_padding;
+      }
+    }
+
+    // If the header isn't displayed we need more top margin
+    &:first-child {
+      margin-top: $base_padding * 2;
+    }
+
+    // text of the message
+    .message-content {
+      spacing: $base_margin;
+
+      // message title
+      .message-title {
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// URLs in messages
+.url-highlighter {
+  link-color: $link;
+}
+
+.message-media-control {
+  margin: 4px $base_padding;
+  padding: $base_padding * 2;
+  border-radius: $circular_radius;
+  border: none;
+  color: $text-secondary;
+
+  &:hover, &:focus { background-color: $divider; }
+  &:active { background-color: $track; }
+
+  &:hover, &:focus, &:active {
+    color: $text;
+  }
+
+  &:insensitive {
+    color: $text-disabled;
+  }
+
+  StIcon { icon-size: $base_icon_size; }
+}
+
+.media-message {
+  // album-art
+  .message-icon {
+    border-radius: $base_radius / 2 !important;
+    padding: 0;
+
+    &.message-themed-icon {
+      icon-size: $base_icon_size * 2 !important; // 32px
+    }
+  }
+}
diff --git a/src/sass/gnome-shell/widgets-48-0/_notifications.scss b/src/sass/gnome-shell/widgets-48-0/_notifications.scss
new file mode 100644
index 00000000..894d589c
--- /dev/null
+++ b/src/sass/gnome-shell/widgets-48-0/_notifications.scss
@@ -0,0 +1,62 @@
+/* Notifications & Message Tray */
+
+$notification_banner_height: 64px;
+$notification_banner_width: 34em;
+
+// Banner notifications
+.notification-banner {
+  min-height: $notification_banner_height;
+  width: $notification_banner_width;
+  margin: 12px 8px 8px;
+  border-radius: $base_radius;
+  color: $text-secondary;
+  background-color: $popover;
+  text-shadow: none;
+  border-radius: $base_radius + $base_padding * 2;
+  padding: $base_padding;
+
+  @if $rimless == 'false' and $variant == 'dark' {
+    border: 1px solid $window-border;
+    box-shadow: inset 0 0 0 1px highlight($popover);
+  } @else {
+    border: none;
+    box-shadow: 0 3px 6px rgba(black, 0.25);
+  }
+
+  &:hover, &:active, &:focus {
+    color: $text;
+    background-color: $popover;
+  }
+}
+
+.notification-buttons-bin {
+  border: none;
+  spacing: 0;
+}
+
+.notification-button {
+  min-height: $item_size + $base_padding;
+  padding: 0 $base_padding * 3;
+  background-color: $fill;
+  color: $text-secondary;
+  font-weight: 500;
+  border: none;
+  border-radius: $base_radius;
+
+  &:focus {
+    background-color: transparent;
+    color: $text;
+    box-shadow: inset 0 0 0 2px $divider;
+  }
+
+  &:hover, &:focus:hover {
+    background-color: $divider;
+    color: $text;
+    box-shadow: none;
+  }
+
+  &:active {
+    background-color: $track;
+    color: $text;
+  }
+}
diff --git a/src/sass/gnome-shell/widgets-48-0/_quick-settings.scss b/src/sass/gnome-shell/widgets-48-0/_quick-settings.scss
new file mode 100644
index 00000000..217f4eb7
--- /dev/null
+++ b/src/sass/gnome-shell/widgets-48-0/_quick-settings.scss
@@ -0,0 +1,290 @@
+.quick-settings {
+  padding: $base_padding * 3 !important;
+  border-radius: $base_radius + $base_padding * 3 !important;
+  margin-top: 4px !important;
+
+  .icon-button, .button {
+    padding: $base_padding * 1.75;
+
+    > StIcon {
+      icon-size: $base_icon_size;
+    }
+  }
+}
+
+.quick-settings-grid {
+  spacing-rows: $base_padding * 2;
+  spacing-columns: $base_padding * 2;
+}
+
+.quick-toggle, .quick-toggle-has-menu {
+  border-radius: $base_radius;
+  min-width: 12em;
+  max-width: 12em;
+  min-height: $scalable_icon_size * 3; // use icon size so the button scales
+  border: none;
+}
+
+.quick-toggle {
+  background-color: $button !important;
+
+  &:hover {
+    background-color: $divider !important;
+  }
+
+  &:active {
+    background-color: rgba($text, 0.15) !important;
+  }
+
+  &:checked {
+    background-color: $primary !important;
+    color: $primary-text;
+
+    &:hover {
+      color: $primary-text;
+      @if $gnome_version == 'default' {
+        background-color: mix($text, $primary, 6%) !important;
+      } @else {
+        background-color: st-mix($text, $primary, 6%) !important;
+      }
+    }
+
+    &:active {
+      color: $primary-text;
+      @if $gnome_version == 'default' {
+        background-color: mix($text, $primary, 15%) !important;
+      } @else {
+        background-color: st-mix($text, $primary, 15%) !important;
+      }
+    }
+  }
+
+  & > StBoxLayout { spacing: $base_padding * 1.5; }
+
+  /* Move padding into the box; this is to allow menu arrows
+     to extend to the border */
+  &.button { padding: 0; }
+  & > StBoxLayout { padding: 0 $base_padding * 2; }
+  &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
+  &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
+
+  .quick-toggle-title {
+    @extend %heading;
+  }
+
+  .quick-toggle-subtitle {
+    @extend %caption;
+    font-weight: normal;
+  }
+
+  .quick-toggle-icon { icon-size: $base_icon_size; }
+}
+
+.quick-toggle-has-menu {
+  & .quick-toggle {
+    min-width: auto;
+    max-width: auto;
+
+    &:ltr { border-radius: $base_radius 0 0 $base_radius; }
+    &:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
+    &:rtl { border-radius: 0 $base_radius $base_radius 0; }
+    &:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
+
+    &:ltr:last-child { border-radius: $base_radius; }
+    &:rtl:last-child { border-radius: $base_radius; }
+  }
+
+  .quick-toggle-menu-button {
+    background-color: $button !important;
+    padding: $base_padding $base_padding * 1.75;
+    border: none !important;
+    color: $text;
+
+    &:hover {
+      background-color: $divider !important;
+    }
+
+    &:active {
+      background-color: rgba($text, 0.15) !important;
+    }
+
+    &:checked {
+      background-color: $primary !important;
+      color: $primary-text;
+  
+      &:hover {
+        color: $primary-text;
+        @if $gnome_version == 'default' {
+          background-color: mix($text, $primary, 6%) !important;
+        } @else {
+          background-color: st-mix($text, $primary, 6%) !important;
+        }
+      }
+  
+      &:active {
+        color: $primary-text;
+        @if $gnome_version == 'default' {
+          background-color: mix($text, $primary, 15%) !important;
+        } @else {
+          background-color: st-mix($text, $primary, 15%) !important;
+        }
+      }
+    }
+
+    &:ltr { border-radius: 0 $base_radius $base_radius 0; }
+    &:rtl { border-radius: $base_radius 0 0 $base_radius; }
+  }
+
+  .quick-toggle-separator {
+    width: 0;
+  }
+}
+
+.quick-slider {
+  & > StBoxLayout { spacing: $base_padding; }
+
+  .icon-button {
+    padding: $base_padding + 2px;
+  }
+
+  .slider-bin {
+    &:focus { @include button(focus); }
+    padding: $base_padding;
+    border-radius: $circular_radius;
+  }
+}
+
+.quick-toggle-menu {
+  background-color: $popover !important;
+  color: $text !important;
+  border-radius: $base_radius + $base_padding * 2 !important;
+  padding: $scaled_padding * 2;
+  margin: $base_padding * 2 $base_padding * 3 0;
+  border: none;
+  box-shadow: 0 1px 3px rgba(black, 0.15);
+
+  &:insensitive {
+    // override insensitive style on submenu
+    @include button(normal);
+  }
+
+  .popup-menu-item {
+    border-radius: $base_radius !important;
+
+    &:focus, &:hover, &.selected {
+      color: $text !important;
+      background-color: rgba($text, 0.1) !important;
+    }
+
+    &:active {
+      color: $text !important;
+      background-color: rgba($text, 0.2) !important;
+    }
+
+    > StIcon {
+      -st-icon-style: symbolic;
+      icon-size: $base_icon_size;
+    }
+  }
+
+  .popup-separator-menu-item {
+    padding: 0  !important;
+  }
+
+  & .header {
+    spacing-rows: $base_padding * 0.5;
+    spacing-columns: $base_padding * 2;
+    padding-bottom: $base_padding * 2;
+
+    & .icon {
+      icon-size: $medium_icon_size; // a non-standard symbolic size but ok
+      border-radius: $base_radius;
+      padding: 1.5 * $base_padding;
+      background-color: on($popover, divider) !important;
+
+      &.active {
+        background-color: $primary !important;
+        color: $primary-text;
+      }
+    }
+
+    & .title {
+      @extend %title_3;
+    }
+
+    & .subtitle {
+      @extend %caption_heading;
+    }
+  }
+}
+
+.quick-settings-system-item {
+  & > StBoxLayout { spacing: $base_padding * 2; }
+
+  .icon-button {
+    border-radius: $base_radius;
+
+    > StIcon {
+      -st-icon-style: symbolic;
+      icon-size: $base_icon_size;
+    }
+  }
+
+  & .power-item {
+    min-height: 0;
+    min-width: 0;
+
+    &:insensitive {
+      @include button(normal);
+      background-color: transparent;
+    }
+  }
+}
+
+.nm-network-item {
+  .wireless-secure-icon { icon-size: $scalable_icon_size * 0.5; } // half-size symbolic
+}
+
+.bt-device-item {
+  .popup-menu-icon { -st-icon-style: symbolic; }
+}
+
+.bt-menu-placeholder.popup-menu-item {
+  @extend %title_4;
+  text-align: center;
+
+  padding: 2em 4em;
+}
+
+.device-subtitle { color: $text-disabled; }
+
+.keyboard-brightness-level {
+  spacing: $base_padding;
+
+  .button:checked { @extend %default_button; }
+}
+
+// background apps
+
+.background-apps-quick-toggle {
+  min-height: to_em(40px);
+  background-color: transparent;
+
+  & StIcon { icon-size: $base_icon_size !important; }
+}
+
+.background-app-item {
+  & .title { @extend %heading; }
+  & .subtitle { @extend %caption; }
+  & .popup-menu-icon {
+    icon-size: $medium_icon_size !important;
+    -st-icon-style: regular !important;
+  }
+  & .icon-button {
+    padding: $base_padding;
+  }
+  & .spinner {
+    padding: $base_padding;
+  }
+  &.popup-inactive-menu-item { color: $text; }
+}