1 files changed, 154 insertions, 31 deletions
diff --git a/common/cinnamon/sass/_common.scss b/common/cinnamon/sass/_common.scss
index 30ffa1f..5a3f27d 100644
--- a/common/cinnamon/sass/_common.scss
+++ b/common/cinnamon/sass/_common.scss
@@ -33,7 +33,10 @@ stage {
   min-height: 20px;
   padding: 5px 32px;
   transition-duration: 0;
-  border-radius: 2px;
+
+  &, &:focus, &:hover, &:hover:focus, &:active, &:active:focus, &:insensitive {
+    border-radius: 2px;
+  }
 
   @include button(normal);
 
@@ -119,7 +122,7 @@ StScrollBar {
   }
 
   StButton#vhandle, StButton#hhandle {
-    border-radius: 4px;
+    border-radius: 2px;
     background-color: mix($fg_color, $bg_color, 40%);
     border: 0px solid;
     margin: 0px;
@@ -130,10 +133,19 @@ StScrollBar {
   }
 }
 
+.separator {
+  -gradient-height: 1px;
+  -gradient-start: rgba(0,0,0,0);
+  -gradient-end: rgba(0,0,0,0);
+  -margin-horizontal: 1.5em;
+  height: 1em;
+}
+
 //
 // Slider
 //
-.popup-slider-menu-item {
+.popup-slider-menu-item,
+.slider {
   -slider-height: 4px;
   -slider-background-color: $button_border;                   //background of the trough
   -slider-border-color: transparentize(black, 1);             //trough border color
@@ -252,6 +264,8 @@ StScrollBar {
   color: $fg_color;
   border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9;
 
+  &-arrow { icon-size: 16px; }
+
   .popup-sub-menu {
     background-gradient-direction: none;
     box-shadow: none;
@@ -264,12 +278,6 @@ StScrollBar {
       padding: 4px;
       StBin#trough, StBin#vhandle { border-width: 0; }
     }
-
-    &-menu-item:open {
-      background: none;
-      box-shadow: none;
-      border-image: url("#{$asset_path}/menu/submenu-open.svg") 9 9 9 9;
-    }
   }
 
   .popup-menu-content { padding: 1em 0em 1em 0em; }
@@ -441,7 +449,7 @@ StScrollBar {
 
 .expo-workspaces-name-entry,
 .expo-workspaces-name-entry#selected {
-  spacing: 25px;
+  height: 15px;
   border-radius: 2px;
   font-size: 9pt;
   padding: 5px 8px;
@@ -479,7 +487,7 @@ StScrollBar {
   //&-controls { visible-height: 32px; }
 
   &-thumbnails {
-    spacing: 14px;
+    spacing: 26px;
 
     &-background, &-background:rtl { padding: 8px; }
   }
@@ -488,11 +496,15 @@ StScrollBar {
     background-image: url("common-assets/misc/add-workspace.svg");
     height: 200px;
     width: 35px;
-    transition-duration: 200;
+    transition-duration: 100;
 
     &:hover {
       background-image: url("common-assets/misc/add-workspace-hover.svg");
-      transition-duration: 200;
+      transition-duration: 100;
+    }
+    &:active {
+      background-image: url("common-assets/misc/add-workspace-active.svg");
+      transition-duration: 100;
     }
   }
   &-overview-background-shade { background-color: rgba(0,0,0,0.5); }
@@ -605,35 +617,35 @@ StScrollBar {
 
 //arrow back
 .calendar-change-month-back {
-  background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg");
+  background-image: url("common-assets/misc/calendar-arrow-left.svg");
 
-  &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); }
+  &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); }
 
-  &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); }
+  &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); }
 
   &:rtl {
-    background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg");
+    background-image: url("common-assets/misc/calendar-arrow-right.svg");
 
-    &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); }
+    &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); }
 
-    &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); }
+    &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); }
   }
 }
 
 //arrow forward
 .calendar-change-month-forward {
-  background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg");
+  background-image: url("common-assets/misc/calendar-arrow-right.svg");
 
-  &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); }
+  &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); }
 
-  &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); }
+  &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); }
 
   &:rtl {
-    background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg");
+    background-image: url("common-assets/misc/calendar-arrow-left.svg");
 
-    &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); }
+    &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); }
 
-    &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); }
+    &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); }
   }
 }
 
@@ -712,7 +724,10 @@ StScrollBar {
     color: $fg_color;
     border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9;
 
-    .notification-button, .notification-icon-button { @extend %button; }
+    .notification-button, .notification-icon-button {
+      @extend %button;
+      padding: 5px;
+    }
 
     StEntry { @extend %entry; }
   }
@@ -742,7 +757,10 @@ StScrollBar {
     color: $osd_fg_color;
   }
 
