From 19da43828c46d9833d31bf9889ec7e87e880a25b Mon Sep 17 00:00:00 2001 From: Peter Cai Date: Fri, 25 Mar 2022 14:42:54 -0400 Subject: [PATCH] switch to gruvbox + monospace theme for the desktop --- alacritty/.config/alacritty/alacritty.yml | 49 ++-- sway/.config/mako/mako.conf | 30 +-- sway/.config/sway/config | 13 +- sway/.config/waybar/style.css | 283 ++++++++++++---------- 4 files changed, 192 insertions(+), 183 deletions(-) diff --git a/alacritty/.config/alacritty/alacritty.yml b/alacritty/.config/alacritty/alacritty.yml index 18ec7a7..49b2bc5 100644 --- a/alacritty/.config/alacritty/alacritty.yml +++ b/alacritty/.config/alacritty/alacritty.yml @@ -20,32 +20,29 @@ font: family: 'Fira Code' size: 10.5 -# Nord color scheme from alacritty wiki -# Colors (Nord) +# Colors (Gruvbox Material Dark Medium) colors: - # Default colors - primary: - background: '#2E3440' - foreground: '#D8DEE9' + primary: + background: '0x282828' + foreground: '0xdfbf8e' - # Normal colors - normal: - black: '#3B4252' - red: '#BF616A' - green: '#A3BE8C' - yellow: '#EBCB8B' - blue: '#81A1C1' - magenta: '#B48EAD' - cyan: '#88C0D0' - white: '#E5E9F0' + normal: + black: '0x665c54' + red: '0xea6962' + green: '0xa9b665' + yellow: '0xe78a4e' + blue: '0x7daea3' + magenta: '0xd3869b' + cyan: '0x89b482' + white: '0xdfbf8e' - # Bright colors - bright: - black: '#4C566A' - red: '#BF616A' - green: '#A3BE8C' - yellow: '#EBCB8B' - blue: '#81A1C1' - magenta: '#B48EAD' - cyan: '#8FBCBB' - white: '#ECEFF4' + bright: + black: '0x928374' + red: '0xea6962' + green: '0xa9b665' + yellow: '0xe3a84e' + blue: '0x7daea3' + magenta: '0xd3869b' + cyan: '0x89b482' + white: '0xdfbf8e' + diff --git a/sway/.config/mako/mako.conf b/sway/.config/mako/mako.conf index fee4500..aba827f 100644 --- a/sway/.config/mako/mako.conf +++ b/sway/.config/mako/mako.conf @@ -1,24 +1,12 @@ -sort=-time -layer=overlay -background-color=#2e3440dd -width=300 -height=110 -border-size=1 -border-color=#88c0d0 -border-radius=8 -icons=0 -max-icon-size=64 -default-timeout=5000 -ignore-timeout=1 -font=monospace 11 - -[urgency=low] -border-color=#cccccc - -[urgency=normal] -border-color=#d08770 +text-color=#282828 +background-color=#ebdbb2 +border-color=#282828 +default-timeout=8000 +font=JetBrains Mono 10 +border-radius=10 [urgency=high] -border-color=#bf616a +border-color=#FF0000 default-timeout=0 - +border-size=4 +layer=overlay diff --git a/sway/.config/sway/config b/sway/.config/sway/config index 76e9c60..af1881a 100644 --- a/sway/.config/sway/config +++ b/sway/.config/sway/config @@ -249,11 +249,16 @@ input type:touchpad { tap enabled } -client.focused 00000000 00000000 00000000 00000000 -client.focused_inactive 00000000 00000000 00000000 00000000 -client.unfocused 00000000 00000000 00000000 00000000 +default_border pixel 2 -default_border pixel 8 +smart_gaps on + +gaps outer 4 +gaps inner 0 + +client.focused #ebdbb2 #ebdbb2 #ebdbb2 #ebdbb2 #ebdbb2 +client.unfocused 00000000 00000000 00000000 00000000 +client.focused_inactive 00000000 00000000 00000000 00000000 # This is annoying -- just turn it off focus_follows_mouse no diff --git a/sway/.config/waybar/style.css b/sway/.config/waybar/style.css index 3d827ff..986fc0a 100644 --- a/sway/.config/waybar/style.css +++ b/sway/.config/waybar/style.css @@ -1,161 +1,180 @@ -/* - * Based on - */ - * { border: none; border-radius: 0; - font-family: Nerd Font Hack; + font-family: JetBrains Mono; font-size: 14px; - min-height: 32px; + min-height: 0; + margin: 0 0px; } window#waybar { - background: transparent; + background-color: #3c3836; + border-bottom: none; + color: #ebdbb2; + transition-property: background-color; + transition-duration: 0.5s; } window#waybar.hidden { opacity: 0.2; } -#window { - margin-top: 8px; - padding-left: 16px; - padding-right: 16px; - border-radius: 26px; - transition: none; - color: transparent; - background: transparent; -} - -window#waybar.termite #window, -window#waybar.Firefox #window, -window#waybar.Navigator #window, -window#waybar.PCSX2 #window { - color: #4d4d4d; - background: #e6e6e6; -} - -#workspaces, #network, #pulseaudio, -#custom-weather, #clock, #tray, -#custom-power { - opacity: 0.8; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -} - -#custom-power { - margin-top: 8px; - margin-left: 12px; - margin-bottom: 8px; - padding-left: 20px; - padding-right: 20px; - border-radius: 26px; - background: #bf616a; - color: rgba(255, 255, 255, 0.9); -} - -#workspaces { - margin-top: 8px; - margin-left: 8px; - margin-bottom: 8px; - border-radius: 26px; - background: #2e3440; - transition: none; -} - #workspaces button { - transition: none; - color: #f8f8f2; - background: transparent; - font-size: 16px; + padding: 0 5px; + color: #ebdbb2; + border-radius: 5px; +} + +/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ +#workspaces button:hover { + background: rgba(0, 0, 0, 0.2); + box-shadow: inherit; + border-bottom: none; + border-radius: 5px; } #workspaces button.focused { - color: #88c0d0; + background-color: #ebdbb2; + color: #282828; + border-bottom: none; + border-radius: 5px; } -#workspaces button:hover { - color: #d8d8d2; +#workspaces button.urgent { + background-color: #2c303c; } -#network { - margin-top: 8px; - margin-left: 8px; - padding-left: 16px; - padding-right: 16px; - margin-bottom: 8px; - border-radius: 26px; - transition: none; - color: #4d4d4d; - background: #b48ead; +#mode { + background-color: #64727d; + border-bottom: 3px solid #ffffff; } -#pulseaudio { - margin-top: 8px; - margin-left: 8px; - padding-left: 16px; - padding-right: 16px; - margin-bottom: 8px; - border-radius: 26px; - transition: none; - color: #4d4d4d; - background: #88c0d0; +#clock, +#battery, +#cpu, +#memory, +#temperature, +#backlight, +#network, +#pulseaudio, +#mode, +#idle_inhibitor, +#custom-weather, +#mpd { + padding: 0 14px; + margin: 0 0px; + color: #ffffff; } -#custom-weather { - margin-top: 8px; - margin-left: 8px; - padding-left: 16px; - padding-right: 16px; - margin-bottom: 8px; - border-radius: 26px; - transition: none; - color: #4d4d4d; - background: #a3be8c; -} - -#clock { - margin-top: 8px; - margin-left: 8px; - margin-right: 12px; - padding-left: 16px; - padding-right: 16px; - margin-bottom: 8px; - border-radius: 26px; - transition: none; - color: #f8f8f2; - background: #2e3440; -} - -#tray { - margin-top: 8px; - margin-left: 8px; - margin-bottom: 8px; - padding-left: 16px; - padding-right: 16px; - border-radius: 26px; - transition: none; - background: rgba(210, 210, 210, 0.5); -} - -#taskbar { - margin-top: 8px; - margin-left: 20px; - margin-right: 20px; - margin-bottom: 8px; - padding-left: 16px; - padding-right: 16px; - border-radius: 26px; +#clock, #custom-weather { + color: #000000; + background-color: #ebdbb2; } #battery { - margin-top: 8px; - margin-left: 8px; - padding-left: 16px; - padding-right: 16px; - margin-bottom: 8px; - border-radius: 26px; - transition: none; - color: #4d4d4d; - background: #a3be8c; + background-color: #ebdbb2; + color: #000000; +} + +#battery.charging { + color: #000000; + background-color: #ebdbb2; +} + +@keyframes blink { + to { + background-color: #ebdbb2; + color: #282828; + } +} + +#battery.critical:not(.charging) { + background-color: #282828; + color: #282828; + animation-name: blink; + animation-duration: 1s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: #000000; +} + +#cpu { + background-color: #ebdbb2; + color: #000000; +} + +#memory { + background-color: #ebdbb2; + color: #000000; +} + +#backlight { + background-color: #ebdbb2; + color: #000000; +} + +#network { + background-color: #ebdbb2; + color: #000000; + border-radius: 5px 0px 0px 5px; +} + +#network.disconnected { + background-color: #ebdbb2; +} + +#pulseaudio { + background-color: #ebdbb2; + color: #000000; +} + +#pulseaudio.muted { + background-color: #ebdbb2; + color: #000000; +} + +#custom-media { + background-color: #ebdbb2; + color: #282828; + min-width: 100px; +} + +#custom-media.custom-spotify { + background-color: #66cc99; +} + +#custom-media.custom-vlc { + background-color: #ffa000; +} + +#temperature { + background-color: #ebdbb2; + color: #282828; +} + +#temperature.critical { + background-color: #eb4d4b; +} + +#tray, #custom-power { + background-color: #3c3836; + padding: 0 8px; +} + +#idle_inhibitor { + background-color: rgba(0, 0, 0, 0); + color: #ebdbb2; + border-radius: 5px; + margin-right: 2px; +} + +#idle_inhibitor.activated { + background-color: #ebdbb2; + color: #282828; + border-radius: 5px; + margin-right: 2px; }