fix responsive ui

1 files changed, 54 insertions, 41 deletions

diff --git a/raveos-sddm-theme/sddm-rave-theme/Main.qml b/raveos-sddm-theme/sddm-rave-theme/Main.qml
index 00837d2..cb50ce9 100644
--- a/raveos-sddm-theme/sddm-rave-theme/Main.qml
+++ b/raveos-sddm-theme/sddm-rave-theme/Main.qml
@@ -1,13 +1,13 @@
 // Config created by gabeszm https://git.rp1.hu/gabeszm/sddm-rave-theme
-// Copyright (C) 2022-2025 gabeszm
+// Copyright (C) 2026 gabeszm
 // Based on https://github.com/MarianArlt/sddm-sugar-dark
 // Distributed under the GPLv3+ License https://www.gnu.org/licenses/gpl-3.0.html
 
 import QtQuick 2.15
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts 6.5
 import QtQuick.Controls 2.15
-import QtQuick.Effects
-import QtMultimedia
+import QtQuick.Effects 6.5
+import QtMultimedia 6.5
 
 import "Components"
 
@@ -15,7 +15,7 @@ Pane {
     id: root
 
     height: config.ScreenHeight || Screen.height
-    width: config.ScreenWidth || Screen.ScreenWidth
+    width: config.ScreenWidth || Screen.width
     padding: config.ScreenPadding
 
     LayoutMirroring.enabled: config.RightToLeftLayout == "true" ? true : Qt.application.layoutDirection === Qt.RightToLeft
@@ -31,6 +31,9 @@ Pane {
 
     focus: true
 
+    readonly property real formPadding: root.font.pointSize * 2.8
+    readonly property real borderInset: root.font.pointSize * 0.20
+
     property bool leftleft: config.HaveFormBackground == "true" &&
                             config.PartialBlur == "false" &&
                             config.FormPosition == "left" &&
@@ -73,13 +76,13 @@ Pane {
         Canvas {
             id: animatedBorder
 
-            width: form.width / 2 + 60 + 6
-            height: form.height + 60 + 6
+            width: form.width + formPadding + borderInset * 2
+            height: form.height + formPadding + borderInset * 2
             anchors.centerIn: form
             z: 3
 
             property real angle: 0
-            property real radius: config.RoundCorners !== "" ? parseInt(config.RoundCorners) : 20
+            property real radius: config.RoundCorners !== "" ? parseInt(config.RoundCorners) : root.font.pointSize * 1.5
 
             onAngleChanged: requestPaint()
 
@@ -89,10 +92,10 @@ Pane {
                 ctx.clearRect(0, 0, width, height);
 
                 var r = radius;
-                var x = 3;
-                var y = 3;
-                var w = width - 6;
-                var h = height - 6;
+                var x = borderInset;
+                var y = borderInset;
+                var w = width - borderInset * 2;
+                var h = height - borderInset * 2;
 
                 ctx.beginPath();
                 ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
@@ -109,12 +112,12 @@ Pane {
                 ctx.rotate(angle);
 
                 var grad = ctx.createLinearGradient(-width / 2, -height / 2, width / 2, height / 2);
-                grad.addColorStop(0, "rgba(255, 255, 255, 0.45)");
-                grad.addColorStop(0.5, "rgba(255, 255, 255, 0.12)");
-                grad.addColorStop(1, "rgba(255, 255, 255, 0.45)");
+                grad.addColorStop(0, "rgba(255, 255, 255, 0.65)");
+                grad.addColorStop(0.5, "rgba(255, 255, 255, 0.15)");
+                grad.addColorStop(1, "rgba(255, 255, 255, 0.65)");
 
                 ctx.strokeStyle = grad;
-                ctx.lineWidth = 2;
+                ctx.lineWidth = root.font.pointSize * 0.15;
                 ctx.stroke();
                 ctx.restore();
             }
@@ -136,26 +139,34 @@ Pane {
         Rectangle {
             id: formBackground
 
-            width: form.width / 2 + 60
-            height: form.height + 60
+            width: form.width + formPadding
+            height: form.height + formPadding
             anchors.centerIn: form
             z: 4
 
-            color: Qt.rgba(1, 1, 1, 0.08)
-            border.color: Qt.rgba(1, 1, 1, 0.18)
-            border.width: 1
-            radius: config.RoundCorners !== "" ? parseInt(config.RoundCorners) : 20
-            visible: true
+            radius: config.RoundCorners !== "" ? parseInt(config.RoundCorners) : root.font.pointSize * 1.5
+            border.color: Qt.rgba(1, 1, 1, 0.45)
+            border.width: Math.max(1, root.font.pointSize * 0.08)
+            clip: true
+
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: Qt.rgba(1, 1, 1, 0.28) }
+                GradientStop { position: 0.4; color: Qt.rgba(1, 1, 1, 0.16) }
+                GradientStop { position: 1.0; color: Qt.rgba(1, 1, 1, 0.22) }
+            }
         }
 
         LoginForm {
             id: form
 
-            height: implicitHeight
-            width: parent.width / 2.5
+            height: Math.min(implicitHeight, parent.height - formPadding)
+            width: Math.min(Math.max(parent.width * 0.22, root.font.pointSize * 16), parent.width * 0.75)
+            clip: true
             anchors.left: config.FormPosition == "left" ? parent.left : undefined
+            anchors.leftMargin: config.FormPosition == "left" ? parent.width * 0.18 : 0
             anchors.horizontalCenter: config.FormPosition == "center" ? parent.horizontalCenter : undefined
             anchors.right: config.FormPosition == "right" ? parent.right : undefined
+            anchors.rightMargin: config.FormPosition == "right" ? parent.width * 0.18 : 0
             anchors.verticalCenter: parent.verticalCenter
             z: 5
         }
@@ -323,42 +334,44 @@ Pane {
         ShaderEffectSource {
             id: blurMask
 
-            height: form.height + 60
-            width: form.width / 2 + 60
+            height: formBackground.height
+            width: formBackground.width
             anchors.centerIn: form
 
             sourceItem: backgroundImage
-            sourceRect: Qt.rect(x,y,width,height)
-            visible: true
+            sourceRect: Qt.rect(formBackground.x, formBackground.y, formBackground.width, formBackground.height)
+            live: true
+            visible: false
         }
 
-        ShaderEffectSource {
+        Item {
             id: blurMaskItem
+            width: formBackground.width
+            height: formBackground.height
+            visible: false
+            layer.enabled: true
 
-            sourceItem: Rectangle {
-                width: blurMask.width
-                height: blurMask.height
-                radius: config.RoundCorners !== "" ? parseInt(config.RoundCorners) : 20
+            Rectangle {
+                anchors.fill: parent
+                radius: formBackground.radius
                 color: "black"
             }
-            hideSource: true
-            visible: false
         }
 
         MultiEffect {
             id: blur
             z: 2
 
-            height: config.FullBlur == "true" ? parent.height : blurMask.height
-            width: config.FullBlur == "true" ? parent.width : blurMask.width
+            height: config.FullBlur == "true" ? parent.height : formBackground.height
+            width: config.FullBlur == "true" ? parent.width : formBackground.width
             anchors.centerIn: config.FullBlur == "true" ? backgroundImage : form
 
             source: config.FullBlur == "true" ? backgroundImage : blurMask
             blurEnabled: true
             autoPaddingEnabled: false
-            blur: config.Blur == "" ? 2.5 : config.Blur
-            blurMax: config.BlurMax == "" ? 48 : config.BlurMax
-            visible: true
+            blur: config.Blur !== "" ? parseFloat(config.Blur) : 1.0
+            blurMax: config.BlurMax !== "" ? parseInt(config.BlurMax) : 48
+            visible: config.PartialBlur != "false"
 
             maskEnabled: config.FullBlur == "true" ? false : true
             maskSource: blurMaskItem