refactor: move out style.css for waybar

This commit is contained in:
Swarsel 2024-07-11 16:40:25 +02:00
parent 9e88b8944b
commit 26f8576d6c
Signed by: swarsel
GPG key ID: 26A54C31F2A4FD84
2 changed files with 200 additions and 430 deletions

View file

@ -6433,237 +6433,7 @@ The rest of this configuration is found here:
}; };
}; };
}; };
style = (builtins.readFile ../../programs/waybar/style.css);
style = ''
@define-color foreground #fdf6e3;
@define-color background #1a1a1a;
@define-color background-alt #292b2e;
@define-color foreground-warning #268bd2;
@define-color background-warning @background;
@define-color foreground-error red;
@define-color background-error @background;
@define-color foreground-critical gold;
@define-color background-critical blue;
,* {
border: none;
border-radius: 0;
font-family: "FiraCode Nerd Font Propo", "Font Awesome 5 Free";
font-size: 14px;
min-height: 0;
margin: -1px 0px;
}
window#waybar {
background: transparent;
color: @foreground;
transition-duration: .5s;
}
window#waybar.hidden {
opacity: 0.2;
}
#mpris {
padding: 0 10px;
background-color: transparent;
color: #1DB954;
font-family: Monospace;
font-size: 12px;
}
#custom-right-arrow-dark,
#custom-left-arrow-dark {
color: @background;
background: @background-alt;
font-size: 24px;
}
#window {
font-size: 12px;
padding: 0 20px;
}
#mode {
background: @background-critical;
color: @foreground-critical;
padding: 0 3px;
}
#custom-configwarn {
color: black;
padding: 0 3px;
animation-name: configblink;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#custom-outer-right-arrow-dark,
#custom-outer-left-arrow-dark {
color: @background;
font-size: 24px;
}
#custom-outer-left-arrow-dark,
#custom-left-arrow-dark,
#custom-left-arrow-light {
margin: 0 -1px;
}
#custom-right-arrow-light,
#custom-left-arrow-light {
color: @background-alt;
background: @background;
font-size: 24px;
}
#workspaces,
#clock.1,
#clock.2,
#clock.3,
#pulseaudio,
#memory,
#cpu,
#temperature,
#power-profiles-daemon,
#mpris,
#tray {
background: @background;
}
#network,
#clock.2,
#battery,
#cpu,
#custom-pseudobat,
#disk {
background: @background-alt;
}
#workspaces button {
padding: 0 2px;
color: #fdf6e3;
}
#workspaces button.focused {
color: @foreground-warning;
}
#workspaces button:hover {
background: @foreground;
color: @background;
border: @foreground;
padding: 0 2px;
box-shadow: inherit;
text-shadow: inherit;
}
#workspaces button.urgent {
color: @background-critical;
background: @foreground-critical;
}
#network {
color: #cc99c9;
}
#temperature,
#power-profiles-daemon {
color: #9ec1cf;
}
#disk {
/*color: #b58900;*/
color: #9ee09e;
}
#disk.warning {
color: @foreground-error;
background-color: @background-error;
}
#disk.critical,
#temperature.critical {
color: @foreground-critical;
background-color: @background-critical;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#pulseaudio.muted {
color: @foreground-error;
}
#memory {
/*color: #2aa198;*/
color: #fdfd97;
}
#cpu {
/*color: #6c71c4;*/
color: #feb144;
}
#pulseaudio {
/*color: #268bd2;*/
color: #ff6663;
}
#battery,
#custom-pseudobat {
color: cyan;
}
#battery.discharging {
color: #859900;
}
@keyframes blink {
to {
color: @foreground-error;
background-color: @background-error;
}
}
@keyframes configblink {
to {
color: @foreground-error;
background-color: transparent;
}
}
#battery.critical:not(.charging) {
color: @foreground-critical;
background-color: @background-critical;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#clock.1,
#clock.2,
#clock.3 {
font-family: Monospace;
}
#clock,
#pulseaudio,
#memory,
#cpu,
#tray,
#temperature,
#power-profiles-daemon,
#network,
#mpris,
#battery,
#custom-pseudobat,
#disk {
padding: 0 3px;
}
'';
}; };
#+end_src #+end_src

View file

