diff --git a/hypr/hyprland.conf b/hypr/hyprland.conf index 6a77d7a..5187bc6 100644 --- a/hypr/hyprland.conf +++ b/hypr/hyprland.conf @@ -23,7 +23,6 @@ $powermodemenu = $HOME/.config/rofi/scripts/dmenu_powermodemenu.sh $browser = env GTK_THEME=Adwaita:light zen-browser $privateBrowser = env GTK_THEME=Adwaita:light zen-browser --private-window $notificationCenter = pkill rofi & swaync-client -t -sw || notify-send --hint int:transient:1 "Error SwayNC is down" -$waybar = GTK_THEME="Simply_Circles_Dark" waybar -c "$HOME/.config/waybar/config_top.jsonc" -s "$HOME/.config/waybar/style_top.css" & $mpdpass = kapuchinamusica @@ -41,8 +40,7 @@ exec-once = gsettings set org.gnome.desktop.interface color-scheme "prefer-dark" # exec-once = hyprpaper exec-once = swww-daemon exec-once = ~/.config/hypr/scripts/autofreeze_swww.sh -exec-once = $waybar -exec-once = $dock +exec-once = ~/.config/waybar/run.sh exec-once = swaync exec-once = hypridle exec-once = hyprsunset @@ -58,10 +56,6 @@ exec-once = touch /tmp/toggle_ssocks exec-once = ~/.config/hypr/scripts/toggle_proxy.sh exec-once = nextcloud --background & exec-once = [workspace 8 silent] AyuGram -# exec-once = [workspace 7 silent] superproductivity -# exec-once = nm-applet & -# exec-once = waybar & hyprpaper & firefox - ############################# ### ENVIRONMENT VARIABLES ### @@ -99,7 +93,7 @@ env = HYPRCURSOR_SIZE,24 # https://wiki.hyprland.org/Configuring/Variables/#general general { gaps_in = 12.5 - gaps_out = 20 + gaps_out = 12 border_size = 1 @@ -514,8 +508,8 @@ bindl = , XF86AudioPause, exec, playerctl play-pause bindl = , XF86AudioPlay, exec, playerctl play-pause bindl = , XF86AudioPrev, exec, playerctl previous -# Toggle waybar & dock -bind = $mainMod SHIFT, B, exec, ~/.config/hypr/scripts/toggle_waybar.sh +# Toggle waybar +bind = $mainMod SHIFT, B, exec, ~/.config/waybar/run.sh toggle # Toggle grayscale mode bind = $mainMod CTRL, G, exec, ~/.config/hypr/scripts/grayscale-toggle.sh @@ -711,11 +705,6 @@ layerrule = blur, waybar layerrule = ignorealpha 0.6, waybar layerrule = animation slide top, waybar -# nwg-dock -layerrule = ignorezero, nwg-dock -layerrule = blur, nwg-dock -layerrule = animation slide bottom, nwg-dock - # Adjustments for certain workspaces workspace = special:magic, gapsin:20, gapsout:50, shadow:false workspace = 9, gapsin:15, gapsout:40 diff --git a/waybar/config_bottom.jsonc b/waybar/config_bottom.jsonc index e69de29..7a2c882 100644 --- a/waybar/config_bottom.jsonc +++ b/waybar/config_bottom.jsonc @@ -0,0 +1,124 @@ +// -*- mode: jsonc -*- +{ + "output": [ + "eDP-1", + "HDMI-A-1" + ], + "height": 30, + "margin-left": 5, + "margin-right": 5, + "margin-bottom": 5, + "position": "bottom", + "layer": "top", + "spacing": 0, + "reload_style_on_change": true, + "modules-left": [ + "mpd" + ], + "modules-center": [ + "wlr/taskbar", + "custom/launcher" + ], + "modules-right": [ + "cpu", + "memory", + "temperature" + ], + "custom/separator_invisible": { + "format": " ", + "interval": "once", + "tooltip": false + }, + "custom/launcher": { + "format": "󱗼", + "interval": "once", + "on-click": "$HOME/.config/rofi/launchers/type-1/launcher.sh", + "tooltip-format": "Open launcher" + }, + "tray": { + "icon-size": 18, + "spacing": 10, + "icons": { + "blueman": "bluetooth", + "TelegramDesktop": "$HOME/.local/share/icons/hicolor/16x16/apps/telegram.png" + } + }, + "wlr/taskbar": { + "all-outputs": false, + "format": "{icon}", + "icon-size": 25, + "icon-theme": "Retro Art - Red Kolya", + "tooltip-format": "{title}", + "on-click": "activate", + "on-click-middle": "close", + "ignore-list": [ + "Alacritty" + ], + "app_ids-mapping": { + "firefoxdeveloperedition": "firefox-developer-edition" + }, + "rewrite": { + "Firefox Web Browser": "Firefox", + "Foot Server": "Terminal", + ".*(steam_app_[0-9]+).*": "Game" + } + }, + "cpu": { + "format": "{icon}", + "tooltip": false, + "interval": 3, + "format-icons": [ + "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥" + ], + "states": { + "s1": 0, + "s2": 10, + "s3": 30, + "s4": 50, + "s5": 70 + } + }, + "memory": { + "format": "{icon}", + "interval": 3, + "format-icons": [ + "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥" + ], + "states": { + "s1": 20, + "s2": 30, + "s3": 50, + "s4": 60, + "s4": 70 + } + }, + "temperature": { + "format": "{icon}", + "interval": 10, + "format-icons": [ + "󰄰", "󰄰", "󰄰", "󰄰", "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥" + ], + "warning-threshold": 60, + "critical-threshold": 80 + }, + "mpd": { + "password": "kapuchinamusica", + "artist-len": 30, + "title-len": 31, + "unknown-tag": "n/a", + "format": "{stateIcon} {titleSmart}", + "interval": 1, + "single-icons": { + "on": "1 " + }, + "state-icons": { + "paused": "", + "playing": "" + }, + "tooltip-format": "MPD (connected)", + "tooltip-format-disconnected": "MPD (disconnected)", + "format-stopped": "", + "on-click": "mpc toggle --password kapuchinamusica" + } + +} diff --git a/waybar/config_top.jsonc b/waybar/config_top.jsonc index 8c131b8..f23e18e 100644 --- a/waybar/config_top.jsonc +++ b/waybar/config_top.jsonc @@ -5,12 +5,13 @@ "HDMI-A-1" ], "height": 30, - "width": 1900, + "margin-left": 5, + "margin-right": 5, + "margin-top": 5, "spacing": 0, "reload_style_on_change": true, "modules-left": [ - "custom/separator_invisible", - "mpd", + "tray", "custom/pomodoro" ], "modules-center": [ @@ -21,9 +22,16 @@ "pulseaudio/slider", "battery", "network", - "clock", - "custom/separator_invisible" + "clock" ], + "tray": { + "icon-size": 18, + "spacing": 10, + "icons": { + "blueman": "bluetooth", + "TelegramDesktop": "$HOME/.local/share/icons/hicolor/16x16/apps/telegram.png" + } + }, "hyprland/workspaces": { "disable-scroll": true, "all-outputs": false, @@ -128,8 +136,8 @@ "format-muted": "{format_source} ", "format-bluetooth": "{format_source} 󰂰", "format-bluetooth-muted": "{format_source} 󰂲", - "format-source": "", - "format-source-muted": "", + "format-source": "󰍬", + "format-source-muted": "󰍭", "on-click": "pwvucontrol" }, "pulseaudio/slider": { diff --git a/waybar/run.sh b/waybar/run.sh new file mode 100755 index 0000000..f2643e6 --- /dev/null +++ b/waybar/run.sh @@ -0,0 +1,43 @@ +#!/bin/bash + +DIR="$HOME/.config/waybar" + +TOP_CONFIG="$DIR/config_top.jsonc" +TOP_STYLE="$DIR/style/style_top.css" + +BOTTOM_CONFIG="$DIR/config_bottom.jsonc" +BOTTOM_STYLE="$DIR/style/style_bottom.css" + +kill_bars() { + if pgrep waybar > /dev/null; then + pkill waybar + return 0 + fi + return 1 +} + +run_bars() { + waybar -c "$TOP_CONFIG" -s "$TOP_STYLE" & + waybar -c "$BOTTOM_CONFIG" -s "$BOTTOM_STYLE" & + return 0 +} + +case "$1" in + "") + kill_bars + run_bars + ;; + toggle) + kill_bars + if [ $? -eq 1 ]; then + run_bars + fi + ;; + kill) + kill_bars + ;; + *) + echo "Usage: $0 [toggle | kill]" + exit 1 + ;; +esac diff --git a/waybar/colors.css b/waybar/style/colors.css similarity index 93% rename from waybar/colors.css rename to waybar/style/colors.css index e5ccdb4..34c6127 100644 --- a/waybar/colors.css +++ b/waybar/style/colors.css @@ -5,7 +5,7 @@ @define-color border-color rgba(90, 104, 115, 0.8); /* Matches --noti-border-color */ @define-color text-primary #ffffff; @define-color text-secondary alpha(@text-primary,.2); -@define-color accent-color #D58399; +@define-color accent #E83C82; @define-color attention #FFFF00; @define-color warning #FFAA00; @define-color danger #FF0000; diff --git a/waybar/style/style_bottom.css b/waybar/style/style_bottom.css new file mode 100644 index 0000000..5ca3625 --- /dev/null +++ b/waybar/style/style_bottom.css @@ -0,0 +1,366 @@ +/* -------------------------------------------------------------------------- + IMPORTS & GLOBAL STYLES + -------------------------------------------------------------------------- */ +@import "colors.css"; + +/* -------------------------------------------------------------------------- + BASE CONTAINER + -------------------------------------------------------------------------- */ +window#waybar { + /* Layout & Box Model */ + /* border: 1px solid @border-color; */ + /* border-bottom: none; */ + /* border-radius: 10px 10px 0 0; */ + + /* Typography */ + font-family: "Iosevka Nerd Font Propo"; + font-size: 15px; + + /* Colors */ + background-color: transparent; + /* color: @text-primary; */ + + /* Effects & Transitions */ + /* transition-property: background-color; */ + /* transition-duration: 0.5s; */ +} + +/* Window States */ +window#waybar.hidden { + opacity: 0.2; +} + +window#waybar.termite { + background-color: #3F3F3F; +} + +window#waybar.chromium { + background-color: #000000; + border: none; +} + +/* -------------------------------------------------------------------------- + MODULE COMMON STYLES + -------------------------------------------------------------------------- */ +/* Common styling applied to all modules */ +#mpd, +#custom-pomodoro, +#clock, +#battery, +#network, +#pulseaudio, +#pulseaudio-slider, +#custom-separator, +#custom-launcher, +#tray, +#taskbar, +#cpu, +#memory, +#temperature, +#scratchpad { + padding: 0 10px; + color: @text-primary; + transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease; +} + +/* -------------------------------------------------------------------------- + WORKSPACES + -------------------------------------------------------------------------- */ +#workspaces { + font-size: 18px; + background-color: transparent; +} + +#workspaces button { + padding: 0 6px; + min-width: 20px; + background-color: transparent; + color: alpha(@accent, 0.5); + border: none; + border-radius: 0; +} + +/* Workspace States */ +#workspaces button.empty { + color: @text-secondary; +} + +#workspaces button.active.hosting-monitor { + color: @accent; + text-shadow: 0px 0px 8px @accent; + animation: hover 0.8s 1; +} + +#workspaces button.urgent { + color: @attention; + font-weight: 700; + text-shadow: 0px 0px 8px @attention; + transition: color 0.5s, box-shadow 0.5s, background 0.5s; +} + +#workspaces button:hover { + color: @foreground; + background-color: transparent; + text-shadow: 0px 0px 2px rgba(233, 99, 117, 1); +} + +/* -------------------------------------------------------------------------- + TASKBAR + -------------------------------------------------------------------------- */ +#taskbar { + padding-left: 0; +} + +#taskbar button { + padding: 0; + min-height: 30px; + min-width: 40px; +} + +#taskbar image { + min-width: 40px; + min-height: 20px; +} + +#taskbar.empty { + padding-right: 0; +} + +/* -------------------------------------------------------------------------- + CPU + -------------------------------------------------------------------------- */ +#cpu { + font-size: 20px; +} + +/* -------------------------------------------------------------------------- + MEMORY + -------------------------------------------------------------------------- */ +#memory { + font-size: 20px; + padding: 0; +} + +/* -------------------------------------------------------------------------- + TEMPERATURE + -------------------------------------------------------------------------- */ +#temperature { + font-size: 20px; +} + +/* -------------------------------------------------------------------------- + SIDE PANEL GROUPS + -------------------------------------------------------------------------- */ +.modules-left, .modules-center, .modules-right { + /* Layout & Box Model */ + border: 1px solid @border-color; + border-radius: 12px; + + /* Colors */ + background-color: @bg-panel; + /* color: @text-primary; */ + + /* Effects & Transitions */ + /* transition-property: background-color; */ + /* transition-duration: 0.5s; */ +} + +.modules-left { +} + +.modules-right { +} + +/* -------------------------------------------------------------------------- + AUDIO CONTROL MODULES + -------------------------------------------------------------------------- */ +#pulseaudio { + padding-right: 0; + border-right: none; +} + +#pulseaudio-slider slider { + min-height: 0px; + min-width: 0px; + opacity: 0; + background-image: none; + border: none; + box-shadow: none; +} + +#pulseaudio-slider trough { + min-height: 10px; + min-width: 25px; + border-radius: 5px; + background: alpha(@text-primary, 0.2); +} + +#pulseaudio-slider highlight { + min-width: 10px; + border-radius: 5px; + background: @text-primary; +} + +/* -------------------------------------------------------------------------- + CUSTOM MODULES + -------------------------------------------------------------------------- */ +#custom-pomodoro { + color: @text-secondary; + border-radius: 0 0 10px 10px; +} + +#custom-launcher { + font-size: 23px; + padding-left: 0; +} + +/* -------------------------------------------------------------------------- + STATE-BASED STYLES + -------------------------------------------------------------------------- */ + +/* TASKBAR STATES */ +#taskbar button { + transition: none; +} + +#taskbar button.active { + background: radial-gradient(circle, alpha(@accent, 1) 0%, alpha(@accent, 1) 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 25, 0) 100%); + transition: color 0.3s, box-shadow 0.3s, background 0.3s; +} + +/* POMODORO STATES */ +#custom-pomodoro.work { + color: @accent; +} + +#custom-pomodoro.break { + color: @success; + text-shadow: 0px 0px 4px rgba(0, 255, 0, 1); +} + +#custom-pomodoro.pause { + color: @attention; + text-shadow: 0px 0px 4px @attention; +} + +/* MPD STATES */ +#mpd { + font-weight: 700; + transition: color 2s, background 2s; +} + +#mpd.playing { + color: @accent; +} + +#mpd.stopped { + color: transparent; + background: transparent; +} + +#mpd.paused { + font-weight: normal; + color: @text-secondary; +} + +/* BATTERY STATES */ +#battery.charging, +#battery.plugged { + color: @success; + text-shadow: 0px 0px 8px @success; + transition: color 0.3s, box-shadow 0.3s, background 0.3s; +} + +#battery.warning:not(.charging) { + color: @warning; + text-shadow: 0px 0px 8px @warning; + transition: color 0.3s, box-shadow 0.3s, background 0.3s; +} + +#battery.critical:not(.charging) { + color: @danger; + text-shadow: 0px 0px 8px @danger; + transition: color 0.3s, box-shadow 0.3s, background 0.3s; +} + +/* CPU && MEMORY STATES */ +#cpu.s1, #memory.s1, #temperature.s1 { + color: @text-primary; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + +#cpu.s2, #memory.s2 { + color: @text-primary; + text-shadow: 0px 0px 2px @text-primary; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + +#cpu.s3, #memory.s3 { + color: @attention; + text-shadow: 0px 0px 2px @attention; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + +#cpu.s4, #memory.s4, #temperature.warning { + color: @warning; + text-shadow: 0px 0px 2px @warning; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + +#cpu.s5, #memory.s5, #temperature.critical { + color: @danger; + text-shadow: 0px 0px 2px @danger; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + +/* -------------------------------------------------------------------------- + HOVER EFFECTS + -------------------------------------------------------------------------- */ +#mpd.playing:hover, +#mpd.paused:hover, +#clock:hover, +#battery:hover, +#network:hover, +#pulseaudio:hover, +#custom-pomodoro:hover, +#custom-launcher:hover, +#scratchpad:hover, +#tray:hover, +#taskbar:hover, +#cpu:hover, +#memory:hover +#temperature:hover { + color: @accent; + text-shadow: 0px 0px 8px @accent; + transition: color 0.3s, box-shadow 0.3s, background 0.3s; +} + +#pulseaudio-slider:hover highlight { + background: @accent; + box-shadow: 0px 0px 8px @accent; + transition: color 0.3s, box-shadow 0.3s, background 0.3s; +} + +/* -------------------------------------------------------------------------- + LAYOUT UTILITIES + -------------------------------------------------------------------------- */ +#window, +#workspaces { + margin: 0 0px; +} + +.modules-left > widget:first-child > #workspaces { + margin-left: 0; +} + +.modules-right > widget:last-child > #workspaces { + margin-right: 0; +} + +/* -------------------------------------------------------------------------- + ANIMATIONS + -------------------------------------------------------------------------- */ +@keyframes hover { + 0% { color: @text-primary; } + 100% { color: @accent; } +} diff --git a/waybar/style_top.css b/waybar/style/style_top.css similarity index 86% rename from waybar/style_top.css rename to waybar/style/style_top.css index 913d25d..0e21801 100644 --- a/waybar/style_top.css +++ b/waybar/style/style_top.css @@ -8,21 +8,21 @@ -------------------------------------------------------------------------- */ window#waybar { /* Layout & Box Model */ - border: 1px solid @border-color; - border-top: none; - border-radius: 0 0 10px 10px; + /* border: 1px solid @border-color; */ + /* border-bottom: none; */ + /* border-radius: 10px 10px 0 0; */ /* Typography */ font-family: "Iosevka Nerd Font Propo"; font-size: 15px; /* Colors */ - background-color: @bg-panel; - color: @text-primary; + background-color: transparent; + /* color: @text-primary; */ /* Effects & Transitions */ - transition-property: background-color; - transition-duration: 0.5s; + /* transition-property: background-color; */ + /* transition-duration: 0.5s; */ } /* Window States */ @@ -51,7 +51,8 @@ window#waybar.chromium { #pulseaudio, #pulseaudio-slider, #custom-separator, -#scratchpad { +#scratchpad, +#tray { padding: 0 10px; color: @text-primary; transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease; @@ -69,7 +70,7 @@ window#waybar.chromium { padding: 0 6px; min-width: 20px; background-color: transparent; - color: alpha(@accent-color, 0.5); + color: alpha(@accent, 0.5); border: none; border-radius: 0; } @@ -80,8 +81,8 @@ window#waybar.chromium { } #workspaces button.active.hosting-monitor { - color: @accent-color; - text-shadow: 0px 0px 8px @accent-color; + color: @accent; + text-shadow: 0px 0px 8px @accent; animation: hover 0.8s 1; } @@ -101,14 +102,24 @@ window#waybar.chromium { /* -------------------------------------------------------------------------- SIDE PANEL GROUPS -------------------------------------------------------------------------- */ +.modules-left, .modules-center, .modules-right { + /* Layout & Box Model */ + border: 1px solid @border-color; + border-radius: 12px; + + /* Colors */ + background-color: @bg-panel; + /* color: @text-primary; */ + + /* Effects & Transitions */ + /* transition-property: background-color; */ + /* transition-duration: 0.5s; */ +} + .modules-left { - border-left: none; - border-radius: 0 0 10px 0; } .modules-right { - border-right: none; - border-radius: 0 0 0 10px; } /* -------------------------------------------------------------------------- @@ -155,7 +166,7 @@ window#waybar.chromium { /* POMODORO STATES */ #custom-pomodoro.work { - color: @accent-color; + color: @accent; } #custom-pomodoro.break { @@ -175,7 +186,7 @@ window#waybar.chromium { } #mpd.playing { - color: @accent-color; + color: @accent; } #mpd.stopped { @@ -219,15 +230,15 @@ window#waybar.chromium { #pulseaudio:hover, #custom-pomodoro:hover, #scratchpad:hover, -#power-profiles-daemon:hover { - color: @accent-color; - text-shadow: 0px 0px 8px @accent-color; +#tray:hover { + color: @accent; + text-shadow: 0px 0px 8px @accent; transition: color 0.3s, box-shadow 0.3s, background 0.3s; } #pulseaudio-slider:hover highlight { - background: @accent-color; - box-shadow: 0px 0px 8px @accent-color; + background: @accent; + box-shadow: 0px 0px 8px @accent; transition: color 0.3s, box-shadow 0.3s, background 0.3s; } @@ -252,5 +263,5 @@ window#waybar.chromium { -------------------------------------------------------------------------- */ @keyframes hover { 0% { color: @text-primary; } - 100% { color: @accent-color; } + 100% { color: @accent; } } diff --git a/waybar/style_bottom.css b/waybar/style_bottom.css deleted file mode 100644 index e69de29..0000000