dotfiles/eww/.config/eww/eww.scss

// Font stuff
$font-size: 16px;
$icon-size: 18px;
$logo-size: 22px;

// Basic colors
$blue: #81a2be;
$cyan: #add9ff;
$black: #1d1f21;
$red: #cc6666;
$green: #b5bd68;
$yellow: #f0c674;
$magenta: #b294bb;
$white: #c5c8c6;

// Colors
$bg-color: #1d1f21;
$bg-alt-color: #131519;
$fg-color: #c5c8c6;
$fg-alt-color: #5f5f5f;
$fg-sel-color: $cyan;
$fg-desel-color: $fg-alt-color;
$border-color: #434549;

$fg-accent: $cyan;

// Misc
$anim-transition: 150ms;

* {
  all: unset; //Unsets everything so you can style everything from scratch
  font-family: "Fira Code";
  // color: $fg-color;
}

tooltip {
  color: $fg-alt-color;
  background-color: $bg-alt-color;
}

.bar-1,
.bar-2 {
  background-color: $bg-color;
  color: $fg-alt-color;
  border-right: solid 1px $border-color;
}

.segment-end {
}

// Styles on classes (see eww.yuck for more information)
button {
  transition-property: opacity, color;
  transition-duration: $anim-transition;
}

// Workspaces
.workspaces {
	  padding: .3rem;
}

.workspaces > button {
  font-size: $font-size;
  margin: 4px;
}

.workspaces > button:hover {
  color: $fg-sel-color;
  opacity: 0.8;
}

button.active {
  // font-weight: bold;
  color: $fg-sel-color;
}

button.inactive {
  color: $fg-desel-color;
}

// Generic stuff
scale trough {
  all: unset;
  background-color: $bg-alt-color;
  border-radius: 5px;
  min-height: 60px;
  min-width: 4px;
  margin: 0.3rem 0 0.3rem 0;
}

// Menu
.powermenu {
  transition: color $anim-transition;
  // border-right: solid 1px $border-color;
  padding: 0.5rem 0.2rem 0.3rem 0.2rem;
}

.quit,
.lock,
.reboot,
.poweroff {
  // padding: .5rem .2rem .3rem .2rem;
}

// Colors for the buttons
.lock:hover {
  color: $blue;
}
.quit:hover {
  color: $green;
}
.reboot:hover {
  color: $yellow;
}
.poweroff:hover {
  color: $red;
}

.pm-active {
  // background-color: $bg-alt-color;
  // border-radius: 5px;
}

.pm-inner {
  padding: 0.2rem 0;
}

// Control
.control {
  margin-bottom: $logo-size;
  margin-bottom: 0.5rem;
  font-family: Material Icons;
  font-size: 1.6em;
}

.icon {
  margin: 0 0.2rem;
  font-size: $icon-size;
  font-family: Material Icons;
  padding: 0 1px;
}

.icon:hover {
  opacity: 0.6;
}

// Volume stuff
.volbar trough highlight {
  background-color: $fg-accent;
  border-radius: 5px;
}

// Time
.time {
  // color: $fg-alt-color;
  font-size: 11px;
  font-weight: bold;
  border-top: solid 2px $fg-alt-color;
  padding-top: 1rem;
  margin-bottom: 0.5rem;
}

// Logo button
.logo {
  margin: 0 0.8rem;
  margin-top: 6px;
  font-size: $logo-size;
}

.logo-seperator {
  border-bottom: 2px solid $border-color;
  padding-bottom: 0.4rem;
}

// Color overrides
.red {
  color: $red;
  opacity: 0.8;
}

// Music widget
.musicmenu {
  // background-color: $bg-alt-color;
}

.mm-inner {
  color: $blue;
}