feat(waybar): add window title module and styled clock calendar

Center a `hyprland/window` title module and move the clock/date to the far
right of the bar. Give the clock a month-calendar tooltip with One Dark
Pango styling (yellow header, purple weekdays, blue underlined today, dim
ISO week-number gutter), 3-per-row year view via right-click.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-13 08:03:48 +02:00
parent dc676b6f8c
commit 031bad3238
+39 -3
View File
@@ -655,15 +655,37 @@ in
position = "top";
height = 28;
modules-left = [ "hyprland/workspaces" ];
modules-center = [ "clock" ];
modules-right = [ "pulseaudio" "network" "battery" ];
modules-center = [ "hyprland/window" ];
modules-right = [ "pulseaudio" "network" "battery" "clock" ];
"hyprland/workspaces" = {
format = "{id}";
};
"hyprland/window" = {
format = "{title}";
max-length = 100;
separate-outputs = true;
};
clock = {
format = "{:%H:%M %a %d %b}";
tooltip-format = "<tt>{calendar}</tt>";
calendar = {
mode = "month";
mode-mon-col = 3;
weeks-pos = "left";
format = {
months = "<span color='#e5c07b'><b>{}</b></span>";
weekdays = "<span color='#c678dd'><b>{}</b></span>";
days = "<span color='#bbbbbb'>{}</span>";
today = "<span color='#61afef'><b><u>{}</u></b></span>";
weeks = "<span color='#5c6370'>W{:%V}</span>";
};
};
actions = {
on-click-right = "mode";
};
};
pulseaudio = {
@@ -703,9 +725,23 @@ in
background: #222222;
color: #bbbbbb;
}
#pulseaudio, #network, #battery {
#pulseaudio, #network, #battery, #clock {
padding: 0 12px;
}
#window {
color: #ffffff;
}
tooltip {
background: #222222;
border: 1px solid #333333;
}
tooltip label {
font-size: 15px;
padding: 4px;
}
window#waybar.empty #window {
background: transparent;
}
#battery.warning {
color: #e5c07b;
}