style(waybar): redesign waybar stylesheet with catppuccin mocha theme and pill-style modules

Update waybar-style.css to version 2 with the following changes:

- Switch to Catppuccin Mocha color scheme with blue accents
- Redesign bar as floating rounded container instead of bottom border
- Style modules as pill-shaped boxes with individual backgrounds
- Add Nerd Font symbols support for better icons
- Improve workspace buttons with hover effects and transitions
- Add tooltip styling and proper color coding for each module
- Update clock styling with dedicated background
- Enhance battery, network, and bluetooth status colors
- Refine spacing, padding, and border-radius throughout for modern appearance
This commit is contained in:
2026-07-04 00:26:16 +02:00
parent 289a70c10c
commit 4857a9fda9
@@ -1,63 +1,107 @@
/* FWS — style Waybar (assorti au thème SDDM et aux bordures Hyprland). */ /* FWS — style Waybar v2 (Catppuccin Mocha, nuances de bleu).
Barre flottante arrondie, modules en « pilules », icônes Nerd Font
(paquet ttf-nerd-fonts-symbols, installé avec le bureau Hyprland). */
* { * {
font-family: "Noto Sans", sans-serif; font-family: "Noto Sans", "Symbols Nerd Font", sans-serif;
font-size: 13px; font-size: 13px;
min-height: 0; min-height: 0;
} }
window#waybar { window#waybar {
background: rgba(26, 26, 46, 0.92); /* #1a1a2e */ background: rgba(30, 30, 46, 0.88); /* base #1e1e2e */
color: #f0f0f5; color: #cdd6f4; /* text */
border-bottom: 2px solid #89b4fa; /* bleu FWS (Catppuccin) */ border: 1px solid rgba(137, 180, 250, 0.35);
border-radius: 14px;
}
tooltip {
background: #1e1e2e;
border: 1px solid #89b4fa;
border-radius: 10px;
}
tooltip label { color: #cdd6f4; }
/* --- Espaces de travail --------------------------------------------------- */
#workspaces {
background: #313244; /* surface0 */
margin: 5px 4px;
border-radius: 10px;
padding: 0 4px;
} }
#workspaces button { #workspaces button {
color: #a0a0b8; color: #a6adc8; /* subtext0 */
padding: 0 10px; padding: 0 8px;
margin: 3px 2px;
border: none; border: none;
border-radius: 0; border-radius: 8px;
background: transparent; background: transparent;
transition: all 0.2s ease;
} }
#workspaces button.active { #workspaces button.active {
color: #f0f0f5; color: #1e1e2e;
border-bottom: 2px solid #89b4fa; background: #89b4fa; /* bleu */
font-weight: bold;
} }
#workspaces button:hover { #workspaces button:hover {
background: rgba(255, 255, 255, 0.08); color: #cdd6f4;
background: #45475a;
box-shadow: none; box-shadow: none;
} }
#window { #window {
color: #a0a0b8; color: #a6adc8;
margin-left: 12px; margin-left: 10px;
font-style: italic;
} }
/* --- Horloge (centre) ------------------------------------------------------ */
#clock { #clock {
color: #f0f0f5; color: #cdd6f4;
font-weight: bold; font-weight: bold;
background: #313244;
padding: 0 16px;
margin: 5px 0;
border-radius: 10px;
} }
#custom-keyhelp { /* --- Modules de droite : pilules ------------------------------------------- */
background: #89b4fa; #custom-keyhelp,
color: #1a1a2e; #backlight,
font-weight: bold;
padding: 0 12px;
margin: 5px 6px;
border-radius: 8px;
}
#custom-keyhelp:hover {
background: #b4d0fb;
}
#pulseaudio, #pulseaudio,
#bluetooth,
#network, #network,
#cpu, #cpu,
#memory, #memory,
#battery,
#tray { #tray {
color: #a0a0b8; background: #313244;
padding: 0 10px; padding: 0 12px;
margin: 5px 3px;
border-radius: 10px;
color: #cdd6f4;
} }
#custom-keyhelp {
background: #89b4fa; /* bouton d'appel : bleu plein */
color: #1e1e2e;
font-weight: bold;
}
#custom-keyhelp:hover { background: #b4d0fb; }
#backlight { color: #f9e2af; } /* jaune doux */
#pulseaudio { color: #89b4fa; }
#pulseaudio.muted { color: #6c7086; }
#bluetooth { color: #74c7ec; } /* sapphire */
#bluetooth.disabled { color: #6c7086; }
#network { color: #94e2d5; } /* teal */
#network.disconnected { color: #f38ba8; }
#cpu { color: #cba6f7; } /* mauve */
#memory { color: #eba0ac; } /* maroon */
#battery.warning { color: #f9e2af; }
#battery.critical { color: #f38ba8; }
#battery.charging { color: #a6e3a1; }