From 15699330e7e271f33f7f3e3c29c901acc3c36c89 Mon Sep 17 00:00:00 2001
From: Horst3180 <horst3180@users.noreply.github.com>
Date: Sat, 19 Nov 2016 12:43:17 +0100
Subject: [PATCH] add Cinnamon 3.2 support (#695)

---
 common/cinnamon/cinnamon-dark.css             |  93 ++++++++--
 common/cinnamon/cinnamon.css                  |  93 ++++++++--
 .../common-assets/panel/panel-left.svg        |  79 +++++++++
 .../common-assets/panel/panel-right.svg       |  79 +++++++++
 .../panel/window-list-active-left.svg         | 164 ++++++++++++++++++
 .../panel/window-list-active-right.svg        | 164 ++++++++++++++++++
 common/cinnamon/sass/_common.scss             |  92 ++++++++--
 7 files changed, 732 insertions(+), 32 deletions(-)
 create mode 100644 common/cinnamon/common-assets/panel/panel-left.svg
 create mode 100644 common/cinnamon/common-assets/panel/panel-right.svg
 create mode 100644 common/cinnamon/common-assets/panel/window-list-active-left.svg
 create mode 100644 common/cinnamon/common-assets/panel/window-list-active-right.svg

diff --git a/common/cinnamon/cinnamon-dark.css b/common/cinnamon/cinnamon-dark.css
index 362996e..2dabfef 100644
--- a/common/cinnamon/cinnamon-dark.css
+++ b/common/cinnamon/cinnamon-dark.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 stage {
   font-family: Futura Bk bt, sans, Sans-Serif;
   font-size: 9pt;
@@ -249,44 +248,59 @@ StScrollBar {
   font-weight: normal;
   text-align: center; }
 
+.menu,
 .popup-menu,
 .popup-combo-menu {
-  color: white;
   min-width: 200px;
   color: #D3DAE3;
   border-image: url("dark-assets/menu/menu.svg") 9 9 9 9; }
+  .menu-arrow,
   .popup-menu-arrow {
     icon-size: 16px; }
+  .menu .popup-sub-menu,
   .popup-menu .popup-sub-menu, .popup-combo-menu .popup-sub-menu {
     background-gradient-direction: none;
     box-shadow: none;
     border-image: url("dark-assets/menu/submenu.svg") 9 9 9 9; }
+    .menu .popup-sub-menu .popup-menu-item:ltr,
     .popup-menu .popup-sub-menu .popup-menu-item:ltr, .popup-combo-menu .popup-sub-menu .popup-menu-item:ltr {
       padding-right: 0em; }
+    .menu .popup-sub-menu .popup-menu-item:rtl,
     .popup-menu .popup-sub-menu .popup-menu-item:rtl, .popup-combo-menu .popup-sub-menu .popup-menu-item:rtl {
       padding-left: 0em; }
+    .menu .popup-sub-menu StScrollBar,
     .popup-menu .popup-sub-menu StScrollBar, .popup-combo-menu .popup-sub-menu StScrollBar {
       padding: 4px; }
-      .popup-menu .popup-sub-menu StScrollBar StBin#trough, .popup-menu .popup-sub-menu StScrollBar StBin#vhandle, .popup-combo-menu .popup-sub-menu StScrollBar StBin#trough, .popup-combo-menu .popup-sub-menu StScrollBar StBin#vhandle {
+      .menu .popup-sub-menu StScrollBar StBin#trough, .menu .popup-sub-menu StScrollBar StBin#vhandle,
+      .popup-menu .popup-sub-menu StScrollBar StBin#trough,
+      .popup-menu .popup-sub-menu StScrollBar StBin#vhandle, .popup-combo-menu .popup-sub-menu StScrollBar StBin#trough, .popup-combo-menu .popup-sub-menu StScrollBar StBin#vhandle {
         border-width: 0; }
+  .menu .popup-menu-content,
   .popup-menu .popup-menu-content, .popup-combo-menu .popup-menu-content {
     padding: 1em 0em 1em 0em; }
+  .menu .popup-menu-item,
   .popup-menu .popup-menu-item, .popup-combo-menu .popup-menu-item {
     padding: .4em 1.75em;
     spacing: 1em; }
+    .menu .popup-menu-item:active,
     .popup-menu .popup-menu-item:active, .popup-combo-menu .popup-menu-item:active {
       color: #ffffff;
       background-color: transparent;
       border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; }
+    .menu .popup-menu-item:insensitive,
     .popup-menu .popup-menu-item:insensitive, .popup-combo-menu .popup-menu-item:insensitive {
       color: rgba(211, 218, 227, 0.5);
       background: none; }
+  .menu .popup-inactive-menu-item,
   .popup-menu .popup-inactive-menu-item, .popup-combo-menu .popup-inactive-menu-item {
     color: #D3DAE3; }
+    .menu .popup-inactive-menu-item:insensitive,
     .popup-menu .popup-inactive-menu-item:insensitive, .popup-combo-menu .popup-inactive-menu-item:insensitive {
       color: rgba(211, 218, 227, 0.45); }
+  .menu .popup-menu-item:active .popup-inactive-menu-item,
   .popup-menu .popup-menu-item:active .popup-inactive-menu-item, .popup-combo-menu .popup-menu-item:active .popup-inactive-menu-item {
     color: #ffffff; }
+  .menu-icon,
   .popup-menu-icon {
     icon-size: 16px; }
 
@@ -325,28 +339,43 @@ StScrollBar {
 
 #panel {
   font-weight: bold;
-  height: 2.1em;
-  min-height: 27px; }
+  height: 27px;
+  width: 32px; }
+  #panel:highlight {
+    border-image: none;
+    background-color: rgba(252, 65, 56, 0.5); }
   #panelLeft {
     spacing: 4px; }
     #panelLeft:dnd {
       background-gradient-direction: vertical;
       background-gradient-start: rgba(255, 0, 0, 0.05);
       background-gradient-end: rgba(255, 0, 0, 0.2); }
