update waybar to new transparent style

This commit is contained in:
2025-05-05 22:41:37 +02:00
parent 80023dc6e7
commit 3edb92e785
2 changed files with 37 additions and 94 deletions

View File

@@ -2,61 +2,19 @@
"layer": "top", // Waybar at top layer
"position": "top", // Waybar position (top|bottom|left|right)
"height": 22, // Waybar height (to be removed for auto height)
// "width": 1280, // Waybar width
"spacing": 4, // Gaps between modules (4px)
"margin-top": 5,
"margin-right": 5,
"margin-left": 5,
"reload_style_on_change": true,
// Choose the order of the modules
"modules-left": ["tray"],
//"modules-left": ["sway/workspaces", "sway/mode", "sway/scratchpad", "custom/media"],
//"modules-center": [""],
"modules-center": ["pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "keyboard-state", "sway/language", "battery", "idle_inhibitor"],
"modules-right": ["clock", "custom/power"],
"modules-right": ["clock"],
//"modules-right": ["tray", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "keyboard-state", "sway/language", "battery", "clock", "custom/power"],
// Modules configuration
// "sway/workspaces": {
// "disable-scroll": true,
// "all-outputs": true,
// "format": "{name}: {icon}",
// "format-icons": {
// "1": "",
// "2": "",
// "3": "",
// "4": "",
// "5": "",
// "urgent": "",
// "focused": "",
// "default": ""
// }
// },
//"hyprland/window": {
//"max-length": 200,
//"separate-outputs": true
//},
//"wlr/workspaces": {
// "format": "{icon}",
// "on-scroll-up": "hyprctl dispatch workspace e+1",
// "on-scroll-down": "hyprctl dispatch workspace e-1"
//},
//"keyboard-state": {
// "numlock": true,
// "capslock": true,
// "format": "{name} {icon}",
// "format-icons": {
// "locked": "",
// "unlocked": ""
// }
//},
//"sway/mode": {
// "format": "<span style=\"italic\">{}</span>"
//},
//"sway/scratchpad": {
// "format": "{icon} {count}",
// "show-empty": false,
// "format-icons": ["", ""],
// "tooltip": true,
// "tooltip-format": "{app}: {title}"
//},
"idle_inhibitor": {
"format": "{icon}",
"format-icons": {
@@ -68,21 +26,10 @@
//"icon-size": 18,
"spacing": 10
},
//"clock": {
// "timezone": "America/New_York",
//"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
//"format-alt": "{:%d/%m/%Y}",
//"calendar": {
// "format": {
// "weeks": "<span color='#99ffdd'><b>W{}</b></span>",
// },
//},
//},
"clock": {
"timezone": "Europe/Rome",
"locale": "it_IT.UTF-8",
"format": "{:%H:%M} ",
"format-alt": "{:%d/%m/%Y (%R) }",
"format": "{:%d/%m/%Y (%R)}",
"tooltip-format": "<tt><big>{calendar}</big></tt>",
"calendar": {
"format": {
@@ -124,7 +71,7 @@
"warning": 30,
"critical": 15
},
"format": "{capacity}% {icon}",
"format": "{capacity}% {icon} ",
"format-charging": "{capacity}% ",
"format-plugged": "{capacity}% ",
"format-alt": "{time} {icon}",
@@ -133,20 +80,19 @@
"format-icons": ["", "", "", "", ""]
},
"network": {
// "interface": "wlp2*", // (Optional) To force the use of this interface
"format-wifi": "{essid} ({signalStrength}%) ",
"format-ethernet": "{ipaddr}/{cidr} ",
"tooltip-format": "{ifname} via {gwaddr} ",
"format-linked": "{ifname} (No IP) ",
"format-disconnected": "Disconnected ⚠",
"format-alt": "{ifname}: {ipaddr}/{cidr}"
"format-alt": "{ifname}: {ipaddr}/{cidr}",
},
"pulseaudio": {
// "scroll-step": 1, // %, can be a float
"format": "{volume}% {icon} {format_source}",
"format-bluetooth": "{volume}%  {format_source}",
"format-bluetooth-muted": " {format_source}",
"format-muted": " {format_source}",
"format": "{volume}% {icon}",
"format-bluetooth": "{volume}% ",
"format-bluetooth-muted": "",
"format-muted": " ",
"format-source": "{volume}% ",
"format-source-muted": "",
"format-icons": {
@@ -160,10 +106,10 @@
},
"on-click": "pavucontrol"
},
"custom/power":{
"format":"",
"on-click":"rofi -show p -modi p:'~/.config/rofi/utils/rofi-power-menu --choices shutdown/reboot/suspend --no-symbols'"
},
"custom/power": {
"format":" ",
"on-click":"rofi -show p -modi p:'~/.config/rofi/utils/rofi-power-menu --choices shutdown/reboot/suspend --no-symbols'"
},
"custom/media": {
"format": "{icon} {}",
"return-type": "json",

View File

@@ -1,7 +1,7 @@
* {
/* `otf-font-awesome` is required to be installed for icons */
font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
font-family: JetBrains Mono Nerd;
font-size: 0.85rem;
}
window#waybar {
@@ -91,8 +91,8 @@ button:hover {
#mpd {
border: 2px solid transparent;
border-radius: 10px;
padding: 0 10px;
color: #ffffff;
padding: 0 0.625rem;
background-color: rgba(80, 80, 80, 0.5);
}
@@ -112,31 +112,29 @@ button:hover {
}
#custom-power {
background-color: rgba(10, 10, 10, 0.95);
padding: 0 13px 0 7px;
background-color: rgba(10, 10, 10, 0.6);
}
#window {
margin-right: 10px;
background-color: rgba(80, 80, 80, 0.8);
}
#clock {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
}
#battery {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
transition-property: background-color;
transition-duration: .5s;
}
#battery.charging, #battery.plugged {
background-color: #29ad60;
background-color: alpha(#29ad60, 0.8);
}
#battery.warning:not(.charging){
background-color: #ffa000;
background-color: alpha(#ffa000, 0.6);
}
@keyframes blink {
@@ -147,7 +145,7 @@ button:hover {
}
#battery.critical:not(.charging) {
background-color: #f53c3c;
background-color: alpha(#f53c3c, 0.8);
color: #ffffff;
animation-name: blink;
animation-duration: 0.5s;
@@ -157,15 +155,15 @@ button:hover {
}
label:focus {
background-color: #000000;
background-color: alpha(#000000, 0.6);
}
#cpu {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
}
#memory {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
}
#memory.warning {
@@ -177,23 +175,23 @@ label:focus {
}
#disk {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
}
#backlight {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
}
#network {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
}
#network.disconnected {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
}
#pulseaudio {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
}
#pulseaudio.muted {
@@ -223,18 +221,17 @@ label:focus {
}
#temperature {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
transition-property: background-color;
transition-duration: .5s;
}
#temperature.critical {
background-color: #eb4d4b;
background-color: alpha(#eb4d4b, 0.6);
}
#tray {
margin-left: 10px;
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
}
#tray > .passive {
@@ -247,14 +244,14 @@ label:focus {
}
#idle_inhibitor {
background-color: rgba(10, 10, 10, 0.95);
background-color: rgba(10, 10, 10, 0.6);
transition-property: background-color;
transition-duration: 1s;
}
#idle_inhibitor.activated {
background-color: #ecf0f1;
color: rgba(10, 10, 10, 0.95);
background-color: alpha(#ecf0f1, 0.6);
color: rgb(10, 10, 10);
}
#mpd {