dotfiles/.config/eww/eww.scss

@import "colors.scss";

* {
  font-family: 'JetBrainsMono NF';
  font-size: 13px;
}

.bar, tooltip {
  background-image: linear-gradient(160deg, $background1, $background2), linear-gradient(160deg, $accent1, $accent2);
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

.bar {
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.bar > * > *:nth-child(even) {
  color: $accent1;
  .disabled {
    color: $disabled;
  }
  scale trough {
    background-color: $background1;
  }
  scale trough highlight {
    background-color: $accent1;
  }
}

.bar > * > *:nth-child(odd) {
  color: $accent2;
  .disabled {
    color: $disabled2;
  }
  scale trough {
    background-color: $disabled2;
  }
  scale trough highlight {
    background-color: $accent2;
  }
}

label, .systray {
  padding: 6px;
}

.workspace {
  color: $foreground;
  label {
    padding: 0 10px;
  }
}

.workspace:hover {
  background-color: $hovered;
}

.workspace.active {
  background-color: $selected;
}

scale {
  padding: 0 4px;
  slider {
    all: unset;
  }
  trough {
    min-height: 6px;
    min-width: 60px;
  }
  progressbar trough {
    border: 2px solid $accent2;
    border-radius: 16px;
  }
}

progress {
  background-color: $accent1;
  border-radius: 16px;
}

circular-progress > * {
  margin: 1px;
  font-size: 11px;
}

tooltip {
  border: 1px solid transparent;
  border-radius: 4px;
}

calendar.selected {
  background-color: $accent2;
}

.alert {
  background-color: rgba($bad, 0.33);
}

.crit {
  background-color: rgba($bad, 0.66);
  animation-name: blink;
  animation-duration: 1.5s;
  animation-timing-function: steps(2, start);
  animation-iteration-count: infinite;
}

@keyframes blink {
  to {
    background-color: transparent;
  }
}