@ -1,61 +1,61 @@
@define-color foreground #fdf6e3; @define-color foreground #fdf6e3;
@define-color background #1a1a1a; @define-color background #1a1a1a;
@define-color background-alt #292b2e; @define-color background-alt #292b2e;
@define-color foreground-warning #268bd2; @define-color foreground-warning #268bd2;
@define-color background-warning @background; @define-color background-warning @background;
@define-color foreground-error red; @define-color foreground-error red;
@define-color background-error @background; @define-color background-error @background;
@define-color foreground-critical gold; @define-color foreground-critical gold;
@define-color background-critical blue; @define-color background-critical blue;
,* { * {
border: none; border: none;
border-radius: 0; border-radius: 0;
font-family: "FiraCode Nerd Font Propo", "Font Awesome 5 Free"; font-family: "FiraCode Nerd Font Propo", "Font Awesome 5 Free";
font-size: 14px; font-size: 14px;
min-height: 0; min-height: 0;
margin: -1px 0px; margin: -1px 0px;
} }
window#waybar { window#waybar {
background: transparent; background: transparent;
color: @foreground; color: @foreground;
transition-duration: .5s; transition-duration: .5s;
} }
window#waybar.hidden { window#waybar.hidden {
opacity: 0.2; opacity: 0.2;
} }
#mpris { #mpris {
padding: 0 10px; padding: 0 10px;
background-color: transparent; background-color: transparent;
color: #1DB954; color: #1DB954;
font-family: Monospace; font-family: Monospace;
font-size: 12px; font-size: 12px;
} }
#custom-right-arrow-dark, #custom-right-arrow-dark,
#custom-left-arrow-dark { #custom-left-arrow-dark {
color: @background; color: @background;
background: @background-alt; background: @background-alt;
font-size: 24px; font-size: 24px;
} }
#window { #window {
font-size: 12px; font-size: 12px;
padding: 0 20px; padding: 0 20px;
} }
#mode { #mode {
background: @background-critical; background: @background-critical;
color: @foreground-critical; color: @foreground-critical;
padding: 0 3px; padding: 0 3px;
} }
#custom-configwarn { #custom-configwarn {
color: black; color: black;
padding: 0 3px; padding: 0 3px;
animation-name: configblink; animation-name: configblink;
@ -63,93 +63,93 @@
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
} }
#custom-outer-right-arrow-dark, #custom-outer-right-arrow-dark,
#custom-outer-left-arrow-dark { #custom-outer-left-arrow-dark {
color: @background; color: @background;
font-size: 24px; font-size: 24px;
} }
#custom-outer-left-arrow-dark, #custom-outer-left-arrow-dark,
#custom-left-arrow-dark, #custom-left-arrow-dark,
#custom-left-arrow-light { #custom-left-arrow-light {
margin: 0 -1px; margin: 0 -1px;
} }
#custom-right-arrow-light, #custom-right-arrow-light,
#custom-left-arrow-light { #custom-left-arrow-light {
color: @background-alt; color: @background-alt;
background: @background; background: @background;
font-size: 24px; font-size: 24px;
} }
#workspaces, #workspaces,
#clock.1, #clock.1,
#clock.2, #clock.2,
#clock.3, #clock.3,
#pulseaudio, #pulseaudio,
#memory, #memory,
#cpu, #cpu,
#temperature, #temperature,
#power-profiles-daemon, #power-profiles-daemon,
#mpris, #mpris,
#tray { #tray {
background: @background; background: @background;
} }
#network, #network,
#clock.2, #clock.2,
#battery, #battery,
#cpu, #cpu,
#custom-pseudobat, #custom-pseudobat,
#disk { #disk {
background: @background-alt; background: @background-alt;
} }
#workspaces button { #workspaces button {
padding: 0 2px; padding: 0 2px;
color: #fdf6e3; color: #fdf6e3;
} }
#workspaces button.focused { #workspaces button.focused {
color: @foreground-warning; color: @foreground-warning;
} }
#workspaces button:hover { #workspaces button:hover {
background: @foreground; background: @foreground;
color: @background; color: @background;
border: @foreground; border: @foreground;
padding: 0 2px; padding: 0 2px;
box-shadow: inherit; box-shadow: inherit;
text-shadow: inherit; text-shadow: inherit;
} }
#workspaces button.urgent { #workspaces button.urgent {
color: @background-critical; color: @background-critical;
background: @foreground-critical; background: @foreground-critical;
} }
#network { #network {
color: #cc99c9; color: #cc99c9;
} }
#temperature, #temperature,
#power-profiles-daemon { #power-profiles-daemon {
color: #9ec1cf; color: #9ec1cf;
} }
#disk { #disk {
/*color: #b58900;*/ /*color: #b58900;*/
color: #9ee09e; color: #9ee09e;
} }
#disk.warning { #disk.warning {
color: @foreground-error; color: @foreground-error;
background-color: @background-error; background-color: @background-error;
} }
#disk.critical, #disk.critical,
#temperature.critical { #temperature.critical {
color: @foreground-critical; color: @foreground-critical;
background-color: @background-critical; background-color: @background-critical;
animation-name: blink; animation-name: blink;
@ -157,46 +157,46 @@
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
} }
#pulseaudio.muted { #pulseaudio.muted {
color: @foreground-error; color: @foreground-error;
} }
#memory { #memory {
/*color: #2aa198;*/ /*color: #2aa198;*/
color: #fdfd97; color: #fdfd97;
} }
#cpu { #cpu {
/*color: #6c71c4;*/ /*color: #6c71c4;*/
color: #feb144; color: #feb144;
} }
#pulseaudio { #pulseaudio {
/*color: #268bd2;*/ /*color: #268bd2;*/
color: #ff6663; color: #ff6663;
} }
#battery, #battery,
#custom-pseudobat { #custom-pseudobat {
color: cyan; color: cyan;
} }
#battery.discharging { #battery.discharging {
color: #859900; color: #859900;
} }
@keyframes blink { @keyframes blink {
to { to {
color: @foreground-error; color: @foreground-error;
background-color: @background-error; background-color: @background-error;
} }
} }
@keyframes configblink { @keyframes configblink {
to { to {
color: @foreground-error; color: @foreground-error;
background-color: transparent; background-color: transparent;
} }
} }
#battery.critical:not(.charging) { #battery.critical:not(.charging) {
color: @foreground-critical; color: @foreground-critical;
background-color: @background-critical; background-color: @background-critical;
animation-name: blink; animation-name: blink;
@ -204,25 +204,25 @@
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
} }
#clock.1, #clock.1,
#clock.2, #clock.2,
#clock.3 { #clock.3 {
font-family: Monospace; font-family: Monospace;
} }
#clock, #clock,
#pulseaudio, #pulseaudio,
#memory, #memory,
#cpu, #cpu,
#tray, #tray,
#temperature, #temperature,
#power-profiles-daemon, #power-profiles-daemon,
#network, #network,
#mpris, #mpris,
#battery, #battery,
#custom-pseudobat, #custom-pseudobat,
#disk { #disk {
padding: 0 3px; padding: 0 3px;
} }