From 852070bbd1ff1d611c33cb88892e65d94a257d97 Mon Sep 17 00:00:00 2001 From: zachir Date: Tue, 2 Jan 2024 15:52:49 -0600 Subject: waybar: Fix to use upstream hyprland/workspaces Hyprland/workspaces has been upstreamed, so we're using that now. Also fix the css not showing persistent button status properly while we're at it. --- waybar/style.css | 328 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 328 insertions(+) create mode 100644 waybar/style.css (limited to 'waybar/style.css') diff --git a/waybar/style.css b/waybar/style.css new file mode 100644 index 0000000..88b8900 --- /dev/null +++ b/waybar/style.css @@ -0,0 +1,328 @@ +* { + border: 0px; + margin: 0px; + border-radius: 0px; + /* `otf-font-awesome` is required to be installed for icons */ + font-family: mononoki Nerd Font Mono; + font-size: 18px; + min-height: 0px; + min-width: 0px; +} + +window#waybar { + background-color: transparent; + color: #ffffff; + transition-property: background-color; + transition-duration: .5s; +} + +window#waybar.hidden { + opacity: 0.2; +} + + +/* +#workspaces button { + background: #1f1f1f; + color: #ffffff; + border-radius: 20px; +} +*/ + +/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ + +#workspaces button { + background: #333333; + color: white; + border-bottom: 3px solid #1b1d1c; +} + +#workspaces button.empty { + background: black; + color: white; + border-bottom: 3px solid #1b1d1c; +} + +/* +#workspaces button:hover { + background: #39c1ed; + color: black; + border-bottom: 3px solid #ffffff; + +} +*/ + +#workspaces button.active { + background: #198844; +} + +/* +#workspaces button.active:hover { + background: #39c1ed; + color: black; + border-bottom: 3px solid #ffffff; +} +*/ + +#workspaces button.urgent { + background-color: #eb4d4b; +} + +#mode { + background-color: #64727D; + border-bottom: 3px solid #ffffff; +} + +#clock, +#battery, +#cpu, +#memory, +#disk, +#temperature, +#backlight, +#network, +#pulseaudio, +#custom-media, +#custom-launcher, +#custom-power, +#custom-layout, +#custom-updater, +#custom-snip, +#custom-wallpaper, +#tags, +#taskbar, +#tray, +#mode, +#idle_inhibitor, +#mpd { + padding: 0px 9px; + margin: 0px; + color: #ffffff; +} + +#window, +#workspaces { + margin: 0px 4px; +} + +/* If workspaces is the leftmost module, omit left margin */ +.modules-left > widget:first-child > #workspaces { + margin-left: 0px; +} + +/* If workspaces is the rightmost module, omit right margin */ +.modules-right > widget:last-child > #workspaces { + margin-right: 0px; +} + +#clock { + background-color: #1b1d1c; + color: #ffffff; +} + +#battery { + background-color: #1b1d1c; + color: #ffffff; +} + +#battery.charging, #battery.plugged { + color: #26A65B; + background-color: #1b1d1c; +} + +@keyframes blink { + to { + background-color: #ffffff; + color: #000000; + } +} + +#battery.critical:not(.charging) { + background-color: #f53c3c; + color: #ffffff; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: #000000; +} + +#cpu { + background-color: #1b1d1c; + color: #ffffff; +} + +#memory { + background-color: #198844; + color: #ffffff; +} + +#disk { + background-color: #1b1d1c; + color: #ffffff; +} + +#backlight { + background-color: #198844; + color: #ffffff; +} + +#network { + background-color: #198844; + color: #ffffff; +} + +#network.disconnected { + background-color: #1b1d1c; + color: #ffffff; +} + +#pulseaudio { + background-color: #198844; + color: #ffffff; +} + +#pulseaudio.muted { + background-color: #1b1d1c; + color: #198844; +} + +#custom-media { + background-color: #1b1d1c; + color: white; +} + +#custom-media.custom-spotify { + background-color: #1b1d1c; + color: white; + +} + +#custom-media.custom-vlc { + background-color: #1b1d1c; + color: white; +} + +#custom-power{ + background-color: #1b1d1c; + font-size: 18px; + margin-right: 5px; + +} + +#custom-launcher{ + background-color: #1b1d1c; + font-size: 20px; + margin-left: 5px; + +} + +#custom-layout{ + background-color: #1b1d1c; + color: white; + font-size:20px; +} + +#custom-updater { + background-color: #1b1d1c; + color: white; +} + +#custom-snip { + background-color: #1b1d1c; + color: skyblue; + font-size: 20px; +} + +#custom-wallpaper { + background-color: #1b1d1c; + color: pink; + font-size: 20px; +} + +#tags{ + background-color: #1b1d1c; + font-size: 20px; +} + +#tags button.occupied { + color: skyblue; + background-color: #272727; +} +#tags button.focused { + color: black; + background-color: white; +} +#tags button.urgent{ + color: red; + background-color:white; +} + + +#taskbar{ + background-color: #1b1d1c; + border-radius: 0px 20px 20px 0px; +} + +#temperature { + background-color: #1b1d1c; + color: #ffffff; +} + +#temperature.critical { + background-color: #eb4d4b; +} + +#tray { + background-color: #198844; + color: #ffffff; +} + +#tray > .passive { + -gtk-icon-effect: dim; + background-color: #198844; + color: #ffffff; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; + background-color: #198844; + color: #ffffff; +} + +#idle_inhibitor { + background-color: #1b1d1c; + border-radius: 20px 0px 0px 20px; + +} + +#idle_inhibitor.activated { + background-color: #198844; + color: #ffffff; + border-radius: 20px 0px 0px 20px; + +} + +#language { + background-color: #1b1d1c; + color: #ffffff; + min-width: 16px; +} + +#keyboard-state { + background: #97e1ad; + color: #000000; + min-width: 16px; +} + +#keyboard-state > label { + padding: 0px 5px; +} + +#keyboard-state > label.locked { + background: rgba(0, 0, 0, 0.2); +} -- cgit v1.2.3