rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

quickshell: 2px borders to match hyprland window borders

Browse source 
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
1 changed files with 27 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

49
settings/quickshell.nix
View file

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