dotfiles/dotfiles/waybar/style.css

/* {%@@ set bg_rgb = hex2rgb(color.bg) @@%} */
* {
    font: {{@@ font.size.medium @@}}px {{@@ font.interface @@}}, Font Awesome, Fira Code Nerd Font;
    border-radius:0;
    margin:0;
    padding: 0;
    transition-duration:0;
}

window#waybar.empty * {
    color: {{@@ color.txt @@}};
}

window#waybar {
    /* background-color: rgba(30,30,30,.9); */
    transition-duration: .5s;
    background-color: rgba({{@@ bg_rgb @@}}, {{@@ opacity @@}});
    {%@@ if bar_pos == "top" @@%}
        border-bottom:
    {%@@ else @@%}
        border-top:
    {%@@ endif @@%}
      2px solid {{@@ color.bg_dark @@}};
}

window#waybar.solo {
    background-color: {{@@ color.bg @@}};
}

window#waybar.empty {
    {%@@ if color.type == "dark" @@%}
    background-color: transparent;
    {%@@ else @@%}
    background-color: rgba({{@@ bg_rgb @@}}, 0.3);
    {%@@ endif @@%}
    border: 0px solid {{@@ color.bg_dark @@}};
}

#workspaces button {
    color: {{@@ color.bg_light @@}};

    min-width:50px;
    background-color: transparent;
    border: 3px solid transparent;
}

#workspaces button.focused {
    color: {{@@ color.txt @@}};

    {%@@ if bar_pos == "top" @@%}
        border-top:
    {%@@ else @@%}
        border-bottom:
    {%@@ endif @@%}
        3px solid {{@@ accent_color @@}};
    /* border-bottom: 3px solid transparent; */
}

/*Window Title*/
#window{
    color: {{@@ color.txt @@}};
    margin:0 4px;
}

#mode{
    color: {{@@ accent_color @@}};
}

#custom-mpd,
#tray,
#clock,
#network,
#battery,
#backlight,
#pulseaudio,
#custom-mail,
#custom-spigot,
#custom-updates,
#custom-weather,
#custom-torrentD,
#custom-torrentS,
#custom-caffeine
{
    margin: 0 7px;
    color: {{@@ color.txt @@}};
    opacity:.7;
}

#battery{
    margin-right:15px;
}

#clock,
#custom-weather
{
    font-size: {{@@ font.size.big @@}}px;
}
#network,
#pulseaudio,
#custom-caffeine
{
    margin-top:-1px;
    font-size:16px;
}

#mpd,
#window,
#workspaces
{
    font-weight:normal;
}


#custom-recording {
    min-width:15px;
    color: #ee4040;
}

#mpd.paused {
    font-size: 0;
    border: none;
}

#tray {
    padding: 0;
    margin: 0;
}