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:
+39
-3
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user