161 lines
		
	
	
		
			2.3 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			161 lines
		
	
	
		
			2.3 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
@import "mocha.css";
 | 
						||
 | 
						||
/* -- Global rules -- */
 | 
						||
* {
 | 
						||
  border: none;
 | 
						||
  font-family: "JetbrainsMono Nerd Font";
 | 
						||
  font-size: 15px;
 | 
						||
  min-height: 10px;
 | 
						||
}
 | 
						||
 | 
						||
window#waybar {
 | 
						||
  background: @crust;
 | 
						||
}
 | 
						||
 | 
						||
window#waybar.hidden {
 | 
						||
  opacity: 0.2;
 | 
						||
}
 | 
						||
 | 
						||
/* - Genera rules for visible modules -- */
 | 
						||
#media,
 | 
						||
#clock,
 | 
						||
#cpu,
 | 
						||
#memory,
 | 
						||
#disk,
 | 
						||
#temperature,
 | 
						||
#network {
 | 
						||
  color: @crust;
 | 
						||
  margin-top: 6px;
 | 
						||
  margin-bottom: 6px;
 | 
						||
  padding-left: 10px;
 | 
						||
  padding-right: 10px;
 | 
						||
  transition: none;
 | 
						||
}
 | 
						||
 | 
						||
/* Separation to the left */
 | 
						||
#custom-nixicon,
 | 
						||
#cpu {
 | 
						||
  margin-left: 5px;
 | 
						||
  border-top-left-radius: 10px;
 | 
						||
  border-bottom-left-radius: 10px;
 | 
						||
}
 | 
						||
 | 
						||
/* Separation to the rigth */
 | 
						||
#clock,
 | 
						||
#temperature {
 | 
						||
  margin-right: 20px;
 | 
						||
  border-top-right-radius: 10px;
 | 
						||
  border-bottom-right-radius: 10px;
 | 
						||
}
 | 
						||
 | 
						||
/* -- Specific styles -- */
 | 
						||
 | 
						||
#custom-nixicon {
 | 
						||
  font-size: 20px;
 | 
						||
  color: @sapphire;
 | 
						||
  background: @overlay1;
 | 
						||
  padding: 0px;
 | 
						||
  padding-right: 15px;
 | 
						||
  padding-left: 10px;
 | 
						||
  margin-top: 6px;
 | 
						||
  margin-bottom: 6px;
 | 
						||
  margin-left: 15px;
 | 
						||
}
 | 
						||
 | 
						||
/* Hardware Group */
 | 
						||
#clock {
 | 
						||
  background: @yellow;
 | 
						||
}
 | 
						||
 | 
						||
#cpu {
 | 
						||
  background: @blue;
 | 
						||
}
 | 
						||
 | 
						||
#memory {
 | 
						||
  background: @red;
 | 
						||
}
 | 
						||
 | 
						||
#disk {
 | 
						||
  background: @peach;
 | 
						||
}
 | 
						||
 | 
						||
#temperature {
 | 
						||
  background: @sky;
 | 
						||
}
 | 
						||
 | 
						||
#network {
 | 
						||
  background: @lavender;
 | 
						||
  padding-right: 13px;
 | 
						||
}
 | 
						||
 | 
						||
/* Workspace */
 | 
						||
#workspaces {
 | 
						||
  border-radius: 10px;
 | 
						||
  margin: 6px 5px;
 | 
						||
  padding: 0px 6px;
 | 
						||
}
 | 
						||
 | 
						||
#workspaces button {
 | 
						||
  color: @text;
 | 
						||
  background: transparent;
 | 
						||
  padding: 4px 4px;
 | 
						||
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
 | 
						||
  border: none;
 | 
						||
}
 | 
						||
 | 
						||
#workspaces button.occupied {
 | 
						||
  color: @red;
 | 
						||
}
 | 
						||
 | 
						||
#workspaces button.active {
 | 
						||
  color: @green;
 | 
						||
  text-shadow: 0 0 4px @green;
 | 
						||
}
 | 
						||
 | 
						||
#workspaces button:hover {
 | 
						||
  color: @teal;
 | 
						||
  border: none;
 | 
						||
}
 | 
						||
 | 
						||
#workspaces button.active:hover {}
 | 
						||
 | 
						||
 | 
						||
 | 
						||
/* Media Group */
 | 
						||
#media {
 | 
						||
  background: @overlay2;
 | 
						||
  border-radius: 10px;
 | 
						||
  margin: 5px;
 | 
						||
}
 | 
						||
 | 
						||
#custom-cava {
 | 
						||
	color: @green;
 | 
						||
}
 | 
						||
 | 
						||
#wireplumber, #custom-cava, #mpris {
 | 
						||
    margin-left: 10px;
 | 
						||
    margin-right: 5px;
 | 
						||
}
 | 
						||
 | 
						||
#wireplumber {
 | 
						||
    margin-right: 5px;
 | 
						||
}
 | 
						||
 | 
						||
 | 
						||
/* Weather */ 
 | 
						||
#custom-weather {
 | 
						||
   background: @overlay2;
 | 
						||
   border-radius: 10px;
 | 
						||
   margin: 5px 20px;
 | 
						||
   padding: 0px 10px;
 | 
						||
}
 | 
						||
 | 
						||
/* SwayNC */ 
 | 
						||
#custom-notification {
 | 
						||
  font-family: "NotoSansMono Nerd Font";
 | 
						||
  background: @green;
 | 
						||
  border-radius: 10px;
 | 
						||
  padding-left: 10px;
 | 
						||
  padding-right: 5px;
 | 
						||
}
 |