vinzenz/nova-shell
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gradient: subtle glow fading from stroke to bar bottom via compositing

Browse source
This commit is contained in:
Damocles 2026-04-12 21:01:24 +02:00
parent deb71231fb
commit 4c90b4a9a2
1 changed files with 34 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

39
modules/Bar.qml
View file

@ -28,19 +28,17 @@ PanelWindow {
} }
Canvas { Canvas {
anchors.top: parent.top anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
height: Math.max(M.Theme.screenRadius + 2, 4)
onPaint: { onPaint: {
const ctx = getContext("2d"); const ctx = getContext("2d");
const w = width; const w = width;
const h = height;
const r = M.Theme.screenRadius; const r = M.Theme.screenRadius;
const lw = 3; const lw = 3;
const hw = lw / 2; const hw = lw / 2;
ctx.clearRect(0, 0, w, height); ctx.clearRect(0, 0, w, h);
// Opaque backing behind the stroke // Opaque backing behind the stroke
ctx.fillStyle = M.Theme.base00.toString(); ctx.fillStyle = M.Theme.base00.toString();
@ -56,6 +54,37 @@ PanelWindow {
ctx.rect(0, 0, w, lw); ctx.rect(0, 0, w, lw);
} }
ctx.fill(); 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); const grad = ctx.createLinearGradient(0, 0, w, 0);
grad.addColorStop(0, M.Theme.base0C.toString()); grad.addColorStop(0, M.Theme.base0C.toString());
grad.addColorStop(1, M.Theme.base09.toString()); grad.addColorStop(1, M.Theme.base09.toString());