diff --git a/stow/.config/waybar/style.css b/stow/.config/waybar/style.css index 7f0a01a..08f5038 100644 --- a/stow/.config/waybar/style.css +++ b/stow/.config/waybar/style.css @@ -1,229 +1,314 @@ -@define-color white #F2F2F2; -@define-color black #000203; -@define-color background #000203; -@define-color text #BECBCB; -@define-color lightgray #686868; -@define-color darkgray #353535; +/*@define-color foreground #c0caf5;*/ +@define-color foreground #1a1b26; +@define-color background #1a1b26; -@define-color red #F38BA8; -@define-color yellow #E0AF68; -@define-color green #9ECE6A; -@define-color blue #7AA2F7; -@define-color magenta #BB9AF7; - - -/* MIT License - Copyright (c) 2024 LightCrimson - https://github.com/yurihikari/garuda-hyprdots - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. */ +@define-color black #15161e; +@define-color red #f7768e; +@define-color green #9ece6a; +@define-color yellow #e0af68; +@define-color blue #7aa2f7; +@define-color purple #bb9af7; +@define-color lightblue #7dcfff; +@define-color #a9b1d6; * { - color: @lavender; - border: 0; - padding: 0 0; - font-family: JetBrainsMono Nerd Font; - font-size: 18px; - font-weight: bold; + /* `otf-font-awesome` is required to be installed for icons */ + font-family: JetBrainsMono Nerd Font, FontAwesome, Roboto, Helvetica, Arial, sans-serif; + font-size: 13px; + border-radius: 10px; + transition-duration: 0.5s; +} + +.module { + margin-left: 5px; + margin-right: 5px; + margin-top: 10px; } window#waybar { - border: 0px solid rgba(0, 0, 0, 0); - background-color: @background; + color: @foreground; + background-color: transparent; + transition-property: background-color; + transition-duration: .5s; } -#workspaces button { - color: @background; - border-radius: 50%; - /* background-color: @background; */ - margin: 0px 0px; - padding: 4 6 2 0; +window#waybar.hidden { + opacity: 0.2; } -#workspaces button:hover { - color: @red; - box-shadow: none; - /* Remove predefined box-shadow */ - text-shadow: none; - /* Remove predefined text-shadow */ - border: 0px; - background: none; +/* +window#waybar.empty { + background-color: transparent; +} +window#waybar.solo { + background-color: #FFFFFF; +} +*/ + +button { + /* Use box-shadow instead of border so the text isn't offset */ + box-shadow: inset 0 -3px transparent; + /* Avoid rounded borders under each button name */ + border: none; + border-radius: 0; } -#workspaces button:hover * { - color: @red; - background-color: @background; -} - -#workspaces * { - color: whitesmoke; +/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ +button:hover { + background: inherit; + box-shadow: inset 0 -3px #ffffff; } #workspaces { - border-style: solid; background-color: @background; - opacity: 1; + color: @lightblue; border-radius: 10px; - margin: 8px 0px 8px 8px; +} + +#workspaces button { + padding: 0 5px; +} + +#workspaces button:hover { + background: rgba(0, 0, 0, 0.2); } #workspaces button.focused { - color: @red; - border-radius: 20px; - /* background-color: @flamingo; */ + background-color: #64727D; + box-shadow: inset 0 -3px #ffffff; } -#workspaces button.focused * { - color: @red; +#workspaces button.urgent { + background-color: #eb4d4b; } #clock, -#custom-swap, -#custom-cava-internal, #battery, #cpu, #memory, -#idle_inhibitor, +#disk, #temperature, -#custom-keyboard-layout, #backlight, #network, +#pulseaudio, #wireplumber, -#mode, -#tray, -#custom-swaync, -#custom-pacman, #custom-media, -#privacy, +#tray, +#mode, +#idle_inhibitor, +#scratchpad, +#power-profiles-daemon, #mpd { - padding: 5px 8px; - border-style: solid; - background-color: shade(@background, 1); - opacity: 1; - margin: 8px 0; + padding: 0 10px; + background-color: @background; + color: @blue; +} + +#window, +#workspaces { +} + +/* If workspaces is the leftmost module, omit left margin */ +.modules-left > widget:first-child > #workspaces { + margin-left: 0; +} + +/* If workspaces is the rightmost module, omit right margin */ +.modules-right > widget:last-child > #workspaces { + margin-right: 0; } #clock { - /* background-color:#a3be8c; */ - color: @sky; - border-radius: 10px; - margin: 8px 10px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + margin-right: 0px; + + background-color: @background; + color: @red; } -#backlight { - color: @yellow; - /* border-bottom: 2px solid @yellow; */ - border-radius: 10px 0 0 10px; +#custom-swaync { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + margin-left: 0px; + + background-color: @red; + padding: 10px; } #battery { + background-color: @background; color: @green; - /* border-bottom: 2px solid #d8dee9; */ - border-radius: 0 10px 10px 0; - margin-right: 10px; } -#battery.charging { - color: #81a1c1; - /* border-bottom: 2px solid #81a1c1; */ +#battery.charging, #battery.plugged { + color: #ffffff; + background-color: #26A65B; } @keyframes blink { to { - color: @red; - /* border-bottom: 2px solid @red; */ + background-color: #ffffff; + color: #000000; } } +/* Using steps() instead of linear as a timing function to limit cpu usage */ #battery.critical:not(.charging) { - color: #bf616a; - /* border-bottom: 2px solid #bf616a; */ + background-color: #f53c3c; + color: #ffffff; animation-name: blink; animation-duration: 0.5s; - animation-timing-function: linear; + animation-timing-function: steps(12); animation-iteration-count: infinite; animation-direction: alternate; } -#network.disabled { - color: @red; +#cpu { + background-color: @blue; + color: #000000; +} + +#memory { + background-color: @background; + color: @green; +} + +#disk { + background-color: @background; + color: @yellow; +} + +#backlight { + background-color: @background; + color: @lightblue; } #network { - color: @magenta; - /* border-bottom: 2px solid @green; */ - border-radius: 10px; - margin-right: 5px; + background-color: @background; + color: @purple; } #network.disconnected { - color: #bf616a; - /* border-bottom: 2px solid #bf616a; */ + background-color: @background; + color: @red; } #wireplumber { - color: @blue; - /* border-bottom: 2px solid @flamingo; */ + background-color: @background; + color: @yellow; +/* color: @foreground;*/ } #wireplumber.muted { - color: #3b4252; - /* border-bottom: 2px solid #3b4252; */ + background-color: @background; + color: @red; +} + +#custom-media { + background-color: @background; + color: @yellow; + min-width: 100px; } #tray { - background-color: @darkgray; - margin: 8px 10px; - border-radius: 10px; + background-color: @background; + color: @foreground; } -#custom-media{ - background-color: @red; - color: @background; - border-radius: 10px; - padding: 5px 10px; - margin-left: 15px; +#tray > .passive { + -gtk-icon-effect: dim; } -#custom-swaync { - color: @background; - background-color: @red; - border-radius: 10px; - margin-left: 5px; - margin-right: 15px; - padding: 5px 10px; +#tray > .needs-attention { + -gtk-icon-effect: highlight; + background-color: #eb4d4b; } #privacy { - background-color: @yellow; - color: @yellow; - border-radius: 10px; - margin-left: 5px; - margin-right: 15px; - padding: 5px 10px; + padding: 0; } -#window { - border-style: hidden; - margin-left: 10px; - /* margin-top:1px; - padding: 8px 1rem; */ - margin-right: 10px; - color: #eceff4; +#privacy-item { + padding: 0 5px; + color: @foreground; +} + + +/* + * hover variants + */ + +#clock:hover { + background-color: @red; + color: @background; +} + +#custom-swaync:hover { + background-color: @background; + color: @red; +} + +#battery:hover { + background-color: @green; + color: @background; +} + +#cpu:hover { + background-color: @blue; + color: @background; +} + +#memory:hover { + background-color: @green; + color: @background; +} + +#disk:hover { + background-color: @background; + color: @yellow; +} + +#backlight:hover { + background-color: @lightblue; + color: @background; +} + +#network:hover { + background-color: @purple; + color: @background; +} + +#network.disconnected:hover { + background-color: @red; + color: @background; +} + +#wireplumber:hover { + background-color: @yellow; + color: @background; +} + +#wireplumber.muted:hover { + background-color: @red; + color: @background; +} + +#custom-media:hover { + background-color: @yellow; + color: @background; +} + +#tray:hover { + background-color: @foreground; + color: @background; +} + +#privacy:hover { + padding: 0; +} + +#privacy-item:hover { + background-color: @foreground; + color: @background; }