Refactor shadow levels to their own layer

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -89,8 +89,14 @@ Item {
             }
         }
 
+        Item {
+            id: volumeShadowLayer
+            anchors.fill: parent
+            z: -1
+
             layer.enabled: Theme.elevationEnabled
             layer.effect: MultiEffect {
+                autoPaddingEnabled: true
                 shadowEnabled: Theme.elevationEnabled
                 shadowHorizontalOffset: 0
                 shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
@@ -100,6 +106,15 @@ Item {
                 shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
             }
 
+            Rectangle {
+                anchors.fill: parent
+                radius: volumePanel.radius
+                color: volumePanel.color
+                border.color: volumePanel.border.color
+                border.width: volumePanel.border.width
+            }
+        }
+
         MouseArea {
             anchors.fill: parent
             anchors.margins: -12
@@ -224,8 +239,14 @@ Item {
             }
         }
 
+        Item {
+            id: audioDevicesShadowLayer
+            anchors.fill: parent
+            z: -1
+
             layer.enabled: Theme.elevationEnabled
             layer.effect: MultiEffect {
+                autoPaddingEnabled: true
                 shadowEnabled: Theme.elevationEnabled
                 shadowHorizontalOffset: 0
                 shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
@@ -235,6 +256,15 @@ Item {
                 shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
             }
 
+            Rectangle {
+                anchors.fill: parent
+                radius: audioDevicesPanel.radius
+                color: audioDevicesPanel.color
+                border.color: audioDevicesPanel.border.color
+                border.width: audioDevicesPanel.border.width
+            }
+        }
+
         Column {
             anchors.fill: parent
             anchors.margins: Theme.spacingM
@@ -375,8 +405,14 @@ Item {
             }
         }
 
+        Item {
+            id: playersShadowLayer
+            anchors.fill: parent
+            z: -1
+
             layer.enabled: Theme.elevationEnabled
             layer.effect: MultiEffect {
+                autoPaddingEnabled: true
                 shadowEnabled: Theme.elevationEnabled
                 shadowHorizontalOffset: 0
                 shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
@@ -386,6 +422,15 @@ Item {
                 shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
             }
 
+            Rectangle {
+                anchors.fill: parent
+                radius: playersPanel.radius
+                color: playersPanel.color
+                border.color: playersPanel.border.color
+                border.width: playersPanel.border.width
+            }
+        }
+
         Column {
             anchors.fill: parent
             anchors.margins: Theme.spacingM

quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml

@@ -32,21 +32,36 @@ Rectangle {
     height: baseCardHeight + contentItem.extraHeight
     radius: Theme.cornerRadius
     clip: false
+    readonly property bool shadowsAllowed: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
 
-    layer.enabled: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
+    Item {
+        id: shadowLayer
+        anchors.fill: parent
+        z: -1
+
+        layer.enabled: root.shadowsAllowed
         layer.effect: MultiEffect {
             autoPaddingEnabled: true
-        shadowEnabled: Theme.elevationEnabled
+            shadowEnabled: root.shadowsAllowed
             blurEnabled: false
             maskEnabled: false
-        shadowBlur: Math.max(0, Math.min(1, Theme.elevationLevel1.blurPx / Theme.elevationBlurMax))
+            shadowBlur: Math.max(0, Math.min(1, ((Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined) ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax))
             shadowScale: 1
-        shadowVerticalOffset: Theme.elevationLevel1.offsetY
+            shadowVerticalOffset: (Theme.elevationLevel1 && Theme.elevationLevel1.offsetY !== undefined) ? Theme.elevationLevel1.offsetY : 1
             shadowHorizontalOffset: 0
             blurMax: Theme.elevationBlurMax
             shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
         }
 
+        Rectangle {
+            anchors.fill: parent
+            radius: root.radius
+            color: root.color
+            border.color: root.border.color
+            border.width: root.border.width
+        }
+    }
+
     color: {
         if (isSelected && keyboardNavigationActive)
             return Theme.primaryPressed;

quickshell/Modules/Notifications/Center/NotificationCard.qml

@@ -39,7 +39,7 @@ Rectangle {
     height: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
     readonly property real targetHeight: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
     radius: Theme.cornerRadius
-    scale: (cardHoverHandler.hovered ? 1.005 : 1.0) * listLevelAdjacentScaleInfluence
+    scale: (cardHoverHandler.hovered ? 1.004 : 1.0) * listLevelAdjacentScaleInfluence
     readonly property bool shadowsAllowed: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
     readonly property var shadowElevation: Theme.elevationLevel1
     readonly property real baseShadowBlurPx: (shadowElevation && shadowElevation.blurPx !== undefined) ? shadowElevation.blurPx : 4
@@ -124,6 +124,11 @@ Rectangle {
         id: cardHoverHandler
     }
 
+    Item {
+        id: shadowLayer
+        anchors.fill: parent
+        z: -1
+
         layer.enabled: root.shadowsAllowed
         layer.effect: MultiEffect {
             autoPaddingEnabled: true
@@ -138,6 +143,15 @@ Rectangle {
             shadowColor: root.shadowElevation ? Theme.elevationShadowColor(root.shadowElevation) : "transparent"
         }
 
+        Rectangle {
+            anchors.fill: parent
+            radius: root.radius
+            color: root.color
+            border.color: root.border.color
+            border.width: root.border.width
+        }
+    }
+
     Rectangle {
         anchors.fill: parent
         radius: parent.radius

quickshell/Widgets/DankDropdown.qml

@@ -254,6 +254,8 @@ Item {
         }
 
         contentItem: Rectangle {
+            id: contentSurface
+
             LayoutMirroring.enabled: I18n.isRtl
             LayoutMirroring.childrenInherit: true
             color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1)
@@ -261,6 +263,11 @@ Item {
             border.width: 2
             radius: Theme.cornerRadius
 
+            Item {
+                id: shadowLayer
+                anchors.fill: parent
+                z: -1
+
                 layer.enabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
                 layer.effect: MultiEffect {
                     autoPaddingEnabled: true
@@ -273,6 +280,15 @@ Item {
                     shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
                 }
 
+                Rectangle {
+                    anchors.fill: parent
+                    radius: contentSurface.radius
+                    color: contentSurface.color
+                    border.color: contentSurface.border.color
+                    border.width: contentSurface.border.width
+                }
+            }
+
             Column {
                 anchors.fill: parent
                 anchors.margins: Theme.spacingS

quickshell/Widgets/DankIconPicker.qml

@@ -132,9 +132,15 @@ Rectangle {
         }
 
         contentItem: Rectangle {
+            id: contentSurface
             color: Theme.surface
             radius: Theme.cornerRadius
 
+            Item {
+                id: shadowLayer
+                anchors.fill: parent
+                z: -1
+
                 layer.enabled: Theme.elevationEnabled
                 layer.effect: MultiEffect {
                     autoPaddingEnabled: true
@@ -147,6 +153,13 @@ Rectangle {
                     shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
                 }
 
+                Rectangle {
+                    anchors.fill: parent
+                    radius: contentSurface.radius
+                    color: contentSurface.color
+                }
+            }
+
             Rectangle {
                 width: 24
                 height: 24