diff --git a/waybar/config_top.jsonc b/waybar/config_top.jsonc index 6b28cf0..8c131b8 100644 --- a/waybar/config_top.jsonc +++ b/waybar/config_top.jsonc @@ -1,17 +1,13 @@ // -*- mode: jsonc -*- { - //"output": "eDP-1", "output": [ "eDP-1", "HDMI-A-1" ], - // "layer": "top", // Waybar at top layer - // "position": "bottom", // Waybar position (top|bottom|left|right) - "height": 30, // Waybar height (to be removed for auto height) - "width": 1900, // Waybar width - "spacing": 0, // Gaps between modules (4px) + "height": 30, + "width": 1900, + "spacing": 0, "reload_style_on_change": true, - // Choose the order of the modules "modules-left": [ "custom/separator_invisible", "mpd", @@ -28,28 +24,15 @@ "clock", "custom/separator_invisible" ], - // Modules configuration "hyprland/workspaces": { "disable-scroll": true, "all-outputs": false, "active-only": true, "warp-on-scroll": false, "persistent-workspaces": { - // "1": [], - // "2": [], - // "3": [], - // "4": [], - // "5": [], - // "6": [], - // "7": [], - // "8": [], - // "9": [], - // "10": [], - // "11": [], - // "12": [] "eDP-1": [1,2,3,4,5,6,7,8,9], "HDMI-A-1": [10,11,12], - "FUCKOFF": [13,14] + "IGNORED": [13,14] }, "ignore-workspaces": [ "*13", @@ -69,14 +52,13 @@ "10": "󰥱", "11": "", "12": "", - "default": "󰽢", - "empty": "󰄰" + "default": "󰽢" } }, "mpd": { "password": "kapuchinamusica", "artist-len": 30, - "title-len": 30, + "title-len": 31, "unknown-tag": "n/a", "format": "{stateIcon} {titleSmart}", "interval": 1, @@ -92,16 +74,8 @@ "format-stopped": "", "on-click": "mpc toggle --password kapuchinamusica" }, - "tray": { - // "icon-size": 21, - "spacing": 10, - "icons": { - "blueman": "bluetooth", - "*": "folder-symbolic" - } - }, "clock": { - // "timezone": "America/New_York", + "timezone": "Europe/Moscow", "interval": 5, "tooltip-format": "{:%A ( %B %d )}\n{calendar}", "format": "{:%H:%M}", @@ -122,18 +96,6 @@ "on-click-right": "mode" } }, - "cpu": { - "format": "󰓅 {usage}%", - "tooltip": false, - "interval": 15, - "format-icons": [ - "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥" - ] - }, - "memory": { - "format": "󰧑 {percentage}% 󰋊 {swapPercentage}%", - "interval": 10 - }, "battery": { "full-at": 98, "states": { @@ -147,7 +109,7 @@ "format-plugged": "{icon}", "format-alt": "{time} {icon}", // "format-good": "", // An empty format will hide the module - "format-icons": ["󰂎", "", "", "󰁽", "", "󰁿", "", "󰂁", "󰂂", ""], + "format-icons": ["󰂎", "", "", "󰁽", "", "󰁿", "", "󰂁", "󰂂"], "tooltip-format": "{capacity}%, draws {power:2.1f}W, time is {time}" }, "network": { @@ -175,46 +137,16 @@ "max": 100, "orientation": "horizontal" }, - "custom/logo": { - "format": "", - "on-click": "swaync-client -t -sw", - "interval": "once", - "tooltip": false - }, - "custom/separator": { - "format": "", - "interval": "once", - "tooltip": false - }, "custom/separator_invisible": { "format": " ", "interval": "once", "tooltip": false }, - "custom/submap": { - "format": " {icon} {text}", - "max-length": 10, - "format-icons": { - "default": "󰥻" - }, - "interval": 2, - "exec": "state=$(hyprctl submap) && [[ $state != 'default' ]] && echo $state", - "on-click": "hyprctl dispatch submap reset" - }, "custom/pomodoro": { "format": "{}", "return-type": "json", "exec": "~/.local/bin/waybar-module-pomodoro --persist -w 20 -s 5 -l 20 -i 3 -p '' -a '' --autob", "on-click": "~/.local/bin/waybar-module-pomodoro toggle", "on-click-right": "~/.local/bin/waybar-module-pomodoro reset" - }, - "custom/panel": { - "format": "", - "on-click": "swaync-client -t -sw" - }, - "custom/goal": { - "exec": "cat $HOME/.config/waybar/goal.txt", - "format": "󱓧 {}", - "interval": 60 } } diff --git a/waybar/style_top.css b/waybar/style_top.css index 4b65b4e..913d25d 100644 --- a/waybar/style_top.css +++ b/waybar/style_top.css @@ -1,306 +1,256 @@ -/* Colors Definitions */ +/* -------------------------------------------------------------------------- + IMPORTS & GLOBAL STYLES + -------------------------------------------------------------------------- */ @import "colors.css"; -/* Window */ +/* -------------------------------------------------------------------------- + BASE CONTAINER + -------------------------------------------------------------------------- */ window#waybar { - font-family: "Iosevka Nerd Font Propo"; - font-size: 15px; - background-color: @bg-panel; - color: @text-primary; - border-radius: 0 0 10px 10px; - border: 1px solid @border-color; - border-top: none; - transition-property: background-color; - transition-duration: 0.5s; + /* Layout & Box Model */ + border: 1px solid @border-color; + border-top: none; + border-radius: 0 0 10px 10px; + + /* Typography */ + font-family: "Iosevka Nerd Font Propo"; + font-size: 15px; + + /* Colors */ + background-color: @bg-panel; + color: @text-primary; + + /* Effects & Transitions */ + transition-property: background-color; + transition-duration: 0.5s; } +/* Window States */ window#waybar.hidden { - opacity: 0.2; + opacity: 0.2; } window#waybar.termite { - background-color: #3F3F3F; + background-color: #3F3F3F; } window#waybar.chromium { - background-color: #000000; - border: none; + background-color: #000000; + border: none; } -/* Common module styling - applied to most modules */ +/* -------------------------------------------------------------------------- + MODULE COMMON STYLES + -------------------------------------------------------------------------- */ +/* Common styling applied to all modules */ #mpd, #custom-pomodoro, -#custom-goal, -#custom-submap, -#cpu, -#memory, -#disk, #clock, #battery, -#temperature, -#backlight, #network, #pulseaudio, #pulseaudio-slider, -#wireplumber, -#custom-logo, -#custom-media, -#custom-panel, #custom-separator, -#tray, -#mode, -#idle_inhibitor, #scratchpad { - padding: 0 10px; - color: @text-primary; - transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease; + padding: 0 10px; + color: @text-primary; + transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease; } -/* Workspaces */ +/* -------------------------------------------------------------------------- + WORKSPACES + -------------------------------------------------------------------------- */ #workspaces { - font-size: 18px; - background-color: transparent; + font-size: 18px; + background-color: transparent; } #workspaces button { - padding: 0 6px; - min-width: 20px; - background-color: transparent; - color: alpha(@accent-color,.5); - border: none; - border-radius: 0; + padding: 0 6px; + min-width: 20px; + background-color: transparent; + color: alpha(@accent-color, 0.5); + border: none; + border-radius: 0; } +/* Workspace States */ #workspaces button.empty { - color: @text-secondary; + color: @text-secondary; } #workspaces button.active.hosting-monitor { - /* background-color: rgba(0, 0, 0, 0.32); */ - /* box-shadow: inset 0 -3px @accent-color; */ - color: @accent-color; - text-shadow: 0px 0px 8px @accent-color; - animation: hover 0.8s 1; + color: @accent-color; + text-shadow: 0px 0px 8px @accent-color; + animation: hover 0.8s 1; } #workspaces button.urgent { - color: @bg-opaque; - font-weight: 700; - color: @attention; - text-shadow: 0px 0px 8px @attention; - transition: color 0.5s, box-shadow 0.5s, background 0.5s; + 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); + color: @foreground; + background-color: transparent; + text-shadow: 0px 0px 2px rgba(233, 99, 117, 1); } -/* Side Module Groups */ +/* -------------------------------------------------------------------------- + SIDE PANEL GROUPS + -------------------------------------------------------------------------- */ .modules-left { - border-left: none; - border-radius: 0 0 10px 0; + border-left: none; + border-radius: 0 0 10px 0; } .modules-right { - border-right: none; - border-radius: 0 0 0 10px; -} - -/* System Modules - specific border adjustments */ -#cpu, -#memory, -#memory.swap { - margin: 0; -} - -#cpu { - border-right: none; - border-radius: 0 0 0 10px; -} - -#memory { - border-left: none; -} - -/* Custom Modules */ -#custom-pomodoro { - color: @text-secondary; -} - -#custom-pomodoro { - border-radius: 0 0 10px 10px; -} - -#custom-goal { - margin: 0; - border-left: none; - border-radius: 0 0 10px 0; -} - -#custom-submap { - color: @text-primary; -} - -/* Pomodoro States */ -#custom-pomodoro.work { - color: @accent-color; -} - -#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; -} - -#custom-pomodoro.break + #custom-goal, -#custom-pomodoro.pause + #custom-goal { - color: inherit; - box-shadow: inherit; -} - -/* System Info Modules */ -#cpu, -#memory, -#memory.swap, -#disk { - color: @text-primary; + border-right: none; + border-radius: 0 0 0 10px; } +/* -------------------------------------------------------------------------- + AUDIO CONTROL MODULES + -------------------------------------------------------------------------- */ #pulseaudio { - padding-right: 0; + 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; + 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,.2); + 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; + min-width: 10px; + border-radius: 5px; + background: @text-primary; } -#pulseaudio { - border-right: none; +/* -------------------------------------------------------------------------- + CUSTOM MODULES + -------------------------------------------------------------------------- */ +#custom-pomodoro { + color: @text-secondary; + border-radius: 0 0 10px 10px; } -/* MPD specific styles */ +/* -------------------------------------------------------------------------- + STATE-BASED STYLES + -------------------------------------------------------------------------- */ + +/* POMODORO STATES */ +#custom-pomodoro.work { + color: @accent-color; +} + +#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; + font-weight: 700; + transition: color 2s, background 2s; } #mpd.playing { - color: @accent-color; + color: @accent-color; } #mpd.stopped { - /* color: rgba(255,255,255,0.5); */ - color: transparent; - background: transparent; + color: transparent; + background: transparent; } #mpd.paused { - font-weight: normal; - color: @text-secondary; + font-weight: normal; + color: @text-secondary; } -/* Hover Effects */ +/* 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; +} + +/* -------------------------------------------------------------------------- + HOVER EFFECTS + -------------------------------------------------------------------------- */ #mpd.playing:hover, #mpd.paused:hover, #clock:hover, #battery:hover, -#disk:hover, -#temperature:hover, -#backlight:hover, #network:hover, #pulseaudio:hover, -#cpu:hover, -#memory:hover, -#wireplumber:hover, -#custom-logo:hover, #custom-pomodoro:hover, -#custom-media:hover, -#custom-panel:hover, -#mode:hover, -#idle_inhibitor:hover, #scratchpad:hover, #power-profiles-daemon:hover { - color: @accent-color; - text-shadow: 0px 0px 8px @accent-color; - transition: color 0.3s, box-shadow 0.3s, background 0.3s; + color: @accent-color; + text-shadow: 0px 0px 8px @accent-color; + 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; - transition: color 0.3s, box-shadow 0.3s, background 0.3s; + background: @accent-color; + box-shadow: 0px 0px 8px @accent-color; + transition: color 0.3s, box-shadow 0.3s, background 0.3s; } -/* 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; +/* -------------------------------------------------------------------------- + LAYOUT UTILITIES + -------------------------------------------------------------------------- */ +#window, +#workspaces { + margin: 0 0px; } -#battery.warning:not(.charging) { - color: @warning; - text-shadow: 0px 0px 8px @warning; - transition: color 0.3s, box-shadow 0.3s, background 0.3s; +.modules-left > widget:first-child > #workspaces { + margin-left: 0; } -#battery.critical:not(.charging) { - color: @danger; - text-shadow: 0px 0px 8px @danger; - transition: color 0.3s, box-shadow 0.3s, background 0.3s; +.modules-right > widget:last-child > #workspaces { + margin-right: 0; } -/* Tray */ -#tray > .needs-attention { - -gtk-icon-effect: highlight; - animation: blink-attention 2s infinite; -} - -/* Animations */ +/* -------------------------------------------------------------------------- + ANIMATIONS + -------------------------------------------------------------------------- */ @keyframes hover { 0% { color: @text-primary; } 100% { color: @accent-color; } } - -/* 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; -} - -#mode { - box-shadow: inset 0 -3px @text-primary; -}