blur: revise general blur styling and refine it

cherry-pick of 1abb2210 from master, translated to hotfix-1.4.5 (omits ElevationShadow gating since shadow overhaul isn't on this branch; gates existing MultiEffect-based shadows by BlurService.enabled instead). Drops DoNotDisturbDetail.qml hunk since the file does not exist on this branch.
2026-05-02 10:32:07 -04:00 · 2026-04-25 11:15:01 -04:00
parent 6b15670918
commit e75b95b854
26 changed files with 221 additions and 170 deletions
--- a/quickshell/Common/Theme.qml
+++ b/quickshell/Common/Theme.qml
@@ -561,8 +561,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 primaryPressed: Qt.rgba(primary.r, primary.g, primary.b, 0.16)
+    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, 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)

@@ -571,8 +571,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)
@@ -580,8 +582,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 outlineStrong: Qt.rgba(outline.r, outline.g, outline.b, 0.12)
+    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, 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)
@@ -626,6 +628,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);
--- a/quickshell/Modals/DankLauncherV2/ResultsList.qml
+++ b/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
--- a/quickshell/Modals/DankLauncherV2/Section.qml
+++ b/quickshell/Modals/DankLauncherV2/Section.qml
@@ -50,7 +50,7 @@ Item {
            id: listComponent

            Column {
-                spacing: 2
+                spacing: 4
                width: contentLoader.width

                Repeater {
--- a/quickshell/Modules/ControlCenter/Components/ActionTile.qml
+++ b/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

--- a/quickshell/Modules/ControlCenter/Components/HeaderPane.qml
+++ b/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 {
--- a/quickshell/Modules/ControlCenter/Details/BluetoothCodecSelector.qml
+++ b/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
--- a/quickshell/Modules/ControlCenter/Details/BluetoothDetail.qml
+++ b/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 {
--- a/quickshell/Modules/ControlCenter/Details/DiskUsageDetail.qml
+++ b/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: {
--- a/quickshell/Modules/ControlCenter/Widgets/CompoundPill.qml
+++ b/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;
--- a/quickshell/Modules/ControlCenter/Widgets/SmallBatteryButton.qml
+++ b/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
--- a/quickshell/Modules/ControlCenter/Widgets/SmallDiskUsageButton.qml
+++ b/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"
--- a/quickshell/Modules/ControlCenter/Widgets/ToggleButton.qml
+++ b/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
--- a/quickshell/Modules/DankBar/BarCanvas.qml
+++ b/quickshell/Modules/DankBar/BarCanvas.qml
@@ -54,7 +54,7 @@ Item {
    }

    readonly property real shadowIntensity: barConfig?.shadowIntensity ?? 0
-    readonly property bool shadowEnabled: shadowIntensity > 0
+    readonly property bool shadowEnabled: !BlurService.enabled && shadowIntensity > 0
    readonly property int blurMax: 64
    readonly property real shadowBlurPx: shadowIntensity * 0.2
    readonly property real shadowBlur: Math.max(0, Math.min(1, shadowBlurPx / blurMax))
--- a/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
+++ b/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
@@ -976,7 +976,7 @@ BasePill {
            Item {
                id: bgShadowLayer
                anchors.fill: parent
-                layer.enabled: true
+                layer.enabled: !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
@@ -1466,7 +1466,7 @@ BasePill {
                    Item {
                        id: menuBgShadowLayer
                        anchors.fill: parent
-                        layer.enabled: true
+                        layer.enabled: !BlurService.enabled
                        layer.smooth: true
                        layer.textureSize: Qt.size(Math.round(width * menuWindow.dpr), Math.round(height * menuWindow.dpr))
                        layer.textureMirroring: ShaderEffectSource.MirrorVertically
--- a/quickshell/Modules/DankDash/DankDashPopout.qml
+++ b/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()
--- a/quickshell/Modules/DankDash/MediaDropdownOverlay.qml
+++ b/quickshell/Modules/DankDash/MediaDropdownOverlay.qml
@@ -16,6 +16,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)
@@ -57,6 +58,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
@@ -65,8 +90,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)
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3)
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        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
@@ -89,7 +114,7 @@ Item {
            }
        }

-        layer.enabled: true
+        layer.enabled: !BlurService.enabled
        layer.effect: MultiEffect {
            shadowEnabled: true
            shadowHorizontalOffset: 0
@@ -123,23 +148,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
-                    bottomRightRadius: Theme.cornerRadius
+                    radius: 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;
@@ -148,8 +176,7 @@ Item {
                    }
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: Theme.primary
-                    border.width: 3
-                    border.color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1.0)
+                    border.width: 0
                }

                MouseArea {
@@ -199,8 +226,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)
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        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
@@ -223,7 +250,7 @@ Item {
            }
        }

-        layer.enabled: true
+        layer.enabled: !BlurService.enabled
        layer.effect: MultiEffect {
            shadowEnabled: true
            shadowHorizontalOffset: 0
@@ -349,8 +376,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)
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        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
@@ -373,7 +400,7 @@ Item {
            }
        }

-        layer.enabled: true
+        layer.enabled: !BlurService.enabled
        layer.effect: MultiEffect {
            shadowEnabled: true
            shadowHorizontalOffset: 0
--- a/quickshell/Modules/DankDash/MediaPlayerTab.qml
+++ b/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
@@ -638,7 +637,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
@@ -681,7 +680,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
@@ -758,7 +757,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

--- a/quickshell/Modules/DankDash/Overview/Card.qml
+++ b/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)
-    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
+    color: Theme.nestedSurface
+    border.color: Theme.outlineMedium
    border.width: 1

    default property alias content: contentItem.data
--- a/quickshell/Modules/DankDash/WeatherForecastCard.qml
+++ b/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

--- a/quickshell/Modules/DankDash/WeatherTab.qml
+++ b/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)
-            border.color: Theme.withAlpha(Theme.outline, 0.08)
+            color: Theme.nestedSurface
+            border.color: Theme.outlineMedium
            border.width: 1

            Column {
--- a/quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml
+++ b/quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml
@@ -122,12 +122,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
--- a/quickshell/Modules/Notifications/Center/NotificationCard.qml
+++ b/quickshell/Modules/Notifications/Center/NotificationCard.qml
@@ -169,12 +169,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
@@ -503,12 +501,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: {
--- a/quickshell/Modules/Notifications/Popup/NotificationPopup.qml
+++ b/quickshell/Modules/Notifications/Popup/NotificationPopup.qml
@@ -325,8 +325,9 @@ PanelWindow {
        property bool swipeDismissing: false

        readonly property real radiusForShadow: Theme.cornerRadius
-        property real shadowBlurPx: SettingsData.notificationPopupShadowEnabled ? ((2 + radiusForShadow * 0.2) * (cardHoverHandler.hovered ? 1.2 : 1)) : 0
-        property real shadowSpreadPx: SettingsData.notificationPopupShadowEnabled ? (radiusForShadow * (cardHoverHandler.hovered ? 0.06 : 0)) : 0
+        readonly property bool shadowsAllowed: SettingsData.notificationPopupShadowEnabled && !BlurService.enabled
+        property real shadowBlurPx: shadowsAllowed ? ((2 + radiusForShadow * 0.2) * (cardHoverHandler.hovered ? 1.2 : 1)) : 0
+        property real shadowSpreadPx: shadowsAllowed ? (radiusForShadow * (cardHoverHandler.hovered ? 0.06 : 0)) : 0
        property real shadowBaseAlpha: 0.35
        readonly property real popupSurfaceAlpha: SettingsData.popupTransparency
        readonly property real effectiveShadowAlpha: Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha))
@@ -500,12 +501,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
--- a/quickshell/Modules/WorkspaceOverlays/NiriOverviewOverlay.qml
+++ b/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) {
--- a/quickshell/Widgets/DankPopout.qml
+++ b/quickshell/Widgets/DankPopout.qml
@@ -13,6 +13,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
@@ -511,7 +512,7 @@ Item {
                readonly property real effectiveShadowAlpha: Math.max(0, Math.min(1, shadowBaseAlpha * popupSurfaceAlpha))
                readonly property int blurMax: 64

-                layer.enabled: Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
+                layer.enabled: !BlurService.enabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1" && !(root.suspendShadowWhileResizing && root._resizeActive)
                layer.smooth: false

                layer.effect: MultiEffect {
--- a/quickshell/Widgets/DankSlider.qml
+++ b/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;
-                    return Math.max(0, Math.min(sliderTrack.width, center));
+                    const handleLeft = travel * ratio;
+                    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
-                height: 24
+                width: 4
+                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 {