From 1610d3a7327b85c504da0b705ba4202595316cfc Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 20 Mar 2024 12:36:49 -0500 Subject: [PATCH] revert to basic styling --- waybar/style.css | 106 +------------------------- waybar/styles/common.css | 16 +++- waybar/styles/modules/clock.css | 8 +- waybar/styles/modules/cpu.css | 4 +- waybar/styles/modules/idle.css | 1 + waybar/styles/modules/memory.css | 4 +- waybar/styles/modules/network.css | 6 +- waybar/styles/modules/spotify.css | 4 + waybar/styles/modules/temperature.css | 6 +- waybar/styles/modules/window.css | 2 - waybar/styles/modules/wireplumber.css | 6 +- waybar/styles/modules/workspaces.css | 10 +++ waybar/styles/waybar.css | 47 ++++++++++-- 13 files changed, 83 insertions(+), 137 deletions(-) create mode 100644 waybar/styles/modules/spotify.css delete mode 100644 waybar/styles/modules/window.css diff --git a/waybar/style.css b/waybar/style.css index 0561e51..c95e194 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -9,6 +9,7 @@ */ @import url('./styles/waybar.css'); @import url('./styles/animations.css'); +@import url('./styles/common.css'); /* * Modules @@ -18,66 +19,12 @@ @import url('./styles/modules/idle.css'); @import url('./styles/modules/memory.css'); @import url('./styles/modules/network.css'); +@import url('./styles/modules/spotify.css'); @import url('./styles/modules/temperature.css'); @import url('./styles/modules/tray.css'); -@import url('./styles/modules/window.css'); @import url('./styles/modules/wireplumber.css'); @import url('./styles/modules/workspaces.css'); -/* -window#waybar.empty { - background-color: transparent; -} -window#waybar.solo { - background-color: #FFFFFF; -} -*/ - -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: 4px; -} - -/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ -button:hover { - background: inherit; - /*box-shadow: inset 0 -1px #5e81ac;*/ -} - - -#clock, -#cpu, -#memory, -#temperature, -#network, -#wireplumber, -#custom-media, -#tray, -#idle_inhibitor, -#scratchpad, -#mpd { - padding: 0 10px; - color: #ddd; -} - -#window, -#workspaces { - margin: 0 4px; -} - -/* If workspaces is the leftmost module, omit left margin */ -.modules-left > widget:first-child > #workspaces { - margin-left: 8px; -} - -/* If workspaces is the rightmost module, omit right margin */ -.modules-right > widget:last-child > #workspaces { - margin-right: 0; -} - @keyframes blink { to { background-color: #ffffff; @@ -85,52 +32,3 @@ button:hover { } } -label:focus { - background-color: #000000; -} - -#mpd { - background-color: #66cc99; - color: #2a5c45; -} - -#mpd.disconnected { - background-color: #f53c3c; -} - -#mpd.stopped { - background-color: #90b1b1; -} - -#mpd.paused { - background-color: #51a37a; -} - -#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; -} diff --git a/waybar/styles/common.css b/waybar/styles/common.css index 7efec79..052029e 100644 --- a/waybar/styles/common.css +++ b/waybar/styles/common.css @@ -1,4 +1,18 @@ -.module-base { + +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; +} + +/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ +button:hover { + background: inherit; + box-shadow: inset 0 -1px #5e81ac; +} + +.module { padding: 0 10px; color: #ddd } diff --git a/waybar/styles/modules/clock.css b/waybar/styles/modules/clock.css index c565877..60ac6fe 100644 --- a/waybar/styles/modules/clock.css +++ b/waybar/styles/modules/clock.css @@ -1,10 +1,4 @@ -@import url('../common.css'); - #clock { - border: solid 1px #5e81ac; - border-radius: 9999px; - padding: 0 10px; - color: #eee; - background: linear-gradient(144deg, #8fbcbb 0%, #5e81ac 100%); + color: white; } diff --git a/waybar/styles/modules/cpu.css b/waybar/styles/modules/cpu.css index 1bad14e..562656e 100644 --- a/waybar/styles/modules/cpu.css +++ b/waybar/styles/modules/cpu.css @@ -1,6 +1,4 @@ #cpu { - padding: 0 10px; - background-color: #2ecc71; - color: #333; + color: white; } diff --git a/waybar/styles/modules/idle.css b/waybar/styles/modules/idle.css index e316fd7..2d35e61 100644 --- a/waybar/styles/modules/idle.css +++ b/waybar/styles/modules/idle.css @@ -1,4 +1,5 @@ #idle_inhibitor { + border-radius: 9999px; background-color: #2d3436; } diff --git a/waybar/styles/modules/memory.css b/waybar/styles/modules/memory.css index e0168a3..d1bce9d 100644 --- a/waybar/styles/modules/memory.css +++ b/waybar/styles/modules/memory.css @@ -1,6 +1,4 @@ #memory { - padding: 0 10px; - color: #ddd; - background-color: #9b59b6; + color: white; } diff --git a/waybar/styles/modules/network.css b/waybar/styles/modules/network.css index d3452ea..bd832bd 100644 --- a/waybar/styles/modules/network.css +++ b/waybar/styles/modules/network.css @@ -1,10 +1,8 @@ #network { - padding: 10px; - color: #ddd; - background-color: #2980b9; + color: #2980b9; } #network.disconnected { - background-color: #f53c3c; + color: #f53c3c; } diff --git a/waybar/styles/modules/spotify.css b/waybar/styles/modules/spotify.css new file mode 100644 index 0000000..c7dd81d --- /dev/null +++ b/waybar/styles/modules/spotify.css @@ -0,0 +1,4 @@ +.custom-spotify { + color: #1DB954; +} + diff --git a/waybar/styles/modules/temperature.css b/waybar/styles/modules/temperature.css index bb1db34..1f2841b 100644 --- a/waybar/styles/modules/temperature.css +++ b/waybar/styles/modules/temperature.css @@ -1,10 +1,8 @@ #temperature { - padding: 0 10px; - color: #ddd; - background-color: #f0932b; + color: #f0932b; } #temperature.critical { - background-color: #eb4d4b; + color: #eb4d4b; } diff --git a/waybar/styles/modules/window.css b/waybar/styles/modules/window.css deleted file mode 100644 index 139597f..0000000 --- a/waybar/styles/modules/window.css +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/waybar/styles/modules/wireplumber.css b/waybar/styles/modules/wireplumber.css index 792c9a9..7b1255b 100644 --- a/waybar/styles/modules/wireplumber.css +++ b/waybar/styles/modules/wireplumber.css @@ -1,10 +1,8 @@ #wireplumber { - background-color: #fff0f5; - padding: 0 10px; - color: #000000; + color: white; } #wireplumber.muted { - background-color: #f53c3c; + color: #f53c3c; } diff --git a/waybar/styles/modules/workspaces.css b/waybar/styles/modules/workspaces.css index b63d242..ac6d617 100644 --- a/waybar/styles/modules/workspaces.css +++ b/waybar/styles/modules/workspaces.css @@ -26,3 +26,13 @@ background-color: #eb4d4b; } +/* If workspaces is the leftmost module, omit left margin */ +.modules-left > widget:first-child > #workspaces { + margin-left: 8px; +} + +/* If workspaces is the rightmost module, omit right margin */ +.modules-right > widget:last-child > #workspaces { + margin-right: 0; +} + diff --git a/waybar/styles/waybar.css b/waybar/styles/waybar.css index efe6b4b..4298687 100644 --- a/waybar/styles/waybar.css +++ b/waybar/styles/waybar.css @@ -1,9 +1,5 @@ window#waybar { - background-color: rgba(43, 48, 59, 0.5); - border-bottom: 2px solid rgba(100, 114, 125, 0.5); - color: #ffffff; - transition-property: background-color; - transition-duration: 0.5s; + background-color: rgba(0, 0, 0, 0.2); } window#waybar.hidden { @@ -19,3 +15,44 @@ window#waybar.chromium { border: none; } +.modules-left { + background-color: rgba(43, 48, 59, 0.5); + border-bottom: 2px solid rgba(100, 114, 125, 0.5); + border-left: 2px solid white; + border-radius: 5px; + color: #ffffff; + padding: 0 2px 0 2px; + transition-property: background-color; + transition-duration: 0.5s; +} + +.moadules-left:first-child { + border-right: none; +} + +.modules-center { + background-color: rgba(43, 48, 59, 0.5); + border-bottom: 2px solid rgba(100, 114, 125, 0.5); + border-radius: 5px; + color: #ffffff; + padding: 0 2px 0 2px; + transition-property: background-color; + transition-duration: 0.5s; + +} + +.modules-right { + background-color: rgba(43, 48, 59, 0.5); + border-bottom: 2px solid rgba(100, 114, 125, 0.5); + border-radius: 5px; + color: #ffffff; + padding: 0 2px 0 2px; + transition-property: background-color; + transition-duration: 0.5s; + +} + +.modules-right:last-child { + border-right: none; +} +