refactor: make the whole thing more generic

modules/home-manager/desktops/hyprland/ags/scss/widgets/media.scss

@@ -0,0 +1,120 @@
+@mixin player-color($color) {
+  button {
+    .shuffle.enabled {
+      color: $color;
+    }
+
+    .loop {
+      &.playlist,
+      &.track {
+        color: $color;
+      }
+    }
+
+    &:active label {
+      color: $color;
+    }
+  }
+
+  .position-slider:hover trough {
+    background-color: transparentize($color, 0.5);
+  }
+
+  .player-icon {
+    color: $color;
+  }
+}
+
+@mixin media() {
+  @include widget;
+
+  label {
+    color: $shader-fg;
+    text-shadow: $text-shadow;
+  }
+
+  .blurred-cover,
+  .cover {
+    background-size: cover;
+    background-position: center;
+    border-radius: $radii * 0.8;
+    opacity: 0.8;
+  }
+
+  .cover {
+    min-height: 100px;
+    min-width: 100px;
+    box-shadow: 2px 2px 2px 0 $shadow;
+    margin: $padding;
+    opacity: 0.9;
+  }
+
+  .labels {
+    margin-top: $padding;
+
+    label {
+      font-size: 1.1em;
+      text-shadow: $text-shadow;
+
+      &.title {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .position-slider {
+    @include slider(
+      $width: 0.4em,
+      $slider: false,
+      $gradient: linear-gradient($shader-fg, $shader-fg),
+      $radii: 0
+    );
+    margin-bottom: $padding/2;
+
+    trough {
+      border: none;
+      background-color: transparentize($shader-fg, 0.7);
+    }
+  }
+
+  .footer-box {
+    margin: -$padding/2 $padding $padding/2;
+
+    image {
+      -gtk-icon-shadow: $text-shadow;
+    }
+  }
+
+  .controls button {
+    @include unset;
+
+    label {
+      font-size: 2em;
+      color: transparentize($shader-fg, 0.2);
+      transition: $transition;
+
+      &.shuffle,
+      &.loop {
+        font-size: 1.4em;
+      }
+    }
+
+    &:hover label {
+      color: transparentize($shader-fg, 0.1);
+    }
+
+    &:active label {
+      color: $shader-fg;
+    }
+  }
+
+  &.spotify {
+    @include player-color($green);
+  }
+  &.firefox {
+    @include player-color($orange);
+  }
+  &.mpv {
+    @include player-color($magenta);
+  }
+}