unixporn

8321 readers

79 users here now

unixporn

Submit screenshots of all your *NIX desktops, themes, and nifty configurations, or submit anything else that will make ricers happy. Maybe a server running on an Amiga, or a Thinkpad signed by Bjarne Stroustrup? Show the world how pretty your computer can be!

Rules

Post On-Topic
No Defaults
Busy Screenshot
Use High-Quality Images
Include a Details Comment
No NSFW

founded 3 years ago

MODERATORS

StardustKyun@lemmy.world

buffet@lemmy.world

ElKowar@lemmy.world

Less than 60 lines of code, a functional waybar that doesn't look too bad (lemmy.zip)

submitted 19 hours ago by variety4me@lemmy.zip to c/unixporn@lemmy.world

8 comments fedilink hide all child comments

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;
}

top 8 comments

sorted by: hot top controversial new old

[–] Micromot@piefed.social 10 points 19 hours ago (1 children)

You can remove the empty id entries in the style.css

[–] variety4me@lemmy.zip 7 points 18 hours ago (1 children)

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;
}

[–] Micromot@piefed.social 4 points 18 hours ago

Awesome, all hail short css files

[–] tal@lemmy.today 4 points 16 hours ago* (last edited 16 hours ago) (1 children)

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.zip 3 points 16 hours 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 }

[–] Arda@piefed.social 3 points 17 hours ago (1 children)

Pic of the bar?

[–] variety4me@lemmy.zip 4 points 17 hours ago (1 children)

it is in the post

[–] Arda@piefed.social 1 points 15 hours ago

Im blind mb