waybar: make waybar vertical

stow/.config/waybar/config.jsonc

@@ -1,30 +1,8 @@
-// MIT License
-// Copyright (c) 2024 LightCrimson
-// https://github.com/yurihikari/garuda-hyprdots
-// 
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-// 
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-// 
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
 {
   "layer": "top", // Waybar at top layer
-  "position": "top", // Waybar position (top|bottom|left|right)
+  "position": "right", // Waybar position (top|bottom|left|right)
-  "height": 40,
+  //"height": 40,
-  "margin": "0 0 0 0",
+  "margin": "0 10 0 10",
   //"width": 1350, // Waybar width
   // Choose the order of the modules idle_inhibitor
   "modules-left": [
@@ -35,10 +13,10 @@
   ],
   "modules-center": [],
   "modules-right": [
+    "network",
     "wireplumber",
     "backlight",
     "battery",
-    "network",
     "privacy",
     "clock",
     "custom/swaync"
@@ -53,33 +31,44 @@
     // "format": "< %g >",
     // "format_focused" : "< %g ● >",
     "format-icons": {
-      "1": "1",
+      "1": "一",
-      "2": "2",
+      "2": "二",
-      "3": "3",
+      "3": "三",
-      "4": "4",
+      "4": "四",
-      "5": "5",
+      "5": "五",
-      "6": "6",
+      "6": "六",
-      "7": "7",
+      "7": "七",
-      "8": "8",
+      "8": "八",
-      "9": "9",
+      "9": "九",
-      "10": "10"
+      "10": "十"
     }
   },
   "niri/workspaces": {
     "disable-scroll": true,
     "all-outputs": true,
-    "format": "{icon}"
+    "format": "{icon}",
-    // "format": "< %g >",
+    "format-icons": {
-    // "format_focused" : "< %g ● >",
+      "1": "一",
+      "2": "二",
+      "3": "三",
+      "4": "四",
+      "5": "五",
+      "6": "六",
+      "7": "七",
+      "8": "八",
+      "9": "九",
+      "10": "十"
+    }
   },
   "custom/media": {
-//      "format": "{format}",
+      "rotate": 270,
+      "format": "󰎇 {}",
       "max-length": 40,
       "escape": true,
       "exec": "playerctl metadata title -F"
   },
   "tray": {
-    "icon-size": 14,
+    "icon-size": 22,
     "spacing": 5
   },
   "clock": {
@@ -105,9 +94,11 @@
       "on-scroll-up": "shift_up",
       "on-scroll-down": "shift_down"
     },
-    "format": "  {:%a %d %b  %I:%M %p}", //12 hour format
+    "format": " \n{:%I\n%M}", //12 hour format
+    //"format": "  {:%a %d %b  %I:%M %p}", //12 hour format
     // "format": " {:%d %m %Y  %H:%M}",	//24 hour format
-    "format-alt": "  {:%d/%m/%Y  %H:%M:%S}",
+    "format-alt": "\n{:%d\n%m\n%y}",
+    //"format-alt": "  {:%d/%m/%Y  %H:%M:%S}",
     // //"timezones": [ "Kolkata" ],
     // //"max-length": 200
     "interval": 1
@@ -118,29 +109,29 @@
       "warning": 30,
       "critical": 15
     },
-    "format": "{icon} {capacity: >3}%",
+    "format": "{icon}\n{capacity}",
     // "format-good": "", // An empty format will hide the module
     // "format-full": "",
