blur: revise general blur styling and refine it

quickshell/Common/Theme.qml

@@ -549,8 +549,8 @@ Singleton {
     property color success: currentThemeData.success || "#4CAF50"
 
     property color primaryHover: Qt.rgba(primary.r, primary.g, primary.b, 0.12)
-    property color primaryHoverLight: Qt.rgba(primary.r, primary.g, primary.b, 0.08)
+    property color primaryHoverLight: Qt.rgba(primary.r, primary.g, primary.b, BlurService.enabled ? 0.12 : 0.08)
-    property color primaryPressed: Qt.rgba(primary.r, primary.g, primary.b, 0.16)
+    property color primaryPressed: Qt.rgba(primary.r, primary.g, primary.b, BlurService.enabled ? 0.24 : 0.16)
     property color primarySelected: Qt.rgba(primary.r, primary.g, primary.b, 0.3)
     property color primaryBackground: Qt.rgba(primary.r, primary.g, primary.b, 0.04)
 
@@ -559,8 +559,10 @@ Singleton {
     property color surfaceHover: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.08)
     property color surfacePressed: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.12)
     property color surfaceSelected: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.15)
-    property color surfaceLight: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.1)
+    property color surfaceLight: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, BlurService.enabled ? 0.3 : 0.1)
     property color surfaceVariantAlpha: Qt.rgba(surfaceVariant.r, surfaceVariant.g, surfaceVariant.b, 0.2)
+
+    readonly property color nestedSurface: BlurService.enabled ? "transparent" : withAlpha(surfaceContainerHigh, popupTransparency)
     property color surfaceTextHover: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.08)
     property color surfaceTextAlpha: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.3)
     property color surfaceTextLight: Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.06)
