Fixed gnome-shell quick-setting issues

src/sass/gnome-shell/_common.scss

@@ -24,7 +24,7 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
  */
 
 // Stage
-stage {
+//stage {
-  @include font(body-1);
+  //@include font(body-1);
-  color: $fg_color;
+  //color: $fg_color;
-}
+//}

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

@@ -21,6 +21,7 @@
 @import 'common/overview';
 @import 'common/panel';
 @import 'common/popovers';
+@import 'common/quick-settings';
 @import 'common/screen-shield';
 @import 'common/scrollbars';
 @import 'common/search-entry';

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

@@ -0,0 +1,178 @@
+.quick-settings {
+  padding: $base_padding * 3 !important;
+  border-radius: 10px + $base_padding * 4 !important;
+
+  .icon-button, .button {
+    min-height: 20px + $base_padding * 2 !important;
+    min-width: 20px + $base_padding * 2 !important;
+    padding: 0 !important;
+    border-radius: $circular_radius;
+  }
+
+  .popup-menu-content {
+    padding: $base_padding * 2 !important;
+    margin-top: $base_padding * 2 !important;
+  }
+}
+
+.quick-settings-grid {
+  spacing-rows: $base_padding * 2;
+  spacing-columns: $base_padding * 2;
+}
+
+.quick-toggle {
+  border-radius: $circular_radius;
+  min-width: 12em !important;
+  max-width: 12em !important;
+  min-height: 40px !important;
+  border: none;
+  background-color: $fill_color !important;
+
+  &:hover {
+    background-color: $divider_color !important;
+  }
+
+  &:active {
+    background-color: $visit_color !important;
+  }
+
+  &:checked {
+    background-color: $primary_color !important;
+    color: $light_fg_color;
+
+    &:hover {
+      background-color: mix($text_color, $primary_color, 6%) !important;
+      color: $light_fg_color;
+    }
+
+    &:active {
+      background-color: mix($text_color, $primary_color, 15%) !important;
+      color: $light_fg_color;
+    }
+  }
+
+  & > StBoxLayout { spacing: $base_padding; }
+
+  /* Move padding into the box; this is to allow menu arrows
+     to extend to the border */
+  &.button { padding: 0 !important; }
+  & > StBoxLayout { padding: 0 $base_padding * 2 !important; }
+  &:ltr > StBoxLayout { padding-left: $base_padding * 2.5 !important; }
+  &:rtl > StBoxLayout { padding-right: $base_padding * 2.5 !important; }
+
+  .quick-toggle-label { font-weight: bold; }
+  .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
+}
+
+.quick-menu-toggle {
+  &:ltr > StBoxLayout { padding-right: 0 !important; }
+  &:rtl > StBoxLayout { padding-left: 0 !important; }
+
+  .quick-toggle-arrow {
+    background-color: $fill_color !important;
+    padding: $base_padding $base_padding * 1.75 !important;
+
+    &:active {
+      background-color: $divider_color !important;
+    }
+
+    &:ltr { border-radius: 0 $circular_radius $circular_radius 0; }
+    &:rtl { border-radius: $circular_radius 0 0 $circular_radius; }
+  }
+}
+
+.quick-slider {
+  padding: 0 $base_padding;
+
+  & > StBoxLayout { spacing: $base_padding; }
+
+  .slider-bin {
+    &:focus { @include button(focus); }
+    min-height: 16px; // slider size
+    padding: $base_padding;
+    border-radius: $circular_radius;
+  }
+
+  .quick-toggle-icon {
+    icon-size: $base_icon_size;
+  }
+
+  .icon-button {
+    background-color: transparent;
+    color: $text_color !important;
+
+    &:hover {
+      background-color: $fill_color;
+    }
+
+    &:active {
+      background-color: $divider_color;
+    }
+  }
+}
+
+.quick-toggle-menu {
+  background-color: $menu_bg !important;
+  color: $text_color !important;
+  border-radius: 10px + $base_padding * 2.5 !important;
+  padding: $base_padding * 2 !important;
+  margin: $base_padding * 2 $base_padding * 6 0 !important;
+
+  .popup-menu-item {
+    border-radius: $circular_radius !important;
+
+    &:focus, &:hover, &.selected {
+      color: $text_color !important;
+      background-color: $divider_color !important;
+    }
+
+    > StIcon { -st-icon-style: symbolic; }
+  }
+
+  & .header {
+    spacing-rows: 0.5 * $base_padding;
+    spacing-columns: $base_padding * 2;
+    padding-bottom: 2 * $base_padding;
+
+    & .icon {
+      icon-size: $base_icon_size * 1.5; // a non-standard symbolic size but ok
+      border-radius: $circular_radius;
+      padding: 1.5 * $base_padding;
+      background-color: $divider_color !important;
+
+      &.active {
+        background-color: $primary_color !important;
+        color: $light_fg_color;
+      }
+    }
+  }
+}
+
+.quick-settings-system-item {
+  & > StBoxLayout { spacing: 2 * $base_padding; }
+
+  .icon-button {
+    background-color: $fill_color;
+    color: $text_color;
+    border-radius: $circular_radius;
+
+    &:hover { @include button(flat-hover); }
+    &:active { @include button(flat-active); }
+
+    > StIcon { -st-icon-style: symbolic; }
+  }
+
+  & .power-item {
+    min-height: 0;
+    min-width: 0;
+
+    &:insensitive {
+      @include button(normal);
+      background-color: transparent;
+    }
+  }
+}
+
+.nm-network-item {
+  .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
+}