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

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