@@ -568,8 +570,8 @@ Singleton {
 
     property color outlineButton: Qt.rgba(outline.r, outline.g, outline.b, 0.5)
     property color outlineLight: Qt.rgba(outline.r, outline.g, outline.b, 0.05)
-    property color outlineMedium: Qt.rgba(outline.r, outline.g, outline.b, 0.08)
+    property color outlineMedium: Qt.rgba(outline.r, outline.g, outline.b, BlurService.enabled ? 0 : 0.08)
-    property color outlineStrong: Qt.rgba(outline.r, outline.g, outline.b, 0.12)
+    property color outlineStrong: Qt.rgba(outline.r, outline.g, outline.b, BlurService.enabled ? 0 : 0.12)
 
     property color errorHover: Qt.rgba(error.r, error.g, error.b, 0.12)
     property color errorPressed: Qt.rgba(error.r, error.g, error.b, 0.16)
@@ -614,6 +616,8 @@ Singleton {
     }
 
     readonly property color ccTileRing: {
+        if (BlurService.enabled)
+            return "transparent";
         switch (SettingsData.controlCenterTileColorMode) {
         case "primaryContainer":
             return Qt.rgba(primary.r, primary.g, primary.b, 0.22);

quickshell/Modals/Common/DankModal.qml

@@ -415,7 +415,7 @@ Item {
                         targetColor: root.backgroundColor
                         borderColor: root.borderColor
                         borderWidth: root.borderWidth
-                        shadowEnabled: root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
+                        shadowEnabled: root.enableShadow && Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !BlurService.enabled
                     }
 
                     Rectangle {

quickshell/Modals/DankLauncherV2/DankLauncherV2Modal.qml

@@ -417,7 +417,7 @@ Item {
                 borderColor: root.borderColor
                 borderWidth: root.borderWidth
                 targetRadius: root.cornerRadius
-                shadowEnabled: Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
+                shadowEnabled: Theme.elevationEnabled && SettingsData.modalElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !BlurService.enabled
             }
 
             MouseArea {

quickshell/Modals/DankLauncherV2/ResultsList.qml

@@ -58,9 +58,9 @@ Item {
                         item: items[i],
                         flatIndex: flatIdx,
                         sectionId: sectionId,
-                        height: 52
+                        height: 56
                     });
-                    cumY += 52;
+                    cumY += 56;
                 }
             } else {
                 var cols = root.controller?.getGridColumns(sectionId) ?? root.gridColumns;
@@ -190,9 +190,17 @@ Item {
         }
     }
 
+    Item {
+        id: listClip
+        anchors.fill: parent
+        anchors.topMargin: BlurService.enabled && stickyHeader.visible ? 32 : 0
+        clip: true
+
         DankListView {
             id: mainListView
-        anchors.fill: parent
+            y: -listClip.anchors.topMargin
+            width: parent.width
+            height: parent.height + listClip.anchors.topMargin
             clip: true
             scrollBarTopMargin: (root.controller?.sections?.length > 0) ? 32 : 0
 
@@ -234,6 +242,8 @@ Item {
 
                 ResultItem {
                     anchors.fill: parent
+                    anchors.topMargin: 2
+                    anchors.bottomMargin: 2
                     visible: delegateRoot.modelData?.type === "list_item"
                     item: delegateRoot.modelData?.type === "list_item" ? (delegateRoot.modelData?.item ?? null) : null
                     isSelected: delegateRoot.modelData?.type === "list_item" && (delegateRoot.modelData?.flatIndex ?? -1) === root.controller?.selectedFlatIndex
@@ -315,6 +325,7 @@ Item {
                 }
             }
         }
+    }
 
     Rectangle {
         id: bottomShadow
@@ -365,7 +376,7 @@ Item {
         anchors.top: parent.top
         height: 32
         z: 101
-        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        color: BlurService.enabled ? "transparent" : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
         visible: stickyHeaderSection !== null
 
         readonly property int versionTrigger: root.controller?.viewModeVersion ?? 0

quickshell/Modals/DankLauncherV2/Section.qml

@@ -50,7 +50,7 @@ Item {
             id: listComponent
 
             Column {
-                spacing: 2
+                spacing: 4
                 width: contentLoader.width
 
                 Repeater {

quickshell/Modules/ControlCenter/Components/ActionTile.qml

@@ -31,7 +31,7 @@ Rectangle {
     readonly property color _tileRingActive: Theme.ccTileRing
 
     color: isActive ? _tileBgActive : _tileBgInactive
-    border.color: isActive ? _tileRingActive : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: isActive ? _tileRingActive : Theme.outlineMedium
     border.width: isActive ? 1 : 1
     opacity: enabled ? 1.0 : 0.6
 

quickshell/Modules/ControlCenter/Components/HeaderPane.qml

@@ -22,7 +22,7 @@ Rectangle {
     implicitHeight: 70
     radius: Theme.cornerRadius
     color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
     border.width: 0
 
     Row {

quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml

@@ -154,7 +154,7 @@ Item {
         height: contentColumn.implicitHeight + Theme.spacingL * 2
         radius: Theme.cornerRadius
         color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+        border.color: Theme.outlineMedium
         border.width: 0
         opacity: modalVisible ? 1 : 0
         scale: modalVisible ? 1 : 0.9

quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml

@@ -21,7 +21,7 @@ Rectangle {
     }
     radius: Theme.cornerRadius
     color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
     border.width: 0
 
     property var bluetoothCodecModalRef: null
@@ -115,7 +115,7 @@ Rectangle {
             height: 36
             radius: 18
             color: scanMouseArea.containsMouse && adapterEnabled ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : "transparent"
-            border.color: adapterEnabled ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+            border.color: adapterEnabled ? Theme.primary : Theme.outlineStrong
             border.width: 0
             visible: adapterEnabled
 
@@ -434,7 +434,7 @@ Rectangle {
             Rectangle {
                 width: parent.width
                 height: 1
-                color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                color: Theme.outlineStrong
                 visible: pairedRepeater.count > 0 && availableRepeater.count > 0
             }
 
@@ -609,7 +609,7 @@ Rectangle {
             color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
             radius: Theme.cornerRadius
             border.width: 0
-            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+            border.color: Theme.outlineStrong
         }
 
         MenuItem {

quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml

@@ -17,7 +17,7 @@ Rectangle {
     implicitHeight: diskContent.height + Theme.spacingM
     radius: Theme.cornerRadius
     color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
     border.width: 0
 
     Component.onCompleted: {

quickshell/Modules/ControlCenter/Details/DoNotDisturbDetail.qml

@@ -11,7 +11,7 @@ Rectangle {
     implicitHeight: contentColumn.implicitHeight + Theme.spacingL * 2
     radius: Theme.cornerRadius
     color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
     border.width: 0
 
     property real nowMs: Date.now()
@@ -150,7 +150,7 @@ Rectangle {
                     height: 36
                     radius: Theme.cornerRadius
                     color: presetArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                    border.color: Theme.outlineStrong
                     border.width: 1
 
                     StyledText {
@@ -184,7 +184,7 @@ Rectangle {
                 height: 36
                 radius: Theme.cornerRadius
                 color: foreverArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.16) : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                border.color: Theme.outlineStrong
                 border.width: 1
 
                 Row {
@@ -222,7 +222,7 @@ Rectangle {
                 radius: Theme.cornerRadius
                 visible: SessionData.doNotDisturb
                 color: offArea.containsMouse ? Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.18) : Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12)
+                border.color: Theme.outlineStrong
                 border.width: 1
 
                 Row {

quickshell/Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -29,7 +29,7 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
     }
 
-    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _containerBg: Theme.nestedSurface
 
     color: {
         const baseColor = bodyMouse.containsMouse ? Theme.primaryPressed : _containerBg;

quickshell/Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -28,7 +28,7 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.ccTileActiveBg
-    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBgInactive: Theme.nestedSurface
     readonly property color _tileRingActive: Theme.ccTileRing
     readonly property color _tileIconActive: Theme.ccTileActiveText
     readonly property color _tileIconInactive: Theme.ccTileInactiveIcon

quickshell/Modules/ControlCenter/Widgets/SmallDiskUsageButton.qml

@@ -38,7 +38,7 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
     }
 
-    readonly property color _tileBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBg: Theme.nestedSurface
 
     color: mouseArea.containsMouse ? Theme.primaryPressed : _tileBg
     border.color: "transparent"

quickshell/Modules/ControlCenter/Widgets/ToggleButton.qml

@@ -26,7 +26,7 @@ Rectangle {
     }
 
     readonly property color _tileBgActive: Theme.ccTileActiveBg
-    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileBgInactive: Theme.nestedSurface
     readonly property color _tileRingActive: Theme.ccTileRing
 
     color: {
@@ -44,7 +44,7 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
     }
 
-    readonly property color _containerBg: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _containerBg: Theme.nestedSurface
 
     Rectangle {
         anchors.fill: parent

quickshell/Modules/DankBar/BarCanvas.qml

@@ -55,7 +55,7 @@ Item {
     // M3 elevation shadow — Level 2 baseline (navigation bar), with per-bar override support
     readonly property bool hasPerBarOverride: (barConfig?.shadowIntensity ?? 0) > 0
     readonly property var elevLevel: Theme.elevationLevel2
-    readonly property bool shadowEnabled: (Theme.elevationEnabled && (typeof SettingsData !== "undefined" ? (SettingsData.barElevationEnabled ?? true) : false)) || hasPerBarOverride
+    readonly property bool shadowEnabled: !BlurService.enabled && ((Theme.elevationEnabled && (typeof SettingsData !== "undefined" ? (SettingsData.barElevationEnabled ?? true) : false)) || hasPerBarOverride)
     readonly property string autoBarShadowDirection: isTop ? "top" : (isBottom ? "bottom" : (isLeft ? "left" : (isRight ? "right" : "top")))
     readonly property string globalShadowDirection: Theme.elevationLightDirection === "autoBar" ? autoBarShadowDirection : Theme.elevationLightDirection
     readonly property string perBarShadowDirectionMode: barConfig?.shadowDirectionMode ?? "inherit"

quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml

@@ -1178,7 +1178,7 @@ BasePill {
                 targetRadius: Theme.cornerRadius
                 sourceRect.antialiasing: true
                 sourceRect.smooth: true
-                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
+                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && !BlurService.enabled
                 layer.smooth: true
                 layer.textureSize: Qt.size(Math.round(width * overflowMenu.dpr * 2), Math.round(height * overflowMenu.dpr * 2))
                 layer.textureMirroring: ShaderEffectSource.MirrorVertically
@@ -1627,7 +1627,7 @@ BasePill {
                         targetColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
                         targetRadius: Theme.cornerRadius
                         sourceRect.antialiasing: true
-                        shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
+                        shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && !BlurService.enabled
                         layer.smooth: true
                         layer.textureSize: Qt.size(Math.round(width * menuWindow.dpr), Math.round(height * menuWindow.dpr))
                         layer.textureMirroring: ShaderEffectSource.MirrorVertically

quickshell/Modules/DankDash/DankDashPopout.qml

@@ -82,6 +82,7 @@ DankPopout {
             isRightEdge: root.__dropdownRightEdge
             activePlayer: root.__dropdownPlayer
             allPlayers: root.__dropdownPlayers
+            targetWindow: root.backgroundWindow
             onCloseRequested: root.__hideDropdowns()
             onPanelEntered: root.__stopCloseTimer()
             onPanelExited: root.__startCloseTimer()

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -15,6 +15,7 @@ Item {
     property var allPlayers: []
     property point anchorPos: Qt.point(0, 0)
     property bool isRightEdge: false
+    property var targetWindow: null
 
     property bool __isChromeBrowser: {
         if (!activePlayer?.identity)
@@ -56,6 +57,30 @@ Item {
         });
     }
 
+    readonly property Item __activePanel: {
+        switch (dropdownType) {
+        case 1:
+            return volumePanel;
+        case 2:
+            return audioDevicesPanel;
+        case 3:
+            return playersPanel;
+        default:
+            return null;
+        }
+    }
+
+    WindowBlur {
+        targetWindow: root.targetWindow
+        readonly property bool active: root.__activePanel !== null && root.__activePanel.visible && root.__activePanel.opacity > 0
+        readonly property real s: root.__activePanel ? Math.min(1, root.__activePanel.scale) : 1
+        blurX: root.__activePanel ? root.__activePanel.x + root.__activePanel.width * (1 - s) * 0.5 : 0
+        blurY: root.__activePanel ? root.__activePanel.y + root.__activePanel.height * (1 - s) * 0.5 : 0
+        blurWidth: active ? root.__activePanel.width * s : 0
+        blurHeight: active ? root.__activePanel.height * s : 0
+        blurRadius: Theme.cornerRadius * 2
+    }
+
     Rectangle {
         id: volumePanel
         visible: dropdownType === 1 && volumeAvailable
@@ -64,8 +89,8 @@ Item {
         x: isRightEdge ? anchorPos.x : anchorPos.x - width
         y: anchorPos.y - height / 2
         radius: Theme.cornerRadius * 2
-        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.95)
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+        border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
         border.width: 1
 
         opacity: dropdownType === 1 ? 1 : 0
@@ -99,7 +124,7 @@ Item {
             borderColor: volumePanel.border.color
             borderWidth: volumePanel.border.width
             shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-            shadowEnabled: Theme.elevationEnabled
+            shadowEnabled: Theme.elevationEnabled && !BlurService.enabled
         }
 
         MouseArea {
@@ -126,23 +151,26 @@ Item {
                     width: parent.width
                     height: parent.height
                     anchors.centerIn: parent
-                    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                    color: Theme.withAlpha(Theme.outline, Theme.popupTransparency)
                     radius: Theme.cornerRadius
                 }
 
                 Rectangle {
+                    readonly property real ratio: volumeAvailable ? Math.min(1.0, currentVolume) : 0
+                    readonly property real thumbHeight: 4
                     width: parent.width
-                    height: volumeAvailable ? (Math.min(1.0, currentVolume) * parent.height) : 0
+                    height: Math.max(0, ratio * (parent.height - thumbHeight) - 3)
                     anchors.bottom: parent.bottom
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: Theme.primary
-                    bottomLeftRadius: Theme.cornerRadius
+                    radius: Theme.cornerRadius
-                    bottomRightRadius: Theme.cornerRadius
+                    topLeftRadius: 0
+                    topRightRadius: 0
                 }
 
                 Rectangle {
                     width: parent.width + 8
-                    height: 8
+                    height: 4
                     radius: Theme.cornerRadius
                     y: {
                         const ratio = volumeAvailable ? Math.min(1.0, currentVolume) : 0;
@@ -151,8 +179,7 @@ Item {
                     }
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: Theme.primary
-                    border.width: 3
+                    border.width: 0
-                    border.color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1.0)
                 }
 
                 MouseArea {
@@ -202,8 +229,8 @@ Item {
         x: isRightEdge ? anchorPos.x : anchorPos.x - width
         y: anchorPos.y - height / 2
         radius: Theme.cornerRadius * 2
-        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
+        border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
         border.width: 2
 
         opacity: dropdownType === 2 ? 1 : 0
@@ -237,7 +264,7 @@ Item {
             borderColor: audioDevicesPanel.border.color
             borderWidth: audioDevicesPanel.border.width
             shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-            shadowEnabled: Theme.elevationEnabled
+            shadowEnabled: Theme.elevationEnabled && !BlurService.enabled
         }
 
         Column {
@@ -356,8 +383,8 @@ Item {
         x: isRightEdge ? anchorPos.x : anchorPos.x - width
         y: anchorPos.y - height / 2
         radius: Theme.cornerRadius * 2
-        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98)
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
+        border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
         border.width: 2
 
         opacity: dropdownType === 3 ? 1 : 0
@@ -391,7 +418,7 @@ Item {
             borderColor: playersPanel.border.color
             borderWidth: playersPanel.border.width
             shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-            shadowEnabled: Theme.elevationEnabled
+            shadowEnabled: Theme.elevationEnabled && !BlurService.enabled
         }
 
         Column {

quickshell/Modules/DankDash/MediaPlayerTab.qml

@@ -2,7 +2,6 @@ import QtQuick
 import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell.Services.Mpris
-import Quickshell.Io
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -629,7 +628,7 @@ Item {
         x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
         y: 185
         color: playerSelectorArea.containsMouse || playersExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+        border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
         border.width: 1
         z: 100
         visible: (allPlayers?.length || 0) >= 1
@@ -672,7 +671,7 @@ Item {
         x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
         y: 130
         color: volumeButtonArea.containsMouse && volumeAvailable || volumeExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, volumeAvailable ? 0.3 : 0.15)
+        border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, volumeAvailable ? 0.3 : 0.15)
         border.width: 1
         z: 101
         enabled: volumeAvailable
@@ -749,7 +748,7 @@ Item {
         x: isRightEdge ? Theme.spacingM : parent.width - 40 - Theme.spacingM
         y: 240
         color: audioDevicesArea.containsMouse || devicesExpanded ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : "transparent"
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+        border.color: BlurService.enabled ? "transparent" : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
         border.width: 1
         z: 100
 

quickshell/Modules/DankDash/Overview/Card.qml

@@ -10,8 +10,8 @@ Rectangle {
     property int pad: Theme.spacingM
 
     radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: Theme.nestedSurface
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    border.color: Theme.outlineMedium
     border.width: 1
 
     default property alias content: contentItem.data

quickshell/Modules/DankDash/WeatherForecastCard.qml

@@ -103,7 +103,7 @@ Rectangle {
         }
     ]
 
-    color: isCurrent ? Theme.withAlpha(Theme.primary, 0.1) : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    color: isCurrent ? Theme.withAlpha(Theme.primary, 0.1) : Theme.nestedSurface
     border.color: isCurrent ? Theme.withAlpha(Theme.primary, 0.3) : "transparent"
     border.width: isCurrent ? 1 : 0
 

quickshell/Modules/DankDash/WeatherTab.qml

@@ -213,8 +213,8 @@ Item {
             width: parent.width
             height: heroContent.height + Theme.spacingL * 2
             radius: Theme.cornerRadius
-            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+            color: Theme.nestedSurface
-            border.color: Theme.withAlpha(Theme.outline, 0.08)
+            border.color: Theme.outlineMedium
             border.width: 1
 
             Column {

quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import Quickshell
 import qs.Common
 import qs.Services
@@ -137,12 +136,10 @@ Rectangle {
                     return "";
                 const appIcon = historyItem.appIcon;
                 if (!appIcon)
-                    return iconFromImage ? Paths.resolveIconUrl(iconFromImage) : "";
+                    return "";
                 if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://") || appIcon.includes("/"))
                     return appIcon;
-                if (appIcon.startsWith("material:") || appIcon.startsWith("svg:") || appIcon.startsWith("unicode:") || appIcon.startsWith("image:"))
                 return "";
-                return Paths.resolveIconPath(appIcon);
             }
 
             hasImage: hasNotificationImage

quickshell/Modules/Notifications/Center/NotificationCard.qml

@@ -1,6 +1,5 @@
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Effects
 import Quickshell
 import Quickshell.Services.Notifications
 import qs.Common
@@ -215,12 +214,10 @@ Rectangle {
                     return "";
                 const appIcon = notificationGroup?.latestNotification?.appIcon;
                 if (!appIcon)
-                    return iconFromImage ? Paths.resolveIconUrl(iconFromImage) : "";
+                    return "";
                 if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://") || appIcon.includes("/"))
                     return appIcon;
-                if (appIcon.startsWith("material:") || appIcon.startsWith("svg:") || appIcon.startsWith("unicode:") || appIcon.startsWith("image:"))
                 return "";
-                return Paths.resolveIconPath(appIcon);
             }
 
             hasImage: hasNotificationImage
@@ -552,12 +549,10 @@ Rectangle {
                                         return "";
                                     const appIcon = modelData?.appIcon;
                                     if (!appIcon)
-                                        return iconFromImage ? Paths.resolveIconUrl(iconFromImage) : "";
+                                        return "";
                                     if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://") || appIcon.includes("/"))
                                         return appIcon;
-                                    if (appIcon.startsWith("material:") || appIcon.startsWith("svg:") || appIcon.startsWith("unicode:") || appIcon.startsWith("image:"))
                                     return "";
-                                    return Paths.resolveIconPath(appIcon);
                                 }
 
                                 fallbackIcon: {

quickshell/Modules/Notifications/Popup/NotificationPopup.qml

@@ -360,7 +360,7 @@ PanelWindow {
         readonly property bool swipeActive: swipeDragHandler.active
         property bool swipeDismissing: false
 
-        readonly property bool shadowsAllowed: Theme.elevationEnabled && SettingsData.notificationPopupShadowEnabled
+        readonly property bool shadowsAllowed: Theme.elevationEnabled && SettingsData.notificationPopupShadowEnabled && !BlurService.enabled
         readonly property var elevLevel: cardHoverHandler.hovered ? Theme.elevationLevel4 : Theme.elevationLevel3
         readonly property real cardInset: Theme.snap(4, win.dpr)
         readonly property real shadowRenderPadding: shadowsAllowed ? Theme.snap(Math.max(16, shadowBlurPx + Math.max(Math.abs(shadowOffsetX), Math.abs(shadowOffsetY)) + 8), win.dpr) : 0
@@ -537,12 +537,10 @@ PanelWindow {
                             return "";
                         const appIcon = notificationData.appIcon;
                         if (!appIcon)
-                            return iconFromImage ? Paths.resolveIconUrl(iconFromImage) : "";
+                            return "";
                         if (appIcon.startsWith("file://") || appIcon.startsWith("http://") || appIcon.startsWith("https://") || appIcon.includes("/"))
                             return appIcon;
-                        if (appIcon.startsWith("material:") || appIcon.startsWith("svg:") || appIcon.startsWith("unicode:") || appIcon.startsWith("image:"))
                         return "";
-                        return Paths.resolveIconPath(appIcon);
                     }
 
                     hasImage: hasNotificationImage

quickshell/Modules/WorkspaceOverlays/NiriOverviewOverlay.qml

@@ -5,6 +5,7 @@ import Quickshell.Wayland
 import qs.Common
 import qs.Modals.DankLauncherV2
 import qs.Services
+import qs.Widgets
 
 Scope {
     id: niriOverviewScope
@@ -124,6 +125,17 @@ Scope {
                     item: overlayVisible && spotlightContainer.visible ? spotlightContainer : null
                 }
 
+                WindowBlur {
+                    targetWindow: overlayWindow
+                    readonly property real s: Math.min(1, spotlightContainer.scale)
+                    readonly property bool active: spotlightContainer.visible && spotlightContainer.opacity > 0
+                    blurX: spotlightContainer.x + spotlightContainer.width * (1 - s) * 0.5
+                    blurY: spotlightContainer.y + spotlightContainer.height * (1 - s) * 0.5
+                    blurWidth: active ? spotlightContainer.width * s : 0
+                    blurHeight: active ? spotlightContainer.height * s : 0
+                    blurRadius: Theme.cornerRadius
+                }
+
                 onShouldShowSpotlightChanged: {
                     if (shouldShowSpotlight) {
                         if (launcherContent?.controller) {

quickshell/Widgets/DankPopout.qml

@@ -12,6 +12,7 @@ Item {
     property alias contentLoader: contentLoader
     property Component overlayContent: null
     property alias overlayLoader: overlayLoader
+    readonly property alias backgroundWindow: backgroundWindow
     property real popupWidth: 400
     property real popupHeight: 300
     property real triggerX: 0
@@ -550,7 +551,7 @@ Item {
                 fallbackOffset: root.shadowFallbackOffset
                 targetRadius: Theme.cornerRadius
                 targetColor: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
+                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive) && !BlurService.enabled
             }
 
             Item {

quickshell/Widgets/DankSlider.qml

@@ -63,7 +63,7 @@ Item {
             width: parent.width - (leftIconWidth + rightIconWidth + (slider.leftIcon.length > 0 ? Theme.spacingM : 0) + (slider.rightIcon.length > 0 ? Theme.spacingM : 0))
             height: 12
             radius: Theme.cornerRadius
-            color: slider.trackColor
+            color: Theme.withAlpha(slider.trackColor, Theme.popupTransparency)
             anchors.verticalCenter: parent.verticalCenter
             clip: false
 
@@ -71,13 +71,16 @@ Item {
                 id: sliderFill
                 height: parent.height
                 radius: Theme.cornerRadius
+                topRightRadius: 0
+                bottomRightRadius: 0
                 width: {
                     const range = slider.maximum - slider.minimum;
                     const rawRatio = range === 0 ? 0 : (slider.value - slider.minimum) / range;
                     const ratio = slider.centerMinimum ? (0.5 + rawRatio * 0.5) : rawRatio;
                     const travel = sliderTrack.width - sliderHandle.width;
-                    const center = (travel * ratio) + sliderHandle.width / 2;
+                    const handleLeft = travel * ratio;
-                    return Math.max(0, Math.min(sliderTrack.width, center));
+                    const endPoint = handleLeft - 3;
+                    return Math.max(0, Math.min(sliderTrack.width, endPoint));
                 }
                 color: slider.enabled ? Theme.primary : Theme.withAlpha(Theme.onSurface, 0.12)
             }
@@ -87,8 +90,8 @@ Item {
 
                 property bool active: sliderMouseArea.containsMouse || sliderMouseArea.pressed || slider.isDragging
 
-                width: 8
+                width: 4
-                height: 24
+                height: 20
                 radius: Theme.cornerRadius
                 x: {
                     const range = slider.maximum - slider.minimum;
@@ -99,7 +102,7 @@ Item {
                 }
                 anchors.verticalCenter: parent.verticalCenter
                 color: slider.enabled ? Theme.primary : Theme.withAlpha(Theme.onSurface, 0.12)
-                border.width: 3
+                border.width: 0
                 border.color: slider.thumbOutlineColor
 
                 StyledRect {