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

scss/colors.scss

@@ -0,0 +1,49 @@
+$primary-color: #CDD6F4;
+$dark-background: #0e0e1e;
+$light-background: #1e1e2e;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$yellow: #f9e2af;
+$orange: #fab387;
+$teal: #94e2d5;
+$lightteal: #bac2de;
+$pink: #f5c2e7;
+$green: #a6e3a1;
+$grey: #585b70;
+$blue: #89b4fa;
+$lightgrey: #a6adc8;
+$lightblue: #74c7ec;
+
+$rosewater: #f5e0dc;
+$flamingo: #f2cdcd;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext2: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$mantle: #181825;
+$crust: #11111b;
+
+$default_fg: $primary-color;
+$default_bg: #000000;
+$primary_bg: $dark-background;
+$primary_fg: mix($mauve, $primary_bg, 70%);
+$secondary_fg: $green;
+$secondary_bg: $light-background;

scss/common.scss

@@ -0,0 +1,230 @@
+menu {
+  margin: 6px;
+  padding: 6px;
+  background-color: $primary_bg;
+  background-clip: border-box;
+  border-radius: 12px;
+  border: 1px solid $secondary_bg;
+
+  menuitem {
+    transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+    min-height: 20px;
+    min-width: 40px;
+    padding: 4px 8px;
+    color: #FFFFFF;
+    font: initial;
+    text-shadow: none;
+    border-radius: 6px;
+    &:hover, &:active{
+        background-color: $secondary_bg;
+    }
+    &:disabled {
+      color: $secondary_bg;
+    }
+    arrow {
+      min-height: 16px;
+      min-width: 16px;
+      -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+      margin-left: 8px;
+    }
+  }
+  separator {
+    min-height: 1px;
+    margin: 4px 0;
+    background-color: $secondary_bg
+  }
+}
+
+menu > arrow {
+  min-height: 16px;
+  min-width: 16px;
+  padding: 4px;
+  color: $secondary_bg;
+}
+
+menu > arrow.top {
+  margin-top: 0;
+  border-radius: 6px;
+  -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+}
+
+menu > arrow.bottom {
+  margin-top: 8px;
+  margin-bottom: -12px;
+  border-radius: 6px;
+  -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+}
+
+check,
+radio {
+  min-height: 15px;
+  min-width: 15px;
+  margin: 4px;
+  padding: 0;
+  color: transparent;
+  background-color: $secondary_bg;
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+radio {
+  border-radius: 9999px;
+}
+
+check {
+  border-radius: 4px;
+}
+
+check:hover,
+radio:hover {
+  box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
+  background-color: $primary_bg;
+}
+
+check:active,
+radio:active {
+  box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
+  background-color: $primary_bg;
+}
+
+check:checked, check:indeterminate,
+radio:checked,
+radio:indeterminate {
+  color: $primary_bg;
+  background-color: $primary_fg;
+}
+
+check:checked:hover, check:indeterminate:hover,
+radio:checked:hover,
+radio:indeterminate:hover {
+  box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
+  background-color: $primary_fg;
+}
+
+check:checked:active, check:indeterminate:active,
+radio:checked:active,
+radio:indeterminate:active {
+  box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
+  background-color: $primary_fg;
+}
+
+switch {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+  margin: 4px 0;
+  border: none;
+  border-radius: 9999px;
+  background-color: $secondary_bg;
+  background-clip: padding-box;
+  font-size: 0;
+  color: transparent;
+}
+
+switch:checked {
+  background-color: $primary_fg;
+}
+
+switch:disabled {
+  opacity: 0.5;
+}
+
+switch slider {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+  min-width: 18px;
+  min-height: 18px;
+  margin: 3px;
+  border-radius: 9999px;
+  outline: none;
+  background-color: $default_fg;
+  border: none;
+  color: transparent;
+}
+
+scale {
+  min-height: 2px;
+  min-width: 2px;
+}
+
+scale.horizontal {
+  padding: 17px 12px;
+}
+
+scale.vertical {
+  padding: 12px 17px;
+}
+
+scale slider {
+  min-height: 18px;
+  min-width: 18px;
+  margin: -8px;
+}
+
+scale trough {
+  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+  outline: none;
+  background-color: $secondary_bg;
+}
+
+scale highlight {
+  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+  background-color: $primary_fg;
+}
+
+scale highlight:disabled {
+  background-color: #1e1e2e;
+}
+
+scale fill {
+  transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+scale fill:disabled {
+  background-color: transparent;
+}
+
+scale slider {
+  transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
+  border-radius: 9999px;
+  color: $primary_fg;
+  background-color: $primary_bg;
+  box-shadow: inset 0 0 0 2px $primary_fg;
+}
+
+scale slider:hover {
+  box-shadow: inset 0 0 0 2px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
+}
+
+scale slider:active {
+  box-shadow: inset 0 0 0 4px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
+}
+
+tooltip {
+  box-shadow: none;
+}
+
+tooltip.background {
+  background-color: $primary_bg;
+  color: $default_fg;
+  border-radius: 6px;
+}
+
+separator {
+  min-width: 1px;
+  min-height: 1px;
+  background-color: $secondary_bg;
+}
+
+@keyframes spin {
+  to {
+    -gtk-icon-transform: rotate(1turn);
+  }
+}
+
+spinner {
+  background: none;
+  opacity: 0;
+  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+}
+
+spinner:checked {
+  opacity: 1;
+  animation: spin 1s linear infinite;
+}

scss/highlights.scss

@@ -0,0 +1,221 @@
+@import "colors";
+
+* {
+  color: $default_fg;
+  font-family: "JetBrainsMono NF";
+  font-size: 0.9rem;
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+  background-color: $primary_bg;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+.code {
+  background: $light-background;
+  border-radius: 0.5rem;
+
+  .code-header {
+    background: $light-background;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    border-bottom: 1px solid $primary_fg;
+    padding: 5px;
+
+    > button {
+      color: $default_fg;
+      background: transparent;
+      float: right;
+      border: none;
+
+      &:before {
+        content: '󰆏';
+        display: inline-block;
+        padding-right: 0.5rem;
+      }
+    }
+  }
+}
+
+$languages-map: (
+  arduino: "",
+  armasm: "",
+  avrasm: "",
+  bash: "",
+  c: "",
+  clojure: "",
+  coffeescript: "",
+  cpp: "",
+  csharp: "󰌛",
+  css: "",
+  dockerfile: "󰡨",
+  go: "",
+  gradle: "",
+  haskell: "",
+  html: "",
+  java: "",
+  javascript: "󰌞",
+  json: "",
+  latex: "",
+  lua: "󰢱",
+  makefile: "",
+  markdown: "",
+  mipsasm: "",
+  nginx: "",
+  nix: "󱄅",
+  php: "",
+  prolog: "",
+  python: "",
+  r: "󰟔",
+  ruby: "",
+  rust: "",
+  scss: "",
+  shell: "",
+  typescript: "󰛦",
+  wasm: "",
+  x86asm: "",
+  xml: "󰗀",
+);
+
+@each $lang, $content in $languages-map {
+  [data-language="#{$lang}"]:before {
+    content: $content;
+    font-size: 1.1rem;
+    color: $primary_fg;
+    padding-right: 0.5rem;
+  }
+}
+
+pre {
+  padding: 5px;
+  overflow-x: scroll;
+
+  code.hljs {
+    color: $default_fg;
+    background: transparent;
+  }
+}
+
+code {
+  & .hljs-keyword {
+    color: $mauve;
+  }
+
+  & .hljs-built_in {
+    color: $red;
+  }
+
+  & .hljs-type {
+    color: $yellow;
+  }
+
+  & .hljs-literal,
+  & .hljs-number {
+    color: $orange;
+  }
+
+  & .hljs-operator {
+    color: $teal;
+  }
+
+  & .hljs-punctuation {
+    color: $lightteal;
+  }
+
+  & .hljs-property,
+  & .hljs-variable.language_,
+  & .hljs-symbol {
+    color: $teal;
+  }
+
+  & .hljs-regexp {
+    color: $pink;
+  }
+
+  & .hljs-string,
+  & .hljs-char.escape_,
+  & .hljs-subst {
+    color: $green;
+  }
+
+  & .hljs-comment {
+    color: $grey;
+  }
+
+  & .hljs-doctag {
+    color: $red;
+  }
+
+  & .hljs-meta,
+  & .hljs-title.function_,
+  & .hljs-section {
+    color: $orange;
+  }
+
+  & .hljs-tag,
+  & .hljs-attribute {
+    color: $lightgrey;
+  }
+
+  & .hljs-name,
+  & .hljs-selector-attr {
+    color: $mauve;
+  }
+
+  & .hljs-params,
+  & .hljs-selector-class,
+  & .hljs-template-variable {
+    color: $default_fg;
+  }
+
+  & .hljs-selector-tag {
+    color: $yellow;
+  }
+
+  & .hljs-selector-id {
+    color: $blue;
+  }
+
+  & .hljs-bullet,
+  & .hljs-code,
+  & .hljs-formula {
+    color: $teal;
+  }
+
+  & .hljs-emphasis {
+    color: $red;
+    font-style: italic;
+  }
+
+  & .hljs-strong {
+    color: $red;
+    font-weight: bold;
+  }
+
+  & .hljs-link {
+    color: $lightblue;
+    font-style: italic;
+  }
+
+  & .hljs-quote {
+    color: $green;
+    font-style: italic;
+  }
+
+  & .hljs-addition {
+    color: $green;
+    background: rgba(166, 227, 161, 0.15);
+  }
+
+  & .hljs-deletion {
+    color: $red;
+    background: rgba(243, 139, 168, 0.15);
+  }
+}
+
+

scss/main.scss

@@ -0,0 +1,17 @@
+* {
+  all: unset;
+  font-family: "JetBrains Mono Nerd Font";
+}
+
+//general
+@import "colors";
+@import "common";
+
+//modules - bar
+@import "bar/audio";
+@import "bar/bluetooth";
+@import "bar/clock";
+@import "bar/workspace";
+@import "bar/window_title";
+@import "bar/systray";
+@import "bar/bar";