Background around rounded corners

[Thewolf2068]

Hi, so i have this weird issue where a background appears behind waybar after I for example move a window behind it or run wlogout.
How its supposed to look:

How it looks after i run wlogout:

(Sry for weird image resolutions)
I use hyprland-git on arch.
My config and css :
Config:

{
    "height": 30,
    "spacing": 4,
    "margin-top": 5,
    "margin-left":5,
    "margin-right":5,
    "margin-bottom":5,
    "reload_style_on_change": true,

    "layer": "top",
    "modules-left": ["custom/arch", "hyprland/workspaces",],
    "modules-center": ["custom/media"],
    "modules-right": ["tray", "pulseaudio", "clock", "custom/power"],

    "custom/media": {
        "format": "{icon} {text}",
        "return-type": "json",
        //"max-length": 50,
        "format-icons": {
            "spotify": "",
            "vlc": "󰕼",
            "mpv": "",
            "default": "🎜"
        },
        "escape": true,
        "on-click": "playerctl play-pause",
        //"exec": "$HOME/.config/waybar/mediaplayer.py > /dev/null" // Script in resources folder
        "exec": "/usr/bin/python3 $HOME/.config/waybar/scripts/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
    },

    "hyprland/workspaces": {
        "format": "{icon}",
        "on-click": "activate",
        "format-icons": {
            "active": "<span color='#ca9ee6'></span>",
            "default": "<span color='#eebebe'></span>"
        },
        "persistent-workspaces": {
                "*": 10
        }
    },


    "custom/power": {
        "format":"<span color='#179299'>⏻</span>",
        "on-click": "wlogout -b 4",
        "tooltip": false
    },
    "custom/arch": {
        "format": "<span size='large' color='#179299'>󰣇</span>",
        "on-click": "$HOME/.config/waybar/scripts/next_wallpaper.sh",
        "on-click-right": "$HOME/.config/waybar/scripts/prev_wallpaper.sh",
        "tooltip-format": "btw"
    },

    "tray": {
        "icon-size": 21,
        "spacing": 7,
        "show-passive-items": true
    },
    "pulseaudio": {
        "format": "{icon}",
        "tooltip-format": "{volume}%",
        "format-muted": "",
        "format-icons": {
            "default": ["", ""]
        },
        "on-click": "pavucontrol",
        "on-click-right": "pactl -- set-sink-volume 0 100%"
    },

    "clock": {
        "format-alt": "{:%a, %d. %b  %H:%M}",
        "on-click": " ",
        "tooltip": false
    }
}

Style.css:

@import "frappe.css";
* { all: initial; }
* {
    /* `otf-font-awesome` is required to be installed for icons */
    font-family: "FiraCode Nerd", sans-serif, FontAwesome;
    font-size: 13px;
}

window {
    background-color: alpha(@base, 1);
    border: 2px solid alpha(@pink, 1);
    border-radius: 10px;


}
button {
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -3px transparent;
    /* Avoid rounded borders under each button name */
    border: none;
    border-radius: 0;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
button:hover {
    background: inherit;
    box-shadow: inset 0 -3px alpha(@teal, 1);
}

/* you can set a style on hover for any module like this */


#workspaces button {
    padding: 0 5px;
    background-color: transparent;
    color: #ffffff;
}



#workspaces button.focused {
    background-color: #64727D;
    box-shadow: inset 0 -3px #ffffff;
}

#workspaces button.urgent {
    box-shadow: inset 0 -3px #eb4d4b;
}

#mode {
    background-color: #64727D;
    box-shadow: inset 0 -3px #ffffff;
}

#custom-power,
#custom-arch
#clock,
#calendar,
#battery,
#cpu,
#memory,
#disk,
#temperature,
#backlight,
#network,
#pulseaudio,
#wireplumber,
#custom-media,
#tray,
#mode,
#idle_inhibitor,
#scratchpad,
#power-profiles-daemon,
#mpd {
    padding: 0 10px;
    color: #ffffff;
}

