MobileShell: Unify Item Background Elements

We so far have been recreating the background elements for all the item throughout the shell. This merge request simplifies this by unifying these elements into a single component, making is easier to keep things at a consistent design while also being able to adjust things when needed in the future.

Per request, I tried to keep thing looking mostly the same as before.

The first picture is what the action drawer looks like now, the one after is with these changes.

![Screenshot_20250621_154201](/uploads/7bd5129d942c8fbc3706dd1728b3a1dd/Screenshot_20250621_154201.png)
![Screenshot_20250621_155520](/uploads/9d2e925c9483579dec765813465e4d2d/Screenshot_20250621_155520.png)

components/mobileshell/qml/actiondrawer/ContentContainer.qml

@@ -105,7 +105,7 @@ Item {
             opacity: Math.max(0, Math.min(root.brightnessPressedValue, actionDrawer.offsetResistance / root.minimizedQuickSettingsOffset))
 
             anchors {
-                topMargin: notificationDrawer.height
+                topMargin: notificationDrawer.height + 1
                 leftMargin: actionDrawer.mode == ActionDrawer.Portrait ? 0 : 10
                 rightMargin: actionDrawer.mode == ActionDrawer.Portrait ? 0 : notificationDrawer.notificationWidget.anchors.rightMargin + Kirigami.Units.gridUnit - notificationDrawer.anchors.leftMargin + 370
                 top: parent.top
@@ -277,8 +277,6 @@ Item {
 
     property MobileShell.MediaControlsWidget mediaControlsWidget: MobileShell.MediaControlsWidget {
         id: mediaWidget
-        inActionDrawer: root.actionDrawer.mode == ActionDrawer.Portrait
-
         opacity: brightnessPressedValue
     }
 }

components/mobileshell/qml/actiondrawer/quicksettings/BrightnessItem.qml

@@ -13,6 +13,7 @@ import org.kde.kirigami 2.20 as Kirigami
 import org.kde.plasma.core as PlasmaCore
 import org.kde.plasma.components 3.0 as PC3
 import org.kde.plasma.private.mobileshell.screenbrightnessplugin as ScreenBrightness
+import org.kde.plasma.private.mobileshell as MobileShell
 
 Item {
     id: root
@@ -31,15 +32,15 @@ Item {
         id: screenBrightness
     }
 
-    Rectangle {
+    MobileShell.PanelBackground {
         anchors.fill: parent
         anchors.leftMargin: -Kirigami.Units.smallSpacing
         anchors.rightMargin: -Kirigami.Units.smallSpacing
         anchors.topMargin: -Kirigami.Units.smallSpacing * 2
         anchors.bottomMargin: -Kirigami.Units.smallSpacing * 2
 
-        color: Kirigami.Theme.backgroundColor
+        panelType: MobileShell.PanelBackground.PanelType.Base
-        radius: Kirigami.Units.cornerRadius
+        flatten:  root.brightnessPressedValue
     }
 
     RowLayout {

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettings.qml

@@ -20,7 +20,9 @@ import org.kde.kirigami 2.20 as Kirigami
  */
 Item {
     id: root
-    clip: true
+    // to prevent clipping off the shadows form the BrightnessItem when the rest of the action panel view
+    // is transparent, we stop clipping the base view when fullViewProgress is not less then 1
+    clip: fullViewProgress < 1
 
     required property var actionDrawer
 
@@ -124,6 +126,9 @@ Item {
 
             SwipeView {
                 id: swipeView
+                // we need to clip this view here to prevent the other quick settings pages from being visable
+                // when fullViewProgress is not less then 1 and the base view is no longer being clipped
+                clip: true
 
                 Layout.fillWidth: true
                 Layout.preferredHeight: rowCount * rowHeight

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml

@@ -39,7 +39,7 @@ MobileShell.BaseItem {
     /**
      * Height of just the QuickSettings component in minimized mode.
      */
-    readonly property real minimizedQuickSettingsHeight: quickSettings.minimizedRowHeight + Kirigami.Units.gridUnit
+    readonly property real minimizedQuickSettingsHeight: quickSettings.minimizedRowHeight + Kirigami.Units.gridUnit - Kirigami.Units.largeSpacing
 
     /**
      * Progress of showing the full quick settings view from pinned.
@@ -60,11 +60,12 @@ MobileShell.BaseItem {
     background: Item {
         opacity: brightnessPressedValue
 
-        Rectangle {
+        MobileShell.PanelBackground {
             id: background
             anchors.fill: parent
             anchors.bottomMargin: shadow.height
-            color: Kirigami.Theme.backgroundColor
+            panelType: MobileShell.PanelBackground.PanelType.Flat
+            radius: 0
         }
 
         Rectangle {

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml

@@ -44,32 +44,11 @@ MobileShell.BaseItem {
     rightPadding: Kirigami.Units.smallSpacing * 4
     bottomPadding: Kirigami.Units.smallSpacing * 4
 
-    background: Item {
+    background: MobileShell.PanelBackground {
+        anchors.fill: parent
+        anchors.margins: Kirigami.Units.largeSpacing
+        panelType: MobileShell.PanelBackground.PanelType.Base
         opacity: brightnessPressedValue
-
-        Rectangle {
-            id: background
-            anchors.fill: parent
-            anchors.margins: Kirigami.Units.largeSpacing
-            color: Kirigami.Theme.backgroundColor
-            visible: false
-
-            radius: Kirigami.Units.cornerRadius
-
-            // Only show border on dark background
-            border.color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.textColor, Kirigami.Theme.backgroundColor, 0.9)
-            border.width: (Kirigami.ColorUtils.brightnessForColor(color)) === Kirigami.ColorUtils.Dark ? 1 : 0
-            border.pixelAligned: false
-        }
-
-        MultiEffect {
-            anchors.fill: background
-            source: background
-            blurMax: 16
-            shadowEnabled: true
-            shadowOpacity: 0.5
-            shadowColor: Qt.darker(Kirigami.Theme.backgroundColor, 1.9)
-        }
     }
 
     contentItem: Item {
@@ -107,7 +86,8 @@ MobileShell.BaseItem {
                 Layout.maximumWidth: column.width
             }
 
-            Item { Layout.fillHeight: true }
+            // add extra space here to prevent the bottom handle from overlapping with the BrightnessItem
+            Item { Layout.fillHeight: true; height: Kirigami.Units.largeSpacing }
         }
 
         Handle {

components/mobileshell/qml/components/PanelBackground.qml

@@ -0,0 +1,118 @@
+// SPDX-FileCopyrightText: 2025 Micah Stanley <stanleymicah@proton.me>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import org.kde.kirigami 2.12 as Kirigami
+import QtQuick.Effects
+
+Item {
+    id: root
+
+    property int panelType: PanelBackground.PanelType.Base
+    property real flatten: 0 // flattens out the border and shadow effects
+    property bool pressed: false // darkens the panel when true
+    property bool animate: false // animate panel color changes
+
+    enum PanelType {
+        Flat, // the base rectangle with no effects
+        Base, // the base panel with some effects
+        Stacked, // for being stacked on top of the base panel
+        Drawer, // for uses in drawers, scroll containers, typically when a translucent component is behind them
+        Wallpaper, // for uses when the panel is right on top of the user's wallpaper
+        Popup // for uses as a popup, like for the volume and notifition popups.
+    }
+
+    // whether to use a shadow effect
+    readonly property bool shadow:          panelType === PanelBackground.PanelType.Base ||
+                                            panelType === PanelBackground.PanelType.Stacked ||
+                                            panelType === PanelBackground.PanelType.Drawer ||
+                                            panelType === PanelBackground.PanelType.Popup ||
+                                            panelType === PanelBackground.PanelType.Wallpaper
+    // whether to use the complex shadow effect - note that this uses more perfomance
+    readonly property bool complexShadow:   shadow &&
+                                            (panelType === PanelBackground.PanelType.Base ||
+                                            panelType === PanelBackground.PanelType.Drawer ||
+                                            panelType === PanelBackground.PanelType.Popup ||
+                                            panelType === PanelBackground.PanelType.Wallpaper)
+    // whether the panel should have a border when using a dark theme
+    readonly property bool border:          panelType === PanelBackground.PanelType.Base ||
+                                            panelType === PanelBackground.PanelType.Stacked
+    // whether to force the panel to have a border even when using a light theme
+    readonly property bool forceBorder:     border &&
+                                            (panelType === PanelBackground.PanelType.Stacked)
+    // whether the panel is translucent border - note that border cannot be used when translucent
+    readonly property bool translucent:     panelType === PanelBackground.PanelType.Popup ||
+                                            panelType === PanelBackground.PanelType.Wallpaper
+    // adjust color depending on panel type
+    property color panelColor: {
+        let tintPercent
+        if (panelType === PanelBackground.PanelType.Popup) {
+            tintPercent = 0.035
+        } else if (panelType === PanelBackground.PanelType.Base || panelType === PanelBackground.PanelType.Stacked || panelType === PanelBackground.PanelType.Flat) {
+            tintPercent = 0
+        } else {
+            tintPercent = 0.06
+        }
+
+        return Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, "white", tintPercent)
+    }
+    // in some circumstances, panels can change there type
+    // for example, popup notifition when opening the popup notifition drawer
+    // in these incidents, we animate the color to prevent harsh transitions
+    Behavior on panelColor {
+        ColorAnimation {
+            duration: animate ? Kirigami.Units.veryLongDuration * 1.5 : 0
+            easing.type: Easing.OutExpo
+        }
+    }
+
+    // corner radius of the panel
+    property int radius: Kirigami.Units.cornerRadius
+
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+    Kirigami.Theme.inherit: false
+
+    // very simple shadow for performance
+    Rectangle {
+        id: simpleShadow
+        anchors.top: root.top
+        anchors.topMargin: 1
+        anchors.left: root.left
+        anchors.right: root.right
+        height: root.height
+
+        visible: root.shadow && root.flatten < 1
+        radius: root.radius
+
+        color: Qt.rgba(0, 0, 0, (root.complexShadow ? 0.025 : 0.15) * (1 - root.flatten))
+        opacity: root.complexShadow ? 0 : 1
+    }
+
+    // simple-ish expanded shadow for performance
+    MultiEffect {
+        anchors.fill: background
+        source: background
+        visible: root.complexShadow && root.flatten < 1
+        blurMax: 16
+
+        shadowEnabled: root.complexShadow
+        shadowVerticalOffset: 1
+        shadowOpacity: (panelType === PanelBackground.PanelType.Base ? 0.5 : 0.2) * (1 - root.flatten)
+        shadowColor: "black"
+    }
+
+    Rectangle {
+        id: background
+        anchors.fill: root
+
+        color: Qt.darker(Qt.rgba(root.panelColor.r, root.panelColor.g, root.panelColor.b, root.translucent ? 0.9 : 1), root.pressed ? 3.5 : 1)
+        radius: root.radius
+
+        // Only show border when using a dark background and when the border property is set to true
+        readonly property color borderColor: Qt.darker(Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.textColor, root.panelColor, 0.9), root.pressed ? 3.5 : 1)
+        border.color: Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 1 - root.flatten)
+        border.width: root.border && root.flatten < 1 && ((Kirigami.ColorUtils.brightnessForColor(color)) === Kirigami.ColorUtils.Dark || root.forceBorder) ? 1 : 0
+        border.pixelAligned: false
+    }
+}

components/mobileshell/qml/popups/actionbuttons/ActionButton.qml

@@ -124,37 +124,12 @@ Window {
             yScale: content.scale
         }
 
-        MultiEffect {
+        MobileShell.PanelBackground {
             anchors.fill: parent
-            source: simpleShadow
+            panelType: MobileShell.PanelBackground.PanelType.Popup
-            blurMax: 16
-            shadowEnabled: true
-            shadowVerticalOffset: 1
-            shadowOpacity: 0.85
-            shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.2)
-        }
-
-        Rectangle {
-            id: simpleShadow
-            anchors.fill: parent
-            anchors.leftMargin: -1
-            anchors.rightMargin: -1
-            anchors.bottomMargin: -1
-
-            color: {
-                let darkerBackgroundColor = Qt.darker(Kirigami.Theme.backgroundColor, 1.3);
-                return Qt.rgba(darkerBackgroundColor.r, darkerBackgroundColor.g, darkerBackgroundColor.b, 0.5)
-            }
             radius: root.size
         }
 
-        Rectangle {
-            anchors.fill: parent
-            color: Qt.lighter(Kirigami.Theme.backgroundColor, 1.5)
-            radius: root.size
-            opacity: 0.85
-        }
-
         Controls.AbstractButton {
             id: button
             anchors.fill: parent

components/mobileshell/qml/popups/notifications/NotificationPopup.qml

@@ -29,7 +29,7 @@ Item {
     property real openOffset
 
     // calculate the position needed to at when the expanded drawer is active
-    readonly property real fullOpenOffset: popupDrawerOpened ? aboveNotificationFullOffset + aboveNotificationHeight + Kirigami.Units.gridUnit : 0
+    readonly property real fullOpenOffset: popupDrawerOpened ? aboveNotificationFullOffset + aboveNotificationHeight + Kirigami.Units.largeSpacing : 0
     property real aboveNotificationFullOffset: 0
     property int aboveNotificationHeight: 0
 
@@ -324,6 +324,9 @@ Item {
         notificationsModel: notificationPopup.notificationsModel
         notificationsModelType: notificationPopup.notificationsModelType
         timeSource: notificationPopup.timeDataSource
+        panelType:  notificationPopup.popupDrawerOpened ?
+                    MobileShell.PanelBackground.PanelType.Drawer :
+                    MobileShell.PanelBackground.PanelType.Popup
 
         currentPopupHeight: popupNotifications.currentPopupHeight
 

components/mobileshell/qml/popups/volumeosd/PopupCard.qml

@@ -16,6 +16,7 @@ import Qt5Compat.GraphicalEffects
 import org.kde.kirigami 2.20 as Kirigami
 import org.kde.ksvg 1.0 as KSvg
 import org.kde.plasma.components 3.0 as PlasmaComponents
+import org.kde.plasma.private.mobileshell as MobileShell
 
 // capture presses on the audio applet so it doesn't close the overlay
 Controls.Control {
@@ -23,37 +24,15 @@ Controls.Control {
     implicitWidth: Math.min(Kirigami.Units.gridUnit * 20, Screen.width - Kirigami.Units.gridUnit * 2)
     padding: Kirigami.Units.smallSpacing * 2
 
+    property bool popupBackground: false
+
     Kirigami.Theme.colorSet: Kirigami.Theme.View
     Kirigami.Theme.inherit: false
 
-    MultiEffect {
+    MobileShell.PanelBackground {
         anchors.fill: parent
-        source: simpleShadow
+        panelType: content.popupBackground ?
-        blurMax: 16
+            MobileShell.PanelBackground.PanelType.Popup :
-        shadowEnabled: true
+            MobileShell.PanelBackground.PanelType.Drawer
-        shadowVerticalOffset: 1
-        shadowOpacity: 0.85
-        shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.2)
-    }
-
-    Rectangle {
-        id: simpleShadow
-        anchors.fill: parent
-        anchors.leftMargin: -1
-        anchors.rightMargin: -1
-        anchors.bottomMargin: -1
-
-        color: {
-            let darkerBackgroundColor = Qt.darker(Kirigami.Theme.backgroundColor, 1.3);
-            return Qt.rgba(darkerBackgroundColor.r, darkerBackgroundColor.g, darkerBackgroundColor.b, 0.5)
-        }
-        radius: Kirigami.Units.cornerRadius
-    }
-
-    Rectangle {
-        anchors.fill: parent
-        color: Qt.lighter(Kirigami.Theme.backgroundColor, 1.5)
-        opacity: 0.85
-        radius: Kirigami.Units.cornerRadius
     }
 }

components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml

@@ -136,6 +136,7 @@ Window {
             id: osd
             Layout.alignment: Qt.AlignHCenter
             implicitWidth: Math.min(Kirigami.Units.gridUnit * 15, Screen.width - Kirigami.Units.gridUnit * 2)
+            popupBackground: true
 
             transform: [
                 Translate {

components/mobileshell/qml/widgets/mediacontrols/BlurredBackground.qml

@@ -30,6 +30,13 @@ Item {
         }
     }
 
+    // darken background when pressed
+    Rectangle {
+        anchors.fill: parent
+        color: "black"
+        opacity: root.darken ? 0.05 : 0
+    }
+
     Image {
         id: img
         source: root.imageSource
@@ -41,9 +48,12 @@ Item {
         // ensure text is readable
         Rectangle {
             anchors.fill: parent
-            color: Qt.rgba(Kirigami.Theme.backgroundColor.r * (inActionDrawer ? 0.85 : 0.95), Kirigami.Theme.backgroundColor.g * (inActionDrawer ? 0.85 : 0.95), Kirigami.Theme.backgroundColor.b * (inActionDrawer ? 0.85 : 0.95), root.darken ? 0.95 : 0.85)
+            color: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.2)
+            visible: img.progress
         }
 
+        opacity: 0.1
+
         // apply lighten, saturate and blur effect
         layer.enabled: true
         layer.effect: MultiEffect {

components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml

@@ -21,8 +21,7 @@ Item {
     id: root
     visible: sourceRepeater.count > 0
 
-    property bool inActionDrawer: false
+    property int panelType: MobileShell.PanelBackground.PanelType.Drawer
-
     property bool detailledView: false
 
     readonly property real padding: Kirigami.Units.gridUnit
@@ -34,8 +33,8 @@ Item {
 
     Behavior on implicitHeight {
        NumberAnimation {
-           duration: implicitHeight == 0 ? 0 : Kirigami.Units.shortDuration
+           duration: implicitHeight == 0 ? 0 : Kirigami.Units.longDuration
-           easing.type: Easing.InOutQuad
+           easing.type: Easing.OutQuart
        }
     }
 
@@ -63,30 +62,9 @@ Item {
         }
     }
 
-    // shadow
+    MobileShell.PanelBackground {
-    MultiEffect {
+        anchors.fill: parent
-        anchors.fill: root
+        panelType: root.panelType
-        visible: !inActionDrawer
-        source: simpleShadow
-        blurMax: 32
-        shadowEnabled: true
-        shadowVerticalOffset: 1
-        shadowOpacity: 0.5
-        shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.2)
-    }
-
-    Rectangle {
-        id: simpleShadow
-        anchors.fill: root
-        anchors.leftMargin: -1
-        anchors.rightMargin: -1
-        anchors.bottomMargin: -1
-
-        color: {
-            let darkerBackgroundColor = Qt.darker(Kirigami.Theme.backgroundColor, 1.3);
-            return Qt.rgba(darkerBackgroundColor.r, darkerBackgroundColor.g, darkerBackgroundColor.b, 0.3)
-        }
-        radius: Kirigami.Units.cornerRadius
     }
 
     // list of app media widgets

components/mobileshell/qml/widgets/notifications/NotificationCard.qml

@@ -9,26 +9,64 @@ import Qt5Compat.GraphicalEffects
 import org.kde.kirigami 2.12 as Kirigami
 
 import org.kde.plasma.components 3.0 as PlasmaComponents
+import org.kde.plasma.private.mobileshell as MobileShell
 
 Item {
     id: root
 
+    /**
+     * The content that goes inside the notification card
+     */
     default property Item contentItem
 
+    /**
+     * The panel background type for this notification.
+     */
+    property int panelType: MobileShell.PanelBackground.PanelType.Drawer
+
+    /**
+     * Whether this is a popup notification.
+     */
     property bool popupNotification: false
 
+    /**
+     * Whether this popup notification is tucked underneath the current popup.
+     */
     property bool inPopupDrawer: false
 
+    /**
+     * Whether this notification is within the lockscreen.
+     */
+    property bool inLockScreen: false
+
+    /**
+     * The current notification popup height.
+     */
     property int currentPopupHeight: 0
 
+    /**
+     * The remaining time before the notification popup is dismissed.
+     */
     property real remainingTimeProgress: 1
 
+    /**
+     * Whether the timer for dismissing the notification popup is running.
+     */
     property bool closeTimerRunning: false
 
+    /**
+     * Whether tapping on this notification is enabled.
+     */
     property bool tapEnabled: false
 
+    /**
+     * Whether swipping on this notification is enabled.
+     */
     property bool swipeGestureEnabled: false
 
+    /**
+     * The current drag offset for this notification.
+     */
     property real dragOffset: 0
 
     signal tapped()
@@ -57,35 +95,12 @@ Item {
         }
     }
 
-    // shadow
+    MobileShell.PanelBackground {
-    MultiEffect {
         anchors.fill: mainCard
-        visible: Math.abs(dragOffset) !== root.width
+        animate: true
-        source: simpleShadow
+        panelType: root.panelType
-        blurMax: 16
-        shadowEnabled: true
-        shadowVerticalOffset: 1
-        shadowOpacity: popupNotification ? 0.85 : 0.5
-        shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.2)
     }
 
-    Rectangle {
-        id: simpleShadow
-        visible: Math.abs(dragOffset) !== root.width
-        anchors.fill: mainCard
-        anchors.leftMargin: -1
-        anchors.rightMargin: -1
-        anchors.bottomMargin: -1
-
-        color: {
-            let darkerBackgroundColor = Qt.darker(Kirigami.Theme.backgroundColor, 1.3);
-            return Qt.rgba(darkerBackgroundColor.r, darkerBackgroundColor.g, darkerBackgroundColor.b, popupNotification ? 0.5 : 0.3)
-        }
-        radius: Kirigami.Units.cornerRadius
-    }
-
-
-
     // card
     Item {
         id: mainCard
@@ -103,17 +118,6 @@ Item {
             }
         }
 
-        Rectangle {
-            anchors.fill: parent
-            color: popupNotification ? Qt.lighter(Kirigami.Theme.backgroundColor, 1.5) :  Qt.rgba(Kirigami.Theme.backgroundColor.r * 0.95, Kirigami.Theme.backgroundColor.g * 0.95, Kirigami.Theme.backgroundColor.b * 0.95, (root.tapEnabled && mouseArea.pressed) ? 0.95 : 0.85)
-            opacity: popupNotification ? 0.85 : 1
-            radius: Kirigami.Units.cornerRadius
-            layer.enabled: popupNotification ? false : true
-            layer.effect: MultiEffect {
-                brightness: 0.075
-            }
-        }
-
         ProgressBar {
             id: progress
             anchors.left: parent.left

components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml

@@ -21,7 +21,7 @@ import org.kde.coreaddons 1.0 as KCoreAddons
 RowLayout {
     id: notificationHeading
 
-    property bool inLockscreen: false
+    property bool inLockScreen: false
     property var applicationIconSource
     property string applicationName
     property string originName
@@ -44,7 +44,7 @@ RowLayout {
         Layout.leftMargin: Kirigami.Units.smallSpacing
         Layout.fillWidth: true
 
-        color: inLockscreen ? "white" : Kirigami.Theme.textColor
+        color: inLockScreen ? "white" : Kirigami.Theme.textColor
 
         opacity: 0.75
         elide: Text.ElideLeft

components/mobileshell/qml/widgets/notifications/NotificationItem.qml

@@ -24,7 +24,8 @@ BaseNotificationItem {
     id: notificationItem
     implicitHeight: mainCard.implicitHeight + mainCard.anchors.topMargin + notificationHeading.height
 
-    property bool inLockscreen: false
+    property bool inLockScreen: false
+    property int panelType: MobileShell.PanelBackground.PanelType.Drawer
 
     signal dragStart()
     signal dragEnd()
@@ -37,7 +38,7 @@ BaseNotificationItem {
         anchors.left: parent.left
         anchors.right: parent.right
 
-        inLockscreen: root.inLockscreen
+        inLockScreen: notificationItem.inLockScreen
 
         Kirigami.Theme.colorSet: Kirigami.Theme.Header
         Kirigami.Theme.inherit: false
@@ -62,6 +63,8 @@ BaseNotificationItem {
         onTapped: notificationItem.actionInvoked("default");
         swipeGestureEnabled: notificationItem.closable
         onDismissRequested: notificationItem.close();
+        inLockScreen: notificationItem.inLockScreen
+        panelType: notificationItem.panelType
 
         onDragStart: notificationItem.dragStart()
         onDragEnd: notificationItem.dragEnd()

components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml

@@ -29,7 +29,8 @@ BaseNotificationItem {
     property real remainingTimeProgress: 1
     property bool closeTimerRunning: false
 
-    property bool inLockscreen: false
+    property bool inLockScreen: false
+    property int panelType: MobileShell.PanelBackground.PanelType.Drawer
 
     signal dragStart()
     signal dragEnd()
@@ -48,6 +49,8 @@ BaseNotificationItem {
         currentPopupHeight: notificationItem.currentPopupHeight
         remainingTimeProgress: notificationItem.remainingTimeProgress
         closeTimerRunning: notificationItem.closeTimerRunning
+        inLockScreen: notificationItem.inLockScreen
+        panelType: notificationItem.panelType
         tapEnabled: notificationItem.hasDefaultAction
         onTapped: notificationItem.actionInvoked("default");
         swipeGestureEnabled: notificationItem.closable

components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml

@@ -27,7 +27,15 @@ import org.kde.notificationmanager as NotificationManager
 Item {
     id: root
 
-    property bool inLockscreen: false
+    /**
+     * If the notification is in the lockscreen.
+     */
+    property bool inLockScreen: false
+
+    /**
+     * The panel background type for all the notifications within the widget.
+     */
+    property int panelType: MobileShell.PanelBackground.PanelType.Drawer
 
     /**
      * The notification model for the widget.
@@ -165,7 +173,7 @@ Item {
         readonly property int listHeight: contentItem.childrenRect.height
 
         bottomMargin: spacing
-        height: count === 0 ? (root.topPadding + (showHeader ? root.header.height + listHeight : 0)) : (listOverflowing ? root.height : listHeight + bottomMargin)
+        height: count === 0 ? (root.topPadding + (showHeader ? root.header.height + listHeight + Kirigami.Units.largeSpacing * 2 : 0)) : (listOverflowing ? root.height : listHeight + bottomMargin)
 
         anchors {
             top: parent.top
@@ -192,7 +200,7 @@ Item {
                     id: headerComponentProxy
 
                     contentItem: showHeader ? root.header : null
-                    y: root.topPadding - Kirigami.Units.largeSpacing
+                    y: root.topPadding + Kirigami.Units.largeSpacing
 
                     width: parent.width - Kirigami.Units.gridUnit * 2
                     anchors.left: parent.left
@@ -309,7 +317,7 @@ Item {
                     Item {
                         id: headerSpace
                         width: parent.width
-                        height: index == 0 ? root.topPadding + (showHeader ? root.header.height : 0) : 0
+                        height: index == 0 ? root.topPadding + (showHeader && root.header.visible ? root.header.height + Kirigami.Units.largeSpacing * 2 : 0) : 0
                         visible: index == 0
                     }
 
@@ -333,7 +341,7 @@ Item {
                     Item {
                         id: headerSpace
                         width: parent.width
-                        height: index == 0 ? root.topPadding + (showHeader ? root.header.height : 0) : 0
+                        height: index == 0 ? root.topPadding + (showHeader && root.header.visible ? root.header.height + Kirigami.Units.largeSpacing * 2 : 0) : 0
                         visible: index == 0
                     }
 
@@ -342,7 +350,8 @@ Item {
                         width: parent.width
                         height: implicitHeight
 
-                        inLockscreen: root.inLockscreen
+                        inLockScreen: root.inLockScreen
+                        panelType: root.panelType
 
                         model: delegateLoader.model
                         modelIndex: delegateLoader.index

shell/contents/lockscreen/LockScreenContent.qml

@@ -104,6 +104,7 @@ Item {
             Layout.maximumWidth: Kirigami.Units.gridUnit * 25
             Layout.leftMargin: root.isVertical ? Kirigami.Units.gridUnit : 0
             Layout.rightMargin: root.isVertical ? Kirigami.Units.gridUnit : 0
+            panelType: MobileShell.PanelBackground.PanelType.Wallpaper
         }
     }
 

shell/contents/lockscreen/NotificationsComponent.qml

@@ -83,7 +83,8 @@ Loader {
                 actionsRequireUnlock: true
                 historyModel: root.notificationsModel
                 notificationSettings: root.notificationSettings
-                inLockscreen: true
+                panelType: MobileShell.PanelBackground.PanelType.Wallpaper
+                inLockScreen: true
                 topPadding: root.topPadding // Kirigami.Units.gridUnit
                 bottomPadding: Kirigami.Units.gridUnit
                 listView.interactive: !root.scrollLock && listView.listOverflowing