Fix odd border around gtk apps on i3

Fix level bar not showing in file manager
Fix wrong accent color in file manager

.gitignore

@@ -5,4 +5,10 @@ node_modules/
 .sass-cache/
 *.css.map
 
-_gnome-shell/
+_gnome-shell/
+gnome-shell/dark-and-white/
+gnome-shell/dark/
+gnome-shell/light/
+
+
+install.sh

gnome-shell/_colors.scss

@@ -1,20 +1,23 @@
 $base_color:#1E282C;
-$bg_color: transparentize( #222e39, 0.07);
+$bg_color:#222e39; //252b2f
-$gray: lighten(#222e39, 15%);
+$main_dark: darken($bg_color, 5%);
+$gray: lighten($bg_color, 7%);
 $fg_color: #98abb2;
 $dracula: #222e39;
-$topbar_color: #98abb2;
+$topbar_color:  lighten($fg_color, 40%);
 
 $lime: #84ff39;
 $red: #ff007a;
 $purple: #c74ded;
 $cyan: #00e8c6;
-$yellow: #FED766;
+$orange: #F79F79;
+$g1: #00e8b7;
+$g2: #00e8b7;
 
 $selected_fg_color: #f7f7f7;
-$selected_bg_color:#00e8b7;
+$selected_bg_color: #00e8b7;
 $selected_borders_color: darken($selected_bg_color, 10%);
-$borders_color: transparentize($gray, 0.7);
+$borders_color: darken(#1d2021, 3%);
 $borders_edge: transparentize(white, 0.9);
 $link_color: #13b1d5;
 $link_visited_color: transparentize($link_color,0.5);
@@ -22,6 +25,36 @@ $top_hilight: $borders_edge;
 $top_highlight: transparentize(white, 0.9);
 $bottom_highlight: transparentize(black, 0.9);
 
+$warning_color: darken($orange,10%);
+$error_color: darken( $red,5%);
+$success_color: darken($cyan,10%);
+$destructive_color: darken( #c72240,10%);
+
+$osd_fg_color: $fg_color;
+$osd_bg_color: transparentize($bg_color, 0.05);
+$osd_borders_color: transparentize(black, 0.3);
+$osd_outer_borders_color: transparentize(white, 0.9);
+
+$tooltip_borders_color: $osd_outer_borders_color;
+
+//insensitive state derived colors
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: $borders_color;
+
+//colors for the backdrop state, derived from the main colors.
+$backdrop_base_color: lighten($base_color,1%);
+$backdrop_bg_color: $bg_color;
+$backdrop_fg_color: transparentize($fg_color, 0.2);
+$backdrop_insensitive_color: lighten($backdrop_bg_color, 15%);
+$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
+$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
+
+$link_visited_color: transparentize($link_color,0.5);
+$top_hilight: $borders_edge;
+$top_highlight: transparentize(white, 0.9);
+$bottom_highlight: transparentize(black, 0.9);
+
 $warning_color: darken(#ffb86c,10%);
 $error_color: darken( $red,5%);
 $success_color: darken($cyan,10%);

gnome-shell/_common.scss

@@ -3,16 +3,15 @@ $corner-radius: 2px;
 
 /* GLOBALS */
 $font-size: 10;
-$font-family: "SFNS Display",Ubuntu, Cantarell, Sans-Serif;
+$font-family: Roboto,Ubuntu, Cantarell, Sans-Serif;
 $_bubble_bg_color: $osd_bg_color;
 $_bubble_fg_color: $fg_color;
 $_bubble_borders_color: $fg_color;
 $_bubble_transparent: transparentize($osd_bg_color, 0.17);
-$topbar_bg_color: transparentize(darken($dracula,10%),0.35);
+$topbar_bg_color: transparentize($dracula,0.35);
 
 stage {
   font-family: $font-family;
-  font-weight: 400;
   @include fontsize($font-size);
   color: $fg_color;
 }
@@ -22,7 +21,7 @@ stage {
 /* Buttons */
 .button {
   @include button(normal);
-  border-radius: 2px;
+  border-radius: 4px;
   border-width: 0;
   padding: 4px 32px;
   &:focus { @include button(focus); }
@@ -35,11 +34,12 @@ stage {
 
 .modal-dialog-linked-button {
   padding: 10px;
-  border: none;
+  border: 1px solid $borders_color;
   color: $fg_color;
-  background-color: transparent;
+  background: $main_dark;
   text-shadow: none;
   icon-shadow: none;
+  box-shadow: none;
   &:insensitive { @include button(insensitive); }
   &:active {
     @include button(active);
@@ -52,7 +52,6 @@ stage {
   }
   &:hover {
     @include button(hover);
-    background: transparent;
   }
 
   &:first-child { border-radius: 0px 0px 0px 2px; }
@@ -114,15 +113,26 @@ StScrollBar {
 
 .slider {
   height: 1em;
-  color: $selected_fg_color;
+  color: darken($selected_fg_color, 25%);
   border-color: black;
-  -slider-height: 0.3em;
+  -slider-height: 0.1em;
   -slider-background-color: $gray; //background of the trough
   -slider-border-color: black; //trough border color
-  -slider-active-background-color: $selected_bg_color; //active trough fill
+  -slider-active-background-color: $cyan; //active trough fill
   -slider-active-border-color: $lime; //active trough border
   -slider-border-width: 0;
   -slider-handle-radius: 6px;
+
+  -barlevel-height: 0.1em;
+  -barlevel-background-color: $gray;
+  -barlevel-border-color: black;
+  -barlevel-active-background-color: $cyan;
+  -barlevel-active-border-color: $lime;
+  -barlevel-border-width: 0;
+  -barlevel-handle-radius: 6px; 
+  -barlevel-overdrive-color: $cyan;
+  -barlevel-overdrive-border-color: transparent;
+  -barlevel-overdrive-separator-width: 0px;
 }
 
 /* Check Boxes */
@@ -134,7 +144,7 @@ StScrollBar {
     height: 22px;
     background-image: url("assets/checkbox-off.svg");
   }
-  &:focus StBin { background-image: url("assets/checkbox-off-focused.svg"); }
+  &:focus, &:hover StBin { background-image: url("assets/checkbox-off-focused.svg"); }
   &:checked StBin { background-image: url("assets/checkbox.svg"); }
   &:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); }
 }
@@ -144,6 +154,9 @@ StScrollBar {
   width: 65px;
   height: 22px;
   background-size: contain;
+  //Gnome 3.32//
+  background-image: url("assets/toggle-off.svg");
+  &:checked { background-image: url("assets/toggle-on.svg"); }
 }
 
   @each $v in us, intl {
@@ -227,10 +240,11 @@ StScrollBar {
   spacing: 42px;
   border: none;
   & .modal-dialog-linked-button:last-child {
-    color: $error_color;
+    @include gradient();
-    &:focus{
+    color: #fff;
-      color: $error_color;
+    &:hover, &:focus {
-      border: 1px solid  transparentize($error_color, 0.7);
+      background: darken($error_color, 3%);
+      color: #fff;
     }
   }
 }
@@ -504,7 +518,8 @@ StScrollBar {
   background-color: transparent;
   .popup-menu-arrow { } //defined globally in the TOP BAR
   .popup-sub-menu {
-    background-color:  transparentize(darken($bg_color,20%), 0.8);
+   
+    background-color:  transparentize(darken($main_dark,57%), 0.8);
     box-shadow: $depth6;
   }
 
@@ -515,7 +530,8 @@ StScrollBar {
     &:ltr { padding: .4em 1.75em .4em 0em; }
     &:rtl { padding: .4em 0em .4em 1.75em; }
     &:checked {
-      background-color: transparentize($selected_bg_color,0.1);
+      @include gradient();
+     // background-color: transparentize($selected_bg_color,0.1);
       color: $selected_fg_color;
       box-shadow: inset 0 1px 0px lighten($borders_color,5%);
       font-weight: bold;
@@ -549,7 +565,7 @@ StScrollBar {
   }
   .popup-menu-boxpointer,
   .candidate-popup-boxpointer {
-    -arrow-border-radius: 3px;
+    -arrow-border-radius: 7px;
     -arrow-background-color: $bg_color;
     -arrow-border-width: 1px;
     -arrow-border-color: $borders_color;
@@ -591,8 +607,14 @@ StScrollBar {
   .level {
     height: 0.4em;
     border-radius: 0.3em;
-    background-color: transparentize($gray,0.5);
     color: $osd_fg_color;
+    border: 1px solid $borders_color;
+
+    -barlevel-height: 0.4em;
+    -barlevel-background-color: transparentize(darken($main_dark,15%),0.5);
+    -barlevel-active-background-color: $selected_bg_color;
+    -barlevel-overdrive-color: $red;
+    -barlevel-overdrive-separator-width: 0.2em; 
   }
   .level-bar {
     background-color: $selected_bg_color;
@@ -797,23 +819,23 @@ StScrollBar {
     &:hover {
       background: lighten($topbar_bg_color, 10%);
       color: lighten($topbar_color, 10%);
-      text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
+      transition-duration: 200ms;
-
-      .system-status-icon,
-      .app-menu-icon > StIcon,
-      .popup-menu-arrow {
-        icon-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
-      }
     }
 
     &:active, &:overview, &:focus, &:checked {
       // Trick due to St limitations. It needs a background to draw
       // a box-shadow
-      background: lighten($topbar_bg_color, 10%);
+      box-shadow: none;
-      box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%);
+      @include gradient();
-      color: lighten($topbar_color,10%);
+      color: $selected_fg_color;
-
+      text-shadow: 0px 0px 2px rgba(92, 92, 92, 0.9);
-      & > .system-status-icon { icon-shadow: black 0 2px 2px; }
+      transition-duration: 200ms;
+      .system-status-icon,
+      .app-menu-icon > StIcon,
+      .popup-menu-arrow {
+        icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
+      }
+      & > .system-status-icon { icon-shadow: red 0 2px 2px; }
     }
 
     .system-status-icon { icon-size: 1.09em; padding: 0 5px; }
@@ -838,7 +860,7 @@ StScrollBar {
   .screencast-indicator { color: $warning_color; }
 
   &.solid {
-    background-color: darken($dracula,1%);
+    background-color: $dracula;
     /* transition from transparent to solid */
     transition-duration: 300ms;
 
@@ -874,9 +896,11 @@ StScrollBar {
     .datemenu-displays-box { spacing: 1em; }
 
     .datemenu-calendar-column {
-      border: 0 solid $borders_color;
+      border: 0 solid transparent;
       &:ltr { border-left-width: 1px; }
       &:rtl { border-right-width: 1px; }
+      background: darken($bg_color, 0.7%);
+     //@include gradient();
     }
 
     .datemenu-today-button,
@@ -919,7 +943,7 @@ StScrollBar {
     .weather-header,
     .events-section-title,
     .message-list-section-title {
-      color: lighten($fg_color,2%);
+      color: darken($fg_color, 10%);
       font-weight: bold;
     }
 
@@ -965,12 +989,13 @@ StScrollBar {
       border-radius: 1.4em;
       &:hover,&:focus { background-color: lighten($bg_color,5%); }
       &:active,&:selected {
-        color: lighten($selected_fg_color,5%);
+        color: $selected_fg_color;
         background-color: $selected_bg_color;
-        border-color: transparent; //avoid jumparound due to today
+        @include gradient();
+        border-color: black; //avoid jumparound due to today
       }
       &.calendar-day-heading {  //day of week heading
-        color: darken($fg_color,4%);
+        color: darken($fg_color, 10%);
         margin-top: 1em;
         font-size: 70%;
       }
@@ -1017,18 +1042,15 @@ StScrollBar {
         width: 31.5em;
         .message-title{
           color: darken($fg_color,5%);
-          
         }
         .message-content{
-        
+          
         }
       }
 
         .message-list-clear-button.button {
-          background-color: transparent;
+          @include button(normal);
-          border: 1px solid $borders_color;
+          &:hover,&:focus { @include button(hover); }
-          box-shadow: none;
-          &:hover,&:focus { background-color: lighten($bg_color,5%); }
           margin: 1.5em 1.5em 0;
         }
 
@@ -1058,8 +1080,9 @@ StScrollBar {
 
         .message {
           &:hover,&:focus { 
-            background-color: lighten($bg_color,2%);
+            background-color: darken($bg_color, 1%);
-            box-shadow: 3px 0px 0px 0px $selected_bg_color inset;
+            //@include gradient();
+            box-shadow: 2px 0px 0px 0px $g2 inset;
            }
           border-radius: 1px;
           background: transparent;
@@ -1156,16 +1179,20 @@ StScrollBar {
     color: $fg_color;
    
     border-radius: 32px; /* wish we could do 50% */
-    border: 1px solid transparent;
+    border: 1px solid $borders_color;
-    background: transparent;
+    background: darken($bg_color, 3%);
     padding: 13px;
 
     &:hover, &:focus {
-      //border: 1px solid $selected_bg_color;
+      border: 1px solid $selected_bg_color;
       color: $selected_bg_color;
       background: transparent;
     }
-    &:active { background-color: darken($selected_bg_color, 10%); color: $selected_fg_color;}
+    &:active {
+       background-color: darken($selected_bg_color, 10%);
+       color: $selected_fg_color; 
+       border: 1px solid darken($selected_bg_color, 10%);
+      }
 
     & > StIcon { icon-size: 16px; }
   }
@@ -1189,8 +1216,12 @@ StScrollBar {
 //close buttons
 
 .window-close {
+  background-color: transparent;
   background-image: url("assets/close-window.svg");
   background-size: 32px;
+  border: none;
+  box-shadow: none;
+  color: transparent;
   height: 32px;
   width: 32px;
 }
@@ -1269,7 +1300,7 @@ StScrollBar {
   }
   .window-caption {
     spacing: 20px;
-    color: $fg_color;
+    color: $topbar_color;
     background-color: transparentize($osd_bg_color,.3);
     border-radius: 2px;
     padding: 4px 8px;
@@ -1278,8 +1309,8 @@ StScrollBar {
   //search entry
   .search-entry {
     width: 320px;
-    padding: 7px 9px;
+    padding: 9px;
-    border-radius: 2px;
+    border-radius: 100px;
     border: none;
     color: $fg_color;
     background-color: transparentize($bg_color, 0.4);
@@ -1335,7 +1366,7 @@ StScrollBar {
     color: $topbar_color;
     background-color: $topbar_bg_color;
     padding: 6px 0;
-    border: 1px solid rgba(128, 128, 128, 0.2);
+    border: 1px solid $borders_color;
     border-left: 0px;
     border-radius: 0px 5px 5px 0px;
 
@@ -1364,8 +1395,9 @@ StScrollBar {
     border-radius: 7px;
     padding: 4px 12px;
     color: $topbar_color;
-    background-color: transparentize($topbar_bg_color,0.01);
+    background-color: $topbar_bg_color;
     text-align: center;
+    border: 1px solid $borders_color;
     -x-offset: 8px;
   }
 
@@ -1392,7 +1424,13 @@ StScrollBar {
   }
   .app-view-control { //favorties | all toggle button
     padding: 4px 32px;
-    &:checked { @include button(active); }
+    &:checked { 
+      @include gradient();
+      color: #000;
+    }
+    &:hover {
+      border: none;
+    }
     &:first-child {
       border-right-width: 0;
       border-radius: 3px 0 0 3px;
@@ -1440,9 +1478,9 @@ StScrollBar {
 
   .app-well-app-running-dot { //running apps indicator
     width: 4px; height: 4px;
-    background-color: rgb(0, 255, 221);
+    background-color: $selected_bg_color;
     border-radius: 10px !important;
-    box-shadow: 0px 0px 5px 4px transparentize(rgb(0, 255, 221),0.2);
+    box-shadow: 0px 0px 5px 4px transparentize($selected_bg_color,0.2);
     margin-bottom: 0px;
   }
 
@@ -1502,8 +1540,7 @@ StScrollBar {
       background-image: none;
       background-color: rgba(255, 255, 255, 0.7);
     }
-    &:checked .page-indicator-icon,
+    &:checked .page-indicator-icon{ 
-    &:checked:active { 
       background-image: none;
       background-color: #FFFFFF;
       transition-duration: 0s; 
@@ -1570,6 +1607,7 @@ StScrollBar {
     box-shadow: 0 1px 4px black;
     &:hover { background-color: transparentize($bg_color, 0.04); }
     &:focus { background-color: transparentize($bg_color, 0.04); }
+    *{ color: $topbar_color; }
 
     .notification-icon { padding: 5px; }
     .notification-content { padding: 5px; spacing: 5px; }
@@ -1691,15 +1729,13 @@ StScrollBar {
   .keyboard-row { spacing: 15px; }
 
   .keyboard-key {
-    @include button(normal);
+   @include button(normal);
-    background: $base_color;
+    background-color: $base_color;
     min-height: 2em;
     min-width: 2em;
     font-size: 14pt;
     font-weight: bold;
     border-radius: 5px;
-    border: 1px solid $borders-color;
-    color: white;
     &:focus { @include button(focus); }
     &:hover,&:checked { @include button(hover); }
     &:active { @include button(active);}

gnome-shell/_drawing.scss

@@ -56,7 +56,7 @@
 //
 
   @if $t==normal {
-    background-color: transparentize($gray, 0.5);
+    background-color: $gray;
     border-color: $borders_color;
  
     @include _shadows($depth);
@@ -149,11 +149,12 @@
   //
 
     color: $fg_color;
-    background-color: darken($bg_color,5%);
+    background-color: $main_dark;
-    box-shadow: $depth4;
+    box-shadow: none;
-    border: none;
+    border: 1px solid $borders_color;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
+    border: 1px solid $borders_color;
   }
   @if $t==focus {
   //
@@ -162,11 +163,11 @@
     $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5),
                           $osd_bg_color);
 
-    color: $osd_fg_color;
+    color: $selected_bg_color;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
-    box-shadow: $depth5;
+    box-shadow: none;
-    border: 1px solid  transparentize($selected_bg_color, 0.7);
+    border: 1px solid $borders_color;
   }
 
   @else if $t==hover {
@@ -174,12 +175,11 @@
   // active osd button
   //
     $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3),
-                            lighten($osd_bg_color,10%));
+                            lighten($main_dark, 2%));
 
     color: $selected_bg_color;
     background-color: $_bg;
-    box-shadow: $depth5;
+    border: 1px solid $borders_color;
-    border: none;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
 
@@ -195,8 +195,7 @@
     // This should be none, but it's creating some issues with borders, so to
     // workaround it for now, use inset wich goes through a different code path.
     // see https://bugzilla.gnome.org/show_bug.cgi?id=752934
-    box-shadow: $depth5;
+    border: 1px solid $borders_color;
-    border: none;
     text-shadow: none;
     icon-shadow: none;
   }
@@ -228,3 +227,9 @@
     icon-shadow: none;
   }
 }
+
+@mixin gradient($c1: $g1, $c2: $g2, $dir: horizontal) {
+  background-gradient-start: $c1;
+  background-gradient-end: $c2;
+  background-gradient-direction: $dir;
+}

gnome-shell/_extensions.scss

@@ -0,0 +1 @@
+@import "extensions/_openweather"

gnome-shell/assets/close-window.svg

@@ -19,7 +19,7 @@
    enable-background="new 0 0 16 16"
    xml:space="preserve"
    sodipodi:version="0.32"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
    sodipodi:docname="close-window.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"><metadata
      id="metadata2399"><rdf:RDF><cc:Work
@@ -39,7 +39,7 @@
        inkscape:vp_z="16 : 8 : 1"
        inkscape:persp3d-origin="8 : 5.3333333 : 1"
        id="perspective2401" /></defs><sodipodi:namedview
-     inkscape:window-height="704"
+     inkscape:window-height="713"
      inkscape:window-width="1366"
      inkscape:pageshadow="2"
      inkscape:pageopacity="0"
@@ -51,11 +51,11 @@
      pagecolor="#000000"
      id="base"
      showgrid="true"
-     inkscape:zoom="32.000001"
+     inkscape:zoom="8.898926"
-     inkscape:cx="12.529333"
+     inkscape:cx="-4.1520939"
-     inkscape:cy="16.069558"
+     inkscape:cy="19.955159"
      inkscape:window-x="0"
-     inkscape:window-y="27"
+     inkscape:window-y="25"
      inkscape:current-layer="Foreground"
      showguides="true"
      inkscape:guide-bbox="true"
@@ -72,11 +72,15 @@
      clip-rule="evenodd"
      d="m 0.7272726,11.636364 c 0,-6.0245464 4.8845457,-10.90909163 10.9090924,-10.90909163 6.024543,0 10.909089,4.88454523 10.909089,10.90909163 0,6.024546 -4.884546,10.909091 -10.909089,10.909091 -6.0245467,0 -10.9090924,-4.884545 -10.9090924,-10.909093 z"
      id="path2394-32"
-     style="color:#000000;fill:#ff5f50;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.45454550000000005;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+     style="color:#000000;fill:#00e8b7;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.4545455;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
      sodipodi:nodetypes="csssc"
      inkscape:connector-curvature="0" /><g
      id="g3172-6"
      transform="translate(4.7533483,2.8238929)" /><path
+     style="color:#000000;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;fill:#1a1e21;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.30909085;marker:none;enable-background:accumulate"
+     d="m 11.636363,1.8181816 c -5.4220897,0 -9.8181798,4.3960904 -9.8181798,9.8181824 0,5.422093 4.3960901,9.818181 9.8181798,9.818181 5.422089,0 9.818182,-4.396091 9.818182,-9.818181 0,-5.422092 -4.396093,-9.8181824 -9.818182,-9.8181824 z"
+     id="path2394-32-3"
+     inkscape:connector-curvature="0" /><path
      d="m 8.9519832,7.2814498 2.6448998,2.6676769 2.68113,-2.6676769 c 1.118427,-0.9273761 2.760725,0.5779314 1.666643,1.6810017 l -2.644896,2.6676785 2.608666,2.631133 c 1.305091,1.315814 -0.493499,2.86379 -1.666647,1.681003 L 11.59688,13.274588 8.9519805,15.942266 C 7.9249237,16.97776 6.2096464,15.345788 7.285332,14.261263 L 9.9302312,11.63013 7.285332,8.9624515 C 6.1503592,7.8181541 7.8408705,6.1612084 8.9519832,7.2814498 z"
      inkscape:connector-curvature="0"
      id="path27279-0-5"

gnome-shell/extensions/_openweather.scss

@@ -0,0 +1,13 @@
+.openweather-current-summarybox,
+.openweather-forecast-icon,
+.openweather-current-databox-captions,
+.openweather-current-databox-values,
+.openweather-current-icon,
+.openweather-forecast-summary,
+.openweather-forecast-temperature{
+    background: transparent;
+}
+
+.openweather-current-databox-captions, .openweather-forecast-day {
+    color: $selected_bg_color;
+}

gnome-shell/gnome-shell.css

@@ -3,8 +3,7 @@
 *****************/
 /* GLOBALS */
 stage {
-  font-family: "SFNS Display", Ubuntu, Cantarell, Sans-Serif;
+  font-family: Roboto, Ubuntu, Cantarell, Sans-Serif;
-  font-weight: 400;
   font-size: 10pt;
   color: #98abb2; }
 
@@ -12,83 +11,80 @@ stage {
 /* Buttons */
 .button {
   color: #98abb2;
-  background-color: rgba(24, 33, 41, 0.93);
+  background-color: #182129;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
+  box-shadow: none;
-  border: none;
+  border: 1px solid #161819;
   text-shadow: 0 1px black;
   icon-shadow: 0 1px black;
-  border-radius: 2px;
+  border: 1px solid #161819;
+  border-radius: 4px;
   border-width: 0;
   padding: 4px 32px; }
   .button:focus {
-    color: #98abb2;
+    color: #00e8b7;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    box-shadow: none;
-    border: 1px solid rgba(0, 232, 183, 0.3); }
+    border: 1px solid #161819; }
   .button:insensitive {
-    color: rgba(97, 113, 122, 0.965);
+    color: #5d6d76;
-    background-color: rgba(48, 61, 72, 0.597);
+    background-color: rgba(47, 60, 70, 0.66);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
     border: none;
     text-shadow: none;
     icon-shadow: none; }
   .button:active {
     color: #00e8b7;
-    background-color: rgba(34, 46, 57, 0.88);
+    background-color: rgba(34, 46, 57, 0.95);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    border: 1px solid #161819;
-    border: none;
     text-shadow: none;
     icon-shadow: none; }
   .button:hover {
     color: #00e8b7;
-    background-color: rgba(53, 72, 89, 0.88);
+    background-color: #1c262f;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    border: 1px solid #161819;
-    border: none;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black; }
 
 .modal-dialog-linked-button {
   padding: 10px;
-  border: none;
+  border: 1px solid #161819;
   color: #98abb2;
-  background-color: transparent;
+  background: #182129;
   text-shadow: none;
-  icon-shadow: none; }
+  icon-shadow: none;
+  box-shadow: none; }
   .modal-dialog-linked-button:insensitive {
-    color: rgba(97, 113, 122, 0.965);
+    color: #5d6d76;
-    background-color: rgba(48, 61, 72, 0.597);
+    background-color: rgba(47, 60, 70, 0.66);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
     border: none;
     text-shadow: none;
     icon-shadow: none; }
   .modal-dialog-linked-button:active {
     color: #00e8b7;
-    background-color: rgba(34, 46, 57, 0.88);
+    background-color: rgba(34, 46, 57, 0.95);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    border: 1px solid #161819;
-    border: none;
     text-shadow: none;
     icon-shadow: none; }
   .modal-dialog-linked-button:focus {
-    color: #98abb2;
+    color: #00e8b7;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    box-shadow: none;
-    border: 1px solid rgba(0, 232, 183, 0.3); }
+    border: 1px solid #161819; }
     .modal-dialog-linked-button:focus:hover {
-      color: #98abb2;
+      color: #00e8b7;
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black;
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+      box-shadow: none;
-      border: 1px solid rgba(0, 232, 183, 0.3); }
+      border: 1px solid #161819; }
   .modal-dialog-linked-button:hover {
     color: #00e8b7;
-    background-color: rgba(53, 72, 89, 0.88);
+    background-color: #1c262f;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    border: 1px solid #161819;
-    border: none;
     text-shadow: 0 1px black;
-    icon-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
-    background: transparent; }
   .modal-dialog-linked-button:first-child {
     border-radius: 0px 0px 0px 2px; }
   .modal-dialog-linked-button:last-child {
@@ -98,8 +94,8 @@ stage {
 
 /* Entries */
 StEntry {
-  background-color: rgba(63, 85, 105, 0.5);
+  background-color: #2f404f;
-  border-color: rgba(63, 85, 105, 0.3);
+  border-color: #161819;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22);
   border-radius: 2px;
   padding: 4px;
@@ -110,7 +106,7 @@ StEntry {
   StEntry:focus {
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
   StEntry:insensitive {
-    color: rgba(97, 113, 122, 0.965);
+    color: #5d6d76;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
   StEntry StIcon.capslock-warning {
     icon-size: 16px;
@@ -134,25 +130,35 @@ StScrollBar {
     background-color: transparent; }
   StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
     border-radius: 8px;
-    background-color: rgba(60, 74, 84, 0.944);
+    background-color: #3a4751;
     margin: 3px; }
     StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
-      background-color: rgba(131, 149, 156, 0.986); }
+      background-color: #80929a; }
     StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
       background-color: #00e8b7; }
 
 /* Slider */
 .slider {
   height: 1em;
-  color: #f7f7f7;
+  color: #b7b7b7;
   border-color: black;
-  -slider-height: 0.3em;
+  -slider-height: 0.1em;
-  -slider-background-color: #3f5569;
+  -slider-background-color: #2f404f;
   -slider-border-color: black;
-  -slider-active-background-color: #00e8b7;
+  -slider-active-background-color: #00e8c6;
   -slider-active-border-color: #84ff39;
   -slider-border-width: 0;
-  -slider-handle-radius: 6px; }
+  -slider-handle-radius: 6px;
+  -barlevel-height: 0.1em;
+  -barlevel-background-color: #2f404f;
+  -barlevel-border-color: black;
+  -barlevel-active-background-color: #00e8c6;
+  -barlevel-active-border-color: #84ff39;
+  -barlevel-border-width: 0;
+  -barlevel-handle-radius: 6px;
+  -barlevel-overdrive-color: #00e8c6;
+  -barlevel-overdrive-border-color: transparent;
+  -barlevel-overdrive-separator-width: 0px; }
 
 /* Check Boxes */
 .check-box StBoxLayout {
@@ -163,7 +169,7 @@ StScrollBar {
   height: 22px;
   background-image: url("assets/checkbox-off.svg"); }
 
-.check-box:focus StBin {
+.check-box:focus, .check-box:hover StBin {
   background-image: url("assets/checkbox-off-focused.svg"); }
 
 .check-box:checked StBin {
@@ -176,7 +182,10 @@ StScrollBar {
 .toggle-switch {
   width: 65px;
   height: 22px;
-  background-size: contain; }
+  background-size: contain;
+  background-image: url("assets/toggle-off.svg"); }
+  .toggle-switch:checked {
+    background-image: url("assets/toggle-on.svg"); }
 
 .toggle-switch-us {
   background-image: url("assets/toggle-off.svg"); }
@@ -208,7 +217,7 @@ StScrollBar {
   border: none;
   border-radius: 2px;
   color: #98abb2;
-  background-color: rgba(24, 33, 41, 0.88);
+  background-color: rgba(24, 33, 41, 0.95);
   box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
   .modal-dialog .modal-dialog-content-box {
     padding: 24px; }
@@ -256,10 +265,13 @@ StScrollBar {
   spacing: 42px;
   border: none; }
   .end-session-dialog .modal-dialog-linked-button:last-child {
-    color: #e6006e; }
+    background-gradient-start: #00e8b7;
-    .end-session-dialog .modal-dialog-linked-button:last-child:focus {
+    background-gradient-end: #00e8b7;
-      color: #e6006e;
+    background-gradient-direction: horizontal;
-      border: 1px solid rgba(230, 0, 110, 0.3); }
+    color: #fff; }
+    .end-session-dialog .modal-dialog-linked-button:last-child:hover, .end-session-dialog .modal-dialog-linked-button:last-child:focus {
+      background: #d60066;
+      color: #fff; }
 
 .end-session-dialog-list {
   padding-top: 20px; }
@@ -484,7 +496,7 @@ StScrollBar {
   min-width: 15em;
   background-color: transparent; }
   .popup-menu .popup-sub-menu {
-    background-color: rgba(0, 0, 0, 0.13);
+    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: 1em 0em; }
@@ -495,9 +507,11 @@ StScrollBar {
     .popup-menu .popup-menu-item:rtl {
       padding: .4em 0em .4em 1.75em; }
     .popup-menu .popup-menu-item:checked {
-      background-color: rgba(0, 232, 183, 0.9);
+      background-gradient-start: #00e8b7;
+      background-gradient-end: #00e8b7;
+      background-gradient-direction: horizontal;
       color: #f7f7f7;
-      box-shadow: inset 0 1px 0px rgba(72, 98, 121, 0.3);
+      box-shadow: inset 0 1px 0px #222526;
       font-weight: bold; }
       .popup-menu .popup-menu-item:checked:hover {
         background-color: rgba(0, 232, 183, 0.9);
@@ -524,10 +538,10 @@ StScrollBar {
 
 .popup-menu-boxpointer,
 .candidate-popup-boxpointer {
-  -arrow-border-radius: 3px;
+  -arrow-border-radius: 7px;
-  -arrow-background-color: rgba(34, 46, 57, 0.93);
+  -arrow-background-color: #222e39;
   -arrow-border-width: 1px;
-  -arrow-border-color: rgba(63, 85, 105, 0.3);
+  -arrow-border-color: #161819;
   -arrow-base: 24px;
   -arrow-rise: 11px;
   -arrow-box-shadow: 0 1px 3px black; }
@@ -561,8 +575,13 @@ StScrollBar {
   .osd-window .level {
     height: 0.4em;
     border-radius: 0.3em;
-    background-color: rgba(63, 85, 105, 0.5);
+    color: #98abb2;
-    color: #98abb2; }
+    border: 1px solid #161819;
+    -barlevel-height: 0.4em;
+    -barlevel-background-color: rgba(0, 0, 0, 0.5);
+    -barlevel-active-background-color: #00e8b7;
+    -barlevel-overdrive-color: #ff007a;
+    -barlevel-overdrive-separator-width: 0.2em; }
   .osd-window .level-bar {
     background-color: #00e8b7;
     border-radius: 0.3em; }
@@ -593,7 +612,7 @@ StScrollBar {
 
 .switcher-list .item-box:outlined {
   padding: 6px;
-  border: 2px solid rgba(44, 59, 73, 0.3); }
+  border: 2px solid black; }
 
 .switcher-list .item-box:selected {
   background-color: #00e8b7;
@@ -608,7 +627,7 @@ StScrollBar {
 
 .switcher-list .separator {
   width: 1px;
-  background: rgba(63, 85, 105, 0.3); }
+  background: #161819; }
 
 .switcher-arrow {
   border-color: rgba(0, 0, 0, 0);
@@ -652,14 +671,14 @@ StScrollBar {
 .ws-switcher-box {
   height: 50px;
   border: 1px solid rgba(152, 171, 178, 0.1);
-  background: rgba(15, 20, 25, 0.88);
+  background: rgba(15, 20, 25, 0.95);
   border-radius: 8px; }
 
 .osd-window,
 .resize-popup,
 .switcher-list, .workspace-switcher-container {
   color: #98abb2;
-  background-color: rgba(34, 46, 57, 0.88);
+  background-color: rgba(34, 46, 57, 0.95);
   border: none;
   border-radius: 2px;
   padding: 12px; }
@@ -681,7 +700,7 @@ StScrollBar {
 /* TOP BAR */
 #panel {
   background-gradient-direction: none;
-  background-color: rgba(15, 20, 25, 0.65);
+  background-color: rgba(34, 46, 57, 0.65);
   /* transition from solid to transparent */
   transition-duration: 500ms;
   font-weight: bold;
@@ -706,7 +725,7 @@ StScrollBar {
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
     font-weight: bold;
-    color: #98abb2;
+    color: white;
     text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
     transition-duration: 100ms; }
     #panel .panel-button .app-menu-icon {
@@ -718,19 +737,29 @@ StScrollBar {
     #panel .panel-button .popup-menu-arrow {
       icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9); }
     #panel .panel-button:hover {
-      background: rgba(34, 46, 57, 0.65);
+      background: rgba(53, 72, 89, 0.65);
-      color: #b5c3c8;
+      color: white;
-      text-shadow: 0px 0px 8px black; }
+      transition-duration: 200ms; }
-      #panel .panel-button:hover .system-status-icon,
-      #panel .panel-button:hover .app-menu-icon > StIcon,
-      #panel .panel-button:hover .popup-menu-arrow {
-        icon-shadow: 0px 0px 8px black; }
     #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
-      background: rgba(34, 46, 57, 0.65);
+      box-shadow: none;
-      box-shadow: inset 0 -2px 0px #03ffca;
+      background-gradient-start: #00e8b7;
-      color: #b5c3c8; }
+      background-gradient-end: #00e8b7;
+      background-gradient-direction: horizontal;
+      color: #f7f7f7;
+      text-shadow: 0px 0px 2px rgba(92, 92, 92, 0.9);
+      transition-duration: 200ms; }
+      #panel .panel-button:active .system-status-icon,
+      #panel .panel-button:active .app-menu-icon > StIcon,
+      #panel .panel-button:active .popup-menu-arrow, #panel .panel-button:overview .system-status-icon,
+      #panel .panel-button:overview .app-menu-icon > StIcon,
+      #panel .panel-button:overview .popup-menu-arrow, #panel .panel-button:focus .system-status-icon,
+      #panel .panel-button:focus .app-menu-icon > StIcon,
+      #panel .panel-button:focus .popup-menu-arrow, #panel .panel-button:checked .system-status-icon,
+      #panel .panel-button:checked .app-menu-icon > StIcon,
+      #panel .panel-button:checked .popup-menu-arrow {
+        icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9); }
       #panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon {
-        icon-shadow: black 0 2px 2px; }
+        icon-shadow: red 0 2px 2px; }
     #panel .panel-button .system-status-icon {
       icon-size: 1.09em;
       padding: 0 5px; }
@@ -754,7 +783,7 @@ StScrollBar {
   #panel .screencast-indicator {
     color: #ff9f39; }
   #panel.solid {
-    background-color: #202b36;
+    background-color: #222e39;
     /* transition from transparent to solid */
     transition-duration: 300ms; }
     #panel.solid .panel-corner {
@@ -786,7 +815,8 @@ StScrollBar {
   spacing: 1em; }
 
 .datemenu-calendar-column {
-  border: 0 solid rgba(63, 85, 105, 0.3); }
+  border: 0 solid transparent;
+  background: #212c37; }
   .datemenu-calendar-column:ltr {
     border-left-width: 1px; }
   .datemenu-calendar-column:rtl {
@@ -815,7 +845,7 @@ StScrollBar {
 .events-section-title:focus,
 .message-list-section-title:hover,
 .message-list-section-title:focus {
-  background-color: rgba(44, 59, 73, 0.93); }
+  background-color: #2c3b49; }
 
 .datemenu-today-button:active,
 .world-clocks-button:active,
@@ -832,7 +862,7 @@ StScrollBar {
 .weather-header,
 .events-section-title,
 .message-list-section-title {
-  color: #9eb0b6;
+  color: #7b939c;
   font-weight: bold; }
 
 .world-clocks-grid {
@@ -854,7 +884,7 @@ StScrollBar {
   .pager-button:hover, .pager-button:focus {
     background-color: rgba(152, 171, 178, 0.05); }
   .pager-button:active {
-    background-color: rgba(34, 46, 57, 0); }
+    background-color: rgba(34, 46, 57, 0.05); }
 
 .calendar-change-month-back {
   background-image: url("assets/calendar-arrow-left.svg"); }
@@ -875,13 +905,16 @@ StScrollBar {
   margin: 2px;
   border-radius: 1.4em; }
   .calendar-day-base:hover, .calendar-day-base:focus {
-    background-color: rgba(44, 59, 73, 0.93); }
+    background-color: #2c3b49; }
   .calendar-day-base:active, .calendar-day-base:selected {
-    color: white;
+    color: #f7f7f7;
     background-color: #00e8b7;
-    border-color: transparent; }
+    background-gradient-start: #00e8b7;
+    background-gradient-end: #00e8b7;
+    background-gradient-direction: horizontal;
+    border-color: black; }
   .calendar-day-base.calendar-day-heading {
-    color: #8ca1a9;
+    color: #7b939c;
     margin-top: 1em;
     font-size: 70%; }
 
@@ -895,11 +928,11 @@ StScrollBar {
   border-left-width: 1px; }
 
 .calendar-nonwork-day {
-  color: rgba(97, 113, 122, 0.965); }
+  color: #5d6d76; }
 
 .calendar-today {
   font-weight: bold;
-  border: 1px solid rgba(63, 85, 105, 0); }
+  border: 1px solid rgba(22, 24, 25, 0.5); }
 
 .calendar-day-with-events {
   color: #b5c3c8;
@@ -907,7 +940,7 @@ StScrollBar {
   background-image: url("assets/calendar-today.svg"); }
 
 .calendar-other-month-day {
-  color: rgba(97, 113, 122, 0.965);
+  color: #5d6d76;
   opacity: 0.5; }
 
 .calendar-week-number {
@@ -919,7 +952,7 @@ StScrollBar {
   padding: 0.5em 0 0;
   margin: 6px;
   background-color: rgba(152, 171, 178, 0.3);
-  color: rgba(34, 46, 57, 0.93); }
+  color: #222e39; }
 
 /* Message list */
 .message-list {
@@ -928,12 +961,20 @@ StScrollBar {
     color: #899fa7; }
 
 .message-list-clear-button.button {
-  background-color: transparent;
+  color: #98abb2;
-  border: 1px solid rgba(63, 85, 105, 0.3);
+  background-color: #182129;
   box-shadow: none;
+  border: 1px solid #161819;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  border: 1px solid #161819;
   margin: 1.5em 1.5em 0; }
   .message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
-    background-color: rgba(44, 59, 73, 0.93); }
+    color: #00e8b7;
+    background-color: #1c262f;
+    border: 1px solid #161819;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
 
 .message-list-sections {
   spacing: 1em; }
@@ -958,8 +999,8 @@ StScrollBar {
   border-radius: 1px;
   background: transparent; }
   .message:hover, .message:focus {
-    background-color: rgba(38, 51, 63, 0.93);
+    background-color: #202b36;
-    box-shadow: 3px 0px 0px 0px #00e8b7 inset; }
+    box-shadow: 2px 0px 0px 0px #00e8b7 inset; }
 
 .message-icon-bin {
   padding: 10px 3px 10px 10px; }
@@ -1004,9 +1045,9 @@ StScrollBar {
 .media-message-cover-icon {
   icon-size: 48px !important; }
   .media-message-cover-icon.fallback {
-    color: rgba(53, 72, 89, 0.93);
+    color: #354859;
-    background-color: rgba(34, 46, 57, 0.93);
+    background-color: #222e39;
-    border: 2px solid rgba(34, 46, 57, 0.93);
+    border: 2px solid #222e39;
     border-radius: 2px;
     icon-size: 16px;
     padding: 8px; }
@@ -1034,15 +1075,17 @@ StScrollBar {
   color: #98abb2;
   border-radius: 32px;
   /* wish we could do 50% */
-  border: 1px solid transparent;
+  border: 1px solid #161819;
-  background: transparent;
+  background: #1c262f;
   padding: 13px; }
   .system-menu-action:hover, .system-menu-action:focus {
+    border: 1px solid #00e8b7;
     color: #00e8b7;
     background: transparent; }
   .system-menu-action:active {
     background-color: #00b58f;
-    color: #f7f7f7; }
+    color: #f7f7f7;
+    border: 1px solid #00b58f; }
   .system-menu-action > StIcon {
     icon-size: 16px; }
 
@@ -1063,8 +1106,12 @@ StScrollBar {
   icon-size: 1.09em; }
 
 .window-close {
+  background-color: transparent;
   background-image: url("assets/close-window.svg");
   background-size: 32px;
+  border: none;
+  box-shadow: none;
+  color: transparent;
   height: 32px;
   width: 32px; }
 
@@ -1100,14 +1147,14 @@ StScrollBar {
   icon-size: 32px; }
 
 .nm-dialog-scroll-view {
-  border: 2px solid rgba(63, 85, 105, 0.3); }
+  border: 2px solid #161819; }
 
 .nm-dialog-header {
   font-weight: bold; }
 
 .nm-dialog-item {
   font-size: 110%;
-  border-bottom: 1px solid rgba(63, 85, 105, 0.3);
+  border-bottom: 1px solid #161819;
   padding: 12px;
   spacing: 20px; }
 
@@ -1148,30 +1195,30 @@ StScrollBar {
 
 .window-caption {
   spacing: 20px;
-  color: #98abb2;
+  color: white;
-  background-color: rgba(34, 46, 57, 0.58);
+  background-color: rgba(34, 46, 57, 0.65);
   border-radius: 2px;
   padding: 4px 8px; }
 
 .search-entry {
   width: 320px;
-  padding: 7px 9px;
+  padding: 9px;
-  border-radius: 2px;
+  border-radius: 100px;
   border: none;
   color: #98abb2;
-  background-color: rgba(34, 46, 57, 0.53);
+  background-color: rgba(34, 46, 57, 0.6);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
   .search-entry:focus {
     border-width: 0;
     color: #98abb2;
-    background-color: rgba(34, 46, 57, 0.73);
+    background-color: rgba(34, 46, 57, 0.8);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3); }
   .search-entry .search-entry-icon {
     icon-size: 1em;
     padding: 0 4px;
     color: rgba(152, 171, 178, 0.7); }
   .search-entry:hover, .search-entry:focus {
-    background-color: rgba(34, 46, 57, 0.73); }
+    background-color: rgba(34, 46, 57, 0.8); }
     .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
       color: #98abb2; }
 
@@ -1200,15 +1247,15 @@ StScrollBar {
   spacing: 30px; }
 
 .list-search-result-title {
-  color: #a7b7bd;
+  color: white;
   spacing: 12px; }
 
 .list-search-result-description {
-  color: rgba(196, 207, 211, 0.5); }
+  color: rgba(255, 255, 255, 0.5); }
 
 .list-search-provider-details {
   width: 150px;
-  color: #a7b7bd;
+  color: white;
   margin-top: 0.24em; }
 
 .list-search-provider-content {
@@ -1220,10 +1267,10 @@ StScrollBar {
 /* DASHBOARD */
 #dash {
   font-size: 9pt;
-  color: #98abb2;
+  color: white;
-  background-color: rgba(15, 20, 25, 0.65);
+  background-color: rgba(34, 46, 57, 0.65);
   padding: 6px 0;
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid #161819;
   border-left: 0px;
   border-radius: 0px 5px 5px 0px; }
   #dash:rtl {
@@ -1242,9 +1289,10 @@ StScrollBar {
 .dash-label {
   border-radius: 7px;
   padding: 4px 12px;
-  color: #98abb2;
+  color: white;
-  background-color: rgba(15, 20, 25, 0.64);
+  background-color: rgba(34, 46, 57, 0.65);
   text-align: center;
+  border: 1px solid #161819;
   -x-offset: 8px; }
 
 /* App Vault/Grid */
@@ -1267,12 +1315,12 @@ StScrollBar {
 .app-view-control {
   padding: 4px 32px; }
   .app-view-control:checked {
-    color: #00e8b7;
+    background-gradient-start: #00e8b7;
-    background-color: rgba(34, 46, 57, 0.88);
+    background-gradient-end: #00e8b7;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    background-gradient-direction: horizontal;
-    border: none;
+    color: #000; }
-    text-shadow: none;
+  .app-view-control:hover {
-    icon-shadow: none; }
+    border: none; }
   .app-view-control:first-child {
     border-right-width: 0;
     border-radius: 3px 0 0 3px; }
@@ -1282,13 +1330,13 @@ StScrollBar {
 .search-provider-icon:active, .search-provider-icon:checked,
 .list-search-result:active,
 .list-search-result:checked {
-  background-color: rgba(15, 20, 25, 0.78); }
+  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.23);
+  background-color: rgba(34, 46, 57, 0.3);
   transition-duration: 200ms; }
 
 .app-well-app,
@@ -1304,7 +1352,7 @@ StScrollBar {
   .show-apps:checked .overview-icon,
   .grid-search-result:active .overview-icon,
   .grid-search-result:checked .overview-icon {
-    background-color: rgba(21, 28, 35, 0.78);
+    background-color: rgba(21, 28, 35, 0.85);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3);
     color: #98abb2; }
   .app-well-app:hover .overview-icon,
@@ -1319,7 +1367,7 @@ StScrollBar {
   .grid-search-result:hover .overview-icon,
   .grid-search-result:focus .overview-icon,
   .grid-search-result:selected .overview-icon {
-    background-color: rgba(34, 46, 57, 0.43);
+    background-color: rgba(34, 46, 57, 0.5);
     transition-duration: 0ms;
     border-image: none;
     background-image: none; }
@@ -1327,9 +1375,9 @@ StScrollBar {
 .app-well-app-running-dot {
   width: 4px;
   height: 4px;
-  background-color: #00ffdd;
+  background-color: #00e8b7;
   border-radius: 10px !important;
-  box-shadow: 0px 0px 5px 4px rgba(0, 255, 221, 0.8);
+  box-shadow: 0px 0px 5px 4px rgba(0, 232, 183, 0.8);
   margin-bottom: 0px; }
 
 .search-provider-icon,
@@ -1346,10 +1394,10 @@ StScrollBar {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
 
 .app-well-app.app-folder > .overview-icon {
-  background-color: rgba(34, 46, 57, 0.28); }
+  background-color: rgba(34, 46, 57, 0.35); }
 
 .show-apps .show-apps-icon {
-  color: #98abb2; }
+  color: white; }
 
 .show-apps:checked .show-apps-icon,
 .show-apps:focus .show-apps-icon {
@@ -1358,13 +1406,13 @@ StScrollBar {
 
 .app-folder-popup {
   -arrow-border-radius: 8px;
-  -arrow-background-color: rgba(34, 46, 57, 0.43);
+  -arrow-background-color: rgba(34, 46, 57, 0.5);
   -arrow-base: 24px;
   -arrow-rise: 11px; }
 
 .app-folder-popup-bin {
   padding: 5px;
-  background: rgba(34, 46, 57, 0.43); }
+  background: rgba(34, 46, 57, 0.5); }
 
 .app-folder-icon {
   padding: 5px;
@@ -1385,7 +1433,7 @@ StScrollBar {
   .page-indicator:active .page-indicator-icon {
     background-image: none;
     background-color: rgba(255, 255, 255, 0.7); }
-  .page-indicator:checked .page-indicator-icon, .page-indicator:checked:active {
+  .page-indicator:checked .page-indicator-icon {
     background-image: none;
     background-color: #FFFFFF;
     transition-duration: 0s; }
@@ -1432,14 +1480,16 @@ StScrollBar {
   width: 34em;
   margin: 5px;
   border-radius: 3px;
-  color: #98abb2;
+  color: white;
-  background-color: rgba(34, 46, 57, 0.93);
+  background-color: #222e39;
-  border: 1px solid rgba(63, 85, 105, 0.3);
+  border: 1px solid #161819;
   box-shadow: 0 1px 4px black; }
   .notification-banner:hover {
-    background-color: rgba(34, 46, 57, 0.89); }
+    background-color: rgba(34, 46, 57, 0.96); }
   .notification-banner:focus {
-    background-color: rgba(34, 46, 57, 0.89); }
+    background-color: rgba(34, 46, 57, 0.96); }
+  .notification-banner * {
+    color: white; }
   .notification-banner .notification-icon {
     padding: 5px; }
   .notification-banner .notification-content {
@@ -1448,18 +1498,18 @@ StScrollBar {
   .notification-banner .secondary-icon {
     icon-size: 1.09em; }
   .notification-banner .notification-actions {
-    background-color: rgba(30, 41, 51, 0.93);
+    background-color: #1e2933;
     padding-top: 2px;
     spacing: 1px; }
   .notification-banner .notification-button {
     padding: 4px 4px 5px;
-    background-color: rgba(34, 46, 57, 0.83); }
+    background-color: rgba(34, 46, 57, 0.9); }
     .notification-banner .notification-button:first-child {
       border-radius: 0 0 0 3px; }
     .notification-banner .notification-button:last-child {
       border-radius: 0 0 3px 0; }
     .notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
-      background-color: rgba(30, 41, 51, 0.93);
+      background-color: #1e2933;
       color: #00e8b7; }
 
 .summary-source-counter {
@@ -1532,7 +1582,7 @@ StScrollBar {
   spacing: 8px;
   border-radius: 4px; }
   .hotplug-resident-mount:hover {
-    background-color: rgba(34, 46, 57, 0.23); }
+    background-color: rgba(34, 46, 57, 0.3); }
 
 .hotplug-resident-mount-label {
   color: inherit;
@@ -1558,7 +1608,7 @@ StScrollBar {
 
 /* On-screen Keyboard */
 #keyboard {
-  background-color: rgba(34, 46, 57, 0.58); }
+  background-color: rgba(34, 46, 57, 0.65); }
 
 .keyboard-layout {
   spacing: 10px;
@@ -1569,41 +1619,38 @@ StScrollBar {
 
 .keyboard-key {
   color: #98abb2;
-  background-color: rgba(24, 33, 41, 0.93);
+  background-color: #182129;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
+  box-shadow: none;
-  border: none;
+  border: 1px solid #161819;
   text-shadow: 0 1px black;
   icon-shadow: 0 1px black;
-  background: #1E282C;
+  border: 1px solid #161819;
+  background-color: #1E282C;
   min-height: 2em;
   min-width: 2em;
   font-size: 14pt;
   font-weight: bold;
-  border-radius: 5px;
+  border-radius: 5px; }
-  border: 1px solid rgba(63, 85, 105, 0.3);
-  color: white; }
   .keyboard-key:focus {
-    color: #98abb2;
+    color: #00e8b7;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    box-shadow: none;
-    border: 1px solid rgba(0, 232, 183, 0.3); }
+    border: 1px solid #161819; }
   .keyboard-key:hover, .keyboard-key:checked {
     color: #00e8b7;
-    background-color: rgba(53, 72, 89, 0.88);
+    background-color: #1c262f;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    border: 1px solid #161819;
-    border: none;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black; }
   .keyboard-key:active {
     color: #00e8b7;
-    background-color: rgba(34, 46, 57, 0.88);
+    background-color: rgba(34, 46, 57, 0.95);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+    border: 1px solid #161819;
-    border: none;
     text-shadow: none;
     icon-shadow: none; }
   .keyboard-key:grayed {
-    background-color: rgba(34, 46, 57, 0.88);
+    background-color: rgba(34, 46, 57, 0.95);
     color: #98abb2;
     border-color: rgba(0, 0, 0, 0.7); }
 
@@ -1611,7 +1658,7 @@ StScrollBar {
   color: white;
   padding: 5px;
   -arrow-border-radius: 10px;
-  -arrow-background-color: rgba(34, 46, 57, 0.58);
+  -arrow-background-color: rgba(34, 46, 57, 0.65);
   -arrow-border-width: 2px;
   -arrow-border-color: #98abb2;
   -arrow-base: 20px;
@@ -1676,28 +1723,27 @@ StScrollBar {
     padding: 3px 18px; }
     .login-dialog .modal-dialog-button:default {
       color: #98abb2;
-      background-color: rgba(24, 33, 41, 0.93);
+      background-color: #182129;
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
+      box-shadow: none;
-      border: none;
+      border: 1px solid #161819;
       text-shadow: 0 1px black;
-      icon-shadow: 0 1px black; }
+      icon-shadow: 0 1px black;
+      border: 1px solid #161819; }
       .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
         color: #00e8b7;
         background-color: rgba(0, 232, 183, 0.7);
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+        border: 1px solid #161819;
-        border: none;
         text-shadow: 0 1px black;
         icon-shadow: 0 1px black; }
       .login-dialog .modal-dialog-button:default:active {
         color: #00e8b7;
         background-color: #00e8b7;
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.3);
+        border: 1px solid #161819;
-        border: none;
         text-shadow: none;
         icon-shadow: none; }
       .login-dialog .modal-dialog-button:default:insensitive {
-        color: rgba(97, 113, 122, 0.965);
+        color: #5d6d76;
-        background-color: rgba(48, 61, 72, 0.597);
+        background-color: rgba(47, 60, 70, 0.66);
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
         border: none;
         text-shadow: none;
@@ -1833,7 +1879,7 @@ StScrollBar {
   .screen-shield-notifications-container .screen-shield-notification-source {
     padding: 12px 6px;
     border: 1px solid #98abb2;
-    background-color: rgba(34, 46, 57, 0.38);
+    background-color: rgba(34, 46, 57, 0.45);
     color: #98abb2;
     border-radius: 4px; }
   .screen-shield-notifications-container .notification {
@@ -1847,7 +1893,7 @@ StScrollBar {
   padding: 0px 0px 0px 12px; }
 
 #panel.lock-screen {
-  background-color: rgba(34, 46, 57, 0.38); }
+  background-color: rgba(34, 46, 57, 0.45); }
 
 .screen-shield-background {
   background: black;
@@ -1858,9 +1904,9 @@ StScrollBar {
   background-repeat: repeat; }
 
 #screenShieldNotifications StButton#vhandle, #screenShieldNotifications StButton#hhandle {
-  background-color: rgba(34, 46, 57, 0.23); }
+  background-color: rgba(34, 46, 57, 0.3); }
   #screenShieldNotifications StButton#vhandle:hover, #screenShieldNotifications StButton#vhandle:focus, #screenShieldNotifications StButton#hhandle:hover, #screenShieldNotifications StButton#hhandle:focus {
-    background-color: rgba(34, 46, 57, 0.43); }
+    background-color: rgba(34, 46, 57, 0.5); }
   #screenShieldNotifications StButton#vhandle:active, #screenShieldNotifications StButton#hhandle:active {
     background-color: rgba(0, 232, 183, 0.5); }
 
@@ -1943,3 +1989,15 @@ StScrollBar {
   border: 2px solid grey;
   border-radius: 4px;
   padding: 6px; }
+
+.openweather-current-summarybox,
+.openweather-forecast-icon,
+.openweather-current-databox-captions,
+.openweather-current-databox-values,
+.openweather-current-icon,
+.openweather-forecast-summary,
+.openweather-forecast-temperature {
+  background: transparent; }
+
+.openweather-current-databox-captions, .openweather-forecast-day {
+  color: #00e8b7; }

gnome-shell/gnome-shell.scss

@@ -1,5 +1,6 @@
 $subtheme: 'main';
 
-@import "_colors"; //use gtk colors
+@import "colors"; //use gtk colors
-@import "_drawing";
+@import "drawing";
-@import "_common";
+@import "common";
+@import "extensions"

gtk-2.0/apps/xfce.rc

@@ -1,6 +1,8 @@
 style "theme-panel" = "dark" {
 	xthickness	= 1
 	ythickness	= 1
+	bg[NORMAL]	= @panel_bg_color
+	fg[NORMAL]	= @panel_fg_color
 }
 
 style "xfdesktop-icon-view" {

gtk-2.0/assets.svg

@@ -14,7 +14,7 @@
    height="480px"
    id="svg3032"
    version="1.1"
-   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   inkscape:version="0.92.4 (unknown)"
    sodipodi:docname="assets.svg">
   <title
      id="title5071">EvoPop GTK2 Source</title>
@@ -447,19 +447,19 @@
      borderopacity="1"
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="3.1706945"
+     inkscape:zoom="3.3502846"
-     inkscape:cx="550.31674"
+     inkscape:cx="348.69208"
-     inkscape:cy="397.66718"
+     inkscape:cy="448.32127"
-     inkscape:current-layer="menu-radio-checked"
+     inkscape:current-layer="layer1"
      inkscape:document-units="px"
      showgrid="true"
      inkscape:snap-bbox="true"
      inkscape:snap-global="true"
      inkscape:snap-nodes="true"
      inkscape:window-width="1366"
-     inkscape:window-height="656"
+     inkscape:window-height="706"
      inkscape:window-x="0"
-     inkscape:window-y="31"
+     inkscape:window-y="30"
      inkscape:window-maximized="1"
      showguides="false"
      inkscape:guide-bbox="true"
@@ -1024,14 +1024,14 @@
          transform="translate(-62,34)"
          id="a5307">
         <rect
-           style="fill:#999999;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           style="fill:#7a7d81;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            id="rect5272"
-           width="6"
+           width="4"
            height="7"
            x="300"
            y="0"
            rx="0"
-           ry="0" />
+           ry="2" />
       </a>
     </g>
     <g
@@ -1051,14 +1051,14 @@
          transform="translate(-46,34)"
          id="a5307-0">
         <rect
-           style="fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           style="fill:#55595f;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            id="rect5272-4"
-           width="6"
+           width="5"
            height="7"
            x="300"
            y="0"
            rx="0"
-           ry="0" />
+           ry="2" />
       </a>
     </g>
     <g
@@ -1078,14 +1078,14 @@
          transform="translate(-30,34)"
          id="a5307-0-9">
         <rect
-           style="fill:#00D3A7;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           style="fill:#00d3a7;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            id="rect5272-4-2"
-           width="6"
+           width="5"
            height="7"
            x="300"
            y="0"
            rx="0"
-           ry="0" />
+           ry="2" />
       </a>
     </g>
     <g
@@ -1152,14 +1152,14 @@
          inkscape:export-xdpi="90"
          inkscape:export-ydpi="90">
         <rect
-           ry="5.6843419e-14"
+           ry="2"
            rx="0"
            y="-1"
            x="300"
            height="7"
-           width="6"
+           width="4"
            id="rect4717"
-           style="fill:#999999;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+           style="fill:#7a7d81;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
       </a>
     </g>
     <g
@@ -1180,14 +1180,14 @@
          style="fill:#535859;fill-opacity:1"
          inkscape:label="#a5307-0">
         <rect
-           ry="0"
+           ry="2"
            rx="0"
            y="0"
            x="300"
            height="7"
-           width="6"
+           width="5"
            id="rect4725"
-           style="fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+           style="fill:#55595f;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
       </a>
     </g>
     <g
@@ -1208,14 +1208,14 @@
          style="fill:#00D3A7;fill-opacity:1"
          inkscape:label="#a5307-0-9">
         <rect
-           ry="0"
+           ry="2"
            rx="0"
            y="0"
            x="300"
            height="7"
-           width="6"
+           width="5"
            id="rect4733"
-           style="fill:#00D3A7;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+           style="fill:#00d3a7;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
       </a>
     </g>
     <rect
@@ -3033,14 +3033,14 @@
          x="234"
          y="31" />
       <rect
-         style="fill:#999999;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         style="fill:#7a7d81;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          id="rect5124"
-         width="6"
+         width="4"
          height="7"
          x="238"
          y="34"
          rx="0"
-         ry="0" />
+         ry="2" />
     </g>
     <g
        inkscape:label="#g5134"
@@ -3056,12 +3056,12 @@
       <rect
          style="fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          id="rect5132"
-         width="6"
+         width="5"
          height="7"
          x="254"
          y="34"
          rx="0"
-         ry="0" />
+         ry="2" />
     </g>
     <g
        inkscape:label="#g5142"
@@ -3080,14 +3080,14 @@
          style="fill:#00D3A7;fill-opacity:1"
          inkscape:label="#a5307-0-9">
         <rect
-           ry="0"
+           ry="2"
            rx="0"
            y="0"
            x="300"
            height="7"
-           width="6"
+           width="5"
            id="rect5140"
-           style="fill:#00D3A7;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+           style="fill:#00d3a7;fill-opacity:1;stroke:none;stroke-width:0.30000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
       </a>
     </g>
     <g

gtk-2.0/gtkrc

@@ -6,11 +6,11 @@ gtk-color-scheme = "fg_color:#31363d\nbg_color:#e6e6e6"
 # Selection colors
 gtk-color-scheme = "selected_fg_color:#fefefe\nselected_bg_color:#00D3A7"
 # Tooltip colors
-gtk-color-scheme = "tooltip_fg_color:#2d2d2d\ntooltip_bg_color:#fefefe"
+gtk-color-scheme = "tooltip_fg_color:#ffffff\ntooltip_bg_color:#000000"
 # Window colors
 gtk-color-scheme = "wm_color:#31363d\nunfocused_wm_color:#31363d"
 # Panel colors
-gtk-color-scheme = "panel_bg_color:#263238\npanel_fg_color:#ffffff"
+gtk-color-scheme = "panel_bg_color:#000000\npanel_fg_color:#ffffff"
 # Dark Theme - Text/base colors
 gtk-color-scheme = "dark_text_color:#fefefe\ndark_base_color:#505359"
 # Dark Theme - Foreground/background colors

gtk-3.0/_apps.scss

@@ -4,6 +4,7 @@
 
 @import 'apps/budgie';
 @import 'apps/gnome';
+@import 'apps/xfce';
 @import 'apps/pantheon';
 @import 'apps/unity';
 

gtk-3.0/_colors-public.scss

@@ -92,3 +92,6 @@ read if you used those and something break with a version upgrade you're on your
 
 @define-color content_view_bg #{"" + $base_color};
 
+//Budgie desktop
+@define-color budgie_tasklist_indicator_color #{"" +$selected_bg_color};
+@define-color budgie_tasklist_indicator_color_active #{"" +$selected_bg_color};

gtk-3.0/_colors.scss

@@ -8,6 +8,7 @@ $bg_color: if($variant == 'light', darken( #EEEEEE, 3%), #161925);
 $fg_color: if($variant == 'light', #31363d, #C3C7D1);
 $switch_bg: if($variant == 'light', #ffffff, transparentize(black,1));
 $shadow_color: rgba(162, 162, 165, 0.21);
+$_sidebar_color: if($variant == 'light', #222e39, #161925);
 
 // Primary colors
 $lime: #71f79f;
@@ -67,15 +68,15 @@ $drop_target_color: #a1ce4b;
 $text_shadow_color: if($variant == 'dark', $shadow_color, transparentize(white, 0.9));
 $icon_shadow_color: $text_shadow_color;
 
-$drop_target_color: #4e9a06;
+$drop_target_color: $lime;
 
 // Infobar colors
 $info_color: $lime;
 $question_color: $cyan;
 
 // Panel colors
-$panel_bg_color: transparentize(black, 0.3);
+$panel_bg_color: transparentize(black, 0);
-$panel_fg_color: white;
+$panel_fg_color: #C3C7D1;
 $panel_borders_color: transparentize(black, 0.8);
 
 // Disabled state colors

gtk-3.0/_common.scss

@@ -9,6 +9,7 @@
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $asset_suffix: if($variant=='dark', '-dark', '');
 $backdrop_transition: 200ms ease-out;
+$sidebar_backdrop_transition: 200ms $ease-out-quad;
 $button_transition: all 200ms $ease-out-quad;
 
 * {

gtk-3.0/_drawing.scss

@@ -224,10 +224,8 @@
   //
     font-weight: bold;
     color: $tc;
-   // outline-color: transparentize($tc, 0.7);
+    background-color: mix($bg_color, $base_color, 15%);
-    background-color: mix($bg_color, $base_color, 15%);;
     text-shadow: none;
-    @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight);
   }
 
   @else if $t==hover {
@@ -238,7 +236,6 @@
     outline-color: transparentize($tc, 0.7);
     background-color: $c;
     text-shadow: none;
-    //@include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight);
   }
 
   @if $t==normal-header {
@@ -246,17 +243,10 @@
   // normal button headerbar look
   //
   color: if($tc==$text_color, #8b8b8b, $tc);
-  // background-color: transparent;
-  // border-radius: 4px;
   text-shadow: none;
   box-shadow: none;
   background: transparent;
-   border: none;
+  border: none;
-
-  // background: if( $variant == 'light', 
-  //                     linear-gradient(to bottom, $base_color, $bg_color),
-  //                     linear-gradient(to bottom, lighten($base_color, 12%), darken($bg_color, 2%))
-  //                 );
 }
 
   @else if $t==hover-header {
@@ -264,15 +254,16 @@
   // hovered button headerbar look
   //
   color: if($tc==$text_color, $selected_bg_color, $tc);
-  //background-color: transparent;
   border-radius: 0;
   text-shadow: none;
   border:none;
-//   background-image: if( $variant == 'light', 
+}
-//   linear-gradient(to bottom, $base_color, $bg_color),
+
-//   linear-gradient(to bottom, lighten($base_color, 12%), darken($bg_color, 2%))
+@else if $t==active-header {
-// );
+  border-radius: 23px;
-  //@include lines(up);
+  background: #00e8b7;
+  box-shadow: 0px 2px 4px rgba(177, 177, 177, 0.753);
+  color: rgb(255, 250, 250);
 }
 
 @else if $t==backdrop-header {
@@ -281,7 +272,6 @@
 //
 color: if($tc==$text_color, transparentize($tc, 0.6), $tc);
 background-color: transparent;
-
 border-radius: 0;
 text-shadow: none;
 box-shadow: none;
@@ -296,7 +286,6 @@ box-shadow: none;
   outline-color: transparentize($tc, 0.7);
   background-color: if($c==$base_color, $selected_bg_color, $c);
   text-shadow: none;
- // @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight);
 }
   @else if $t==insensitive {
   //
@@ -306,7 +295,6 @@ box-shadow: none;
   outline-color: transparentize($tc, 0.7);
   background-color: if($c==$base_color, $insensitive_bg_color, $c);
   text-shadow: none;
-  @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight);
 }
   @else if $t==insensitive-active {
   //
@@ -316,7 +304,6 @@ box-shadow: none;
   outline-color: transparentize($tc, 0.7);
   background-color: if($c==$base_color, $selected_bg_color, $c);
   text-shadow: none;
-  @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight);
   label { color: transparentize($selected_fg_color, 0.3); }
 }
   @else if $t==backdrop {
@@ -327,7 +314,6 @@ box-shadow: none;
   outline-color: transparentize($tc, 0.7);
   background-color: if($c==$base_color, $backdrop_base_color, $c);
   text-shadow: none;
-  @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight);
 }
 
   @else if $t==backdrop-active {
@@ -338,7 +324,6 @@ box-shadow: none;
   outline-color: transparentize($tc, 0.7);
   background-color: $selected_bg_color;
   text-shadow: none;
-  @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight);
   label { color: transparentize($selected_fg_color, 0.3); }
 }
 
@@ -350,7 +335,6 @@ box-shadow: none;
   outline-color: transparentize($tc, 0.7);
   background-color: if($c==$base_color, $insensitive_bg_color, $c);
   text-shadow: none;
-  @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight);
 }
 
   @else if $t==backdrop-insensitive-active {
@@ -361,7 +345,6 @@ box-shadow: none;
   outline-color: transparentize($tc, 0.7);
   background-color: $selected_bg_color;
   text-shadow: none;
-  @include _shadows(inset 0px 1px 0px 0px $top_highlight,inset 0px -1px 0px 0px $bottom_highlight);
 }
 
   @else if $t==osd {
@@ -617,3 +600,7 @@ box-shadow: none;
   border: none;
   box-shadow: none;
 }
+
+@mixin scale-highlight($dir) {
+  background: linear-gradient(to $dir, #00f17d, #00f7d2);
+}

gtk-3.0/apps/_budgie.scss

@@ -1,20 +1,21 @@
 /*********
 * Budgie *
 *********/
-
 $alert_color: $red;
 $button_bg: transparent;
 $entry_border: transparent;
 $mpris_overlay_fg: $fg_color;
 $mpris_overlay_bg: transparentize(if($variant=='light',$base_color, darken($bg_color, 10%)), 0.1);
 $mpris_overlay_border: $top_highlight;
-$panel_bg: transparentize( darken($headerbar_color,10%),0.05);
+$panel_bg: transparentize( darken($_sidebar_color,10%),0.05);
-$panel_border: transparentize(darken($headerbar_color, 7%), 0.08);
+$panel_color: $headerbar_fg_color; // text color for raven and popovers
+$panel_secondary_color: #98abb2; // text color for dark panel
+$panel_border: transparentize($borders_color, 0.08);
 $panel_shadow: transparentize(black, 0.7);
-$raven_bg: transparentize($bg_color, 0.08);
+$raven_bg: transparentize($headerbar_color, 0.08);
 $raven_expander_border: transparentize($borders_color, 0.05);
-$raven_border: transparentize($bg_color, 0.08);
+$raven_border: transparentize($borders_color, 0.08);
-$raven_expander_bg: transparentize($bg_color, 0.8);
+$raven_expander_bg: transparentize(darken($headerbar_color, 7%), 0.5);
 $raven_background_bg: transparent;
 $raven_background_border: transparent;
 
@@ -69,10 +70,10 @@ $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));
 .budgie-popover.background {
     border-radius: 2px;
     padding: 0;
-    background: if( $variant == 'light',  linear-gradient(to bottom, $base_color 20%, $bg_color), linear-gradient(to bottom, lighten($bg_color, 12%), darken($bg_color, 2%)));
+    background: if( $variant == 'light',  linear-gradient(to bottom, $bg_color 20%, $bg_color), linear-gradient(to bottom, lighten($bg_color, 12%), darken($bg_color, 2%)));
     background-clip: border-box;
     box-shadow: 0 2px 3px 1px transparentize(black, 0.65);
-    border: 1px solid #{"@borders"};
+    border: 1px solid $borders_color;
     list,
     row {
       &:hover { background: none; }
@@ -82,6 +83,15 @@ $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));
       margin: 0 -1px -1px; // remove gap
       padding: 2px 0 0;
     }
+    button {
+      color: $panel_color;
+      border: none;
+      background: transparent;
+        // @include button(normal-header);
+        &:hover {
+          color: $selected_bg_color;
+        }
+    }
 }
 
 .budgie-popover > .container {
@@ -90,6 +100,7 @@ $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));
 
 // Budgie Menu
 .budgie-menu {
+    color: $panel_color;
     .container { padding: 0; }
 
     button:hover { -gtk-icon-effect: none; }
@@ -98,11 +109,11 @@ $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));
         border: none;
         background: none;
         padding: 5px 2px;
-        border-bottom: 1px solid #{"@borders"};
+        border-bottom: 1px solid $borders_color;
         border-radius: 0;
         font-size: 120%;
         box-shadow: none;
-
+        color:$panel_color;
         image {
             &:dir(ltr) { padding-left: 8px; padding-right: 12px; }
             &:dir(rtl) { padding-left: 12px; padding-right: 8px; }
@@ -112,10 +123,9 @@ $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));
     .categories {
         border-width: 0;
         margin-left: 3px;
-
+        background: transparent;
-        background-color: transparent;
+        &:dir(ltr) { border-right: 1px solid $borders_color; }
-        &:dir(ltr) { border-right: 1px solid #{"@borders"}; }
+        &:dir(rtl) { border-left: 1px solid $borders_color; }
-        &:dir(rtl) { border-left: 1px solid #{"@borders"}; }
     }
 
     .category-button {
@@ -130,17 +140,20 @@ $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));
         &:checked {
           color: $selected_fg_color;
           background: $suggested_bg_color;
+          &:hover {
+            color: transparentize($selected_fg_color, 0.1);
+          }
         }
         &:checked:disabled {
             opacity: 0.5;
-
             label { color: transparentize($selected_fg_color, 0.3); }
         }
+       
     }
 
     scrollbar {
       background-color: transparent;
-      border-color: transparent;
+      border-color: $borders_color;
     }
 
     button:not(.category-button) {
@@ -148,12 +161,18 @@ $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));
       padding-bottom: 5px;
       border-radius: 0;
       box-shadow: none;
+      background:yellow;    
     }
     button{
         border: none;
+        background: transparent;
     }
 
     undershoot, overshoot { background: none; }
+
+    list {
+      color: transparentize($panel_color, 0.3);
+    }
 }
 
 // Menu Button
@@ -194,7 +213,7 @@ button.budgie-menu-launcher {
 
       .indicator-item {
         box-shadow: $depth;
-        background-color: $cyan;
+        background-color: $selected_bg_color;
         transition-duration: 0.2s;
 
         &:dir(ltr) { // mask avatar's background
@@ -346,7 +365,7 @@ button.raven-trigger {
 
 // Panel
 .budgie-panel {
-    color: $headerbar_fg_color;
+    color: $panel_secondary_color;
     background-color: $panel_bg;
     background-image: none;
     box-shadow: none;
@@ -356,7 +375,7 @@ button.raven-trigger {
     .alert { color: $alert_color; }
 
     &:backdrop {
-      color: $headerbar_fg_color;
+      color: $panel_secondary_color;
       background-color: $panel_bg;
     }
 
@@ -364,6 +383,15 @@ button.raven-trigger {
       border-top-width: 0;
       border-bottom-width: 0;
       border-radius: 0;
+      &.flat {
+          background: transparent;
+          border: 1px solid $panel_bg;
+          color:$panel_secondary_color;
+          &:hover, &:active, &:checked {
+            background: transparent;
+            color: $selected_bg_color;
+          }
+      }
     }
 
     popover list,
@@ -373,7 +401,7 @@ button.raven-trigger {
     }
 
     label {
-      color: $headerbar_fg_color;
+      color: $red;
       font-weight: 700;
     }
 
@@ -403,7 +431,7 @@ button.raven-trigger {
       separator { background-color: transparentize($headerbar_fg_color, 0.85); }
       label {
         font-weight: 700;
-        color: $headerbar_fg_color;
+        color: $panel_secondary_color;
       }
     }
 }
@@ -494,7 +522,7 @@ button.raven-trigger {
 .raven {
     padding: 0;
     color: $fg_color;
-    background: if($variant == 'light', linear-gradient(to bottom, #EAEAEA, rgb(187, 184, 184)) , mix($base_color, darken($headerbar_color, 8%), 30%));
+    background: if( $variant == 'light',  linear-gradient(to bottom, $bg_color 20%, $bg_color), linear-gradient(to bottom, lighten($bg_color, 12%), darken($bg_color, 2%)));
     transition: 170ms ease-out;
 
     .raven-header {
@@ -504,7 +532,7 @@ button.raven-trigger {
         }
 
         min-height: 32px;
-        color: $fg_color;
+        color: $panel_color;
         border: solid $raven_expander_border;
         border-width: 1px 0;
         background-color: $raven_expander_bg;
@@ -542,51 +570,44 @@ button.raven-trigger {
 
         &.bottom { border-bottom-style: none; }
         button {
-            background-image: if( $variant == 'light', 
+            @include button(normal-header);
-            linear-gradient(to bottom, $base_color, $bg_color),
-            linear-gradient(to bottom, lighten($base_color, 12%), darken($bg_color, 2%))
-          );
-          border: 1px solid $borders_color;
-          color: $fg_color;
-          border-radius: 0;
-          //border: none;
-          box-shadow: none;
-          margin-top: -4px;
-          margin-bottom: -4px;
-          min-height: 24px;
-
-          &:hover {
             border-radius: 0;
-            background-color: transparent;
-            color: $selected_bg_color;
-          }
-          
-          &:active,
-          &:checked {
-            color: $selected_bg_color;
-            border-radius: 0;
-            background: mix($bg_color, $base_color, 20%);
 
-          }
+            &:hover {
-
+                @include button(hover-header);
-          &:disabled {
+                border-radius: 0;
-            color: $insensitive_fg_color;
+            }
-          }
+            
+            &:disabled {
+                color: $insensitive_fg_color;
+            }
+            &.text-button.radio {
+                margin: 5px 0px;
+                min-height: 20px;
+                padding: 3px;
+                &:active,
+                &:checked {
+                    @include button(active-header);
+                }
+            }
         }
     }
 
     list {
+      color: $panel_color;
       background-color: transparent;
       &:selected { background-color: transparentize($selected_bg_color,0.1); }
       row,
       row.activatable {
+        
         background-color: transparent;
+        &:hover { background-color: transparentize(lighten($panel_bg, 15%), 0.7);}
         &:selected { background-color: transparentize($selected_bg_color,0.1); }
       }
     }
 
     .raven-background {
-        color: $fg_color;
+        color: $panel_color;
         background-color: transparent;
         border-color: transparent;
 
@@ -605,7 +626,7 @@ button.raven-trigger {
       min-height: 32px;
       margin-bottom: 3px;
      
-      background: linear-gradient(to right, #8f94fb, #4e54c8); 
+      background: $purple; 
       
       color: $selected_fg_color;
       box-shadow: $depth;
@@ -613,30 +634,28 @@ button.raven-trigger {
       font-size: 100%;
 
       &:hover {
-        transition: 170ms ease all;
+        background: transparentize($purple,0.15);
-        background: transparentize($darkpurple,0.15);
         color: $selected_fg_color;
       }
       &:active {
-        transition: 170ms ease all;
+        background: $purple;
-        background: $darkpurple;
         color: $selected_fg_color;
       }
       &:first-child {
         background: $suggested_bg_color;
 
         &:hover {
-          background: transparentize($cyan,0);
+          background: transparentize($selected_bg_color, 0.15);
         }
         &:active {
-          background: $cyan;
+          background: $selected_bg_color;
         }
       }
       &:last-child {
         background: $destructive_bg_color;
 
         &:hover {
-          background: transparentize($red,0);
+          background: transparentize($red, 0.15);
         }
         &:active {
           background: $red;
@@ -651,7 +670,7 @@ button.raven-trigger {
 // Calendar
 calendar.raven-calendar {
   padding: 6px;
-  color: $fg_color;
+  color: $panel_color;
   background: transparent;
   border-color: transparent;
 
@@ -666,7 +685,7 @@ calendar.raven-calendar {
   &:backdrop { background-color: transparent; }
 
   &.header {
-    color: $fg_color;
+    color: $panel_color;
     border: none;
     border-radius: 0;
     background-color: transparent;
@@ -717,14 +736,14 @@ calendar.raven-calendar {
     background: none;
     border-radius: 1px;
     button {
-      background-color: $cyan;
+      background-color: $selected_bg_color;
       color: $selected_fg_color;
       border: none;
       &:hover {
-        background-color: darken($cyan, 5%);
+        background-color: darken($selected_bg_color, 5%);
         border: none;
       }
-      &:active, &:checked { background-color: darken($cyan, 5%); }
+      &:active, &:checked { background-color: darken($selected_bg_color, 5%); }
     }
 }
 
@@ -815,6 +834,7 @@ calendar.raven-calendar {
       margin-bottom: 0;
       min-height: 32px;
       border-bottom: none;
+      border-color:$borders_color;
       border-radius: 0;
       color: $headerbar_fg_color;
       background-color: transparent;
@@ -830,9 +850,10 @@ calendar.raven-calendar {
         }
       }
 
-      @each $b_type, $b_color in (suggested-action, $cyan),
+      @each $b_type, $b_color in (suggested-action, $selected_bg_color),
                                  (destructive-action, $destructive_color) {
         &.#{$b_type} {
+            color: #fff;
           background-color: transparentize($b_color, 0.1);
           &:hover { background-color: transparentize(lighten($b_color,5%), 0.1); }
           &:active, &:checked { background-color: transparentize(lighten($b_color,5%), 0.1); }
@@ -928,4 +949,61 @@ window.background.budgie-settings-window.csd {
       buttonbox.inline-toolbar { border-style: none none solid; }
 
   }
+}
+
+.workspace-switcher {
+  
+  .workspace-layout {
+    border: 0 solid $panel_bg;
+
+    .top &,
+    .bottom & {
+      &:dir(ltr) { border-left-width: 1px; }
+
+      &:dir(rtl) { border-right-width: 1px; }
+    }
+
+    .left &,
+    .right & { border-top-width: 1px; }
+  }
+
+  .workspace-item,
+  .workspace-add-button {
+    border: 0 solid lighten($panel_bg, 10%);
+
+    .top &,
+    .bottom & {
+      &:dir(ltr) { border-right-width: 1px; }
+
+      &:dir(rtl) { border-left-width: 1px; }
+    }
+
+    .left &,
+    .right & { border-bottom-width: 1px; }
+  }
+
+  .workspace-item {
+
+    &.current-workspace { background-color: darken($panel_bg, 5%); }
+  }
+
+  .workspace-add-button {
+    border: none;
+    background: transparent;
+    box-shadow: none;
+    &:hover { box-shadow: none; }
+
+    &:active { background-image: none; }
+
+    &:active image { margin: 1px 0 -1px; }
+  }
+
+  .workspace-icon-button {
+    .budgie-panel & { // to overwrite the .budgie-panel button style below
+      min-height: 24px;
+      min-width: 24px;
+      padding: 0;
+      border-radius: 2px;
+    }
+  }
 }

gtk-3.0/apps/_gnome.scss

@@ -68,6 +68,38 @@
  .searchbar-container {
     margin-top: -1px;
   }
+
+  .titlebar {
+    .search{
+      border: 1px solid $borders_color;
+      border-radius: 3px;
+    }
+    .path-bar-box {
+      .dim-label {
+        color:transparent;
+      }
+      widget > .text-button:last-child,
+      widget > .text-button:last-child:active,
+      widget > .text-button:last-child:checked,
+      button:active, button:checked {
+          @include button(active-header);
+          &:backdrop{
+            &, label{
+              color: darken(rgb(255, 255, 255), 4%);
+            }
+          }
+      }
+    }
+    .linked:not(.path-bar) {
+      button {
+        &:active, &:checked, &:active:backdrop, &:checked:backdrop {
+          background: transparent;
+          color: $selected_bg_color;
+          box-shadow: none;
+          border: none;      }
+      }
+    }
+  }
 }
 
 .nautilus-circular-button {

gtk-3.0/apps/_pantheon.scss

@@ -2,7 +2,7 @@
  * Gala *
  *******/
 
-.gala-notification {
+ .gala-notification {
   border-width: 0;
   border-radius: 2px;
   color: white;
@@ -123,34 +123,50 @@
 .panel {
   background-color: transparent;
   transition: all 100ms ease-in-out;
-  color: white;
 
   &.maximized {
-    background-color: #000;
+    background-color: $panel_bg_color;
   }
 
   &.translucent {
-    background-color: transparentize(black, 0.5);
+    background-color:  transparentize($panel_bg_color, 0.5);;
   }
+
+  &.color-light.translucent {
+    background-color: transparentize($panel_fg_color, 0.15);
+  }
+}
+
+menubar.panel,
+.panel menubar {
+    box-shadow: none;
+    border: none;
 }
 
 .composited-indicator {
 
-  > GtkRevealer,
+  > revealer,
-  > GtkRevealer GtkImage,
+  > revealer image,
-  > GtkRevealer GtkLabel  {
+  > revealer label,
-    color: white;
+  > revealer spinner {
+    color: #fff;
     font-weight: bold;
-    text-shadow: 0 1px 2px transparentize(black, 0.8), 0 1px 2px transparentize(black, 0.9);
+    text-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5);
-    -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.8), 0 1px 2px transparentize(black, 0.9);
+    transition: all 200ms ease-in-out;
+    -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5);
+  }
+
+  > revealer image:first-child + label {
+    margin-left: 5px;
   }
 }
 
 .panel.color-light .composited-indicator {
 
-  > GtkRevealer,
+  > revealer,
-  > GtkRevealer GtkImage,
+  > revealer image,
-  > GtkRevealer GtkLabel {
+  > revealer label,
+  > revealer spinner {
     color: transparentize(black, 0.4);
     text-shadow: 0 1px transparentize(white, 0.9);
     -gtk-icon-shadow: 0 1px transparentize(white, 0.9);
@@ -253,3 +269,42 @@ LibraryWindow {
 .checkboard-layout .item {
     background-color: $fg_color;
 }
+
+/*********
+* Avatar *
+*********/
+
+.avatar {
+  border: 1px solid transparentize(#000, 0.77);
+  border-radius: 50%;
+  box-shadow:
+      inset 0 0 0 1px transparentize(#fff, 0.95),
+      inset 0 1px 0 0 transparentize(#fff, 0.55),
+      inset 0 -1px 0 0 transparentize(#fff, 0.85),
+      0 1px 3px transparentize(#000, 0.88),
+      0 1px 2px transparentize(#000, 0.77);
+}
+
+/**level bars**/
+
+.sidebar .source-list{
+  &.view {
+    &.level-bar {
+      &,&:selected,&:selected:focus{
+        background-color: lighten($_sidebar_color, 15%);
+        border: 1px solid transparentize(black, 0.86);
+        box-shadow: 0 1px 0 transparentize(#000, 0.75);
+        border-radius: 2px;
+      }
+      &.fill-block{
+        border: none;
+      }
+    }
+    &.fill-block{
+      &,&:hover,&:selected,&:selected:focus{
+        background-image: none;
+        background-color: $yellow;
+      }
+    }
+  }
+}

gtk-3.0/apps/_xfce.scss

@@ -0,0 +1,59 @@
+// Xfce Panel
+.xfce4-panel.panel {
+    background-color: $panel_bg_color;
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+  
+    button.flat { @extend %panelbutton; }
+  }
+  
+  #tasklist-button {
+    color: transparentize($panel_fg_color, 0.2);
+    border-radius: 0;
+    border: none;
+    background-color: transparentize($panel_bg_color, 1);
+  
+    &:hover {
+      color: lighten($panel_fg_color, 10%);
+      background-color: transparentize(black, 0.83);
+    }
+  
+    &:checked {
+      color: white;
+      background-color: transparentize(black, 0.75);
+      box-shadow: inset 0 -2px $selected_bg_color;
+    }
+  }
+  
+  %panelbutton {
+    color: $panel_fg_color;
+    border-radius: 0;
+    border: none;
+    background-color: transparentize($panel_bg_color, 1);
+  
+    &:hover {
+      border: none;
+      background-color: lighten($panel_bg_color, 25%);
+    }
+    &:active, &:checked {
+      color: $selected_fg_color;
+      background-color: lighten($panel_bg_color, 20%);
+      border-bottom: 2px solid $selected_bg_color;
+  
+      label, image { color: inherit; }
+    }
+  }
+
+
+
+#whiskermenu-window button {
+    background-color:transparent;
+    border: none;
+    border-radius: 0;
+    font-weight: normal;
+    padding: 2px;
+    margin: 1px 0px;
+    &:hover, &:checked {
+        background-color: $selected_bg_color;
+    }
+}

gtk-3.0/widgets/_buttons.scss

@@ -45,9 +45,14 @@ button {
       &:hover {
         transition: $button_transition;
         transition-duration: 500ms;
-
         &:active { transition: $button_transition; }
       }
+      &.image-button:hover {
+        &, &:backdrop {
+          background-color: $selected_bg_color;
+          color: $selected_fg_color;
+        }
+      }
     }
 
     &:hover {
@@ -61,6 +66,13 @@ button {
 
       transition-duration: 50ms;
     }
+    &:active {
+      color: $fg_color;
+    }
+    &:active:hover, &:checked {
+      color: $selected_fg_color;
+    }
+
 
     &:backdrop {
       &.flat, & {
@@ -94,12 +106,20 @@ button {
       min-width: 24px;
       padding-left: 4px;
       padding-right: 4px;
+      &.circular,&.sidebar-button{
+        padding: 6px 4px;
+        border-radius: 50px;
+        box-shadow: none;
+       }
+      &.sidebar-button {
+        background-color: lighten($_sidebar_color, 7.77%); 
+        color: #fff;
+        &:hover{
+          background-color: $selected_bg_color;
+        }
+      }
     }
-    &.image-button.circular,&.image-button.sidebar-button{
+    
-      padding: 6px 4px;
-      border-radius: 50px;
-      box-shadow: none;
-     }
 
     &.text-button {
       padding-left: 16px;
@@ -198,12 +218,15 @@ button {
     &:backdrop { @include button(osd-backdrop); }
 
     &.flat {
-      @include button(undecorated);
+      @include button(osd);
 
       box-shadow: none; //FIXME respect no edge on the button mixin
       text-shadow: 0 1px black;
       -gtk-icon-shadow: 0 1px black;
 
+      &.image-button {
+        @include button(osd); 
+      } 
       &:hover { @include button(osd-hover); }
 
       &:disabled {
@@ -213,7 +236,7 @@ button {
         box-shadow: none;
       }
 
-      &:backdrop { @include button(undecorated); }
+      &:backdrop { @include button(osd-backdrop); }
 
       &:active,
       &:checked { @include button(osd-active); }
@@ -543,7 +566,7 @@ button.color {
     &, overlay { border-radius: 0; }
 
     @if $variant == 'light' {
-      box-shadow: 0 1px _text_shadow_color();
+      box-shadow: none;
 
       &:disabled,
       &:backdrop { box-shadow: none; }
@@ -553,9 +576,9 @@ button.color {
 
 notebook, list, .view, popover {
   button {
-    box-shadow: inset 0px 0px 0px 1px $borders_color;
+    box-shadow: none;
     &:backdrop {
-      box-shadow: inset 0px 0px 0px 1px $borders_color;
+      box-shadow: none;
     }
   }
   .linked > button {

gtk-3.0/widgets/_entries.scss

@@ -53,6 +53,7 @@ entry {
     @each $e_type, $e_color in (error, $error_color),
                                (warning, $warning_color) {
       &.#{$e_type} {
+        @include entry(normal);
         color: $e_color;
         border-color: entry_focus_border($e_color);
 

gtk-3.0/widgets/_header-bars.scss

@@ -217,8 +217,8 @@ headerbar {
     min-height: 20px;
 
     button.titlebutton {
-      min-height: 19px;
+      min-height: 20px;
-      min-width: 19px;
+      min-width: 20px;
       margin: 0;
       padding: 0;
     }

gtk-3.0/widgets/_lists.scss

@@ -41,6 +41,10 @@ row {
 
       &:backdrop { background-color: $backdrop_selected_bg_color; }
     }
+    
+    button.flat{
+      background-color: transparent;
+    }
   }
 
   &:selected { @extend %selected_items; }

gtk-3.0/widgets/_menus.scss

@@ -27,6 +27,7 @@ menubar,
 menu,
 .menu,
 .context-menu {
+  font: initial;
   margin: 4px;
   padding: 2px 0px;
   background: if( $variant == 'light',  linear-gradient(to bottom, #fff 20%, #fff), linear-gradient(to bottom, lighten($bg_color, 2%), darken($bg_color, 2%)));

gtk-3.0/widgets/_notebooks.scss

@@ -18,7 +18,7 @@ notebook {
     &.top {
       border-bottom-style: solid;
       > tabs {
-        margin-bottom: -3px;
+        margin-bottom: -2px;
         > tab {
 
 
@@ -209,7 +209,11 @@ notebook {
 
       // colors the button like the label, overridden otherwise
       button.flat {
-        &:hover {  background: transparent; box-shadow: none; color: $red; }
+        &:hover {  
+          background: transparent;
+          box-shadow: none;
+          color: $red; 
+        }
 
         &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
 
@@ -292,4 +296,15 @@ notebook {
 
     &:backdrop { background-color: $backdrop_base_color; }
   }
+
+  button.flat{
+    &, &:backdrop {
+      border: none;
+      background-color: transparent;
+    }
+    &:hover, &:active, &:checked {
+      background: $selected_bg_color;
+    }
+    padding: 2px 4px;
+  }
 }

gtk-3.0/widgets/_progress-bars.scss

@@ -13,8 +13,8 @@ progressbar {
     progress { min-width: 6px; }
   }
 
-  &.horizontal progress { margin: 0; } // the progress node is positioned after the trough border
+  &.horizontal progress { margin: 0;} // the progress node is positioned after the trough border
-  &.vertical progress { margin: 0; }   // this moves it over it.
+  &.vertical progress { margin: 0; @include scale-highlight(bottom);}   // this moves it over it.
 
 
   // FIXME: insensitive state missing and some other state should be set probably

gtk-3.0/widgets/_scales.scss

@@ -19,7 +19,7 @@
 
 %scale_highlight {
   border: none;
-  background: linear-gradient(to right, #00f17d, #00f7d2);
+  @include scale-highlight(right);
   border-radius: 3px;
   margin: 0;
 
@@ -54,7 +54,8 @@ scale {
 
   &.vertical {
     trough,
-    progress { min-width: 6px; }
+    progress { min-width: 6px;}
+    highlight { @include scale-highlight(bottom); }
   }
 
   // the slider is inside the trough, so to have make it bigger there's a negative margin

gtk-3.0/widgets/_sidebar.scss

@@ -28,7 +28,7 @@
   &:backdrop {
     background-color: $backdrop_sidebar_bg_color;
     border-color: $backdrop_borders_color;
-    transition: $backdrop_transition;
+    transition: $sidebar_backdrop_transition;
   }
 
   row{
@@ -38,35 +38,34 @@
       color: #98abb2;
     }
     &:selected{
-      color: #fff;
+      color: $selected_fg_color;
       // border-left: 4px solid $selected_bg_color;
       &:backdrop{
-        color: $backdrop_selected_bg_color;
+        color: $backdrop_selected_fg_color;
-        background: transparent;
+        background: $backdrop_selected_bg_color;
         label{
-          color: #fff;
+          color: $selected_fg_color;
         }  
       }
       &:hover{
         // background-color: transparentize($selected_bg_color, 0.8);
       }
       label{
-        color: #fff;
+        color: $selected_fg_color;
       }
     }
   }
 
     //elementary os file manager
     &.source-list{
-      background: $base_color;
+      background: $_sidebar_color;
       padding: 4px 0px;
+      color: #98abb2;
       &.view{
         transition: all .12s ease-in;
         &:selected {
-          padding-left: 4px;
+          background-color: #00e8b7;
-          background: transparentize(#eee, 0.5);
+          color: #fff;
-          color: #ACACAC;
-          border-left: 4px solid $selected_bg_color;
           &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
     
           &.has-open-popup,
@@ -75,7 +74,7 @@
           &:backdrop { background-color: $backdrop_selected_bg_color; }
         }
         &:hover, iconview.source-list:hover { 
-            background-color: if(variant == light, transparentize($bg_color, 0.6), transparentize($bg_color, 0.6)); 
+            background-color:  transparentize($_sidebar_color, 0.05); 
         }
       }
     }
@@ -121,7 +120,6 @@ stacksidebar {
 /*--*/
 
 placessidebar{
-  $_sidebar_color: if($variant == 'light', #222e39, #161925);
 	&.sidebar{
 		background-color: transparent;
 		background-image:linear-gradient(to right, #171e27 40px,
@@ -130,10 +128,8 @@ placessidebar{
 												$_sidebar_color 100%);
 		row{
 			&.sidebar-row {
-				margin-right: -14px;
 				&.sidebar-row{
 					.sidebar-icon {
-			
 						margin-left:-14px;
 						margin-right: 12px;
 						padding-left: 14px;
@@ -143,7 +139,6 @@ placessidebar{
 				}
 				&:hover{
 					transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-				
 					color: rgba(0,0,0,0.76);
 					background-color: transparent; /*rgba(65,67,75,0.4); */
 					background-image:linear-gradient(to right, rgba(65,67,75,0) 40px, rgba(0,0,0,0.12) 40px,rgba(0,0,0,0.12) 97%);
@@ -157,7 +152,7 @@ placessidebar{
 				}
 
 				&:selected{
-					color: rgba(0,0,0,0.54);
+					color: #fff;
 					background-color: transparent;
 					background-image:linear-gradient(to right, #00e8b7 40px,
 																rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);
@@ -181,12 +176,29 @@ placessidebar{
 					}
 				}
 
+        &.sidebar-new-bookmark-row { 
+          &, label, .sidebar-icon {
+            color: $yellow; 
+          }
+        }
+
+        &:drop(active):not(:disabled) {
+          &, label, image { color: $drop_target_color; }
+    
+          box-shadow: inset 0 1px $drop_target_color,
+                      inset 0 -1px $drop_target_color;
+    
+          &:selected {
+            &, label, image { color: $selected_fg_color; }
+            background: $drop_target_color;
+          }
+        }
+
 			}
 		}
 	}
 	list{ 
 		background-color: transparent; 
-
 		&:backdrop { background-color: transparent; }
 	}
   

gtk-3.0/widgets/_windows.scss

@@ -58,7 +58,7 @@ decoration {
 
   .solid-csd & {
     border-radius: 0;
-    margin: 4px;
+    margin: 0px;
     background-color: $backdrop_bg_color;
     border: solid 1px $backdrop_borders_color;
     box-shadow: none;

metacity-1/metacity-theme-1.xml

@@ -0,0 +1 @@
+metacity-theme.xml

metacity-1/metacity-theme-2.xml

@@ -0,0 +1 @@
+metacity-theme.xml

metacity-1/metacity-theme-3.xml

@@ -0,0 +1 @@
+metacity-theme.xml