cava: Add format_silent option and css triggers

[yerlotic]

trafficstars

This PR adds format_silent config option; updated and silent css triggers.

Explanation:

• If format_silent is set and hide_on_silence is set to false and audio has not been playing for sleep_timer seconds, then cava module will be showing format_silent string until audio starts playing.
• #cava.updated triggers when a new frame is shown
• #cava.silent triggers when there has been no audio for sleep_timer seconds

When this PR gets merged, I will write documentation for these options

@Alexays if there is anything wrong with this PR, please point it out

[yerlotic]

Merging this makes the following configuration possible:

~/.config/waybar/config.jsonc

{
    "layer": "top",
    "spacing": 10,
    "modules-center": ["cava"],
    "cava": {
        "framerate": 60,
        "autosens": 1,
        "bars": 10,
        "lower_cutoff_freq": 50,
        "higher_cutoff_freq": 10000,
        "stereo": true,
        "reverse": false,
        "bar_delimiter": 0,
        "monstercat": false,
        "waves": true,
        "sleep_timer": 1,
        "format_silent": "quiet",
        "hide_on_silence": false,
        "input_delay": 1,
        "format-icons" : [" ", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█", ],
        "on-click": "playerctl play-pause",
    },
}

~/.config/waybar/style.css

@define-color base #303446;
@define-color text #f2d5cf;

window#waybar {
    background: none;
}

.module {
    background-color: @base;
    color: @text;
    padding: 0px 10px;
    margin: 5px 0px;
    border-radius: 10px;
    border: none;
}

#cava {
    font-family: 'Hack Nerd Font';
    font-size: 25px;
    
    transition-property: min-width, color;
    transition-timing-function: ease-in-out;
}

#cava:not(.silent) {
    min-width: 150px;
    color: transparent;

    transition-duration: 1s;
}

#cava.silent {
    animation-name: show;
    animation-duration: 1s;
    animation-timing-function: steps(12);
    animation-iteration-count: 1;
    animation-direction: normal;

    transition-duration: 1s;
}

#cava.updated {
    color: @text;
    transition-duration: 0.4s;
}

@keyframes show {
    from {
        color: transparent;
    }
}

[Alexays]

LGTM, can you update the man?

[yerlotic]

LGTM, can you update the man?

Done

[Alexays]

Thanks!