/* ~/.config/waybar/style.css */ @import "./catppuccin-waybar/themes/mocha.css"; /* ========================================================================== Global Reset & Bar ========================================================================== */ * { border: none; border-radius: 12px; min-height: 0; font-family: "JetBrainsMono Nerd Font", sans-serif; font-size: 12px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } window#waybar { background-color: transparent; color: @text; } /* ========================================================================== Base Islands (Containers) ========================================================================== */ /* Groups and standalone modules receive the floating island styling */ #spaces, #powertray, #hardware, #center, #custom-bluetooth-audio, #custom-volume, #custom-buds, #custom-mic { background-color: alpha(@surface0, 0.8); margin: 4px 6px; padding: 4px 16px; border: 1px solid alpha(@surface1, 0.5); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); color: @text; } /* Group-specific sizing overrides */ #hardware, #powertray, #spaces { border-radius: 24px; padding: 4px 10px; } /* Center Pill (Clock + MPRIS) Override */ #center { background: linear-gradient(45deg, @mauve, @lavender); color: @surface0; font-weight: 900; padding: 4px 20px; } /* ========================================================================== Grouped Modules (Inner Items) ========================================================================== */ /* Strip backgrounds and borders from items that live inside groups */ #workspaces, #window, #custom-cpu, #custom-mem, #custom-sys, #custom-gpu, #custom-disk-root, #custom-mpris, #custom-network, #custom-backlight, #clock, #tray, #custom-gamemode, #custom-dnd, #custom-power_status { background-color: transparent; border: none; box-shadow: none; margin: 0; padding: 0 8px; } /* Subtle vertical separator line between inner items */ #custom-cpu, #custom-mem, #custom-sys, #custom-gpu, #custom-disk-root, #custom-mpris, #custom-network, #tray, #custom-gamemode, #custom-dnd { border-right: 1px solid alpha(@surface1, 0.5); border-radius: 0; } /* ========================================================================== Specific Module Overrides & Alerts ========================================================================== */ /* --- Workspaces --- */ #workspaces { padding: 0px 8px; /* Override the inner item padding */ } #workspaces button { padding: 0; margin: 4px; min-width: 12px; min-height: 12px; background-color: @subtext0; color: transparent; border-radius: 12px; } #workspaces button.active, #workspaces button.active:hover { min-width: 30px; background-color: @mauve; } #workspaces button:hover { background-color: @lavender; min-width: 20px; } #workspaces button.urgent { background-color: @red; } /* --- Hardware Semantic Alerts --- */ .normal { color: @mauve; } .high { color: @peach; } .max { color: @red; } #custom-network { color: @mauve; } #custom-gamemode.active { color: @mauve; } /* --- Media / Controls --- */ #custom-volume.unmuted, #custom-mic.unmuted { color: @mauve; } #custom-volume.muted, #custom-mic.muted { color: @overlay1; } /* --- Bluetooth Audio --- */ #custom-bluetooth-audio.disabled, #custom-bluetooth-audio.disconnected { color: @overlay1; } #custom-bluetooth-audio.connected { color: @blue; } /* ANC States */ #custom-bluetooth-audio.anc-active, #custom-bluetooth-audio.connected.anc-active, #custom-bluetooth-audio.connected\ anc-active { color: @mauve; } #custom-bluetooth-audio.anc-aware, #custom-bluetooth-audio.connected.anc-aware, #custom-bluetooth-audio.connected\ anc-aware { color: @green; } #custom-bluetooth-audio.anc-off, #custom-bluetooth-audio.connected.anc-off, #custom-bluetooth-audio.connected\ anc-off { color: @blue; } /* --- Power Status --- */ #custom-power_status.charging { color: @green; } #custom-power_status.warning { color: @peach; } #custom-power_status.critical { color: @red; animation: blink 1s infinite alternate; } /* Interactive Hover States for Standalone Modules */ #custom-volume:hover, #custom-buds:hover, #custom-mic:hover, #custom-bluetooth-audio:hover, #custom-power_status:hover { background-color: @surface1; color: @mauve; } /* ========================================================================== Tooltips & Animations ========================================================================== */ tooltip { background-color: alpha(@base, 0.9); border: 1px solid @surface1; border-radius: 8px; } tooltip label { color: @text; padding: 8px; } @keyframes blink { to { color: @base; background-color: @red; } }