From 0bf183ffeeb0fd77be1f6e519bb7faea99078ef2 Mon Sep 17 00:00:00 2001 From: Nico Date: Sun, 8 Jun 2025 00:14:55 +1000 Subject: [PATCH] waybar: make waybar vertical --- stow/.config/waybar/config.jsonc | 93 +++++++++++++++----------------- stow/.config/waybar/style.css | 72 +++++++++++++++---------- 2 files changed, 85 insertions(+), 80 deletions(-) diff --git a/stow/.config/waybar/config.jsonc b/stow/.config/waybar/config.jsonc index d5bcc5e..d33cda5 100644 --- a/stow/.config/waybar/config.jsonc +++ b/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) - "height": 40, - "margin": "0 0 0 0", + "position": "right", // Waybar position (top|bottom|left|right) + //"height": 40, + "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", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10" + "1": "一", + "2": "二", + "3": "三", + "4": "四", + "5": "五", + "6": "六", + "7": "七", + "8": "八", + "9": "九", + "10": "十" } }, "niri/workspaces": { "disable-scroll": true, "all-outputs": true, - "format": "{icon}" - // "format": "< %g >", - // "format_focused" : "< %g ● >", + "format": "{icon}", + "format-icons": { + "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-disconnected": "⚠ Disconnected", + "format-ethernet": " ", + "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": ["", "", ""] diff --git a/stow/.config/waybar/style.css b/stow/.config/waybar/style.css index 2c5700e..d8c4914 100644 --- a/stow/.config/waybar/style.css +++ b/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-right: 5px; - margin-top: 10px; + margin-top: 5px; + margin-bottom: 5px; } 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; - margin-left: 0px; + border-top-right-radius: 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 {