dotfiles/config/waybar/style.css

/* Material Design Waybar Theme */

* {
    font-family: "Roboto", "JetBrainsMono Nerd Font", "Material Design Icons", sans-serif;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 0;
    min-height: 0;
}

window#waybar {
    background: #1E1E1E;
    color: #E1E1E1;
}

window#waybar.hidden {
    opacity: 0;
}

tooltip {
    background: #2D2D2D;
    border-radius: 8px;
    padding: 12px 16px;
    color: #E1E1E1;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

tooltip label {
    color: #E1E1E1;
}

/* ============= Workspaces ============= */
#workspaces {
    margin: 4px 8px;
    padding: 0;
    background: #2D2D2D;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#workspaces button {
    padding: 0 16px;
    margin: 4px;
    background: transparent;
    color: #B0B0B0;
    border-radius: 6px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#workspaces button:hover {
    background: rgba(144, 202, 249, 0.12);
    color: #90CAF9;
}

#workspaces button.active,
#workspaces button.focused {
    background: #90CAF9;
    color: #1E1E1E;
    box-shadow: 0 2px 4px rgba(144, 202, 249, 0.3);
}

#workspaces button.urgent {
    background: #CF6679;
    color: #1E1E1E;
}

/* ============= Mode & Window ============= */
#mode {
    margin: 4px 8px;
    padding: 0 16px;
    background: #CF6679;
    color: #1E1E1E;
    border-radius: 8px;
    font-weight: 500;
}

#window {
    margin: 4px 8px;
    padding: 0 16px;
    color: #B0B0B0;
}

/* ============= Module Cards ============= */
#battery,
#cpu,
#memory,
#temperature,
#backlight,
#network,
#pulseaudio,
#bluetooth,
#idle_inhibitor,
#privacy,
#tray,
#custom-media,
#custom-updates,
#custom-vpn,
#custom-ibus,
#custom-notification,
#custom-prayertimes,
#custom-monitor-brightness {
    margin: 4px 2px;
    padding: 0 12px;
    background: #2D2D2D;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#battery:hover,
#cpu:hover,
#memory:hover,
#temperature:hover,
#backlight:hover,
#network:hover,
#pulseaudio:hover,
#bluetooth:hover,
#idle_inhibitor:hover,
#custom-media:hover,
#custom-updates:hover,
#custom-vpn:hover,
#custom-ibus:hover,
#custom-notification:hover,
#custom-prayertimes:hover,
#custom-monitor-brightness:hover {
    background: #383838;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ============= Clock - Elevated Card ============= */
#clock {
    margin: 4px 8px;
    padding: 0 20px;
    background: #2D2D2D;
    color: #E1E1E1;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#clock:hover {
    background: #383838;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* ============= Idle Inhibitor ============= */
#idle_inhibitor {
    color: #B0B0B0;
}

#idle_inhibitor.activated {
    background: #03DAC6;
    color: #1E1E1E;
}

/* ============= Privacy ============= */
#privacy {
    padding: 0 8px;
}

#privacy-item {
    padding: 0 8px;
    margin: 0 2px;
}

#privacy-item.screenshare {
    color: #CF6679;
}

#privacy-item.audio-in {
    color: #03DAC6;
}

#privacy-item.audio-out {
    color: #90CAF9;
}

/* ============= Updates ============= */
#custom-updates {
    color: #FFB74D;
}

/* ============= Bluetooth ============= */
#bluetooth {
    color: #90CAF9;
}

#bluetooth.disabled {
    color: #666666;
}

#bluetooth.connected {
    background: #90CAF9;
    color: #1E1E1E;
}

/* ============= Network ============= */
#network {
    color: #03DAC6;
}

#network.disconnected {
    color: #CF6679;
}

/* ============= VPN ============= */
#custom-vpn {
    color: #81C784;
}

#custom-vpn.connected,
#custom-vpn.connected-ovpn,
#custom-vpn.connected-wg {
    background: #81C784;
    color: #1E1E1E;
}

#custom-vpn.disconnected {
    background: transparent;
    box-shadow: none;
}

/* ============= Pulseaudio ============= */
#pulseaudio {
    color: #CE93D8;
}

#pulseaudio.muted {
    color: #666666;
}

/* ============= Backlight & Monitor Brightness ============= */
#backlight,
#custom-monitor-brightness {
    color: #FFE082;
}

/* ============= CPU ============= */
#cpu {
    color: #81C784;
}

/* ============= Memory ============= */
#memory {
    color: #CE93D8;
}

/* ============= Temperature ============= */
#temperature {
    color: #FFAB91;
}

#temperature.critical {
    background: #CF6679;
    color: #1E1E1E;
}

/* ============= Battery ============= */
#battery {
    color: #81C784;
}

#battery.charging,
#battery.plugged {
    background: #81C784;
    color: #1E1E1E;
}

#battery.warning:not(.charging) {
    color: #FFB74D;
}

#battery.critical:not(.charging) {
    background: #CF6679;
    color: #1E1E1E;
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    50% { opacity: 0.6; }
}

/* ============= Media ============= */
#custom-media {
    color: #F48FB1;
    min-width: 100px;
}

/* ============= Prayer Times ============= */
#custom-prayertimes {
    color: #81C784;
}

/* prayertimes.sh sets .soon inside the notification warning window */
#custom-prayertimes.soon {
    background: #FFB74D;
    color: #1E1E1E;
}

/* ============= IBus ============= */
#custom-ibus {
    color: #90CAF9;
}

/* ============= Tray ============= */
#tray {
    padding: 0 8px;
}

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

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background: rgba(207, 102, 121, 0.3);
    border-radius: 6px;
}

/* ============= Notifications ============= */
#custom-notification {
    color: #B0B0B0;
}

/* swaync sets the class from its --swaybar-format output */
#custom-notification.notification,
#custom-notification.inhibited-notification {
    color: #90CAF9;
}

#custom-notification.dnd-none,
#custom-notification.dnd-notification,
#custom-notification.dnd-inhibited-none,
#custom-notification.dnd-inhibited-notification {
    color: #CF6679;
}

/* ============= Power Button ============= */
#custom-power {
    margin: 4px 8px 4px 2px;
    padding: 0 14px;
    background: #2D2D2D;
    color: #CF6679;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#custom-power:hover {
    background: #CF6679;
    color: #1E1E1E;
    box-shadow: 0 4px 8px rgba(207, 102, 121, 0.4);
}