diff --git a/modules/Bar.qml b/modules/Bar.qml index c39fe40..bc80690 100644 --- a/modules/Bar.qml +++ b/modules/Bar.qml @@ -28,19 +28,17 @@ PanelWindow { } Canvas { - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - height: Math.max(M.Theme.screenRadius + 2, 4) + anchors.fill: parent onPaint: { const ctx = getContext("2d"); const w = width; + const h = height; const r = M.Theme.screenRadius; const lw = 3; const hw = lw / 2; - ctx.clearRect(0, 0, w, height); + ctx.clearRect(0, 0, w, h); // Opaque backing behind the stroke ctx.fillStyle = M.Theme.base00.toString(); @@ -56,6 +54,37 @@ PanelWindow { ctx.rect(0, 0, w, lw); } ctx.fill(); + + // Glow below the stroke — fades from gradient color to transparent + const glowH = h - lw; + if (glowH > 0) { + const glowGrad = ctx.createLinearGradient(0, lw, 0, h); + glowGrad.addColorStop(0, "rgba(255,255,255,0.06)"); + glowGrad.addColorStop(1, "transparent"); + + // Use the horizontal gradient as a mask via compositing + const hGrad = ctx.createLinearGradient(0, 0, w, 0); + hGrad.addColorStop(0, M.Theme.base0C.toString()); + hGrad.addColorStop(1, M.Theme.base09.toString()); + + // Draw vertical fade strip + ctx.globalAlpha = 0.12; + ctx.fillStyle = hGrad; + ctx.fillRect(0, lw, w, glowH); + + // Erase bottom portion with transparent fade + ctx.globalAlpha = 1; + ctx.globalCompositeOperation = "destination-out"; + const eraseGrad = ctx.createLinearGradient(0, lw, 0, h); + eraseGrad.addColorStop(0, "transparent"); + eraseGrad.addColorStop(1, "black"); + ctx.fillStyle = eraseGrad; + ctx.fillRect(0, lw, w, glowH); + ctx.globalCompositeOperation = "source-over"; + } + + // Gradient stroke + ctx.globalAlpha = 1; const grad = ctx.createLinearGradient(0, 0, w, 0); grad.addColorStop(0, M.Theme.base0C.toString()); grad.addColorStop(1, M.Theme.base09.toString());