feat: split panels for waybar;

refactor: waybar, swaync and rofi now share colors;
refactor: removed windows from rofi, niced colors;
fix: transparency blur arifacts;

hypr/hyprland.conf

@@ -3,8 +3,8 @@
 ################
 
 # See https://wiki.hyprland.org/Configuring/Monitors/
-monitor=eDP-1, 1920x1080, 0x0, 1
+# monitor=eDP-1, 1920x1080, 0x0, 1
-monitor=HDMI-A-1, 1920x1080, -1920x-100, 1
+# monitor=HDMI-A-1, 1920x1080, -1920x-100, 1
 
 ###################
 ### MY PROGRAMS ###
@@ -571,14 +571,17 @@ windowrule = suppressevent maximize, class:.*
 windowrule = nofocus,class:^$,title:^$,xwayland:1,floating:1,fullscreen:0,pinned:0
 
 # Animation for rofi
+layerrule = ignorezero, rofi
 layerrule = blur, rofi
 layerrule = animation slideIn left, rofi
 
 # Animation fpr swaync
 layerrule = blur, swaync-control-center
+layerrule = ignorezero, swaync-control-center
 layerrule = animation slideIn right, swaync-control-center
 
 # Waybar blur
+layerrule = ignorezero, waybar
 layerrule = blur, waybar
 
 # Adjustments for certain workspaces
@@ -588,3 +591,5 @@ workspace = 9, gapsin:15, gapsout:40
 debug {
   disable_logs = false
 }
+
+source = ~/.config/hypr/monitors.conf

hypr/monitors.conf

@@ -0,0 +1,3 @@
+# Generated by nwg-displays on 2025-09-17 at 19:51:26. Do not edit manually.
+
+monitor=eDP-1,1920x1080@60.01,0x0,1.0

rofi-wayland/launchers/type-6/launcher.sh

@@ -16,10 +16,10 @@ if [[ ! -e /tmp/rofi-theme.rasi ]]; then
   cp ${dir}/${theme}.rasi /tmp/rofi-theme.rasi
 fi
 
-rm /tmp/rofi-img.jpg
+rm /tmp/rofi-img.png
-ln -s $image /tmp/rofi-img.jpg 
+ln -s $image /tmp/rofi-img.png 
 
 rofi \
-    -modes drun,run,window,calc \
+    -modes drun,run,calc \
     -show drun \
     -theme /tmp/rofi-theme.rasi

rofi-wayland/launchers/type-6/style-7.rasi

@@ -12,10 +12,10 @@ configuration {
 	modi:                       "drun,run,filebrowser,window";
     show-icons:                 true;
     display-drun:               "アプリ";
-    display-window:             "ウィンドウ";
+    display-window:             "実行中";
     display-filebrowser:        "ファイル"; 
     display-run:                "実行";
-    display-calc:               "計算機";
+    display-calc:               "電卓";
 	drun-display-format:        "{name}";
 	window-format:              "{w} · {c} · {t}";
 }
