feat(eww): add config

eww/eww.scss

@@ -0,0 +1,239 @@
+// gruvbox-material-soft-dark palette
+$bg:      #32302f;
+$bg_dim:  #252423;
+$bg_sel:  #45403d;
+$fg:      #d4be98;
+$red:     #ea6962;
+$green:   #a9b665;
+$yellow:  #d8a657;
+$blue:    #7daea3;
+$magenta: #d3869b;
+$cyan:    #89b482;
+$gray:    #928374;
+
+// base
+* {
+  all: unset;
+  font-family: "JetBrainsMono Nerd Font";
+  font-size: 13px;
+}
+
+// transparent backdrop for click-away dismiss
+.backdrop {
+  background-color: transparent;
+}
+
+// popup container
+.popup {
+  background-color: $bg_dim;
+  border: 1px solid $bg_sel;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+// section titles
+.title {
+  color: $fg;
+  font-size: 13px;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.subtitle {
+  color: $gray;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+// labels and values
+.label {
+  color: $gray;
+}
+
+.value {
+  color: $fg;
+}
+
+.value.dim {
+  color: $gray;
+  font-size: 12px;
+  margin-left: 8px;
+}
+
+// detail lines (smaller, dimmer)
+.details {
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid $bg_sel;
+}
+
+.detail {
+  color: $gray;
+  font-size: 12px;
+}
+
+// rows
+.row {
+  padding: 2px 0;
+}
+
+// progress bars
+progressbar {
+  border-radius: 3px;
+
+  trough {
+    min-height: 4px;
+    border-radius: 3px;
+    background-color: $bg_sel;
+
+    progress {
+      min-height: 4px;
+      border-radius: 3px;
+      background-color: $green;
+    }
+  }
+}
+
+progressbar.warning trough progress {
+  background-color: $yellow;
+}
+
+progressbar.critical trough progress {
+  background-color: $red;
+}
+
+// sliders
+scale {
+  margin: 0 4px;
+
+  trough {
+    min-height: 4px;
+    border-radius: 3px;
+    background-color: $bg_sel;
+
+    highlight {
+      min-height: 4px;
+      border-radius: 3px;
+      background-color: $blue;
+    }
+
+    slider {
+      min-width: 14px;
+      min-height: 14px;
+      border-radius: 50%;
+      background-color: $fg;
+      margin: -5px 0;
+    }
+  }
+}
+
+// buttons
+.toggle-btn {
+  color: $gray;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background-color: $bg_sel;
+  min-width: 30px;
+
+  &.active {
+    color: $bg_dim;
+    background-color: $green;
+  }
+
+  &:hover {
+    background-color: lighten($bg_sel, 10%);
+  }
+}
+
+// device list buttons
+.device-btn {
+  color: $fg;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background-color: transparent;
+
+  &.active {
+    background-color: $bg_sel;
+    color: $fg;
+
+    label {
+      font-weight: bold;
+    }
+  }
+
+  &:hover {
+    background-color: $bg;
+  }
+}
+
+// device rows (non-clickable list items)
+.device-row {
+  padding: 4px 10px;
+}
+
+// close/disconnect button
+.close-btn {
+  color: $gray;
+  padding: 2px 6px;
+  border-radius: 4px;
+
+  &:hover {
+    color: $red;
+    background-color: $bg;
+  }
+}
+
+// profile selector buttons
+.profile-btn {
+  color: $gray;
+  padding: 6px 12px;
+  border-radius: 6px;
+  background-color: $bg;
+
+  &.active {
+    color: $bg_dim;
+    background-color: $cyan;
+    font-weight: bold;
+  }
+
+  &:hover {
+    background-color: $bg_sel;
+  }
+}
+
+// separator line
+.separator {
+  min-height: 1px;
+  background-color: $bg_sel;
+  margin: 4px 0;
+}
+
+// status indicators
+.indicator {
+  min-width: 14px;
+
+  &.online {
+    color: $green;
+  }
+
+  &.offline {
+    color: $gray;
+  }
+}
+
+// empty state
+.empty {
+  color: $gray;
+  font-size: 12px;
+  padding: 8px 0;
+}
+
+// active player label
+.playing {
+  color: $green;
+}
+
+// slider row layout
+.slider-row {
+  padding: 4px 0;
+}