-    #panelLeft:ltr · {
+    #panelLeft:ltr {
       padding-right: 4px; }
-    #panelLeft:rtl · {
+    #panelLeft:rtl {
       padding-left: 4px; }
+    #panelLeft.vertical {
+      padding: 0; }
+      #panelLeft.vertical:ltr {
+        padding-right: 0px; }
+      #panelLeft.vertical:rtl {
+        padding-left: 0px; }
   #panelRight:dnd {
     background-gradient-direction: vertical;
     background-gradient-start: rgba(0, 0, 255, 0.05);
     background-gradient-end: rgba(0, 0, 255, 0.2); }
-  #panelRight:ltr · {
+  #panelRight:ltr {
     padding-left: 4px;
     spacing: 0px; }
-  #panelRight:rtl · {
+  #panelRight:rtl {
     padding-right: 4px;
     spacing: 0px; }
+  #panelRight.vertical {
+    padding: 0; }
+    #panelRight.vertical:ltr {
+      padding-right: 0px; }
+    #panelRight.vertical:rtl {
+      padding-left: 0px; }
   #panelCenter {
     spacing: 4px; }
     #panelCenter:dnd {
@@ -354,7 +383,7 @@ StScrollBar {
       background-gradient-start: rgba(0, 255, 0, 0.05);
       background-gradient-end: rgba(0, 255, 0, 0.2); }
 
