diff options
Diffstat (limited to '.config/waybar')
| l--------- | .config/waybar/config | 2 | ||||
| -rw-r--r-- | .config/waybar/config.jsonc (renamed from .config/waybar/config.json) | 8 | ||||
| -rw-r--r-- | .config/waybar/style.css | 520 | ||||
| -rw-r--r-- | .config/waybar/theme.css | 26 |
4 files changed, 441 insertions, 115 deletions
diff --git a/.config/waybar/config b/.config/waybar/config index 0cffcb3..b35fc29 120000 --- a/.config/waybar/config +++ b/.config/waybar/config @@ -1 +1 @@ -config.json
\ No newline at end of file +config.jsonc
\ No newline at end of file diff --git a/.config/waybar/config.json b/.config/waybar/config.jsonc index 5ab82e8..52d6a0c 100644 --- a/.config/waybar/config.json +++ b/.config/waybar/config.jsonc @@ -9,6 +9,7 @@ ], "modules-right": [ "custom/recording", + "tray", "image#album-art", "custom/tasks", "custom/music", @@ -22,9 +23,8 @@ "custom/mailbox", "custom/microphone", "custom/volume", - "custom/clock", - "custom/internet", - "tray" + "custom/clock" + // "custom/internet" ], "hyprland/workspaces": { @@ -274,7 +274,7 @@ "format": "{}", "signal": 1, "exec" : "sb-clock", - "interval" : 1, + "interval" : 5, "on-click": "BLOCK_BUTTON=1 sb-clock", "on-click-middle": "BLOCK_BUTTON=2 sb-clock", "on-click-right": "BLOCK_BUTTON=3 sb-clock", diff --git a/.config/waybar/style.css b/.config/waybar/style.css index 8c8e989..092ec04 100644 --- a/.config/waybar/style.css +++ b/.config/waybar/style.css @@ -1,166 +1,518 @@ -@import "theme.css"; +@define-color color-bar-bg #282828; +@define-color color-bar-fg #ebdbb2; +@define-color color-bar-underline #1d2021; +@define-color color-bg #282828; +@define-color color-fg #ebdbb2; +@define-color color-button-bg #83a598; +@define-color color-button-fg #282828; +@define-color color-button-urgent-bg #fb4934; +@define-color color-button-urgent-fg #282828; +@define-color color-workspace-button-bg #504945; +@define-color color-workspace-button-fg #ebdbb2; +@define-color color-workspace-button-hover-bg #665c54; +@define-color color-workspace-button-hover-fg #ebdbb2; +@define-color color-workspace-button-focused-bg #83a598; +@define-color color-workspace-button-focused-fg #282828; +@define-color color-widget-audio-bg #fabd2f; +@define-color color-widget-audio-fg #282828; +@define-color color-widget-audio-hover-bg #fabd2f; +@define-color color-widget-audio-hover-fg #282828; +@define-color color-widget-audio-muted-bg #fabd2f; +@define-color color-widget-audio-muted-fg #282828; +@define-color color-widget-clock-bg #d5c4a1; +@define-color color-widget-clock-fg #282828; +@define-color color-widget-battery-bg #b8bb26; +@define-color color-widget-battery-fg #282828; +@define-color color-widget-battery-low-bg #fb4934; +@define-color color-widget-battery-low-fg #282828; +@define-color color-widget-battery-low-blink-bg #fb4934; +@define-color color-widget-battery-low-blink-fg #282828; +@define-color color-widget-backlight-bg #d3869b; +@define-color color-widget-backlight-fg #282828; +@define-color color-widget-temperature-bg #8ec07c; +@define-color color-widget-temperature-fg #282828; +@define-color color-widget-temperature-critical-bg #fb4934; +@define-color color-widget-temperature-critical-fg #282828; +@define-color color-widget-memory-bg #83a598; +@define-color color-widget-memory-fg #282828; +@define-color color-widget-cpu-bg #d5c4a1; +@define-color color-widget-cpu-fg #282828; +@define-color color-widget-power-profile-balanced-bg #d3869b; +@define-color color-widget-power-profile-balanced-fg #282828; +@define-color color-widget-power-profile-performance-bg #fe8019; +@define-color color-widget-power-profile-performance-fg #282828; +@define-color color-widget-power-profile-saver-bg #b8bb26; +@define-color color-widget-power-profile-saver-fg #282828; +@define-color color-widget-tray-bg #504945; +@define-color color-widget-tray-needs-attention #fb4934; +@define-color color-widget-idle-inhibitor-off-bg #504945; +@define-color color-widget-idle-inhibitor-off-fg #a89984; +@define-color color-widget-idle-inhibitor-on-bg #d5c4a1; +@define-color color-widget-idle-inhibitor-on-fg #282828; +@define-color color-widget-scratchpad-bg #ff0000; +@define-color color-widget-scratchpad-fg #ff0000; +@define-color color-widget-notifications-bg #83a598; +@define-color color-widget-notifications-fg #282828; +@define-color color-widget-power-bg #83a598; +@define-color color-widget-power-fg #282828; +@define-color color-tooltip-bg #282828; +@define-color color-tooltip-fg #ebdbb2; * { - font-family: "monospace"; - min-height: 0; - font-weight: bold; - font-size: 100%; + font-family: "JetBrainsMono Nerd Font Propo", monospace; + font-size: 17px; + font-weight: bold; + border: none; + border-radius: 5px; } window#waybar { - /* background-color: #005577; */ + background-color: @color-bar-bg; + color: @color-bar-fg; + border-bottom: 4px solid @color-bar-underline; } -#window { - padding-left: 10px; +window#waybar > * { + margin-top: 4px; + margin-bottom: 8px; /* margin-top + bar underline thickness */ } -#custom-vanity { - padding-left: 5px; - padding-right: 10px; +window#waybar.hidden { + opacity: 0.2; +} + +button { + border: none; + background-color: @color-button-bg; +} + +/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ +button:hover { + background: inherit; +} + +/* you can set a style on hover for any module like this */ +#custom-microphone:hover, +#custom-volume:hover { + background-color: @color-widget-audio-hover-bg; + color: @color-widget-audio-hover-fg; +} + +#workspaces { + padding: 0; + margin: 0; } -#taskbar button, #workspaces button { - color: @subtext0; - border-radius: 0px; + padding: 0; + min-height: 0px; + min-width: 37px; + margin-left: 4px; + background-color: @color-workspace-button-bg; + color: @color-workspace-button-fg; +} + +#workspaces button:hover { + background-color: @color-workspace-button-hover-bg; + color: @color-workspace-button-hover-fg; } -#taskbar button.active, #workspaces button.active { - color: @text; + background-color: @color-workspace-button-focused-bg; + color: @color-workspace-button-focused-fg; } #workspaces button.urgent { - /* color: #fb4934; */ + background-color: @color-button-urgent-bg; + color: @color-button-urgent-fg; } -.modules-left, .modules-right { - color: #cdd6f4; +#mode { + background-color: #ff0000; + box-shadow: inset 0 -3px #0000ff; } -.modules-right { - padding-left: 10px; +#custom-clock, +#battery, +#cpu, +#custom-memory, +#disk, +#temperature, +#backlight, +#network, +#custom-rainchance, +#custom-weather, +#custom-torrent, +#custom-mailbox, +#custom-volume, +#custom-microphone, +#wireplumber, +#custom-news, +#custom-packages, +#custom-media, +#custom-music, +#custom-recording, +#custom-internet, +#image, +#tray, +#mode, +#idle_inhibitor, +#scratchpad, +#power-profiles-daemon, +#custom-notifications, +#custom-power, +#mpd { + padding: 0 10px; + margin-right: 4px; } -#image.album-art { - border-radius: 10px; - padding-top: 5px; - padding-bottom: 5px; - padding-right: 10px; +#window, +#workspaces { + margin: 0 4px; } -#custom-recording { - padding-right: 10px; +/* If workspaces is the leftmost module, omit left margin */ +.modules-left > widget:first-child > #workspaces { + margin-left: 0; } -#custom-music { - padding-right: 10px; +/* If workspaces is the rightmost module, omit right margin */ +.modules-right > widget:last-child > #workspaces { + margin-right: 0; } -#custom-packages { - color: @pink; - padding-right: 10px; +#custom-notifications { + background-color: @color-widget-notifications-bg; + color: @color-widget-notifications-fg; + font-size: 20px; + padding-right: 14px; } -#custom-news { - padding-right: 10px; +#custom-power { + background-color: @color-widget-power-bg; + color: @color-widget-power-fg; + font-size: 20px; + margin-right: 4px; } -#cpu { - padding-right: 10px; +#custom-clock { + background-color: @color-widget-clock-bg; + color: @color-widget-clock-fg; } -#cpu.high { - color: @red; +#battery { + background-color: @color-widget-battery-bg; + color: @color-widget-battery-fg; +} + +#battery.charging, #battery.plugged { + background-color: @color-widget-battery-bg; + color: @color-widget-battery-fg; +} + +#battery.charging { +} + +@keyframes blink-battery-low { + to { + background-color: @color-widget-battery-low-blink-bg; + color: @color-widget-battery-low-blink-fg; + } +} + +#battery:not(.charging) { +} + +/* Using steps() instead of linear as a timing function to limit cpu usage */ +#battery.critical:not(.charging) { + background-color: @color-widget-battery-low-bg; + color: @color-widget-battery-low-fg; + animation-name: blink-battery-low; + animation-duration: 0.5s; + animation-timing-function: steps(12); + animation-iteration-count: infinite; + animation-direction: alternate; +} + +#power-profiles-daemon { +} + +#power-profiles-daemon.performance { + background-color: @color-widget-power-profile-performance-bg; + color: @color-widget-power-profile-performance-fg; +} + +#power-profiles-daemon.balanced { + background-color: @color-widget-power-profile-balanced-bg; + color: @color-widget-power-profile-balanced-fg; +} + +#power-profiles-daemon.power-saver { + background-color: @color-widget-power-profile-saver-bg; + color: @color-widget-power-profile-saver-fg; +} + +label:focus { + background-color: #ff0000; +} + +#cpu { + background-color: @color-widget-cpu-bg; + color: @color-widget-cpu-fg; } #cpu.mid { - color: @yellow; + background-color: @color-widget-audio-bg; } -#cpu.low { - color: @green; +#cpu.high { + background-color: @color-widget-battery-low-bg; } #custom-memory { - padding-right: 10px; + background-color: @color-widget-memory-bg; + color: @color-widget-memory-fg; } -#custom-memory.high { - color: @red; +#disk { + background-color: #ff0000; } -#custom-memory.mid { - color: @yellow; +#backlight { + background-color: @color-widget-backlight-bg; + color: @color-widget-backlight-fg; } -#custom-memory.low { - color: @green; +#custom-weather, #custom-rainchance { + background-color: @color-widget-backlight-bg; + color: @color-widget-backlight-fg; } -#custom-forecast { - padding-right: 10px; +#custom-weather { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; } -#custom-weather, #custom-rainchance { - padding-right: 10px; +#custom-rainchance { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; } -#custom-rainchance.high { - color: @mauve; +#network { + background-color: #ff0000; } -#custom-rainchance.mid { - color: @blue; +#network.disconnected { + background-color: #ff0000; } -#custom-rainchance.low { - color: @sky; +#custom-rainchance { + margin-right: 0px; + padding-right: 0px; } -#custom-weather.very_hot { - color: @maroon; +#custom-microphone, +#custom-volume { + background-color: @color-widget-audio-bg; + color: @color-widget-audio-fg; +} + +#custom-microphone { + border-bottom-right-radius: 0px; + border-top-right-radius: 0px; + margin-right: 0px; + padding-right: 0px; +} + +#custom-volume { + border-bottom-left-radius: 0px; + border-top-left-radius: 0px; +} + +#custom-music, #image { + background-color: @color-widget-tray-bg; } -#custom-weather.hot { - color: @red; +#custom-music { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; } -#custom-weather.warm { - color: @peach; +#image { + margin-right: 0px; + padding-right: 0px; } -#custom-weather.mild { - color: @yellow; +#pulseaudio.muted { + background-color: @color-widget-audio-muted-bg; + color: @color-widget-audio-muted-fg; } -#custom-weather.cool { - color: @mauve; +#wireplumber { + background-color: #ff0000; + color: #00ff00; } -#custom-weather.chilly { - color: @pink; +#wireplumber.muted { + background-color: #0000ff; +} + +#custom-media { + background-color: #ff0000; + color: #0000ff; + min-width: 100px; +} + +#custom-torrent { + background-color: @color-widget-tray-bg; +} + +#custom-news { + background-color: @color-widget-tray-bg; } -#custom-weather.cold { - color: @flamingo; +#custom-media.custom-spotify { + background-color: #00ff00; } -#custom-weather.below_zero { - color: @rosewater; +#custom-media.custom-vlc { + background-color: #ff0000; +} + +#custom-recording { + background-color: @color-widget-tray-bg; +} + +#temperature { + background-color: @color-widget-temperature-bg; + color: @color-widget-temperature-fg; +} + +#temperature.critical { + background-color: @color-widget-temperature-critical-bg; + color: @color-widget-temperature-critical-fg; +} + +#tray { + background-color: @color-widget-tray-bg; +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; + background-color: @color-widget-tray-needs-attention; +} + +#idle_inhibitor { + background-color: @color-widget-idle-inhibitor-off-bg; + color: @color-widget-idle-inhibitor-off-fg; +} + +#idle_inhibitor.activated { + background-color: @color-widget-idle-inhibitor-on-bg; + color: @color-widget-idle-inhibitor-on-fg; +} + +#mpd { + background-color: #ff0000; + color: #0000ff; +} + +#mpd.disconnected { + background-color: #00ff00; +} + +#mpd.stopped { + background-color: #ff0000; +} + +#mpd.paused { + background-color: #ffff00; +} + +#language { + background: #ff0000; + color: #0000ff; + padding: 0 5px; + margin: 0 5px; + min-width: 16px; +} + +#keyboard-state { + background: #0000ff; + color: #ff0000; + padding: 0 0px; + margin: 0 5px; + min-width: 16px; +} + +#keyboard-state > label { + padding: 0 5px; +} + +#keyboard-state > label.locked { + background: rgba(0, 0, 0, 0.2); +} + +#scratchpad { + background-color: @color-widget-scratchpad-bg; + color: @color-widget-scratchpad-fg; +} + +#scratchpad.empty { + background-color: transparent; +} + +#privacy { + padding: 0; +} + +#privacy-item { + padding: 0 5px; + color: white; +} + +#privacy-item.screenshare { + background-color: #ff0000; +} + +#privacy-item.audio-in { + background-color: #0000ff; +} + +#privacy-item.audio-out { + background-color: #00ff00; +} + +#custom-packages { + background-color: @color-widget-battery-bg; + color: @color-widget-battery-fg; } #custom-mailbox { - color: @yellow; - padding-right: 10px; + background-color: @color-widget-temperature-bg; + color: @color-widget-temperature-fg; } -#custom-microphone, -#custom-volume, -#custom-clock, -#custom-internet, -#tray -{ - padding-right: 10px; +tooltip { + background-color: @color-tooltip-bg; + border: none; + border-radius: 5px; +} + +tooltip decoration { + box-shadow: none; +} + +tooltip decoration:backdrop { + box-shadow: none; +} + +tooltip label { + color: @color-tooltip-fg; + padding-left: 5px; + padding-right: 5px; } diff --git a/.config/waybar/theme.css b/.config/waybar/theme.css deleted file mode 100644 index 0eb6a82..0000000 --- a/.config/waybar/theme.css +++ /dev/null @@ -1,26 +0,0 @@ -@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 #1e1e2e; -@define-color mantle #181825; -@define-color crust #11111b; |