feat(waybar): GNOME-style layout (workspaces | clock | stats+power)
- modules-left: workspaces only (drop window title; GNOME doesn't show it) - modules-center: prominent clock pill with calendar tooltip styled in Kanagawa colors - modules-right: stats grouped as a single chip ending in a power button, rounded only at the outer edges so they read as one unit - per-module colors removed; right side uses neutral fg_dim, with accent reserved for the clock pill and warnings (battery low / network offline) - workspaces: persistent 1-5, dot indicators, hover lifts to brighter bg - clock: scroll = shift calendar month/year; right-click = mode toggle - audio: right-click = mute; backlight: scroll = adjust - power: clock-style accent, hover red, opens power-menu
This commit is contained in:
Claude
parent
0499624bc3
commit
d9b2b709fe
2 changed files with 120 additions and 63 deletions
|
|
@ -2,62 +2,75 @@
|
|||
"layer": "top",
|
||||
"position": "top",
|
||||
"height": 32,
|
||||
"spacing": 6,
|
||||
"spacing": 4,
|
||||
"margin-top": 4,
|
||||
"margin-left": 8,
|
||||
"margin-right": 8,
|
||||
|
||||
"modules-left": ["hyprland/workspaces", "hyprland/window"],
|
||||
"modules-left": ["hyprland/workspaces"],
|
||||
"modules-center": ["clock"],
|
||||
"modules-right": ["tray", "network", "pulseaudio", "backlight", "battery", "custom/power"],
|
||||
"modules-right": ["network", "pulseaudio", "backlight", "battery", "tray", "custom/power"],
|
||||
|
||||
"hyprland/workspaces": {
|
||||
"format": "{icon}",
|
||||
"on-click": "activate",
|
||||
"sort-by-number": true,
|
||||
"format-icons": {
|
||||
"1": "1", "2": "2", "3": "3", "4": "4", "5": "5",
|
||||
"6": "6", "7": "7", "8": "8", "9": "9", "10": "10",
|
||||
"active": "●",
|
||||
"default": "○"
|
||||
"default": "○",
|
||||
"urgent": "◆"
|
||||
},
|
||||
"persistent-workspaces": {
|
||||
"*": 5
|
||||
}
|
||||
},
|
||||
|
||||
"hyprland/window": {
|
||||
"format": "{title}",
|
||||
"max-length": 80,
|
||||
"separate-outputs": true
|
||||
},
|
||||
|
||||
"clock": {
|
||||
"format": " {:%a %d %b %H:%M}",
|
||||
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>"
|
||||
},
|
||||
|
||||
"tray": {
|
||||
"icon-size": 16,
|
||||
"spacing": 8
|
||||
"format": "{:%a %d %b %H:%M}",
|
||||
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
|
||||
"calendar": {
|
||||
"mode": "month",
|
||||
"mode-mon-col": 3,
|
||||
"weeks-pos": "right",
|
||||
"on-scroll": 1,
|
||||
"format": {
|
||||
"months": "<span color='#dcd7ba'><b>{}</b></span>",
|
||||
"days": "<span color='#c8c093'>{}</span>",
|
||||
"weeks": "<span color='#7e9cd8'><i>W{}</i></span>",
|
||||
"weekdays": "<span color='#e6c384'><b>{}</b></span>",
|
||||
"today": "<span color='#7e9cd8'><b><u>{}</u></b></span>"
|
||||
}
|
||||
},
|
||||
"actions": {
|
||||
"on-click-right": "mode",
|
||||
"on-scroll-up": "shift_up",
|
||||
"on-scroll-down": "shift_down"
|
||||
}
|
||||
},
|
||||
|
||||
"network": {
|
||||
"format-wifi": " {essid} ({signalStrength}%)",
|
||||
"format-wifi": " {essid}",
|
||||
"format-ethernet": " {ifname}",
|
||||
"format-disconnected": " offline",
|
||||
"tooltip-format": "{ifname} via {gwaddr}",
|
||||
"tooltip-format-wifi": "{essid} ({signalStrength}%) {ipaddr}/{cidr}\n{frequency}MHz",
|
||||
"tooltip-format-ethernet": "{ifname} via {gwaddr}\n{ipaddr}/{cidr}",
|
||||
"on-click": "wezterm start --class waybar-net -- nmtui"
|
||||
},
|
||||
|
||||
"pulseaudio": {
|
||||
"format": "{icon} {volume}%",
|
||||
"format-muted": " muted",
|
||||
"format-muted": " ",
|
||||
"format-icons": { "default": ["", "", ""] },
|
||||
"scroll-step": 5,
|
||||
"on-click": "pavucontrol"
|
||||
"on-click": "pavucontrol",
|
||||
"on-click-right": "wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle"
|
||||
},
|
||||
|
||||
"backlight": {
|
||||
"format": "{icon} {percent}%",
|
||||
"format-icons": ["", "", "", "", ""]
|
||||
"format-icons": ["", "", "", "", ""],
|
||||
"on-scroll-up": "brightnessctl set 5%+",
|
||||
"on-scroll-down": "brightnessctl set 5%-"
|
||||
},
|
||||
|
||||
"battery": {
|
||||
|
|
@ -65,7 +78,13 @@
|
|||
"format": "{icon} {capacity}%",
|
||||
"format-charging": " {capacity}%",
|
||||
"format-plugged": " {capacity}%",
|
||||
"format-icons": ["", "", "", "", ""]
|
||||
"format-icons": ["", "", "", "", ""],
|
||||
"tooltip-format": "{timeTo} ({power}W)"
|
||||
},
|
||||
|
||||
"tray": {
|
||||
"icon-size": 16,
|
||||
"spacing": 8
|
||||
},
|
||||
|
||||
"custom/power": {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
/* Kanagawa Wave palette */
|
||||
/* Kanagawa Wave palette, GNOME-ish layout: workspace dots on the left,
|
||||
* prominent clock pill in the center, a single neutral stats chip on the
|
||||
* right ending in a power button. */
|
||||
|
||||
@define-color bg #1f1f28;
|
||||
@define-color bg_alt #2a2a37;
|
||||
@define-color bg_hover #363646;
|
||||
@define-color bg_active #2d4f67;
|
||||
@define-color fg #dcd7ba;
|
||||
@define-color fg_dim #c8c093;
|
||||
@define-color blue #7e9cd8;
|
||||
@define-color teal #7aa89f;
|
||||
@define-color violet #957fb8;
|
||||
@define-color orange #ffa066;
|
||||
@define-color red #e82424;
|
||||
@define-color yellow #e6c384;
|
||||
@define-color green #98bb6c;
|
||||
@define-color fg_subtle #727169;
|
||||
@define-color accent #7e9cd8;
|
||||
@define-color accent_alt #957fb8;
|
||||
@define-color warn #ffa066;
|
||||
@define-color crit #e82424;
|
||||
|
||||
* {
|
||||
font-family: "JetBrainsMono Nerd Font", monospace;
|
||||
font-family: "JetBrainsMono Nerd Font", "JetBrains Mono", monospace;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
|
@ -20,63 +23,98 @@
|
|||
}
|
||||
|
||||
window#waybar {
|
||||
background: rgba(31, 31, 40, 0.85);
|
||||
background: rgba(31, 31, 40, 0.88);
|
||||
color: @fg;
|
||||
border-radius: 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid @bg_alt;
|
||||
}
|
||||
|
||||
#workspaces { padding: 0 6px; }
|
||||
/* ---------- LEFT: workspaces (Activities-like) ---------- */
|
||||
#workspaces {
|
||||
margin: 4px 6px;
|
||||
padding: 0 4px;
|
||||
background: transparent;
|
||||
}
|
||||
#workspaces button {
|
||||
padding: 0 8px;
|
||||
color: @fg_dim;
|
||||
margin: 0 1px;
|
||||
color: @fg_subtle;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
#workspaces button.active {
|
||||
color: @bg;
|
||||
background: @blue;
|
||||
color: @fg;
|
||||
background: @bg_active;
|
||||
}
|
||||
#workspaces button.urgent {
|
||||
color: @bg;
|
||||
background: @red;
|
||||
background: @crit;
|
||||
}
|
||||
#workspaces button:hover {
|
||||
background: @bg_alt;
|
||||
color: @fg;
|
||||
background: @bg_hover;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#window {
|
||||
padding: 0 10px;
|
||||
color: @fg_dim;
|
||||
font-style: italic;
|
||||
}
|
||||
window#waybar.empty #window { background: transparent; }
|
||||
|
||||
/* ---------- CENTER: clock pill ---------- */
|
||||
#clock {
|
||||
color: @yellow;
|
||||
padding: 0 12px;
|
||||
margin: 4px 0;
|
||||
padding: 0 18px;
|
||||
color: @fg;
|
||||
background: @bg_alt;
|
||||
border-radius: 999px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
#clock:hover { background: @bg_hover; }
|
||||
|
||||
#tray, #network, #pulseaudio, #backlight, #battery, #custom-power {
|
||||
/* ---------- RIGHT: stats chip ---------- */
|
||||
#network,
|
||||
#pulseaudio,
|
||||
#backlight,
|
||||
#battery,
|
||||
#tray {
|
||||
padding: 0 10px;
|
||||
margin: 4px 2px;
|
||||
border-radius: 6px;
|
||||
margin: 4px 0;
|
||||
color: @fg_dim;
|
||||
background: @bg_alt;
|
||||
}
|
||||
/* Round only the outer ends of the right-side group so it reads as one chip. */
|
||||
#network { border-radius: 999px 0 0 999px; padding-left: 14px; }
|
||||
#tray { padding: 0 8px; }
|
||||
#custom-power {
|
||||
margin: 4px 6px 4px 0;
|
||||
padding: 0 14px;
|
||||
color: @fg_dim;
|
||||
background: @bg_alt;
|
||||
border-radius: 0 999px 999px 0;
|
||||
}
|
||||
|
||||
#network { color: @teal; }
|
||||
#pulseaudio { color: @violet; }
|
||||
#backlight { color: @yellow; }
|
||||
#battery { color: @green; }
|
||||
#battery.warning { color: @orange; }
|
||||
#battery.critical { color: @red; }
|
||||
#custom-power { color: @red; padding: 0 12px; }
|
||||
/* Hover: lift to brighter bg and full fg. */
|
||||
#network:hover,
|
||||
#pulseaudio:hover,
|
||||
#backlight:hover,
|
||||
#battery:hover,
|
||||
#tray:hover,
|
||||
#custom-power:hover {
|
||||
color: @fg;
|
||||
background: @bg_hover;
|
||||
}
|
||||
|
||||
/* Status colors are reserved for warnings only (GNOME-style restraint). */
|
||||
#battery.warning { color: @warn; }
|
||||
#battery.critical { color: @crit; }
|
||||
#network.disconnected { color: @crit; }
|
||||
#pulseaudio.muted { color: @fg_subtle; }
|
||||
#custom-power { color: @accent; }
|
||||
#custom-power:hover { color: @crit; }
|
||||
|
||||
tooltip {
|
||||
background: @bg;
|
||||
border: 1px solid @bg_alt;
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
padding: 6px;
|
||||
}
|
||||
tooltip label { color: @fg; }
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue