feat: update ags

home/desktops/hyprland/ags/scss/widgets/bar.scss

@@ -0,0 +1,283 @@
+$bar-spacing: $spacing / 2;
+$button-radius: if(
+  $bar-style == "floating",
+  max(0, $radii - $bar-spacing),
+  $radii
+);
+
+@mixin panel-button($flat: $bar-flat-buttons, $reactive: true) {
+  @include unset;
+
+  @if $bar-style == "separated" {
+    transition: $transition;
+
+    > * {
+      @include floating-widget;
+      border-radius: $radii;
+      margin: $wm-gaps $bar-spacing;
+      transition: $transition;
+    }
+
+    &:hover > * {
+      color: $hover-fg;
+
+      @if $drop-shadow {
+        box-shadow:
+          0 0 min(6px, $spacing/2) 0 $shadow,
+          inset 0 0 0 99px $hover;
+      } @else {
+        box-shadow: inset 0 0 0 99px $hover;
+      }
+    }
+
+    &:active > *,
+    &.active > * {
+      label,
+      image {
+        color: $accent-fg;
+      }
+      background-image: $active-gradient;
+      background-color: $accent;
+    }
+  } @else {
+    @include accs-button($flat, $reactive);
+
+    > * {
+      border-radius: $button-radius;
+      margin: $bar-spacing;
+    }
+  }
+
+  label,
+  image {
+    font-weight: bold;
+  }
+
+  > * {
+    padding: $padding * 0.4 $padding * 0.8;
+  }
+}
+
+.panel {
+  @if $bar-style == "normal" {
+    background-color: $bg-color;
+  }
+
+  @if not $screen-corners and $bar-style == "normal" {
+    @if $bar-position == "bottom" {
+      border-top: $border;
+    } @else {
+      border-bottom: $border;
+    }
+  }
+
+  @if $bar-style == "floating" {
+    @include floating-widget;
+    border-radius: $radii;
+    margin: $wm-gaps;
+    padding: 0;
+  }
+
+  @if $bar-style == "separated" {
+    > .end > button:last-child > * {
+      margin-right: $wm-gaps;
+    }
+
+    > .start > button:first-child > * {
+      margin-left: $wm-gaps;
+    }
+  }
+
+  .panel-button {
+    @include panel-button;
+  }
+
+  .tray-item,
+  .color-picker {
+    @include panel-button($flat: true);
+  }
+
+  separator {
+    background-color: transparentize($fg-color, 0.86);
+    border-radius: $radii;
+    min-height: 5px;
+    min-width: 5px;
+  }
+
+  .overview {
+    label {
+      color: transparentize($accent, 0.2);
+    }
+    &:hover label {
+      color: $accent;
+    }
+    &:active label,
+    &.active label {
+      color: $accent-fg;
+    }
+  }
+
+  .powermenu,
+  .recorder {
+    image {
+      color: transparentize($red, 0.3);
+    }
+    &:hover image {
+      color: transparentize($red, 0.15);
+    }
+    &:active image {
+      color: $red;
+    }
+  }
+
+  .focused-client > box > box,
+  .quicksettings > box > box {
+    @include spacing(
+      $spacing: if($bar-spacing == 0, $padding / 2, $bar-spacing)
+    );
+  }
+
+  /* stylelint-disable-next-line selector-not-notation */
+  .quicksettings:not(.active):not(:active) {
+    .bluetooth {
+      color: $blue;
+    }
+
+    .battery {
+      &.low {
+        color: $red;
+      }
+      &.charged,
+      &.charging {
+        color: $green;
+      }
+    }
+  }
+
+  .media {
+    &.spotify image {
+      color: $green;
+    }
+    &.firefox image {
+      color: $orange;
+    }
+    &.mpv image {
+      color: $magenta;
+    }
+  }
+
+  .notifications {
+    image {
+      color: $yellow;
+    }
+  }
+
+  .battery-bar {
+    .font-icon {
+      font-size: 1.15em;
+    }
+
+    @if $battery-bar-full {
+      > box {
+        padding: 0;
+      }
+    }
+
+    image,
+    .font-icon {
+      margin-right: $bar-spacing * 0.5;
+    }
+
+    levelbar trough {
+      @include widget;
+      min-width: $battery-bar-width;
+      min-height: $battery-bar-height;
+
+      block.filled {
+        border-radius: max($radii - $border-width, 0);
+        background-image: $active-gradient;
+      }
+    }
+
+    @mixin color($color) {
+      image,
+      label {
+        color: $color;
+      }
+
+      block.filled {
+        background-image: linear-gradient(
+          to right,
+          $color,
+          lighten($color, 6%)
+        );
+      }
+    }
+
+    .medium {
+      @include color($yellow);
+    }
+    .low {
+      @include color($red);
+    }
+    .charging {
+      @include color($green);
+    }
+    &:active {
+      @include color($accent-fg);
+    }
+
+    .whole-button {
+      label {
+        color: $fg-color;
+        text-shadow: $text-shadow;
+      }
+
+      trough,
+      block.filled {
+        border-radius: $button-radius;
+      }
+
+      @if $bar-style == "separated" {
+        trough {
+          border: none;
+        }
+      }
+    }
+  }
+
+  .workspaces button {
+    all: unset;
+
+    .indicator {
+      font-size: 0;
+      min-width: 8px;
+      min-height: 8px;
+      border-radius: $radii * 0.6;
+      box-shadow: inset 0 0 0 $border-width $border-color;
+      margin: 0 $padding/2;
+      transition: $transition/2;
+      background-color: transparentize($fg-color, 0.8);
+    }
+
+    &.occupied .indicator {
+      background-color: transparentize($fg-color, 0.2);
+      min-width: 10px;
+      min-height: 10px;
+    }
+
+    &:hover .indicator {
+      box-shadow: inset 0 0 0 10px transparentize($fg-color, 0.8);
+    }
+
+    &.active .indicator,
+    &:active .indicator {
+      background-color: $accent;
+    }
+
+    &.active .indicator {
+      min-width: 24px;
+      min-height: 16px;
+    }
+  }
+}