From 971e44aaf14eebd9182048ce1853f0c4529d208a Mon Sep 17 00:00:00 2001
From: Damocles <damocles@darkest.space>
Date: Sun, 12 Apr 2026 20:26:25 +0200
Subject: [PATCH] bar: offset content below gradient, fade gradient to bar
 bottom

---
 modules/Bar.qml | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/modules/Bar.qml b/modules/Bar.qml
index d334d36..4134e5b 100644
--- a/modules/Bar.qml
+++ b/modules/Bar.qml
@@ -31,7 +31,7 @@ PanelWindow {
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
-        height: Math.max(M.Theme.screenRadius + 2, 4)
+        height: parent.height
 
         onPaint: {
             const ctx = getContext("2d");
@@ -42,21 +42,37 @@ PanelWindow {
 
             ctx.clearRect(0, 0, w, height);
 
-            // Opaque backing behind the stroke so it's not transparent
-            ctx.fillStyle = M.Theme.base00.toString();
+            // Vertical fade from stroke color into bar background
+            const h = height;
+            const vGrad = ctx.createLinearGradient(0, 0, 0, h);
+            const hGrad = ctx.createLinearGradient(0, 0, w, 0);
+            hGrad.addColorStop(0, M.Theme.base0C.toString());
+            hGrad.addColorStop(1, M.Theme.base09.toString());
+
+            // Draw the fade: full opacity at top, transparent at bottom
+            ctx.globalAlpha = 0.15;
+            ctx.fillStyle = hGrad;
             ctx.beginPath();
-            if (r > lw) {
+            if (r > 0) {
                 ctx.moveTo(0, r);
                 ctx.arc(r, r, r, Math.PI, -Math.PI / 2);
                 ctx.lineTo(w - r, 0);
                 ctx.arc(w - r, r, r, -Math.PI / 2, 0);
-                ctx.lineTo(w, lw);
-                ctx.lineTo(0, lw);
+                ctx.lineTo(w, h);
+                ctx.lineTo(0, h);
             } else {
-                ctx.rect(0, 0, w, lw);
+                ctx.rect(0, 0, w, h);
             }
             ctx.fill();
 
+            // Fade out towards bottom
+            ctx.globalAlpha = 1;
+            const fadeGrad = ctx.createLinearGradient(0, lw, 0, h);
+            fadeGrad.addColorStop(0, "transparent");
+            fadeGrad.addColorStop(1, M.Theme.base00.toString());
+            ctx.fillStyle = fadeGrad;
+            ctx.fillRect(0, lw, w, h - lw);
+
             // Gradient stroke
             const grad = ctx.createLinearGradient(0, 0, w, 0);
             grad.addColorStop(0, M.Theme.base0C.toString());
@@ -80,6 +96,7 @@ PanelWindow {
 
     Item {
         anchors.fill: parent
+        anchors.topMargin: 3
         anchors.leftMargin: Math.max(M.Theme.barPadding, M.Theme.screenRadius)
         anchors.rightMargin: Math.max(M.Theme.barPadding, M.Theme.screenRadius)