nixos-configs/eww/actions/actions.scss

.actions {
  background-color: $bg;
  color: $fg;
  font-family: Product Sans;
  border-radius: 30px;
  border: 5px solid $contrastbg;
  padding: 10px 18px;
}

.controlsbox {
  background-color: $contrastbg;
  border-radius: 15px;
  padding: 7px 12px;

  .vol-slider {
    .vol-label {
      min-width: 25px; /* Set the width according to your icons */
      font-size: 26px;
      font-family: Iosevka Nerd Font;
      margin-right: 15px;
      color: $blue;
    }
    & scale trough {
      all: unset;
      border-radius: 10px;
      background-color: $black;
      border: none;
      min-height: 16px;
      min-width: 250px;
      margin-left: 3px;
      & highlight {
        all: unset;
        background: linear-gradient(to right, $blue, $cyan);
        color: #000000;
        border-radius: 10px;
      }
    }
  }

  .br-slider {
    .br-label {
      min-width: 25px; /* Set the width according to your icons */
      font-size: 26px;
      font-family: Iosevka Nerd Font;
      margin-right: 15px;
      color: $yellow;
    }
    & scale trough {
      all: unset;
      border-radius: 10px;
      background-color: $black;
      border: none;
      min-height: 16px;
      min-width: 250px;
      margin-left: 3px;
      & highlight {
        all: unset;
        background: linear-gradient(to right, $red, $yellow);
        color: #000000;
        border-radius: 10px;
      }
    }
  }
}

.userinfobox {
  .time {
    font-size: 42px;
  }
  .pfp {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50px;
    min-width: 30px;
    min-height: 30px;
  }
  .daybox {
    margin-top: 8px;
    font-size: 14px;
  }
  .username {
    font-family: Product Sans;
  }
  .useractions {
    .logout {
      background-color: $black;
      font-family: Iosevka Nerd Font;
      font-size: 18px;
      padding: 6px 12px 6px 6px;
      border-radius: 4px;
      transition: all ease .2s;
      &:hover { background-color: $dimblack; }
      &:active { background-color: $black; }
    }
  }
}

.sysbuttonsbox {
  .block-container {
    .block {
      background-color: $contrastbg;
      padding: 0px 6px;
      border-radius: 50px;
      transition: all ease .2s;
      color: $fg;
      &:hover { background-color: $bgSecondary; }
      &:active { background-color: $contrastbg; }
      &.active {
        background-color: $black;
        &:hover { background-color: $dimblack; }
        &:active { background-color: $black; }
        .sepbox .sep {
          background-color: $lightblack;
        }
      }
      .iconbox .icon {
        font-family: MesloLGS NF;
        padding: 7px 14px 7px 14px;
        font-size: 20px;
	min-width: 20px;
      }
      .sepbox .sep {
        background-color: $black;
        margin: 0px 4px;
        padding: 0px 1px;
      }
      .chevronbox {
        font-family: Iosevka Nerd Font;
        padding: 0px 12px;
      }
    }
    .label {
      font-family: Product Sans;
      font-size: 14px;
    }
  }
}

.poweractionsbox {
  .info {
    font-size: 26px;
  }
  .buttons {
    font-family: Iosevka Nerd Font;
    font-size: 22px;
    button {
      padding: 1px 9px 1px 9px;
      background-color: $bgSecondary;
      border-radius: 5px;
      transition: all ease .2s;
      &:hover { background-color: $black; }
      &:active { background-color: $bg; }
      &.do-logout { color: $yellow; }
    }
  }
}