Fixed #720

src/sass/gnome-shell/_common.scss

@@ -28,3 +28,71 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
   //@include font(body-1);
   //color: $fg_color;
 //}
+
+$popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($base_color, 8%), 0.95));
+
+%popover_bubble {
+  color: $alt_fg_color;
+  background-color: $popover_bubble_bg;
+  border-radius: $mn_radius !important;
+  border: none;
+  box-shadow: 0 1px 2px rgba(black, 0.02) !important;
+  text-shadow: none;
+
+  &:hover, &:focus {
+    color: $fg_color;
+    background-color: if($variant == 'light', rgba($popover_bubble_bg, 1), rgba(lighten($popover_bubble_bg, 5%), 1));
+    box-shadow: 0 1px 3px rgba(black, 0.05) !important;
+  }
+
+  &:active {
+    color: $fg_color;
+    background-color: if($variant == 'light', darken($popover_bubble_bg, 1%), lighten($popover_bubble_bg, 3%));
+    box-shadow: none !important;
+  }
+}
+
+%show_apps_bigsur {
+  .show-apps-icon {
+    color: transparent !important;
+    background-image: url("assets/view-app-grid.svg");
+    background-size: contain;
+  }
+
+  &,
+  &:hover,
+  &:active,
+  &:checked,
+  &:focus {
+    .overview-icon, .show-apps-icon { color: transparent !important; }
+  }
+}
+
+%osd_panel {
+  color: $fg_color;
+  background-color: $base_color;
+  border-radius: $wm_radius;
+  border: solid rgba(black, 0.75);
+  border-width: if($variant=='light', 0, 1px);
+  box-shadow: 0 3px 8px 0 rgba(black, 0.25);
+  padding: $base_padding * 2;
+}
+
+%search-section-content-item {
+  border-radius: $bt_radius;
+  padding: $base_padding;
+  transition-duration: 100ms;
+  text-align: center;
+
+  &:focus,
+  &:hover,
+  &:selected {
+    background-color: $light_divider_color;
+    transition-duration: 200ms;
+  }
+
+  &:active,
+  &:checked {
+    background-color: $light_track_color;
+  }
+}

src/sass/gnome-shell/common/_app-grid.scss

