waybar: extract style to separate file
This commit is contained in:
		
							parent
							
								
									43a40da5d2
								
							
						
					
					
						commit
						9425abdf54
					
				
					 2 changed files with 118 additions and 122 deletions
				
			
		| 
						 | 
				
			
			@ -2,6 +2,22 @@
 | 
			
		|||
let
 | 
			
		||||
  inherit (pkgs.uservars) key theme accent font;
 | 
			
		||||
  inherit (theme) color;
 | 
			
		||||
 | 
			
		||||
  cssVariables = {
 | 
			
		||||
    src = ./style.css;
 | 
			
		||||
 | 
			
		||||
    accent_color = accent.color;
 | 
			
		||||
 | 
			
		||||
    color_bg = color.bg;
 | 
			
		||||
    color_bg_dark = color.bg_dark;
 | 
			
		||||
    color_bg_light = color.bg_light;
 | 
			
		||||
    color_txt = color.txt;
 | 
			
		||||
 | 
			
		||||
    font_interface = font.interface;
 | 
			
		||||
 | 
			
		||||
    font_size_big = "${toString font.size.big}px";
 | 
			
		||||
    font_size_medium = "${toString font.size.medium}px";
 | 
			
		||||
  };
 | 
			
		||||
in
 | 
			
		||||
{
 | 
			
		||||
  config = {
 | 
			
		||||
| 
						 | 
				
			
			@ -145,128 +161,7 @@ in
 | 
			
		|||
          on-click-right = "${pkgs.pulse_sink}/bin/pulse_sink";
 | 
			
		||||
        };
 | 
			
		||||
      }];
 | 
			
		||||
      style = ''
 | 
			
		||||
        /* {%@@ set bg_rgb = hex2rgb(color.bg) @@%} */
 | 
			
		||||
        * {
 | 
			
		||||
                font: ${
 | 
			
		||||
                  toString font.size.medium
 | 
			
		||||
                }px "${font.interface}", Font Awesome, Fira Code Nerd Font;
 | 
			
		||||
                border-radius:0;
 | 
			
		||||
                margin:0;
 | 
			
		||||
                padding: 0;
 | 
			
		||||
                transition-duration:0;
 | 
			
		||||
        }
 | 
			
		||||
        window#waybar {
 | 
			
		||||
                /* background-color: rgba(30,30,30,.9); */
 | 
			
		||||
                transition-duration: .5s;
 | 
			
		||||
                /* TODO: background opacity */
 | 
			
		||||
                background-color: ${color.bg};
 | 
			
		||||
                /*{%@@ if bar_pos == "top" @@%}
 | 
			
		||||
                        border-bottom:
 | 
			
		||||
                {%@@ else @@%}
 | 
			
		||||
                        border-top:
 | 
			
		||||
                {%@@ endif @@%}*/
 | 
			
		||||
                border-bottom:
 | 
			
		||||
                    2px solid ${color.bg_dark};
 | 
			
		||||
        }
 | 
			
		||||
        window#waybar.solo {
 | 
			
		||||
                background-color: ${color.bg};
 | 
			
		||||
        }
 | 
			
		||||
        #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 @@%}*/
 | 
			
		||||
                        border-top:
 | 
			
		||||
                        3px solid ${accent.color};
 | 
			
		||||
                /* border-bottom: 3px solid transparent; */
 | 
			
		||||
        }
 | 
			
		||||
        /*Window Title*/
 | 
			
		||||
        #window {
 | 
			
		||||
                color: ${color.txt};
 | 
			
		||||
                margin:0 4px;
 | 
			
		||||
        }
 | 
			
		||||
        #mode {
 | 
			
		||||
                color: ${accent.color};
 | 
			
		||||
        }
 | 
			
		||||
        #mpd,
 | 
			
		||||
        #custom-mpd,
 | 
			
		||||
        #tray,
 | 
			
		||||
        #clock,
 | 
			
		||||
        #network,
 | 
			
		||||
        #battery,
 | 
			
		||||
        #backlight,
 | 
			
		||||
        #bluetooth,
 | 
			
		||||
        #pulseaudio,
 | 
			
		||||
        #custom-vpn,
 | 
			
		||||
        #custom-mail,
 | 
			
		||||
        #custom-spigot,
 | 
			
		||||
        #custom-updates,
 | 
			
		||||
        #custom-weather,
 | 
			
		||||
        #custom-unpushed,
 | 
			
		||||
        #custom-transmissionD,
 | 
			
		||||
        #custom-transmissionS,
 | 
			
		||||
        #custom-delugeD,
 | 
			
		||||
        #custom-delugeS,
 | 
			
		||||
        #custom-caffeine
 | 
			
		||||
        {
 | 
			
		||||
                margin: 0 7px;
 | 
			
		||||
                color: ${color.txt};
 | 
			
		||||
                opacity:.7;
 | 
			
		||||
        }
 | 
			
		||||
        #battery{
 | 
			
		||||
                margin-right:15px;
 | 
			
		||||
        }
 | 
			
		||||
        #clock,
 | 
			
		||||
        #custom-weather
 | 
			
		||||
        {
 | 
			
		||||
                font-size: ${toString font.size.big}px;
 | 
			
		||||
        }
 | 
			
		||||
        #custom-vpn {
 | 
			
		||||
            margin: 0;
 | 
			
		||||
            margin-right: 1px;
 | 
			
		||||
        }
 | 
			
		||||
        #network,
 | 
			
		||||
        #custom-vpn,
 | 
			
		||||
        #pulseaudio,
 | 
			
		||||
        #custom-caffeine
 | 
			
		||||
        {
 | 
			
		||||
                margin-top:-1px;
 | 
			
		||||
                font-size:17px;
 | 
			
		||||
        }
 | 
			
		||||
        #mpd,
 | 
			
		||||
        #window,
 | 
			
		||||
        #workspaces
 | 
			
		||||
        {
 | 
			
		||||
                font-weight:normal;
 | 
			
		||||
        }
 | 
			
		||||
        #custom-unpushed,
 | 
			
		||||
        #custom-recording {
 | 
			
		||||
                min-width:15px;
 | 
			
		||||
                color: #ee4040;
 | 
			
		||||
        }
 | 
			
		||||
        #tray {
 | 
			
		||||
                padding: 0;
 | 
			
		||||
                margin: 0;
 | 
			
		||||
        }
 | 
			
		||||
        #language {
 | 
			
		||||
                font-size: ${toString font.size.medium}px;
 | 
			
		||||
                color: ${color.bg_light};
 | 
			
		||||
        }
 | 
			
		||||
        #custom-sleep {
 | 
			
		||||
                color: ${accent.color};
 | 
			
		||||
                font-size: ${toString font.size.big}px;
 | 
			
		||||
                font-weight: bold;
 | 
			
		||||
        }
 | 
			
		||||
      '';
 | 
			
		||||
      style = builtins.readFile (pkgs.substituteAll cssVariables);
 | 
			
		||||
    };
 | 
			
		||||
    home.packages = with pkgs; [ waybar ];
 | 
			
		||||
  };
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -0,0 +1,101 @@
 | 
			
		|||
