/* ===================================== Colors (Catppuccin Mocha) ===================================== */ @define-color white #cdd6f4; @define-color black #1e1e2e; @define-color red #e78284; @define-color green #a6d189; @define-color yellow #e5c890; @define-color orange #ef9f76; @define-color blue #8caaee; @define-color purple #ca9ee6; @define-color aqua #81c8be; @define-color gray #313244; /* Brigher variants */ @define-color brred #f38ba8; @define-color brgreen #a6e3a1; @define-color brpurple #cba6f7; @define-color brorange #fab387; @define-color brgray #45475a; @define-color brblue #89b4fa; @define-color braqua #94e2d5; @define-color bryellow #f9e2af; /* ===================================== Color Definitions for Modules ===================================== */ @define-color critical @brred; @define-color unfocused @braqua; @define-color focused @red; @define-color inactive @brgray; @define-color clock @purple; @define-color monitor @blue; @define-color language @aqua; @define-color idle @green; @define-color powerprofile @green; @define-color battery @green; @define-color volume @yellow; @define-color backlight @orange; @define-color network @red; @define-color wbackground rgba(30, 30, 46, 0.90); /* ===================================== Keyframes ===================================== */ @keyframes blink { to { color: @critical; } } /* ===================================== Reset Styles ===================================== */ * { border: none; border-radius: 0; min-height: 0; padding: 0; box-shadow: none; text-shadow: none; } /* ===================================== Button Styles ===================================== */ button { box-shadow: inset 0 -3px transparent; border: none; border-radius: 0; } /* Prevent strange hover effect on workspace buttons */ button:hover { background: inherit; } /* ===================================== General Bar Styles ===================================== */ window#waybar { background-color: @wbackground; font-family: Symbols Nerd Font Mono, Mononoki Nerd Font; font-size: 14px; } /* ===================================== Workspaces Module ===================================== */ #workspaces button { font-family: Symbols Nerd Font Mono; font-size: 16px; padding: 0px 0px; margin: 0 0; color: @white; } #workspaces button.visible { color: @white; } #workspaces button.focused { color: @black; background: @focused; } #workspaces button.unfocused { color: @white; } #workspaces button.urgent { color: @wbackground; background: @critical; } #workspaces button:hover { background: @yellow; color: @black; } /* ===================================== Mode Module ===================================== */ #mode { color: @black; background-color: @red; border-bottom: 3px solid @white; padding: 3px; } /* ===================================== Window Module ===================================== */ #window { color: @white; padding: 0 10px; margin: 5px 0; } /* ===================================== Margins and Layout Adjustments ===================================== */ #window, #workspaces { margin: 0 4px; } .modules-left > widget:first-child > #workspaces { margin-left: 0; } .modules-right > widget:last-child > #workspaces { margin-right: 0; } /* ===================================== Individual Module Styles ===================================== */ #cpu, #memory, #language, #idle_inhibitor, #power-profiles-daemon, #battery, #pulseaudio, #backlight, #network, #bluetooth, #clock { color: @black; padding-left: 4px; } #clock { background-color: @clock; } #cpu { background-color: @monitor; } #memory { background-color: @monitor; } #language { background-color: @language; } #idle_inhibitor { background-color: @battery; } #power-profiles-daemon { background-color: @powerprofile; } #battery, #battery.charging, #battery.plugged { background-color: @battery; } #battery.critical:not(.charging) { color: @white; animation: blink 0.5s linear infinite alternate; } #network, #network.disconnected { background-color: @network; } #bluetooth, #bluetooth.disconnected { background-color: @network; padding-right: 10px; } #pulseaudio, #pulseaudio.muted { background-color: @volume; } #backlight { background-color: @backlight; } /* ===================================== Modeline Arrows ===================================== */ #custom-arrow1, #custom-arrow2, #custom-arrow3, #custom-arrow4, #custom-arrow5, #custom-arrow6, #custom-arrow7 { font-size: 18pt; } /* Individual Modeline Arrow Styles */ #custom-arrow1 { background: transparent; color: @clock; } #custom-arrow2 { background: @clock; color: @monitor; } #custom-arrow3 { background: @monitor; color: @language; } #custom-arrow4 { background: @language; color: @battery; } #custom-arrow5 { background: @battery; color: @volume; } #custom-arrow6 { background: @volume; color: @backlight; } #custom-arrow7 { background: @backlight; color: @network; }