Can this be further reduced? config.jsonc

{
    "layer": "top",
    "position": "top",
    "modules-left": ["niri/workspaces", "cpu", "memory", "temperature"],
    "modules-center": ["niri/window"],
    "modules-right": ["wireplumber", "battery", "network", "clock"],
    "reload_style_on_change": true,

    "cpu": { "format": " {avg_frequency}GHz" },
    "memory": { "format": "  {used:0.1f}G" },
    "temperature": { "format": " {temperatureC}°C" },
    "wireplumber": {
        "format": "{icon} {volume}%",
        "format-muted": "󰝟",
        "format-icons": ["󰖀", "󰕾"],
    },
    "battery": {
        "format": "{icon} {capacity}%",
        "format-icons": ["󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"],
    },
    "network": {
        "format-ethernet": "",
        "format-wifi": "{icon} {signalStrength}%",
        "format-disconnected": "󰤭",
        "format-icons": ["󰤟", "󰤢", "󰤥", "󰤨"],
    },
    "clock": { "format": "󱦟 {:%I:%M}" },
}

style.css

@define-color primary #67CBFC;
@define-color secondary #FFD866;
@define-color background #2D2A2E;
window#waybar {
    background-color: @background;
    color: @secondary;
}
#workspaces,
#clock,
#wireplumber,
#battery,
#network,
#cpu,
#temperature,
#memory {
    font-family: "Monaspace Argon NF";
    padding: 4px 12px;
}
#workspaces button {
    all: initial;
    box-shadow: inset 0 -3px transparent;
    padding: 4px 12px;
    color: @secondary;
    transition: all 0.2s ease-in-out;
}
#workspaces button.active {
    color: @primary;
}
    • variety4me@lemmy.zipOPEnglish
      8·
      1 day ago

      Nice!! Thanks!! 21 lines css now

      @define-color primary #67CBFC;
@define-color secondary #FFD866;
@define-color background #2D2A2E;
window#waybar {
    background-color: @background;
    color: @secondary;
}
.module {
    font-family: "Monaspace Argon NF";
    padding: 4px 12px;
}
#workspaces button {
    all: initial;
    box-shadow: inset 0 -3px transparent;
    padding: 4px 12px;
    color: @secondary;
    transition: all 0.2s ease-in-out;
}
#workspaces button.active {
    color: @primary;
}
  • tal@lemmy.todayEnglish
    5·
    1 day ago

    I’m not a huge user of tray apps, but I’d want to have a tray module in there. Steam and blueman-applet, and if you’re on a laptop—which you appear to be based on the battery status—and aren’t some oddball like me who insists on using nmtui, probably the Network Manager applet. They all put useful things in there.

    • variety4me@lemmy.zipOPEnglish
      4·
      1 day ago

      this is just meant to be an experiment in how little is needed to use waybar, if you need more modules like “tray” you can always use it, it too will need only a line of code

      "tray": { "icon-size": 20, "spacing": 10 }