Added workspaces, window titles, volume, bluetooth, systray and date/time modules to the panel

scss/bar/audio.scss

@@ -0,0 +1,36 @@
+@import '../colors';
+
+.audio-volume-box {
+  .audio-volume-label {
+    min-width: 3rem;
+  }
+}
+
+.mixer-item {
+  margin: 5px 0px;
+
+  .mixer-item-volume {
+    margin: 0px 8px;
+  }
+
+  .mixer-item-title {
+    margin: 0px 8px;
+  }
+
+  .mixer-item-slider {
+    margin: 8px;
+  }
+
+  image {
+    font-size: 40px;
+  }
+}
+
+.bar-volume_icon {
+  font-size: 17px;
+  color: $peach;
+}
+
+.bar-volume_percentage {
+  color: $peach;
+}

scss/bar/bar.scss

@@ -0,0 +1,31 @@
+@import "../colors";
+
+.bar {
+  background: $mantle;
+}
+
+.bar * {
+  font-weight: bold;
+}
+
+.bar_item_box_visible {
+  background: $surface0;
+  border-radius: 8px;
+  padding: 1px 12px;
+  margin: 6px 3px;
+}
+
+.bar_item_box_hidden {
+  background: none;
+  border-radius: 0px;
+  padding: 0px 0px 0px 0px;
+  margin: 0px 0px 0px 0px;
+}
+
+.box-left {
+  margin-left: 25px;
+}
+
+.box-right {
+  margin-right: 25px;
+}

scss/bar/bluetooth.scss

@@ -0,0 +1,10 @@
+@import '../colors';
+
+.bar-bt_icon {
+  font-size: 17px;
+  color: $sky;
+}
+
+.bar-bt_label {
+  color: $sky;
+}

scss/bar/clock.scss

@@ -0,0 +1,5 @@
+@import "../colors";
+
+.clock {
+  color: $pink;
+}

scss/bar/systray.scss

@@ -0,0 +1,26 @@
+@import "../colors";
+
+.systray button:not(:first-child) {
+  margin-left: 10px;
+}
+
+.systray-menu {
+  background: $mantle;
+}
+.systray-menu label {
+  font-weight: bold;
+  color: $lavender;
+}
+
+.systray-menu separator {
+  background-color: $surface1;
+}
+
+.systray-menu check:not(:checked) {
+  background-color: $surface0;
+  border: 1px solid $lavender;
+}
+
+.systray-menu check:checked {
+  background-color: $lavender;
+}

scss/bar/window_title.scss

@@ -0,0 +1,5 @@
+@import "../colors";
+
+.window_title {
+  color: $yellow;
+}

scss/bar/workspace.scss

@@ -0,0 +1,30 @@
+@import "../colors";
+
+.workspaces {
+  label {
+    font-size: 0px;
+    min-width: 12px;
+    min-height: 12px;
+    border-radius: 11px * .6;
+    margin: 0px 7px * .5;
+    transition: 300ms * .5;
+    background-color: $lavender;
+
+    &.occupied {
+      background-color: $maroon;
+      min-width: 12px;
+      min-height: 12px;
+    }
+
+    &.active {
+      background-color: $sky;
+      min-width: 30px;
+      min-height: 12px;
+    }
+  }
+}
+
+
+.workspaces label:not(:first-child) {
+  margin-left: 12px;
+}