dotfiles/.config/eww/eww.scss

@import "colors";

* {
  all: unset;
}

.reservepower.reservepower {
  color: $red;
}

.root {
  color: $foreground;
  font-family: "Armstrong";
  font-size: 9pt;
  background-color: rgba(0, 0, 0, 0);
  // Probably needs to change
  &.bar {
    margin: 10px;
    margin-bottom: 0px;
  }

  &.left-side {
    margin: 10px;
    margin-top: 20px;
    margin-right: 0px;
    padding-bottom: 26px;
  }

  &.right-side {
    margin: 10px;
    margin-top: 20px;
    margin-left: 0px;
    padding-bottom: 26px;
  }

  &.bg {
    background-color: $bg0;
    padding: 10px;
  }
}

.outline {
  border: 1px solid $bg1;
}

.nebula {
  font-family: "Nebula";
  font-size: 1.2em;
  &.big,
  .big {
    font-size: 2em;
  }
  &.bigger,
  .bigger {
    font-size: 2.5em;
  }
  &.medium,
  .medium {
    font-size: 1.6em;
  }
  &.small,
  .small {
    font-size: 1.4em;
  }
}

.gauge {
  color: $foreground;
}

.gauge-hole {
  color: $wallpaper;
}

.gauge-gutter {
  color: $bg0;
}

.icon {
  font-family: "Font Awesome 5 Free Solid";
}

.invisible {
  color: $wallpaper;
}

.highlight {
  color: $red;
}

.offline {
  color: $bg1;
}

.special {
  color: $blue;
}

.green {
  color: $green;
}

.big {
  font-size: 12pt;
}

.message-overlay {
  background-color: $wallpaper;
}

// mpris module

.mpris--miniplayer-album {
  border-radius: 10%;
}

// sway module

.sway--root.sway--vertical {
  padding-top: 20px;
}

.sway--ws {
  color: $bg1;

  &.sway--active {
    color: $foreground;
  }

  &.sway--visible .fill {
    background-color: $foreground;
  }

  &.sway--focused .fill {
    background-color: $foreground;
  }
}

.reservepower .sway--ws.sway--active {
  color: $red;
}

.reservepower .sway--ws .fill {
  background-color: $red;
}

.big .normal,
.bigger .normal {
  font-size: 1rem;
}

// clock module

.clock--time {
  font-size: 20pt;
}

.clock--date {
  font-size: 9pt;
}

menu {
  padding: 3px;
  background-color: $bg0;
  font-family: "Armstrong";
  border: 1px solid $foreground;

  menuitem {
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid $bg1;
  }

  menuitem:last-child {
    border-bottom: none;
  }

  menuitem:hover {
    background-color: $bg1;
  }
}