add Cinnamon 2.8 support

common/cinnamon/cinnamon-dark.css

@@ -149,7 +149,15 @@ StScrollBar {
     StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
       background-color: #5294E2; }
 
-.popup-slider-menu-item {
+.separator {
+  -gradient-height: 1px;
+  -gradient-start: transparent;
+  -gradient-end: transparent;
+  -margin-horizontal: 1.5em;
+  height: 1em; }
+
+.popup-slider-menu-item,
+.slider {
   -slider-height: 4px;
   -slider-background-color: #2b2e39;
   -slider-border-color: transparent;
@@ -239,6 +247,8 @@ StScrollBar {
   min-width: 200px;
   color: #D3DAE3;
   border-image: url("dark-assets/menu/menu.svg") 9 9 9 9; }
+  .popup-menu-arrow {
+    icon-size: 16px; }
   .popup-menu .popup-sub-menu {
     background-gradient-direction: none;
     box-shadow: none;
@@ -1075,10 +1085,71 @@ StScrollBar {
 .sound-playback-control {
   padding: 5px 10px 10px 10px; }
 
+.sound-player {
+  padding: 0 4px; }
+  .sound-player > StBoxLayout:first-child {
+    padding: 5px 10px 12px 10px;
+    spacing: 0.5em; }
+    .sound-player > StBoxLayout:first-child StButton:small {
+      width: 16px;
+      height: 8px;
+      padding: 1px; }
+      .sound-player > StBoxLayout:first-child StButton:small StIcon {
+        icon-size: 12px; }
+  .sound-player-generic-coverart {
+    background: rgba(0, 0, 0, 0.2); }
+  .sound-player-overlay {
+    width: 290px;
+    height: 70px;
+    padding: 15px;
+    spacing: 0.5em;
+    background: rgba(42, 45, 55, 0.85);
+    border: 0px solid rgba(31, 33, 40, 0.95);
+    border-bottom: 1px;
+    color: #BAC3CF; }
+    .sound-player-overlay StButton {
+      width: 22px;
+      height: 13px;
+      padding: 5px;
+      color: #BAC3CF;
+      border-radius: 2px;
+      border: 1px solid rgba(53, 57, 69, 0); }
+      .sound-player-overlay StButton StIcon {
+        icon-size: 16px; }
+      .sound-player-overlay StButton:hover {
+        text-shadow: 0 1px rgba(64, 69, 82, 0);
+        color: #BAC3CF;
+        border: 1px solid rgba(26, 28, 34, 0.35);
+        background-color: rgba(119, 127, 151, 0.45); }
+      .sound-player-overlay StButton:active {
+        text-shadow: 0 1px rgba(64, 69, 82, 0);
+        color: #ffffff;
+        background-color: #5294E2;
+        border: 1px solid #5294E2;
+        box-shadow: inset 0 2px 4px #5294E2; }
+    .sound-player-overlay StBoxLayout {
+      padding-top: 2px; }
+  .sound-player .slider {
+    height: 0.5em;
+    padding: 0;
+    border: none;
+    -slider-height: 0.5em;
+    -slider-background-color: #2d303b;
+    -slider-border-color: transparent;
+    -slider-active-background-color: #5294E2;
+    -slider-active-border-color: transparent;
+    -slider-border-width: 0px;
+    -slider-handle-radius: 0px; }
+
 #workspaceSwitcher {
   spacing: 0px;
   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;
@@ -1091,6 +1162,32 @@ StScrollBar {
   .workspace-button:hover {
     color: rgba(82, 148, 226, 0.5); }
 
+/* Controls the style when using the "Visual representation" option */
+.workspace-graph {
+  padding: 3px;
+  spacing: 3px; }
+
+.workspace-graph .workspace {
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-gradient-direction: none;
+  background-color: rgba(0, 0, 0, 0.2); }
+
+.workspace-graph .workspace:active {
+  border: 1px solid #5294E2;
+  background-gradient-direction: none; }
+
+.workspace-graph .workspace .windows {
+  -active-window-background: rgba(76, 82, 99, 0.95);
+  -active-window-border: rgba(0, 0, 0, 0.8);
+  -inactive-window-background: rgba(76, 82, 99, 0.95);
+  -inactive-window-border: rgba(0, 0, 0, 0.8); }
+
+.workspace-graph .workspace:active .windows {
+  -active-window-background: rgba(87, 93, 113, 0.95);
+  -active-window-border: rgba(0, 0, 0, 0.8);
+  -inactive-window-background: rgba(54, 58, 70, 0.95);
+  -inactive-window-border: rgba(0, 0, 0, 0.8); }
+
 #panel-launchers-box {
   padding-left: 7px; }
 

common/cinnamon/cinnamon.css

@@ -149,7 +149,15 @@ StScrollBar {
     StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
       background-color: #5294E2; }
 
-.popup-slider-menu-item {
+.separator {
+  -gradient-height: 1px;
+  -gradient-start: transparent;
+  -gradient-end: transparent;
+  -margin-horizontal: 1.5em;
+  height: 1em; }
+
+.popup-slider-menu-item,
+.slider {
   -slider-height: 4px;
   -slider-background-color: #cfd6e6;
   -slider-border-color: transparent;
@@ -239,6 +247,8 @@ StScrollBar {
   min-width: 200px;
   color: #5c616c;
   border-image: url("light-assets/menu/menu.svg") 9 9 9 9; }
+  .popup-menu-arrow {
+    icon-size: 16px; }
   .popup-menu .popup-sub-menu {
     background-gradient-direction: none;
     box-shadow: none;
@@ -1075,10 +1085,71 @@ StScrollBar {
 .sound-playback-control {
   padding: 5px 10px 10px 10px; }
 
+.sound-player {
+  padding: 0 4px; }
+  .sound-player > StBoxLayout:first-child {
+    padding: 5px 10px 12px 10px;
+    spacing: 0.5em; }
+    .sound-player > StBoxLayout:first-child StButton:small {
+      width: 16px;
+      height: 8px;
+      padding: 1px; }
+      .sound-player > StBoxLayout:first-child StButton:small StIcon {
+        icon-size: 12px; }
+  .sound-player-generic-coverart {
+    background: rgba(0, 0, 0, 0.2); }
+  .sound-player-overlay {
+    width: 290px;
+    height: 70px;
+    padding: 15px;
+    spacing: 0.5em;
+    background: rgba(42, 45, 55, 0.85);
+    border: 0px solid rgba(31, 33, 40, 0.95);
+    border-bottom: 1px;
+    color: #BAC3CF; }
+    .sound-player-overlay StButton {
+      width: 22px;
+      height: 13px;
+      padding: 5px;
+      color: #BAC3CF;
+      border-radius: 2px;
+      border: 1px solid rgba(53, 57, 69, 0); }
+      .sound-player-overlay StButton StIcon {
+        icon-size: 16px; }
+      .sound-player-overlay StButton:hover {
+        text-shadow: 0 1px rgba(255, 255, 255, 0);
+        color: #BAC3CF;
+        border: 1px solid rgba(26, 28, 34, 0.35);
+        background-color: rgba(119, 127, 151, 0.45); }
+      .sound-player-overlay StButton:active {
+        text-shadow: 0 1px rgba(255, 255, 255, 0);
+        color: #ffffff;
+        background-color: #5294E2;
+        border: 1px solid #5294E2;
+        box-shadow: inset 0 2px 4px #5294E2; }
+    .sound-player-overlay StBoxLayout {
+      padding-top: 2px; }
+  .sound-player .slider {
+    height: 0.5em;
+    padding: 0;
+    border: none;
+    -slider-height: 0.5em;
+    -slider-background-color: #cfd6e6;
+    -slider-border-color: transparent;
+    -slider-active-background-color: #5294E2;
+    -slider-active-border-color: transparent;
+    -slider-border-width: 0px;
+    -slider-handle-radius: 0px; }
+
 #workspaceSwitcher {
   spacing: 0px;
   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;
@@ -1091,6 +1162,32 @@ StScrollBar {
   .workspace-button:hover {
     color: rgba(82, 148, 226, 0.5); }
 
+/* Controls the style when using the "Visual representation" option */
+.workspace-graph {
+  padding: 3px;
+  spacing: 3px; }
+
+.workspace-graph .workspace {
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  background-gradient-direction: none;
+  background-color: rgba(0, 0, 0, 0.2); }
+
+.workspace-graph .workspace:active {
+  border: 1px solid #5294E2;
+  background-gradient-direction: none; }
+
+.workspace-graph .workspace .windows {
+  -active-window-background: rgba(76, 82, 99, 0.95);
+  -active-window-border: rgba(0, 0, 0, 0.8);
+  -inactive-window-background: rgba(76, 82, 99, 0.95);
+  -inactive-window-border: rgba(0, 0, 0, 0.8); }
+
+.workspace-graph .workspace:active .windows {
+  -active-window-background: rgba(87, 93, 113, 0.95);
+  -active-window-border: rgba(0, 0, 0, 0.8);
+  -inactive-window-background: rgba(54, 58, 70, 0.95);
+  -inactive-window-border: rgba(0, 0, 0, 0.8); }
+
 #panel-launchers-box {
   padding-left: 7px; }
 

common/cinnamon/common-assets/misc/sound-overlay.svg

@@ -0,0 +1,68 @@
+<?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="32"
+   height="32"
+   viewBox="0 0 32 32"
+   id="svg5386"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="sound-overlay.svg">
+  <defs
+     id="defs5388" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="21.881475"
+     inkscape:cy="5.8350717"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5954" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5391">
+    <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="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1020.3622)">
+    <rect
+       style="display:inline;opacity:0.75;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4164"
+       width="22"
+       height="32.000019"
+       x="5"
+       y="1020.3622" />
+  </g>
+</svg>

common/cinnamon/sass/_common.scss

@@ -133,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
@@ -255,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;
@@ -1303,6 +1314,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)
 //
@@ -1311,6 +1386,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;
@@ -1323,6 +1404,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)
 //