dotfiles/bazzite/waybar/style.css

/* Catppuccin Latte */
@define-color rosewater #dc8a78;
@define-color flamingo #dd7878;
@define-color pink #ea76cb;
@define-color mauve #8839ef;
@define-color red #d20f39;
@define-color maroon #e64553;
@define-color peach #fe640b;
@define-color yellow #df8e1d;
@define-color green #40a02b;
@define-color teal #179299;
@define-color sky #04a5e5;
@define-color sapphire #209fb5;
@define-color blue #1e66f5;
@define-color lavender #7287fd;
@define-color text #4c4f69;
@define-color subtext1 #5c5f77;
@define-color subtext0 #6c6f85;
@define-color overlay2 #7c7f93;
@define-color overlay1 #8c8fa1;
@define-color overlay0 #9ca0b0;
@define-color surface2 #acb0be;
@define-color surface1 #bcc0cc;
@define-color surface0 #ccd0da;
@define-color base #eff1f5;
@define-color mantle #e6e9ef;
@define-color crust #dce0e8;

* {
    font-family: 'JetBrainsMono Nerd Font', 'Noto Sans Mono', monospace;
    font-size: 15px;
    font-weight: bold;
}

window#waybar {
    background-color: #1e1e2e;
    color: @text;
    transition-property: background-color;
    transition-duration: .5s;
}

window#waybar.hidden {
    opacity: 0.2;
}

button {
    box-shadow: inset 0 -3px transparent;
    border: none;
    border-radius: 0;
}

button:hover {
    background: inherit;
    box-shadow: inset 0 -2px @blue;
}

/* Workspaces */
#workspaces button {
    padding: 0 6px;
    background-color: transparent;
    color: #a6adc8;
}

#workspaces button:hover {
    background: alpha(@surface0, 0.5);
}

#workspaces button.active {
    color: #cdd6f4;
    box-shadow: inset 0 -2px @blue;
}

#workspaces button.urgent {
    background-color: alpha(@red, 0.2);
    color: @red;
}

/* Common module styling */
#clock,
#cpu,
#memory,
#disk,
#temperature,
#network,
#pulseaudio,
#wireplumber,
#tray,
#idle_inhibitor,
#power-profiles-daemon,
#language,
#custom-gpu,
#custom-weather,
#privacy {
    padding: 0 10px;
    color: @text;
}

#window,
#workspaces {
    margin: 0 4px;
}

#window {
    color: #cdd6f4;
}

/* Clock */
#clock {
    color: @blue;
    font-weight: bold;
}

/* CPU */
#cpu {
    color: @green;
}

/* Memory */
#memory {
    color: @mauve;
}

/* Temperature */
#temperature {
    color: @peach;
}

#temperature.critical {
    color: @red;
}

/* Network */
#network {
    color: @sapphire;
    font-size: 20px;
}

#network.disconnected {
    color: @red;
}

/* Pulseaudio */
#pulseaudio {
    color: @yellow;
}

#pulseaudio.muted {
    color: @overlay1;
}

/* Language */
#language {
    color: @teal;
    font-weight: bold;
}

/* Idle inhibitor */
#idle_inhibitor {
    color: @overlay1;
}

#idle_inhibitor.activated {
    color: @peach;
}

/* Power profiles */
#power-profiles-daemon {
    color: @subtext0;
}

#power-profiles-daemon.performance {
    color: @red;
}

#power-profiles-daemon.balanced {
    color: @blue;
}

#power-profiles-daemon.power-saver {
    color: @green;
}

/* Mail */
#custom-mail {
    color: @lavender;
}

#custom-mail.unread {
    color: @red;
}

/* Disk */
#disk {
    color: @flamingo;
}

/* GPU */
#custom-gpu {
    color: @green;
}

/* Weather */
#custom-weather {
    color: @sky;
}

/* Privacy */
#privacy {
    padding: 0;
}

#privacy-item {
    padding: 0 5px;
    color: @base;
}

#privacy-item.screenshare {
    background-color: @peach;
}

#privacy-item.audio-in {
    background-color: @red;
}

#privacy-item.audio-out {
    background-color: @blue;
}

/* Tray */
#tray {
    color: @text;
}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    color: @red;
}