@import '../../.cache/wal/colors-waybar.css'; /* https://github.com/acaibowlz/niri-setup/blob/main/waybar/style.css */ @define-color bg_main rgba(43, 48, 59, 0.5); @define-color content_main @color15; @define-color alternate0 @color2; @define-color alternate1 @color6; @define-color custom_green #26a65b; @define-color custom_red #f53c3c; @define-color idle_inhibitor @bg_main; @define-color idle_inhibitor_activated_color @color7; @define-color pulseaudio_color @alternate0; @define-color network_color @alternate1; @define-color power_profile_balanced_color @alternate0; @define-color cpu_color @alternate1; @define-color memory_color @alternate0; @define-color disk_color @alternate1; @define-color temperature_color @alternate0; @define-color backlight_color @alternate1; @define-color battery_color @alternate0; @define-color clock_color @color3; * { /* `otf-font-awesome` is required to be installed for icons */ font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; font-size: 13px; } window#waybar { background-color: @bg_main; border-bottom: 2px solid rgba(100, 114, 125, 0.5); border-top: 2px solid rgba(100, 114, 125, 0.5); color: @content_main; transition-property: background-color; transition-duration: .5s; } 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 -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; color: @content_main; } #workspaces button.active { background-color: @alternate1; } #workspaces button:hover { background: rgba(0, 0, 0, 0.2); } #workspaces button.focused { background-color: #64727D; box-shadow: inset 0 -3px #ffffff; } #workspaces button.urgent { background-color: #eb4d4b; } #mode { background-color: #64727D; box-shadow: inset 0 -3px #ffffff; } #clock, #battery, #cpu, #memory, #disk, #temperature, #backlight, #network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode, #idle_inhibitor, #scratchpad, #power-profiles-daemon, #mpd { padding: 0 10px; /*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; } .modules-right > widget:nth-child(odd) { background-color: @alternate0; } .modules-right > widget:nth-child(even) { background-color: @alternate1; } #clock { background-color: @clock_color; } #battery { } #battery.charging, #battery.plugged { /*color: #ffffff;*/ background-color: @custom_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: @custom_red; /*color: #ffffff;*/ } #power-profiles-daemon.balanced { /*background-color: @power_profile_balanced_color;*/ /*color: #ffffff;*/ } #power-profiles-daemon.power-saver { background-color: @custom_green; color: @color8; } label:focus { background-color: #000000; } #cpu { } #memory { } #disk { } #backlight { } #network { } #network.disconnected { background-color: #f53c3c; } #pulseaudio:not(muted) { background-color: #90b1b1; /*color: #000000;*/ } #pulseaudio:not(source-muted) { background-color: #90b1b1; /*color: #000000;*/ } #pulseaudio.muted.source-muted { background-color: inherit; } #wireplumber { background-color: #fff0f5; color: #000000; } #wireplumber.muted { background-color: #f53c3c; } #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 { } #temperature.critical { background-color: #eb4d4b; } #tray { background-color: #2980b9; } #tray > .passive { -gtk-icon-effect: dim; } #tray > .needs-attention { -gtk-icon-effect: highlight; background-color: #eb4d4b; } #idle_inhibitor { background-color: @idle_inhibitor_color; } #idle_inhibitor.activated { background-color: @idle_inhibitor_activated_color; color: #2d3436; } #mpd { background-color: #66cc99; color: #2a5c45; } #mpd.disconnected { background-color: #f53c3c; } #mpd.stopped { background-color: #90b1b1; } #mpd.paused { background-color: #51a37a; } #keyboard-state { background: @alternate0; padding: 0 0px; margin: 0 5px; min-width: 16px; } #keyboard-state > label { padding: 0 5px; } #keyboard-state > label.locked { background: rgba(256, 110, 110, 0.9); } #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; } #custom-power { padding: 0px 8px; }