add swww and pywal

This commit is contained in:
Benjamin Palko 2024-03-22 16:05:37 -05:00
parent 076fe3ab81
commit 7798e8360c
19 changed files with 604 additions and 51 deletions

View file

@ -2,9 +2,9 @@
{
"layer": "top", // Waybar at top layer
// "position": "bottom", // Waybar position (top|bottom|left|right)
"height": 30, // Waybar height (to be removed for auto height)
"height": 36, // Waybar height (to be removed for auto height)
// "width": 1280, // Waybar width
"spacing": 4, // Gaps between modules (4px)
"spacing": 8, // Gaps between modules (4px)
// Choose the order of the modules
"modules-left": [
"hyprland/workspaces",
@ -14,13 +14,15 @@
"custom/spotify"
],
"modules-right": [
"custom/swww",
"wireplumber",
"network",
"cpu",
"memory",
"temperature",
"idle_inhibitor",
"clock"
"clock",
"custom/swaync"
],
"idle_inhibitor": {
"format": "{icon}",
@ -30,7 +32,7 @@
}
},
"tray": {
// "icon-size": 21,
"icon-size": 18,
"spacing": 10
},
"clock": {
@ -69,13 +71,35 @@
},
"custom/spotify": {
"format": "{}",
"on-click": "playerctl play-pause",
"exec": "/usr/bin/python3 $HOME/.config/waybar/modules/mediaplayer.py --player spotify",
"return-type": "json",
"max-length": 40,
"format-icons": {
"spotify": "",
"default": "🎜"
},
"exec": "/usr/bin/python3 $HOME/.config/waybar/modules/mediaplayer.py --player spotify" // Filter player based on name
"spotify": " ",
"default": "🎜 "
}
},
"custom/swaync": {
"format": "{icon}",
"exec": "swaync-client -swb",
"return-type": "json",
"on-click": "sleep 0.1 && swaync-client -t -sw",
"format-icons": {
"notification": "<span foreground='red'><small><sup>⬤</sup></small></span>",
"none": " ",
"dnd-notification": "<span foreground='red'><small><sup>⬤</sup></small></span>",
"dnd-none": " "
}
},
"custom/swww": {
"format": "{icon}",
"tooltip": false,
"tooltip-format": "Change Wallpaper",
"on-click": "bash ~/.config/waybar/modules/switch-wallpaper.sh &",
"format-icons": {
"default": " "
}
}
}

View file

@ -0,0 +1,10 @@
# -n tells `wal` to skip setting the wallpaper.
wal -i ~/Wallpapers/ -n
# Using feh to tile the wallpaper now.
# We grab the wallpaper location from wal's cache so
# that this works even when a directory is passed.
swww img "$(< "${HOME}/.cache/wal/wal")" --transition-type wipe --transition-angle 45
notify-send "Changing Wallpaper"

View file

@ -1,9 +1,16 @@
* {
/* `otf-font-awesome` is required to be installed for icons */
font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
font-size: 12px;
text-shadow: none;
transition: color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
/*
* Color Palette
*/
@import url('../../.cache/wal/colors-waybar.css');
/*
* General
*/
@ -20,6 +27,8 @@
@import url('./styles/modules/memory.css');
@import url('./styles/modules/network.css');
@import url('./styles/modules/spotify.css');
@import url('./styles/modules/swaync.css');
@import url('./styles/modules/swww.css');
@import url('./styles/modules/temperature.css');
@import url('./styles/modules/tray.css');
@import url('./styles/modules/wireplumber.css');

View file

@ -1,34 +1,14 @@
/*
* Modules groups
*/
.modules-left {
padding: 0 3px;
border: 1px solid rgba(125, 125, 125, 0.66);
border-radius: 5px;
background: rgba(0, 0, 0, 0.66);
margin-left: 10px;
animation: fadeIn 2.5s;
}
.modules-center {
padding: 0 3px;
border: 1px solid rgba(125, 125, 125, 0.66);
border-radius: 5px;
background: rgba(0, 0, 0, 0.66);
animation: fadeIn 2.5s;
}
.modules-right {
padding: 0 3px;
border: 1px solid rgba(125, 125, 125, 0.66);
border-radius: 5px;
background: rgba(0, 0, 0, 0.66);
margin-right: 10px;
animation: fadeIn 2.5s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

View file

@ -1,11 +1,13 @@
.module {
border-radius: 9999px;
margin: 4px 0;
}
label.module {
padding: 0 10px;
box-shadow: inset 0 -2px;
transition: color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
/* box-shadow: inset 0 -2px; */
}
box.module {
padding: 0 10px;
box-shadow: inset 0 -2px;
}

View file

@ -1,4 +1,5 @@
#clock {
color: #8fbcbb;
color: #eee;
background-color: @color4;
}

View file

@ -1,3 +1,5 @@
.custom-spotify {
color: #1db954;
color: #333;
background-color: #1db954;
font-style: italic;
}

View file

@ -0,0 +1,4 @@
.custom-swaync {
background-color: white;
}

View file

@ -0,0 +1,4 @@
.custom-swww {
color: @color9;
}

View file

@ -1,5 +1,6 @@
#wireplumber {
color: #a3be8c;
color: #eee;
background-color: @color6;
}
#wireplumber.muted {

View file

@ -1,29 +1,39 @@
#workspaces {
padding-left: 0;
padding-right: 0;
padding: 0;
border: 2px solid @color4;
}
#workspaces button {
padding: 0 5px;
padding: 0 4px;
box-shadow: none;
border: none;
border-radius: 0px;
box-shadow: inset 0 -3px transparent;
transition: color 0.5s ease;
border-radius: 0;
color: @color8;
}
#workspaces button:first-child {
padding-left: 8px;
border-radius: 9999px 0 0 9999px;
}
#workspaces button:last-child {
padding-right: 8px;
border-radius: 0 9999px 9999px 0;
}
#workspaces button.active {
color: #5e81ac;
box-shadow: inset 0 -3px #5e81ac;
background-color: @color4;
color: @color8;
}
#workspaces button:hover {
background: rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -3px #5e81ac;
background: @color4;
color: @color8;
}
#workspaces button.focused {
background-color: #81a1c1;
background-color: @color5;
}
#workspaces button.urgent {

View file

@ -1,7 +1,18 @@
window#waybar {
background-color: transparent;
background: linear-gradient(90deg, mix(@color0, transparent, 0.5), mix(@color1, transparent, 0.5), mix(@color0, transparent, 0.5));
animation: fadeIn 2.5s;
}
button {
text-shadow: none;
}
window#waybar.hidden {
opacity: 0.2;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}