overlay: make widgets have proper round corners when pinned

dots/.config/quickshell/ii/modules/common/Persistent.qml

@@ -104,7 +104,7 @@ Singleton {
                     property bool pinned: false
                     property bool clickthrough: false
                     property real x: 80
-                    property real y: 250
+                    property real y: 280
                 }
             }
 

dots/.config/quickshell/ii/modules/overlay/StyledOverlayWidget.qml

@@ -21,6 +21,7 @@ AbstractOverlayWidget {
     id: root
 
     required property Item contentItem
+    property bool fancyBorders: true
 
     required property var modelData
     readonly property string identifier: modelData.identifier
@@ -29,6 +30,8 @@ AbstractOverlayWidget {
     property var persistentStateEntry: Persistent.states.overlay[identifier]
     property real radius: Appearance.rounding.windowRounding
     property real minWidth: 250
+    property real padding: 6
+    property real contentRadius: radius - padding
 
     draggable: GlobalStates.overlayOpen
     x: Math.round(persistentStateEntry.x) // Round or it'll be blurry
@@ -96,11 +99,15 @@ AbstractOverlayWidget {
     Rectangle {
         id: border
         anchors.fill: parent
-        color: "transparent"
+        color: (root.fancyBorders && GlobalStates.overlayOpen) ? Appearance.colors.colLayer1 : "transparent"
         radius: root.radius
         border.color: ColorUtils.transparentize(Appearance.colors.colOutlineVariant, GlobalStates.overlayOpen ? 0 : 1)
         border.width: 1
 
+        Behavior on color {
+            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+        }
+
         layer.enabled: GlobalStates.overlayOpen
         layer.effect: OpacityMask {
             maskSource: Rectangle {
@@ -110,25 +117,23 @@ AbstractOverlayWidget {
             }
         }
 
-        Column {
+        ColumnLayout {
             id: contentColumn
-            z: -1
+            z: root.fancyBorders ? 0 : -1
             anchors.fill: parent
+            spacing: 0
 
             // Title bar
             Rectangle {
                 id: titleBar
                 opacity: GlobalStates.overlayOpen ? 1 : 0
-                anchors {
-                    left: parent.left
-                    right: parent.right
-                }
-                property real padding: 2
+                Layout.fillWidth: true
+                property real padding: 6
                 implicitWidth: titleBarRow.implicitWidth + padding * 2
                 implicitHeight: titleBarRow.implicitHeight + padding * 2
-                color: Appearance.m3colors.m3surfaceContainer
-                border.color: Appearance.colors.colOutlineVariant
-                border.width: 1
+                color: root.fancyBorders ? "transparent" : Appearance.colors.colLayer1
+                // border.color: Appearance.colors.colOutlineVariant
+                // border.width: 1
                 
                 RowLayout {
                     id: titleBarRow
@@ -191,7 +196,10 @@ AbstractOverlayWidget {
             // Content
             Item {
                 id: contentContainer
-                anchors.horizontalCenter: parent.horizontalCenter
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.margins: root.fancyBorders ? root.padding : 0
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                 implicitWidth: root.contentItem.implicitWidth
                 implicitHeight: root.contentItem.implicitHeight
                 children: [root.contentItem]

dots/.config/quickshell/ii/modules/overlay/crosshair/Crosshair.qml

@@ -1,9 +1,13 @@
 import QtQuick
+import QtQuick.Layouts
 import Quickshell
 import qs.modules.common
 import qs.modules.overlay
 
 StyledOverlayWidget {
     id: root
-    contentItem: CrosshairContent {}
+    fancyBorders: false // Crosshair should be see-through
+    contentItem: CrosshairContent {
+        anchors.centerIn: parent
+    }
 }

dots/.config/quickshell/ii/modules/overlay/recorder/Recorder.qml

@@ -13,6 +13,7 @@ StyledOverlayWidget {
     contentItem: Rectangle {
         id: contentItem
         anchors.centerIn: parent
+        radius: root.contentRadius
         color: Appearance.m3colors.m3surfaceContainer
         property real padding: 8
         implicitHeight: contentColumn.implicitHeight + padding * 2

dots/.config/quickshell/ii/modules/overlay/resources/Resources.qml

@@ -39,6 +39,7 @@ StyledOverlayWidget {
         id: contentItem
         anchors.centerIn: parent
         color: Appearance.m3colors.m3surfaceContainer
+        radius: root.contentRadius
         property real padding: 4
         implicitWidth: 350
         implicitHeight: 200

dots/.config/quickshell/ii/modules/overlay/volumeMixer/VolumeMixer.qml

@@ -10,6 +10,7 @@ StyledOverlayWidget {
     contentItem: Rectangle {
         anchors.centerIn: parent
         color: Appearance.m3colors.m3surfaceContainer
+        radius: root.contentRadius
         property real padding: 16
         implicitHeight: 600
         implicitWidth: 350