@@ -23,8 +23,13 @@ configuration {
 /*****----- Global Properties -----*****/
 * {
     font:                "JetBrains Mono Nerd Font 10";
-    background:     #1c1c1cba;
+    background:        #1c1c1cdd;
-    background-alt: #1c1c1cca;
+    background-alt:    #303030ff;
+    button-shape-top: #505050ff;
+    button-shape-bottom: #303030ff;
+    background-button: #2e2d31ff;
+    background-input: #1c1c1cff;
+    border:            #48535Ccf;
     foreground:        #FFe8EE;
     selected:          #9E2238dd;
     active:            #9E2238;
@@ -38,13 +43,14 @@ window {
     location:                    center;
     anchor:                      center;
     fullscreen:                  false;
-    height:                      500px;
+    height:                      450px;
-    width:                       1000px;
+    width:                       900px;
     x-offset:                    0px;
     y-offset:                    0px;
 
     border-radius:               15px;
-    border-color:                @selected;
+    border:                      3px;
+    border-color:                @border;
 
     /* properties for all widgets */
     enabled:                     true;
@@ -67,7 +73,7 @@ mainbox {
 imagebox {
     padding:                     20px;
     background-color:            transparent;
-    background-image:            url("/tmp/rofi-img.jpg", width);
+    background-image:            url("/tmp/rofi-img.png", width);
     orientation:                 vertical;
     children:                    [ "inputbar", "dummy", "mode-switcher" ];
 }
@@ -90,9 +96,11 @@ inputbar {
     spacing:                     10px;
     padding:                     15px;
     border-radius:               10px;
-    background-color:            @background-alt;
+    background-color:            @background-input;
     text-color:                  @foreground;
     children:                    [ "textbox-prompt-colon", "entry" ];
+    border-color:                @background-alt;
+    border:                      1px;
 }
 textbox-prompt-colon {
     enabled:                     true;
@@ -120,13 +128,17 @@ mode-switcher{
 button {
     padding:                     15px;
     border-radius:               10px;
-    background-color:            @background-alt;
+    background-color:            @background-button;
     text-color:                  inherit;
     cursor:                      pointer;
+    border-color:                @button-shape-top;
+    border: 1px 0 0 0;
+
 }
 button selected {
     background-color:            @selected;
     text-color:                  @foreground;
+    border: 0;
 }
 
 /*****----- Listview -----*****/

swaync/config.json

@@ -8,9 +8,9 @@
   "layer-shell": true,
   "layer-shell-cover-screen": false,
   "cssPriority": "highest",
-  "control-center-margin-top": 5,
+  "control-center-margin-top": 10,
   "control-center-margin-bottom": 5,
-  "control-center-margin-right": 5,
+  "control-center-margin-right": -10,
   "control-center-margin-left": 0,
   "notification-2fa-action": false,
   "notification-inline-replies": false,
@@ -21,13 +21,13 @@
   "timeout-critical": 0,
   "fit-to-screen": true,
   "relative-timestamps": true,
-  "control-center-width": 500,
+  "control-center-width": 470,
-  "control-center-height": 600,
+  "control-center-height": 800,
   "notification-window-width": 500,
   "keyboard-shortcuts": true,
   "notification-grouping": false,
   "image-visibility": "when-available",
-  "transition-time": 200,
+  "transition-time": 100,
   "hide-on-clear": false,
   "hide-on-action": true,
   "text-empty": "No nothing",
@@ -58,8 +58,7 @@
     "inhibitors",
     "title",
     "notifications",
-    "dnd",
+    "dnd"
-    "mpris"
   ],
   "widget-config": {
     "inhibitors": {

swaync/style.css

@@ -1,6 +1,6 @@
 :root {
   --cc-bg: #1c1c1cca;
-  --noti-border-color: rgba(90, 104, 115, 0.5);
+  --noti-border-color: rgba(90, 104, 115, 0.8);
   --noti-bg: #1c1c1cca;
   --noti-bg-alt:#1c1c1cca; 
   --noti-bg-alpha: 0.85;
@@ -16,6 +16,7 @@
   --notification-icon-size: 64px;
   --notification-app-icon-size: calc(var(--notification-icon-size) / 3);
   --notification-group-icon-size: 32px;
+  --button-off: #2e2d31;
 }
 
 * {
@@ -24,7 +25,8 @@
 }
 
 button {
-  background: var(--noti-border-color);
+  background-color: var(--button-off);
+  border: 1px solid #303030;
 }
 
 button:hover {
@@ -304,8 +306,9 @@ button:hover {
   /* The Control Center which contains the old notifications + widgets */
   background: var(--cc-bg);
   color: var(--text-color);
-  border-radius: 5px;
+  border-radius: 10px 0 0 10px;
   border: 3px solid var(--noti-border-color);
+  border-right: none;
 }
 
 .control-center .control-center-list-placeholder {

waybar/config.jsonc

@@ -8,24 +8,18 @@
     "spacing": 4, // Gaps between modules (4px)
     // Choose the order of the modules
     "modules-left": [
-        "hyprland/workspaces",
+        "hyprland/workspaces"
-        "pulseaudio"
     ],
     "modules-center": [
         "mpd"
     ],
     "modules-right": [
+        "pulseaudio",
         "network",
-        "cpu",
         "memory",
-        //"temperature",
-        //"backlight",
-        //"hyprland/language",
         "battery",
-        //"battery#bat2",
         "tray",
         "clock"
-        // "custom/power"
     ],
     // Modules configuration
     "hyprland/workspaces": {
@@ -68,7 +62,6 @@
             "10": "零",
             "11": "一",
             "12": "十",
-            // "3": "",
             "default": "",
             "empty": ""
         }
@@ -98,10 +91,10 @@
     },
     "mpd": {
         "password": "kapuchinamusica",
-        "artist-len": 15,
+        "artist-len": 30,
-        "title-len": 30,
+        "title-len": 45,
         "unknown-tag": "n/a",
-        "format": "{stateIcon} {artist} - {title} {elapsedTime:%M:%S}/{totalTime:%M:%S}",
+        "format": "{stateIcon} {artist} - {title}",
         "interval": 1,
         "single-icons": {
             "on": "1 "
@@ -208,10 +201,10 @@
     },
     "pulseaudio": {
         // "scroll-step": 1, // %, can be a float
-        "format": "{volume}% {icon} {format_source}",
+        "format": "{format_source} {volume}% {icon}",
-        "format-bluetooth": "{volume}% {icon} {format_source}",
+        "format-bluetooth": "{format_source} {volume}% {icon}",
-        "format-bluetooth-muted": " {icon} {format_source}",
+        "format-bluetooth-muted": "{format_source}  {icon}",
-        "format-muted": " {format_source}",
+        "format-muted": "{format_source} 󰖁",
         "format-source": "",
         "format-source-muted": "  ",
         "format-icons": {

waybar/style.css

@@ -1,17 +1,46 @@
 * {
     /* `otf-font-awesome` is required to be installed for icons */
-    font-family: Iosevka, Roboto, Helvetica, Arial, sans-serif;
+    font-family: "Iosevka Nerd Font";
     font-size: 15px;
 }
 
 window#waybar {
+    /*
     background-color: rgba(23, 28, 39, 0.8);
     border-bottom: 3px solid rgba(90, 104, 115, 0.5);
+    */
+    background-color: transparent;
     color: #ffffff;
     transition-property: background-color;
     transition-duration: .5s;
 }
 
+.modules-left, .modules-right, #mpd.playing, #mpd.paused {
+    background-color: rgba(23, 28, 39, 0.8);
+    border: 3px solid rgba(90, 104, 115, 0.8);
+    border-top: none;
+}
+
+.modules-left {
+  border-left: none;
+  border-radius: 0 0 10px 0;
+}
+
+.modules-right {
+  border-right: none;
+  border-radius: 0 0 0 10px;
+}
+
+#mpd.playing, #mpd.paused {
+  border-radius: 0 0 10px 10px;
+}
+
+#mpd.playing {
+}
+
+@keyframes gradientShift {
+}
+
 window#waybar.hidden {
     opacity: 0.2;
 }
@@ -123,11 +152,9 @@ button:hover {
 
 @keyframes hover {
     0% {
-        background: rgba(0, 0, 0, 0);
         color: #ffffff;
     }
     100% {
-        background: rgba(0, 0, 0, 0.2);
         color: #E96375;
     }
 }
@@ -147,13 +174,19 @@ button:hover {
 #mode:hover,
 #idle_inhibitor:hover,
 #scratchpad:hover,
-#power-profiles-daemon:hover,
+#power-profiles-daemon:hover 
-#mpd:hover {
+{
     color: #E96375;
     background: rgba(0, 0, 0, 0.2);
     animation: hover 0.2s 1;
 }
 
+#mpd:hover
+{
+    color: #E96375;
+    animation: hover 0.2s 1;
+}
+
 #window,
 #workspaces {
     margin: 0 4px;
@@ -261,7 +294,6 @@ label:focus {
 }
 
 #pulseaudio.muted {
-    color: #2a5c45;
 }
 
 #wireplumber {
@@ -272,7 +304,6 @@ label:focus {
 }
 
 #custom-media {
-    color: #2a5c45;
     min-width: 100px;
 }
 
@@ -363,9 +394,6 @@ label:focus {
     }
 }
 
-#mpd {
-}
-
 #mpd.disconnected {
 }
 
@@ -431,8 +459,8 @@ label:focus {
 #custom-media,
 #mode,
 #idle_inhibitor,
-#scratchpad,
+#scratchpad
-#mpd {
+{
     padding: 0 10px;
     background-color: transparent;
     color: #ffffff;