From 7798e8360c2b13cbd997bbf3dc32fe2c43021c70 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 22 Mar 2024 16:05:37 -0500 Subject: [PATCH] add swww and pywal --- .zshrc | 3 + hypr/config/startup.conf | 11 + hypr/hyprland.conf | 8 +- hypr/scripts/start-waybar.sh | 12 + swaync/config.json | 100 ++++++++ swaync/style.css | 348 ++++++++++++++++++++++++++ wal/templates/colors-hyprland.conf | 19 ++ waybar/config.jsonc | 40 ++- waybar/modules/switch-wallpaper.sh | 10 + waybar/style.css | 11 +- waybar/styles/module-groups.css | 20 -- waybar/styles/modules.css | 10 +- waybar/styles/modules/clock.css | 3 +- waybar/styles/modules/spotify.css | 4 +- waybar/styles/modules/swaync.css | 4 + waybar/styles/modules/swww.css | 4 + waybar/styles/modules/wireplumber.css | 3 +- waybar/styles/modules/workspaces.css | 32 ++- waybar/styles/waybar.css | 13 +- 19 files changed, 604 insertions(+), 51 deletions(-) create mode 100644 hypr/config/startup.conf create mode 100644 hypr/scripts/start-waybar.sh create mode 100644 swaync/config.json create mode 100644 swaync/style.css create mode 100644 wal/templates/colors-hyprland.conf create mode 100644 waybar/modules/switch-wallpaper.sh create mode 100644 waybar/styles/modules/swaync.css create mode 100644 waybar/styles/modules/swww.css diff --git a/.zshrc b/.zshrc index a17a14a..b3a081b 100644 --- a/.zshrc +++ b/.zshrc @@ -10,6 +10,9 @@ export ZSH="$HOME/.oh-my-zsh" # See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes ZSH_THEME="robbyrussell" +# Load pywal palette +cat ~/.cache/wal/sequences + # Set list of themes to pick from when loading at random # Setting this variable when ZSH_THEME=random will cause zsh to load # a theme from this variable instead of looking in $ZSH/themes/ diff --git a/hypr/config/startup.conf b/hypr/config/startup.conf new file mode 100644 index 0000000..ee7e678 --- /dev/null +++ b/hypr/config/startup.conf @@ -0,0 +1,11 @@ +# Notification Daemon +exec-once = swaync +# Idle Daemon +exec-once = hypridle +# Status-bar +exec-once = bash ~/.config/hypr/scripts/start-waybar.sh +# Emotes +exec-once = emote +# Wallpaper Daemon +exec-once = swww init + diff --git a/hypr/hyprland.conf b/hypr/hyprland.conf index a16a3cd..555e1d0 100644 --- a/hypr/hyprland.conf +++ b/hypr/hyprland.conf @@ -19,8 +19,10 @@ monitor=,preferred,auto,auto # Execute your favorite apps at launch # exec-once = waybar & hyprpaper & firefox +source = ~/.config/hypr/config/startup.conf -exec-once = hypridle & waybar & emote +# PyWal Colors +source = ~/.cache/wal/colors-hyprland.conf # Source a file (multi-file configs) # source = ~/.config/hypr/myColors.conf @@ -61,8 +63,8 @@ general { gaps_in = 5 gaps_out = 20 border_size = 2 - col.active_border = rgba(33ccffee) rgba(00ff99ee) 45deg - col.inactive_border = rgba(595959aa) + col.active_border = $color4 $color13 45deg + col.inactive_border = $color0 layout = dwindle diff --git a/hypr/scripts/start-waybar.sh b/hypr/scripts/start-waybar.sh new file mode 100644 index 0000000..b244081 --- /dev/null +++ b/hypr/scripts/start-waybar.sh @@ -0,0 +1,12 @@ +#!/bin/bash + +CONFIG_FILES="$HOME/.config/waybar/ $HOME/.cache/wal/" + +trap "killall waybar" EXIT + +while true; do + sleep 0.4 + waybar & + inotifywait -e create,modify -r $CONFIG_FILES + killall waybar +done diff --git a/swaync/config.json b/swaync/config.json new file mode 100644 index 0000000..2ce18df --- /dev/null +++ b/swaync/config.json @@ -0,0 +1,100 @@ +{ + "$schema": "/etc/xdg/swaync/configSchema.json", + "positionX": "center", + "positionY": "top", + "layer": "overlay", + "control-center-layer": "right", + "layer-shell": true, + "cssPriority": "application", + "control-center-margin-top": 5, + "control-center-margin-bottom": 0, + "control-center-margin-right": 0, + "control-center-margin-left": 0, + "notification-2fa-action": true, + "notification-inline-replies": false, + "notification-icon-size": 24, + "notification-body-image-height": 100, + "notification-body-image-width": 200, + "timeout": 6, + "timeout-low": 3, + "timeout-critical": 0, + "fit-to-screen": false, + "control-center-width": 350, + "control-center-height": 720, + "notification-window-width": 400, + "keyboard-shortcuts": true, + "image-visibility": "when available", + "transition-time": 200, + "hide-on-clear": false, + "hide-on-action": true, + "script-fail-notify": true, + "widgets": [ + "dnd", + "buttons-grid", + "mpris", + "volume", + "backlight", + "title", + "notifications" + ], + "widget-config": { + "title": { + "text": "Notifications", + "clear-all-button": true, + "button-text": "Clear" + }, + "dnd": { + "text": "Do Not Disturb" + }, + "label": { + "max-lines": 1, + "text": "Notification" + }, + "mpris": { + "image-size": 10, + "image-radius": 0 + }, + "volume": { + "label": "󰕾" + }, + "backlight": { + "label": "󰃟" + }, + "buttons-grid": { + "actions": [ + { + "label": "󰐥", + "command": "systemctl poweroff" + }, + { + "label": "󰜉", + "command": "systemctl reboot" + }, + { + "label": "󰌾", + "command": "~/.config/hypr/scripts/LockScreen.sh" + }, + { + "label": "󰍃", + "command": "hyprctl dispatch exit" + }, + { + "label": "󰀝", + "command": "~/.config/hypr/scripts/AirplaneMode.sh" + }, + { + "label": "󰕾", + "command": "pactl set-sink-mute @DEFAULT_SINK@ toggle" + }, + { + "label": "󰍬", + "command": "pactl set-source-mute @DEFAULT_SOURCE@ toggle" + }, + { + "label": "󰂯", + "command": "blueman-manager" + } + ] + } + } +} diff --git a/swaync/style.css b/swaync/style.css new file mode 100644 index 0000000..9d7b224 --- /dev/null +++ b/swaync/style.css @@ -0,0 +1,348 @@ +/* ----------- 💫 https://github.com/JaKooLit 💫 -------- */ + +@import url("~/.cache/wal/colors.css") + +@define-color noti-border-color @color2; +@define-color noti-bg rgba(0, 0, 0, 0.8); +@define-color noti-bg-alt #111111; +@define-color noti-bg-hover @color2; +@define-color text-color @color2; +@define-color text-color-alt @color7; +@define-color text-color-disabled rgba(150, 150, 150, 0.8); + +* { + font-family: FiraCode; + font-weight: Bolder; +} + +.control-center .notification-row:focus, +.control-center .notification-row:hover { + opacity: 1; + background: @noti-bg; + border-radius: 10px; +} + +.notification-row { + outline: none; + margin: 0px; +} + +.notification { + border-radius: 10px; +} + +.notification-content { + color: @text-color; + background: @noti-bg; + padding: 3px 10px 3px 6px; + border-radius: 10px; + border: 2px solid @noti-border-color; + margin: 0px; +} + +.notification-default-action { + margin: 0; + padding: 0; + border-radius: 10px; +} + +.close-button { + background: #f7768e; + color: @noti-bg; + text-shadow: none; + padding: 0; + border-radius: 10px; + margin-top: 5px; + margin-right: 5px; +} + +.close-button:hover { + box-shadow: none; + background: #f7768e; + transition: all 0.15s ease-in-out; + border: none; +} + +.notification-action { + border: 2px solid @noti-border-color; + border-top: none; + border-radius: 10px; +} + +.notification-default-action:hover, +.notification-action:hover { + color: @text-color; + background: @color1; +} + +.notification-default-action { + border-radius: 10px; + margin: 5px; +} + +.notification-default-action:not(:only-child) { + border-bottom-left-radius: 7px; + border-bottom-right-radius: 7px; +} + +.notification-action:first-child { + border-bottom-left-radius: 10px; + background: #1b1b2b; +} + +.notification-action:last-child { + border-bottom-right-radius: 10px; + background: #1b1b2b; +} + +.inline-reply { + margin-top: 8px; +} + +.inline-reply-entry { + background: @noti-bg; + color: @text-color; + caret-color: @text-color; + border: 1px solid @noti-border-color; + border-radius: 10px; +} + +.inline-reply-button { + font-size: 0.5rem; + margin-left: 4px; + background: @noti-bg; + border: 1px solid @noti-border-color; + border-radius: 10px; + color: @text-color; +} + +.inline-reply-button:disabled { + background: initial; + color: @text-color-disabled; + border: 1px solid transparent; +} + +.inline-reply-button:hover { + background: @noti-bg-hover; +} + +.body-image { + margin-top: 6px; + color: @text-color-alt; + border-radius: 10px; +} + +.summary { + font-size: 1rem; + font-weight: 200; + background: transparent; + color: @text-color-alt; + text-shadow: none; +} + +.time { + font-size: 1rem; + font-weight: 200; + background: transparent; + color: @text-color; + text-shadow: none; + margin-right: 18px; +} + +.body { + font-size: 1rem; + font-weight: 200; + background: transparent; + color: @text-color; + text-shadow: none; +} + +.control-center { + background: @noti-bg; + border: 2px solid @noti-border-color; + color: @text-color; + border-radius: 10px; +} + +.control-center-list { + background: transparent; +} + +.control-center-list-placeholder { + opacity: 0.5; +} + +.floating-notifications { + background: transparent; +} + +.blank-window { + background: alpha(black, 0.1); +} + +.widget-title { + color: @noti-border-color; + background: @noti-bg-alt; + padding: 3px 6px; + margin: 5px; + font-size: 1rem; + border-radius: 10px; +} + +.widget-title > button { + font-size: 0.75rem; + color: @text-color; + border-radius: 10px; + background: transparent; + border: 0.5px solid @noti-border-color; +} + +.widget-title > button:hover { + background: #f7768e; + color: @noti-border-color; +} + +.widget-dnd { + background: @noti-bg-alt; + padding: 3px 6px; + margin: 5px; + border-radius: 10px; + font-size: 1rem; + color: @noti-border-color; +} + +.widget-dnd > switch { + border-radius: 10px; + /* border: 1px solid #7aa2f7; */ + background: @noti-border-color; +} + +.widget-dnd > switch:checked { + background: #f7768e; + border: 1px solid #f7768e; +} + +.widget-dnd > switch slider { + background: @noti-bg; + border-radius: 10px; +} + +.widget-dnd > switch:checked slider { + background: @noti-bg; + border-radius: 10px; +} + +.widget-label { + margin: 5px; +} + +.widget-label > label { + font-size: 1rem; + color: @text-color; +} + +.widget-mpris { + color: @text-color; + background: @noti-bg-alt; + padding: 3px 6px; + margin: 5px; + border-radius: 10px; +} + +.widget-mpris > box > button { + border-radius: 10px; +} + +.widget-mpris-player { + padding: 3px 6px; + margin: 5px; +} + +.widget-mpris-title { + font-weight: 100; + font-size: 1rem; +} + +.widget-mpris-subtitle { + font-size: 0.75rem; +} + +.widget-buttons-grid { + font-size: large; + color: @noti-border-color; + padding: 2px; + margin: 5px; + border-radius: 10px; + background: @noti-bg-alt; +} + +.widget-buttons-grid > flowbox > flowboxchild > button { + margin: 1px; + background: @noti-bg; + border-radius: 10px; + color: @text-color; +} + +.widget-buttons-grid > flowbox > flowboxchild > button:hover { + background: rgba(122, 162, 247, 0.1); + color: @text-color-alt; +} + +.widget-menubar > box > .menu-button-bar > button { + border: none; + background: transparent; +} + +.topbar-buttons > button { + border: none; + background: transparent; +} + +.widget-volume { + background: @noti-bg-alt; + padding: 2px; + margin: 10px 10px 5px 10px; + border-radius: 10px; + font-size: x-large; + color: @text-color; +} + +.widget-volume > box > button { + background: #7aa2f7; + border: none; +} + +.per-app-volume { + background-color: @noti-bg; + padding: 4px 8px 8px; + margin: 0 8px 8px; + border-radius: 10px; + color: @text-color; +} + +.widget-backlight { + background: @noti-bg-alt; + padding: 5px; + margin: 10px 10px 5px 10px; + border-radius: 10px; + font-size: x-large; + color: @text-color; +} + +.low { + background: @text-color; + padding: 0px; + border-radius: 10px; +} + +.normal { + background: @text-color; + padding: 0px; + border-radius: 10px; +} + +.critical { + background: red; + padding: 0px; + border-radius: 10px; +} diff --git a/wal/templates/colors-hyprland.conf b/wal/templates/colors-hyprland.conf new file mode 100644 index 0000000..3d49783 --- /dev/null +++ b/wal/templates/colors-hyprland.conf @@ -0,0 +1,19 @@ +$background = rgb({background.strip}) +$foreground = rgb({foreground.strip}) +$color0 = rgb({color0.strip}) +$color1 = rgb({color1.strip}) +$color2 = rgb({color2.strip}) +$color3 = rgb({color3.strip}) +$color4 = rgb({color4.strip}) +$color5 = rgb({color5.strip}) +$color6 = rgb({color6.strip}) +$color7 = rgb({color7.strip}) +$color8 = rgb({color8.strip}) +$color9 = rgb({color9.strip}) +$color10 = rgb({color10.strip}) +$color11 = rgb({color11.strip}) +$color12 = rgb({color12.strip}) +$color13 = rgb({color13.strip}) +$color14 = rgb({color14.strip}) +$color15 = rgb({color15.strip}) + diff --git a/waybar/config.jsonc b/waybar/config.jsonc index d3a35da..ce24392 100644 --- a/waybar/config.jsonc +++ b/waybar/config.jsonc @@ -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": "⬤", + "none": " ", + "dnd-notification": "⬤", + "dnd-none": " " + } + }, + "custom/swww": { + "format": "{icon}", + "tooltip": false, + "tooltip-format": "Change Wallpaper", + "on-click": "bash ~/.config/waybar/modules/switch-wallpaper.sh &", + "format-icons": { + "default": " " + } } } diff --git a/waybar/modules/switch-wallpaper.sh b/waybar/modules/switch-wallpaper.sh new file mode 100644 index 0000000..d3bf6dd --- /dev/null +++ b/waybar/modules/switch-wallpaper.sh @@ -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" + diff --git a/waybar/style.css b/waybar/style.css index 24a44e3..3eb4ce2 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -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'); diff --git a/waybar/styles/module-groups.css b/waybar/styles/module-groups.css index 5457657..acfc00f 100644 --- a/waybar/styles/module-groups.css +++ b/waybar/styles/module-groups.css @@ -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; } } diff --git a/waybar/styles/modules.css b/waybar/styles/modules.css index be87d40..bc3c39e 100644 --- a/waybar/styles/modules.css +++ b/waybar/styles/modules.css @@ -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; } diff --git a/waybar/styles/modules/clock.css b/waybar/styles/modules/clock.css index 1ad2dc2..9a87e94 100644 --- a/waybar/styles/modules/clock.css +++ b/waybar/styles/modules/clock.css @@ -1,4 +1,5 @@ #clock { - color: #8fbcbb; + color: #eee; + background-color: @color4; } diff --git a/waybar/styles/modules/spotify.css b/waybar/styles/modules/spotify.css index c684f05..20f67cc 100644 --- a/waybar/styles/modules/spotify.css +++ b/waybar/styles/modules/spotify.css @@ -1,3 +1,5 @@ .custom-spotify { - color: #1db954; + color: #333; + background-color: #1db954; + font-style: italic; } diff --git a/waybar/styles/modules/swaync.css b/waybar/styles/modules/swaync.css new file mode 100644 index 0000000..5dfa28a --- /dev/null +++ b/waybar/styles/modules/swaync.css @@ -0,0 +1,4 @@ +.custom-swaync { + background-color: white; +} + diff --git a/waybar/styles/modules/swww.css b/waybar/styles/modules/swww.css new file mode 100644 index 0000000..370db9c --- /dev/null +++ b/waybar/styles/modules/swww.css @@ -0,0 +1,4 @@ +.custom-swww { + color: @color9; +} + diff --git a/waybar/styles/modules/wireplumber.css b/waybar/styles/modules/wireplumber.css index 8facd5e..b21c3db 100644 --- a/waybar/styles/modules/wireplumber.css +++ b/waybar/styles/modules/wireplumber.css @@ -1,5 +1,6 @@ #wireplumber { - color: #a3be8c; + color: #eee; + background-color: @color6; } #wireplumber.muted { diff --git a/waybar/styles/modules/workspaces.css b/waybar/styles/modules/workspaces.css index f50eab2..98a7253 100644 --- a/waybar/styles/modules/workspaces.css +++ b/waybar/styles/modules/workspaces.css @@ -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 { diff --git a/waybar/styles/waybar.css b/waybar/styles/waybar.css index e40ff01..738597d 100644 --- a/waybar/styles/waybar.css +++ b/waybar/styles/waybar.css @@ -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; } +} +