add eww config

.config/eww/eww.scss

@@ -0,0 +1,181 @@
+$primary: #d64937;
+$secondary: #8abeb7;
+$black: #000;
+$red: #ff757a;
+$dimred: mix($red, $black);
+$orange: #fc9a6d;
+$dimorange: mix($orange, $black);
+$yellow: #f5be61;
+$dimyellow: mix($yellow, $black);
+$gray: #888;
+$dimgray: mix($gray, $black);
+$blue: #42ddd9;
+$dimblue: mix($blue, $black);
+$green: #7bdbb5;
+$dimgreen: mix($green, $black);
+
+$magenta: #d968c2;
+$cyan: #5dc5ee;
+
+$bg-color: rgba($black, 0.65);
+$fg-color: #eee;
+
+$hover: transparentize($primary, 0.4);
+$border-color: rgba(white, 0.03);
+
+$radius: 3px;
+
+@mixin button() {
+  margin: 0;
+  padding: 0 5px;
+
+  color: $fg-color;
+  
+  border: 0;
+  border-radius: $radius;
+
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+
+  label {
+    text-shadow: none;
+  }
+
+  &:focus {
+    color: $fg-color;
+    background-color: $hover;
+  }
+
+  &:hover {
+    color: $fg-color;
+    background-color: $hover;
+  }
+
+  &:active,
+  &.active {
+    color: $fg-color;
+    background-color: $primary;
+  }
+}
+
+.background {
+  background-color: $bg-color;
+}
+
+.bar {
+  padding: 4px 10px;
+  font-family: "JetBrains Mono Nerd Font";
+}
+
+.workspaces {
+  color: #666;
+  button {
+    @include button;
+    color: mix($fg-color, $black);
+
+    &.visible {
+      color: $fg-color;
+      font-weight: bold;
+    }
+  }
+  .workspace-visible {
+    color: #fff;
+    font-weight: bold;
+  }
+  .workspace-active {
+    color: #fff;
+    background: transparentize(#d64937, 0.0);
+  }
+}
+
+.active-window {
+  color: $gray;
+}
+
+.player {
+  button {
+    @include button;
+    padding-left: 8px;
+    padding-right: 8px;
+
+    &.play label {
+      padding-right: 4px;
+    }
+  }
+}
+
+.metric {
+  progressbar {
+    padding: 6px 6px 6px 10px;
+  
+    trough {
+      min-width: 100px;
+      min-height: 14px;
+      background-color: $dimgray;
+      border: 0;
+    
+      progress {
+        background-color: $gray;
+        min-height: 14px;
+        border: 0;
+      }
+    }
+  }
+  &.disk {
+    label { color: $red; }
+    trough {
+      background-color: $dimred;
+      progress { background-color: $red; }
+    }
+  }
+  &.memory {
+    label { color: $orange; }
+    trough {
+      background-color: $dimorange;
+      progress { background-color: $orange; }
+    }
+  }
+  &.cpu {
+    label { color: $yellow; }
+    trough {
+      background-color: $dimyellow;
+      progress { background-color: $yellow; }
+    }
+  }
+}
+
+.volume {
+  label { color: $green; }
+  scale {
+    padding: 6px 6px 6px 6px;
+
+    trough {
+      min-width: 100px;
+      min-height: 12px;
+      background-color: $dimgreen;
+      border: 1px solid $dimgreen;
+      border-radius: $radius;
+
+      slider {
+        background-color: white;
+        background-image: none;
+        border: 0;
+      }
+
+      highlight {
+        background-color: $green;
+        border: 0;
+      }
+    }
+  }
+}
+
+.sound-control {
+  padding: 8px;
+  button {
+    @include button;
+
+    padding: 2px 5px;
+  }
+}