nixos-config/home-manager/modules/eww/config/eww.scss

// Color variables
$background: #000000;
$foreground: #ffffff;
$urgent: #c9545d;

$black: #24283b;
$gray: #565f89;
$red: #f7768e;
$green: #73daca;
$yellow: #e0af68;
$blue: #7aa2f7;
$magenta: #bb9af7;
$cyan: #7dcfff;
$navy: #285577;
$white: $foreground;

* {
    all: unset;
    background-color: inherit;
}

// EWW BAR
.eww_bar {
  background-color: $background;
  padding: 0.3rem;
  font-family: "Iosevka Nerd Font";
  font-weight: bold;
  font-size: 1rem;
  color: $foreground;
}

// Workspaces
.workspaces {
  font-family: "Iosevka Nerd Font";
  padding: 0 1rem 0 0;
  background-color: $background;
  border-radius: 5px;

  .ws {
    margin: 0;
    padding: 0 1rem;
    border-top: 2px solid transparent;

    &:hover {
      background-color: $gray;
    }

    &.focused {
      border-color: #4c7899;
      background-color: $navy;
      color: #ffffff;
    }

    &.urgent {
      border-color: $urgent;
      color: $urgent;
    }
  }
}

tooltip {
  background-color: $background;
  font-size: 1.2rem;
}

.ha-now-playing {
  font-family: "Iosevka Nerd Font";
  // font-size: 1.2rem;
  padding: 0;

  .icon {
    color: $magenta;
  }
}

// Control Panel
.control {
  padding: 0 0.5rem;
  font-family: "Iosevka Nerd Font";
  // font-size: 1.2em;
  border-radius: 5px;
}
.icon {
  font-size: 1.6rem;
  margin-right: 1rem;

  &.small {
    font-size: 1rem;
    margin-right: 0.5rem;
  }
}

.memory {
  margin: 0 0.5rem;

  .icon {
    color: $blue;
  }
}

.cpu {
  margin: 0 0.5rem;

  .icon {
    color: $green;
  }
}

.temperature {
  margin: 0 0.5rem;
  .icon {
    color: $red;
  }
}

.volume {
  .icon {
    color: $yellow;
  }
}
scale {
  trough {
    // all: unset;
    background-color: $black;
    border-radius: 5px;
    min-width: 80px;
    min-height: 10px;
    margin: 0 0.3rem 0 0.3rem;

    highlight {
      background-color: $yellow;
      border-radius: 5px;
    }
  }
}
.bribar trough highlight {
  background-color: $yellow;
  border-radius: 5px;
}
.volbar trough highlight {
  background-color: $green;
  border-radius: 5px;
}

// Clock
.time {
  font-family: "Iosevka Nerd Font";
  // font-size: 1.2rem;
  border-radius: 5px;
  padding: 0.7rem 0 0.5rem 0;
  margin: 0 0.5rem;

  .icon {
    color: $red;
  }
}

// Calendar
.cal-box {
  background-color: $black;
  font-family: "Iosevka Nerd Font";
  font-size: 1rem;

  .cal-inner-box {
    padding: 1rem 1rem 0.2rem;

    .cal {
      &.highlight {
        padding: 10rem;
      }

      padding: 0.8rem 0.25rem 0rem;
      margin-left: 10px;
    }
  }
}

calendar:selected {
  color: $blue;
}

calendar.header {
  color: $blue;
}

calendar.button {
  color: $magenta;
}

calendar.highlight {
  color: $magenta;
}

calendar:indeterminate {
  color: $background;
}

// Powermenu
.powermenu {
  font-family: "Iosevka Nerd Font";
  font-size: 1.6rem;

  .button-reboot,
  .button-hibernate,
  .button-quit,
  .button-shutdown {
    // padding: 0.5rem 0.2rem 0.3rem 0.2rem;
    padding: 0.3rem 0.7rem;
    font-size: 1.6rem;
  }
  .button-shutdown {
    // margin-bottom: 0.5rem;
    color: $red;
  }
  .button-reboot {
    color: $yellow;
  }
  .button-quit {
    color: $green;
  }
  .button-hibernate {
    color: $blue;
  }
}

// systray