Gnome-shell: Improve hover color in icon grid

Gulpfile.js

@@ -11,7 +11,7 @@ gulp.task('styles', function(done) {
 });
 
 gulp.task('shell-style', function(done) {
-    gulp.src('gnome-shell/*.scss')
+    gulp.src('gnome-shell/**/*.scss')
         .pipe(sass().on('error', sass.logError))
         .pipe(gulp.dest('./gnome-shell/'))
         .pipe(exec('gsettings set org.gnome.shell.extensions.user-theme name "Sweet"'))

cinnamon/_common.scss

@@ -1254,182 +1254,225 @@ StScrollBar {
 //
 
 .window-list {
-  &-box {
-    spacing: 0;
 
-    .panel-top,
+  &-box {
-    .panel-bottom & {
+    spacing: 6px;
-      &:ltr { padding: 0 0 0 8px; }
+    padding-left: 10px;
-      &:rtl { padding: 0 8px 0 0; }
+    padding-top: 1px;
+
+    &.vertical {
+      spacing: 2px;
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-top: 10px;
+      padding-bottom: 10px;
     }
 
-    &.vertical { padding: 6px 0 0 0; }
+    &:highlight {
+      background-color: transparentize($error_color, 0.5);
+    }
+  }
 
-    &:highlight { background-color: $selected_bg_color }
+  &-item-label {
+    font-weight: bold;
+    width: 15em;
+    min-width: 5px;
   }
 
   &-item-box {
-    border: 0 none transparent;
+    font-weight: bold;
-    border-image: none;
     background-image: none;
-    background-color: $panel_bg;
+    padding-top: 0;
-    color: $osd_fg_color;
+    padding-left: 8px;
-    box-shadow: none;
+    padding-right: 8px;
-    font-weight: 400;
+    transition-duration: 100;
+    color: transparentize($selected_fg_color, 0.4);
 
-    &:hover {
+    &.top,
+    &.bottom {
+      border-bottom-width: 2px;
+
+      & StLabel { padding-left: 2px; }
+    }
+
+    &.right {
+      padding-left: 0px;
+      padding-right: 0px;
+      border-right-width: 2px;
+
+      & StBin { padding-right: 0; }
+    }
+
+    &.left {
+      padding-left: 0px;
+      padding-right: 0px;
+      border-left-width: 2px;
+
+      & StBin { padding-left: 1px; }
+    }
+
+    &:hover,
+    &:groupFocus {
       color: $selected_fg_color;
-      @each $position, $_indicator in (top, 0 2px),
+      background-color: transparentize($selected_fg_color, 0.9);
-                                      (bottom, 0 -2px),
-                                      (left, 2px 0),
-                                      (right, -2px 0) {
-        .panel-#{$position} & {
-          box-shadow: inset #{$_indicator} $selected_bg_color;
-        }
     }
 
-    }
     &:active,
     &:checked,
-    &:focus {
+    &:focus,
-      &, &:hover {
+    &:running {
       color: $selected_fg_color;
-
+      border-color: $selected_bg_color;
-        @each $position, $_indicator in (top, 0 2px),
-                                        (bottom, 0 -2px),
-                                        (left, 2px 0),
-                                        (right, -2px 0) {
-          .panel-#{$position} & {
-            box-shadow: inset #{$_indicator} $red;
-          }
-        }
-      }
     }
 
-    StIcon,
+    & .progress {
-    StBin {
+      background-color: transparentize($selected_bg_color, 0.2);
-      .panel-top &,
-      .panel-bottom & { padding: 0 (6px - 2px); }
-    }
-
-    &.vertical StIcon,
-    &.vertical StBin { padding: 0; }
-
-    StLabel {
-      font-weight: 400;
-
-      .panel-top &,
-      .panel-bottom & {
-        &:ltr { padding: 0 (6px - 2px) 0 0; }
-        &:rtl { padding: 0 0 0 (6px - 2px); }
-      }
-    }
-
-    &:progress,
-    .progress {
-      background-gradient-start: $selected_bg_color;
-      background-gradient-end: $selected_bg_color;
     }
   }
 
   &-item-demands-attention {
-    background-gradient-start: $selected_bg_color;
+    background-gradient-direction: vertical;
-    background-gradient-end: $selected_bg_color;
+    background-gradient-start: $destructive_color;
-    color: $selected_fg_color;
+    background-gradient-end: $destructive_color;
-
-    @each $position, $_indicator in (top, 0 2px),
-                                    (bottom, 0 -2px),
-                                    (left, 2px 0),
-                                    (right, -2px 0) {
-      .panel-#{$position} & {
-        box-shadow: inset #{$_indicator} $selected_bg_color;
-      }
-    }
   }
 
-  
+  &-preview {
-
+    spacing: 6px;
-  // >= 3.6.7
+    color: $fg_color;
-  &-preview { // thumbnail popup windows = .switcher-list
+    border: 1px solid $borders_color;
-    padding: 20px - 8px; // = .switcher-list - .item-box
+    background-color: $bg_color;
-    spacing: 8px; // = .switcher-list-item-container
+    border-radius: 3px;
-    border: none;
+    padding: 6px 12px 12px 12px;
-    border-image: url("assets/misc/osd.svg") 9 9 9 9;
+    font-size: 1em;
-    border-radius: 2px;
-    color: $osd_fg_color;
-    background: none;
   }
 }
 
+//
+// Grouped window list
+//
 
 .grouped-window-list {
-  &-item-box {
-    border: 0 none transparent;
-    border-image: none;
-    background-image: none;
-    background-color: $panel_bg;
-    color: $osd_fg_color;
-    box-shadow: none;
-    font-weight: 400;
 
-    StIcon,
+  &-item-label {
-    StBin {
+    font-weight: bold;
-      .panel-top &,
+    width: 15em;
-      .panel-bottom & { padding: 0 (6px - 2px); }
+    min-width: 5px;
+  }
+
+  &-item-box {
+    text-align: left;
+    font-weight: bold;
+    background-image: none;
+    padding-top: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+    transition-duration: 100;
+    color: transparentize($selected_fg_color, 0.4);
+
+    &.top,
+    &.bottom {
+      border-bottom-width: 2px;
+
+      & StLabel { padding-left: 2px; }
+    }
+
+    &.right {
+      padding-left: 0px;
+      padding-right: 0px;
+      border-right-width: 2px;
+
+      & StBin { padding-right: 0; }
+    }
+
+    &.left {
+      padding-left: 0px;
+      padding-right: 0px;
+      border-left-width: 2px;
+
+      & StBin { padding-left: 1px; }
+    }
+
+    &:hover,
+    &:focus {
+      color: $selected_fg_color;
+      background-color: transparentize($panel_bg, 0.7);
     }
 
     &:active,
     &:checked {
-          @each $position, $_indicator in (top, 0 2px),
+      color: $selected_fg_color;
-                                        (bottom, 0 -2px),
+      border-color: $selected_bg_color;
-                                        (left, 2px 0),
-                                        (right, -2px 0) {
-          .panel-#{$position} & {
-            box-shadow: inset #{$_indicator} lighten($panel_bg, 30%);
-          }
-        }
     }
 
-    &:hover,
+    & .progress {
-    &:active:hover,
+      background-color: transparentize($selected_bg_color, 0.2);
-    &:focus,
-    &:active:focus,
-    &:focus:hover,
-    &:active:focus:hover {
-        @each $position, $_indicator in (top, 0 2px),
-                                        (bottom, 0 -2px),
-                                        (left, 2px 0),
-                                        (right, -2px 0) {
-          .panel-#{$position} & {
-            box-shadow: inset #{$_indicator} $selected_bg_color
-          }
-        }
-    }
-
-
-    &:progress,
-    .progress {
-      background-gradient-start: $selected_bg_color;
-      background-gradient-end: $selected_bg_color;
     }
   }
 
   &-item-demands-attention {
-    background-gradient-start: $selected_bg_color;
+    background-gradient-direction: vertical;
-    background-gradient-end: $selected_bg_color;
+    background-gradient-start: $destructive_color;
-    color: $selected_fg_color;
+    background-gradient-end: $destructive_color;
+  }
 
-    @each $position, $_indicator in (top, 0 2px),
+  &-thumbnail-label {
-                                    (bottom, 0 -2px),
+    padding-left: 4px;
-                                    (left, 2px 0),
+  }
-                                    (right, -2px 0) {
+
-      .panel-#{$position} & {
+  &-number-label {
-        box-shadow: inset #{$_indicator} $selected_bg_color;
+    z-index: 99;
+    color: $fg_color;
+  }
+
+  &-badge {
+    border-radius: 256px;
+    background-color: $panel_bg;
+  }
+
+  &-button-label {
+    padding-left: 4px;
+  }
+
+  &-thumbnail-alert {
+    background: rgba(255,52,52,0.3);
+  }
+
+  &-thumbnail-menu {
+    color: $fg_color;
+    border: 1px solid $borders_color;
+    background-color: $bg_color;
+    border-radius: 3px;
+    padding: 0px;
+
+    > StBoxLayout {
+      padding: 4px;
+    }
+
+    .item-box {
+      padding: 10px;
+      border-radius: 2px;
+      spacing: 4px;
+
+      &:outlined {
+        padding: 8px;
+        border: 1px solid $selected_bg_color;
+      }
+
+      &:selected {
+        border: 1px solid $selected_bg_color;
+      }
+    }
+
+    .thumbnail { width: 256px; }
+
+    .separator {
+      width: 1px;
+      background: rgba(255,255,255,0.2);
     }
   }
 }
 
-}
+
 ///
 // Sound Applet (status/volume.js)
 //
@@ -1809,3 +1852,25 @@ StScrollBar {
   background-color: rgba(0,0,0,0);
   border-radius: 0px;
 }
+
+//
+// Cinnamenu applet
+//
+
+.menu-category-button {
+
+  padding: 7px;
+  border: 1px solid rgba(0, 0, 0, 0); 
+  
+  &-selected {
+    padding: 7px;
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+    border: 1px solid $borders_color; 
+  }
+
+  &-hover {
+    background-color: transparentize($selected_bg_color, 0.7);
+    border-radius: 2px; 
+  }
+}

cinnamon/cinnamon-dark.css

@@ -1088,137 +1088,153 @@ StScrollBar {
     background-color: #00e8b7; }
 
 .window-list-box {
-  spacing: 0; }
+  spacing: 6px;
-  .window-list-box .panel-top:ltr,
+  padding-left: 10px;
-  .panel-bottom .window-list-box:ltr {
+  padding-top: 1px; }
-    padding: 0 0 0 8px; }
-  .window-list-box .panel-top:rtl,
-  .panel-bottom .window-list-box:rtl {
-    padding: 0 8px 0 0; }
   .window-list-box.vertical {
-    padding: 6px 0 0 0; }
+    spacing: 2px;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 10px;
+    padding-bottom: 10px; }
   .window-list-box:highlight {
-    background-color: #00e8b7; }
+    background-color: rgba(252, 65, 56, 0.5); }
+
+.window-list-item-label {
+  font-weight: bold;
+  width: 15em;
+  min-width: 5px; }
 
 .window-list-item-box {
-  border: 0 none transparent;
+  font-weight: bold;
-  border-image: none;
   background-image: none;
-  background-color: #182129;
+  padding-top: 0;
-  color: #BAC3CF;
+  padding-left: 8px;
-  box-shadow: none;
+  padding-right: 8px;
-  font-weight: 400; }
+  transition-duration: 100;
-  .window-list-item-box:hover {
+  color: rgba(247, 247, 247, 0.6); }
-    color: #f7f7f7; }
+  .window-list-item-box.top, .window-list-item-box.bottom {
-    .panel-top .window-list-item-box:hover {
+    border-bottom-width: 2px; }
-      box-shadow: inset 0 2px #00e8b7; }
+    .window-list-item-box.top StLabel, .window-list-item-box.bottom StLabel {
-    .panel-bottom .window-list-item-box:hover {
+      padding-left: 2px; }
-      box-shadow: inset 0 -2px #00e8b7; }
+  .window-list-item-box.right {
-    .panel-left .window-list-item-box:hover {
+    padding-left: 0px;
-      box-shadow: inset 2px 0 #00e8b7; }
+    padding-right: 0px;
-    .panel-right .window-list-item-box:hover {
+    border-right-width: 2px; }
-      box-shadow: inset -2px 0 #00e8b7; }
+    .window-list-item-box.right StBin {
-  .window-list-item-box:active, .window-list-item-box:active:hover, .window-list-item-box:checked, .window-list-item-box:checked:hover, .window-list-item-box:focus, .window-list-item-box:focus:hover {
+      padding-right: 0; }
-    color: #f7f7f7; }
+  .window-list-item-box.left {
-    .panel-top .window-list-item-box:active, .panel-top .window-list-item-box:active:hover, .panel-top .window-list-item-box:checked, .panel-top .window-list-item-box:checked:hover, .panel-top .window-list-item-box:focus, .panel-top .window-list-item-box:focus:hover {
+    padding-left: 0px;
-      box-shadow: inset 0 2px #ed254e; }
+    padding-right: 0px;
-    .panel-bottom .window-list-item-box:active, .panel-bottom .window-list-item-box:active:hover, .panel-bottom .window-list-item-box:checked, .panel-bottom .window-list-item-box:checked:hover, .panel-bottom .window-list-item-box:focus, .panel-bottom .window-list-item-box:focus:hover {
+    border-left-width: 2px; }
-      box-shadow: inset 0 -2px #ed254e; }
+    .window-list-item-box.left StBin {
-    .panel-left .window-list-item-box:active, .panel-left .window-list-item-box:active:hover, .panel-left .window-list-item-box:checked, .panel-left .window-list-item-box:checked:hover, .panel-left .window-list-item-box:focus, .panel-left .window-list-item-box:focus:hover {
+      padding-left: 1px; }
-      box-shadow: inset 2px 0 #ed254e; }
+  .window-list-item-box:hover, .window-list-item-box:groupFocus {
-    .panel-right .window-list-item-box:active, .panel-right .window-list-item-box:active:hover, .panel-right .window-list-item-box:checked, .panel-right .window-list-item-box:checked:hover, .panel-right .window-list-item-box:focus, .panel-right .window-list-item-box:focus:hover {
+    color: #f7f7f7;
-      box-shadow: inset -2px 0 #ed254e; }
+    background-color: rgba(247, 247, 247, 0.1); }
-  .panel-top .window-list-item-box StIcon,
+  .window-list-item-box:active, .window-list-item-box:checked, .window-list-item-box:focus, .window-list-item-box:running {
-  .panel-bottom .window-list-item-box StIcon, .panel-top
+    color: #f7f7f7;
-  .window-list-item-box StBin,
+    border-color: #00e8b7; }
-  .panel-bottom
-  .window-list-item-box StBin {
-    padding: 0 4px; }
-  .window-list-item-box.vertical StIcon,
-  .window-list-item-box.vertical StBin {
-    padding: 0; }
-  .window-list-item-box StLabel {
-    font-weight: 400; }
-    .panel-top .window-list-item-box StLabel:ltr,
-    .panel-bottom .window-list-item-box StLabel:ltr {
-      padding: 0 4px 0 0; }
-    .panel-top .window-list-item-box StLabel:rtl,
-    .panel-bottom .window-list-item-box StLabel:rtl {
-      padding: 0 0 0 4px; }
-  .window-list-item-box:progress,
   .window-list-item-box .progress {
-    background-gradient-start: #00e8b7;
+    background-color: rgba(0, 232, 183, 0.8); }
-    background-gradient-end: #00e8b7; }
 
 .window-list-item-demands-attention {
-  background-gradient-start: #00e8b7;
+  background-gradient-direction: vertical;
-  background-gradient-end: #00e8b7;
+  background-gradient-start: #F04A50;
-  color: #f7f7f7; }
+  background-gradient-end: #F04A50; }
-  .panel-top .window-list-item-demands-attention {
-    box-shadow: inset 0 2px #00e8b7; }
-  .panel-bottom .window-list-item-demands-attention {
-    box-shadow: inset 0 -2px #00e8b7; }
-  .panel-left .window-list-item-demands-attention {
-    box-shadow: inset 2px 0 #00e8b7; }
-  .panel-right .window-list-item-demands-attention {
-    box-shadow: inset -2px 0 #00e8b7; }
 
 .window-list-preview {
-  padding: 12px;
+  spacing: 6px;
-  spacing: 8px;
+  color: #98abb2;
-  border: none;
+  border: 1px solid #161819;
-  border-image: url("assets/misc/osd.svg") 9 9 9 9;
+  background-color: #222e39;
-  border-radius: 2px;
+  border-radius: 3px;
-  color: #BAC3CF;
+  padding: 6px 12px 12px 12px;
-  background: none; }
+  font-size: 1em; }
+
+.grouped-window-list-item-label {
+  font-weight: bold;
+  width: 15em;
+  min-width: 5px; }
 
 .grouped-window-list-item-box {
-  border: 0 none transparent;
+  text-align: left;
-  border-image: none;
+  font-weight: bold;
   background-image: none;
-  background-color: #182129;
+  padding-top: 0;
-  color: #BAC3CF;
+  padding-left: 8px;
-  box-shadow: none;
+  padding-right: 8px;
-  font-weight: 400; }
+  transition-duration: 100;
-  .panel-top .grouped-window-list-item-box StIcon,
+  color: rgba(247, 247, 247, 0.6); }
-  .panel-bottom .grouped-window-list-item-box StIcon, .panel-top
+  .grouped-window-list-item-box.top, .grouped-window-list-item-box.bottom {
-  .grouped-window-list-item-box StBin,
+    border-bottom-width: 2px; }
-  .panel-bottom
+    .grouped-window-list-item-box.top StLabel, .grouped-window-list-item-box.bottom StLabel {
-  .grouped-window-list-item-box StBin {
+      padding-left: 2px; }
-    padding: 0 4px; }
+  .grouped-window-list-item-box.right {
-  .panel-top .grouped-window-list-item-box:active, .panel-top .grouped-window-list-item-box:checked {
+    padding-left: 0px;
-    box-shadow: inset 0 2px #526e89; }
+    padding-right: 0px;
-  .panel-bottom .grouped-window-list-item-box:active, .panel-bottom .grouped-window-list-item-box:checked {
+    border-right-width: 2px; }
-    box-shadow: inset 0 -2px #526e89; }
+    .grouped-window-list-item-box.right StBin {
-  .panel-left .grouped-window-list-item-box:active, .panel-left .grouped-window-list-item-box:checked {
+      padding-right: 0; }
-    box-shadow: inset 2px 0 #526e89; }
+  .grouped-window-list-item-box.left {
-  .panel-right .grouped-window-list-item-box:active, .panel-right .grouped-window-list-item-box:checked {
+    padding-left: 0px;
-    box-shadow: inset -2px 0 #526e89; }
+    padding-right: 0px;
-  .panel-top .grouped-window-list-item-box:hover, .panel-top .grouped-window-list-item-box:active:hover, .panel-top .grouped-window-list-item-box:focus, .panel-top .grouped-window-list-item-box:active:focus, .panel-top .grouped-window-list-item-box:focus:hover, .panel-top .grouped-window-list-item-box:active:focus:hover {
+    border-left-width: 2px; }
-    box-shadow: inset 0 2px #00e8b7; }
+    .grouped-window-list-item-box.left StBin {
-  .panel-bottom .grouped-window-list-item-box:hover, .panel-bottom .grouped-window-list-item-box:active:hover, .panel-bottom .grouped-window-list-item-box:focus, .panel-bottom .grouped-window-list-item-box:active:focus, .panel-bottom .grouped-window-list-item-box:focus:hover, .panel-bottom .grouped-window-list-item-box:active:focus:hover {
+      padding-left: 1px; }
-    box-shadow: inset 0 -2px #00e8b7; }
+  .grouped-window-list-item-box:hover, .grouped-window-list-item-box:focus {
-  .panel-left .grouped-window-list-item-box:hover, .panel-left .grouped-window-list-item-box:active:hover, .panel-left .grouped-window-list-item-box:focus, .panel-left .grouped-window-list-item-box:active:focus, .panel-left .grouped-window-list-item-box:focus:hover, .panel-left .grouped-window-list-item-box:active:focus:hover {
+    color: #f7f7f7;
-    box-shadow: inset 2px 0 #00e8b7; }
+    background-color: rgba(24, 33, 41, 0.3); }
-  .panel-right .grouped-window-list-item-box:hover, .panel-right .grouped-window-list-item-box:active:hover, .panel-right .grouped-window-list-item-box:focus, .panel-right .grouped-window-list-item-box:active:focus, .panel-right .grouped-window-list-item-box:focus:hover, .panel-right .grouped-window-list-item-box:active:focus:hover {
+  .grouped-window-list-item-box:active, .grouped-window-list-item-box:checked {
-    box-shadow: inset -2px 0 #00e8b7; }
+    color: #f7f7f7;
-  .grouped-window-list-item-box:progress,
+    border-color: #00e8b7; }
   .grouped-window-list-item-box .progress {
-    background-gradient-start: #00e8b7;
+    background-color: rgba(0, 232, 183, 0.8); }
-    background-gradient-end: #00e8b7; }
 
 .grouped-window-list-item-demands-attention {
-  background-gradient-start: #00e8b7;
+  background-gradient-direction: vertical;
-  background-gradient-end: #00e8b7;
+  background-gradient-start: #F04A50;
-  color: #f7f7f7; }
+  background-gradient-end: #F04A50; }
-  .panel-top .grouped-window-list-item-demands-attention {
+
-    box-shadow: inset 0 2px #00e8b7; }
+.grouped-window-list-thumbnail-label {
-  .panel-bottom .grouped-window-list-item-demands-attention {
+  padding-left: 4px; }
-    box-shadow: inset 0 -2px #00e8b7; }
+
-  .panel-left .grouped-window-list-item-demands-attention {
+.grouped-window-list-number-label {
-    box-shadow: inset 2px 0 #00e8b7; }
+  z-index: 99;
-  .panel-right .grouped-window-list-item-demands-attention {
+  color: #98abb2; }
-    box-shadow: inset -2px 0 #00e8b7; }
+
+.grouped-window-list-badge {
+  border-radius: 256px;
+  background-color: #182129; }
+
+.grouped-window-list-button-label {
+  padding-left: 4px; }
+
+.grouped-window-list-thumbnail-alert {
+  background: rgba(255, 52, 52, 0.3); }
+
+.grouped-window-list-thumbnail-menu {
+  color: #98abb2;
+  border: 1px solid #161819;
+  background-color: #222e39;
+  border-radius: 3px;
+  padding: 0px; }
+  .grouped-window-list-thumbnail-menu > StBoxLayout {
+    padding: 4px; }
+  .grouped-window-list-thumbnail-menu .item-box {
+    padding: 10px;
+    border-radius: 2px;
+    spacing: 4px; }
+    .grouped-window-list-thumbnail-menu .item-box:outlined {
+      padding: 8px;
+      border: 1px solid #00e8b7; }
+    .grouped-window-list-thumbnail-menu .item-box:selected {
+      border: 1px solid #00e8b7; }
+  .grouped-window-list-thumbnail-menu .thumbnail {
+    width: 256px; }
+  .grouped-window-list-thumbnail-menu .separator {
+    width: 1px;
+    background: rgba(255, 255, 255, 0.2); }
 
 .sound-button {
   width: 22px;
@@ -1514,3 +1530,15 @@ StScrollBar {
   border: 0px;
   background-color: rgba(0, 0, 0, 0);
   border-radius: 0px; }
+
+.menu-category-button {
+  padding: 7px;
+  border: 1px solid rgba(0, 0, 0, 0); }
+  .menu-category-button-selected {
+    padding: 7px;
+    color: #f7f7f7;
+    background-color: #00e8b7;
+    border: 1px solid #161819; }
+  .menu-category-button-hover {
+    background-color: rgba(0, 232, 183, 0.3);
+    border-radius: 2px; }

cinnamon/cinnamon.css

@@ -1088,137 +1088,153 @@ StScrollBar {
     background-color: #00e8b7; }
 
 .window-list-box {
-  spacing: 0; }
+  spacing: 6px;
-  .window-list-box .panel-top:ltr,
+  padding-left: 10px;
-  .panel-bottom .window-list-box:ltr {
+  padding-top: 1px; }
-    padding: 0 0 0 8px; }
-  .window-list-box .panel-top:rtl,
-  .panel-bottom .window-list-box:rtl {
-    padding: 0 8px 0 0; }
   .window-list-box.vertical {
-    padding: 6px 0 0 0; }
+    spacing: 2px;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 10px;
+    padding-bottom: 10px; }
   .window-list-box:highlight {
-    background-color: #00e8b7; }
+    background-color: rgba(252, 65, 56, 0.5); }
+
+.window-list-item-label {
+  font-weight: bold;
+  width: 15em;
+  min-width: 5px; }
 
 .window-list-item-box {
-  border: 0 none transparent;
+  font-weight: bold;
-  border-image: none;
   background-image: none;
-  background-color: #182129;
+  padding-top: 0;
-  color: #BAC3CF;
+  padding-left: 8px;
-  box-shadow: none;
+  padding-right: 8px;
-  font-weight: 400; }
+  transition-duration: 100;
-  .window-list-item-box:hover {
+  color: rgba(247, 247, 247, 0.6); }
-    color: #f7f7f7; }
+  .window-list-item-box.top, .window-list-item-box.bottom {
-    .panel-top .window-list-item-box:hover {
+    border-bottom-width: 2px; }
-      box-shadow: inset 0 2px #00e8b7; }
+    .window-list-item-box.top StLabel, .window-list-item-box.bottom StLabel {
-    .panel-bottom .window-list-item-box:hover {
+      padding-left: 2px; }
-      box-shadow: inset 0 -2px #00e8b7; }
+  .window-list-item-box.right {
-    .panel-left .window-list-item-box:hover {
+    padding-left: 0px;
-      box-shadow: inset 2px 0 #00e8b7; }
+    padding-right: 0px;
-    .panel-right .window-list-item-box:hover {
+    border-right-width: 2px; }
-      box-shadow: inset -2px 0 #00e8b7; }
+    .window-list-item-box.right StBin {
-  .window-list-item-box:active, .window-list-item-box:active:hover, .window-list-item-box:checked, .window-list-item-box:checked:hover, .window-list-item-box:focus, .window-list-item-box:focus:hover {
+      padding-right: 0; }
-    color: #f7f7f7; }
+  .window-list-item-box.left {
-    .panel-top .window-list-item-box:active, .panel-top .window-list-item-box:active:hover, .panel-top .window-list-item-box:checked, .panel-top .window-list-item-box:checked:hover, .panel-top .window-list-item-box:focus, .panel-top .window-list-item-box:focus:hover {
+    padding-left: 0px;
-      box-shadow: inset 0 2px #ed254e; }
+    padding-right: 0px;
-    .panel-bottom .window-list-item-box:active, .panel-bottom .window-list-item-box:active:hover, .panel-bottom .window-list-item-box:checked, .panel-bottom .window-list-item-box:checked:hover, .panel-bottom .window-list-item-box:focus, .panel-bottom .window-list-item-box:focus:hover {
+    border-left-width: 2px; }
-      box-shadow: inset 0 -2px #ed254e; }
+    .window-list-item-box.left StBin {
-    .panel-left .window-list-item-box:active, .panel-left .window-list-item-box:active:hover, .panel-left .window-list-item-box:checked, .panel-left .window-list-item-box:checked:hover, .panel-left .window-list-item-box:focus, .panel-left .window-list-item-box:focus:hover {
+      padding-left: 1px; }
-      box-shadow: inset 2px 0 #ed254e; }
+  .window-list-item-box:hover, .window-list-item-box:groupFocus {
-    .panel-right .window-list-item-box:active, .panel-right .window-list-item-box:active:hover, .panel-right .window-list-item-box:checked, .panel-right .window-list-item-box:checked:hover, .panel-right .window-list-item-box:focus, .panel-right .window-list-item-box:focus:hover {
+    color: #f7f7f7;
-      box-shadow: inset -2px 0 #ed254e; }
+    background-color: rgba(247, 247, 247, 0.1); }
-  .panel-top .window-list-item-box StIcon,
+  .window-list-item-box:active, .window-list-item-box:checked, .window-list-item-box:focus, .window-list-item-box:running {
-  .panel-bottom .window-list-item-box StIcon, .panel-top
+    color: #f7f7f7;
-  .window-list-item-box StBin,
+    border-color: #00e8b7; }
-  .panel-bottom
-  .window-list-item-box StBin {
-    padding: 0 4px; }
-  .window-list-item-box.vertical StIcon,
-  .window-list-item-box.vertical StBin {
-    padding: 0; }
-  .window-list-item-box StLabel {
-    font-weight: 400; }
-    .panel-top .window-list-item-box StLabel:ltr,
-    .panel-bottom .window-list-item-box StLabel:ltr {
-      padding: 0 4px 0 0; }
-    .panel-top .window-list-item-box StLabel:rtl,
-    .panel-bottom .window-list-item-box StLabel:rtl {
-      padding: 0 0 0 4px; }
-  .window-list-item-box:progress,
   .window-list-item-box .progress {
-    background-gradient-start: #00e8b7;
+    background-color: rgba(0, 232, 183, 0.8); }
-    background-gradient-end: #00e8b7; }
 
 .window-list-item-demands-attention {
-  background-gradient-start: #00e8b7;
+  background-gradient-direction: vertical;
-  background-gradient-end: #00e8b7;
+  background-gradient-start: #F04A50;
-  color: #f7f7f7; }
+  background-gradient-end: #F04A50; }
-  .panel-top .window-list-item-demands-attention {
-    box-shadow: inset 0 2px #00e8b7; }
-  .panel-bottom .window-list-item-demands-attention {
-    box-shadow: inset 0 -2px #00e8b7; }
-  .panel-left .window-list-item-demands-attention {
-    box-shadow: inset 2px 0 #00e8b7; }
-  .panel-right .window-list-item-demands-attention {
-    box-shadow: inset -2px 0 #00e8b7; }
 
 .window-list-preview {
-  padding: 12px;
+  spacing: 6px;
-  spacing: 8px;
+  color: #98abb2;
-  border: none;
+  border: 1px solid #161819;
-  border-image: url("assets/misc/osd.svg") 9 9 9 9;
+  background-color: #222e39;
-  border-radius: 2px;
+  border-radius: 3px;
-  color: #BAC3CF;
+  padding: 6px 12px 12px 12px;
-  background: none; }
+  font-size: 1em; }
+
+.grouped-window-list-item-label {
+  font-weight: bold;
+  width: 15em;
+  min-width: 5px; }
 
 .grouped-window-list-item-box {
-  border: 0 none transparent;
+  text-align: left;
-  border-image: none;
+  font-weight: bold;
   background-image: none;
-  background-color: #182129;
+  padding-top: 0;
-  color: #BAC3CF;
+  padding-left: 8px;
-  box-shadow: none;
+  padding-right: 8px;
-  font-weight: 400; }
+  transition-duration: 100;
-  .panel-top .grouped-window-list-item-box StIcon,
+  color: rgba(247, 247, 247, 0.6); }
-  .panel-bottom .grouped-window-list-item-box StIcon, .panel-top
+  .grouped-window-list-item-box.top, .grouped-window-list-item-box.bottom {
-  .grouped-window-list-item-box StBin,
+    border-bottom-width: 2px; }
-  .panel-bottom
+    .grouped-window-list-item-box.top StLabel, .grouped-window-list-item-box.bottom StLabel {
-  .grouped-window-list-item-box StBin {
+      padding-left: 2px; }
-    padding: 0 4px; }
+  .grouped-window-list-item-box.right {
-  .panel-top .grouped-window-list-item-box:active, .panel-top .grouped-window-list-item-box:checked {
+    padding-left: 0px;
-    box-shadow: inset 0 2px #526e89; }
+    padding-right: 0px;
-  .panel-bottom .grouped-window-list-item-box:active, .panel-bottom .grouped-window-list-item-box:checked {
+    border-right-width: 2px; }
-    box-shadow: inset 0 -2px #526e89; }
+    .grouped-window-list-item-box.right StBin {
-  .panel-left .grouped-window-list-item-box:active, .panel-left .grouped-window-list-item-box:checked {
+      padding-right: 0; }
-    box-shadow: inset 2px 0 #526e89; }
+  .grouped-window-list-item-box.left {
-  .panel-right .grouped-window-list-item-box:active, .panel-right .grouped-window-list-item-box:checked {
+    padding-left: 0px;
-    box-shadow: inset -2px 0 #526e89; }
+    padding-right: 0px;
-  .panel-top .grouped-window-list-item-box:hover, .panel-top .grouped-window-list-item-box:active:hover, .panel-top .grouped-window-list-item-box:focus, .panel-top .grouped-window-list-item-box:active:focus, .panel-top .grouped-window-list-item-box:focus:hover, .panel-top .grouped-window-list-item-box:active:focus:hover {
+    border-left-width: 2px; }
-    box-shadow: inset 0 2px #00e8b7; }
+    .grouped-window-list-item-box.left StBin {
-  .panel-bottom .grouped-window-list-item-box:hover, .panel-bottom .grouped-window-list-item-box:active:hover, .panel-bottom .grouped-window-list-item-box:focus, .panel-bottom .grouped-window-list-item-box:active:focus, .panel-bottom .grouped-window-list-item-box:focus:hover, .panel-bottom .grouped-window-list-item-box:active:focus:hover {
+      padding-left: 1px; }
-    box-shadow: inset 0 -2px #00e8b7; }
+  .grouped-window-list-item-box:hover, .grouped-window-list-item-box:focus {
-  .panel-left .grouped-window-list-item-box:hover, .panel-left .grouped-window-list-item-box:active:hover, .panel-left .grouped-window-list-item-box:focus, .panel-left .grouped-window-list-item-box:active:focus, .panel-left .grouped-window-list-item-box:focus:hover, .panel-left .grouped-window-list-item-box:active:focus:hover {
+    color: #f7f7f7;
-    box-shadow: inset 2px 0 #00e8b7; }
+    background-color: rgba(24, 33, 41, 0.3); }
-  .panel-right .grouped-window-list-item-box:hover, .panel-right .grouped-window-list-item-box:active:hover, .panel-right .grouped-window-list-item-box:focus, .panel-right .grouped-window-list-item-box:active:focus, .panel-right .grouped-window-list-item-box:focus:hover, .panel-right .grouped-window-list-item-box:active:focus:hover {
+  .grouped-window-list-item-box:active, .grouped-window-list-item-box:checked {
-    box-shadow: inset -2px 0 #00e8b7; }
+    color: #f7f7f7;
-  .grouped-window-list-item-box:progress,
+    border-color: #00e8b7; }
   .grouped-window-list-item-box .progress {
-    background-gradient-start: #00e8b7;
+    background-color: rgba(0, 232, 183, 0.8); }
-    background-gradient-end: #00e8b7; }
 
 .grouped-window-list-item-demands-attention {
-  background-gradient-start: #00e8b7;
+  background-gradient-direction: vertical;
-  background-gradient-end: #00e8b7;
+  background-gradient-start: #F04A50;
-  color: #f7f7f7; }
+  background-gradient-end: #F04A50; }
-  .panel-top .grouped-window-list-item-demands-attention {
+
-    box-shadow: inset 0 2px #00e8b7; }
+.grouped-window-list-thumbnail-label {
-  .panel-bottom .grouped-window-list-item-demands-attention {
+  padding-left: 4px; }
-    box-shadow: inset 0 -2px #00e8b7; }
+
-  .panel-left .grouped-window-list-item-demands-attention {
+.grouped-window-list-number-label {
-    box-shadow: inset 2px 0 #00e8b7; }
+  z-index: 99;
-  .panel-right .grouped-window-list-item-demands-attention {
+  color: #98abb2; }
-    box-shadow: inset -2px 0 #00e8b7; }
+
+.grouped-window-list-badge {
+  border-radius: 256px;
+  background-color: #182129; }
+
+.grouped-window-list-button-label {
+  padding-left: 4px; }
+
+.grouped-window-list-thumbnail-alert {
+  background: rgba(255, 52, 52, 0.3); }
+
+.grouped-window-list-thumbnail-menu {
+  color: #98abb2;
+  border: 1px solid #161819;
+  background-color: #222e39;
+  border-radius: 3px;
+  padding: 0px; }
+  .grouped-window-list-thumbnail-menu > StBoxLayout {
+    padding: 4px; }
+  .grouped-window-list-thumbnail-menu .item-box {
+    padding: 10px;
+    border-radius: 2px;
+    spacing: 4px; }
+    .grouped-window-list-thumbnail-menu .item-box:outlined {
+      padding: 8px;
+      border: 1px solid #00e8b7; }
+    .grouped-window-list-thumbnail-menu .item-box:selected {
+      border: 1px solid #00e8b7; }
+  .grouped-window-list-thumbnail-menu .thumbnail {
+    width: 256px; }
+  .grouped-window-list-thumbnail-menu .separator {
+    width: 1px;
+    background: rgba(255, 255, 255, 0.2); }
 
 .sound-button {
   width: 22px;
@@ -1514,3 +1530,15 @@ StScrollBar {
   border: 0px;
   background-color: rgba(0, 0, 0, 0);
   border-radius: 0px; }
+
+.menu-category-button {
+  padding: 7px;
+  border: 1px solid rgba(0, 0, 0, 0); }
+  .menu-category-button-selected {
+    padding: 7px;
+    color: #f7f7f7;
+    background-color: #00e8b7;
+    border: 1px solid #161819; }
+  .menu-category-button-hover {
+    background-color: rgba(0, 232, 183, 0.3);
+    border-radius: 2px; }

gnome-shell/_common.scss

@@ -74,6 +74,8 @@ StEntry {
     warning-color: $warning_color;
     padding: 0 4px;
   }
+
+  StLabel.hint-text { color: transparentize($fg_color, 0.3); }
 }
 
 
@@ -522,7 +524,11 @@ StScrollBar {
     box-shadow: $depth6;
   }
 
-  .popup-menu-content { padding: 15px 0; }
+  .popup-menu-content { 
+    padding: 15px 0; 
+    background-color: $bg_color;
+    border-radius: 7px;
+  }
   .popup-menu-item {
     spacing: 5px;
     padding: 5px;
@@ -718,7 +724,10 @@ StScrollBar {
     spacing: 8px;
   }
 
-  .ws-switcher-active-up, .ws-switcher-active-down {
+  .ws-switcher-active-up,
+  .ws-switcher-active-down,
+  .ws-switcher-active-left,
+  .ws-switcher-active-right {
     height: 50px;
     background-color: $selected_bg_color;
     color: $selected_fg_color;
@@ -1379,6 +1388,10 @@ StScrollBar {
   spacing: 24px; //
 }
 
+#overview.cosmic-solid-bg {
+  background-color: $base_color !important;
+}
+
 .overview-controls {
   padding-bottom: 32px;
 }
@@ -1433,6 +1446,20 @@ StScrollBar {
 
   //search results
 
+  %search-section-content-item {  
+    &:focus,
+    &:hover,
+    &:selected {
+      background-color: transparentize($osd_fg_color, .9);
+      transition-duration: 200ms;
+    }
+  
+    &:active,
+    &:checked {
+      background-color: transparentize(darken($osd_bg_color, 10%), .1);
+    }
+  }
+
   #searchResultsBin {
     max-width: 1000px;
   }
@@ -1457,7 +1484,7 @@ StScrollBar {
   }
   .list-search-results { spacing: 3px; }
 
-  .search-section-separator { height: 2px; background-color: rgba(255, 255, 255, 0.2); }
+  .search-section-separator { height: 2px; background-color: $gray; }
 
   .list-search-result-content { spacing: 30px; }
   .list-search-result-title { color: lighten($topbar_color,5%); spacing: 12px; }
@@ -1466,6 +1493,12 @@ StScrollBar {
   .list-search-provider-content { spacing: 20px; }
   .search-provider-icon { padding: 15px; }
 
+  //Icon tile
+  .search-provider-icon,
+  .list-search-result {
+    @extend %search-section-content-item;
+  }
+
 
   /* DASHBOARD */
 
@@ -1548,16 +1581,6 @@ StScrollBar {
     }
   }
 
-  //Icon tile
-  .search-provider-icon,
-  .list-search-result {
-    @extend %icon_tile;
-    &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); }
-    &:focus, &:selected, &:hover {
-      background-color: transparentize($bg_color,.7);
-      transition-duration: 200ms;
-    }
-  }
   .app-well-app,
   .app-well-app.app-folder,
   .show-apps,

gnome-shell/_cosmic.scss

@@ -0,0 +1,31 @@
+
+/* Pop_OS COSMIC Dock styling, append !important to any changed rules */
+
+.cosmic-dock #dock {
+  border-radius: 12px 12px 12px 12px !important;
+  border: 0 !important;
+  background-color: darken($bg_color, 3%);
+  margin: 4px !important; 
+}
+
+.cosmic-dock.extended #dock {
+  border-radius: 0px !important;
+  margin: 0 !important; }
+
+.cosmic-dock.extended.side #dock {
+  border-top-width: 0 !important;
+  border-bottom-width: 0 !important; }
+
+.cosmic-dock.extended.side.left #dock {
+  border-left-width: 0 !important; }
+
+.cosmic-dock.extended.side.right #dock {
+  border-right-width: 0 !important; }
+
+.cosmic-dock.extended.bottom #dock {
+  border-bottom-width: 0 !important;
+  border-left-width: 0 !important;
+  border-right-width: 0 !important; }
+
+.cosmic-dock .app-well-app:hover .overview-icon, .cosmic-dock .app-well-app:focus .overview-icon, .cosmic-dock .app-well-app:selected .overview-icon {
+  border-radius: 11px; }

gnome-shell/gnome-shell.css

@@ -111,11 +111,12 @@ StEntry {
     icon-size: 16px;
     warning-color: #ff9f39;
     padding: 0 4px; }
+  StEntry StLabel.hint-text {
+    color: rgba(152, 171, 178, 0.7); }
 
 /* Scrollbars */
 StScrollView.vfade {
   -st-vfade-offset: 68px; }
-
 StScrollView.hfade {
   -st-hfade-offset: 68px; }
 
@@ -162,18 +163,14 @@ StScrollBar {
 /* Check Boxes */
 .check-box StBoxLayout {
   spacing: .8em; }
-
 .check-box StBin {
   width: 24px;
   height: 22px;
   background-image: url("assets/checkbox-off.svg"); }
-
 .check-box:focus, .check-box:hover StBin {
   background-image: url("assets/checkbox-off-focused.svg"); }
-
 .check-box:checked StBin {
   background-image: url("assets/checkbox.svg"); }
-
 .check-box:focus:checked StBin {
   background-image: url("assets/checkbox-focused.svg"); }
 
@@ -373,7 +370,6 @@ StScrollBar {
 
 .mount-dialog-app-list-item-icon:ltr {
   padding-right: 17px; }
-
 .mount-dialog-app-list-item-icon:rtl {
   padding-left: 17px; }
 
@@ -473,7 +469,6 @@ StScrollBar {
 .extension-dialog .message-dialog-main-layout {
   spacing: 24px;
   padding: 10px; }
-
 .extension-dialog .message-dialog-title {
   color: #576c74; }
 
@@ -499,7 +494,9 @@ StScrollBar {
     background-color: rgba(0, 0, 0, 0.2);
     box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
   .popup-menu .popup-menu-content {
-    padding: 15px 0; }
+    padding: 15px 0;
+    background-color: #222e39;
+    border-radius: 7px; }
   .popup-menu .popup-menu-item {
     spacing: 5px;
     padding: 5px; }
@@ -663,7 +660,10 @@ StScrollBar {
   padding: 0px;
   spacing: 8px; }
 
-.ws-switcher-active-up, .ws-switcher-active-down {
+.ws-switcher-active-up,
+.ws-switcher-active-down,
+.ws-switcher-active-left,
+.ws-switcher-active-right {
   height: 50px;
   background-color: #00e8b7;
   color: #f7f7f7;
@@ -772,17 +772,9 @@ StScrollBar {
     #panel .panel-button .system-status-icon {
       icon-size: 1.09em;
       padding: 0 5px; }
-    .unlock-screen #panel .panel-button,
+    .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button {
-    .login-screen #panel .panel-button,
-    .lock-screen #panel .panel-button {
       color: #b5c3c8; }
-      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
+      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
-      .login-screen #panel .panel-button:focus,
-      .login-screen #panel .panel-button:hover,
-      .login-screen #panel .panel-button:active,
-      .lock-screen #panel .panel-button:focus,
-      .lock-screen #panel .panel-button:hover,
-      .lock-screen #panel .panel-button:active {
         color: #b5c3c8; }
     #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
       box-shadow: none; }
@@ -867,7 +859,6 @@ StScrollBar {
 .events-button:hover,
 .events-button:focus {
   background-color: #2c3b49; }
-
 .datemenu-today-button:active,
 .world-clocks-button:active,
 .weather-button:active,
@@ -1031,9 +1022,8 @@ StScrollBar {
   padding: 8px;
   color: #98abb2;
   background-color: transparent; }
-
+.message-list-section-close:hover > StIcon, .message-list-section-close:focus > StIcon
-.message-list-section-close:hover > StIcon,
+.message-list-section-close:active > StIcon {
-.message-list-section-close:focus > StIcon .message-list-section-close:active > StIcon {
   color: #ff007a;
   background: transparent; }
 
@@ -1100,13 +1090,11 @@ StScrollBar {
 .world-clocks-button .world-clocks-city {
   color: #98abb2;
   font-weight: normal; }
-
 .world-clocks-button .world-clocks-time {
   font-weight: bold;
   color: #98abb2;
   font-feature-settings: "lnum";
   text-align: right; }
-
 .world-clocks-button .world-clocks-timezone {
   color: #627a82;
   font-feature-settings: "tnum"; }
@@ -1117,14 +1105,12 @@ StScrollBar {
   font-weight: bold; }
   .weather-button .weather-header.location {
     font-weight: normal; }
-
 .weather-button .weather-forecast-time {
   color: #7b939c;
   font-feature-settings: "tnum";
   font-weight: normal;
   padding-top: 0.2em;
   padding-bottom: 0.4em; }
-
 .weather-button .weather-forecast-temp {
   font-weight: bold; }
 
@@ -1255,6 +1241,9 @@ StScrollBar {
 #overview {
   spacing: 24px; }
 
+#overview.cosmic-solid-bg {
+  background-color: #1E282C !important; }
+
 .overview-controls {
   padding-bottom: 32px; }
 
@@ -1299,6 +1288,17 @@ StScrollBar {
     .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
       color: #98abb2; }
 
+.search-provider-icon:focus,
+.list-search-result:focus, .search-provider-icon:hover,
+.list-search-result:hover, .search-provider-icon:selected,
+.list-search-result:selected {
+  background-color: rgba(152, 171, 178, 0.1);
+  transition-duration: 200ms; }
+.search-provider-icon:active,
+.list-search-result:active, .search-provider-icon:checked,
+.list-search-result:checked {
+  background-color: rgba(15, 20, 25, 0.85); }
+
 #searchResultsBin {
   max-width: 1000px; }
 
@@ -1322,7 +1322,7 @@ StScrollBar {
 
 .search-section-separator {
   height: 2px;
-  background-color: rgba(255, 255, 255, 0.2); }
+  background-color: #2f404f; }
 
 .list-search-result-content {
   spacing: 30px; }
@@ -1408,25 +1408,12 @@ StScrollBar {
   .app-view-control:last-child {
     border-radius: 0 3px 3px 0; }
 
-.search-provider-icon:active, .search-provider-icon:checked,
-.list-search-result:active,
-.list-search-result:checked {
-  background-color: rgba(15, 20, 25, 0.85); }
-
-.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
-.list-search-result:focus,
-.list-search-result:selected,
-.list-search-result:hover {
-  background-color: rgba(34, 46, 57, 0.3);
-  transition-duration: 200ms; }
-
 .app-well-app,
 .app-well-app.app-folder,
 .show-apps,
 .grid-search-result {
   border: none; }
-  .app-well-app:active .overview-icon,
+  .app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
-  .app-well-app:checked .overview-icon,
   .app-well-app.app-folder:active .overview-icon,
   .app-well-app.app-folder:checked .overview-icon,
   .show-apps:active .overview-icon,
@@ -1436,9 +1423,7 @@ StScrollBar {
     background-color: rgba(21, 28, 35, 0.85);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
     color: #98abb2; }
-  .app-well-app:hover .overview-icon,
+  .app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon,
-  .app-well-app:focus .overview-icon,
-  .app-well-app:selected .overview-icon,
   .app-well-app.app-folder:hover .overview-icon,
   .app-well-app.app-folder:focus .overview-icon,
   .app-well-app.app-folder:selected .overview-icon,
@@ -1461,8 +1446,7 @@ StScrollBar {
   box-shadow: 0px 0px 5px 4px rgba(0, 232, 183, 0.8);
   margin-bottom: 0px; }
 
-.search-provider-icon,
+.app-well-app .overview-icon,
-.list-search-result, .app-well-app .overview-icon,
 .app-well-app.app-folder .overview-icon,
 .show-apps .overview-icon,
 .grid-search-result .overview-icon {
@@ -1853,8 +1837,7 @@ StScrollBar {
 
 .login-dialog-not-listed-label {
   padding-left: 2px; }
-  .login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
+  .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
-  .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
     color: #98abb2; }
 
 .login-dialog-not-listed-label {
@@ -1901,7 +1884,6 @@ StScrollBar {
 
 .user-widget-label:ltr {
   padding-left: 18px; }
-
 .user-widget-label:rtl {
   padding-right: 18px; }
 
@@ -2029,7 +2011,6 @@ StScrollBar {
 .lg-dialog StEntry {
   selection-background-color: #bbbbbb;
   selected-color: #333333; }
-
 .lg-dialog .shell-link {
   color: #999999; }
   .lg-dialog .shell-link:hover {
@@ -2084,3 +2065,34 @@ StScrollBar {
 
 .openweather-current-databox-captions, .openweather-forecast-day {
   color: #00e8b7; }
+
+/* Pop_OS COSMIC Dock styling, append !important to any changed rules */
+.cosmic-dock #dock {
+  border-radius: 12px 12px 12px 12px !important;
+  border: 0 !important;
+  background-color: #1c262f;
+  margin: 4px !important; }
+
+.cosmic-dock.extended #dock {
+  border-radius: 0px !important;
+  margin: 0 !important; }
+
+.cosmic-dock.extended.side #dock {
+  border-top-width: 0 !important;
+  border-bottom-width: 0 !important; }
+
+.cosmic-dock.extended.side.left #dock {
+  border-left-width: 0 !important; }
+
+.cosmic-dock.extended.side.right #dock {
+  border-right-width: 0 !important; }
+
+.cosmic-dock.extended.bottom #dock {
+  border-bottom-width: 0 !important;
+  border-left-width: 0 !important;
+  border-right-width: 0 !important; }
+
+.cosmic-dock .app-well-app:hover .overview-icon, .cosmic-dock .app-well-app:focus .overview-icon, .cosmic-dock .app-well-app:selected .overview-icon {
+  border-radius: 11px; }
+
+/*# sourceMappingURL=gnome-shell.css.map */

gnome-shell/gnome-shell.scss

@@ -3,4 +3,5 @@ $subtheme: 'main';
 @import "colors"; //use gtk colors
 @import "drawing";
 @import "common";
-@import "extensions"
+@import "extensions";
+@import "cosmic"

gnome-shell/v40/gnome-shell.scss

@@ -0,0 +1,6 @@
+$subtheme: 'main';
+
+@import "../colors"; //use gtk colors
+@import "../drawing";
+@import "common";
+@import "../extensions"

gtk-3.0/_apps.scss

@@ -16,3 +16,4 @@
 @import 'apps/geary';
 @import 'apps/lightdm';
 @import 'apps/nemo';
+@import 'apps/caja';

gtk-3.0/_colors-public.scss

@@ -109,3 +109,77 @@ read if you used those and something break with a version upgrade you're on your
 //Budgie desktop
 @define-color budgie_tasklist_indicator_color #{"" +$selected_bg_color};
 @define-color budgie_tasklist_indicator_color_active #{"" +$selected_bg_color};
+
+
+// Elementary OS colors
+@define-color STRAWBERRY_100 #{$STRAWBERRY_100};
+@define-color STRAWBERRY_300 #{$STRAWBERRY_300};
+@define-color STRAWBERRY_500 #{$STRAWBERRY_500};
+@define-color STRAWBERRY_700 #{$STRAWBERRY_700};
+@define-color STRAWBERRY_900 #{$STRAWBERRY_900};
+
+@define-color ORANGE_100 #{$ORANGE_100};
+@define-color ORANGE_300 #{$ORANGE_300};
+@define-color ORANGE_500 #{$ORANGE_500};
+@define-color ORANGE_700 #{$ORANGE_700};
+@define-color ORANGE_900 #{$ORANGE_900};
+
+@define-color BANANA_100 #{$BANANA_100};
+@define-color BANANA_300 #{$BANANA_300};
+@define-color BANANA_500 #{$BANANA_500};
+@define-color BANANA_700 #{$BANANA_700};
+@define-color BANANA_900 #{$BANANA_900};
+
+@define-color LIME_100 #{$LIME_100};
+@define-color LIME_300 #{$LIME_300};
+@define-color LIME_500 #{$LIME_500};
+@define-color LIME_700 #{$LIME_700};
+@define-color LIME_900 #{$LIME_900};
+
+@define-color MINT_100 #{$MINT_100};
+@define-color MINT_300 #{$MINT_300};
+@define-color MINT_500 #{$MINT_500};
+@define-color MINT_700 #{$MINT_700};
+@define-color MINT_900 #{$MINT_900};
+
+@define-color BLUEBERRY_100 #{$BLUEBERRY_100};
+@define-color BLUEBERRY_300 #{$BLUEBERRY_300};
+@define-color BLUEBERRY_500 #{$BLUEBERRY_500};
+@define-color BLUEBERRY_700 #{$BLUEBERRY_700};
+@define-color BLUEBERRY_900 #{$BLUEBERRY_900};
+
+@define-color BUBBLEGUM_100 #{$BUBBLEGUM_100};
+@define-color BUBBLEGUM_300 #{$BUBBLEGUM_300};
+@define-color BUBBLEGUM_500 #{$BUBBLEGUM_500};
+@define-color BUBBLEGUM_700 #{$BUBBLEGUM_700};
+@define-color BUBBLEGUM_900 #{$BUBBLEGUM_900};
+
+@define-color GRAPE_100 #{$GRAPE_100};
+@define-color GRAPE_300 #{$GRAPE_300};
+@define-color GRAPE_500 #{$GRAPE_500};
+@define-color GRAPE_700 #{$GRAPE_700};
+@define-color GRAPE_900 #{$GRAPE_900};
+
+@define-color COCOA_100 #{$COCOA_100};
+@define-color COCOA_300 #{$COCOA_300};
+@define-color COCOA_500 #{$COCOA_500};
+@define-color COCOA_700 #{$COCOA_700};
+@define-color COCOA_900 #{$COCOA_900};
+
+@define-color SILVER_100 #{$SILVER_100};
+@define-color SILVER_300 #{$SILVER_300};
+@define-color SILVER_500 #{$SILVER_500};
+@define-color SILVER_700 #{$SILVER_700};
+@define-color SILVER_900 #{$SILVER_900};
+
+@define-color SLATE_100 #{$SLATE_100};
+@define-color SLATE_300 #{$SLATE_300};
+@define-color SLATE_500 #{$SLATE_500};
+@define-color SLATE_700 #{$SLATE_700};
+@define-color SLATE_900 #{$SLATE_900};
+
+@define-color BLACK_100 #{$BLACK_100};
+@define-color BLACK_300 #{$BLACK_300};
+@define-color BLACK_500 #{$BLACK_500};
+@define-color BLACK_700 #{$BLACK_700};
+@define-color BLACK_900 #{"" + $BLACK_900};

gtk-3.0/_elementary-colors.scss

@@ -0,0 +1,71 @@
+$STRAWBERRY_100: #ff8c82;
+$STRAWBERRY_300: #ed5353;
+$STRAWBERRY_500: #c6262e;
+$STRAWBERRY_700: #a10705;
+$STRAWBERRY_900: #7a0000;
+
+$ORANGE_100: #ffc27d;
+$ORANGE_300: #ffa154;
+$ORANGE_500: #f37329;
+$ORANGE_700: #cc3b02;
+$ORANGE_900: #a62100;
+
+$BANANA_100: #fff394;
+$BANANA_300: #ffe16b;
+$BANANA_500: #f9c440;
+$BANANA_700: #d48e15;
+$BANANA_900: #ad5f00;
+
+$LIME_100: #d1ff82;
+$LIME_300: #9bdb4d;
+$LIME_500: #68b723;
+$LIME_700: #3a9104;
+$LIME_900: #206b00;
+
+$MINT_100: #89ffdd;
+$MINT_300: #43d6b5;
+$MINT_500: #28bca3;
+$MINT_700: #0e9a83;
+$MINT_900: #007367;
+
+$BLUEBERRY_100: #8cd5ff;
+$BLUEBERRY_300: #64baff;
+$BLUEBERRY_500: #3689e6;
+$BLUEBERRY_700: #0d52bf;
+$BLUEBERRY_900: #002e99;
+
+$BUBBLEGUM_100: #fe9ab8;
+$BUBBLEGUM_300: #f4679d;
+$BUBBLEGUM_500: #de3e80;
+$BUBBLEGUM_700: #bc245d;
+$BUBBLEGUM_900: #910e38;
+
+$GRAPE_100: #e4c6fa;
+$GRAPE_300: #cd9ef7;
+$GRAPE_500: #a56de2;
+$GRAPE_700: #7239b3;
+$GRAPE_900: #452981;
+
+$COCOA_100: #a3907c;
+$COCOA_300: #8a715e;
+$COCOA_500: #715344;
+$COCOA_700: #57392d;
+$COCOA_900: #3d211b;
+
+$SILVER_100: #fafafa;
+$SILVER_300: #d4d4d4;
+$SILVER_500: #abacae;
+$SILVER_700: #7e8087;
+$SILVER_900: #555761;
+
+$SLATE_100: #95a3ab;
+$SLATE_300: #667885;
+$SLATE_500: #485a6c;
+$SLATE_700: #273445;
+$SLATE_900: #0e141f;
+
+$BLACK_100: #666;
+$BLACK_300: #4d4d4d;
+$BLACK_500: #333;
+$BLACK_700: #1a1a1a;
+$BLACK_900: #000;

gtk-3.0/apps/_caja.scss

@@ -0,0 +1,79 @@
+.caja-notebook {
+
+    .frame { border-width: 0 0 1px; }
+
+    .entry {
+        background: $bg_color;
+        color: $fg_color;
+        border-color: $borders_color;
+        &:selected {
+            background: $selected_bg_color;
+            color: $selected_fg_color;
+        }
+    }
+}
+  
+  /**************
+  * Caja sidebar *
+  **************/
+  
+.caja-side-pane {
+
+    .frame { border-width: 1px 0 0; }
+
+    background: $headerbar_color;
+    treeview.view,
+    textview.view text,
+    viewport.frame,
+    widget .vertical {
+        background: $_sidebar_color;
+        padding: 3px 2px;
+        color: #98abb2;
+        &:hover {
+        background-color: transparentize(darken($_sidebar_color, 2%), 0.05);
+        }
+        &:selected {
+        color: $selected_fg_color;
+        background:$selected_bg_color;
+        }
+    }
+}
+  
+  /**************
+  * Caja pathbar *
+  **************/
+  
+.caja-navigation-window paned, .caja-navigation-window .primary-toolbar {
+    background: $headerbar_color;
+}
+  
+.caja-navigation-window   {
+
+    .primary-toolbar button,
+    .vertical  button.image-button.toggle:not(.text-button) {
+        &, &:backdrop { @include button(undecorated); }
+        &:hover,
+        &:active,
+        &:backdrop:active,
+        &:backdrop:checked {
+            background: $selected_bg_color;
+            box-shadow: none;
+            &, & label {
+                color: $selected_fg_color;  
+            }
+        }
+    }
+}
+  
+.caja-pathbar button {
+    @include button(normal-header);
+    margin-top: 7px;
+    margin-bottom: 7px;
+    &:hover { color: $selected_bg_color; }
+    &:checked { @include button(active-header); }
+    &:backdrop:disabled {
+        @include button(backdrop-header,$base_color,transparentize($fg_color,0.8));
+    }
+
+}
+  

gtk-3.0/apps/_nemo.scss

@@ -61,4 +61,9 @@
         }
     }
 
+    .nemo-inactive-pane .view,
+    .nemo-inactive-pane iconview {
+        background-color: darken($base_color, 5%); 
+    }
+    
 }

gtk-3.0/apps/_pantheon.scss

@@ -305,3 +305,145 @@ LibraryWindow {
     }
   }
 }
+
+
+/**************************
+ * Colors in context menu *
+**************************/
+
+checkbutton.color-button {
+  border: 1px solid $borders_color;
+  border-radius: 100px;
+  background-clip: border-box;
+  padding: 0;
+  margin: 2px 1px;
+
+  > check {
+    -gtk-icon-source: none;
+    background: none;
+    margin-right: 0;
+    padding: 2px;
+  }
+
+  &.none {
+    > check {
+      background-color: transparent;
+      border-radius: 100px;
+      -gtk-icon-source: -gtk-icontheme("close-symbolic");
+    }
+  }
+
+}
+
+radiobutton.color-button {
+  > radio {
+    -gtk-icon-source: none;
+    margin-right: 0;
+    border: 1px solid rgba(black, 0.15);
+    border-radius: 100px;
+    background-clip: border-box;
+  }
+
+  &:active > radio {
+    border: 1px solid rgba(black, 0.35);
+  }
+}
+
+.color-button {
+  check,
+  check:checked,
+  radio,
+  radio:checked, {
+      background-image: none;
+      border: 1px solid rgba(black, 0.2);
+      border-radius: 50%;
+      box-shadow: inset-shadow();
+      color: $base_color;
+      -gtk-icon-source: -gtk-icontheme("check-active-symbolic");
+      min-height: rem(12px);
+      min-width: rem(12px);
+      padding: rem(3px);
+  }
+
+  &.red check,
+  &.red radio,
+  &.strawberry check,
+  &.strawberry radio {
+      background-color: #{'@STRAWBERRY_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@STRAWBERRY_500'};
+  }
+
+  &.orange check,
+  &.orange radio {
+      background-color: #{'@ORANGE_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@ORANGE_500'};
+  }
+
+  &.yellow check,
+  &.yellow radio,
+  &.banana check,
+  &.banana radio {
+      background-color: #{'@BANANA_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@BANANA_700'};
+  }
+
+  &.green check,
+  &.green radio,
+  &.lime check,
+  &.lime radio {
+      background-color: #{'@LIME_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@LIME_700'};
+  }
+
+  &.blue check,
+  &.blue radio,
+  &.blueberry check,
+  &.blueberry radio {
+      background-color: #{'@BLUEBERRY_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@BLUEBERRY_700'};
+  }
+
+  &.purple check,
+  &.purple radio,
+  &.grape check,
+  &.grape radio {
+      background-color: #{'@GRAPE_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@GRAPE_700'};
+  }
+
+  &.brown check,
+  &.brown radio,
+  &.cocoa check,
+  &.cocoa radio {
+      background-color: #{'@COCOA_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@COCOA_500'};
+  }
+
+  &.mint check,
+  &.mint radio  {
+      background-color: #{'@MINT_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@MINT_700'};
+  }
+
+  &.pink check,
+  &.pink radio,
+  &.bubblegum check,
+  &.bubblegum radio  {
+      background-color: #{'@BUBBLEGUM_500'};
+      -gtk-icon-shadow: 0 1px 1px #{'@BUBBLEGUM_700'};
+  }
+
+  &.slate check,
+  &.slate radio  {
+      background-color: #{'@SLATE_300'};
+      -gtk-icon-shadow: 0 1px 1px #{'@SLATE_500'};
+
+  }
+
+  &.auto radio {
+      background-image: url("assets/color-button-auto.png");
+      background-position: -1px -1px;
+      background-repeat: no-repeat;
+      background-size: calc(100% + 2px);
+  }
+}

gtk-3.0/apps/_xfce.scss

@@ -75,14 +75,14 @@ scrolledwindow.sidebar treeview.view {
 }
 
 /* path-bar of thunar */
-window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button {
+window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.toggle.path-bar-button, .thunar toolbar .path-bar-button {
   margin-top: 7px;
   margin-bottom: 7px;
   &:hover { color: $selected_bg_color; }
   &:checked { @include button(active-header); }
 }
 
-window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.path-bar-button {
+window.thunar toolbar#location-toolbar > toolitem > widget > widget.linked.path-bar > button.path-bar-button, .thunar toolbar .path-bar-button {
   background: none;
   outline: none;
   border: none;

gtk-3.0/gtk-dark.scss

@@ -3,6 +3,7 @@
 $variant: 'dark';
 
 @import 'colors';
+@import 'elementary-colors';
 @import 'colors-public';
 @import 'drawing';
 @import 'common';

gtk-3.0/gtk.scss

@@ -3,6 +3,7 @@
 $variant: 'light';
 
 @import 'colors';
+@import 'elementary-colors';
 @import 'colors-public';
 @import 'drawing';
 @import 'common';

package-lock.json

@@ -4880,9 +4880,9 @@
       "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
     },
     "y18n": {
-      "version": "3.2.2",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ=="
+      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
     },
     "yallist": {
       "version": "2.1.2",

src/render-gtk3-assets-hidpi.py

@@ -1,7 +1,5 @@
 #!/usr/bin/python3
 
-# Thanks to the GNOME theme nerds for the original source of this script
-
 import os
 import sys
 import xml.sax
@@ -32,9 +30,9 @@ def wait_for_prompt(process, command=None):
         return
 
     output += process.stdout.read(1)
-    while output != b'\n>':
+    # while output != b'\n>':
-        output += process.stdout.read(1)
+    #     output += process.stdout.read(1)
-        output = output[1:]
+    #     output = output[1:]
 
 
 def start_inkscape():
@@ -51,9 +49,8 @@ def inkscape_render_rect(icon_file, rect, output_file):
     if inkscape_process is None:
         inkscape_process = start_inkscape()
     wait_for_prompt(inkscape_process,
-                    '--export-dpi=180 %s -i %s -e %s'
+                    'file-open:%s; export-id:%s; export-filename:%s; export-dpi:180; export-do' %
-                    % (icon_file, rect, output_file)
+                    (icon_file, rect, output_file))
-                    )
     optimize_png(output_file)
 
 

src/render-gtk3-assets.py

@@ -1,7 +1,5 @@
 #!/usr/bin/python3
 
-# Thanks to the GNOME theme nerds for the original source of this script
-
 import os
 import sys
 import xml.sax
@@ -32,9 +30,9 @@ def wait_for_prompt(process, command=None):
         return
 
     output += process.stdout.read(1)
-    while output != b'\n>':
+    # while output != b'\n>':
-        output += process.stdout.read(1)
+    #     output += process.stdout.read(1)
-        output = output[1:]
+    #     output = output[1:]
 
 
 def start_inkscape():
@@ -51,7 +49,7 @@ def inkscape_render_rect(icon_file, rect, output_file):
     if inkscape_process is None:
         inkscape_process = start_inkscape()
     wait_for_prompt(inkscape_process,
-                    '%s -i %s -e %s' %
+                    'file-open:%s; export-id:%s; export-filename:%s; export-do' %
                     (icon_file, rect, output_file))
     optimize_png(output_file)