@@ -65,25 +65,25 @@
   // padding: 0;
   background-color: rgba(if($colorscheme == 'nord', #20242c, #262626), 0.9);
 
-  & .folder-name-container {
+  .folder-name-container {
     padding: 24px 36px 0;
     spacing: 12px;
 
-    & .folder-name-label,
+    .folder-name-label,
-    & .folder-name-entry {
+    .folder-name-entry {
       font-size: if($laptop == 'true', 16pt, 18pt);
       font-weight: bold;
     }
 
-    & .folder-name-entry {
+    .folder-name-entry {
       @extend %search-entry;
       width: if($laptop == 'true', 240px, 320px) !important;
     }
 
     /* FIXME: this is to keep the label in sync with the entry */
-    & .folder-name-label { padding: $base_padding; color: $light_alt_fg_color; }
+    .folder-name-label { padding: $base_padding; color: $light_alt_fg_color; }
 
-    & .edit-folder-button {
+    .edit-folder-button {
       background-color: $light_fill_color;
       color: $light_alt_fg_color;
       border: none;
@@ -92,14 +92,14 @@
       height: 36px;
       border-radius: $circular_radius;
 
-      & > StIcon { icon-size: $base_icon_size; }
+      > StIcon { icon-size: $base_icon_size; }
 
       &:hover { background-color: $light_divider_color; }
       &:checked, &:active { background-color: $light_track_color; }
     }
   }
 
-  & .icon-grid {
+  .icon-grid {
     row-spacing: 12px;
     column-spacing: if($laptop == 'true', 12px, 18px);
     page-padding-top: 0;
@@ -147,10 +147,12 @@
     box-shadow: none;
     background-color: $light_alt_disabled_fg_color;
   }
+
   &:hover .page-indicator-icon {
     background-image: none;
     background-color: $light_disabled_fg_color;
   }
+
   &:active .page-indicator-icon {
     margin: 0;
     padding: 0;
@@ -160,10 +162,12 @@
     box-shadow: none;
     background-color: $light_alt_fg_color;
   }
+
   &:checked .page-indicator-icon {
     background-image: none;
     background-color: $light_alt_fg_color;
   }
+
   &:checked:active { background-image: none; }
 }
 

src/sass/gnome-shell/common/_base.scss

@@ -1,72 +1,4 @@
 
-$popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($base_color, 8%), 0.95));
-
-%popover_bubble {
-  color: $alt_fg_color;
-  background-color: $popover_bubble_bg;
-  border-radius: $mn_radius;
-  border: none;
-  box-shadow: none;
-  text-shadow: none;
-
-  &:hover, &:focus {
-    color: $fg_color;
-    background-color: if($variant == 'light', rgba($popover_bubble_bg, 1), rgba(lighten($popover_bubble_bg, 5%), 1));
-    box-shadow: 0 2px 3px rgba(black, 0.1) !important;
-  }
-
-  &:active {
-    color: $fg_color;
-    background-color: if($variant == 'light', darken($popover_bubble_bg, 1%), lighten($popover_bubble_bg, 3%));
-    box-shadow: none;
-  }
-}
-
-%show_apps_bigsur {
-  .show-apps-icon {
-    color: transparent !important;
-    background-image: url("assets/view-app-grid.svg");
-    background-size: contain;
-  }
-
-  &,
-  &:hover,
-  &:active,
-  &:checked,
-  &:focus {
-    .overview-icon, .show-apps-icon { color: transparent !important; }
-  }
-}
-
-%osd_panel {
-  color: $fg_color;
-  background-color: $base_color;
-  border-radius: $wm_radius;
-  border: solid rgba(black, 0.75);
-  border-width: if($variant=='light', 0, 1px);
-  box-shadow: 0 3px 8px 0 rgba(black, 0.25);
-  padding: $base_padding * 2;
-}
-
-%search-section-content-item {
-  border-radius: $bt_radius;
-  padding: $base_padding;
-  transition-duration: 100ms;
-  text-align: center;
-
-  &:focus,
-  &:hover,
-  &:selected {
-    background-color: $light_divider_color;
-    transition-duration: 200ms;
-  }
-
-  &:active,
-  &:checked {
-    background-color: $light_track_color;
-  }
-}
-
 // links
 .shell-link {
   border-radius: $bt_radius;

src/sass/gnome-shell/common/_buttons.scss

@@ -1,18 +1,19 @@
 /* Buttons */
 
+%button {
+  @include button(flat-normal);
+  &:hover { @include button(flat-hover); }
+  &:active { @include button(flat-active); }
+  &:insensitive { @include button(flat-insensitive); }
+  &:focus { @include button(flat-focus); }
+}
+
 .button {
   min-height: $small_size;
   padding: $container_padding $container_padding * 2;
   border-radius: $bt_radius;
-
+  border: none;
-  &, .popup-menu & {
+  @extend %button;
-    @include button(flat-normal);
-    &:hover { @include button(flat-hover); }
-    &:active { @include button(flat-active); }
-    &:insensitive { @include button(flat-insensitive); }
-    &:focus { @include button(flat-focus); }
-    border: none;
-  }
 }
 
 .icon-button {
@@ -20,12 +21,7 @@
   min-width: $small_size;
   padding: $container_padding;
   border-radius: $circular_radius;
-
+  @extend %button;
-  @include button(flat-normal);
-  &:hover { @include button(flat-hover); }
-  &:active { @include button(flat-active); }
-  &:insensitive { @include button(flat-insensitive); }
-  &:focus { @include button(flat-focus); }
 }
 
 %osd_button {

src/sass/gnome-shell/common/_calendar.scss

@@ -79,7 +79,7 @@
 /* Calendar */
 .calendar {
   border: none;
-  box-shadow: none;
+  box-shadow: 0 1px 2px rgba(black, 0.02) !important;
   background-color: $popover_bubble_bg;
   padding: $base_padding !important;
   margin: 0 12px !important;

src/sass/gnome-shell/common/_looking-glass.scss

@@ -2,28 +2,43 @@
 
 // Dialog
 #LookingGlassDialog {
-  background-color: $base_color;
+  background-color: $osd_bg_color !important;
-  spacing: 4px;
+  spacing: $base_padding;
+  margin: $base_padding;
   padding: 0;
   border: none;
   border-radius: $bt_radius;
-  box-shadow: 0 3px 8px 0 rgba(black, 0.25);
+  box-shadow: 0 2px 6px 0 rgba(black, 0.15);
-  color: $fg_color;
+  color: $osd_fg_color !important;
 
-  & > #Toolbar {
+  > #Toolbar {
-    padding: 0 8px;
+    padding: 0 $base_padding;
+    spacing: $base_padding;
     border: none;
     border-radius: 0;
     background-color: rgba($base_color, 0.01);
-    box-shadow: inset 0 -1px 0 $borders_color;
+    box-shadow: inset 0 -1px 0 $light_divider_color;
+
+    .lg-toolbar-button {
+      padding: $base_padding $base_padding * 2;
+      @extend %osd_button;
+      border-radius: $bt_radius;
+      margin: $base_padding / 2;
+
+      > StIcon { icon-size: $base_icon_size; }
+    }
+  }
+
+  .labels {
+    spacing: $base_padding;
+    color: $osd_fg_color !important;
   }
 
-  .labels { spacing: 0; }
   .notebook-tab {
-    -natural-hpadding: 12px;
+    -natural-hpadding: $base_padding * 2;
-    -minimum-hpadding: 6px;
+    -minimum-hpadding: $base_padding * 2;
     font-weight: bold;
-    color: $hint_fg_color;
+    color: $light_hint_fg_color !important;
     padding-left: 16px;
     padding-right: 16px;
     min-height: $medium_size;
@@ -32,22 +47,22 @@
     border-bottom: 2px solid transparent;
 
     &:hover {
-      color: $fg_color;
+      color: $light_fg_color !important;
       text-shadow: none;
-      border-color: $track_color
+      border-color: $light_track_color
     }
 
     &:selected {
-      background-color: rgba($base_color, 0.01);
+      background-color: rgba($base_color, 0.01) !important;
       border-color: $primary_color;
-      color: $fg_color;
+      color: $light_fg_color !important;
       text-shadow: none;
       box-shadow: none;
     }
   }
 
-  StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
+  StBoxLayout#EvalBox,
-  StBoxLayout#ResultsArea { spacing: 4px; }
+  StBoxLayout#ResultsArea { padding: $base_padding; spacing: $base_padding; }
 }
 
 .lg-dialog {
@@ -55,26 +70,33 @@
     min-height: 22px;
     selection-background-color: $primary_color;
     selected-color: $light_alt_fg_color;
+    caret-color: $light_fg_color !important;
+    color: $light_fg_color !important;
+    background-color: $light_divider_color !important;
   }
+
   .shell-link {
-    color: $link_color;
+    color: $link_color !important;
     &:hover { color: lighten($link_color, 10%); }
     &:active { color: darken($link_color, 10%); }
-   }
+  }
+
   .actor-link {
-    color: $alt_fg_color;
+    color: $light_alt_fg_color !important;
-    &:hover { color: lighten($alt_fg_color, 20%); }
+    &:hover { color: lighten($light_alt_fg_color, 20%); }
-    &:active { color: darken($alt_fg_color, 20%); }
+    &:active { color: darken($light_alt_fg_color, 20%); }
-   }
+
+    StIcon { icon-size: 12px; }
+  }
 }
 
 .lg-completions-text {
-    font-size: .9em;
+  font-size: .9em;
-    font-style: italic;
+  font-style: italic;
 }
 
 .lg-obj-inspector-title {
-    spacing: $base_spacing;
+  spacing: $base_spacing;
 }
 
 .lg-obj-inspector-button {
@@ -88,20 +110,21 @@
 
 // Extensions
 #lookingGlassExtensions {
-  padding: 4px;
+  padding: $base_padding;
 }
 
 .lg-extensions-list {
-  padding: 4px;
+  padding: $base_padding;
-  spacing: 6px;
+  spacing: $base_padding;
 }
 
 .lg-extension {
   border: none;
   border-radius: $bt_radius;
-  padding: 4px;
+  padding: $base_padding * 2;
-  background-color: $divider_color;
+  spacing: $base_padding;
-  color: $alt_fg_color;
+  background-color: $light_divider_color !important;
+  color: $light_alt_fg_color !important;
 }
 
 .lg-extension-name {
@@ -109,14 +132,32 @@
 }
 
 .lg-extension-meta {
-  spacing: 6px;
+  spacing: $base_padding;
 }
 
 // Inspector
 #LookingGlassPropertyInspector {
-  background: $base_color;
+  background: $osd_bg_color !important;
   border: none;
   border-radius: $bt_radius;
-  padding: 6px;
+  padding: $base_padding;
   box-shadow: 0 3px 8px 0 rgba(black, 0.25);
+  color: $osd_fg_color !important;
+}
+
+.lg-debug-flag-button {
+  color: $light_fg_color !important;
+  spacing: $base_padding;
+
+  StLabel {
+    padding: 2 * $base_padding;
+  }
+
+  &:hover { color: lighten($light_fg_color, 20%) !important; }
+  &:active { color: darken($light_fg_color, 20%) !important; }
+}
+
+.lg-debug-flags-header {
+  padding-top: 2 * $base_padding;
+  padding: $base_padding;
 }

src/sass/gnome-shell/common/_message-list.scss

@@ -48,7 +48,7 @@
 
 // message bubbles
 .message {
-  margin: 0 4px 6px;
+  margin: 3px 4px 4px;
 
   .popup-menu & {
     @extend %popover_bubble;
@@ -138,6 +138,8 @@
 
   &:last-child:ltr { margin-right: 16px; padding-right: 8px; }
   &:last-child:rtl { margin-left: 16px; padding-left: 8px; }
+
+  StIcon { icon-size: $base_icon_size !important; }
 }
 
 // album-art

src/sass/gnome-shell/widgets-42-0/_app-grid.scss

@@ -50,18 +50,19 @@
 }
 
 .page-navigation-arrow {
-  &  > StIcon {
+  > StIcon {
     margin: $base_padding;
     padding: $base_padding * 3;
     width: 24px;
     height: 24px;
     border-radius: $circular_radius;
     color: $light_fg_color !important;
+    background-color: $light_fill_color !important;
   }
 
   &:insensitive > StIcon {
-    backround-color: transparent !important;
+    backround-color: transparent;
-    color: transparent !important;
+    color: transparent;
   }
 
   &:hover > StIcon {