hyprmoonarch/home/config/waybar/style.css

* {
    border: none;
    font-family: "JetBrainsMono Nerd Font", sans-serif;
    font-size: 13px;
    color:alpha(@theme_text_color, 0.8);
}
window#waybar {
    background: transparent;
    
}
/*-----main groups----*/
.modules-right {
    margin: 0 5px 0 0;
    padding-left:5px;
    padding-right:10px;
    border-radius: 10px;
    /* background-color:alpha(@theme_selected_bg_color, 0.15); */
    background: @theme_bg_color
}
.modules-center {
    margin: 0 0 0 0;
    border-radius: 10px;
}
.modules-left {
    margin: 0 0 0 5px;
    /* background-color:alpha(@theme_selected_bg_color, 0.15);
    background: @theme_bg_color */
    border-radius: 10px;
    margin-left: 5px;
}

/**
## ALL MODULES
**/
#clock,
#battery,
#backlight,
#cpu,
#memory,
#bluetooth,
#temperature,
#network,
#pulseaudio,
#tray,
#mode,
#idle_inhibitor,
#workspaces,
#custom-power,
#custom-menu,
#custom-media,
#custom-notification,
#custom-updates,
#custom-pacman,
#user,
#cava,
#custom-gpu-usage,
#custom-cpugov,
#custom-vpn.connected,
#power-profiles-daemon,
#privacy,
#gamemode{
    padding:0px 10px;
    
}

/**
* GROUPS
**/
#sys, #stats, #net, #sound {
    margin: 0;
    
    border-radius:10px;
    color:alpha(@theme_text_color, 0.5);
    background-color: @theme_bg_color;
}


/**
* SYS
**/
#sys {
    padding:0 10px 0 10px;
}
#custom-power {
    margin-left:0;
    margin-right:0;
    padding-left:0;
}
#user {
    padding-left:0;
    font-weight:bold;
}
#custom-weather {
    padding-left: 5px;
}


#stats .drawer-child {
    padding-left: 10px;
    padding-right: 10px;
}

#tray {
    background-color: @theme_bg_color;
    border-radius:10px;
    margin: 0;
}

#custom-notification {
    padding-right:0
}

/**
* SOUND
**/

#cava {
    background-color: transparent;
    padding-left: 0;
}
#pulseaudio-slider {
    padding-left: 0px;
    padding-right: 10px;
}
#pulseaudio-slider slider {
    min-height: 0px;
    min-width: 0px;
    opacity: 0;
    background-image: none;
    border: none;
    box-shadow: none;
    background-color: @insensitive_bg_color;
    border:2px solid @theme_selected_bg_color;
}
#pulseaudio-slider trough {
    min-height: 4px;
    min-width: 80px;
    border-radius: 5px;
    background-color: #11111b;
}
#pulseaudio-slider highlight {

    min-width: 5px;
    border-radius: 5px;
    background-color: #6c7086;
}

#custom-updates {
    padding-right:5px;
    padding-left: 5px;
}


/**
* MISC
**/
#mpris {
    background-color: rgba(172,176,208, .3);
    border-radius:20px;
    margin: 8px 10px 8px 0px;
    padding:0 10px;
}

/**
* WORKSPACES
**/
#workspaces {
    padding:0 10px 0 0px;
    border-radius:10px
}
#workspaces button {
    padding: 0px 10px;
    background-color: shade(@theme_bg_color, 1);
    outline:none;
    border-radius: 10px;
    margin: 8px 5px 8px 0px;
}
#workspaces button:last-child {
    margin-right: 0;
}
#workspaces button.empty {
    color:inherit;
} 
#workspaces button.active { 
    background-color: transparent;
}
#workspaces button.visible { 
    background-color: shade(@theme_bg_color, 1.5);
}
#workspaces button.urgent {
    color: #cc3436;
}
#workspaces button:hover { 
    background-color:alpha(@theme_selected_bg_color, 0.4);
    box-shadow: inherit;
    text-shadow: inherit;
}


/**
## INDICATORS
**/
#pulseaudio.muted {
    color: #cc3436;
}
#battery.charging {
    color: #2dcc36;
}
#battery.warning:not(.charging) {
	color: #e6e600;
}
#battery.critical:not(.charging) {
    color: #cc3436;
}
#temperature.critical {
    color: #cc3436;
}

#idle_inhibitor.activated {
    color:alpha(@theme_selected_bg_color, 0.9);
}

#indicators {
    padding-right:5px;
    padding-left:5px;
    background-color:shade(@theme_bg_color, 1.5);
    border-radius:10px;
    margin:10px 0;
}


/**
* TASKBAR
**/
#taskbar {
    font-size:8px;
    background: transparent;
    opacity: 1;
    padding:0;
    border-radius:10px;
    background: @theme_bg_color;
}
#taskbar.empty {
    background: transparent;
}
#taskbar button {
    padding:3px 10px 3px 10px;
    transition:100ms border ease-in-out;
    border-radius:10px;
    font-size:8px;
}

#taskbar button:not(:first-child) {
    border-radius:0px;
}
#taskbar button:first-child {
    border-radius: 10px 0 0 10px;
}
#taskbar button:last-child {
    border-radius: 0 10px 10px 0;
}
#taskbar button:last-child:first-child {
    border-radius: 10px;
}

#taskbar button:hover {

    background-color:alpha(@theme_selected_bg_color, 0.2);
}
#taskbar button.active {
    background-color:alpha(@theme_selected_bg_color, 0.1);
    opacity:1;
}