feat: frosted backdrop behind the login card

1 files changed, 56 insertions, 0 deletions

diff --git a/theme/components/Backdrop.qml b/theme/components/Backdrop.qml
new file mode 100644
index 0000000..02c01ac
--- /dev/null
+++ b/theme/components/Backdrop.qml
@@ -0,0 +1,56 @@
+// SPDX-License-Identifier: GPL-2.0-only
+// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+//
+// A frosted panel. It snapshots the wallpaper image the card sits on, blurs it
+// and masks it to the card's rounded rect, then tints it for text contrast.
+// When there is no source, only the tint draws, so the card still reads.
+
+import QtQuick
+import QtQuick.Effects
+
+Item {
+    id: backdrop
+
+    property Item sourceItem: null
+    property int radius: 10
+    property color tint: "#24273a"
+    property real tintOpacity: 0.72
+    property bool blurEnabled: true
+
+    ShaderEffectSource {
+        id: snapshot
+        sourceItem: backdrop.sourceItem
+        live: true
+        sourceRect: {
+            if (backdrop.sourceItem === null)
+                return Qt.rect(0, 0, 0, 0)
+            var p = backdrop.mapToItem(backdrop.sourceItem, 0, 0)
+            return Qt.rect(p.x, p.y, backdrop.width, backdrop.height)
+        }
+    }
+
+    MultiEffect {
+        anchors.fill: parent
+        source: snapshot
+        visible: backdrop.sourceItem !== null && backdrop.blurEnabled
+        blurEnabled: true
+        blur: 0.8
+        maskEnabled: true
+        maskSource: mask
+    }
+
+    Rectangle {
+        id: mask
+        anchors.fill: parent
+        radius: backdrop.radius
+        layer.enabled: true
+        visible: false
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        radius: backdrop.radius
+        color: backdrop.tint
+        opacity: backdrop.tintOpacity
+    }
+}