Login

r/waybar

Image 1 — Waybar tooltip has sharp outer shadow/decoration corners despite border radius set how to fix?
Image 2 — Waybar tooltip has sharp outer shadow/decoration corners despite border radius set how to fix?
Image 3 — Waybar tooltip has sharp outer shadow/decoration corners despite border radius set how to fix?
▲ 2 r/waybar+1 crossposts

Waybar tooltip has sharp outer shadow/decoration corners despite border radius set how to fix?

hello waybar experts, u can see in my waybar the the border radius of the shadow/hint of the waybar or whatever that is sharp even tho my i have set all border radius to 6 or more. Zoom in on the corner if u can't see.

HELP !!!

@import "colors.css";

* {
  all: unset;
  font-family: "JetBrainsMono Nerd Font", monospace;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  text-shadow: none;
  min-height: 0;
}

window#waybar {
  background: alpha(@surface, 0.75);
  border: none;
  border-radius: 9px;
  box-shadow: none;
  outline: none;
  color: ;
}

tooltip {
  all: unset;
  background: ;
  border: none;
  border-radius: 6px;
  box-shadow: none;
}

tooltip window {
  all: unset;
  background: ;
  border-radius: 6px;
}

tooltip.background {
  all: unset;
  background: ;
  border-radius: 6px;
}

tooltip label {
  color: ;
  font-weight: normal;
}

#window {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#window.empty {
  padding: 0;
  margin: 0;
  background: transparent;
}

#workspaces {
  margin: 4px;
  background: alpha(@surface_variant, 0.3);
  border-radius: 6px;
}

#workspaces button {
  padding: 0 10px;
  color: alpha(@on_surface, 0.35);
  background: transparent;
  transition: color 0.2s ease;
  font-size: 18px;
}

#workspaces button.active {
  color: ;
}

#workspaces button.urgent {
  color: ;
}

#workspaces button:hover {
  color: ;
  background: transparent;
}

#group-stats {
  padding: 0;
  margin: 0;
}

#group-stats drawer {
  transition: opacity 0.3s ease;
  opacity: 0;
  padding: 0 4px;
}

#group-stats:hover drawer {
  opacity: 1;
}

#custom-stats-toggle {
  padding: 2px 2px;
  margin: 2px 2px;
  color: ;
}

#cpu,
#memory,
#temperature {
  padding: 0 6px;
  margin: 4px 2px;
  background: alpha(@secondary, 0.15);
  color: ;
  border-radius: 6px;
}

#temperature.critical {
  color: ;
  background: alpha(@error, 0.2);
}

#custom-arrow {
  color: ;
  margin: 0 4px;
}

#custom-distro {
  padding: 0 10px 0 8px;
  color: ;
  font-size: 14px;
}

#custom-sep {
  color: alpha(@on_surface, 0.2);
  padding: 0 2px;
}

#idle_inhibitor {
  padding: 0 6px;
  color: alpha(@on_surface, 0.5);
}

#idle_inhibitor.activated {
  color: ;
}

#demo,
#stats {
  padding: 0 6px;
  margin: 4px 2px;
  background: alpha(@primary, 0.1);
  border-radius: 6px;
  color: ;
}

#tray {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.12);
  border-radius: 6px;
  color: ;
}

#tray > .passive {
  -gtk-icon-effect: dim;
}

#pulseaudio {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#pulseaudio.muted {
  color: ;
}

#battery {
  padding: 0 6px;
  color: ;
}

#battery.warning:not(.charging) {
  color: ;
}

#battery.critical:not(.charging) {
  color: ;
  animation: blink 0.5s linear infinite alternate;
}

#battery.charging,
#battery.plugged {
  color: ;
}

 blink {
  to { opacity: 0.4; }
}

#network {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#network.disconnected {
  color: ;
}

#custom-rmpc {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#custom-rmpc:hover {
  background: alpha(@primary, 0.25);
}

#clock {
  padding: 0 8px;
  margin: 4px;
  background: alpha(@primary, 0.15);
  border-radius: 6px;
  color: ;
}

#custom-arrow-l {
  color: ;
  margin: 0 4px;
}

#custom-power {
  padding: 0 10px 0 6px;
  margin: 4px 4px 4px 2px;
  background: alpha(@error, 0.2);
  border-radius: 6px;
  color: ;
}

#custom-power:hover {
  background: ;
  color: u/on_error;
}
u/ekam_Kabir — 7 days ago
▲ 32 r/waybar+1 crossposts

Update: New Themes, Wallpapers & Waybar Themes added in our low-sepecs-hyprland-dotfiles

Hey everyone! Just wanted to share some major updates I’ve been working on for my low-spec Hyprland setup (running on an Intel Celeron N4020 with 8GB RAM).

The goal has always been speed without sacrificing aesthetics.

  • The "Noro" Theme: Added a new modular "pill-style" Waybar aesthetic. It’s clean, lightweight, and keeps the desktop feeling modern.
  • Dynamic Colors (Matugen): Finally integrated Matugen! Now the entire system (Waybar, Rofi, Kitty) automatically shifts colors to match whatever wallpaper I pick.
  • Central Theme Selector: Wrote a custom script (global-theme-selector.sh) that handles wallpaper and Waybar style changes in one place. It’s mapped to SUPER + T for instant switching.
  • Performance Tweaks: Fine-tuned animations and blur settings to keep things snappy even on this hardware.

