waybar: make waybar vertical

This commit is contained in:
Nico 2025-06-08 00:14:55 +10:00
parent 5c3d12c059
commit 0bf183ffee
2 changed files with 85 additions and 80 deletions

View file

@ -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": ["", "", ""]

View file

@ -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 {