mirror of
https://github.com/danth/stylix
synced 2025-02-16 13:28:35 +00:00
Remove repetition of Waybar CSS (#192)
This commit is contained in:
Jalil David Salamé Messina
GitHub
parent
8b3f61727f
commit
17a452c5d5
5 changed files with 133 additions and 319 deletions
|
|
@ -1,88 +0,0 @@
|
|||
window .modules-center #workspaces button {
|
||||
background-color: @base07;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #wireplumber,
|
||||
.modules-center #pulseaudio,
|
||||
.modules-center #sndio {
|
||||
background-color: @base09;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #workspaces button.focused,
|
||||
.modules-center #workspaces button.active {
|
||||
background: @base03;
|
||||
}
|
||||
.modules-center #workspaces button.urgent {
|
||||
background-color: @base08;
|
||||
}
|
||||
.modules-center #wireplumber.muted,
|
||||
.modules-center #pulseaudio.muted,
|
||||
.modules-center #sndio.muted {
|
||||
background-color: @base0C;
|
||||
}
|
||||
.modules-center #upower,
|
||||
.modules-center #battery {
|
||||
background-color: @base0D;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #upower.charging,
|
||||
.modules-center #battery.Charging {
|
||||
background-color: @base0E;
|
||||
}
|
||||
.modules-center #network {
|
||||
background-color: @base0B;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #network.disconnected {
|
||||
background-color: @base0C;
|
||||
}
|
||||
.modules-center #user {
|
||||
background-color: @base0F;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #clock {
|
||||
background-color: @base03;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #backlight {
|
||||
background-color: @base0E;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #cpu {
|
||||
background-color: @base0B;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #disk {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #idle_inhibitor {
|
||||
background-color: @base06;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #temperature {
|
||||
background-color: @base07;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #mpd {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #language {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
|
||||
.modules-center #keyboard-state {
|
||||
background-color: @base03;
|
||||
color: @base00;
|
||||
}
|
||||
|
||||
.modules-center #memory {
|
||||
background-color: @base09;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-center #window {
|
||||
background-color: @base0C;
|
||||
color: @base00;
|
||||
}
|
||||
88
modules/waybar/colors.nix
Normal file
88
modules/waybar/colors.nix
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
place: ''
|
||||
window .modules-${place} #workspaces button {
|
||||
background-color: @base07;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #wireplumber,
|
||||
.modules-${place} #pulseaudio,
|
||||
.modules-${place} #sndio {
|
||||
background-color: @base09;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #workspaces button.focused,
|
||||
.modules-${place} #workspaces button.active {
|
||||
background: @base03;
|
||||
}
|
||||
.modules-${place} #workspaces button.urgent {
|
||||
background-color: @base08;
|
||||
}
|
||||
.modules-${place} #wireplumber.muted,
|
||||
.modules-${place} #pulseaudio.muted,
|
||||
.modules-${place} #sndio.muted {
|
||||
background-color: @base0C;
|
||||
}
|
||||
.modules-${place} #upower,
|
||||
.modules-${place} #battery {
|
||||
background-color: @base0D;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #upower.charging,
|
||||
.modules-${place} #battery.Charging {
|
||||
background-color: @base0E;
|
||||
}
|
||||
.modules-${place} #network {
|
||||
background-color: @base0B;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #network.disconnected {
|
||||
background-color: @base0C;
|
||||
}
|
||||
.modules-${place} #user {
|
||||
background-color: @base0F;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #clock {
|
||||
background-color: @base03;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #backlight {
|
||||
background-color: @base0E;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #cpu {
|
||||
background-color: @base0B;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #disk {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #idle_inhibitor {
|
||||
background-color: @base06;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #temperature {
|
||||
background-color: @base07;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #mpd {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #language {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #keyboard-state {
|
||||
background-color: @base03;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #memory {
|
||||
background-color: @base09;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-${place} #window {
|
||||
background-color: @base0C;
|
||||
color: @base00;
|
||||
}
|
||||
''
|
||||
|
|
@ -1,76 +1,62 @@
|
|||
{ config, lib, ... }:
|
||||
with config.lib.stylix.colors.withHashtag;
|
||||
with config.stylix.fonts;
|
||||
|
||||
let
|
||||
colorlessModules = place: ''
|
||||
.modules-${place} #workspaces button {
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
.modules-${place} #workspaces button.focused,
|
||||
.modules-${place} #workspaces button.active {
|
||||
border-bottom: 3px solid @base05;
|
||||
}
|
||||
'';
|
||||
in
|
||||
{
|
||||
options.stylix.targets.waybar = {
|
||||
enable = config.lib.stylix.mkEnableTarget "Waybar" true;
|
||||
enableLeftBackColors = lib.mkOption {
|
||||
type = lib.types.bool;
|
||||
default = false;
|
||||
description = lib.mdDoc "enables background colors on the left side of the bar";
|
||||
};
|
||||
enableCenterBackColors = lib.mkOption {
|
||||
type = lib.types.bool;
|
||||
default = false;
|
||||
description = lib.mdDoc "enables background colors on the center of the bar";
|
||||
};
|
||||
enableRightBackColors = lib.mkOption {
|
||||
type = lib.types.bool;
|
||||
default = false;
|
||||
description = lib.mdDoc "enables background colors on the right side of the bar";
|
||||
};
|
||||
enable = config.lib.stylix.mkEnableTarget "Waybar" true;
|
||||
enableLeftBackColors = lib.mkOption {
|
||||
type = lib.types.bool;
|
||||
default = false;
|
||||
description = lib.mdDoc "enables background colors on the left side of the bar";
|
||||
};
|
||||
enableCenterBackColors = lib.mkOption {
|
||||
type = lib.types.bool;
|
||||
default = false;
|
||||
description = lib.mdDoc "enables background colors on the center of the bar";
|
||||
};
|
||||
enableRightBackColors = lib.mkOption {
|
||||
type = lib.types.bool;
|
||||
default = false;
|
||||
description = lib.mdDoc "enables background colors on the right side of the bar";
|
||||
};
|
||||
};
|
||||
|
||||
config = lib.mkIf config.stylix.targets.waybar.enable {
|
||||
programs.waybar.style = ''
|
||||
@define-color base00 ${base00}; @define-color base01 ${base01}; @define-color base02 ${base02}; @define-color base03 ${base03};
|
||||
@define-color base04 ${base04}; @define-color base05 ${base05}; @define-color base06 ${base06}; @define-color base07 ${base07};
|
||||
@define-color base00 ${base00}; @define-color base01 ${base01}; @define-color base02 ${base02}; @define-color base03 ${base03};
|
||||
@define-color base04 ${base04}; @define-color base05 ${base05}; @define-color base06 ${base06}; @define-color base07 ${base07};
|
||||
|
||||
@define-color base08 ${base08}; @define-color base09 ${base09}; @define-color base0A ${base0A}; @define-color base0B ${base0B};
|
||||
@define-color base0C ${base0C}; @define-color base0D ${base0D}; @define-color base0E ${base0E}; @define-color base0F ${base0F};
|
||||
@define-color base08 ${base08}; @define-color base09 ${base09}; @define-color base0A ${base0A}; @define-color base0B ${base0B};
|
||||
@define-color base0C ${base0C}; @define-color base0D ${base0D}; @define-color base0E ${base0E}; @define-color base0F ${base0F};
|
||||
|
||||
* {
|
||||
font-family: ${sansSerif.name};
|
||||
font-size: ${builtins.toString sizes.desktop}pt;
|
||||
}
|
||||
* {
|
||||
font-family: ${sansSerif.name};
|
||||
font-size: ${builtins.toString sizes.desktop}pt;
|
||||
}
|
||||
|
||||
window#waybar, tooltip {
|
||||
background: alpha(@base00, ${with config.stylix.opacity; builtins.toString desktop});
|
||||
color: @base05;
|
||||
}
|
||||
window#waybar, tooltip {
|
||||
background: alpha(@base00, ${with config.stylix.opacity; builtins.toString desktop});
|
||||
color: @base05;
|
||||
}
|
||||
|
||||
tooltip {
|
||||
border-color: @base0D;
|
||||
}
|
||||
tooltip {
|
||||
border-color: @base0D;
|
||||
}
|
||||
''
|
||||
+ (builtins.readFile ./base.css)
|
||||
+ (if config.stylix.targets.waybar.enableLeftBackColors then builtins.readFile ./left.css else ''
|
||||
.modules-left #workspaces button {
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
.modules-left #workspaces button.focused,
|
||||
.modules-left #workspaces button.active {
|
||||
border-bottom: 3px solid @base05;
|
||||
}
|
||||
'')
|
||||
+ (if config.stylix.targets.waybar.enableCenterBackColors then builtins.readFile ./center.css else ''
|
||||
.modules-center #workspaces button {
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
.modules-center #workspaces button.focused,
|
||||
.modules-center #workspaces button.active {
|
||||
border-bottom: 3px solid @base05;
|
||||
}
|
||||
'')
|
||||
+ (if config.stylix.targets.waybar.enableRightBackColors then builtins.readFile ./right.css else ''
|
||||
.modules-right #workspaces button {
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
.modules-right #workspaces button.focused,
|
||||
.modules-right #workspaces button.active {
|
||||
border-bottom: 3px solid @base05;
|
||||
}
|
||||
'');
|
||||
+ (if config.stylix.targets.waybar.enableLeftBackColors then (import ./colors.nix "left") else colorlessModules "left")
|
||||
+ (if config.stylix.targets.waybar.enableCenterBackColors then (import ./colors.nix "center") else colorlessModules "center")
|
||||
+ (if config.stylix.targets.waybar.enableRightBackColors then (import ./colors.nix "right") else colorlessModules "right");
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
window .modules-left #workspaces button {
|
||||
background-color: @base07;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #wireplumber,
|
||||
.modules-left #pulseaudio,
|
||||
.modules-left #sndio {
|
||||
background-color: @base09;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #workspaces button.focused,
|
||||
.modules-left #workspaces button.active {
|
||||
background: @base03;
|
||||
}
|
||||
.modules-left #workspaces button.urgent {
|
||||
background-color: @base08;
|
||||
}
|
||||
.modules-left #wireplumber.muted,
|
||||
.modules-left #pulseaudio.muted,
|
||||
.modules-left #sndio.muted {
|
||||
background-color: @base0C;
|
||||
}
|
||||
.modules-left #upower,
|
||||
.modules-left #battery {
|
||||
background-color: @base0D;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #upower.charging,
|
||||
.modules-left #battery.Charging {
|
||||
background-color: @base0E;
|
||||
}
|
||||
.modules-left #network {
|
||||
background-color: @base0B;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #network.disconnected {
|
||||
background-color: @base0C;
|
||||
}
|
||||
.modules-left #user {
|
||||
background-color: @base0F;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #clock {
|
||||
background-color: @base03;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #backlight {
|
||||
background-color: @base0E;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #cpu {
|
||||
background-color: @base0B;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #disk {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #idle_inhibitor {
|
||||
background-color: @base06;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #temperature {
|
||||
background-color: @base07;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #mpd {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #language {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #keyboard-state {
|
||||
background-color: @base03;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #memory {
|
||||
background-color: @base09;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-left #window {
|
||||
background-color: @base0C;
|
||||
color: @base00;
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
window .modules-right #workspaces button {
|
||||
background-color: @base07;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #wireplumber,
|
||||
.modules-right #pulseaudio,
|
||||
.modules-right #sndio {
|
||||
background-color: @base09;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #workspaces button.focused,
|
||||
.modules-right #workspaces button.active {
|
||||
background: @base03;
|
||||
}
|
||||
.modules-right #workspaces button.urgent {
|
||||
background-color: @base08;
|
||||
}
|
||||
.modules-right #wireplumber.muted,
|
||||
.modules-right #pulseaudio.muted,
|
||||
.modules-right #sndio.muted {
|
||||
background-color: @base0C;
|
||||
}
|
||||
.modules-right #upower,
|
||||
.modules-right #battery {
|
||||
background-color: @base0D;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #upower.charging,
|
||||
.modules-right #battery.Charging {
|
||||
background-color: @base0E;
|
||||
}
|
||||
.modules-right #network {
|
||||
background-color: @base0B;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #network.disconnected {
|
||||
background-color: @base0C;
|
||||
}
|
||||
.modules-right #user {
|
||||
background-color: @base0F;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #clock {
|
||||
background-color: @base03;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #backlight {
|
||||
background-color: @base0E;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #cpu {
|
||||
background-color: @base0B;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #disk {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #idle_inhibitor {
|
||||
background-color: @base06;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #temperature {
|
||||
background-color: @base07;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #mpd {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #language {
|
||||
background-color: @base02;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #keyboard-state {
|
||||
background-color: @base03;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #memory {
|
||||
background-color: @base09;
|
||||
color: @base00;
|
||||
}
|
||||
.modules-right #window {
|
||||
background-color: @base0C;
|
||||
color: @base00;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue