I'm modifying a theme (Sweet-Ambar-Blue-Dark) to make the bottom panel semi-transparent with gaussian blur, and adding a border prevents the tearing that adding blur creates (and looks much better imo). However when I add a 1 pixel border-top the bottom border used to indicate active or focused windows is shrunk by a pixel.
I've tried increasing the panel's height by 1 pixel to compensate but that didn't prevent the bottom border from shrinking. I also tried using a box-shadow instead but that darkens the whole panel and leaves a blurry semi-transparent border that overlaps applications.
These are the exact changes I'm making:```css
#panel {
background-color: rgba(14, 14, 17, 0.65);
background-blur: 2px; }
/* border-top version /
.panel-bottom {
border-top: 1px solid rgba(14, 14, 17, 0.7); }
/ box-shadow version */
.panel-bottom {
box-shadow: 0 -1px 0 0 rgba(14, 14, 17, 0.7); }
This is my system info, in case that's relevant:```
System:
Kernel: 6.8.0-49-generic arch: x86_64 bits: 64 compiler: gcc v: 13.2.0 clocksource: tsc
Desktop: Cinnamon v: 6.2.9 tk: GTK v: 3.24.41 wm: Muffin v: 6.2.0 vt: 7 dm: LightDM v: 1.30.0
Distro: Linux Mint 22 Wilma base: Ubuntu 24.04 noble