feat(ags): finish migrating v1 to v2

2025-02-28 21:56:54 -05:00 · 2025-02-28 21:56:54 -05:00 · 2e15e10fd5
commit 2e15e10fd5
parent 7d64a1fe25
24 changed files with 1196 additions and 1026 deletions
--- a/modules/ags/config/widgets/media-player/_index.scss
+++ b/modules/ags/config/widgets/media-player/_index.scss
@ -0,0 +1,124 @@
+@use '../../style/colors';
+
+.media-player {
+    margin-top: 9px;
+    min-width: 100px;
+    min-height: 100px;
+
+    * {
+        all: unset;
+    }
+
+    .arrow {
+        transition: -gtk-icon-transform 0.3s ease-in-out;
+        margin-bottom: 12px;
+    }
+
+    .player {
+        padding: 10px;
+        min-width: 400px;
+        min-height: 200px;
+        border-radius: 30px;
+        border-top: 2px solid colors.$accent_color;
+        border-bottom: 2px solid colors.$accent_color;
+        transition: background 250ms;
+
+        .top {
+            font-size: 23px;
+        }
+
+        .metadata {
+            .title {
+                font-weight: 500;
+                transition: text 250ms;
+            }
+
+            .artist {
+                font-weight: 400;
+                font-size: 15px;
+                transition: text 250ms;
+            }
+        }
+
+        .bottom {
+            font-size: 30px;
+        }
+
+        .pausebutton {
+            transition: background-color ease .2s, color ease .2s;
+            font-size: 18px;
+        }
+
+        .playing {
+            transition: background-color ease .2s, color ease .2s;
+            border-radius: 15px;
+        }
+
+        .stopped,
+        .paused {
+            transition: background-color ease .2s, color ease .2s;
+            border-radius: 26px;
+            padding: 4px 6px;
+        }
+
+        button label {
+            min-width: 35px;
+        }
+    }
+
+    .player-icon, .position-indicator {
+        min-width: 18px;
+        margin: 7px;
+    }
+
+    .position-indicator {
+        background-color: rgba(255, 255, 255, 0.7);
+        box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.3);
+        border-radius: 100%;
+    }
+
+    .previous,
+    .next,
+    .shuffle,
+    .loop {
+        border-radius: 100%;
+        transition: color 200ms;
+
+        &:hover {
+            border-radius: 100%;
+            background-color: rgba(127, 132, 156, 0.4);
+            transition: color 200ms;
+        }
+    }
+
+    .loop {
+        label {
+            padding-right: 8px;
+        }
+    }
+
+    .position-slider {
+        min-height: 20px;
+
+        highlight {
+            margin: 0;
+            border-radius: 2em;
+        }
+
+        trough {
+            margin: 0 8px;
+            border-radius: 2em;
+        }
+
+        slider {
+            margin: -8px;
+            min-height: 20px;
+            border-radius: 10px;
+            transition: background-color 0.5s ease-in-out;
+        }
+
+        slider:hover {
+            transition: background-color 0.5s ease-in-out;
+        }
+    }
+}