It feels way more cohesive now. If you're a fellow low-spec warrior, I've updated the repo with an automated install script and organized wallpaper sets.

Specs: Intel Celeron N4020 | 8GB RAM 

WM: Hyprland 

Bar: Waybar

Colors: Matugen

Github: okyashgajjar/low-spec-hyprland

Would love to hear what you think!

u/Western-Stock2454 — 6 days ago
▲ 2 r/waybar

:hover not working

I am trying to setup my waybar buttons so that their background changes colour when I hover over them. I also want the power button to go red when I hover over it. However, I cannot get this to work.

Here is my style.css. I don't know if any other files would be helpful.

 "/home/dhillon/.cache/wal/colors-waybar.css";
/* === Base ================================================================ */
waybar * {
  border: 4px;
  border-radius: 4px;
  min-height: 0;
  font-family: "Iosevka Nerd Font";
  font-size: 13px;
}


window#waybar {
  background: ;
  color: ;
  border: 2px solid ;
  transition-property: background-color;
  transition-duration: 0.5s;
}


/* === All modules ========================================================= */
#clock,
#custom-power,
#network,
#bluetooth,
#custom-microphone,
#custom-vpn,
#custom-battery,
#custom-volume,
#custom-brightness {
  padding: 4px 12px;
  margin: 5px 4px;
  background-color: ;
  border: 2px solid ;
  border-radius: 2px;
  color: ;
}


/* === Hover =============================================================== */
#clock:hover,
#custom-power:hover,
#network:hover,
#bluetooth:hover,
#custom-microphone:hover,
#custom-vpn:hover,
#custom-battery:hover,
#custom-volume:hover,
#custom-brightness:hover {
  background-color: ;
  border: 2px solid ;
  color: ;
}


/* === Clock =============================================================== */
#clock {
  color: ;
  font-weight: bold;
  min-width: 150px;
}


/* === Power =============================================================== */
#custom-power {
  color: ;
  min-width: 45px;
}


#custom-power:hover {
  border-color: ;
  color: ;
}


/* === Network ============================================================= */
#network {
  min-width: 45px;
}


#network.disconnected {
  color: ;
}


/* === Bluetooth =========================================================== */
#bluetooth {
  min-width: 45px;
}


#bluetooth.disabled {
  color: ;
}


/* === Microphone ========================================================= */
#custom-microphone {
  min-width: 45px;
}


/* === Battery ============================================================ */
#custom-battery {
  min-width: 150px;
}


/* === Volume ============================================================= */
#custom-volume {
  min-width: 150px;
}


/* === Brightness ========================================================= */
#custom-brightness {
  min-width: 150px;
}


/* === Tooltips ============================================================ */
tooltip {
  background-color: ;
  border: 1px solid ;
  color: ;
  font-weight: bold;
}


tooltip label {
  color: u/import "/home/dhillon/.cache/wal/colors-waybar.css";
/* === Base ================================================================ */
waybar * {
  border: 4px;
  border-radius: 4px;
  min-height: 0;
  font-family: "Iosevka Nerd Font";
  font-size: 13px;
}


window#waybar {
  background: ;
  color: ;
  border: 2px solid ;
  transition-property: background-color;
  transition-duration: 0.5s;
}


/* === All modules ========================================================= */
#clock,
#custom-power,
#network,
#bluetooth,
#custom-microphone,
#custom-vpn,
#custom-battery,
#custom-volume,
#custom-brightness {
  padding: 4px 12px;
  margin: 5px 4px;
  background-color: ;
  border: 2px solid ;
  border-radius: 2px;
  color: ;
}


/* === Hover =============================================================== */
#clock:hover,
#custom-power:hover,
#network:hover,
#bluetooth:hover,
#custom-microphone:hover,
#custom-vpn:hover,
#custom-battery:hover,
#custom-volume:hover,
#custom-brightness:hover {
  background-color: ;
  border: 2px solid ;
  color: ;
}


/* === Clock =============================================================== */
#clock {
  color: ;
  font-weight: bold;
  min-width: 150px;
}


/* === Power =============================================================== */
#custom-power {
  color: ;
  min-width: 45px;
}


#custom-power:hover {
  border-color: ;
  color: ;
}


/* === Network ============================================================= */
#network {
  min-width: 45px;
}


#network.disconnected {
  color: ;
}


/* === Bluetooth =========================================================== */
#bluetooth {
  min-width: 45px;
}


#bluetooth.disabled {
  color: ;
}


/* === Microphone ========================================================= */
#custom-microphone {
  min-width: 45px;
}


/* === Battery ============================================================ */
#custom-battery {
  min-width: 150px;
}


/* === Volume ============================================================= */
#custom-volume {
  min-width: 150px;
}


/* === Brightness ========================================================= */
#custom-brightness {
  min-width: 150px;
}


