Less than 100 lines of code, a functional waybar that looks great!

Yesterday I posted 60 lines of code that would give you a decent looking functional bar. I wanted to see how much more code would be needed to make it look great!

config.jsonc - 52 lines

{
    "layer": "overlay",
    "reload_style_on_change": true,
    "exclusive": false,
    "position": "right",
    "passthrough": false,
    "modules-right": ["group/island"],
    "group/island": {
        "orientation": "inherit",
        "drawer": {
            "transition-duration": 200,
            "click-to-reveal": true,
            "transition-left-to-right": false,
        },
        "modules": [
            "clock",
            "wireplumber",
            "network",
            "battery",
            "niri/workspaces",
        ],
    },
    "wireplumber": {
        "format": "{icon}\n{volume}%",
        "format-muted": "󰝟",
        "format-icons": ["󰖀", "󰕾"],
        "justify": "center",
        "on-click-right": "wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle",
        "max-volume": 150,
        "scroll-step": 2,
        "tooltip-format": "{icon} {volume}%",
    },
    "battery": {
        "format": "{icon}\n{capacity}%",
        "format-icons": ["󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"],
        "justify": "center",
    },
    "network": {
        "format": "",
        "on-click": "foot-client -e nmtui",
        "format-ethernet": "",
        "format-wifi": "{icon}\n{signalStrength}%",
        "format-disconnected": "󰤭",
        "format-icons": ["󰤟", "󰤢", "󰤥", "󰤨"],
        "tooltip-format-wifi": "{essid}: ({signalStrength}%)",
        "justify": "center",
    },
    "clock": {
        "format": "{:%I\n%M}",
        "tooltip-format": "{:%A, %B %d, %Y (%R)} 󰃰 ",
    },
}

style.css - 45 lines

@define-color primary #7E9CD8;
@define-color secondary #957FB8;
@define-color teriary #C0A36E;
@define-color background rgba(31,31,40, 0.55);
@define-color dim #727169;

window#waybar {
    background-color: transparent;
}
.modules-right {
    background: @background;
    color: @teriary;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.module {
    font-family: "Monaspace Argon NF";
    font-size: 16px;
    font-weight: bold;
    padding: 8px;
    margin: 6px;
    border: 3px ridge @background;
    border-radius: 8px;
}
#workspaces {
    margin: 0;
    padding: 0;
    border: 0;
}
#workspaces button {
    all: initial;
    box-shadow: inset 0 -3px transparent;
    padding: 14px 8px;
    margin: 6px;
    border: 3px ridge @background;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    color: @teriary;
    transition: all 0.2s ease-in-out;
}
#workspaces button.active,
#workspaces button:hover {
    color: @background;
    background-image: linear-gradient(to bottom right, @primary, @secondary);
}

View original on lemmy.zip

Comments1