overview backdrop: dark bg, gradient-filled hexagons without outlines

modules/OverviewBackdrop.qml

@@ -20,69 +20,63 @@ PanelWindow {
     anchors.right: true
     anchors.bottom: true
 
-    // Dark base tint
+    // Solid dark background
     Rectangle {
         anchors.fill: parent
         color: M.Theme.base00
-        opacity: 0.4
+        opacity: 0.85
     }
 
-    // Gradient wash — slowly shifting via animated stop positions
+    // Hex grid with gradient-filled cells, no outlines
-    Rectangle {
-        anchors.fill: parent
-        property real _t: 0
-        NumberAnimation on _t {
-            from: 0
-            to: 1
-            duration: 20000
-            loops: Animation.Infinite
-        }
-        gradient: Gradient {
-            orientation: Gradient.Horizontal
-            GradientStop {
-                position: 0
-                color: Qt.rgba(M.Theme.base0C.r, M.Theme.base0C.g, M.Theme.base0C.b, 0.2)
-            }
-            GradientStop {
-                position: 0.5
-                color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.12)
-            }
-            GradientStop {
-                position: 1
-                color: Qt.rgba(M.Theme.base09.r, M.Theme.base09.g, M.Theme.base09.b, 0.2)
-            }
-        }
-    }
-
-    // Hex grid
     Canvas {
         anchors.fill: parent
-        opacity: 0.12
+
         onPaint: {
             const ctx = getContext("2d");
             const w = width, h = height;
             ctx.clearRect(0, 0, w, h);
-            ctx.strokeStyle = M.Theme.base0D.toString();
+
-            ctx.lineWidth = 0.5;
             const size = 50;
             const dx = size * 1.5;
             const dy = size * Math.sqrt(3);
-            for (let col = -1; col < w / dx + 1; col++) {
+
-                for (let row = -1; row < h / dy + 1; row++) {
+            const c0 = M.Theme.base0C;
+            const c1 = M.Theme.base0E;
+            const c2 = M.Theme.base09;
+
+            for (let col = -1; col < w / dx + 2; col++) {
+                for (let row = -1; row < h / dy + 2; row++) {
                     const cx = col * dx;
                     const cy = row * dy + (col % 2 ? dy / 2 : 0);
+
+                    // Position-based color interpolation across the screen
+                    const fx = Math.max(0, Math.min(1, cx / w));
+                    const fy = Math.max(0, Math.min(1, cy / h));
+
+                    // Blend: left=base0C, center=base0E, right=base09, modulated by y
+                    const t = fx;
+                    const r = t < 0.5 ? c0.r + (c1.r - c0.r) * (t * 2) : c1.r + (c2.r - c1.r) * ((t - 0.5) * 2);
+                    const g = t < 0.5 ? c0.g + (c1.g - c0.g) * (t * 2) : c1.g + (c2.g - c1.g) * ((t - 0.5) * 2);
+                    const b = t < 0.5 ? c0.b + (c1.b - c0.b) * (t * 2) : c1.b + (c2.b - c1.b) * ((t - 0.5) * 2);
+
+                    // Opacity varies: brighter near edges, dimmer in center
+                    const distFromCenter = Math.sqrt(Math.pow(fx - 0.5, 2) + Math.pow(fy - 0.5, 2));
+                    const alpha = 0.03 + distFromCenter * 0.06;
+
+                    ctx.fillStyle = "rgba(" + Math.round(r * 255) + "," + Math.round(g * 255) + "," + Math.round(b * 255) + "," + alpha + ")";
+
                     ctx.beginPath();
                     for (let i = 0; i < 6; i++) {
                         const angle = Math.PI / 3 * i - Math.PI / 6;
-                        const px = cx + size * 0.5 * Math.cos(angle);
+                        const px = cx + size * 0.48 * Math.cos(angle);
-                        const py = cy + size * 0.5 * Math.sin(angle);
+                        const py = cy + size * 0.48 * Math.sin(angle);
                         if (i === 0)
                             ctx.moveTo(px, py);
                         else
                             ctx.lineTo(px, py);
                     }
                     ctx.closePath();
-                    ctx.stroke();
+                    ctx.fill();
                 }
             }
         }
@@ -93,7 +87,7 @@ PanelWindow {
         id: hScan
         width: 2
         height: parent.height
-        opacity: 0.25
+        opacity: 0.2
         color: M.Theme.base0D
         NumberAnimation on x {
             from: -100
@@ -116,35 +110,17 @@ PanelWindow {
                 }
                 GradientStop {
                     position: 1
-                    color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.12)
+                    color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.08)
-                }
-            }
-        }
-        Rectangle {
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: parent.right
-            width: 40
-            gradient: Gradient {
-                orientation: Gradient.Horizontal
-                GradientStop {
-                    position: 0
-                    color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.06)
-                }
-                GradientStop {
-                    position: 1
-                    color: "transparent"
                 }
             }
         }
     }
 
