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: 'Noto Sans Mono', 'Symbols Nerd Font Mono', 'Symbols Nerd Font', 'Font Awesome 6 Free', monospace;
    font-size: 15px;
    font-weight: bold;
}

window#waybar {
    background-color: rgba(30, 30, 46, 0.72);
    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: 16px;
}

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

/* Workspaces */
#workspaces button {
    min-height: 24px;
    padding: 4px 8px;
    background-color: #000000;
    color: @overlay2;
    border-radius: 16px;
}

#workspaces button:hover {
    background: #000000;
}

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

#workspaces button.urgent {
    background-color: #000000;
    color: @base;
}

/* Common module styling */
#window,
#custom-calendar,
#cpu,
#memory,
#disk,
#temperature,
#network,
#pulseaudio,
#wireplumber,
#tray,
#power-profiles-daemon,
#language,
#custom-gpu,
#custom-weather,
#privacy {
    min-height: 24px;
    padding: 4px 8px;
    background-color: #000000;
    border-radius: 16px;
    color: @text;
}

#workspaces button label,
#window label,
#custom-calendar label,
#cpu label,
#memory label,
#disk label,
#temperature label,
#network label,
#pulseaudio label,
#wireplumber label,
#tray label,
#power-profiles-daemon label,
#language label,
#custom-gpu label,
#custom-weather label,
#privacy label {
    min-height: 24px;
    padding: 0;
    margin: 0;
}

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

#window {
    color: @text;
}

/* Calendar/Clock */
#custom-calendar {
    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;
}

/* 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 {
    background-color: transparent;
    padding: 0;
}

#privacy-item {
    min-height: 24px;
    padding: 4px 8px;
    color: @base;
    background-color: #000000;
    border-radius: 16px;
}

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

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

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

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

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

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