Fix pathbar issue on gnome-3.32

.gitignore

@@ -5,4 +5,6 @@ node_modules/
 .sass-cache/
 *.css.map
 
-_gnome-shell/
+_gnome-shell/
+
+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"); }
 }
@@ -227,10 +237,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 +515,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 +527,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 +562,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 +604,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 +816,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 +857,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 +893,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 +940,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 +986,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 +1039,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 +1077,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 +1176,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; }
   }
@@ -1269,7 +1293,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 +1302,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 +1359,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 +1388,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 +1417,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 +1471,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;
   }
 
@@ -1691,15 +1722,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 {
@@ -208,7 +214,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 +262,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 +493,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 +504,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 +535,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 +572,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 +609,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 +624,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 +668,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 +697,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 +722,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 +734,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 +780,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 +812,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 +842,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 +859,7 @@ StScrollBar {
 .weather-header,
 .events-section-title,
 .message-list-section-title {
-  color: #9eb0b6;
+  color: #7b939c;
   font-weight: bold; }
 
 .world-clocks-grid {
@@ -854,7 +881,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 +902,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 +925,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 +937,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 +949,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 +958,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 +996,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 +1042,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 +1072,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; }
 
@@ -1100,14 +1140,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 +1188,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 +1240,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 +1260,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 +1282,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 +1308,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 +1323,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 +1345,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 +1360,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 +1368,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 +1387,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 +1399,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;
@@ -1432,14 +1473,14 @@ 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 .notification-icon {
     padding: 5px; }
   .notification-banner .notification-content {
@@ -1448,18 +1489,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 +1573,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 +1599,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 +1610,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 +1649,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 +1714,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 +1870,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 +1884,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 +1895,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 +1980,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-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;
@@ -74,9 +75,9 @@ $info_color: $lime;
 $question_color: $cyan;
 
 // Panel colors
-$panel_bg_color: transparentize(black, 0.3);
+$panel_bg_color: transparentize($base_color, 0.3);
-$panel_fg_color: white;
+$panel_fg_color: $fg_color;
-$panel_borders_color: transparentize(black, 0.8);
+$panel_borders_color: transparentize($base_color, 0.8);
 
 // Disabled state colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);

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); }

gtk-3.0/apps/_gnome.scss

@@ -68,6 +68,32 @@
  .searchbar-container {
     margin-top: -1px;
   }
+
+  .titlebar {
+    .path-bar-box {
+      .dim-label {
+        color:transparent;
+      }
+      widget > .text-button:last-child,
+      button:active, button:checked {
+          @include button(active-header);
+          &:backdrop{
+            &, label{
+              color: darken(rgb(255, 250, 250), 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,46 @@
 .panel {
   background-color: transparent;
   transition: all 100ms ease-in-out;
-  color: white;
 
   &.maximized {
     background-color: #000;
   }
 
   &.translucent {
-    background-color: transparentize(black, 0.5);
+    background-color:  transparentize(black, 0.5);;
   }
 }
 
+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 +265,19 @@ 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);
+}
+

gtk-3.0/apps/_xfce.scss

@@ -0,0 +1,60 @@
+// 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, 10%);
+    }
+    &:active, &:checked {
+      color: $selected_fg_color;
+      border: none;
+      background-color: $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,12 @@ button {
       &:hover {
         transition: $button_transition;
         transition-duration: 500ms;
-
         &:active { transition: $button_transition; }
       }
+      &.image-button:hover {
+        background-color: $selected_bg_color;
+        color: $selected_fg_color;
+      }
     }
 
     &:hover {
@@ -94,12 +97,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 +209,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 +227,7 @@ button {
         box-shadow: none;
       }
 
-      &:backdrop { @include button(undecorated); }
+      &:backdrop { @include button(osd-backdrop); }
 
       &:active,
       &:checked { @include button(osd-active); }
@@ -543,7 +557,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 +567,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:not(.image-button){
+      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

@@ -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

@@ -38,20 +38,20 @@
       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;
       }
     }
   }
@@ -121,7 +121,6 @@ stacksidebar {
 /*--*/
 
 placessidebar{
-  $_sidebar_color: if($variant == 'light', #222e39, #161925);
 	&.sidebar{
 		background-color: transparent;
 		background-image:linear-gradient(to right, #171e27 40px,
@@ -130,10 +129,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 +140,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 +153,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%);
@@ -186,7 +182,6 @@ placessidebar{
 	}
 	list{ 
 		background-color: transparent; 
-
 		&:backdrop { background-color: transparent; }
 	}
   

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

package.json

@@ -4,7 +4,8 @@
   "description": "Light and dark colorful Gtk3.20+ theme",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "git push && sh install.sh"
   },
   "repository": {
     "type": "git",

src/render-wm-assets-hidpi.py

@@ -0,0 +1,180 @@
+#!/usr/bin/python3
+
+# Thanks to the GNOME theme nerds for the original source of this script
+
+import os
+import sys
+import xml.sax
+import subprocess
+
+INKSCAPE = '/usr/bin/inkscape'
+OPTIPNG = '/usr/bin/optipng'
+MAINDIR = '../'
+SRC = os.path.join('.', 'wm')
+
+inkscape_process = None
+
+
+def optimize_png(png_file):
+    if os.path.exists(OPTIPNG):
+        process = subprocess.Popen([OPTIPNG, '-quiet', '-o7', png_file])
+        process.wait()
+
+
+def wait_for_prompt(process, command=None):
+    if command is not None:
+        process.stdin.write((command+'\n').encode('utf-8'))
+
+    # This is kinda ugly ...
+    # Wait for just a '>', or '\n>' if some other char appearead first
+    output = process.stdout.read(1)
+    if output == b'>':
+        return
+
+    output += process.stdout.read(1)
+    while output != b'\n>':
+        output += process.stdout.read(1)
+        output = output[1:]
+
+
+def start_inkscape():
+    process = subprocess.Popen(
+        [INKSCAPE, '--shell'],
+        bufsize=0, stdin=subprocess.PIPE, stdout=subprocess.PIPE
+        )
+    wait_for_prompt(process)
+    return process
+
+
+def inkscape_render_rect(icon_file, rect, output_file):
+    global inkscape_process
+    if inkscape_process is None:
+        inkscape_process = start_inkscape()
+    wait_for_prompt(inkscape_process,
+                    '--export-dpi=180 %s -i %s -e %s' % (icon_file, rect, output_file)
+                    )
+    optimize_png(output_file)
+
+
+class ContentHandler(xml.sax.ContentHandler):
+    ROOT = 0
+    SVG = 1
+    LAYER = 2
+    OTHER = 3
+    TEXT = 4
+
+    def __init__(self, path, force=False, filter=None):
+        self.stack = [self.ROOT]
+        self.inside = [self.ROOT]
+        self.path = path
+        self.rects = []
+        self.state = self.ROOT
+        self.chars = ""
+        self.force = force
+        self.filter = filter
+
+    def endDocument(self):
+        pass
+
+    def startElement(self, name, attrs):
+        if self.inside[-1] == self.ROOT:
+            if name == "svg":
+                self.stack.append(self.SVG)
+                self.inside.append(self.SVG)
+                return
+        elif self.inside[-1] == self.SVG:
+            if (name == "g" and ('inkscape:groupmode' in attrs) and ('inkscape:label' in attrs)
+               and attrs['inkscape:groupmode'] == 'layer' and attrs['inkscape:label'].startswith('Baseplate')):
+                self.stack.append(self.LAYER)
+                self.inside.append(self.LAYER)
+                self.context = None
+                self.icon_name = None
+                self.rects = []
+                return
+        elif self.inside[-1] == self.LAYER:
+            if name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'context':
+                self.stack.append(self.TEXT)
+                self.inside.append(self.TEXT)
+                self.text='context'
+                self.chars = ""
+                return
+            elif name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'icon-name':
+                self.stack.append(self.TEXT)
+                self.inside.append(self.TEXT)
+                self.text = 'icon-name'
+                self.chars = ""
+                return
+            elif name == "rect":
+                self.rects.append(attrs)
+
+        self.stack.append(self.OTHER)
+
+    def endElement(self, name):
+        stacked = self.stack.pop()
+        if self.inside[-1] == stacked:
+            self.inside.pop()
+
+        if stacked == self.TEXT and self.text is not None:
+            assert self.text in ['context', 'icon-name']
+            if self.text == 'context':
+                self.context = self.chars
+            elif self.text == 'icon-name':
+                self.icon_name = self.chars
+            self.text = None
+        elif stacked == self.LAYER:
+            assert self.icon_name
+            assert self.context
+
+            if self.filter is not None and not self.icon_name in self.filter:
+                return
+
+            print (self.context, self.icon_name)
+            for rect in self.rects:
+                width = rect['width']
+                height = rect['height']
+                id = rect['id']
+
+                dir = os.path.join(MAINDIR, self.context)
+                outfile = os.path.join(dir, self.icon_name+'.png')
+                if not os.path.exists(dir):
+                    os.makedirs(dir)
+                # Do a time based check!
+                if self.force or not os.path.exists(outfile):
+                    inkscape_render_rect(self.path, id, outfile)
+                    sys.stdout.write('.')
+                else:
+                    stat_in = os.stat(self.path)
+                    stat_out = os.stat(outfile)
+                    if stat_in.st_mtime > stat_out.st_mtime:
+                        inkscape_render_rect(self.path, id, outfile)
+                        sys.stdout.write('.')
+                    else:
+                        sys.stdout.write('-')
+                sys.stdout.flush()
+            sys.stdout.write('\n')
+            sys.stdout.flush()
+
+    def characters(self, chars):
+        self.chars += chars.strip()
+
+if len(sys.argv) == 1:
+    if not os.path.exists(MAINDIR):
+        os.mkdir(MAINDIR)
+    print ('Rendering from SVGs in', SRC)
+    for file in os.listdir(SRC):
+        if file[-4:] == '.svg':
+            file = os.path.join(SRC, file)
+            handler = ContentHandler(file)
+            xml.sax.parse(open(file), handler)
+else:
+    file = os.path.join(SRC, sys.argv[1] + '.svg')
+    if len(sys.argv) > 2:
+        icons = sys.argv[2:]
+    else:
+        icons = None
+    if os.path.exists(os.path.join(file)):
+        handler = ContentHandler(file, True, filter=icons)
+        xml.sax.parse(open(file), handler)
+    else:
+        print ("Error: No such file", file)
+        sys.exit(1)

src/render-wm-assets.py

@@ -0,0 +1,180 @@
+#!/usr/bin/python3
+
+# Thanks to the GNOME theme nerds for the original source of this script
+
+import os
+import sys
+import xml.sax
+import subprocess
+
+INKSCAPE = '/usr/bin/inkscape'
+OPTIPNG = '/usr/bin/optipng'
+MAINDIR = '../'
+SRC = os.path.join('.', 'wm')
+
+inkscape_process = None
+
+
+def optimize_png(png_file):
+    if os.path.exists(OPTIPNG):
+        process = subprocess.Popen([OPTIPNG, '-quiet', '-o7', png_file])
+        process.wait()
+
+
+def wait_for_prompt(process, command=None):
+    if command is not None:
+        process.stdin.write((command+'\n').encode('utf-8'))
+
+    # This is kinda ugly ...
+    # Wait for just a '>', or '\n>' if some other char appearead first
+    output = process.stdout.read(1)
+    if output == b'>':
+        return
+
+    output += process.stdout.read(1)
+    while output != b'\n>':
+        output += process.stdout.read(1)
+        output = output[1:]
+
+
+def start_inkscape():
+    process = subprocess.Popen(
+        [INKSCAPE, '--shell'],
+        bufsize=0, stdin=subprocess.PIPE, stdout=subprocess.PIPE
+        )
+    wait_for_prompt(process)
+    return process
+
+
+def inkscape_render_rect(icon_file, rect, output_file):
+    global inkscape_process
+    if inkscape_process is None:
+        inkscape_process = start_inkscape()
+    wait_for_prompt(inkscape_process,
+                    '%s -i %s -e %s' % (icon_file, rect, output_file)
+                    )
+    optimize_png(output_file)
+
+
+class ContentHandler(xml.sax.ContentHandler):
+    ROOT = 0
+    SVG = 1
+    LAYER = 2
+    OTHER = 3
+    TEXT = 4
+
+    def __init__(self, path, force=False, filter=None):
+        self.stack = [self.ROOT]
+        self.inside = [self.ROOT]
+        self.path = path
+        self.rects = []
+        self.state = self.ROOT
+        self.chars = ""
+        self.force = force
+        self.filter = filter
+
+    def endDocument(self):
+        pass
+
+    def startElement(self, name, attrs):
+        if self.inside[-1] == self.ROOT:
+            if name == "svg":
+                self.stack.append(self.SVG)
+                self.inside.append(self.SVG)
+                return
+        elif self.inside[-1] == self.SVG:
+            if (name == "g" and ('inkscape:groupmode' in attrs) and ('inkscape:label' in attrs)
+               and attrs['inkscape:groupmode'] == 'layer' and attrs['inkscape:label'].startswith('Baseplate')):
+                self.stack.append(self.LAYER)
+                self.inside.append(self.LAYER)
+                self.context = None
+                self.icon_name = None
+                self.rects = []
+                return
+        elif self.inside[-1] == self.LAYER:
+            if name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'context':
+                self.stack.append(self.TEXT)
+                self.inside.append(self.TEXT)
+                self.text='context'
+                self.chars = ""
+                return
+            elif name == "text" and ('inkscape:label' in attrs) and attrs['inkscape:label'] == 'icon-name':
+                self.stack.append(self.TEXT)
+                self.inside.append(self.TEXT)
+                self.text = 'icon-name'
+                self.chars = ""
+                return
+            elif name == "rect":
+                self.rects.append(attrs)
+
+        self.stack.append(self.OTHER)
+
+    def endElement(self, name):
+        stacked = self.stack.pop()
+        if self.inside[-1] == stacked:
+            self.inside.pop()
+
+        if stacked == self.TEXT and self.text is not None:
+            assert self.text in ['context', 'icon-name']
+            if self.text == 'context':
+                self.context = self.chars
+            elif self.text == 'icon-name':
+                self.icon_name = self.chars
+            self.text = None
+        elif stacked == self.LAYER:
+            assert self.icon_name
+            assert self.context
+
+            if self.filter is not None and not self.icon_name in self.filter:
+                return
+
+            print (self.context, self.icon_name)
+            for rect in self.rects:
+                width = rect['width']
+                height = rect['height']
+                id = rect['id']
+
+                dir = os.path.join(MAINDIR, self.context)
+                outfile = os.path.join(dir, self.icon_name+'.png')
+                if not os.path.exists(dir):
+                    os.makedirs(dir)
+                # Do a time based check!
+                if self.force or not os.path.exists(outfile):
+                    inkscape_render_rect(self.path, id, outfile)
+                    sys.stdout.write('.')
+                else:
+                    stat_in = os.stat(self.path)
+                    stat_out = os.stat(outfile)
+                    if stat_in.st_mtime > stat_out.st_mtime:
+                        inkscape_render_rect(self.path, id, outfile)
+                        sys.stdout.write('.')
+                    else:
+                        sys.stdout.write('-')
+                sys.stdout.flush()
+            sys.stdout.write('\n')
+            sys.stdout.flush()
+
+    def characters(self, chars):
+        self.chars += chars.strip()
+
+if len(sys.argv) == 1:
+    if not os.path.exists(MAINDIR):
+        os.mkdir(MAINDIR)
+    print ('Rendering from SVGs in', SRC)
+    for file in os.listdir(SRC):
+        if file[-4:] == '.svg':
+            file = os.path.join(SRC, file)
+            handler = ContentHandler(file)
+            xml.sax.parse(open(file), handler)
+else:
+    file = os.path.join(SRC, sys.argv[1] + '.svg')
+    if len(sys.argv) > 2:
+        icons = sys.argv[2:]
+    else:
+        icons = None
+    if os.path.exists(os.path.join(file)):
+        handler = ContentHandler(file, True, filter=icons)
+        xml.sax.parse(open(file), handler)
+    else:
+        print ("Error: No such file", file)
+        sys.exit(1)

xfwm4/assets/close-active.svg

@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="28"
+   height="28"
+   viewBox="0 0 28 28.000001"
+   id="svg4142"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="close-active.svg">
+  <defs
+     id="defs4144">
+    <linearGradient
+       gradientTransform="matrix(0.01220888,0,0,-0.01220884,7.1780168,1044.6517)"
+       inkscape:collect="always"
+       xlink:href="#linearGradient847"
+       id="linearGradient849"
+       x1="5.6857157"
+       y1="515.151"
+       x2="865.45459"
+       y2="540.10333"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient847">
+      <stop
+         style="stop-color:#ff416c;stop-opacity:1"
+         offset="0"
+         id="stop843" />
+      <stop
+         style="stop-color:#ff4b2b;stop-opacity:1"
+         offset="1"
+         id="stop845" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="12.629635"
+     inkscape:cx="8.0871216"
+     inkscape:cy="15.290785"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1366"
+     inkscape:window-height="713"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4690" />
+    <sodipodi:guide
+       position="14,46.000001"
+       orientation="1,0"
+       id="guide817"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-6,16"
+       orientation="0,1"
+       id="guide819"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4147">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1024.3622)">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4741"
+       width="28"
+       height="32"
+       x="0"
+       y="1020.3622" />
+    <circle
+       style="fill:#eceff1;fill-opacity:0.1;stroke:none;stroke-width:0.5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path2994"
+       cx="1038.0586"
+       cy="13.017858"
+       r="12"
+       transform="rotate(90)" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.07000002;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4139"
+       width="28"
+       height="1"
+       x="0"
+       y="1020.3622" />
+    <path
+       id="path4094"
+       style="fill:url(#linearGradient849);fill-opacity:1;fill-rule:evenodd;stroke:#e70340;stroke-width:0.49486586;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 14.00006,1045.1148 c 3.729277,0 6.752507,-3.0233 6.752507,-6.7526 0,-3.7293 -3.02323,-6.7525 -6.752507,-6.7525 -3.729389,0 -6.7526271,3.0232 -6.7526271,6.7525 0,3.7293 3.0232381,6.7526 6.7526271,6.7526"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+  </g>
+</svg>

xfwm4/assets/close-inactive.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="28"
+   height="28"
+   viewBox="0 0 28 28.000001"
+   id="svg4142"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="close-inactive.svg">
+  <defs
+     id="defs4144" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.0623163"
+     inkscape:cx="-8.4205771"
+     inkscape:cy="14.547723"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1366"
+     inkscape:window-height="714"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4690" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4147">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1024.3622)">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4741"
+       width="28"
+       height="32"
+       x="0"
+       y="1020.3622" />
+    <circle
+       style="fill:#eceff1;fill-opacity:0.1;stroke:none;stroke-width:0.5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path2994"
+       cx="1038.0586"
+       cy="13.017858"
+       r="12"
+       transform="rotate(90)" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.07000002;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4139"
+       width="28"
+       height="1"
+       x="0"
+       y="1020.3622" />
+    <path
+       id="path4199"
+       style="fill:#b4b4b4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.01637698"
+       d="m 13.999995,1045.3622 c 3.865996,0 7.000005,-3.134 7.000005,-7.0001 0,-3.8659 -3.134009,-6.9999 -7.000005,-6.9999 -3.865977,0 -6.999995,3.134 -6.999995,6.9999 0,3.8661 3.134018,7.0001 6.999995,7.0001"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="124.22228"
+       inkscape:export-ydpi="124.22228" />
+    <path
+       id="path4201"
+       style="fill:#d4d4d4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.01637698"
+       d="m 13.999995,1044.7668 c 3.537178,0 6.40467,-2.8674 6.40467,-6.4047 0,-3.5371 -2.867492,-6.4045 -6.40467,-6.4045 -3.53716,0 -6.404667,2.8674 -6.404667,6.4045 0,3.5373 2.867507,6.4047 6.404667,6.4047"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="124.22228"
+       inkscape:export-ydpi="124.22228" />
+  </g>
+</svg>

xfwm4/assets/close-prelight.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="28"
+   height="28"
+   viewBox="0 0 28 28.000001"
+   id="svg4142"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="close-prelight.svg">
+  <defs
+     id="defs4144" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.0623161"
+     inkscape:cx="11.588311"
+     inkscape:cy="15.789292"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1366"
+     inkscape:window-height="714"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4690" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4147">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1024.3622)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       d="m 0,1020.3622 v 32 h 28 v -32 z"
+       id="rect4741"
+       inkscape:connector-curvature="0" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.07000002;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4142"
+       width="28"
+       height="1"
+       x="0"
+       y="1020.3622" />
+    <path
+       id="path4094"
+       style="fill:#d52735;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.01265625"
+       d="m 14.000062,1045.3622 c 3.865928,0 6.999937,-3.134 6.999937,-7 0,-3.866 -3.134009,-7 -6.999937,-7 -3.866043,0 -7.000062,3.134 -7.000062,7 0,3.866 3.134019,7 7.000062,7"
+       inkscape:connector-curvature="0" />
+    <g
+       id="g4144"
+       transform="matrix(0.01351731,0,0,-0.01351731,6.9333283,1045.4124)">
+      <path
+         inkscape:connector-curvature="0"
+         d="m 522.79173,40.6992 c 265.56911,0 480.85987,215.29542 480.85987,480.86946 0,265.57526 -215.29076,480.86604 -480.85987,480.86604 -265.57896,0 -480.86983,-215.29078 -480.86983,-480.86604 0,-265.57404 215.29087,-480.86946 480.86983,-480.86946"
+         style="fill:#f25056;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         id="path4096" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path4098"
+         d="m 306.28404,782.14979 c -11.06764,0 -22.15209,-4.31529 -30.55026,-12.71345 l -0.75901,-0.75902 c -16.79758,-16.79634 -16.79758,-44.30417 0,-61.10052 L 460.93287,521.6187 274.97477,335.47086 c -16.79266,-16.79145 -16.79266,-44.11445 0,-60.91075 l 0.75901,-0.94881 c 16.79142,-16.7963 44.30418,-16.7963 61.10051,0 L 522.7924,459.56941 708.7505,273.6113 c 16.79265,-16.7963 44.30417,-16.7963 61.10052,0 l 0.75901,0.94881 c 16.79142,16.79144 16.79142,44.1193 0,60.91075 l -185.9581,186.14784 185.9581,185.9581 c 16.79142,16.79635 16.79635,44.3091 0,61.10052 l -0.75901,0.75902 c -16.80126,16.79142 -44.30787,16.79142 -61.10052,0 L 522.7924,583.47823 336.83429,769.43634 c -8.39817,8.39816 -19.48262,12.71345 -30.55025,12.71345 z"
+         style="fill:#9f1d2b;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+    </g>
+  </g>
+</svg>

xfwm4/assets/close-pressed.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="28"
+   height="28"
+   viewBox="0 0 28 28.000001"
+   id="svg4142"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="close-prelight.svg">
+  <defs
+     id="defs4144" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.0623161"
+     inkscape:cx="11.588311"
+     inkscape:cy="15.789292"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1366"
+     inkscape:window-height="714"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4690" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4147">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1024.3622)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       d="m 0,1020.3622 v 32 h 28 v -32 z"
+       id="rect4741"
+       inkscape:connector-curvature="0" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.07000002;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4142"
+       width="28"
+       height="1"
+       x="0"
+       y="1020.3622" />
+    <path
+       id="path4094"
+       style="fill:#d52735;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.01265625"
+       d="m 14.000062,1045.3622 c 3.865928,0 6.999937,-3.134 6.999937,-7 0,-3.866 -3.134009,-7 -6.999937,-7 -3.866043,0 -7.000062,3.134 -7.000062,7 0,3.866 3.134019,7 7.000062,7"
+       inkscape:connector-curvature="0" />
+    <g
+       id="g4144"
+       transform="matrix(0.01351731,0,0,-0.01351731,6.9333283,1045.4124)">
+      <path
+         inkscape:connector-curvature="0"
+         d="m 522.79173,40.6992 c 265.56911,0 480.85987,215.29542 480.85987,480.86946 0,265.57526 -215.29076,480.86604 -480.85987,480.86604 -265.57896,0 -480.86983,-215.29078 -480.86983,-480.86604 0,-265.57404 215.29087,-480.86946 480.86983,-480.86946"
+         style="fill:#f25056;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         id="path4096" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path4098"
+         d="m 306.28404,782.14979 c -11.06764,0 -22.15209,-4.31529 -30.55026,-12.71345 l -0.75901,-0.75902 c -16.79758,-16.79634 -16.79758,-44.30417 0,-61.10052 L 460.93287,521.6187 274.97477,335.47086 c -16.79266,-16.79145 -16.79266,-44.11445 0,-60.91075 l 0.75901,-0.94881 c 16.79142,-16.7963 44.30418,-16.7963 61.10051,0 L 522.7924,459.56941 708.7505,273.6113 c 16.79265,-16.7963 44.30417,-16.7963 61.10052,0 l 0.75901,0.94881 c 16.79142,16.79144 16.79142,44.1193 0,60.91075 l -185.9581,186.14784 185.9581,185.9581 c 16.79142,16.79635 16.79635,44.3091 0,61.10052 l -0.75901,0.75902 c -16.80126,16.79142 -44.30787,16.79142 -61.10052,0 L 522.7924,583.47823 336.83429,769.43634 c -8.39817,8.39816 -19.48262,12.71345 -30.55025,12.71345 z"
+         style="fill:#9f1d2b;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+    </g>
+  </g>
+</svg>

xfwm4/assets/hide-active.svg

@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="28"
+   height="28"
+   viewBox="0 0 28 28.000001"
+   id="svg4142"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="hide-active.svg">
+  <defs
+     id="defs4144">
+    <linearGradient
+       gradientTransform="matrix(0.01265625,0,0,-0.01265625,6.9297536,1044.8551)"
+       inkscape:collect="always"
+       xlink:href="#linearGradient824"
+       id="linearGradient826"
+       x1="45.056507"
+       y1="513.01526"
+       x2="875.71759"
+       y2="547.94849"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient824">
+      <stop
+         style="stop-color:#f7f206;stop-opacity:1"
+         offset="0"
+         id="stop820" />
+      <stop
+         style="stop-color:#ffbb24;stop-opacity:1"
+         offset="1"
+         id="stop822" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.5330083"
+     inkscape:cx="12.59038"
+     inkscape:cy="11.682639"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1366"
+     inkscape:window-height="714"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4690" />
+    <sodipodi:guide
+       position="14,36.000001"
+       orientation="1,0"
+       id="guide818"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-12,14"
+       orientation="0,1"
+       id="guide820"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="12,6.0000002"
+       orientation="0,1"
+       id="guide822"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="6,20.000001"
+       orientation="1,0"
+       id="guide824"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4147">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1024.3622)">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.56771088;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4741"
+       width="28"
+       height="27.999966"
+       x="0"
+       y="1024.3622" />
+    <circle
+       style="fill:#eceff1;fill-opacity:0.1;stroke:none;stroke-width:0.5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path2994"
+       cx="1036.3622"
+       cy="13"
+       r="12"
+       transform="rotate(90)" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.07000002;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4959"
+       width="28"
+       height="1"
+       x="0"
+       y="1020.3622" />
+    <path
+       id="path4417"
+       style="fill:#e5c206;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.01265625"
+       d="m 13.999996,1045.3622 c 3.866011,0 7.000035,-3.134 7.000035,-7 0,-3.866 -3.134024,-7 -7.000035,-7 -3.865995,0 -7.0000267,3.134 -7.0000267,7 0,3.866 3.1340317,7 7.0000267,7"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="95.99958"
+       inkscape:export-ydpi="95.99958" />
+    <path
+       id="path4419"
+       style="fill:url(#linearGradient826);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.01265625"
+       d="m 14.000033,1044.8622 c 3.589845,0 6.499967,-2.9101 6.499967,-6.5 0,-3.5899 -2.910122,-6.5 -6.499967,-6.5 -3.589829,0 -6.500033,2.9101 -6.500033,6.5 0,3.5899 2.910204,6.5 6.500033,6.5"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="95.99958"
+       inkscape:export-ydpi="95.99958" />
+  </g>
+</svg>

xfwm4/assets/hide-inactive.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="28"
+   height="28"
+   viewBox="0 0 28 28.000001"
+   id="svg4142"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="close-inactive.svg">
+  <defs
+     id="defs4144" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.0623163"
+     inkscape:cx="-8.4205771"
+     inkscape:cy="14.547723"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1366"
+     inkscape:window-height="714"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4690" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4147">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1024.3622)">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4741"
+       width="28"
+       height="32"
+       x="0"
+       y="1020.3622" />
+    <circle
+       style="fill:#eceff1;fill-opacity:0.1;stroke:none;stroke-width:0.5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path2994"
+       cx="1038.0586"
+       cy="13.017858"
+       r="12"
+       transform="rotate(90)" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:0.07000002;fill-rule:evenodd;stroke:none;stroke-width:2.74499989;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:478.43673706;stroke-opacity:1"
+       id="rect4139"
+       width="28"
+       height="1"
+       x="0"
+       y="1020.3622" />
+    <path
+       id="path4199"
+       style="fill:#b4b4b4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.01637698"
+       d="m 13.999995,1045.3622 c 3.865996,0 7.000005,-3.134 7.000005,-7.0001 0,-3.8659 -3.134009,-6.9999 -7.000005,-6.9999 -3.865977,0 -6.999995,3.134 -6.999995,6.9999 0,3.8661 3.134018,7.0001 6.999995,7.0001"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="124.22228"
+       inkscape:export-ydpi="124.22228" />
+    <path
+       id="path4201"
+       style="fill:#d4d4d4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.01637698"
+       d="m 13.999995,1044.7668 c 3.537178,0 6.40467,-2.8674 6.40467,-6.4047 0,-3.5371 -2.867492,-6.4045 -6.40467,-6.4045 -3.53716,0 -6.404667,2.8674 -6.404667,6.4045 0,3.5373 2.867507,6.4047 6.404667,6.4047"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="124.22228"
+       inkscape:export-ydpi="124.22228" />
+  </g>
+</svg>