-  &-button, &-icon-button { @extend %osd_button; }
+  &-button, &-icon-button {
+    @extend %osd_button;
+    padding: 5px;
+  }
 
   &-icon-button > StIcon { icon-size: 36px; }
 
@@ -765,6 +783,10 @@ StScrollBar {
   border-radius: 3px;
   padding: 20px;
 
+  > StBoxLayout {
+    padding: 4px;
+  }
+
   &-item-container { spacing: 8px; }
 
   .item-box {
@@ -779,7 +801,7 @@ StScrollBar {
     &:selected {
       color: $selected_fg_color;
       background-color: $selected_bg_color;
-      border: 1px solid $selected_bg_color;
+      border: 0px solid $selected_bg_color;
     }
   }
 
@@ -1049,7 +1071,7 @@ StScrollBar {
     padding: 10px;
     border: 1px solid rgba(0,0,0,0);
 
-    &:hover { @include button(hover); }
+    &:hover { @extend %button:hover; }
   }
 
   &-places {
@@ -1077,7 +1099,7 @@ StScrollBar {
 
     &-selected {
       padding: 7px;
-      @include button(hover);
+      @extend %button:hover;
 
       &:highlighted { font-weight: bold; }
     }
@@ -1092,7 +1114,7 @@ StScrollBar {
 
     &-selected {
       padding: 7px;
-      @include button(hover);
+      @extend %button:hover;
     }
     &-hover {
       background-color: red;
@@ -1290,6 +1312,70 @@ StScrollBar {
 
 .sound-playback-control { padding: 5px 10px 10px 10px; }
 
+// 2.8
+.sound-player {
+  padding: 0 4px;
+
+  > StBoxLayout:first-child {
+    padding: 5px 10px 12px 10px;
+    spacing: 0.5em;
+
+    StButton:small {
+      width: 16px;
+      height: 8px;
+      padding: 1px;
+
+      StIcon { icon-size: 12px; }
+    }
+  }
+
+  &-generic-coverart {
+    background: rgba(0,0,0,0.2);
+  }
+
+  &-overlay {
+    width: 290px;
+    height: 70px;
+    padding: 15px;
+    spacing: 0.5em;
+    background: transparentize(darken($osd_bg_color, 5%), 0.1);
+    border: 0px solid darken($osd_bg_color, 10%);
+    border-bottom: 1px ;
+    color: $osd_fg_color;
+
+    StButton {
+      width: 22px;
+      height: 13px;
+      padding: 5px;
+      color: $osd_fg_color;
+      border-radius: 2px;
+      border: 1px solid transparentize($osd_bg_color,1);
+
+      StIcon { icon-size: 16px; }
+
+      &:hover{ @include button(osd-hover); }
+      &:active { @include button(active); }
+    }
+
+    StBoxLayout {
+      padding-top: 2px;
+    }
+  }
+
+  .slider {
+    height: 0.5em;
+    padding: 0;
+    border: none;
+    -slider-height: 0.5em;
+    -slider-background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
+    -slider-border-color: rgba(0,0,0,0);
+    -slider-active-background-color: $selected_bg_color;
+    -slider-active-border-color: rgba(0,0,0,0);
+    -slider-border-width: 0px;
+    -slider-handle-radius: 0px;
+  }
+}
+
 //
 // Workspace Switcher applet (workspaceSwitcher.js)
 //
@@ -1298,6 +1384,12 @@ StScrollBar {
   padding: 3px;
 }
 
+/* Controls the styling when using the "Simple buttons" option */
+.workspace-switcher {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
 .workspace-button {
   width: 20px;
   height: 10px;
@@ -1310,6 +1402,37 @@ StScrollBar {
   &:hover { color: transparentize($selected_bg_color, 0.5) }
 }
 
+/* Controls the style when using the "Visual representation" option */
+.workspace-graph {
+  padding: 3px;
+  spacing: 3px;
+}
+
+.workspace-graph .workspace {
+  border: 1px solid transparentize(black, 0.6);
+  background-gradient-direction: none;
+  background-color: transparentize(black, 0.8);
+}
+
+.workspace-graph .workspace:active {
+  border: 1px solid $selected_bg_color;
+  background-gradient-direction: none;
+}
+
+.workspace-graph .workspace .windows {
+  -active-window-background: lighten($panel_bg, 15%);
+  -active-window-border: rgba(0, 0, 0, 0.8);
+  -inactive-window-background: lighten($panel_bg, 15%);
+  -inactive-window-border: rgba(0, 0, 0, 0.8);
+}
+
+.workspace-graph .workspace:active .windows {
+  -active-window-background: lighten($panel_bg, 20%);
+  -active-window-border: rgba(0, 0, 0, 0.8);
+  -inactive-window-background: lighten($panel_bg, 5%);
+  -inactive-window-border: rgba(0, 0, 0, 0.8);
+}
+
 //
 // Panel Launchers Applet (panelLaunchers.js)
 //