#Adding top border to bottom panel shrinks bottom border.

4 messages · Page 1 of 1 (latest)

shrewd wyvern
#

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
#

The original panel:

#

The border-top version:

#

The box-shadow version: