Refactor shadow levels to their own layer

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -89,15 +89,30 @@ Item {
             }
         }
 
-        layer.enabled: Theme.elevationEnabled
+        Item {
-        layer.effect: MultiEffect {
+            id: volumeShadowLayer
-            shadowEnabled: Theme.elevationEnabled
+            anchors.fill: parent
-            shadowHorizontalOffset: 0
+            z: -1
-            shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+
-            shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+            layer.enabled: Theme.elevationEnabled
-            blurMax: Theme.elevationBlurMax
+            layer.effect: MultiEffect {
-            shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                autoPaddingEnabled: true
-            shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+                shadowEnabled: Theme.elevationEnabled
+                shadowHorizontalOffset: 0
+                shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+                shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+                blurMax: Theme.elevationBlurMax
+                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                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 {
@@ -224,15 +239,30 @@ Item {
             }
         }
 
-        layer.enabled: Theme.elevationEnabled
+        Item {
-        layer.effect: MultiEffect {
+            id: audioDevicesShadowLayer
-            shadowEnabled: Theme.elevationEnabled
+            anchors.fill: parent
-            shadowHorizontalOffset: 0
+            z: -1
-            shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+
-            shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+            layer.enabled: Theme.elevationEnabled
-            blurMax: Theme.elevationBlurMax
+            layer.effect: MultiEffect {
-            shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                autoPaddingEnabled: true
-            shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+                shadowEnabled: Theme.elevationEnabled
+                shadowHorizontalOffset: 0
+                shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+                shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+                blurMax: Theme.elevationBlurMax
+                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                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 {
@@ -375,15 +405,30 @@ Item {
             }
         }
 
-        layer.enabled: Theme.elevationEnabled
+        Item {
-        layer.effect: MultiEffect {
+            id: playersShadowLayer
-            shadowEnabled: Theme.elevationEnabled
+            anchors.fill: parent
-            shadowHorizontalOffset: 0
+            z: -1
-            shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+
-            shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+            layer.enabled: Theme.elevationEnabled
-            blurMax: Theme.elevationBlurMax
+            layer.effect: MultiEffect {
-            shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                autoPaddingEnabled: true
-            shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+                shadowEnabled: Theme.elevationEnabled
+                shadowHorizontalOffset: 0
+                shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+                shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+                blurMax: Theme.elevationBlurMax
+                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                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 {

quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml

@@ -32,19 +32,34 @@ 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 {
-    layer.effect: MultiEffect {
+        id: shadowLayer
-        autoPaddingEnabled: true
+        anchors.fill: parent
-        shadowEnabled: Theme.elevationEnabled
+        z: -1
-        blurEnabled: false
+
-        maskEnabled: false
+        layer.enabled: root.shadowsAllowed
-        shadowBlur: Math.max(0, Math.min(1, Theme.elevationLevel1.blurPx / Theme.elevationBlurMax))
+        layer.effect: MultiEffect {
-        shadowScale: 1
+            autoPaddingEnabled: true
-        shadowVerticalOffset: Theme.elevationLevel1.offsetY
+            shadowEnabled: root.shadowsAllowed
-        shadowHorizontalOffset: 0
+            blurEnabled: false
-        blurMax: Theme.elevationBlurMax
+            maskEnabled: false
-        shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
+            shadowBlur: Math.max(0, Math.min(1, ((Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined) ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax))
+            shadowScale: 1
+            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: {

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,18 +124,32 @@ Rectangle {
         id: cardHoverHandler
     }
 
-    layer.enabled: root.shadowsAllowed
+    Item {
-    layer.effect: MultiEffect {
+        id: shadowLayer
-        autoPaddingEnabled: true
+        anchors.fill: parent
-        shadowEnabled: root.shadowsAllowed
+        z: -1
-        blurEnabled: false
+
-        maskEnabled: false
+        layer.enabled: root.shadowsAllowed
-        shadowBlur: Math.max(0, Math.min(1, root.shadowBlurPx / Theme.elevationBlurMax))
+        layer.effect: MultiEffect {
-        shadowScale: 1
+            autoPaddingEnabled: true
-        shadowVerticalOffset: root.shadowOffsetYPx
+            shadowEnabled: root.shadowsAllowed
-        shadowHorizontalOffset: 0
+            blurEnabled: false
-        blurMax: Theme.elevationBlurMax
+            maskEnabled: false
-        shadowColor: root.shadowElevation ? Theme.elevationShadowColor(root.shadowElevation) : "transparent"
+            shadowBlur: Math.max(0, Math.min(1, root.shadowBlurPx / Theme.elevationBlurMax))
+            shadowScale: 1
+            shadowVerticalOffset: root.shadowOffsetYPx
+            shadowHorizontalOffset: 0
+            blurMax: Theme.elevationBlurMax
+            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 {

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,16 +263,30 @@ Item {
             border.width: 2
             radius: Theme.cornerRadius
 
-            layer.enabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
+            Item {
-            layer.effect: MultiEffect {
+                id: shadowLayer
-                autoPaddingEnabled: true
+                anchors.fill: parent
-                blurEnabled: false
+                z: -1
-                maskEnabled: false
+
-                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
+                layer.enabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
-                shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+                layer.effect: MultiEffect {
-                blurMax: Theme.elevationBlurMax
+                    autoPaddingEnabled: true
-                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                    blurEnabled: false
-                shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+                    maskEnabled: false
+                    shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
+                    shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+                    blurMax: Theme.elevationBlurMax
+                    shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                    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 {

quickshell/Widgets/DankIconPicker.qml

@@ -132,19 +132,32 @@ Rectangle {
         }
 
         contentItem: Rectangle {
+            id: contentSurface
             color: Theme.surface
             radius: Theme.cornerRadius
 
-            layer.enabled: Theme.elevationEnabled
+            Item {
-            layer.effect: MultiEffect {
+                id: shadowLayer
-                autoPaddingEnabled: true
+                anchors.fill: parent
-                shadowEnabled: Theme.elevationEnabled
+                z: -1
-                blurMax: Theme.elevationBlurMax
+
-                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                layer.enabled: Theme.elevationEnabled
-                shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+                layer.effect: MultiEffect {
-                shadowHorizontalOffset: 0
+                    autoPaddingEnabled: true
-                shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+                    shadowEnabled: Theme.elevationEnabled
-                shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+                    blurMax: Theme.elevationBlurMax
+                    shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
+                    shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
+                    shadowHorizontalOffset: 0
+                    shadowVerticalOffset: Theme.elevationLevel2 && Theme.elevationLevel2.offsetY !== undefined ? Theme.elevationLevel2.offsetY : 4
+                    shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
+                }
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: contentSurface.radius
+                    color: contentSurface.color
+                }
             }
 
             Rectangle {