-    "format-icons": ["", "", "", "", ""]
+    "format-icons": ["󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"]
     //"format-icons": ["", "", "", "", "", "", "", "", "", ""]
   },
   "backlight": {
       // "device": "acpi_video1",
-      "format": "{icon} {percent}%",
+      "format": "{icon}\n{percent}",
       "format-icons": ["", "", "", "", "", "", "", "", ""]
   },
   "network": {
     // "interface": "wlp2s0", // (Optional) To force the use of this interface
-    "format": "⚠  Disabled",
+    "format": "⚠",
     //"format-wifi": "  {essid}",
-    "format-wifi": "  Connected",
+    "format-wifi": " ",
     // "format-ethernet": " {ifname}: {ipaddr}/{cidr}",
-    "format-ethernet": "  Wired",
+    "format-ethernet": " ",
-    "format-disconnected": "⚠  Disconnected",
+    "format-disconnected": "⚠",
     "on-click": "ghostty --fullscreen=true -e 'sleep 0.05; nmtui'"
   },
   "wireplumber": {
-    "format": "{icon} {volume}%",
+    "format": "{icon}\n{volume}",
     "format-muted": "",
     "on-click": "helvum",
     "format-icons": ["", "", ""]

stow/.config/waybar/style.css

@@ -3,22 +3,19 @@
 * {
     /* `otf-font-awesome` is required to be installed for icons */
 /*    font-family: ComicShannsMono Nerd Font, FontAwesome, Roboto, Helvetica, Arial, sans-serif;*/
-    font-size: 13px;
+    font-size: 20px;
     border-radius: 10px;
     transition-duration: 0.5s;
 }
 
 .module {
-    margin-left: 5px;
+    margin-top: 5px;
-    margin-right: 5px;
+    margin-bottom: 5px;
-    margin-top: 10px;
 }
 
 window#waybar {
     color: @primary;
     background-color: transparent;
-    transition-property: background-color;
-    transition-duration: .5s;
 }
 
 window#waybar.hidden {
@@ -48,10 +45,15 @@ button {
 
 #workspaces button {
     color: @primary;
-    padding: 0 5px;
+    padding: 5 0px;
     border-radius: inherit;
 }
 
+#workspaces button.active {
+    color: @on_primary;
+    background-color: @on_primary_container;
+}
+
 #workspaces button:hover {
     color: @on_primary;
     background: @on_primary_container;
@@ -79,19 +81,15 @@ button {
 #scratchpad,
 #power-profiles-daemon,
 #mpd {
-    padding: 0 10px;
+    padding: 10 0px;
     background-color: @background;
     color: @primary;
 }
 
-#window,
-#workspaces {
-}
-
 #clock {
-    border-top-right-radius: 0px;
+    border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
-    margin-right: 0px;
+    margin-bottom: 0px;
 
     border-right: none;
 
@@ -101,8 +99,8 @@ button {
 
 #custom-swaync {
     border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
+    border-top-right-radius: 0px;
-    margin-left: 0px;
+    margin-top: 0px;
 
     border-left: none;
 
@@ -111,11 +109,38 @@ button {
     padding: 10px;
 }
 
+
+
+#wireplumber {
+    background-color: @background;
+    color: @secondary;
+
+    margin-bottom: 0px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+#backlight {
+    background-color: @background;
+    color: @secondary;
+
+    margin-top: 0px;
+    margin-bottom: 0px;
+    border-radius: 0px;
+}
+
+
 #battery {
     background-color: @background;
     color: @secondary;
+    margin-top: 0px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
 }
 
+
+
+
 #battery.charging, #battery.plugged {
     color: #ffffff;
     background-color: #26A65B;
@@ -154,14 +179,9 @@ button {
     color: @tertiary;
 }
 
-#backlight {
-    background-color: @background;
-    color: @tertiary;
-}
-
 #network {
     background-color: @background;
-    color: @secondary;
+    color: @tertiary;
 }
 
 #network.disconnected {
@@ -169,12 +189,6 @@ button {
     color: @error;
 }
 
-#wireplumber {
-    background-color: @background;
-    color: @tertiary;
-/*    color: @primary;*/
-}
-
 #wireplumber.muted {
     background-color: @background;
     color: @error;
@@ -183,7 +197,7 @@ button {
 #custom-media {
     background-color: @background;
     color: @tertiary;
-    min-width: 100px;
+    min-height: 100px;
 }
 
 #tray {