ags/style.scss

$primary: #1fb854;
$secondary: #1eb88e;
$accent: #1fb8ab;
$neutral: #19362d;
$base100: #1b1717;
$base200: #161212;
$base300: #110d0d;
$basecontent: #cac9c9;

$info: #00b5ff;
$success: #00a96e;
$warning: #ffbe00;
$error: #ff5861;

:root {
  font-family: JetBrainsMono Nerd Font;
}

button {
  all: initial;

  font-family: inherit;
  background: $base100;
  transition:
    border 0.35s,
    background 0.35s,
    color 0.35s;
  border-radius: 8px;
  padding: 0 8px;
}

button:hover {
  background: $primary;
  label {
    color: $base300;
  }
}

label {
  all: initial;

  font-family: inherit;
  font-size: 14px;
  color: $basecontent;
}

popover > contents {
  all: initial;

  padding: 4px 12px;
  border-radius: 8px;
  border: 4px solid $base200;
  background: rgba($color: $base100, $alpha: 0.98);
}

.no-styles {
  all: initial;

  color: $primary;
}

.active {
  label {
    background: $secondary;
    color: $base300;
  }
}

.Arch {
  -gtk-icon-size: 22px;
  padding: 0 6px;
}

.Pywal {
  label {
    font-size: 16px;
    padding: 4px 6px 4px 2px;
  }
}

.SwayNC {
  label {
    font-size: 16px;
    padding: 0 12px;
  }
}

.Tray {
  margin: 0 4px;

  arrow {
    all: initial;
  }
}

.Tray > * {
  margin: 0 2px;

  image {
    -gtk-icon-size: 18px;
  }
}

.Workspaces {
  // background: $base300;
  // border-radius: 8px;

  > * {
    margin: 0 2px;
  }
}

.WirePlumberMenu {
  arrow {
    all: initial;
  }

  button {
    margin: 4px 0;
  }
}

.TrayMenu {
  all: initial;

  contents {
    button {
      margin: 4px;
      padding: 4px;
      border-radius: 8px;
      background: $base200;
      transition:
        border 0.5s,
        background 0.5s;

      &:hover {
        color: $base300;
        background: $primary;
      }
    }
  }
}

.CalendarMenu {
  contents {
    button {
      margin: 4px;
      padding: 4px;
      border-radius: 8px;
      background: $base200;
      transition:
        border 0.5s,
        background 0.5s;

      &:hover {
        color: $base300;
        background: $primary;
      }
    }

    label {
      margin: 4px;
    }

    .today {
      border: 3px solid $primary;
    }

    .other-month {
      color: $accent;
      transition: border 0.5s;

      &:hover {
        border: 3px solid $secondary;
      }
    }
  }

  arrow {
    all: initial;
  }
}

window.Bar {
  background: transparent;
  padding: 8px 8px 2px 8px;

  > centerbox {
    border-radius: 8px;

    background-color: $base300;
    border: 2px solid $base100;
    box-shadow: 0 0 10px rgba($color: $base100, $alpha: 0.5);
    // background: rgba($color: $base300, $alpha: 0.75);
    // border-bottom: 4px solid $base200;

    > box {
      margin: 5px 2px;
      & > * {
        margin: 0 3px;
      }
    }
  }
}