#window,
#workspaces {
    margin: 0 4px;
}

/* If workspaces is the leftmost module, omit left margin */
.modules-left > widget:first-child > #workspaces {
    margin-left: 0;
}

/* If workspaces is the rightmost module, omit right margin */
.modules-right > widget:last-child > #workspaces {
    margin-right: 0;
}



#battery {
    background-color: #ffffff;
    color: #000000;
}

#battery.charging, #battery.plugged {
    color: #ffffff;
    background-color: #26A65B;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: #000000;
    }
}

/* Using steps() instead of linear as a timing function to limit cpu usage */
#battery.critical:not(.charging) {
    background-color: #f53c3c;
    color: #ffffff;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: steps(12);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#power-profiles-daemon {
    padding-right: 15px;
}

#power-profiles-daemon.performance {
    background-color: #f53c3c;
    color: #ffffff;
}

#power-profiles-daemon.balanced {
    background-color: #2980b9;
    color: #ffffff;
}

#power-profiles-daemon.power-saver {
    background-color: #2ecc71;
    color: #000000;
}

label:focus {
    background-color: #000000;
}

#cpu {
    background-color: #2ecc71;
    color: #000000;
}

#memory {
    background-color: #9b59b6;
}

#disk {
    background-color: #964B00;
}

#backlight {
    background-color: #90b1b1;
}

#network {
    background-color: #2980b9;
}

#network.disconnected {
    background-color: #f53c3c;
}





#wireplumber {
    background-color: #fff0f5;
    color: #000000;
}

#wireplumber.muted {
    background-color: #f53c3c;
}

#custom-media {
    color: alpha(@pink, 1);
    min-width: 100px;
}

#temperature {
    background-color: #f0932b;
}

#temperature.critical {
    background-color: #eb4d4b;
}

#tray {
    color: alpha(@pink, 1);
    -gtk-icon-theme: "Papirus";

}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: #eb4d4b;
}

#idle_inhibitor {
    background-color: #2d3436;
}

#idle_inhibitor.activated {
    background-color: #ecf0f1;
    color: #2d3436;
}

#mpd {
    background-color: #66cc99;
    color: #2a5c45;
}

#mpd.disconnected {
    background-color: #f53c3c;
}

#mpd.stopped {
    background-color: #90b1b1;
}

#mpd.paused {
    background-color: #51a37a;
}

#language {
    background: #00b093;
    color: #740864;
    padding: 0 5px;
    margin: 0 5px;
    min-width: 16px;
}

#keyboard-state {
    background: #97e1ad;
    color: #000000;
    padding: 0 0px;
    margin: 0 5px;
    min-width: 16px;
}

#keyboard-state > label {
    padding: 0 5px;
}

#keyboard-state > label.locked {
    background: rgba(0, 0, 0, 0.2);
}

#scratchpad {
    background: rgba(0, 0, 0, 0.2);
}

#scratchpad.empty {
	background-color: transparent;
}

#privacy {
    padding: 0;
}

#privacy-item {
    padding: 0 5px;
    color: white;
}

#privacy-item.screenshare {
    background-color: #cf5700;
}

#privacy-item.audio-in {
    background-color: #1ca000;
}

#privacy-item.audio-out {
    background-color: #0069d4;
}

/* 
IMPORTANT STUFF 
IMPORTANT STUFF 
IMPORTANT STUFF 
IMPORTANT STUFF 
*/

#custom-power {
    margin-right: 10;
}
#custom-arch {
    margin-left:10;
}

#pulseaudio {
    color: alpha(@pink, 1);
    margin-right:10;
}

#clock {
    color: alpha(@pink, 1);
    margin-right:5;
}

#tray {
    color: alpha(@pink, 1);
    -gtk-icon-theme: "Papirus";

}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: #eb4d4b;
}