[eww] Adds my Eww config

home-manager/apps/eww/config/eww.scss

@@ -0,0 +1,186 @@
+@use '/home/drew/.config/colors/decay' as decay;
+
+$color-primary: decay.$blue-bright;
+$color-standout: decay.$green;
+$color-danger: decay.$red;
+$color-foreground: decay.$foreground;
+$color-background: decay.$background;
+
+$color-primary-dark: decay.$blue;
+$color-background-light: decay.$black;
+$color-border: darker($color-background);
+$color-foreground-dark: darker($color-foreground);
+$color-standout-dark: darker($color-standout);
+
+* {
+  all: unset;
+}
+
+@mixin rounded-widget {
+  border-radius: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.statusbar {
+  background-color: $color-background;
+  // background-image: linear-gradient(160deg, rgba(255,00,00,0.5), $color-background);
+  color: $color-foreground;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 14px;
+  border-bottom: 3px solid $color-border;
+  font-family: 'Noto Sans Nerd Font', sans-serif;
+}
+
+.system-monitor {
+  padding-top: 8px;
+  padding-right: 8px;
+}
+
+.bar-and-monitor {
+  background-color: $color-background;
+  // background-image: linear-gradient(160deg, rgba(255,00,00,0.5), $color-background);
+  color: $color-foreground;
+}
+
+.workspaces {
+  .workspace {
+    padding-left: 8px;
+    padding-right: 8px;
+    margin-bottom: -3px;
+  }
+  .active {
+    background-color: $color-background-light;
+    color: $color-foreground;
+    box-shadow: inset 0 -3px $color-standout-dark;
+  }
+  .focused {
+    background-color: $color-standout;
+    color: $color-background;
+    box-shadow: inset 0 -3px $color-standout-dark;
+  }
+  .inactive {
+    color: $color-foreground-dark;
+  }
+}
+
+.clock {
+  @include rounded-widget();
+
+  &.small {
+    background-color: $color-standout;
+    margin-right: 16px;
+    .time {
+      font-size: 120%;
+      padding-right: 8px;
+      font-weight: bold;
+    }
+    .date {
+      color: darker($color-foreground)
+    }
+  }
+
+  &.large {
+    background-color: lighter($color-background);
+    padding: 16px 32px;
+    .time {
+      font-size: 200%;
+      font-weight: bold;
+    }
+    .date {
+      color: darker($color-foreground);
+      font-size: 150%;
+    }
+
+  }
+}
+
+.system-monitor-widget {
+  @include rounded-widget();
+  background-color: lighter($color-background);
+  padding: 8px 16px;
+
+  .widget-title {
+    font-size: 120%;
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+}
+
+.system-monitor-gauge {
+  border-radius: 8px;
+  background-color: $color-background;
+  padding: 0 16px;
+
+  &-circle {
+    color: $color-primary;
+  }
+}
+
+.system-monitor-network-name {
+  color: $color-foreground-dark;
+  font-size: 110%;
+}
+
+.system-monitor-sparkgraph {
+  &-graph {
+    margin: 2px 8px;
+    color: $color-primary;
+    border-bottom: 1px solid $color-border;
+    border-left: 1px solid $color-border;
+    background-image: linear-gradient(45deg, $color-border, $color-background-light);
+
+  }
+  &-mem .system-monitor-sparkgraph-graph {
+    color: decay.$magenta;
+  }
+  &-temp .system-monitor-sparkgraph-graph {
+    color: decay.$green;
+  }
+  &-value {
+    color: $color-foreground;
+  }
+  &-units {
+    color: $color-foreground-dark;
+    font-size: 80%;
+  }
+}
+
+.system-monitor-audio {
+  &-name {
+    color: $color-foreground-dark;
+  }
+  &-slider {
+    scale trough {
+      background-color: $color-background;
+      min-height: 8px;
+      border-radius: 4px;
+
+      highlight {
+        border-radius: 4px;
+        border: 4px solid $color-primary;
+      }
+    }
+    &.muted scale trough highlight {
+      border-color: $color-danger;
+    }
+  }
+}
+
+.systray {
+  @include rounded-widget();
+  background-color: $color-background-light;
+  padding: 2px 10px;
+}
+
+.stand-alone {
+  background-color: $color-background;
+  border-radius: 5px;
+  border: 3px solid $color-border;
+  padding: 8px;
+}
+
+.power-menu {
+  padding: 10px;
+}