* {
 | 
			
		||||
  font: @font_size_medium@ @font_interface@, Font Awesome, Fira Code Nerd Font;
 | 
			
		||||
  border-radius: 0;
 | 
			
		||||
  margin: 0;
 | 
			
		||||
  padding: 0;
 | 
			
		||||
  transition-duration: 0;
 | 
			
		||||
}
 | 
			
		||||
window#waybar {
 | 
			
		||||
  transition-duration: 0.5s;
 | 
			
		||||
  /* TODO: background opacity */
 | 
			
		||||
  background-color: @color_bg@;
 | 
			
		||||
  border-bottom: 2px solid @color_bg_dark@;
 | 
			
		||||
}
 | 
			
		||||
window#waybar.solo {
 | 
			
		||||
  background-color: @color_bg@;
 | 
			
		||||
}
 | 
			
		||||
#workspaces button {
 | 
			
		||||
  color: @color_bg_light@;
 | 
			
		||||
  min-width: 50px;
 | 
			
		||||
  background-color: transparent;
 | 
			
		||||
  border: 3px solid transparent;
 | 
			
		||||
}
 | 
			
		||||
#workspaces button.focused {
 | 
			
		||||
  color: @color_txt@;
 | 
			
		||||
  border-top: 3px solid @accent_color@;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#window {
 | 
			
		||||
  color: @color_txt@;
 | 
			
		||||
  margin: 0 4px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#mode {
 | 
			
		||||
  color: @accent_color@;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#mpd,
 | 
			
		||||
#custom-mpd,
 | 
			
		||||
#tray,
 | 
			
		||||
#clock,
 | 
			
		||||
#network,
 | 
			
		||||
#battery,
 | 
			
		||||
#backlight,
 | 
			
		||||
#bluetooth,
 | 
			
		||||
#pulseaudio,
 | 
			
		||||
#custom-vpn,
 | 
			
		||||
#custom-mail,
 | 
			
		||||
#custom-spigot,
 | 
			
		||||
#custom-updates,
 | 
			
		||||
#custom-weather,
 | 
			
		||||
#custom-unpushed,
 | 
			
		||||
#custom-transmissionD,
 | 
			
		||||
#custom-transmissionS,
 | 
			
		||||
#custom-delugeD,
 | 
			
		||||
#custom-delugeS,
 | 
			
		||||
#custom-caffeine {
 | 
			
		||||
  margin: 0 7px;
 | 
			
		||||
  color: @color_txt@;
 | 
			
		||||
  opacity: 0.7;
 | 
			
		||||
}
 | 
			
		||||
#battery {
 | 
			
		||||
  margin-right: 15px;
 | 
			
		||||
}
 | 
			
		||||
#clock,
 | 
			
		||||
#custom-weather {
 | 
			
		||||
  font-size: @font_size_big@;
 | 
			
		||||
}
 | 
			
		||||
#custom-vpn {
 | 
			
		||||
  margin: 0;
 | 
			
		||||
  margin-right: 1px;
 | 
			
		||||
}
 | 
			
		||||
#network,
 | 
			
		||||
#custom-vpn,
 | 
			
		||||
#pulseaudio,
 | 
			
		||||
#custom-caffeine {
 | 
			
		||||
  margin-top: -1px;
 | 
			
		||||
  font-size: 17px;
 | 
			
		||||
}
 | 
			
		||||
#mpd,
 | 
			
		||||
#window,
 | 
			
		||||
#workspaces {
 | 
			
		||||
  font-weight: normal;
 | 
			
		||||
}
 | 
			
		||||
#custom-unpushed,
 | 
			
		||||
#custom-recording {
 | 
			
		||||
  min-width: 15px;
 | 
			
		||||
  color: #ee4040;
 | 
			
		||||
}
 | 
			
		||||
#tray {
 | 
			
		||||
  padding: 0;
 | 
			
		||||
  margin: 0;
 | 
			
		||||
}
 | 
			
		||||
#language {
 | 
			
		||||
  font-size: @font_size_medium@;
 | 
			
		||||
  color: @color_bg_light@;
 | 
			
		||||
}
 | 
			
		||||
#custom-sleep {
 | 
			
		||||
  color: @accent_color@;
 | 
			
		||||
  font-size: @font_size_big@;
 | 
			
		||||
  font-weight: bold;
 | 
			
		||||
}
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue