diff --git a/waybar/animations.css b/waybar/animations.css new file mode 100644 index 0000000..d035285 --- /dev/null +++ b/waybar/animations.css @@ -0,0 +1,27 @@ +@keyframes blink { + 0% { + background: @color3; + } + + 100% { + background: @color2; + } +} + +@keyframes pick-attention { + 25% { + background: @color6; + } + + 50% { + background: @color1; + } + + 75% { + background: @color6; + } + + 100% { + background: @color1; + } +} diff --git a/waybar/config.jsonc b/waybar/config.jsonc index 7db2a50..5bb4809 100644 --- a/waybar/config.jsonc +++ b/waybar/config.jsonc @@ -112,12 +112,6 @@ "escape": true }, - "custom/control-center": { - "format": "loading control center...", - "return-type": "json", - "exec": "bash $HOME/.config/waybar/modules/control-center.sh" - }, - "idle_inhibitor": { "format": "{icon}", "format-icons": { diff --git a/waybar/modules.css b/waybar/modules.css new file mode 100644 index 0000000..c7bffcc --- /dev/null +++ b/waybar/modules.css @@ -0,0 +1,140 @@ + +@import "./animations.css"; + +/* Distro Logo */ +#custom-logo { + padding-left: 12px; + padding-right: 18px; + font-size: 15.2px; + transition: 110ms ease-in; + margin-right: 6px; +} + + +/* Workspace Indicator */ +#workspaces { + padding: 4px; +} + +#workspaces button { + background: @color1; + border-radius: 14px; + padding: 0 4px; + margin: 0 2px; +} + +#workspaces button.active { + background: @foreground; + padding-left: 14px; + padding-right: 14px; +} + +#workspaces button.urgent { + animation: pick-attention; + animation-duration: 2s; +} + +#workspace button.special { + background: @color3; +} + +#workspaces button:first-child { + margin-left: 0px; +} + +#workspaces button:last-child { + margin-right: 0px; +} + + +/* Notifications */ +widget #custom-notifications { + font-size: 16px; + padding-left: 10px; + padding-right: 12px; +} + +widget #custom-notifications.cc-open { + background: @color1; +} + + +/* Current Window Widget */ +window.empty #window { + padding: 0; + margin: 0; +} + + +/* Battery */ +#battery.charging, +#battery.plugged { + color: @foreground; + background-color: @color2; +} + +#battery:not(.plugged):not(.charging) { + background-color: shade(@color1, .68); +} + +#battery.critical:not(.charging) { + background-color: @color1; + color: @foreground; + animation-name: blink; + animation-duration: .5s; + animation-timing-function: steps(12); + animation-iteration-count: infinite; + animation-direction: alternate; +} + + +/* Network and Wi-Fi */ +#network.disconnected { + padding-right: 15px; +} + + +/* Bluetooth */ +#bluetooth { + font-size: 14px; + padding: 0 10px; +} + +#bluetooth.connected { + padding-right: 12px; +} + + +/* Pulse Audio */ +#pulseaudio { + padding-left: 8px; + padding-right: 8px; +} + +/* Media Player Info */ +#custom-media { + box-shadow: none; + border: 2px solid @color3; + font-weight: 500; + transition: 200ms ease-in; +} + +#custom-media:hover { + background: @color3; +} + + +/* Sensors */ +#temperature.critical { + background-color: @color1; +} + + +/* App Tray */ +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; +} diff --git a/waybar/modules/control-center.sh b/waybar/modules/control-center.sh deleted file mode 100644 index 7059735..0000000 --- a/waybar/modules/control-center.sh +++ /dev/null @@ -1,9 +0,0 @@ - -# Default return -CONTROL_CENTER_JSON="{ \"text\": \"\", \"bluetooth\": \"$BLUETOOTH_ACTIVE\" }" -$BLUETOOTH_ACTIVE=false - -if [[ $(systemctl is-active bluetooth) =~ "active" ]] -then - $BLUETOOTH_ACTIVE=true -fi diff --git a/waybar/style.css b/waybar/style.css index e8a5f5b..188f8ba 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -1,9 +1,9 @@ @import "../../.cache/wal/colors-waybar.css"; +@import "./modules.css"; * { color: @foreground; - border-radius: 14px; transition: 120ms ease-in; } @@ -23,9 +23,11 @@ window > * > * { padding: 4px; } -/* General */ -.modules-left, .modules-center, .modules-right { +.modules-left, +.modules-center, +.modules-right { background: alpha(@background, .80); + border-radius: 14px; } .module { @@ -34,146 +36,56 @@ window > * > * { margin: 0 1px; } +widget > * { + border-radius: 14px; +} + widget > *:hover:not(#workspaces):not(#tray):not(#custom-media) { background: @color1; } -/***/ -/* Workspaces */ -#workspaces { - padding: 4px; -} - -#workspaces button { - background: @color1; - border-radius: 14px; - padding: 0 4px; - margin: 0 2px; -} - -#workspaces button.active { - background: @foreground; - padding-left: 14px; - padding-right: 14px; -} - -#workspaces button.urgent { - animation: pick-attention; - animation-duration: 2s; -} - -#workspace button.special { - background: @color3; -} - -#workspaces button:first-child { - margin-left: 0px; -} - -#workspaces button:last-child { - margin-right: 0px; -} -/***/ - -#custom-logo { - padding-left: 12px; - padding-right: 18px; - font-size: 15.2px; - transition: 110ms ease-in; - margin-right: 6px; -} - -widget #custom-notifications { - font-size: 16px; - padding-left: 10px; - padding-right: 12px; -} - -widget #custom-notifications.cc-open { - background: @color1; -} - -window#waybar.empty #window { - padding: 0; - margin: 0; -} - -widget #battery.charging, -widget #battery.plugged { - color: @text; - background-color: @background; -} - -widget #battery:not(.plugged):not(.charging) { - background-color: shade(@color1, .68); -} - -#battery.critical:not(.charging) { - background-color: @color1; - color: @foreground; - animation-name: blink; - animation-duration: .5s; - animation-timing-function: steps(12); - animation-iteration-count: infinite; - animation-direction: alternate; -} - -#network.disconnected { - padding-right: 15px; -} - -#bluetooth { - font-size: 14px; - padding: 0 10px; -} - -#bluetooth.connected { - padding-right: 12px; -} - -#custom-media { - box-shadow: none; - border: 2px solid @color3; +widget label { + font-size: .98em; font-weight: 500; - transition: 200ms ease-in; } -#custom-media:hover { - background: @color3; +menu { + background: @background; + border: none; + padding: 2px; } -#temperature.critical { - background-color: @color1; +menu > separator { + padding: 0px; } -#tray > .passive { - -gtk-icon-effect: dim; +menu > * { + border-radius: 2px; } -#tray > .needs-attention { - -gtk-icon-effect: highlight; +menu > *:first-child { + border-top-left-radius: 8px; + border-top-right-radius: 8px; } -@keyframes blink { - to { - color: @color3; - } +menu > *:last-child { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; } -@keyframes pick-attention { - 25% { - background: @color4; - } +menu > *:hover { + background: @color1; +} - 50% { - background: @color1; - } +tooltip { + padding: 3px; + border-radius: 8px; + border-color: @color1; + background: @background; +} - 75% { - background: @color4; - } - - 100% { - background: @color1; - } +tooltip > * { + padding: 0; + font-weight: 500; + font-size: .95em; }