/* ===================================== Colors (Gruvbox Dark) ===================================== */ @define-color white #fbf1c7; @define-color black #1d2021; @define-color red #cc241d; @define-color green #98971a; @define-color yellow #d79921; @define-color orange #d65d0e; @define-color blue #458588; @define-color purple #b16286; @define-color aqua #689d6a; @define-color gray #a89984; /* Brighter variants */ @define-color brwhite #ebdbb2; @define-color brblack #504945; @define-color brgray #928374; @define-color brred #fb4934; @define-color brgreen #b8bb26; @define-color bryellow #fabd2f; @define-color brorange #fe8019; @define-color brblue #83a598; @define-color brpurple #d3869b; @define-color braqua #8ec07c; /* Darker variants */ @define-color drred #9d0006; @define-color drgreen #79740e; @define-color drpurple #8f3f71; @define-color drorange #af3a03; @define-color drgray #3c3836; @define-color drblue #076678; @define-color draqua #427b58; @define-color dryellow #b57614; /* ===================================== Color Definitions for Modules ===================================== */ @define-color critical @brred; @define-color unfocused @braqua; @define-color focused @red; @define-color inactive @gray; @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(29, 32, 33, 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: @wbackground; 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: @wbackground; 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: @white; 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; }