Waybar: Rewrite with replaceVars.
This commit is contained in:
parent
487d56501d
commit
6ad336c373
SSH key fingerprint:
SHA256:3kBb4iV2ahufEBNq+vFbUe4QYfHt98DHQjN7QaptY9k
|
|
@ -19,3 +19,8 @@ includes = [ "*.nix" ]
|
|||
command = "shfmt"
|
||||
options = [ "-s", "-w" ]
|
||||
includes = [ "*.sh" ]
|
||||
|
||||
[formatter.prettier]
|
||||
command = "prettier"
|
||||
options = [ "-w" ]
|
||||
includes = [ "*.css" ]
|
||||
|
|
|
|||
|
|
@ -156,6 +156,8 @@
|
|||
nativeBuildInputs = with pkgs; [
|
||||
nixd
|
||||
nixfmt-rfc-style
|
||||
nodePackages.prettier
|
||||
nodePackages.prettier-plugin-toml
|
||||
shfmt
|
||||
treefmt
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,5 +1,43 @@
|
|||
{ util, pkgs, ... }@args:
|
||||
# ISSUE: https://github.com/Alexays/Waybar/issues/3303
|
||||
# This way I am forced to apply the padding to children of each group
|
||||
# instead of the whole group.
|
||||
{
|
||||
util,
|
||||
pkgs,
|
||||
config,
|
||||
...
|
||||
}@args:
|
||||
let
|
||||
accent = "#${config.module.style.color.accent}";
|
||||
fontSerif = config.module.style.font.serif.name;
|
||||
fontPropo = "Terminess Nerd Font Propo";
|
||||
fontSize = "${toString config.module.style.font.size.desktop}px";
|
||||
foreground = "#${config.module.style.color.fg.light}";
|
||||
paddingH = "12px";
|
||||
paddingV = "0";
|
||||
backgroundColor = "rgba(${config.module.style.color.bgR},${config.module.style.color.bgG},${config.module.style.color.bgB},${toString config.module.style.opacity.desktop})";
|
||||
borderColor = "rgba(${config.module.style.color.borderR},${config.module.style.color.borderG},${config.module.style.color.borderB},${toString config.module.style.opacity.desktop})";
|
||||
border = "${toString config.module.style.window.border}px solid ${borderColor}";
|
||||
borderSize = "${toString config.module.style.window.border}px";
|
||||
|
||||
styleRaw = pkgs.writeText "waybar-style-raw" (util.readFiles (util.ls ./style));
|
||||
style = pkgs.replaceVars styleRaw {
|
||||
inherit
|
||||
accent
|
||||
fontSerif
|
||||
fontPropo
|
||||
fontSize
|
||||
foreground
|
||||
paddingH
|
||||
paddingV
|
||||
backgroundColor
|
||||
borderColor
|
||||
border
|
||||
borderSize
|
||||
;
|
||||
};
|
||||
in
|
||||
{
|
||||
inherit style;
|
||||
config = (import ./config args).file;
|
||||
style = pkgs.writeText "WaybarStyle" (util.catText (util.ls ./style) args);
|
||||
}
|
||||
|
|
|
|||
7
home/file/waybar/style/Common.css
Normal file
7
home/file/waybar/style/Common.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
* {
|
||||
font-family: "@fontSerif@", "@fontPropo@";
|
||||
/* prettier-ignore */
|
||||
font-size: @fontSize@;
|
||||
/* prettier-ignore */
|
||||
color: @foreground@;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{ config, ... }:
|
||||
{
|
||||
text = ''
|
||||
* {
|
||||
font-family: "${config.module.style.font.serif.name}", "Terminess Nerd Font Propo";
|
||||
font-size: ${toString config.module.style.font.size.desktop}px;
|
||||
color: #${config.module.style.color.fg.light};
|
||||
}
|
||||
'';
|
||||
}
|
||||
94
home/file/waybar/style/Plugin.css
Normal file
94
home/file/waybar/style/Plugin.css
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/* See the ISSUE. */
|
||||
#custom-taghw1,
|
||||
#custom-tagbt1 {
|
||||
/* prettier-ignore */
|
||||
padding-left: @paddingH@;
|
||||
}
|
||||
|
||||
#custom-taghw2,
|
||||
#custom-tagbt2 {
|
||||
/* prettier-ignore */
|
||||
padding-right: @paddingH@;
|
||||
}
|
||||
|
||||
/* Padding for global widgets. */
|
||||
#clock,
|
||||
#custom-display,
|
||||
#custom-network,
|
||||
#mpris,
|
||||
#pulseaudio,
|
||||
#scratchpad {
|
||||
/* prettier-ignore */
|
||||
padding: @paddingV@ @paddingH@;
|
||||
}
|
||||
|
||||
/* Padding for combined widgets. */
|
||||
#cpu.load,
|
||||
#custom-powerlimit,
|
||||
#custom-powersave,
|
||||
#memory,
|
||||
#temperature {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
/* Hover style. */
|
||||
#batteryinfo:hover,
|
||||
#clock:hover,
|
||||
#custom-display:hover,
|
||||
#custom-network:hover,
|
||||
#hardware:hover,
|
||||
#mpris:hover,
|
||||
#pulseaudio:hover,
|
||||
#scratchpad:hover,
|
||||
#workspaces button:hover {
|
||||
/* prettier-ignore */
|
||||
background-color: @borderColor@;
|
||||
}
|
||||
|
||||
/* Critical state. */
|
||||
#battery,
|
||||
#cpu.usage,
|
||||
#custom-display,
|
||||
#custom-network,
|
||||
#memory,
|
||||
#pulseaudio,
|
||||
#temperature {
|
||||
/* prettier-ignore */
|
||||
border-top: @borderSize@ solid transparent;
|
||||
/* prettier-ignore */
|
||||
border-bottom: @borderSize@ solid transparent;
|
||||
}
|
||||
|
||||
#battery.critical,
|
||||
#cpu.usage.critical,
|
||||
#custom-display.modified,
|
||||
#custom-network.issue,
|
||||
#custom-network.vpn,
|
||||
#custom-network.btlow,
|
||||
#memory.critical,
|
||||
#pulseaudio.muted,
|
||||
#pulseaudio.source-muted,
|
||||
#temperature.critical {
|
||||
/* prettier-ignore */
|
||||
border-top: @borderSize@ solid @accent@;
|
||||
}
|
||||
|
||||
/* Widget-specific styling. */
|
||||
#workspaces button {
|
||||
/* prettier-ignore */
|
||||
padding: @paddingV@ 4px;
|
||||
/* prettier-ignore */
|
||||
border-top: @borderSize@ solid transparent;
|
||||
/* prettier-ignore */
|
||||
border-bottom: @borderSize@ solid transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#workspaces button.focused {
|
||||
/* prettier-ignore */
|
||||
border-top: @borderSize@ solid @accent@;
|
||||
}
|
||||
|
||||
#clock {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
{ config, ... }:
|
||||
let
|
||||
paddingH = "12px";
|
||||
paddingV = "0";
|
||||
in
|
||||
{
|
||||
# ISSUE: https://github.com/Alexays/Waybar/issues/3303
|
||||
# This way I am forced to apply the padding to children of each group
|
||||
# instead of the whole group.
|
||||
text = ''
|
||||
/* See the ISSUE above. */
|
||||
#custom-taghw1,
|
||||
#custom-tagbt1 {
|
||||
padding-left: ${paddingH};
|
||||
}
|
||||
|
||||
#custom-taghw2,
|
||||
#custom-tagbt2 {
|
||||
padding-right: ${paddingH};
|
||||
}
|
||||
|
||||
/* Padding for global widgets. */
|
||||
#clock,
|
||||
#custom-display,
|
||||
#custom-network,
|
||||
#mpris,
|
||||
#pulseaudio,
|
||||
#scratchpad {
|
||||
padding: ${paddingV} ${paddingH};
|
||||
}
|
||||
|
||||
/* Padding for combined widgets. */
|
||||
#cpu.load,
|
||||
#custom-powerlimit,
|
||||
#custom-powersave,
|
||||
#memory,
|
||||
#temperature {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
/* Hover style. */
|
||||
#batteryinfo:hover,
|
||||
#clock:hover,
|
||||
#custom-display:hover,
|
||||
#custom-network:hover,
|
||||
#hardware:hover,
|
||||
#mpris:hover,
|
||||
#pulseaudio:hover,
|
||||
#scratchpad:hover,
|
||||
#workspaces button:hover {
|
||||
background-color: rgba(${config.module.style.color.borderR},${config.module.style.color.borderG},${config.module.style.color.borderB},${toString config.module.style.opacity.desktop});
|
||||
}
|
||||
|
||||
/* Critical state. */
|
||||
#battery,
|
||||
#cpu.usage,
|
||||
#custom-display,
|
||||
#custom-network,
|
||||
#memory,
|
||||
#pulseaudio,
|
||||
#temperature {
|
||||
border-top: ${toString config.module.style.window.border}px solid transparent;
|
||||
border-bottom: ${toString config.module.style.window.border}px solid transparent;
|
||||
}
|
||||
|
||||
#battery.critical,
|
||||
#cpu.usage.critical,
|
||||
#custom-display.modified,
|
||||
#custom-network.issue,
|
||||
#custom-network.vpn,
|
||||
#custom-network.btlow,
|
||||
#memory.critical,
|
||||
#pulseaudio.muted,
|
||||
#pulseaudio.source-muted,
|
||||
#temperature.critical {
|
||||
border-top: ${toString config.module.style.window.border}px solid #${config.module.style.color.accent};
|
||||
}
|
||||
|
||||
/* Widget-specific styling. */
|
||||
#workspaces button {
|
||||
padding: ${paddingV} 4px;
|
||||
border-top: ${toString config.module.style.window.border}px solid transparent;
|
||||
border-bottom: ${toString config.module.style.window.border}px solid transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#workspaces button.focused {
|
||||
border-top: ${toString config.module.style.window.border}px solid #${config.module.style.color.accent};
|
||||
}
|
||||
|
||||
#clock {
|
||||
font-weight: bold;
|
||||
}
|
||||
'';
|
||||
}
|
||||
16
home/file/waybar/style/Window.css
Normal file
16
home/file/waybar/style/Window.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
window#waybar {
|
||||
/* prettier-ignore */
|
||||
background-color: @backgroundColor@;
|
||||
/* prettier-ignore */
|
||||
border: @border@;
|
||||
}
|
||||
|
||||
.modules-left > widget:first-child > #workspaces {
|
||||
/* prettier-ignore */
|
||||
margin-left: @borderSize@;
|
||||
}
|
||||
|
||||
.modules-right > widget:last-child > #workspaces {
|
||||
/* prettier-ignore */
|
||||
margin-right: @borderSize@;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{ config, ... }:
|
||||
{
|
||||
text = ''
|
||||
window#waybar {
|
||||
background-color: rgba(${config.module.style.color.bgR},${config.module.style.color.bgG},${config.module.style.color.bgB},${toString config.module.style.opacity.desktop});
|
||||
border: ${toString config.module.style.window.border}px solid rgba(${config.module.style.color.borderR},${config.module.style.color.borderG},${config.module.style.color.borderB},${toString config.module.style.opacity.desktop});
|
||||
}
|
||||
|
||||
.modules-left > widget:first-child > #workspaces {
|
||||
margin-left: ${toString config.module.style.window.border}px;
|
||||
}
|
||||
|
||||
.modules-right > widget:last-child > #workspaces {
|
||||
margin-right: ${toString config.module.style.window.border}px;
|
||||
}
|
||||
'';
|
||||
}
|
||||
Loading…
Reference in a new issue