-    // Vertical scan line — different speed, different color
+    // Vertical scan line
     Rectangle {
-        id: vScan
         width: parent.width
         height: 1
-        opacity: 0.15
+        opacity: 0.12
         color: M.Theme.base0E
         NumberAnimation on y {
             from: -50
@@ -153,35 +129,16 @@ PanelWindow {
             loops: Animation.Infinite
             easing.type: Easing.InOutSine
         }
-
-        Rectangle {
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.top
-            height: 80
-            gradient: Gradient {
-                GradientStop {
-                    position: 0
-                    color: "transparent"
-                }
-                GradientStop {
-                    position: 1
-                    color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.06)
-                }
-            }
-        }
     }
 
-    // Diagonal scan — third line, slowest, warm color
+    // Diagonal scan
     Rectangle {
-        id: diagScan
         width: 1
         height: parent.height * 1.5
-        opacity: 0.1
+        opacity: 0.06
         color: M.Theme.base09
         rotation: 30
         transformOrigin: Item.Top
-
         SequentialAnimation on x {
             loops: Animation.Infinite
             NumberAnimation {
@@ -199,136 +156,88 @@ PanelWindow {
         }
     }
 
-    // Corner accent marks — top-left
+    // Corner accent marks
-    Rectangle {
-        x: 40
-        y: 40
-        width: 60
-        height: 1
-        color: M.Theme.base0C
-        opacity: 0.3
-    }
-    Rectangle {
-        x: 40
-        y: 40
-        width: 1
-        height: 60
-        color: M.Theme.base0C
-        opacity: 0.3
-    }
-    // Top-right
-    Rectangle {
-        x: parent.width - 100
-        y: 40
-        width: 60
-        height: 1
-        color: M.Theme.base09
-        opacity: 0.3
-    }
-    Rectangle {
-        x: parent.width - 41
-        y: 40
-        width: 1
-        height: 60
-        color: M.Theme.base09
-        opacity: 0.3
-    }
-    // Bottom-left
-    Rectangle {
-        x: 40
-        y: parent.height - 41
-        width: 60
-        height: 1
-        color: M.Theme.base0E
-        opacity: 0.3
-    }
-    Rectangle {
-        x: 40
-        y: parent.height - 100
-        width: 1
-        height: 60
-        color: M.Theme.base0E
-        opacity: 0.3
-    }
-    // Bottom-right
-    Rectangle {
-        x: parent.width - 100
-        y: parent.height - 41
-        width: 60
-        height: 1
-        color: M.Theme.base08
-        opacity: 0.3
-    }
-    Rectangle {
-        x: parent.width - 41
-        y: parent.height - 100
-        width: 1
-        height: 60
-        color: M.Theme.base08
-        opacity: 0.3
-    }
-
-    // Pulsing corner dots
     Repeater {
         model: [
             {
                 cx: 40,
                 cy: 40,
-                col: M.Theme.base0C
+                col: M.Theme.base0C,
+                dx: 1,
+                dy: 1
             },
             {
-                cx: root.width - 41,
+                cx: -100,
                 cy: 40,
-                col: M.Theme.base09
+                col: M.Theme.base09,
+                dx: -1,
+                dy: 1
             },
             {
                 cx: 40,
-                cy: root.height - 41,
+                cy: -100,
-                col: M.Theme.base0E
+                col: M.Theme.base0E,
+                dx: 1,
+                dy: -1
             },
             {
-                cx: root.width - 41,
+                cx: -100,
-                cy: root.height - 41,
+                cy: -100,
-                col: M.Theme.base08
+                col: M.Theme.base08,
+                dx: -1,
+                dy: -1
             }
         ]
-        Rectangle {
+        Item {
             required property var modelData
-            x: modelData.cx - 2
+            x: modelData.dx > 0 ? modelData.cx : root.width + modelData.cx
-            y: modelData.cy - 2
+            y: modelData.dy > 0 ? modelData.cy : root.height + modelData.cy
+
+            Rectangle {
+                width: 60
+                height: 1
+                color: parent.modelData.col
+                opacity: 0.25
+            }
+            Rectangle {
+                width: 1
+                height: 60
+                color: parent.modelData.col
+                opacity: 0.25
+            }
+
+            Rectangle {
                 width: 5
                 height: 5
                 radius: 2.5
-            color: modelData.col
+                color: parent.modelData.col
-
                 SequentialAnimation on opacity {
                     loops: Animation.Infinite
                     NumberAnimation {
-                    to: 0.15
+                        to: 0.1
                         duration: 1500 + Math.random() * 1000
                         easing.type: Easing.InOutSine
                     }
                     NumberAnimation {
-                    to: 0.6
+                        to: 0.5
                         duration: 1500 + Math.random() * 1000
                         easing.type: Easing.InOutSine
                     }
                 }
             }
         }
+    }
 
-    // Floating particles — slow drifting dots
+    // Floating particles
     Repeater {
-        model: 20
+        model: 15
         Rectangle {
             required property int index
             width: 2
             height: 2
             radius: 1
             color: [M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base09, M.Theme.base08][index % 5]
-            opacity: 0.15 + Math.random() * 0.15
+            opacity: 0.1 + Math.random() * 0.1
-            x: Math.random() * root.width
-            y: Math.random() * root.height
 
             NumberAnimation on x {
                 from: -20