u/FlatSloth

I am trying to setup my waybar buttons so that their background changes colour when I hover over them. I also want the power button to go red when I hover over it. However, I cannot get this to work.

Here is my style.css. I don't know if any other files would be helpful.

 "/home/dhillon/.cache/wal/colors-waybar.css";
/* === Base ================================================================ */
waybar * {
  border: 4px;
  border-radius: 4px;
  min-height: 0;
  font-family: "Iosevka Nerd Font";
  font-size: 13px;
}


window#waybar {
  background: ;
  color: ;
  border: 2px solid ;
  transition-property: background-color;
  transition-duration: 0.5s;
}


/* === All modules ========================================================= */
#clock,
#custom-power,
#network,
#bluetooth,
#custom-microphone,
#custom-vpn,
#custom-battery,
#custom-volume,
#custom-brightness {
  padding: 4px 12px;
  margin: 5px 4px;
  background-color: ;
  border: 2px solid ;
  border-radius: 2px;
  color: ;
}


/* === Hover =============================================================== */
#clock:hover,
#custom-power:hover,
#network:hover,
#bluetooth:hover,
#custom-microphone:hover,
#custom-vpn:hover,
#custom-battery:hover,
#custom-volume:hover,
#custom-brightness:hover {
  background-color: ;
  border: 2px solid ;
  color: ;
}


/* === Clock =============================================================== */
#clock {
  color: ;
  font-weight: bold;
  min-width: 150px;
}


/* === Power =============================================================== */
#custom-power {
  color: ;
  min-width: 45px;
}


#custom-power:hover {
  border-color: ;
  color: ;
}


/* === Network ============================================================= */
#network {
  min-width: 45px;
}


#network.disconnected {
  color: ;
}


/* === Bluetooth =========================================================== */
#bluetooth {
  min-width: 45px;
}


#bluetooth.disabled {
  color: ;
}


/* === Microphone ========================================================= */
#custom-microphone {
  min-width: 45px;
}


/* === Battery ============================================================ */
#custom-battery {
  min-width: 150px;
}


/* === Volume ============================================================= */
#custom-volume {
  min-width: 150px;
}


/* === Brightness ========================================================= */
#custom-brightness {
  min-width: 150px;
}


/* === Tooltips ============================================================ */
tooltip {
  background-color: ;
  border: 1px solid ;
  color: ;
  font-weight: bold;
}


tooltip label {
  color: u/import "/home/dhillon/.cache/wal/colors-waybar.css";
/* === Base ================================================================ */
waybar * {
  border: 4px;
  border-radius: 4px;
  min-height: 0;
  font-family: "Iosevka Nerd Font";
  font-size: 13px;
}


window#waybar {
  background: ;
  color: ;
  border: 2px solid ;
  transition-property: background-color;
  transition-duration: 0.5s;
}


/* === All modules ========================================================= */
#clock,
#custom-power,
#network,
#bluetooth,
#custom-microphone,
#custom-vpn,
#custom-battery,
#custom-volume,
#custom-brightness {
  padding: 4px 12px;
  margin: 5px 4px;
  background-color: ;
  border: 2px solid ;
  border-radius: 2px;
  color: ;
}


/* === Hover =============================================================== */
#clock:hover,
#custom-power:hover,
#network:hover,
#bluetooth:hover,
#custom-microphone:hover,
#custom-vpn:hover,
#custom-battery:hover,
#custom-volume:hover,
#custom-brightness:hover {
  background-color: ;
  border: 2px solid ;
  color: ;
}


/* === Clock =============================================================== */
#clock {
  color: ;
  font-weight: bold;
  min-width: 150px;
}


/* === Power =============================================================== */
#custom-power {
  color: ;
  min-width: 45px;
}


#custom-power:hover {
  border-color: ;
  color: ;
}


/* === Network ============================================================= */
#network {
  min-width: 45px;
}


#network.disconnected {
  color: ;
}


/* === Bluetooth =========================================================== */
#bluetooth {
  min-width: 45px;
}


#bluetooth.disabled {
  color: ;
}


/* === Microphone ========================================================= */
#custom-microphone {
  min-width: 45px;
}


/* === Battery ============================================================ */
#custom-battery {
  min-width: 150px;
}


/* === Volume ============================================================= */
#custom-volume {
  min-width: 150px;
}


/* === Brightness ========================================================= */
#custom-brightness {
  min-width: 150px;
}


/* === Tooltips ============================================================ */
tooltip {
  background-color: ;
  border: 1px solid ;
  color: ;
  font-weight: bold;
}


tooltip label {
  color: u/foreground;
}


;
}