latest broke custom-<x> style

[primalmotion]

Since the last merge galore, it seems something broke regarding custom modules styling.

This used to work (the icon was blinking in red) Now it does not. Whatever I put in #custom-recording css style seems to be totally ignored

"custom/recording": {
	"interval": 2,
	"exec-if" : "pgrep wf-recorder",
	"exec": "echo 'recording'",
	"format": "\uf111",
	"tooltip": false
}

@keyframes blink-recording {
	from { color: #ff2222; }
	to { color: #990000; }
}

#custom-recording {
	padding: 0 8px 0 8px;
	min-width: 60px;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
        animation-name: blink-recording;
}

[primalmotion]

actually not totally ignored. Animation and color are ignored for instance, but not something like margin-top

[primalmotion]

I suspect this PR #1120

[pinselimo]

I can't reproduce this issue. I've been using #1120 for a year and used a blinking animation. I copied your example and only changed the exec-if to a program that was running on my machine and the button showed up blinking.

(checked on master 504132d with the default config + your changes)

[primalmotion]

Ok. I have tried with latest master and it works. It does not work with this waybar-hyprland-git package though

The pkgbuild basically enables experimental flag (https://aur.archlinux.org/cgit/aur.git/tree/PKGBUILD?h=waybar-hyprland-git)

[primalmotion]

I tried with an animation on background-color and it works. What does not work is "color" (either static color: x or through an animation)

[frkli1965]

Hi,

Having similar issues here with the latest commits also...

In my case, the 'memory' module ignores the 'color' tag and the 'custom menu' module ignores font sizing whereas all the other modules e.g. idle_inhibitor, network, pulseaudio, cpu, tray, clock, etc. I deploy appear OK.

My 'config'...

---

{
//"layer": "top", // Waybar at top layer
"position": "top", // Waybar position (top|bottom|left|right)
//"height": 30, // Waybar height (to be removed for auto height)
// "width": 1280, // Waybar width
"output": ["DP-1", "!DP-3"], // Only display Waybar on DP-1 and not on DP-3
//"spacing": 0, // Default = 0
"mode": "dock", // Default = "dock" - Other options: "overlay"
//"": "",
"width": 1910,
"margin-top": 4,

// Choose the order of the modules
"modules-left": ["custom/menu", "sway/workspaces"],
"modules-center": ["sway/window"],
"modules-right": ["idle_inhibitor", "network", "pulseaudio", "cpu", "memory", "tray", "clock"],

// Modules configuration
"sway/workspaces": {
    "disable-scroll": true,
    "all-outputs": true,
    "format": "{icon}",
    "format-icons": {
        "1": "🯱",
        "2": "🯲",
        "3": "🯳",
        "4": "🯴",
        "5": "🯵",
        "6": "🯶",
        "7": "🯷",
        "8": "🯸",
        "9": "🯹",
        "10": "🯰"
//      "urgent": "",
//      "focused": "",
//      "default": ""
    }
},
"sway/mode": {
    "format": "<span style=\"italic\">{}</span>"
},
"custom/menu": {
    "format": "",
    "on-click": "swaymsg exec \\$menu",
    "tooltip": false
},
"mpd": {
    "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ",
    "format-disconnected": "Disconnected ",
    "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
    "unknown-tag": "N/A",
    "interval": 2,
    "consume-icons": {
        "on": " "
    },
    "random-icons": {
        "off": "<span color=\"#f53c3c\"></span> ",
        "on": " "
    },
    "repeat-icons": {
        "on": " "
    },
    "single-icons": {
        "on": "1 "
    },
    "state-icons": {
        "paused": "",
        "playing": ""
    },
    "tooltip-format": "MPD (connected)",
    "tooltip-format-disconnected": "MPD (disconnected)"
},
"idle_inhibitor": {
    "format": "{icon}",
    "format-icons": {
        "deactivated": "🯀",
        "activated": "🮱"
    }
},
"tray": {
    // "icon-size": 21,
    "spacing": 10
},
"clock": {
    "interval": 1,
    "format": "{:%a %e %b %Y %H:%M:%S}",
    "tooltip": true,
    "tooltip-format": "<big>{:%B %Y}</big>\n<tt>{calendar}</tt>",
    "on-click": "swaymsg exec \\$calendar"
},
"cpu": {
    "interval": 5,
    "format": "CPU: {usage}%",
    "states": {
        "warning": 70,
        "critical": 90
    },
    "on-click": "swaymsg exec \\$term_float htop"
},
"memory": {
    "format": "MEM: {}%"
},
"temperature": {
    // "thermal-zone": 2,
    // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
    "critical-threshold": 80,
    // "format-critical": "{temperatureC}°C {icon}",
    "format": "{temperatureC}°C {icon}",
    "format-icons": ["", "", ""]
},
"backlight": {
    // "device": "acpi_video1",
    "format": "{percent}% {icon}",
    "format-icons": ["", ""]
},
"battery": {
    "states": {
        "full": 100,
        "high": 90,
        "good": 60,
        "low": 35,
        "warning": 25,
        "critical": 15
    },
    "format-charging": "⚡ Charging - {capacity}%",
    "format-plugged": "",
    "format-full": "{capacity}% ",
    "format-high": "{capacity}% ",
    "format-good": "{capacity}% ",
    "format-low": "{capacity}% ",
    "format-warning": "{capacity}% ",
    "format-critical": "Time Remaining - {time}"
},
"battery#bat2": {
    "bat": "BAT2"
},
"network": {
    // "interface": "wlp2*", // (Optional) To force the use of this interface
    "format-wifi": "{essid} ({signalStrength}%) ",
    "format-ethernet": "IP: {ipaddr}",
    "format-linked": "{ifname} (No IP)",
    "format-disconnected": "Disconnected ⚠",
    "format-alt": "{ifname}",
    "tooltip": false,
    "on-click": "swaymsg exec \\$term_float nmtui"
},
"pulseaudio": {
    // "scroll-step": 1, // %, can be a float
    "format": "VOL: {volume}% {icon}",
    "format-bluetooth": "{volume}% {icon} {format_source}",
    "format-bluetooth-muted": " {icon} {format_source}",
    "format-muted": "MUTED: 0% {icon}",
    "format-source": "{volume}% ",
    "format-source-muted": "",
    "format-icons": {
        "headphone": "",
        "hands-free": "",
        "headset": "",
        "phone": "",
        "portable": "",
        "car": "",
        "default": ["", "", ""]
    },
    "on-click": "pavucontrol"
},
"custom/media": {
    "format": "{icon} {}",
    "return-type": "json",
    "max-length": 40,
    "format-icons": {
        "spotify": "",
        "default": "🎜"
    },
    "escape": true,
    "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder
    // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
}

}

---

My 'style.css'...

---

• {
  border-radius: 20;
  font-family: Noto Sans;
  font-size: 10px;
  margin: 0px 2px;
  padding: 1px 4px;
  }

window#waybar {
background-color: rgba(45, 89, 134, 0.1); /* color: #2d5986 opacity: 0.1 /
background-image: linear-gradient(to right, rgba(51, 51, 204, 0.3), rgba(102, 0, 102, 0.7), rgba(51, 51, 204, 0.3));
border-bottom: 1px solid rgba(77, 136, 255, 0.5); / color: #4d88ff opacity: 0.5 /
border-left: 2px solid rgba(77, 136, 255, 0.6); / color: #4d88ff opacity: 0.6 /
border-right: 2px solid rgba(77, 136, 255, 0.6); / color: #4d88ff opacity: 0.6 /
border-top: 1px solid rgba(77, 136, 255, 0.5); / color: #4d88ff opacity: 0.5 /
color: rgb(26, 198, 255); / color: #1ac6ff */
}

@Keyframes blink {
to {
background-color: rgba(38, 77, 115, 0.8); /* color: #264d73 opacity: 0.8 /
border-bottom: 1px solid rgb(204, 0, 0); / color: #cc0000 /
border-left: 1px solid rgb(255, 128, 0); / color: #ff8000 /
border-right: 1px solid rgb(255, 128, 0); / color: #ff8000 /
border-top: 1px solid rgb(204, 0, 0); / color: #cc0000 /
color: rgb(204, 0, 0); / color: #cc0000 */
}
}

@Keyframes menu {
to {
color: rgb(153, 221, 255); /* color: #99ddff */
}
}

#battery.charging,
#battery.critical,
#battery.critical.charging,
#battery.full.charging,
#battery.good.charging,
#battery.high.charging,
#custom-menu,
#battery.low.charging,
#battery.warning,
#battery.warning.charging,
#cpu.critical,
#network.disconnected,
#pulseaudio.muted,
#workspaces button.urgent {
animation-direction: alternate;
animation-duration: 3.0s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#battery,
#battery.charging,
#battery.full,
#battery.full.charging,
#battery.high,
#battery.high.charging,
#battery.good,
#battery.good.charging,
#battery.low,
#battery.low.charging,
#battery.warning,
#battery.warning.charging,
#battery.critical,
#battery.critical.charging,
#clock,
#cpu,
#cpu.critical,
#custom-menu,
#idle_inhibitor,
#idle_inhibitor.activated,
#memory,
#network,
#network.disconnected,
#pulseaudio,
#pulseaudio.muted,
#tray,
#workspaces button,
#workspaces button.focused,
#workspaces button:hover,
#workspaces button.urgent {
background-color: rgba(45, 89, 134, 0.15); /* color: #2d5986 opacity: 0.15 /
background-image: linear-gradient(180deg, rgba(77, 184, 255, 0.95), rgba(77, 136, 255, 0.6), rgba(0, 60, 179, 0.5), rgba(77, 136, 255, 0.5));
border-bottom: 1px solid rgba(77, 136, 255, 0.4); / color: #4d88ff opacity: 0.4 /
border-left: 1px solid rgba(77, 184, 255, 0.4); / color: #4db8ff opacity: 0.4 /
border-right: 1px solid rgba(77, 184, 255, 0.4); / color: #4db8ff opacity: 0.4 /
border-top: 1px solid rgba(77, 184, 255, 0.5); / color: #4db8ff opacity: 0.5 /
color: rgba(26, 198, 255, 0.95); / color: #1ac6ff opacity: 0.95 */
}

