chore: waybar style and config cleaned up

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
+    "height": 30,
-    // "position": "bottom", // Waybar position (top|bottom|left|right)
+    "width": 1900,
-    "height": 30, // Waybar height (to be removed for auto height)
+    "spacing": 0,
-    "width": 1900, // Waybar width
-    "spacing": 0, // Gaps between modules (4px)
     "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": "󰽢",
+            "default": "󰽢"
-            "empty": "󰄰"
         }
     },
     "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": "<big>{:%A ( %B %d )}</big>\n<tt><small>{calendar}</small></tt>",
         "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
     }
 }

waybar/style_top.css

@@ -1,19 +1,31 @@
-/* Colors Definitions */
+/* --------------------------------------------------------------------------
+   IMPORTS & GLOBAL STYLES
+   -------------------------------------------------------------------------- */
 @import "colors.css";
 
-/* Window */
+/* --------------------------------------------------------------------------
+   BASE CONTAINER
+   -------------------------------------------------------------------------- */
 window#waybar {
-    font-family: "Iosevka Nerd Font Propo";
+  /* Layout & Box Model */
-    font-size: 15px;
-    background-color: @bg-panel;
-    color: @text-primary;
-    border-radius: 0 0 10px 10px;
   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;
 }
@@ -27,36 +39,27 @@ window#waybar.chromium {
   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;
 }
 
-/* Workspaces */
+/* --------------------------------------------------------------------------
+   WORKSPACES
+   -------------------------------------------------------------------------- */
 #workspaces {
   font-size: 18px;
   background-color: transparent;
@@ -66,27 +69,25 @@ window#waybar.chromium {
   padding: 0 6px;
   min-width: 20px;
   background-color: transparent;
-    color: alpha(@accent-color,.5);
+  color: alpha(@accent-color, 0.5);
   border: none;
   border-radius: 0;
 }
 
+/* Workspace States */
 #workspaces button.empty {
   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;
 }
 
 #workspaces button.urgent {
-    color: @bg-opaque;
-    font-weight: 700;
   color: @attention;
+  font-weight: 700;
   text-shadow: 0px 0px 8px @attention;
   transition: color 0.5s, box-shadow 0.5s, background 0.5s;
 }
@@ -97,7 +98,9 @@ window#waybar.chromium {
   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;
@@ -108,72 +111,12 @@ window#waybar.chromium {
   border-radius: 0 0 0 10px;
 }
 
-/* System Modules - specific border adjustments */
+/* --------------------------------------------------------------------------
-#cpu,
+   AUDIO CONTROL MODULES
-#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;
-}
-
 #pulseaudio {
   padding-right: 0;
+  border-right: none;
 }
 
 #pulseaudio-slider slider {
@@ -189,7 +132,7 @@ window#waybar.chromium {
   min-height: 10px;
   min-width: 25px;
   border-radius: 5px;
-    background: alpha(@text-primary,.2);
+  background: alpha(@text-primary, 0.2);
 }
 
 #pulseaudio-slider highlight {
@@ -198,11 +141,34 @@ window#waybar.chromium {
   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;
@@ -213,7 +179,6 @@ window#waybar.chromium {
 }
 
 #mpd.stopped {
-    /* color: rgba(255,255,255,0.5); */
   color: transparent;
   background: transparent;
 }
@@ -223,39 +188,7 @@ window#waybar.chromium {
   color: @text-secondary;
 }
 
-/* Hover Effects */
+/* BATTERY STATES */
-#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;
-}
-
-#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;
-}
-
-/* Battery States */
 #battery.charging,
 #battery.plugged {
   color: @success;
@@ -275,19 +208,32 @@ window#waybar.chromium {
   transition: color 0.3s, box-shadow 0.3s, background 0.3s;
 }
 
-/* Tray */
+/* --------------------------------------------------------------------------
-#tray > .needs-attention {
+   HOVER EFFECTS
-    -gtk-icon-effect: highlight;
+   -------------------------------------------------------------------------- */
-    animation: blink-attention 2s infinite;
+#mpd.playing:hover,
+#mpd.paused:hover,
+#clock:hover,
+#battery:hover,
+#network:hover,
+#pulseaudio:hover,
+#custom-pomodoro: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;
 }
 
-/* Animations */
+#pulseaudio-slider:hover highlight {
-@keyframes hover {
+  background: @accent-color;
-    0% { color: @text-primary; }
+  box-shadow: 0px 0px 8px @accent-color;
-    100% { color: @accent-color; }
+  transition: color 0.3s, box-shadow 0.3s, background 0.3s;
 }
 
-/* Layout Utilities */
+/* --------------------------------------------------------------------------
+   LAYOUT UTILITIES
+   -------------------------------------------------------------------------- */
 #window,
 #workspaces {
   margin: 0 0px;
@@ -301,6 +247,10 @@ window#waybar.chromium {
   margin-right: 0;
 }
 
-#mode {
+/* --------------------------------------------------------------------------
-    box-shadow: inset 0 -3px @text-primary;
+   ANIMATIONS
+   -------------------------------------------------------------------------- */
+@keyframes hover {
+    0% { color: @text-primary; }
+    100% { color: @accent-color; }
 }