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:           rgba(224, 232, 224, 0.7);

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


* { all: unset; }

.bar {
  //background-color: transparent;
  margin-left: 5px;
  font-size: 15px;
  font-family: monospace;
}

.icon {
  font-size: 20px;
}

.launcher {
  font-size: 40px;
  margin: -7px -5px 15px -5px;
}

box .workspaces {
  border-radius: 10px;
  button {
    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%);
  }
}
box .clock {
  background-color: $widget_bg;
  border-radius: 5;
  color: $clock;
  margin-bottom: 30px;
  padding: 2pt 2pt 2pt 2pt;
}

.media {
	font-family: "Noto Serif";
	padding-left: 5px;
	padding-right: 5px;
	color: $media;
	border: none;
}

.status {
  font-family: monospace;
}

// 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;
}
.label-ram {
  font-size: large;
}