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

* {
  all: unset;
}

// Color variables
$background: #1a1b26;
$foreground: #a9b1d6;
$urgent: #c9545d;

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

// EWW BAR
.eww_bar {
  background-color: $background;
  padding: 0.3rem;
  font-family: "Iosevka Nerd Font";
  font-weight: bold;
  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: 2rem;
  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.5rem;
}
.button-reboot,
.button-hibernate,
.button-quit,
.button-shutdown {
  // padding: 0.5rem 0.2rem 0.3rem 0.2rem;
  padding: 0.3rem 0.7rem;
  font-size: 2rem;
}
.button-shutdown {
  // margin-bottom: 0.5rem;
  color: $red;
}
.button-reboot {
  color: $yellow;
}
.button-quit {
  color: $green;
}
.button-hibernate {
  color: $blue;
}