dotfiles/style.css

/* ─── Noctalia-inspired Waybar stylesheet ─── */
/* GruvboxAlt dark colors, floating bar with 12px radius */

* {
    all: initial;
    font-family:
        "JetBrainsMono Nerd Font", "JetBrains Mono", "Font Awesome 6 Free",
        monospace;
    font-size: 13px;
    font-weight: 500;
}

/* ─── Main Bar ─── */
#waybar {
    background-color: rgba(29, 32, 33, 0.85);
    color: #ebdbb2;
    border-radius: 8px;
    padding: 4px 8px;
}

/* ─── Module Sections ─── */
.modules-left,
.modules-center,
.modules-right {
    padding: 0 4px;
}

/* ─── Individual Modules ─── */
#image,
#tags,
#window,
#cpu,
#temperature,
#memory,
#disk,
#network,
#tray,
#custom-notifications,
#battery,
#pulseaudio,
#clock,
#custom-layout,
#custom-power,
#custom-power#vertical {
    padding: 4px 10px;
    margin: 2px 3px;
    border-radius: 8px;
    background-color: transparent;
}

/* ─── Fedora Logo (Image) ─── */
#image,
#image#fedora {
    padding: 4px 8px;
    margin: 2px 3px;
    border-radius: 8px;
    background-color: transparent;
}

/* ─── Workspaces (dwl/tags) ─── */
#tags,
#tags#vertical {
    background-color: transparent;
    padding: 2px 6px;
}

#tags button,
#tags#vertical button {
    padding: 2px 7px;
    margin: 0 2px;
    color: #665c54;
    background-color: transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Occupied workspace */
#tags button.occupied,
#tags#vertical button.occupied {
    color: #d79921;
}

/* Empty workspace */
#tags button.empty,
#tags#vertical button.empty {
    color: #665c54;
}

/* Focused workspace */
#tags button.focused,
#tags button.active,
#tags#vertical button.focused,
#tags#vertical button.active {
    color: #282828;
    background-color: #b8bb26;
    font-weight: bold;
}

/* Urgent workspace */
#tags button.urgent,
#tags#vertical button.urgent {
    color: #cc241d;
    background-color: rgba(204, 36, 29, 0.2);
}

/* Hover effect */
#tags button:hover,
#tags#vertical button:hover {
    background-color: rgba(184, 187, 38, 0.3);
    color: #ebdbb2;
}

#tags button.focused:hover,
#tags button.active:hover,
#tags#vertical button.focused:hover,
#tags#vertical button.active:hover {
    background-color: #b8bb26;
    color: #282828;
}

#tags button {
    padding: 2px 5px;
    margin: 0 2px;
    color: #665c54;
    background-color: transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Occupied workspace */
#tags button.occupied {
    color: #d79921;
}

/* Empty workspace */
#tags button.empty {
    color: #665c54;
}

/* Focused workspace */
#tags button.focused,
#tags button.active {
    color: #282828;
    background-color: #b8bb26;
    font-weight: bold;
}

/* Urgent workspace */
#tags button.urgent {
    color: #cc241d;
    background-color: rgba(204, 36, 29, 0.2);
}

/* Hover effect */
#tags button:hover {
    background-color: rgba(184, 187, 38, 0.3);
    color: #ebdbb2;
}

#tags button.focused:hover,
#tags button.active:hover {
    background-color: #b8bb26;
    color: #282828;
}

/* ─── Active Window (dwl/window) ─── */
#window {
    color: #ebdbb2;
    background-color: transparent;
}

/* ─── Center System Stats ─── */
#cpu {
    color: #fb4934;
}

#temperature {
    color: #fe8019;
}

#temperature.critical {
    color: #cc241d;
    background-color: rgba(204, 36, 29, 0.2);
}

#memory {
    color: #d79921;
}

#disk {
    color: #b8bb26;
}

#network {
    color: #8ec07c;
}

#network.disconnected {
    color: #928374;
}

/* ─── System Tray ─── */
#tray {
    background-color: transparent;
    padding: 4px 8px;
}

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

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: rgba(214, 93, 14, 0.3);
}

/* ─── Notifications ─── */
#custom-notifications {
    color: #689d6a;
}

#custom-notifications.has-notifications {
    color: #fb4934;
}

/* ─── Battery ─── */
#battery {
    color: #689d6a;
}

#battery.warning {
    color: #d79921;
}

#battery.critical {
    color: #cc241d;
}

#battery.charging,
#battery.plugged {
    color: #b8bb26;
}

/* ─── Pulseaudio ─── */
#pulseaudio {
    color: #83a598;
}

#pulseaudio.muted {
    color: #928374;
}

/* ─── Clock ─── */
#clock,
#clock#vertical {
    color: #ebdbb2;
    background-color: transparent;
    font-weight: 600;
}

/* ─── Layout Switcher ─── */
#custom-layout {
    color: #8ec07c;
    padding: 4px 10px;
    margin: 2px 3px;
    border-radius: 8px;
    background-color: transparent;
}

#custom-layout:hover {
    background-color: rgba(142, 192, 124, 0.15);
}

/* ─── Power Button ─── */
#custom-power,
#custom-power#vertical {
    color: #fb4934;
    background-color: transparent;
    font-size: 14px;
    padding: 2px 12px;
}

#custom-power:hover,
#custom-power#vertical:hover {
    background-color: rgba(251, 73, 52, 0.15);
}

/* ─── Tooltip ─── */
tooltip {
    background-color: rgba(29, 32, 33, 0.95);
    border: 1px solid rgba(80, 73, 69, 0.8);
    border-radius: 8px;
    padding: 8px;
}

tooltip label {
    color: #ebdbb2;
    padding: 4px;
}