config/eww/bar/eww.scss

$window:        #eeeeee;
$window_border: rgba(200, 200, 200, 0.7);

$workspace_inactive:     rgba(100, 114, 125, 0.6);
$workspace_inactive_bg:  transparent;
$workspace_active:       rgba(180, 190, 200, 0.9);
$workspace_active_bg:    transparent;
$workspace_focused:      rgba(220, 230, 230, 0.9);
$workspace_focused_bg:   rgba(100, 114, 125, 0.5);
$workspace_hover:        #2E5DFF;

$widget_bg:              rgba(40, 40, 40, 0.5);
$weather:                rgba(180, 220, 235, 0.8);
$weather_end:            rgba(171, 233, 179, 0.8);
$clock:                  rgba(171, 233, 179, 1.0);

$media-progress-bg:   #333333;
$media:           rgba(224, 232, 224, 0.7);
$media-paused:    rgba(224, 200, 200, 0.7);

$tray_bg: rgba(204, 204, 204, 0.1);
$tray:                 #c9cbff;
$keyboard:             #f2cdcd;
$language:             #e8a2af;
$idle_inhibitor:       #f28fad;
$audio:                #fae3b0;
$backlight:            #f8bd96;
$bluetooth:            #caa9c7;
$network:              #bd93f9;
$cpu_bg:               #333333;
$cpu:                  #96cdfb;
$memory_bg:            #333333;
$memory:               #88bbeb;
$temperature:          #ddb6f2;
$temperature_critical: #ff6666;
$battery:              #b6b2b3;


//* { all: unset; }

.vbar {
  background-color: transparent;
  margin-left: 5px;
  font-size: 15px;
  font-family: monospace;
}
.hbar {
  background-color: transparent;
  margin-top: 5px;
  font-size: 15px;
  font-family: monospace;
}

.icon {
  font-size: 20px;
}

.launcher {
  all: unset;
  font-size: 40px;
  margin: -2px -5px 5px -3px;
}

box .workspaces {
  all: unset;
  border-radius: 10px;
  button {
    all: unset;
    font-size: 30px;
    padding-left: 2px;
    margin: -5px -5px -5px -5px;
    border-radius: 2px;
  }
  button:hover {
    color: $workspace_hover;
  }
  .focused {
    color: $workspace_focused;
    background-color: $workspace_focused_bg;
  }
  .active {
    color: $workspace_active;
    background-color: $workspace_active_bg;
  }
  .inactive {
    color: $workspace_inactive;
    background-color: $workspace_inactive_bg;
  }
}

box .weather {
  color: $weather;
  margin-left: 2px;
  //margin-right: -1px;

  background-color: $widget_bg;
  border-radius: 5;

  .temperature {
    color: mix($weather_end, $weather, 0%);
    .feelsLike {
      font-style: italic;
    }
  }
  .uvIndex {
    color: mix($weather_end, $weather, 20%);
  }
  .humidity {
    color: mix($weather_end, $weather, 40%);
  }
  .precip {
    color: mix($weather_end, $weather, 60%);
  }
  .wind  {
    color: mix($weather_end, $weather, 80%);
  }
  .cloud  {
    color: mix($weather_end, $weather, 100%);
  }
}
//.audio-scale .audio .audio-icon {
//  background-color: transparent;
//  color: $audio;
//}
scale {
  border-radius: 5px;
  min-height: 80px;
  min-width: 10px;
  margin: .3rem 0 .3rem 0;
}
.volume-icon {
  margin: 2pt 0 2pt 0;
  color: $audio;
}
box .cpu {
  background-color: $cpu_bg;
  color: $cpu;
  padding: 5pt;
}
box .memory {
  background-color: $memory_bg;
  color: $memory;
  padding: 5pt;
}
box .clock {
  background-color: transparent;
  border-radius: 5;
  color: $clock;
  padding: 2pt 2pt 2pt 2pt;
}

.media {
	font-family: "Noto Serif";
	padding-left: 5px;
	padding-right: 5px;
  min-height: 15px;
  min-width: 15px;
	color: $media;
	border: none;
}
.media-playing {
  background-color: $media-progress-bg;
	color: $media;
}
.media-paused {
  background-color: $media-progress-bg;
	color: $media-paused;
}
.media-text-paused {
	color: $media-paused;
}
.status {
  font-family: monospace;
}

.systray {
  background-color: $tray_bg;
  color: $tray;
}

// Styles on classes (see eww.yuck for more information)

.status slider {
  all: unset;
  color: #ffd5cd;
}

.metric scale trough highlight {
  all: unset;
  background-color: #D35D6E;
  color: #000000;
  border-radius: 10px;
}
.metric scale trough {
  all: unset;
  background-color: #4e4e4e;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 10px;
  margin-right: 20px;
}
.metric scale trough highlight {
  all: unset;
  background-color: #D35D6E;
  color: #000000;
  border-radius: 10px;
}
.metric scale trough {
  all: unset;
  background-color: #4e4e4e;
  border-radius: 50px;
  min-height: 3px;
  min-width: 50px;
  margin-left: 10px;
  margin-right: 20px;
}