/* === Tooltips ============================================================ */
tooltip {
  background-color: ;
  border: 1px solid ;
  color: ;
  font-weight: bold;
}


tooltip label {
  color: u/foreground;
}


;
}
reddit.com
u/FlatSloth — 11 days ago
▲ 6 r/waybar+1 crossposts

Hypr Waybar style.css - setting local variables for colors

@define-color box_bg_color #FFFFFF;

#1,
#2 {
  background-color: @bg_box_color;
}

1

Problems = i tried writing in CSS but cannot get it to work, have to use "@define"

i want to make this local variable, how do i do that???

2

i cannot use alpha value, if i try rgba(0, 0, 0, 0), instead of #FFFFFF it doesent work (keep in mind rgba(0, 0, 0, 0) works for this document, just not when i write it like this (i think its because "@define-color" doesent track alpha so it tracks back to issue "1"

reddit.com
u/Own-Town1201 — 5 days ago
▲ 6 r/waybar+1 crossposts

Waybar module for NordVPN users

I created a little module for NordVPN on Arch over the last few days so I could monitor my connection more easily. Uses shell scripting and a systemd service to monitor the vpn connection and notify to let the user know when the connection drops or changes. Clicking the icon also toggles the connection. Figured it could be useful for anyone else who uses nord.

Repo and installation instructions are here: https://github.com/tr1stanm/nordbar

here's a demo of it being used.

reddit.com
u/ourobor0s_ — 6 days ago
▲ 1 r/waybar

help!

can someone plz tell me whats wrong with this jsonc syntax?

// -*- mode: jsonc -*-{


 {
    "layer": "top",
    "modules-center": [
  "clock",
  "hyprland/workspaces",
  "pulseaudio",
  "network"
  ]
} 


  
  "clock":{
  "interval": 60,
  "format": "{:%I:%M %p}",
  "max-length": 25
  },


 
  "hyprland/workspaces": 
  "format": "{name},
  "format-icons": {
    "1": "1",
    "2": "2",
    "3": "3",
    "4": "4",
    "5": "5",
    "active": "",
    "default": ""
  },
  {
  "pulseaudio": {
    "format": "{
volume
}% {
icon
}",
    "format-bluetooth": "{
volume
}% {
icon
}",
    "format-muted": "",
    "format-icons": {
        "alsa_output.pci-0000_00_1f.3.analog-stereo": "",
        "alsa_output.pci-0000_00_1f.3.analog-stereo-muted": "",
        "headphone": "",
        "headset": ""pulseaudio": {
    "format": "{volume}% {icon}",
    "format-bluetooth": "{volume}% {icon}",
    "format-muted": "",
    "format-icons": {
        "alsa_output.pci-0000_00_1f.3.analog-stereo": "",
        "alsa_output.pci-0000_00_1f.3.analog-stereo-muted": "",
        "headphone": "",
        "headset": "󰋎",
        "phone": "",
        "phone-muted": "",
        "portable": "",
        "car": "",
        "default": ["", ""]
    },
    "scroll-step": 1,
    "on-click": "pavucontrol",
    "ignored-sinks": ["Easy Effects Sink"]
  }",
        "phone": "",
        "phone-muted": "",
    "scroll-step": 1,
    "on-click": "pavucontrol",
    "ignored-sinks": ["Easy Effects Sink"]
    },
  }
}// -*- mode: jsonc -*-{


 {
    "layer": "top",
    "modules-center": [
  "clock",
  "hyprland/workspaces",
  "pulseaudio",
  "network"
  ]
} 


  
  "clock":{
  "interval": 60,
  "format": "{:%I:%M %p}",
  "max-length": 25
  },


 
  "hyprland/workspaces": 
  "format": "{name},
  "format-icons": {
    "1": "1",
    "2": "2",
    "3": "3",
    "4": "4",
    "5": "5",
    "active": "",
    "default": ""
  },
  {
  "pulseaudio": {
    "format": "{volume}% {icon}",
    "format-bluetooth": "{volume}% {icon}",
    "format-muted": "",
    "format-icons": {
        "alsa_output.pci-0000_00_1f.3.analog-stereo": "",
        "alsa_output.pci-0000_00_1f.3.analog-stereo-muted": "",
        "headphone": "",
        "headset": ""pulseaudio": {
    "format": "{volume}% {icon}",
    "format-bluetooth": "{volume}% {icon}",
    "format-muted": "",
    "format-icons": {
        "alsa_output.pci-0000_00_1f.3.analog-stereo": "",
        "alsa_output.pci-0000_00_1f.3.analog-stereo-muted": "",
        "headphone": "",
        "headset": "󰋎",
        "phone": "",
        "phone-muted": "",
        "portable": "",
        "car": "",
        "default": ["", ""]
    },
    "scroll-step": 1,
    "on-click": "pavucontrol",
    "ignored-sinks": ["Easy Effects Sink"]
  }",
        "phone": "",
        "phone-muted": "",
    "scroll-step": 1,
    "on-click": "pavucontrol",
    "ignored-sinks": ["Easy Effects Sink"]
    },
  }
}
reddit.com
u/Hopeful-Duck-6543 — 2 hours ago