changed volume location and widget colours

dotfiles/.config/quickshell/modules/osd/VolumeOsd.qml

@@ -11,10 +11,15 @@ PanelWindow {
     color: "transparent"
     exclusiveZone: 0
 
-    anchors { bottom: true }
-    margins.bottom: 70
+    // Top-right, just under the bar — same fixed distance from the bar and
+    // screen edge (Appearance.spacing) that every popup opened from the bar
+    // itself uses, so this lines up with them instead of floating
+    // bottom-center.
+    anchors { top: true; right: true }
+    margins.top: Appearance.spacing
+    margins.right: Appearance.spacing
 
-    implicitWidth: 240
+    implicitWidth: 272
     implicitHeight: 54
 
     WlrLayershell.layer: WlrLayer.Overlay
@@ -59,19 +64,61 @@ PanelWindow {
                 }
             }
 
-            Rectangle {
+            Item {
+                id: slider
                 Layout.fillWidth: true
-                height: 6
-                radius: 3
-                color: Colors.muted
+                implicitHeight: 16
+
+                readonly property real value: osd.sink && osd.sink.audio ? osd.sink.audio.volume : 0
+                readonly property bool enabled: !!osd.sink
 
                 Rectangle {
-                    height: parent.height
-                    radius: 3
-                    color: Colors.primary
-                    width: parent.width * (osd.sink && osd.sink.audio ? osd.sink.audio.volume : 0)
-                    Behavior on width { NumberAnimation { duration: Appearance.animationDuration } }
+                    id: track
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: parent.width
+                    height: 4
+                    radius: 0
+                    color: Colors.muted
+                    opacity: 0.35
                 }
+                Rectangle {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: parent.left
+                    width: track.width * Math.max(0, Math.min(1, slider.value))
+                    height: 4
+                    radius: 0
+                    color: Colors.primary
+                    opacity: slider.enabled ? 1 : 0.4
+                }
+                Rectangle {
+                    width: 12
+                    height: 12
+                    radius: 6
+                    color: Colors.primary
+                    opacity: slider.enabled ? 1 : 0.4
+                    anchors.verticalCenter: parent.verticalCenter
+                    x: Math.max(0, Math.min(track.width - width, track.width * slider.value - width / 2))
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    enabled: slider.enabled
+                    cursorShape: Qt.PointingHandCursor
+                    function updateFromX(mx) {
+                        if (!osd.sink || !osd.sink.audio) return
+                        osd.sink.audio.volume = Math.max(0, Math.min(1, mx / track.width))
+                    }
+                    onPressed: (mouse) => updateFromX(mouse.x)
+                    onPositionChanged: (mouse) => { if (pressed) updateFromX(mouse.x) }
+                }
+            }
+
+            Text {
+                Layout.preferredWidth: 32
+                horizontalAlignment: Text.AlignRight
+                font.family: Appearance.fontFamily
+                font.pixelSize: Appearance.fontSizeSmall
+                color: Colors.muted
+                text: Math.round(slider.value * 100) + "%"
             }
         }
     }