-.panel-top, .panel-bottom {
+.panel-top, .panel-bottom, .panel-left, .panel-right {
   color: white;
   font-size: 1em;
   padding: 0px; }
@@ -365,8 +394,19 @@ StScrollBar {
 .panel-bottom {
   border-image: url("common-assets/panel/panel-bottom.svg") 1 1 1 1; }
 
+.panel-left {
+  border-image: url("common-assets/panel/panel-left.svg") 1 1 1 1; }
+
+.panel-right {
+  border-image: url("common-assets/panel/panel-right.svg") 1 1 1 1; }
+
+.panel-dummy {
+  background-color: rgba(252, 65, 56, 0.5); }
+  .panel-dummy:entered {
+    background-color: rgba(252, 65, 56, 0.6); }
+
 .panel-status-button {
-  border-widht: 0;
+  border-width: 0;
   -natural-hpadding: 3px;
   -minimum-hpadding: 3px;
   font-weight: bold;
@@ -608,6 +648,10 @@ StScrollBar {
   color: rgba(211, 218, 227, 0.3);
   opacity: 1; }
 
+.calendar-week-number {
+  color: rgba(211, 218, 227, 0.7);
+  font-size: 80%; }
+
 #notification {
   border-radius: 3px;
   border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
@@ -1006,6 +1050,11 @@ StScrollBar {
     padding-top: 1px; }
   .panel-top .window-list-box {
     padding-bottom: 1px; }
+  .window-list-box.vertical {
+    spacing: 4px;
+    padding: 10px 0; }
+  .window-list-box:highlight {
+    background-color: rgba(252, 65, 56, 0.5); }
 
 .window-list-item-label {
   font-weight: bold;
@@ -1015,6 +1064,7 @@ StScrollBar {
 .window-list-item-box {
   font-weight: bold;
   background-image: none;
+  padding-top: 0;
   padding-left: 8px;
   padding-right: 8px;
   transition-duration: 100;
@@ -1027,6 +1077,13 @@ StScrollBar {
       border-image: url("common-assets/panel/window-list-active-bottom.svg") 3 3 1 3; }
     .panel-top .window-list-item-box:active, .panel-top .window-list-item-box:checked, .panel-top .window-list-item-box:focus {
       border-image: url("common-assets/panel/window-list-active-top.svg") 3 3 3 1; }
+    .panel-left .window-list-item-box:active, .panel-left .window-list-item-box:checked, .panel-left .window-list-item-box:focus {
+      border-image: url("common-assets/panel/window-list-active-left.svg") 3 1 3 3; }
+    .panel-right .window-list-item-box:active, .panel-right .window-list-item-box:checked, .panel-right .window-list-item-box:focus {
+      border-image: url("common-assets/panel/window-list-active-right.svg") 1 3 3 3; }
+  .window-list-item-box.right, .window-list-item-box.left {
+    padding-left: 0px;
+    padding-right: 0px; }
 
 .window-list-item-demands-attention {
   background-gradient-start: #F27835;
@@ -1184,6 +1241,8 @@ StScrollBar {
 
 #panel-launchers-box {
   padding-left: 7px; }
+  #panel-launchers-box.vertical {
+    padding: 2px 0; }
 
 .panel-launcher {
   margin: 1px;
@@ -1215,9 +1274,15 @@ StScrollBar {
   color: white;
   text-shadow: none;
   transition-duration: 100; }
+  .applet-box.vertical {
+    padding: 3px 0; }
   .applet-box:hover {
     color: #ffffff;
     background-color: #5294e2; }
+  .applet-box:highlight {
+    background-image: none;
+    border-image: none;
+    background-color: rgba(252, 65, 56, 0.5); }
 
 .applet-label {
   font-weight: bold;
@@ -1248,11 +1313,15 @@ StScrollBar {
 
 .desklet {
   color: #BAC3CF; }
+  .desklet:highlight {
+    background-color: rgba(252, 65, 56, 0.5); }
   .desklet-with-borders {
     border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
     color: #BAC3CF;
     padding: 12px;
     padding-bottom: 16px; }
+    .desklet-with-borders:highlight {
+      background-color: rgba(252, 65, 56, 0.5); }
   .desklet-with-borders-and-header {
     border-image: url("common-assets/misc/desklet.svg") 9 9 9 9;
     color: #BAC3CF;
@@ -1261,6 +1330,8 @@ StScrollBar {
     border-radius-topright: 0;
     padding: 12px;
     padding-bottom: 17px; }
+    .desklet-with-borders-and-header:highlight {
+      background-color: rgba(252, 65, 56, 0.5); }
   .desklet-header {
     border-image: url("common-assets/misc/desklet-header.svg") 9 9 9 9;
     color: #BAC3CF;
diff --git a/common/cinnamon/cinnamon.css b/common/cinnamon/cinnamon.css
index e9369a0..22018ec 100644
--- a/common/cinnamon/cinnamon.css
+++ b/common/cinnamon/cinnamon.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 stage {
   font-family: Futura Bk bt, sans, Sans-Serif;
   font-size: 9pt;
@@ -249,44 +248,59 @@ StScrollBar {
   font-weight: normal;
   text-align: center; }
 
+.menu,
 .popup-menu,
 .popup-combo-menu {
-  color: white;
   min-width: 200px;
   color: #5c616c;
   border-image: url("light-assets/menu/menu.svg") 9 9 9 9; }
+  .menu-arrow,
   .popup-menu-arrow {
     icon-size: 16px; }
+  .menu .popup-sub-menu,
   .popup-menu .popup-sub-menu, .popup-combo-menu .popup-sub-menu {
     background-gradient-direction: none;
     box-shadow: none;
     border-image: url("light-assets/menu/submenu.svg") 9 9 9 9; }
+    .menu .popup-sub-menu .popup-menu-item:ltr,
     .popup-menu .popup-sub-menu .popup-menu-item:ltr, .popup-combo-menu .popup-sub-menu .popup-menu-item:ltr {
       padding-right: 0em; }
+    .menu .popup-sub-menu .popup-menu-item:rtl,
     .popup-menu .popup-sub-menu .popup-menu-item:rtl, .popup-combo-menu .popup-sub-menu .popup-menu-item:rtl {
       padding-left: 0em; }
+    .menu .popup-sub-menu StScrollBar,
     .popup-menu .popup-sub-menu StScrollBar, .popup-combo-menu .popup-sub-menu StScrollBar {
       padding: 4px; }
-      .popup-menu .popup-sub-menu StScrollBar StBin#trough, .popup-menu .popup-sub-menu StScrollBar StBin#vhandle, .popup-combo-menu .popup-sub-menu StScrollBar StBin#trough, .popup-combo-menu .popup-sub-menu StScrollBar StBin#vhandle {
+      .menu .popup-sub-menu StScrollBar StBin#trough, .menu .popup-sub-menu StScrollBar StBin#vhandle,
+      .popup-menu .popup-sub-menu StScrollBar StBin#trough,
+      .popup-menu .popup-sub-menu StScrollBar StBin#vhandle, .popup-combo-menu .popup-sub-menu StScrollBar StBin#trough, .popup-combo-menu .popup-sub-menu StScrollBar StBin#vhandle {
         border-width: 0; }
+  .menu .popup-menu-content,
   .popup-menu .popup-menu-content, .popup-combo-menu .popup-menu-content {
     padding: 1em 0em 1em 0em; }
+  .menu .popup-menu-item,
   .popup-menu .popup-menu-item, .popup-combo-menu .popup-menu-item {
     padding: .4em 1.75em;
     spacing: 1em; }
+    .menu .popup-menu-item:active,
     .popup-menu .popup-menu-item:active, .popup-combo-menu .popup-menu-item:active {
       color: #ffffff;
       background-color: transparent;
       border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; }
+    .menu .popup-menu-item:insensitive,
     .popup-menu .popup-menu-item:insensitive, .popup-combo-menu .popup-menu-item:insensitive {
       color: rgba(92, 97, 108, 0.5);
       background: none; }
+  .menu .popup-inactive-menu-item,
   .popup-menu .popup-inactive-menu-item, .popup-combo-menu .popup-inactive-menu-item {
     color: #5c616c; }
+    .menu .popup-inactive-menu-item:insensitive,
     .popup-menu .popup-inactive-menu-item:insensitive, .popup-combo-menu .popup-inactive-menu-item:insensitive {
       color: rgba(92, 97, 108, 0.55); }
+  .menu .popup-menu-item:active .popup-inactive-menu-item,
   .popup-menu .popup-menu-item:active .popup-inactive-menu-item, .popup-combo-menu .popup-menu-item:active .popup-inactive-menu-item {
     color: #ffffff; }
+  .menu-icon,
   .popup-menu-icon {
     icon-size: 16px; }
 
@@ -325,28 +339,43 @@ StScrollBar {
 
 #panel {
   font-weight: bold;
-  height: 2.1em;
-  min-height: 27px; }
+  height: 27px;
+  width: 32px; }
+  #panel:highlight {
+    border-image: none;
+    background-color: rgba(252, 65, 56, 0.5); }
   #panelLeft {
     spacing: 4px; }
     #panelLeft:dnd {
       background-gradient-direction: vertical;
       background-gradient-start: rgba(255, 0, 0, 0.05);
       background-gradient-end: rgba(255, 0, 0, 0.2); }
-    #panelLeft:ltr · {
+    #panelLeft:ltr {
       padding-right: 4px; }
-    #panelLeft:rtl · {
+    #panelLeft:rtl {
       padding-left: 4px; }
+    #panelLeft.vertical {
+      padding: 0; }
+      #panelLeft.vertical:ltr {
+        padding-right: 0px; }
+      #panelLeft.vertical:rtl {
+        padding-left: 0px; }
   #panelRight:dnd {
     background-gradient-direction: vertical;
     background-gradient-start: rgba(0, 0, 255, 0.05);
     background-gradient-end: rgba(0, 0, 255, 0.2); }
-  #panelRight:ltr · {
+  #panelRight:ltr {
     padding-left: 4px;
     spacing: 0px; }
-  #panelRight:rtl · {
+  #panelRight:rtl {
     padding-right: 4px;
     spacing: 0px; }
+  #panelRight.vertical {
+    padding: 0; }
+    #panelRight.vertical:ltr {
+      padding-right: 0px; }
+    #panelRight.vertical:rtl {
+      padding-left: 0px; }
   #panelCenter {
     spacing: 4px; }
     #panelCenter:dnd {
