170 lines
		
	
	
	
		
			3 KiB
		
	
	
	
		
			Text
		
	
	
	
	
	
			
		
		
	
	
			170 lines
		
	
	
	
		
			3 KiB
		
	
	
	
		
			Text
		
	
	
	
	
	
| /*
 | |
|  * ~/.config/waybar/style.css
 | |
|  * */
 | |
| 
 | |
| * {
 | |
|     /* `otf-font-awesome` is required to be installed for icons */
 | |
|     font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
 | |
|     font-size: 13px;
 | |
| }
 | |
| 
 | |
| window#waybar {
 | |
|     background-color: rgba(43, 48, 59, 0.75);
 | |
|     color: #ffffff;
 | |
|     transition-property: background-color;
 | |
|     transition-duration: .5s;
 | |
| }
 | |
| 
 | |
| /* Top bar which only contains title can be transparent */
 | |
| window#waybar.top {
 | |
| 	background-color: transparent; 
 | |
| }
 | |
| 
 | |
| window#waybar.hidden {
 | |
|     opacity: 0.2;
 | |
| }
 | |
| 
 | |
| /*
 | |
| window#waybar.empty {
 | |
|     background-color: transparent;
 | |
| }
 | |
| window#waybar.solo {
 | |
|     background-color: #FFFFFF;
 | |
| }
 | |
| */
 | |
| 
 | |
| window#waybar.termite {
 | |
|     background-color: #3F3F3F;
 | |
| }
 | |
| 
 | |
| window#waybar.chromium {
 | |
|     background-color: #000000;
 | |
|     border: none;
 | |
| }
 | |
| 
 | |
| #workspaces button {
 | |
|     padding: 0 5px;
 | |
|     background-color: transparent;
 | |
|     color: #ffffff;
 | |
|     /* Use box-shadow instead of border so the text isn't offset */
 | |
|     /* Avoid rounded borders under each workspace name */
 | |
|     border: none;
 | |
|     border-radius: 0;
 | |
|     min-width: 30px; 
 | |
| }
 | |
| 
 | |
| /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 | |
| #workspaces button:hover {
 | |
|     background: rgba(0, 0, 0, 0.2);
 | |
|     box-shadow: inset 0 3px #ffffff;
 | |
| }
 | |
| 
 | |
| #workspaces button.focused {
 | |
|     background-color: #0E423C; /* REPLACE */
 | |
|     box-shadow: inset 0 3px #ffffff; 
 | |
| }
 | |
| 
 | |
| #workspaces button.urgent {
 | |
|     background-color: #eb4d4b;
 | |
| }
 | |
| 
 | |
| #mode {
 | |
|     background-color: #64727D;
 | |
|     border-bottom: 3px solid #ffffff;
 | |
| }
 | |
| 
 | |
| #clock,
 | |
| #battery,
 | |
| #cpu,
 | |
| #memory,
 | |
| #disk,
 | |
| #temperature,
 | |
| #backlight,
 | |
| #network,
 | |
| #pulseaudio,
 | |
| #custom-media,
 | |
| #tray,
 | |
| #mode,
 | |
| #idle_inhibitor,
 | |
| #mpd {
 | |
|     padding: 0 10px;
 | |
|     color: #ffffff;
 | |
| }
 | |
| 
 | |
| #window,
 | |
| #workspaces {
 | |
|     margin: 0 4px;
 | |
| }
 | |
| 
 | |
| /* If workspaces is the leftmost module, omit left margin */
 | |
| .modules-left > widget:first-child > #workspaces {
 | |
|     margin-left: 0;
 | |
| }
 | |
| 
 | |
| /* If workspaces is the rightmost module, omit right margin */
 | |
| .modules-right > widget:last-child > #workspaces {
 | |
|     margin-right: 0;
 | |
| }
 | |
| 
 | |
| #battery.charging, #battery.plugged {
 | |
|     color: #ffffff;
 | |
|     background-color: #26A65B;
 | |
| }
 | |
| 
 | |
| @keyframes blink {
 | |
|     to {
 | |
|         background-color: #ffffff;
 | |
|         color: #000000;
 | |
|     }
 | |
| }
 | |
| 
 | |
| #battery.critical:not(.charging) {
 | |
|     background-color: #f53c3c;
 | |
|     color: #ffffff;
 | |
|     animation-name: blink;
 | |
|     animation-duration: 0.5s;
 | |
|     animation-timing-function: linear;
 | |
|     animation-iteration-count: infinite;
 | |
|     animation-direction: alternate;
 | |
| }
 | |
| 
 | |
| label:focus {
 | |
|     background-color: #000000;
 | |
| }
 | |
| 
 | |
| #pulseaudio.muted {
 | |
|     color: #0E423C; /* REPLACE */
 | |
| }
 | |
| 
 | |
| #custom-media {
 | |
|     background-color: #66cc99;
 | |
|     color: #2a5c45;
 | |
|     min-width: 100px;
 | |
| }
 | |
| 
 | |
| #custom-media.custom-spotify {
 | |
|     background-color: #66cc99;
 | |
| }
 | |
| 
 | |
| #custom-media.custom-vlc {
 | |
|     background-color: #ffa000;
 | |
| }
 | |
| 
 | |
| #temperature.critical {
 | |
|     background-color: #eb4d4b;
 | |
| }
 | |
| 
 | |
| #tray > .passive {
 | |
|     -gtk-icon-effect: dim;
 | |
| }
 | |
| 
 | |
| #tray > .needs-attention {
 | |
|     -gtk-icon-effect: highlight;
 | |
|     background-color: #eb4d4b;
 | |
| }
 | |
| 
 | |
| #idle_inhibitor.activated {
 | |
|     background-color: #ecf0f1;
 | |
|     color: #2d3436;
 | |
| }
 | |
| 
 |