Cant seem to apply styles to window for .solo and .empty

[Nikki1993]

Finally got to ricing my setup a bit more and discovered that I cant get the styles to apply. I have the following piece of css to test however no styles appear for solo or empty, only the rgba colors. Running Arch with Waybar v0.6.6

window#waybar {
  background: rgba(43, 48, 59, 1);
}

window#waybar.empty {
  background: transparent;
}

window#waybar.solo {
  background: red;
}

[Alexays]

Weird, still not working on latest version?

[Nikki1993]

Nope, still not working

[Alexays]

Can you share me your configs files :)

[Nikki1993]

sure thing :)

{
  "layer": "top", // Waybar at top layer
  "position": "top", // Waybar at the bottom of your screen
  "height": 40, // Waybar height
  // "width": 1280, // Waybar width
  // Choose the order of the modules
  "modules-left": ["sway/workspaces", "sway/mode"],
  "modules-center": ["clock"],
  "modules-right": [
    // "cpu",
    // "memory",
    "battery",
    "pulseaudio",
    "network",
    "tray"
  ],
  // Modules configuration
  "sway/workspaces": {
    "disable-scroll": true,
    "all-outputs": true,
    "format": "{icon}",
    "format-icons": {
      "1": "",
      "2": "",
      "3": "",
      "4": "",
      "default": ""
    }
  },
  "sway/mode": {
    "format": "<span style=\"italic\">{}</span>"
  },
  "tray": {
    "icon-size": 26,
    "spacing": 10
  },
  "clock": {
    "format": "{:%Y-%m-%d | %H:%M}"
  },
  // "cpu": {
  //     "format": "{usage}% "
  // },
  // "memory": {
  //     "format": "{}% "
  // },
  "battery": {
    "bat": "BAT0",
    "states": {
      "good": 95,
      "warning": 30,
      "critical": 15
    },
    "format": "{capacity}% {icon}",
    // "format-good": "", // An empty format will hide the module
    // "format-full": "",
    "format-icons": ["", "", "", "", ""]
  },
  "network": {
    // "interface": "wlp0s20f3", // (Optional) To force the use of this interface
    "format-wifi": "{essid} ",
    "format-ethernet": "{ifname}: {ipaddr} ",
    "format-disconnected": "Disconnected ",
    "interval": "1"
  },
  "pulseaudio": {
    // "scroll-step": 1,
    "format": "{volume}% {icon}",
    "format-bluetooth": "{volume}% {icon}",
    "format-muted": "",
    "format-icons": {
      "headphones": "",
      "handsfree": "",
      "headset": "",
      "phone": "",
      "portable": "",
      "car": "",
      "default": ["", ""]
    },
    "on-click": "pavucontrol"
  }
}

and css

* {
  border: none;
  border-radius: 0;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 24px;
  min-height: 0;
  color: white;
}

window#waybar {
  background: transparent;
}

window#waybar.empty {
  background: transparent;
}

window#waybar.solo {
  background: red;
}

#workspaces {
  border-bottom-right-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
}

#workspaces button {
  padding: 0 10px;
  background: transparent;
  border-bottom: 3px solid transparent;
}

#workspaces button:last-child {
  border-bottom-right-radius: 10px;
}

#workspaces button:hover {
  box-shadow: inherit;
  text-shadow: inherit;
}

#workspaces button.focused {
  border-bottom: 3px solid #fff;
}

#mode {
  border-bottom: 3px solid #fff;
}

#clock,
#battery,
#cpu,
#memory,
#network,
#pulseaudio,
#custom-spotify,
#tray,
#mode {
  font-size: 16px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.5);
}

#clock {
  font-size: 18px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#battery.charging {
  background-color: #26a65b;
}

@keyframes blink {
  to {
    background-color: transparent;
  }
}

#battery.charging {
  background: #3a9104;
}

#battery.warning:not(.charging) {
  background: red;
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#battery.critical:not(.charging) {
  background: red;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#battery {
  border-bottom-left-radius: 10px;
}

/*

#cpu {
  border-bottom: 3px solid #2ecc71;
}

#memory {
  border-bottom: 3px solid #9b59b6;
}

#network {
  border-bottom: 3px solid #64baff;
}

#network.disconnected {
  border-bottom: 3px solid #f53c3c;
}

#pulseaudio {
  border-bottom: 3px solid #f1c40f;
}

#pulseaudio.muted {
  background: #c6262e;
}

#tray {
  border-bottom: 3px solid #715344;
} */

[Alexays]

You need to sway/window module in order to get it to work :)