From 4bf33fc5bb62ed382900008f030a229c6ba18cc3 Mon Sep 17 00:00:00 2001 From: Yarne Coppens Date: Thu, 5 Feb 2026 17:49:54 +0100 Subject: [PATCH] Update .config/waybar/config.jsonc Update .config/waybar/modules.jsonc Update .config/waybar/style.css --- private_dot_config/waybar/config.jsonc | 36 ++-- private_dot_config/waybar/modules.jsonc | 10 +- private_dot_config/waybar/style.css | 249 +++--------------------- 3 files changed, 49 insertions(+), 246 deletions(-) diff --git a/private_dot_config/waybar/config.jsonc b/private_dot_config/waybar/config.jsonc index 0d8f0f9..93572c0 100644 --- a/private_dot_config/waybar/config.jsonc +++ b/private_dot_config/waybar/config.jsonc @@ -1,24 +1,12 @@ // -*- mode: jsonc -*- [ { - // "layer": "top", // Waybar at top layer + "layer": "top", // Waybar at top layer // "position": "bottom", // Waybar position (top|bottom|left|right) //"height": 30, // Waybar height (to be removed for auto height) // "width": 1280, // Waybar width "spacing": 4, // Gaps between modules (4px) // Choose the order of the modules - "modules-right": [ - "sway/scratchpad", - "sway/workspaces", - "tray", - "custom/power" - ], - - "modules-center": [ - "mpris", - "cava" - ], - "modules-left": [ "clock", "pulseaudio", @@ -28,18 +16,20 @@ "disk", "privacy" ], + "modules-center": [ + "group/music" + ], + "modules-right": [ + "sway/scratchpad", + "sway/workspaces", + "tray", + "custom/power" + ], + "group/music":{ + "modules":["mpris", "cava"] + }, "include": [ "~/.config/waybar/modules.jsonc" ] } - // { - // "name":"overlay", - // "layer":"bottom", - // "position":"top", - // "passtrough":true, - // "margin-top":-30, - // "width":300, - // "exclusive":false, - // "modules-center":["cava"] - // } ] \ No newline at end of file diff --git a/private_dot_config/waybar/modules.jsonc b/private_dot_config/waybar/modules.jsonc index e73c6e4..5d6d1fb 100644 --- a/private_dot_config/waybar/modules.jsonc +++ b/private_dot_config/waybar/modules.jsonc @@ -175,10 +175,10 @@ }, "pulseaudio": { // "scroll-step": 1, // %, can be a float - "format": "{volume}% {icon}", - "format-bluetooth": "{volume}% {icon}", - "format-bluetooth-muted": " {icon}", - "format-muted": " {format_source}", + "format": "{volume:02d}% {icon}", + "format-bluetooth": "{volume:02d}% {icon}", + "format-bluetooth-muted": " {icon}", + "format-muted": " {format_source}", "format-source": "{volume}% ", "format-source-muted": "", "format-icons": { @@ -230,7 +230,7 @@ "framerate": 144, "autosens": 1, "sensitivity": 2, - "bars": 24, + "bars": 32, "lower_cutoff_freq": 50, "higher_cutoff_freq": 10000, "hide_on_silence": false, diff --git a/private_dot_config/waybar/style.css b/private_dot_config/waybar/style.css index 748515f..c3413b2 100644 --- a/private_dot_config/waybar/style.css +++ b/private_dot_config/waybar/style.css @@ -2,44 +2,23 @@ /* `otf-font-awesome` is required to be installed for icons */ /* font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; */ font-family: JetBrainsMono Nerd Font, FontAwesome; - font-size: 13px; + font-size: 15px; } window#waybar { - background-color: rgba(43, 48, 59, 0.5); + background-color: rgba(59, 43, 43, 0.3); border-bottom: 3px solid rgba(100, 114, 125, 0.5); color: #ffffff; transition-property: background-color; transition-duration: .5s; } -window#waybar.overlay { - background-color: rgba(0, 0, 0, 0); - color: #ffffff; -} - -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 { +label:focus { background-color: #000000; - border: none; } + +/* WORKSPACES */ button { /* Use box-shadow instead of border so the text isn't offset */ box-shadow: inset 0 -3px transparent; @@ -54,11 +33,6 @@ button:hover { box-shadow: inset 0 -3px #ffffff; } -/* you can set a style on hover for any module like this */ -#pulseaudio:hover { - background-color: #a37800; -} - #workspaces button { padding: 0 5px; background-color: transparent; @@ -78,17 +52,15 @@ button:hover { background-color: #eb4d4b; } -#mode { - background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; -} + +/* MODULES */ .modules-left, .modules-center, .modules-right { background: rgba(0, 0, 8, .7); - margin: 5px 10px; + margin: 0px 10px; padding: 0 5px; border-radius: 15px; } @@ -100,160 +72,48 @@ button:hover { } #clock, -#battery, +#pulseaudio, +#bluetooth, #cpu, #memory, #disk, -#temperature, -#backlight, -#network, -#pulseaudio, -#wireplumber, -#custom-media, -#tray, -#mode, -#idle_inhibitor, +#privacy, +#cava, +#mpris, #scratchpad, -#power-profiles-daemon, -#mpd { - padding: 0 10px; +#workspaces, +#tray, +#power +{ 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; -} #clock { - background-color: #64727D; -} - -#battery { - background-color: #ffffff; - color: #000000; -} - -#battery.charging, #battery.plugged { - color: #ffffff; - background-color: #26A65B; -} - -@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; -} - -#backlight { - background-color: #90b1b1; -} - -#network { - background-color: #2980b9; -} - -#network.disconnected { - background-color: #f53c3c; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + background-color: rgba(0, 255, 225, 0.5); } #pulseaudio { - background-color: #f1c40f; - color: #000000; + background-color: rgba(0, 255, 76, 0.5); } #pulseaudio.muted { - background-color: #90b1b1; - color: #2a5c45; + background-color: rgba(255, 0, 55, 0.5); } -#wireplumber { - background-color: #fff0f5; - color: #000000; +#pulseaudio:not(.muted):hover { + background-color: rgba(0, 255, 76, 0.75); } -#wireplumber.muted { - background-color: #f53c3c; +#cpu { } -#custom-media { - background-color: #66cc99; - color: #2a5c45; - min-width: 100px; +#memory { } -#custom-media.custom-spotify { - background-color: #66cc99; -} - -#custom-media.custom-vlc { - background-color: #ffa000; -} - -#temperature { - background-color: #f0932b; -} - -#temperature.critical { - background-color: #eb4d4b; +#disk { } #tray { @@ -269,68 +129,19 @@ label:focus { background-color: #eb4d4b; } -#idle_inhibitor { - background-color: #2d3436; -} - -#idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; +#music{ + margin-top: 10px; } #cava { font-size: 24px; color: rgba(255, 255, 255, 0.15); - z-index: -1; -} - -#mpd { - background-color: #66cc99; - color: #2a5c45; } #mpris { - min-width: 300px; -} - -#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 { @@ -344,6 +155,8 @@ label:focus { #privacy-item { padding: 0 5px; color: white; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; } #privacy-item.screenshare {