diff --git a/waybar/.config/waybar/config.jsonc b/waybar/.config/waybar/config.jsonc index b53bf31..347f042 100644 --- a/waybar/.config/waybar/config.jsonc +++ b/waybar/.config/waybar/config.jsonc @@ -4,7 +4,7 @@ "position": "bottom", // Waybar position (top|bottom|left|right) "height": 38, // Waybar height (to be removed for auto height) // "width": 1280, // Waybar width - "spacing": 4, // Gaps between modules (4px) + "spacing": 0, // Gaps between modules (4px) // Choose the order of the modules "modules-left": [ "sway/workspaces", @@ -15,10 +15,10 @@ "sway/window" ], "modules-right": [ - "idle_inhibitor", "pulseaudio", "network", "battery", + "idle_inhibitor", "clock", "tray" ], @@ -31,7 +31,7 @@ "format-icons": { "1": "", "2": "", - "3": "󰉋", + "3": "", "4": "", "5": "", "urgent": "", @@ -157,10 +157,10 @@ }, "network": { // "interface": "wlp2*", // (Optional) To force the use of this interface - "format-wifi": "{essid}", + "format-wifi": "{essid} ", "format-ethernet": "{ipaddr}/{cidr} ", - "tooltip-format": "{ifname} via {gwaddr}  ({signalStrength}%)", - "format-linked": "{ifname} (No IP) ", + "tooltip-format": "{ifname} via {gwaddr}  ({signalStrength}%)", + "format-linked": "{ifname} (No IP) ", "format-disconnected": "Disconnected ⚠", "format-alt": "{ifname}: {ipaddr}/{cidr}" }, diff --git a/waybar/.config/waybar/style.css b/waybar/.config/waybar/style.css index 0b17731..54a1c9d 100644 --- a/waybar/.config/waybar/style.css +++ b/waybar/.config/waybar/style.css @@ -1,62 +1,27 @@ @import "mocha.css"; * { - font-family: 'JetBrainsMono Nerd Font', 'Noto Sans Mono', 'Font Awesome 6 Free', 'Font Awesome 6 Brands', monospace; - font-size: 12px; + font-family: "JetBrainsMono Nerd Font"; + font-size: 12px; + min-height: 0; } -window#waybar { +#waybar { background: transparent; - background-color: rgba(43, 48, 59, 0.5); - border-bottom: 3px solid rgba(100, 114, 125, 0.5); - color: @text; + color: @text; + margin: 5px 5px; } -window#waybar.hidden { - opacity: 0.2; -} - -/* -window#waybar.empty { - background-color: transparent; -} -window#waybar.solo { - background-color: #FFFFFF; -} -*/ - -window#waybar.termite { - background-color: #3F3F3F; -} - -window#waybar.chromium { - background-color: #000000; - border: none; -} - -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; -} - -/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ -button:hover { - background: inherit; - box-shadow: inset 0 -1px @text; -} - -/* you can set a style on hover for any module like this */ -#pulseaudio:hover { - background-color: #a37800; +#workspaces { + border-radius: 1rem; + margin: 5px; + background-color: @surface0; } #workspaces button { color: @lavender; - border-radius: .8rem; - padding: 0.5rem; + border-radius: 1rem; + padding: 0.4rem; } #workspaces button.active { @@ -69,260 +34,74 @@ button:hover { border-radius: 1rem; } -#workspaces button.urgent { - background-color: #eb4d4b; -} - -#mode { - background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; -} - +#custom-music, +#tray, +#backlight, #clock, #battery, -#cpu, -#memory, -#disk, -#temperature, -#backlight, -#network, #pulseaudio, -#wireplumber, -#custom-media, -#tray, -#mode, -#idle_inhibitor, -#scratchpad, -#power-profiles-daemon, -#mpd { - padding: 0 8px; - color: #ffffff; -} - -#window, -#workspaces { - margin: 0 4px; -} - -/* 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; +#network, +#custom-lock, +#custom-power { + background-color: @surface0; + padding: 0 .4rem; + margin: 0; } #clock { color: @blue; border-radius: 0px 1rem 1rem 0px; - margin-right: .4rem; + margin-right: 0.3rem; } #battery { - color: @green; + color: @green; } -#battery.charging, #battery.plugged { - color: @green; +#battery.charging { + color: @green; } -@keyframes blink { - to { - background-color: #ffffff; - color: #000000; - } -} - -/* Using steps() instead of linear as a timing function to limit cpu usage */ -#battery.critical:not(.charging) { - background-color: #f53c3c; - color: #ffffff; - animation-name: blink; - animation-duration: 0.5s; - animation-timing-function: steps(12); - animation-iteration-count: infinite; - animation-direction: alternate; -} - -#power-profiles-daemon { - padding-right: 15px; -} - -#power-profiles-daemon.performance { - background-color: #f53c3c; - color: #ffffff; -} - -#power-profiles-daemon.balanced { - background-color: #2980b9; - color: #ffffff; -} - -#power-profiles-daemon.power-saver { - background-color: #2ecc71; - color: #000000; -} - -label:focus { - background-color: #000000; -} - -#cpu { - background-color: #2ecc71; - color: #000000; -} - -#memory { - background-color: #9b59b6; -} - -#disk { - background-color: #964B00; +#battery.warning:not(.charging) { + color: @red; } #backlight { - background-color: #90b1b1; + color: @yellow; } -#network { - background-color: #2980b9; -} - -#network.disconnected { - background-color: #f53c3c; +#backlight, #battery { + border-radius: 0; } #pulseaudio { - background-color: #f1c40f; - color: #000000; + color: @blue; + border-radius: 1rem 0px 0px 1rem; + margin-left: 0.3rem; } -#pulseaudio.muted { - background-color: #90b1b1; - color: #2a5c45; +#network { + color: @blue; + padding-right: 0.5rem; } -#wireplumber { - background-color: #fff0f5; - color: #000000; +#custom-music { + color: @mauve; + border-radius: 1rem; } -#wireplumber.muted { - background-color: #f53c3c; +#custom-lock { + border-radius: 1rem 0px 0px 1rem; + color: @lavender; } -#custom-media { - background-color: #66cc99; - color: #2a5c45; - min-width: 100px; -} - -#custom-media.custom-spotify { - background-color: #66cc99; -} - -#custom-media.custom-vlc { - background-color: #ffa000; -} - -#temperature { - background-color: #f0932b; -} - -#temperature.critical { - background-color: #eb4d4b; +#custom-power { + margin-right: 1rem; + border-radius: 0px 1rem 1rem 0px; + color: @red; } #tray { - background-color: #2980b9; -} - -#tray > .passive { - -gtk-icon-effect: dim; -} - -#tray > .needs-attention { - -gtk-icon-effect: highlight; - background-color: #eb4d4b; -} - -#idle_inhibitor { - background-color: #2d3436; -} - -#idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; -} - -#mpd { - background-color: #66cc99; - color: #2a5c45; -} - -#mpd.disconnected { - background-color: #f53c3c; -} - -#mpd.stopped { - background-color: #90b1b1; -} - -#mpd.paused { - background-color: #51a37a; -} - -#language { - background: #00b093; - color: #740864; - padding: 0 5px; - margin: 0 5px; - min-width: 16px; -} - -#keyboard-state { - background: #97e1ad; - color: #000000; - 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: rgba(0, 0, 0, 0.2); -} - -#scratchpad.empty { - background-color: transparent; -} - -#privacy { - padding: 0; -} - -#privacy-item { - padding: 0 5px; - color: white; -} - -#privacy-item.screenshare { - background-color: #cf5700; -} - -#privacy-item.audio-in { - background-color: #1ca000; -} - -#privacy-item.audio-out { - background-color: #0069d4; + margin-right: 1rem; + border-radius: 1rem; }