#custom-menu,
#workspaces button,
#workspaces button.focused,
#workspaces button:hover,
#workspaces button.urgent {
background-image: linear-gradient(225deg, rgba(77, 136, 255, 0.6), rgba(0, 60, 179, 0.5), rgba(77, 136, 255, 0.5), rgba(77, 184, 255, 0.6));
border-bottom: 1px solid rgba(77, 184, 255, 0.5); /* color: #4db8ff opacity: 0.5 /
border-left: 1px solid rgba(77, 184, 255, 0.5); / color: #4db8ff opacity: 0.5 /
border-right: 1px solid rgba(77, 136, 255, 0.6); / color: #4d88ff opacity: 0.6 /
border-top: 1px solid rgba(77, 136, 255, 0.6); / color: #4d88ff opacity: 0.6 */
}

#custom-menu {
animation-duration: 6.0s;
animation-name: menu;
color: rgba(77, 136, 255, 0.6); /* color: #4d88ff opacity: 0.6 */
font-size: 18px;
min-width: 22px;
}

#workspaces button,
#workspaces button.focused,
#workspaces button:hover,
#workspaces button.urgent {
min-width: 10px;
padding-top: 4px;
}

#battery.charging,
#battery.critical,
#battery.critical.charging,
#battery.full.charging,
#battery.good.charging,
#battery.high.charging,
#battery.low.charging,
#battery.warning,
#battery.warning.charging,
#cpu.critical,
#network.disconnected,
#pulseaudio.muted,
#workspaces button.urgent {
animation-name: blink;
}

