noa/nixconf
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use nix colors for waybar

Browse source
This commit is contained in:
Noa Aarts 2024-03-12 19:26:26 +01:00
parent 3bc6520324
commit fd6cb7b5a3
2 changed files with 83 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

13
common/colors.nix
View file

@ -28,9 +28,18 @@
base0D = "#FF77FF"; base0D = "#FF77FF";
base0E = "#FFFF77"; base0E = "#FFFF77";
base0F = "#AAAAAA"; base0F = "#AAAAAA";
text = "#FFFFFF"; text = "#EEEEEE";
textMuted = "#5F5F5F";
background = "#FFD2D2";
backgroundMuted = "#CCCCCC";
warn = "#FF0000"; warn = "#FF0000";
background = "#000000"; highlight = "#FBAF44";
danger = "#F53C3C";
succes = "#5BBD63";
spotifyGreen = "#39A04A";
border = "#DDDDDD";
info = "#2CB6AF";
ok = "#38B148";
}; };
}; };

178
common/waybar.nix
View file

@ -21,7 +21,7 @@
]; ];
modules-left = [ "hyprland/workspaces" "tray" "custom/pronouns" "hyprland/window" ]; modules-left = [ "hyprland/workspaces" "tray" "custom/pronouns" "hyprland/window" ];
modules-center = [ "clock" ]; modules-center = [ "clock" ];
modules-right = [ "custom/vpn" "wireplumber" "network" "cpu" "memory" "temperature" "custom/poweroff" ]; modules-right = [ "custom/vpn" "wireplumber" "battery" "network" "cpu" "memory" "temperature" "custom/poweroff" ];
"clock" = { "clock" = {
tooltip-format = "<big>{:%Y %B}</big>\n\n{calendar}"; tooltip-format = "<big>{:%Y %B}</big>\n\n{calendar}";
interval = 1; interval = 1;
@ -87,9 +87,10 @@
on-click-right = "swaylock"; on-click-right = "swaylock";
}; };
"battery" = { "battery" = {
bat = "hidpp_battery_2";
states = { states = {
full = 100; full = 100;
good = 100; good = 50;
warning = 30; warning = 30;
critical = 30; critical = 30;
}; };
@ -119,7 +120,7 @@
}; };
"custom/pronouns" = { "custom/pronouns" = {
format = "{}"; format = "{}";
exec = "${config.xdg.configHome}/waybar/pronouns"; # exec = "${config.xdg.configHome}/waybar/pronouns"; # TODO: install pronouns
interval = 5; interval = 5;
}; };
"hyprland/workspaces" = { "hyprland/workspaces" = {
@ -140,7 +141,7 @@
background-color: transparent; background-color: transparent;
border-radius: 999px; border-radius: 999px;
color: #dddddd; color: #${config.colorScheme.palette.text};
transition-property: background-color; transition-property: background-color;
transition-duration: .5s; transition-duration: .5s;
} }
@ -177,22 +178,22 @@
min-width: 15px; min-width: 15px;
min-height: 15px; min-height: 15px;
background-color: transparent; background-color: transparent;
color: #5F5F5F; color: #${config.colorScheme.palette.textMuted};
border-radius: 999px; border-radius: 999px;
} }
#workspaces button:hover { #workspaces button:hover {
background-color: #FBAF44; background-color: #${config.colorScheme.palette.highlight};
} }
#workspaces button.active { #workspaces button.active {
color: #ffffff; color: #${config.colorScheme.palette.text};
font-weight: bold; font-weight: bold;
background-color: #FBAF44; background-color: #${config.colorScheme.palette.highlight};
} }
#workspaces button.urgent { #workspaces button.urgent {
background-color: #eb4d4b; background-color: #${config.colorScheme.palette.danger};
} }
#clock, #clock,
@ -212,12 +213,12 @@
#tray, #tray,
#custom-updates, #custom-updates,
#mpd { #mpd {
color: #5F5F5F; color: #${config.colorScheme.palette.textMuted};
margin: 0px 2px; margin: 0px 2px;
padding: 0 15px; padding: 0 15px;
border-radius: 999px; border-radius: 999px;
box-shadow: inset 0 0 0 1px #cccccc; box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.backgroundMuted};
} }
.modules-right > widget:last-child > #battery { .modules-right > widget:last-child > #battery {
@ -227,19 +228,19 @@
#tray { #tray {
padding: 4px 10px; padding: 4px 10px;
border-radius: 999px 999px 999px 999px; border-radius: 999px 999px 999px 999px;
box-shadow: inset 0px 0px 0 1px #cccccc; box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.backgroundMuted};
} }
#window { #window {
margin-left: 6px; margin-left: 6px;
color: #5F5F5F; color: #${config.colorScheme.palette.textMuted};
} }
#workspaces { #workspaces {
margin: 0 4px; margin: 0 4px;
padding: 4px 4px; padding: 4px 4px;
border-radius: 999px; border-radius: 999px;
box-shadow: inset 0px 0px 0 1px #cccccc; box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.backgroundMuted};
} }
#cpu { #cpu {
@ -251,8 +252,8 @@
border-radius: 0px; border-radius: 0px;
padding: 0 10px; padding: 0 10px;
margin: 0px; margin: 0px;
box-shadow: inset 0px 2px 0 -1px #cccccc, box-shadow: inset 0px 2px 0 -1px #${config.colorScheme.palette.backgroundMuted},
inset 0px -2px 0 -1px #cccccc; inset 0px -2px 0 -1px #${config.colorScheme.palette.backgroundMuted};
} }
#clock { #clock {
@ -263,13 +264,13 @@
#battery { #battery {
min-width: 50px; min-width: 50px;
border-radius: 999px; border-radius: 999px;
box-shadow: inset 0 0 0 1px #cccccc; box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.backgroundMuted};
background-color: #cccccc; background-color: #${config.colorScheme.palette.backgroundMuted};
transition: all 0.3s; transition: all 0.3s;
} }
#battery.charging, #battery.plugged { #battery.charging, #battery.plugged {
color: #5bbd63; color: #${config.colorScheme.palette.succes};
background-color: transparent; background-color: transparent;
animation: batteryCharging 1.2s linear 0s infinite normal forwards, animation: batteryCharging 1.2s linear 0s infinite normal forwards,
} }
@ -277,7 +278,7 @@
animation: batteryFull 7.0s linear 0s infinite normal forwards; animation: batteryFull 7.0s linear 0s infinite normal forwards;
} }
#battery.critical:not(.charging) { #battery.critical:not(.charging) {
background-color: #ffd2d2; background-color: #${config.colorScheme.palette.background};
animation: batteryCritical 1.2s linear 0s infinite normal forwards; animation: batteryCritical 1.2s linear 0s infinite normal forwards;
} }
@ -288,18 +289,14 @@
#network.disconnected, #network.disconnected,
#pulseaudio.muted { #pulseaudio.muted {
transition: all 0.2s; transition: all 0.2s;
color: #cccccc; color: #${config.colorScheme.palette.backgroundMuted};
} }
.custom-spotify { .custom-spotify {
color: #39a04a; color: #${config.colorScheme.palette.spotifyGreen};
margin-right: 10px; margin-right: 10px;
} }
#custom-media.custom-vlc {
background-color: #ffa000;
}
#temperature { #temperature {
margin-left: 0px; margin-left: 0px;
border-radius: 0px 999px 999px 0px; border-radius: 0px 999px 999px 0px;
@ -307,7 +304,7 @@
#temperature.critical { #temperature.critical {
background-color: transparent; background-color: transparent;
color: #f53c3c; color: #${config.colorScheme.palette.danger};
} }
#tray { #tray {
@ -320,43 +317,10 @@
} }
#tray > .needs-attention { #tray > .needs-attention {
background-color: #f53c3c; background-color: #${config.colorScheme.palette.danger};
border-radius: 999px; border-radius: 999px;
} }
#idle_inhibitor {
background-color: #2d3436;
}
#idle_inhibitor.activated {
background-color: #ecf0f1;
color: #2d3436;
}
#language {
background: #00b093;
color: #740864;
padding: 0 5px;
margin: 0 5px;
min-width: 16px;
}
#keyboard-state {
background: #97e1ad;
color: #000000;
padding: 0 0px;
margin: 0 5px;
min-width: 16px;
}
#keyboard-state > label {
padding: 0 5px;
}
#keyboard-state > label.locked {
background: rgba(0, 0, 0, 0.05);
}
#scratchpad { #scratchpad {
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
} }
@ -365,24 +329,24 @@
} }
#custom-updates { #custom-updates {
box-shadow: inset 0 0 0 1px #cccccc; box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.backgroundMuted};
color: #888888; color: #${config.colorScheme.palette.textMuted};
transition: all 0.5s; transition: all 0.5s;
} }
#custom-updates.pending { #custom-updates.pending {
box-shadow: inset 0 0 0 2px #fbaf44; box-shadow: inset 0 0 0 2px #${config.colorScheme.palette.highlight};
color: #fbaf44; color: #${config.colorScheme.palette.highlight};
font-weight: bold; font-weight: bold;
transition: all 0.5s; transition: all 0.5s;
} }
tooltip { tooltip {
background-color: #eeeeee; background-color: #${config.colorScheme.palette.background};
border: 1px solid; border: 1px solid;
border-color: #dddddd; border-color: #${config.colorScheme.palette.border};
border-radius: 10px; border-radius: 10px;
color: #5F5F5F; color: #${config.colorScheme.palette.text};
} }
tooltip label { tooltip label {
padding: 5px; padding: 5px;
@ -392,47 +356,47 @@
@keyframes batteryCritical { @keyframes batteryCritical {
0% { 0% {
box-shadow: inset 0px 20px 8px -16px #f53c3c, box-shadow: inset 0px 20px 8px -16px #${config.colorScheme.palette.danger},
inset 0px -20px 8px -16px #f53c3c; inset 0px -20px 8px -16px #${config.colorScheme.palette.danger};
color: #f53c3c; color: #${config.colorScheme.palette.danger};
} }
50% { 50% {
box-shadow: inset 0px 12px 8px -16px #f53c3c, box-shadow: inset 0px 12px 8px -16px #${config.colorScheme.palette.danger},
inset 0px -12px 8px -16px #f53c3c; inset 0px -12px 8px -16px #${config.colorScheme.palette.danger};
color: #555555; color: #${config.colorScheme.palette.textMuted};
} }
100% { 100% {
box-shadow: inset 0px 20px 8px -16px #f53c3c, box-shadow: inset 0px 20px 8px -16px #${config.colorScheme.palette.danger},
inset 0px -20px 8px -16px #f53c3c; inset 0px -20px 8px -16px #${config.colorScheme.palette.danger};
color: #f53c3c; color: #${config.colorScheme.palette.danger};
} }
} }
@keyframes batteryCharging { @keyframes batteryCharging {
0% { 0% {
box-shadow: inset 0px 0px 8px 0px #2cb6af, box-shadow: inset 0px 0px 8px 0px #${config.colorScheme.palette.info},
inset 0px 20px 8px -18px #38b148, inset 0px 20px 8px -18px #${config.colorScheme.palette.ok},
inset 0px -20px 8px -18px #38b148; inset 0px -20px 8px -18px #${config.colorScheme.palette.ok};
} }
25% { 25% {
box-shadow: inset 0px 0px 8px 0px #2cb6af, box-shadow: inset 0px 0px 8px 0px #${config.colorScheme.palette.info},
inset 14px 14px 8px -18px #38b148, inset 14px 14px 8px -18px #${config.colorScheme.palette.ok},
inset -14px -14px 8px -18px #38b148; inset -14px -14px 8px -18px #${config.colorScheme.palette.ok};
} }
50% { 50% {
box-shadow: inset 0px 0px 8px 0px #2cb6af, box-shadow: inset 0px 0px 8px 0px #${config.colorScheme.palette.info},
inset 20px 0px 8px -18px #38b148, inset 20px 0px 8px -18px #${config.colorScheme.palette.ok},
inset -20px 0px 8px -18px #38b148; inset -20px 0px 8px -18px #${config.colorScheme.palette.ok};
} }
75% { 75% {
box-shadow: inset 0px 0px 8px 0px #2cb6af, box-shadow: inset 0px 0px 8px 0px #${config.colorScheme.palette.info},
inset 14px -14px 8px -18px #38b148, inset 14px -14px 8px -18px #${config.colorScheme.palette.ok},
inset -14px 14px 8px -18px #38b148; inset -14px 14px 8px -18px #${config.colorScheme.palette.ok};
} }
100% { 100% {
box-shadow: inset 0px 0px 8px 0px #2cb6af, box-shadow: inset 0px 0px 8px 0px #${config.colorScheme.palette.info},
inset 0px -20px 8px -18px #38b148, inset 0px -20px 8px -18px #${config.colorScheme.palette.ok},
inset 0px 20px 8px -18px #38b148; inset 0px 20px 8px -18px #${config.colorScheme.palette.ok};
} }
} }
@ -440,29 +404,29 @@
@keyframes batteryFull { @keyframes batteryFull {
0% { 0% {
box-shadow: inset 0px 20px 8px -16px #87D96C, box-shadow: inset 0px 20px 8px -16px #${config.colorScheme.palette.warn},
inset 0px -20px 8px -16px #87D96C; inset 0px -20px 8px -16px #${config.colorScheme.palette.warn};
color: #87D96C; color: #${config.colorScheme.palette.warn};
} }
25% { 25% {
box-shadow: inset 0px 19px 8px -16px #87D96C, box-shadow: inset 0px 19px 8px -16px #${config.colorScheme.palette.warn},
inset 0px -19px 8px -16px #87D96C; inset 0px -19px 8px -16px #${config.colorScheme.palette.warn};
color: #87D96C; color: #${config.colorScheme.palette.warn};
} }
50% { 50% {
box-shadow: inset 0px 15px 8px -16px #87D96C, box-shadow: inset 0px 15px 8px -16px #${config.colorScheme.palette.warn},
inset 0px -15px 8px -16px #87D96C; inset 0px -15px 8px -16px #${config.colorScheme.palette.warn};
color: #87D96C; color: #${config.colorScheme.palette.warn};
} }
75% { 75% {
box-shadow: inset 0px 19px 8px -16px #87D96C, box-shadow: inset 0px 19px 8px -16px #${config.colorScheme.palette.warn},
inset 0px -19px 8px -16px #87D96C; inset 0px -19px 8px -16px #${config.colorScheme.palette.warn};
color: #87D96C; color: #${config.colorScheme.palette.warn};
} }
100% { 100% {
box-shadow: inset 0px 20px 8px -16px #87D96C, box-shadow: inset 0px 20px 8px -16px #${config.colorScheme.palette.warn},
inset 0px -20px 8px -16px #87D96C; inset 0px -20px 8px -16px #${config.colorScheme.palette.warn};
color: #87D96C; color: #${config.colorScheme.palette.warn};
} }
} }
''; '';