diff --git a/waybar/colors.css b/waybar/colors.css new file mode 100644 index 0000000..7de79b7 --- /dev/null +++ b/waybar/colors.css @@ -0,0 +1,26 @@ +@define-color rosewater #f5e0dc; +@define-color flamingo #f2cdcd; +@define-color pink #f5c2e7; +@define-color mauve #cba6f7; +@define-color red #f38ba8; +@define-color maroon #eba0ac; +@define-color peach #fab387; +@define-color yellow #f9e2af; +@define-color green #a6e3a1; +@define-color teal #94e2d5; +@define-color sky #89dceb; +@define-color sapphire #74c7ec; +@define-color blue #89b4fa; +@define-color lavender #b4befe; +@define-color text #cdd6f4; +@define-color subtext1 #bac2de; +@define-color subtext0 #a6adc8; +@define-color overlay2 #9399b2; +@define-color overlay1 #7f849c; +@define-color overlay0 #6c7086; +@define-color surface2 #585b70; +@define-color surface1 #45475a; +@define-color surface0 #313244; +@define-color base #1a1c2d; +@define-color mantle #0D0F17; +@define-color crust #0C0D14; diff --git a/waybar/config b/waybar/config index b3282cd..60929e4 100644 --- a/waybar/config +++ b/waybar/config @@ -1,3 +1,4 @@ +// vim: ft=jsonc // -*- mode: jsonc -*- { "output": "DP-1", @@ -30,10 +31,10 @@ "tooltip-format": "{:%Y %B}\n{calendar}" }, "cpu": { - "format": "{usage}% ", + "format": " {usage}%", "tooltip": false }, "memory": { - "format": "{}% " + "format": " {}%" } } diff --git a/waybar/style.css b/waybar/style.css index 31a1732..99f94fc 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -1,46 +1,56 @@ +@import "colors.css"; + * { - font-family: "JetBrainsMono Nerd Font"; - font-size: 18px; + font-family: "JetBrainsMono Nerd Font"; + font-size: 18px; + min-height: 0; + font-weight: bold; } window#waybar { - background-color: #0e1019; - border-top: 1px solid #191b2b; - color: #eceef4; - transition-property: background-color; - transition-duration: 0.3s; - padding: 0 24px; - opacity: 0.95; + background: transparent; + background-color: @mantle; + color: @overlay0; + transition-property: background-color; + transition-duration: 0.1s; +} + +#window { + margin: 8px; + padding-left: 8; + padding-right: 8; } button { - /* Avoid rounded borders under each button name */ - border: none; - border-radius: 0; + /*box-shadow: inset 0 -3px transparent;*/ + border: none; + padding-bottom: 2px; + border-radius: 0; } -button:hover { - border: none; - box-shadow: none; /* Remove predefined box-shadow */ - text-shadow: none; /* Remove predefined text-shadow */ - background: none; /* Remove predefined background color (white) */ - transition: none; /* Disable predefined animations */ +#workspaces button:hover, +#workspaces button.active, +#workspaces button.focused { + /*background: inherit;*/ + color: @blue; + padding-bottom: 3px; + border-top: 3px solid @blue; } #workspaces button { - color: #eceef4; - padding: 0 5px; + padding: 0 8px; } -#workspaces button:hover { - border: none; +#workspaces button.active, +#workspaces button.focused { + background-color: rgba(0, 0, 0, 0.3); } -#workspaces button.active { - color: #89b4fa; - background: #191b2b; +#workspaces button.urgent { + background-color: @red; } +#pulseaudio, #clock, #battery, #cpu, @@ -48,16 +58,66 @@ button:hover { #disk, #temperature, #backlight, -#network, -#pulseaudio, #wireplumber, -#custom-media, #tray, +#network, #mode, -#idle_inhibitor, -#scratchpad, -#power-profiles-daemon, -#mpd { - padding: 0 10px; - color: #eceef4; +#scratchpad { + margin-bottom: 2px; + margin-left: 8px; + margin-right: 8px; + padding-left: 8px; + padding-right: 8px; } + +#clock { + color: @mauve; + border-bottom: 2px solid @mauve; +} + +#clock.date { + color: @mauve; +} + +#pulseaudio { + color: @blue; +} + +#network { + color: @yellow; +} + +#cpu { + color: @sky; + border-bottom: 2px solid @sapphire; +} + +#memory { + color: @peach; + border-bottom: 2px solid @peach; +} + +#idle_inhibitor { + margin-right: 12px; + color: @green; +} + +#idle_inhibitor.activated { + color: @red; +} + +#battery { + color: @green; + border-bottom: 2px solid @green; +} + +/* 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; +} +