@@ -354,7 +383,7 @@ StScrollBar {
       background-gradient-start: rgba(0, 255, 0, 0.05);
       background-gradient-end: rgba(0, 255, 0, 0.2); }
 
-.panel-top, .panel-bottom {
+.panel-top, .panel-bottom, .panel-left, .panel-right {
   color: white;
   font-size: 1em;
   padding: 0px; }
@@ -365,8 +394,19 @@ StScrollBar {
 .panel-bottom {
   border-image: url("common-assets/panel/panel-bottom.svg") 1 1 1 1; }
 
+.panel-left {
+  border-image: url("common-assets/panel/panel-left.svg") 1 1 1 1; }
+
+.panel-right {
+  border-image: url("common-assets/panel/panel-right.svg") 1 1 1 1; }
+
+.panel-dummy {
+  background-color: rgba(252, 65, 56, 0.5); }
+  .panel-dummy:entered {
+    background-color: rgba(252, 65, 56, 0.6); }
+
 .panel-status-button {
-  border-widht: 0;
+  border-width: 0;
   -natural-hpadding: 3px;
   -minimum-hpadding: 3px;
   font-weight: bold;
@@ -608,6 +648,10 @@ StScrollBar {
   color: rgba(92, 97, 108, 0.3);
   opacity: 1; }
 
+.calendar-week-number {
+  color: rgba(92, 97, 108, 0.7);
+  font-size: 80%; }
+
 #notification {
   border-radius: 3px;
   border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
@@ -1006,6 +1050,11 @@ StScrollBar {
     padding-top: 1px; }
   .panel-top .window-list-box {
     padding-bottom: 1px; }
+  .window-list-box.vertical {
+    spacing: 4px;
+    padding: 10px 0; }
+  .window-list-box:highlight {
+    background-color: rgba(252, 65, 56, 0.5); }
 
 .window-list-item-label {
   font-weight: bold;
@@ -1015,6 +1064,7 @@ StScrollBar {
 .window-list-item-box {
   font-weight: bold;
   background-image: none;
+  padding-top: 0;
   padding-left: 8px;
   padding-right: 8px;
   transition-duration: 100;
@@ -1027,6 +1077,13 @@ StScrollBar {
       border-image: url("common-assets/panel/window-list-active-bottom.svg") 3 3 1 3; }
     .panel-top .window-list-item-box:active, .panel-top .window-list-item-box:checked, .panel-top .window-list-item-box:focus {
       border-image: url("common-assets/panel/window-list-active-top.svg") 3 3 3 1; }
+    .panel-left .window-list-item-box:active, .panel-left .window-list-item-box:checked, .panel-left .window-list-item-box:focus {
+      border-image: url("common-assets/panel/window-list-active-left.svg") 3 1 3 3; }
+    .panel-right .window-list-item-box:active, .panel-right .window-list-item-box:checked, .panel-right .window-list-item-box:focus {
+      border-image: url("common-assets/panel/window-list-active-right.svg") 1 3 3 3; }
+  .window-list-item-box.right, .window-list-item-box.left {
+    padding-left: 0px;
+    padding-right: 0px; }
 
 .window-list-item-demands-attention {
   background-gradient-start: #F27835;
@@ -1184,6 +1241,8 @@ StScrollBar {
 
 #panel-launchers-box {
   padding-left: 7px; }
+  #panel-launchers-box.vertical {
+    padding: 2px 0; }
 
 .panel-launcher {
   margin: 1px;
@@ -1215,9 +1274,15 @@ StScrollBar {
   color: white;
   text-shadow: none;
   transition-duration: 100; }
+  .applet-box.vertical {
+    padding: 3px 0; }
   .applet-box:hover {
     color: #ffffff;
     background-color: #5294e2; }
+  .applet-box:highlight {
+    background-image: none;
+    border-image: none;
+    background-color: rgba(252, 65, 56, 0.5); }
 
 .applet-label {
   font-weight: bold;
@@ -1248,11 +1313,15 @@ StScrollBar {
 
 .desklet {
   color: #BAC3CF; }
+  .desklet:highlight {
+    background-color: rgba(252, 65, 56, 0.5); }
   .desklet-with-borders {
     border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
     color: #BAC3CF;
     padding: 12px;
     padding-bottom: 16px; }
+    .desklet-with-borders:highlight {
+      background-color: rgba(252, 65, 56, 0.5); }
   .desklet-with-borders-and-header {
     border-image: url("common-assets/misc/desklet.svg") 9 9 9 9;
     color: #BAC3CF;
@@ -1261,6 +1330,8 @@ StScrollBar {
     border-radius-topright: 0;
     padding: 12px;
     padding-bottom: 17px; }
+    .desklet-with-borders-and-header:highlight {
+      background-color: rgba(252, 65, 56, 0.5); }
   .desklet-header {
     border-image: url("common-assets/misc/desklet-header.svg") 9 9 9 9;
     color: #BAC3CF;
diff --git a/common/cinnamon/common-assets/panel/panel-left.svg b/common/cinnamon/common-assets/panel/panel-left.svg
new file mode 100644
index 0000000..e5796b2
--- /dev/null
+++ b/common/cinnamon/common-assets/panel/panel-left.svg
@@ -0,0 +1,79 @@
+<?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="27"
+   height="27"
+   viewBox="0 0 27 27"
+   id="svg4196"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="panel-left.svg">
+  <defs
+     id="defs4198" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="4.4037501"
+     inkscape:cy="17.013621"
+     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="grid4762" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4201">
+    <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="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1025.3622)">
+    <g
+       id="g4136"
+       transform="matrix(0,-1,1,0,-1025.3622,1052.3622)">
+      <rect
+         y="1025.3622"
+         x="0"
+         height="26"
+         width="27"
+         id="rect4713"
+         style="display:inline;opacity:0.95;fill:#252a35;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <rect
+         y="1051.3622"
+         x="0"
+         height="1"
+         width="27"
+         id="rect4713-4"
+         style="display:inline;opacity:0.85;fill:#0f1116;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/common/cinnamon/common-assets/panel/panel-right.svg b/common/cinnamon/common-assets/panel/panel-right.svg
new file mode 100644
index 0000000..09f1889
--- /dev/null
+++ b/common/cinnamon/common-assets/panel/panel-right.svg
@@ -0,0 +1,79 @@
+<?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="27"
+   height="27"
+   viewBox="0 0 27 27"
+   id="svg4196"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="panel-right.svg">
+  <defs
+     id="defs4198" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="4.4037501"
+     inkscape:cy="17.013621"
+     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="grid4762" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4201">
+    <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="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1025.3622)">
+    <g
+       id="g4136"
+       transform="matrix(0,-1,-1,0,1052.3622,1052.3622)">
+      <rect
+         y="1025.3622"
+         x="0"
+         height="26"
+         width="27"
+         id="rect4713"
+         style="display:inline;opacity:0.95;fill:#252a35;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <rect
+         y="1051.3622"
+         x="0"
+         height="1"
+         width="27"
+         id="rect4713-4"
+         style="display:inline;opacity:0.85;fill:#0f1116;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/common/cinnamon/common-assets/panel/window-list-active-left.svg b/common/cinnamon/common-assets/panel/window-list-active-left.svg
new file mode 100644
index 0000000..fecc258
--- /dev/null
+++ b/common/cinnamon/common-assets/panel/window-list-active-left.svg
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   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"
+   inkscape:export-ydpi="90.000000"
+   inkscape:export-xdpi="90.000000"
+   width="4"
+   height="28"
+   id="svg11300"
+   sodipodi:version="0.32"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="window-list-active-left.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   version="1.0"
+   style="display:inline;enable-background:new">
+  <sodipodi:namedview
+     stroke="#ef2929"
+     fill="#f57900"
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#808080"
+     borderopacity="1"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.884764"
+     inkscape:cx="6.9544689"
+     inkscape:cy="5.3696817"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:showpageshadow="true"
+     inkscape:window-width="1600"
+     inkscape:window-height="851"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     width="400px"
+     height="300px"
+     inkscape:snap-nodes="true"
+     inkscape:snap-bbox="true"
+     gridtolerance="10000"
+     inkscape:object-nodes="true"
+     inkscape:snap-grids="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-maximized="1"
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="false"
+     inkscape:snap-bbox-edge-midpoints="false"
+     inkscape:snap-bbox-midpoints="false"
+     objecttolerance="10000"
+     guidetolerance="10000"
+     borderlayer="true"
+     showborder="true"
+     guidecolor="#ff0b00"
+     guideopacity="1"
+     guidehicolor="#001aff"
+     guidehiopacity="0.49803922"
+     inkscape:snap-smooth-nodes="false"
+     inkscape:snap-page="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3123"
+       empspacing="4"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs3">
+    <linearGradient
+       id="selected_bg_color"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#5294e2;stop-opacity:1;"
+         offset="0"
+         id="stop4137" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#selected_bg_color"
+       id="linearGradient4139"
+       x1="14"
+       y1="298"
+       x2="14"
+       y2="300"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(272,-300)" />
+  </defs>
+  <metadata
+     id="metadata4">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:creator>
+        <dc:source />
+        <cc:license
+           rdf:resource="" />
+        <dc:title></dc:title>
+        <dc:subject>
+          <rdf:Bag />
+        </dc:subject>
+        <dc:date />
+        <dc:rights>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:rights>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:publisher>
+        <dc:identifier />
+        <dc:relation />
+        <dc:language />
+        <dc:coverage />
+        <dc:description />
+        <dc:contributor>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:contributor>
+      </cc:Work>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     style="display:inline"
+     inkscape:groupmode="layer"
+     inkscape:label="Base"
+     id="layer1"
+     transform="translate(0,-272)">
+    <rect
+       style="opacity:1;fill:url(#linearGradient4139);fill-opacity:1;stroke:none"
+       id="rect4270-9"
+       width="24"
+       height="2"
+       x="274"
+       y="-2"
+       transform="matrix(0,1,-1,0,0,0)" />
+  </g>
+</svg>
diff --git a/common/cinnamon/common-assets/panel/window-list-active-right.svg b/common/cinnamon/common-assets/panel/window-list-active-right.svg
new file mode 100644
index 0000000..1f78f1d
--- /dev/null
+++ b/common/cinnamon/common-assets/panel/window-list-active-right.svg
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   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"
+   inkscape:export-ydpi="90.000000"
+   inkscape:export-xdpi="90.000000"
+   width="4"
+   height="28"
+   id="svg11300"
+   sodipodi:version="0.32"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="window-list-active-right.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   version="1.0"
+   style="display:inline;enable-background:new">
+  <sodipodi:namedview
+     stroke="#ef2929"
+     fill="#f57900"
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#808080"
+     borderopacity="1"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="9.884764"
+     inkscape:cx="6.9544689"
+     inkscape:cy="5.3696817"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:showpageshadow="true"
+     inkscape:window-width="1600"
+     inkscape:window-height="851"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     width="400px"
+     height="300px"
+     inkscape:snap-nodes="true"
+     inkscape:snap-bbox="true"
+     gridtolerance="10000"
+     inkscape:object-nodes="true"
+     inkscape:snap-grids="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-maximized="1"
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="false"
+     inkscape:snap-bbox-edge-midpoints="false"
+     inkscape:snap-bbox-midpoints="false"
+     objecttolerance="10000"
+     guidetolerance="10000"
+     borderlayer="true"
+     showborder="true"
+     guidecolor="#ff0b00"
+     guideopacity="1"
+     guidehicolor="#001aff"
+     guidehiopacity="0.49803922"
+     inkscape:snap-smooth-nodes="false"
+     inkscape:snap-page="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3123"
+       empspacing="4"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs3">
+    <linearGradient
+       id="selected_bg_color"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#5294e2;stop-opacity:1;"
+         offset="0"
+         id="stop4137" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#selected_bg_color"
+       id="linearGradient4139"
+       x1="14"
+       y1="298"
+       x2="14"
+       y2="300"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(272,-302)" />
+  </defs>
+  <metadata
+     id="metadata4">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:creator>
+        <dc:source />
+        <cc:license
+           rdf:resource="" />
+        <dc:title></dc:title>
+        <dc:subject>
+          <rdf:Bag />
+        </dc:subject>
+        <dc:date />
+        <dc:rights>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:rights>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:publisher>
+        <dc:identifier />
+        <dc:relation />
+        <dc:language />
+        <dc:coverage />
+        <dc:description />
+        <dc:contributor>
+          <cc:Agent>
+            <dc:title />
+          </cc:Agent>
+        </dc:contributor>
+      </cc:Work>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     style="display:inline"
+     inkscape:groupmode="layer"
+     inkscape:label="Base"
+     id="layer1"
+     transform="translate(0,-272)">
+    <rect
+       style="opacity:1;fill:url(#linearGradient4139);fill-opacity:1;stroke:none"
+       id="rect4270-9"
+       width="24"
+       height="2"
+       x="274"
+       y="-4"
+       transform="matrix(0,1,-1,0,0,0)" />
+  </g>
+</svg>
diff --git a/common/cinnamon/sass/_common.scss b/common/cinnamon/sass/_common.scss
index b1e77be..dbca21b 100644
--- a/common/cinnamon/sass/_common.scss
+++ b/common/cinnamon/sass/_common.scss
@@ -267,9 +267,9 @@ StScrollBar {
 //
 // Popvers/Menus
 //
+.menu,
 .popup-menu,
 %menu {
-  color: white;
   min-width: 200px;
   color: $fg_color;
   border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9;
@@ -357,8 +357,13 @@ StScrollBar {
 //
 #panel {
   font-weight: bold;
-  height: 2.1em;
-  min-height: 27px;
+  height: 27px;
+  width: 32px;
+
+  &:highlight {
+    border-image: none;
+    background-color: transparentize($error_color, 0.5);
+  }
 
   &Left {
     spacing: 4px;
@@ -368,8 +373,15 @@ StScrollBar {
       background-gradient-start: rgba(255,0,0,0.05);
       background-gradient-end: rgba(255,0,0,0.2);
     }
-    &:ltr ·{ padding-right: 4px; }
-    &:rtl ·{ padding-left: 4px; }
+    &:ltr { padding-right: 4px; }
+    &:rtl { padding-left: 4px; }
+
+    &.vertical {
+      padding: 0;
+
+      &:ltr { padding-right: 0px; }
+      &:rtl { padding-left: 0px; }
+    }
   }
 
   &Right {
@@ -379,8 +391,15 @@ StScrollBar {
       background-gradient-start: rgba(0,0,255,0.05);
       background-gradient-end: rgba(0,0,255,0.2);
     }
-    &:ltr ·{ padding-left: 4px; spacing: 0px; }
-    &:rtl ·{ padding-right: 4px; spacing: 0px; }
+    &:ltr { padding-left: 4px; spacing: 0px; }
+    &:rtl { padding-right: 4px; spacing: 0px; }
+
+    &.vertical {
+      padding: 0;
+
+      &:ltr { padding-right: 0px; }
+      &:rtl { padding-left: 0px; }
+    }
   }
 
   &Center {
@@ -397,7 +416,7 @@ StScrollBar {
 .panel {
   $_panel_fg_color: $_shell_fg_color;
 
-  &-top, &-bottom {
+  &-top, &-bottom, &-left, &-right {
     color: $_panel_fg_color;
     font-size: 1em;
     padding: 0px;
@@ -405,9 +424,17 @@ StScrollBar {
 
   &-top { border-image: url('common-assets/panel/panel-top.svg') 1 1 1 1; }
   &-bottom { border-image: url('common-assets/panel/panel-bottom.svg') 1 1 1 1; }
+  &-left { border-image: url('common-assets/panel/panel-left.svg') 1 1 1 1; }
+  &-right { border-image: url('common-assets/panel/panel-right.svg') 1 1 1 1; }
+
+  &-dummy {
+    background-color: transparentize($error_color, 0.5);
+
+    &:entered { background-color: transparentize($error_color, 0.4); }
+  }
 
   &-status-button {
-    border-widht: 0;
+    border-width: 0;
     -natural-hpadding: 3px;
     -minimum-hpadding: 3px;
     font-weight: bold;
@@ -716,6 +743,11 @@ StScrollBar {
   opacity: 1;
 }
 
+.calendar-week-number {
+  color: transparentize($fg_color, 0.3);
+  font-size: 80%;
+}
+
 //
 // Notifications
 //
@@ -1226,6 +1258,13 @@ StScrollBar {
 
     .panel-bottom & { padding-top: 1px; }
     .panel-top & { padding-bottom: 1px; }
+
+    &.vertical {
+      spacing: 4px;
+      padding: 10px 0;
+    }
+
+    &:highlight { background-color: transparentize($error_color, 0.5); }
   }
 
   &-item-label {
@@ -1237,6 +1276,7 @@ StScrollBar {
   &-item-box {
     font-weight: bold;
     background-image: none;
+    padding-top: 0;
     padding-left: 8px;
     padding-right: 8px;
     transition-duration: 100;
@@ -1250,8 +1290,14 @@ StScrollBar {
       color: $_shell_fg_color;
 
       .panel-bottom & { border-image: url("common-assets/panel/window-list-active-bottom.svg") 3 3 1 3; }
-
       .panel-top & { border-image: url("common-assets/panel/window-list-active-top.svg") 3 3 3 1; }
+      .panel-left & { border-image: url("common-assets/panel/window-list-active-left.svg") 3 1 3 3; }
+      .panel-right & { border-image: url("common-assets/panel/window-list-active-right.svg") 1 3 3 3; }
+    }
+
+    &.right, &.left {
+      padding-left: 0px;
+      padding-right: 0px;
     }
   }
 
@@ -1445,6 +1491,10 @@ StScrollBar {
 //
 #panel-launchers-box {
   padding-left: 7px;
+
+  &.vertical {
+    padding: 2px 0;
+  }
 }
 
 .panel-launcher {
@@ -1488,10 +1538,20 @@ StScrollBar {
     text-shadow: none;
     transition-duration: 100;
 
+    &.vertical {
+      padding: 3px 0;
+    }
+
     &:hover {
       color: $selected_fg_color;
       background-color: $selected_bg_color;
     }
+
+    &:highlight {
+      background-image: none;
+      border-image: none;
+      background-color: transparentize($error_color, 0.5);
+    }
   }
 
   &-label {
@@ -1540,11 +1600,19 @@ StScrollBar {
 .desklet {
   color: $osd_fg_color;
 
+  &:highlight {
+    background-color: transparentize($error_color, 0.5);
+  }
+
   &-with-borders {
     border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
     color: $osd_fg_color;
     padding: 12px;
     padding-bottom: 16px;
+
+    &:highlight {
+      background-color: transparentize($error_color, 0.5);
+    }
   }
   &-with-borders-and-header {
     border-image: url("common-assets/misc/desklet.svg") 9 9 9 9;
@@ -1554,6 +1622,10 @@ StScrollBar {
     border-radius-topright: 0;
     padding: 12px;
     padding-bottom: 17px;
+
+    &:highlight {
+      background-color: transparentize($error_color, 0.5);
+    }
   }
   &-header {
     border-image: url("common-assets/misc/desklet-header.svg") 9 9 9 9;