dots/waybar/style.css

/* @import url("/home/indrajith/.cache/wal/colors-waybar.css"); */

* {
    all: unset;
	font-family: 'EnvyCodeR Nerd Font';
    transition: background-color .3s ease;
    
}

#waybar .horizontal {
	/* background: rgba(0,0,0,0.6); */
}

tooltip,
#tray menu{
    background: #000000;
    border: 2px solid #ebdbb2;
    border-radius: 7.5px;
    color: #ebdbb2;
    padding: 5px;
}

#tray menu * {
    border-radius: 2.5px;
    transition: all .3s ease;
}

#tray menu *:hover, #tray menu *:focus {
    background: #ebdbb2;
    color: #000000;
}


window#waybar {
    background: transparent;
}

window#waybar.hidden {
    opacity: 0.2;
}

window {
	background: transparent;
}

window#waybar.empty #window {
    background-color:transparent;
}


#custom-sep {
	color: @color1;
	font-size: 20px;
}

#custom-sep2 {
	color: transparent;
	font-size: 4px;
}


.modules-right {
	padding-top: 0;
}

.modules-center {
	padding: 0;
}

#workspaces>button {
	font-size: 12.5px;
	transition: all 0.3s ease;
	padding: 0 6px;
	margin: 0;
	border-radius: 2.5px;
}

#workspaces>button.empty.flat {
	color: #ebdbb2;;
}

#workspaces>button.urgent {
	color: #000000;
}

#workspaces>button.active.flat {
	color: #000000;
	background: #ebdbb2;
}

#workspaces>button.inactive {
	color:  #ebdbb2;;
}

#workspaces>button:nth-child(1) {
	border-radius: 100px 16px 16px 100px
}

#workspaces>button:last-child {
	border-radius: 16px 100px 100px 16px
}

#group-player {
	background-color: @color1;
	border-radius: 16px 100px 100px 16px;
	padding: 0 16px;
}

#group-power {
	padding: 7px;
}

#custom-notif {
	padding: 2.5px 15px;
	border-radius: 100px;
	margin: 7.5px;
	background: @color3;
}

#custom-infolabel {
	font-size: 20px;
    margin-right: 5px;
	padding: 0 5px;
	padding-right: 5px;
}

#tray {
	padding: 2px;
	background: @foreground;
	border-radius: 16px 100px 100px 16px;
}

#clock {
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 16px;
	font-weight: bold;
	/* border: 1px solid #e74c3c; */
}

#win {
	padding: 2px 7px;
	background-color: @color1;
	border-radius: 16px 100px 100px 16px;
	min-width: 20px;
}

#window {
	margin-left: 10px;
	margin-right: 10px;
	border: 2px solid #ebdbb2;
	border-radius: 16px;
	padding: 0 10px;
	color: #ebdbb2;
	background: #000000;
}

#window.win2 {
	color: @foreground;
	opacity: 0.7;
}

#group-info {
	background: @color1;
	margin: 0;
	border-radius: 16px 100px 100px 16px;
}


#pulseaudio {
	background-color: #000000;
	padding: 0 8px;
	margin: 2px;
	border-radius: 16px;
	border: 2px solid #ebdbb2;
	color: #ebdbb2;
}
#taskbar button {
	margin: 5px 0;
	transition: all .3s ease;
}
#taskbar button.active {
	margin: 0 0 10px 0;
}

#cpu {
	background-color: #000000;
	padding: 0 10px;
	margin: 1px;
	border-radius: 16px;
	border: 2px solid #ebdbb2;
 	color: #ebdbb2;
}

#custom-pacman {
	background-color: @color3;
	padding: 0 10px;
	margin: 1px;
	border-radius: 3.5px;
}

/* #memory { */
/* 	background-color: #000000; */
/* 	padding: 0 10px; */
/* 	margin: 1px; */
/* 	border-radius: 3.5px; */
/* 	color: #ffffff; */
/* 	margin-left: 10px; */
/* 	margin-right: 10px; */
/* 	border: 2px solid #ebdbb2; */
/* } */
#mpd {
	margin-left: 10px;
	margin-right: 10px;
	border: 2px solid #ebdbb2;
	border-radius: 16px;
	padding: 0 10px;
	color: #ebdbb2;
	background: #000000;
}
#custom-mem {
	margin-left: 10px;
	margin-right: 10px;
	border: 2px solid #ebdbb2;
	border-radius: 16px;
	padding: 0 10px;
	color: #ebdbb2;
	background: #000000;
}

#battery {
	background-color: @color7;
	padding: 0 10px;
	margin: 1px;
	border-radius: 3.5px;
}

#custom-kb {
	background-color: @color6;
	padding: 0 10px;
	margin: 1px;
	border-radius: 3.5px;
}
#backlight {
	background-color: @color4;
	padding: 0 10px;
	margin: 1px;
	border-radius: 3.5px;
}

#disk {
	background-color: #000000;
	padding: 0 10px;
	margin: 1px;
	border-radius: 16px 100px 100px 16px;
}

#custom-wal {
	background-color: @color6;
	padding: 0 10px;
	border-radius: 100px 16px 16px 100px;
	font-size: 20px;
}

#custom-sback,
#custom-playpause,
#custom-sfw {
	margin: 8px 2px;
	border-radius: 3.5px;
	padding: 2px 8px;
}

#custom-sback {
	background: @color3;
}

#custom-playpause {
	background: @color4;
}

#custom-sfw {
	background: @color5;
}

.modules-left,
.modules-center
{
	background: #000000;
	border: 2px solid #ebdbb2;
	border-radius: 100px;
	padding: 2px 2px;
	color: #ebdbb2;
}

/* .modules-right  {

} */

#custom-exit {
	padding-right: 10px;
	color: #e74c3c;
}

#custom-browser,
#custom-filemanager {
	margin-right: 23px;
}