style.css
1 * { 2 font-family: "JetBrainsMono Nerd Font", Roboto, Helvetica, Arial, sans-serif; 3 font-size: 17px; 4 } 5 6 7 window#waybar { 8 background-color: rgba(0, 0, 0, 0); 9 border-radius: 13px; 10 transition-property: background-color; 11 transition-duration: 0.5s; 12 } 13 14 button { 15 /* Use box-shadow instead of border so the text isn't offset */ 16 box-shadow: inset 0 -3px transparent; 17 /* Avoid rounded borders under each button name */ 18 border: none; 19 border-radius: 0; 20 } 21 22 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ 23 button:hover { 24 background: inherit; 25 box-shadow: inset 0 -3px #333C43; 26 } 27 28 #workspaces button { 29 padding: 0 5px; 30 background-color: transparent; 31 color: #A7C080; 32 border-radius: 8px; 33 } 34 35 #workspaces button:hover { 36 background: rgba(0, 0, 0, 0.2); 37 border-radius: 0px; 38 } 39 40 #workspaces button.focused { 41 background-color: #333C43; 42 box-shadow: inset 0 -3px #A7C080; 43 border-top-left-radius: 15px; 44 border-bottom-left-radius: 0px; 45 border-top-right-radius: 15px; 46 border-bottom-right-radius: 0px; 47 } 48 49 #workspaces button.urgent { 50 color : #E67E80; 51 border-radius: 0px; 52 } 53 54 #mode { 55 background-color: #64727d; 56 box-shadow: inset 0 -3px #ffffff; 57 } 58 59 #clock { 60 background-color: #333C43; 61 padding: 0 8px; 62 color: #A7C080; 63 border: 10px; 64 border-radius: 8px; 65 } 66 67 #custom-powermenu{ 68 padding: 0 18px 0 8px; 69 color: #E67E80; 70 border: 10px; 71 margin-right: 15px; 72 background-color: #333C43; 73 border-top-left-radius: 0px; 74 border-bottom-left-radius: 0px; 75 border-top-right-radius: 15px; 76 border-bottom-right-radius: 15px; 77 } 78 79 #custom-drun { 80 padding: 0 6px; 81 color: #E69875; 82 border: 10px; 83 background-color: #333C43; 84 } 85 86 #custom-virtualkeyboard { 87 padding: 0 6px 0 7px; 88 color: #7FBBB3; 89 border: 10px; 90 background-color: #333C43; 91 } 92 93 #custom-tablet { 94 padding: 0 6px; 95 color: #DBBC7F; 96 border: 10px; 97 background-color: #333C43; 98 } 99 100 #custom-toggle-overview { 101 padding: 0 6px 0 8px; 102 color: #A7C080; 103 border: 10px; 104 background-color: #333C43; 105 } 106 107 #custom-vpn { 108 padding: 0 6px 0 8px; 109 color: #D699B6; 110 border: 10px; 111 background-color: #333C43; 112 } 113 114 #cpu { 115 padding: 0 6px; 116 color: #A7C080; 117 border: 10px; 118 background-color: #333C43; 119 } 120 121 #temperature { 122 padding: 0 8px; 123 color: #E67E80; 124 border: 10px; 125 background-color: #333C43; 126 } 127 128 #memory { 129 padding: 0 8px 0 18px; 130 color: #E69875; 131 border: 10px; 132 background-color: #333C43; 133 border-top-left-radius: 15px; 134 border-bottom-left-radius: 15px; 135 border-top-right-radius: 0px; 136 border-bottom-right-radius: 0px; 137 } 138 139 #network { 140 padding: 0 6px; 141 color: #D699B6; 142 border: 10px; 143 background-color: #333C43; 144 } 145 146 #disk { 147 padding: 0 8px; 148 color: #DBBC7F; 149 background-color: #333C43; 150 } 151 152 #battery { 153 padding: 0 8px; 154 color: #83C092; 155 background-color: #333C43; 156 } 157 158 #pulseaudio { 159 padding: 0 12px 0 18px; 160 color: #D699B6; 161 border: 10px; 162 background-color: #333C43; 163 border-top-left-radius: 15px; 164 border-bottom-left-radius: 15px; 165 border-top-right-radius: 0px; 166 border-bottom-right-radius: 0px; 167 } 168 169 #backlight { 170 padding: 0 12px 0 0px; 171 color: #E69875; 172 border: 10px; 173 background-color: #333C43; 174 border-top-left-radius: 0px; 175 border-bottom-left-radius: 0px; 176 border-top-right-radius: 0px; 177 border-bottom-right-radius: 0px; 178 } 179 180 #backlight-slider, 181 #pulseaudio-slider { 182 background-color: #333C43; 183 padding-left: 0px; 184 } 185 186 #pulseaudio-slider slider { 187 min-height: 0px; 188 min-width: 0px; 189 opacity: 0; 190 background-image: none; 191 border: none; 192 box-shadow: none; 193 color: #D699B6; 194 outline: none; 195 } 196 197 #pulseaudio-slider trough { 198 margin-top: -3px; 199 min-width: 60px; 200 min-height: 6px; 201 margin-bottom: -4px; 202 border-radius: 4px; 203 background: #333C43; 204 outline: none; 205 border: 1px solid #D699B6; 206 border-radius: 4px; 207 } 208 209 #pulseaudio-slider highlight { 210 min-width: 0px; 211 border-radius: 4px; 212 border: 0px; 213 background-color: #D699B6; 214 } 215 216 #backlight-slider{ 217 border-top-left-radius: 0px; 218 border-bottom-left-radius: 0px; 219 border-top-right-radius: 15px; 220 border-bottom-right-radius: 15px; 221 } 222 223 #backlight-slider slider { 224 min-height: 0px; 225 min-width: 0px; 226 opacity: 0; 227 background-image: none; 228 border: none; 229 box-shadow: none; 230 color: #E69875; 231 outline: none; 232 } 233 234 #backlight-slider trough { 235 margin-top: -3px; 236 min-width: 60px; 237 min-height: 6px; 238 margin-bottom: -4px; 239 border-radius: 4px; 240 background: #434F55; 241 outline: none; 242 border: 1px solid #E69875; 243 border-radius: 4px; 244 } 245 246 #backlight-slider highlight { 247 min-width: 0px; 248 border-radius: 4px; 249 border: 0px; 250 background-color: #E69875; 251 } 252 253 .modules-left { 254 background-color: #333C43; 255 border-radius: 15px; 256 padding: 0 10px; 257 } 258 259 .modules-center { 260 background-color: #333C43; 261 border-radius: 15px; 262 padding: 0 10px; 263 margin-left: 4px; 264 } 265 266 #battery.charging, 267 #battery.plugged { 268 color: #83C092; 269 } 270 271 @keyframes blink { 272 to { 273 color: #000000; 274 } 275 } 276 277 /* Using steps() instead of linear as a timing function to limit cpu usage */ 278 #battery.critical:not(.charging) { 279 background-color: #333C43; 280 color: #E67E80; 281 animation-name: blink; 282 animation-duration: 1.5s; 283 animation-timing-function: steps(12); 284 animation-iteration-count: infinite; 285 animation-direction: alternate; 286 } 287 288 label:focus { 289 background-color: #000000; 290 }