style.css (3793B)
1 * { 2 border: none; 3 border-radius: 4px; 4 /* `otf-font-awesome` is required to be installed for icons */ 5 font-family: Noto Sans, Roboto, Helvetica, Arial, sans-serif; 6 font-size: 18px; 7 min-height: 0; 8 } 9 10 window#waybar { 11 background-color: rgba(43, 48, 59, 0.9); 12 border-radius: 0; 13 color: #ffffff; 14 transition-property: background-color; 15 transition-duration: .5s; 16 } 17 18 window#waybar.hidden { 19 opacity: 0.2; 20 } 21 22 /* 23 window#waybar.empty { 24 background-color: transparent; 25 } 26 window#waybar.solo { 27 background-color: #FFFFFF; 28 } 29 */ 30 31 window#waybar.termite { 32 background-color: #3F3F3F; 33 } 34 35 window#waybar.chromium { 36 background-color: #000000; 37 border: none; 38 } 39 40 #workspaces button { 41 padding: 0 0.4em; 42 border-radius: 0; 43 background-color: transparent; 44 color: #ffffff; 45 /* Use box-shadow instead of border so the text isn't offset */ 46 box-shadow: inset 0 -3px transparent; 47 } 48 49 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ 50 #workspaces button:hover { 51 background: rgba(0, 0, 0, 0.2); 52 box-shadow: inset 0 -3px #ffffff; 53 } 54 55 #workspaces button.focused { 56 background-color: #64727D; 57 box-shadow: inset 0 -3px #ffffff; 58 } 59 60 #workspaces button.urgent { 61 background-color: #eb4d4b; 62 } 63 64 #mode { 65 background-color: #64727D; 66 border-bottom: 3px solid #ffffff; 67 } 68 69 #clock, 70 #custom-clock, 71 #battery, 72 #cpu, 73 #memory, 74 #disk, 75 #temperature, 76 #backlight, 77 #network, 78 #pulseaudio, 79 #custom-media, 80 #tray, 81 #mode, 82 #idle_inhibitor, 83 #mpd { 84 padding: 0 10px; 85 margin: 6px 3px; 86 color: #bfbfbf; 87 } 88 89 #window, 90 #workspaces { 91 margin: 0 4px; 92 } 93 94 /* If workspaces is the leftmost module, omit left margin */ 95 .modules-left > widget:first-child > #workspaces { 96 margin-left: 0; 97 } 98 99 /* If workspaces is the rightmost module, omit right margin */ 100 .modules-right > widget:last-child > #workspaces { 101 margin-right: 0; 102 } 103 104 #clock, #custom-clock { 105 background-color: #2d5986; 106 } 107 108 #battery { 109 background-color: #ffffff; 110 color: #000000; 111 } 112 113 #battery.charging, #battery.plugged { 114 color: #ffffff; 115 background-color: #26A65B; 116 } 117 118 @keyframes blink { 119 to { 120 background-color: #ffffff; 121 color: #000000; 122 } 123 } 124 125 #battery.critical:not(.charging) { 126 background-color: #f53c3c; 127 color: #ffffff; 128 animation-name: blink; 129 animation-duration: 0.5s; 130 animation-timing-function: linear; 131 animation-iteration-count: infinite; 132 animation-direction: alternate; 133 } 134 135 label:focus { 136 background-color: #000000; 137 } 138 139 #cpu { 140 background-color: #2ecc71; 141 color: #000000; 142 } 143 144 #memory { 145 background-color: #9b59b6; 146 } 147 148 #disk { 149 background-color: #964B00; 150 } 151 152 #backlight { 153 background-color: #90b1b1; 154 } 155 156 #network { 157 background-color: #2d5986; 158 } 159 160 #network.disconnected { 161 background-color: #2d5986; 162 } 163 164 #pulseaudio { 165 background-color: #2d5986; 166 } 167 168 #pulseaudio.muted { 169 background-color: #2d5986; 170 color: #2a5c45; 171 } 172 173 #custom-media { 174 background-color: #66cc99; 175 color: #2a5c45; 176 min-width: 100px; 177 } 178 179 #custom-media.custom-spotify { 180 background-color: #66cc99; 181 } 182 183 #custom-media.custom-vlc { 184 background-color: #ffa000; 185 } 186 187 #temperature { 188 background-color: #f0932b; 189 } 190 191 #temperature.critical { 192 background-color: #eb4d4b; 193 } 194 195 #tray { 196 background-color: #2980b9; 197 } 198 199 #idle_inhibitor { 200 background-color: #2d3436; 201 } 202 203 #idle_inhibitor.activated { 204 background-color: #ecf0f1; 205 color: #2d3436; 206 } 207 208 #mpd { 209 background-color: #2d5986; 210 color: #2a5c45; 211 } 212 213 #mpd.disconnected { 214 background-color: #2d5986; 215 } 216 217 #mpd.stopped { 218 background-color: #2d5986; 219 } 220 221 #mpd.paused { 222 background-color: #2d5986; 223 } 224 225 #language { 226 background: #2d5986; 227 color: #bfbfbf; 228 padding: 0 5px; 229 margin: 6px 3px; 230 min-width: 16px; 231 }