nocode
4857a9fda9
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
108 lines
2.7 KiB
CSS
108 lines
2.7 KiB
CSS
/* 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", "Symbols Nerd Font", sans-serif;
|
|
font-size: 13px;
|
|
min-height: 0;
|
|
}
|
|
|
|
window#waybar {
|
|
background: rgba(30, 30, 46, 0.88); /* base #1e1e2e */
|
|
color: #cdd6f4; /* text */
|
|
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 {
|
|
color: #a6adc8; /* subtext0 */
|
|
padding: 0 8px;
|
|
margin: 3px 2px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
#workspaces button.active {
|
|
color: #1e1e2e;
|
|
background: #89b4fa; /* bleu */
|
|
font-weight: bold;
|
|
}
|
|
|
|
#workspaces button:hover {
|
|
color: #cdd6f4;
|
|
background: #45475a;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#window {
|
|
color: #a6adc8;
|
|
margin-left: 10px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* --- Horloge (centre) ------------------------------------------------------ */
|
|
#clock {
|
|
color: #cdd6f4;
|
|
font-weight: bold;
|
|
background: #313244;
|
|
padding: 0 16px;
|
|
margin: 5px 0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* --- Modules de droite : pilules ------------------------------------------- */
|
|
#custom-keyhelp,
|
|
#backlight,
|
|
#pulseaudio,
|
|
#bluetooth,
|
|
#network,
|
|
#cpu,
|
|
#memory,
|
|
#battery,
|
|
#tray {
|
|
background: #313244;
|
|
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; }
|