quickshell: 2px borders to match hyprland window borders

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-06-11 14:57:04 +01:00
parent db99982c79
commit 2fcbc6865e

View file

@ -89,6 +89,8 @@ in
readonly property color barBg: "#B3${c.base00}"
readonly property color toastBg: "#E6${c.base00}"
readonly property string fontFamily: "${monoFont}"
// Matches hyprland general.border_size (col.inactive_border = base03)
readonly property int borderWidth: 2
}
'';
};
@ -469,7 +471,7 @@ in
id: barBorderLeft
x: 0; y: 30
width: bar.hasGap ? bar.gapLeft : bar.width
height: 1
height: Theme.borderWidth
color: Theme.base03
}
@ -480,7 +482,7 @@ in
x: bar.gapRight
y: 30
width: bar.width - x
height: 1
height: Theme.borderWidth
color: Theme.base03
}
@ -1068,7 +1070,7 @@ in
ctx.closePath(); ctx.fill();
// Border stroke along the curve
ctx.strokeStyle = Theme.base03;
ctx.lineWidth = 1;
ctx.lineWidth = Theme.borderWidth;
ctx.beginPath();
ctx.arc(0, 8, 8, 0, -Math.PI / 2, true);
ctx.stroke();
@ -1097,7 +1099,7 @@ in
ctx.closePath(); ctx.fill();
// Border stroke along the curve
ctx.strokeStyle = Theme.base03;
ctx.lineWidth = 1;
ctx.lineWidth = Theme.borderWidth;
ctx.beginPath();
ctx.arc(8, 8, 8, -Math.PI / 2, Math.PI, true);
ctx.stroke();
@ -1126,26 +1128,28 @@ in
onPaint: {
var ctx = getContext("2d");
var w = width, h = height, r = 8;
// o centers the stroke so its outer edge lands on the rect edge
var b = Theme.borderWidth, o = b / 2;
ctx.clearRect(0, 0, w, h);
if (h < 1) return;
ctx.strokeStyle = Theme.base03;
ctx.lineWidth = 1;
ctx.lineWidth = b;
ctx.beginPath();
// Start below the top ear, go down left side
ctx.moveTo(0.5, r);
ctx.lineTo(0.5, h - r);
ctx.moveTo(o, r);
ctx.lineTo(o, h - r);
// Bottom-left curve
ctx.arc(r + 0.5, h - r - 0.5, r, Math.PI, Math.PI / 2, true);
ctx.arc(r + o, h - r - o, r, Math.PI, Math.PI / 2, true);
// Bottom edge
if (dropdown.alignRight) {
// Stop 8px before right edge bottom-right ear continues
ctx.lineTo(w - r, h - 0.5);
ctx.lineTo(w - r, h - o);
} else {
ctx.lineTo(w - r - 0.5, h - 0.5);
ctx.lineTo(w - r - o, h - o);
// Bottom-right curve
ctx.arc(w - r - 0.5, h - r - 0.5, r, Math.PI / 2, 0, true);
ctx.arc(w - r - o, h - r - o, r, Math.PI / 2, 0, true);
// Right side up (stop at ear height)
ctx.lineTo(w - 0.5, r);
ctx.lineTo(w - o, r);
}
ctx.stroke();
}
@ -1186,7 +1190,7 @@ in
ctx.fill();
// Border stroke along the curve
ctx.strokeStyle = Theme.base03;
ctx.lineWidth = 1;
ctx.lineWidth = Theme.borderWidth;
ctx.beginPath();
ctx.arc(0, 8, 8, 0, -Math.PI / 2, true);
ctx.stroke();
@ -2352,7 +2356,7 @@ in
ctx.arc(0, 8, 8, 0, -Math.PI / 2, true);
ctx.closePath(); ctx.fill();
ctx.strokeStyle = Theme.base03;
ctx.lineWidth = 1;
ctx.lineWidth = Theme.borderWidth;
ctx.beginPath();
ctx.arc(0, 8, 8, 0, -Math.PI / 2, true);
ctx.stroke();
@ -2381,7 +2385,7 @@ in
ctx.arc(8, 8, 8, -Math.PI / 2, Math.PI, true);
ctx.closePath(); ctx.fill();
ctx.strokeStyle = Theme.base03;
ctx.lineWidth = 1;
ctx.lineWidth = Theme.borderWidth;
ctx.beginPath();
ctx.arc(8, 8, 8, -Math.PI / 2, Math.PI, true);
ctx.stroke();
@ -2407,17 +2411,18 @@ in
onPaint: {
var ctx = getContext("2d");
var w = width, h = height, r = 8;
var b = Theme.borderWidth, o = b / 2;
ctx.clearRect(0, 0, w, h);
if (h < 1) return;
ctx.strokeStyle = Theme.base03;
ctx.lineWidth = 1;
ctx.lineWidth = b;
ctx.beginPath();
ctx.moveTo(0.5, r);
ctx.lineTo(0.5, h - r);
ctx.arc(r + 0.5, h - r - 0.5, r, Math.PI, Math.PI / 2, true);
ctx.lineTo(w - r - 0.5, h - 0.5);
ctx.arc(w - r - 0.5, h - r - 0.5, r, Math.PI / 2, 0, true);
ctx.lineTo(w - 0.5, r);
ctx.moveTo(o, r);
ctx.lineTo(o, h - r);
ctx.arc(r + o, h - r - o, r, Math.PI, Math.PI / 2, true);
ctx.lineTo(w - r - o, h - o);
ctx.arc(w - r - o, h - r - o, r, Math.PI / 2, 0, true);
ctx.lineTo(w - o, r);
ctx.stroke();
}
onWidthChanged: requestPaint()