#idle_inhibitor.activated,
#workspaces button.focused {
border-bottom: 1px solid rgb(255, 51, 51); /* color: #ff3333 /
border-left: 1px solid rgb(255, 128, 0); / color: #ff8000 /
border-right: 1px solid rgb(255, 128, 0); / color: #ff8000 /
border-top: 1px solid rgb(255, 51, 51); / color: #ff3333 /
color: rgb(255, 128, 0); / color: #ff8000 */
}

#battery.critical,
#battery.critical.charging,
#battery.low,
#battery.low.charging,
#battery.warning,
#battery.warning.charging,
#cpu.critical,
#network.disconnected,
#pulseaudio.muted,
#workspaces button:hover,
#workspaces button.urgent {
border-bottom: 1px solid rgb(255, 51, 51); /* color: #ff3333 /
border-left: 1px solid rgb(204, 0, 0); / color: #cc0000 /
border-right: 1px solid rgb(204, 0, 0); / color: #cc0000 /
border-top: 1px solid rgb(255, 51, 51); / color: #ff3333 /
color: rgb(255, 128, 0); / color: #ff8000 */
}

#idle_inhibitor,
#idle_inhibitor.activated {
font-size: 9px;
min-width: 22px;
padding-left: 5px;
padding-top: 3px;
}

#network,
#network.disconnected {
min-width: 95px;
}

#battery,
#cpu,
#cpu.critical,
#memory,
#pulseaudio,
#pulseaudio.muted {
min-width: 65px;
}

#clock {
min-width: 145px;
}

#battery.critical,
#battery.critical.charging {
animation-duration: 1.0s;
}

#battery.full.charging {
animation-duration: 5.0s;
}

#battery.high.charging {
animation-duration: 4.0s;
}

#battery.warning,
#battery.warning.charging,
#workspaces button:hover,
#workspaces button.urgent {
animation-duration: 2.0s;
}

---

Feel free to try out my style-sheet btw, as it's beautiful, even if I say so myself.

Kind regards,

[Alexays]

Can you also take a look here @pinselimo?
Thx!

[HarHarLinks]

@Alexays Fixed for me in 0.9.15

[primalmotion]

I am still unable to use color: on any custom-x class :/