diff options
Diffstat (limited to '.config/waybar/style.css')
| -rw-r--r-- | .config/waybar/style.css | 293 | 
1 files changed, 293 insertions, 0 deletions
diff --git a/.config/waybar/style.css b/.config/waybar/style.css new file mode 100644 index 0000000..7db875f --- /dev/null +++ b/.config/waybar/style.css  | |||
| @@ -0,0 +1,293 @@ | |||
| 1 | @import "latte.css"; | ||
| 2 | |||
| 3 | * { | ||
| 4 | border: none; | ||
| 5 | border-radius: 0; | ||
| 6 | font-family: FontAwesome, scientifica; | ||
| 7 | font-size: 14px; | ||
| 8 | min-height: 0; | ||
| 9 | box-shadow: none; | ||
| 10 | text-shadow: none; | ||
| 11 | transition-duration: 0s; | ||
| 12 | color: @text; | ||
| 13 | } | ||
| 14 | |||
| 15 | window#waybar { | ||
| 16 | background-color: @base; | ||
| 17 | } | ||
| 18 | |||
| 19 | window#waybar.hidden { | ||
| 20 | opacity: 0.2; | ||
| 21 | } | ||
| 22 | |||
| 23 | button { | ||
| 24 | /* Use box-shadow instead of border so the text isn't offset */ | ||
| 25 | box-shadow: inset 0 -3px transparent; | ||
| 26 | /* Avoid rounded borders under each button name */ | ||
| 27 | border: none; | ||
| 28 | border-radius: 0; | ||
| 29 | } | ||
| 30 | |||
| 31 | /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ | ||
| 32 | button:hover { | ||
| 33 | background: inherit; | ||
| 34 | box-shadow: inset 0 -3px @overlay0; | ||
| 35 | } | ||
| 36 | |||
| 37 | #workspaces button { | ||
| 38 | padding: 0 5px; | ||
| 39 | background-color: transparent; | ||
| 40 | } | ||
| 41 | |||
| 42 | #workspaces button:hover { | ||
| 43 | background: rgba(0, 0, 0, 0.2); | ||
| 44 | } | ||
| 45 | |||
| 46 | #workspaces button.focused { | ||
| 47 | background-color: @blue; | ||
| 48 | box-shadow: inset 0 -3px #ffffff; | ||
| 49 | } | ||
| 50 | |||
| 51 | #workspaces button.urgent { | ||
| 52 | background-color: #d20f39; | ||
| 53 | } | ||
| 54 | |||
| 55 | #workspaces button.active { | ||
| 56 | background-color: #a6e3a1; | ||
| 57 | } | ||
| 58 | |||
| 59 | #mode { | ||
| 60 | background-color: #64727D; | ||
| 61 | box-shadow: inset 0 -3px #ffffff; | ||
| 62 | } | ||
| 63 | |||
| 64 | #clock, | ||
| 65 | #battery, | ||
| 66 | #cpu, | ||
| 67 | #memory, | ||
| 68 | #disk, | ||
| 69 | #temperature, | ||
| 70 | #backlight, | ||
| 71 | #network, | ||
| 72 | #pulseaudio, | ||
| 73 | #wireplumber, | ||
| 74 | #custom-media, | ||
| 75 | #tray, | ||
| 76 | #mode, | ||
| 77 | #idle_inhibitor, | ||
| 78 | #scratchpad, | ||
| 79 | #mpris, | ||
| 80 | #mpd { | ||
| 81 | padding: 0 10px; | ||
| 82 | } | ||
| 83 | |||
| 84 | #window, | ||
| 85 | #workspaces { | ||
| 86 | margin: 0 4px; | ||
| 87 | } | ||
| 88 | |||
| 89 | /* If workspaces is the leftmost module, omit left margin */ | ||
| 90 | .modules-left > widget:first-child > #workspaces { | ||
| 91 | margin-left: 0; | ||
| 92 | } | ||
| 93 | |||
| 94 | /* If workspaces is the rightmost module, omit right margin */ | ||
| 95 | .modules-right > widget:last-child > #workspaces { | ||
| 96 | margin-right: 0; | ||
| 97 | } | ||
| 98 | |||
| 99 | tooltip * { | ||
| 100 | background: transparent; | ||
| 101 | } | ||
| 102 | |||
| 103 | tooltip.background { | ||
| 104 | background: @crust; | ||
| 105 | |||
| 106 | } | ||
| 107 | |||
| 108 | #battery { | ||
| 109 | background-color: #ffffff; | ||
| 110 | } | ||
| 111 | |||
| 112 | #battery.charging, #battery.plugged { | ||
| 113 | background-color: #26A65B; | ||
| 114 | } | ||
| 115 | |||
| 116 | @keyframes blink { | ||
| 117 | to { | ||
| 118 | background-color: #ffffff; | ||
| 119 | color: #000000; | ||
| 120 | } | ||
| 121 | } | ||
| 122 | |||
| 123 | /* Using steps() instead of linear as a timing function to limit cpu usage */ | ||
| 124 | #battery.critical:not(.charging) { | ||
| 125 | background-color: #f53c3c; | ||
| 126 | color: #ffffff; | ||
| 127 | animation-name: blink; | ||
| 128 | animation-duration: 0.5s; | ||
| 129 | animation-timing-function: steps(12); | ||
| 130 | animation-iteration-count: infinite; | ||
| 131 | animation-direction: alternate; | ||
| 132 | } | ||
| 133 | |||
| 134 | label:focus { | ||
| 135 | background-color: #000000; | ||
| 136 | } | ||
| 137 | |||
| 138 | #cpu { | ||
| 139 | background-color: #2ecc71; | ||
| 140 | } | ||
| 141 | |||
| 142 | #memory { | ||
| 143 | background-color: #9b59b6; | ||
| 144 | } | ||
| 145 | |||
| 146 | #disk { | ||
| 147 | background-color: #964B00; | ||
| 148 | } | ||
| 149 | |||
| 150 | #backlight { | ||
| 151 | background-color: #90b1b1; | ||
| 152 | } | ||
| 153 | |||
| 154 | #network { | ||
| 155 | background-color: #2980b9; | ||
| 156 | } | ||
| 157 | |||
| 158 | #network.disconnected { | ||
| 159 | background-color: #f53c3c; | ||
| 160 | } | ||
| 161 | |||
| 162 | #pulseaudio { | ||
| 163 | background-color: #f1c40f; | ||
| 164 | } | ||
| 165 | |||
| 166 | #pulseaudio.muted { | ||
| 167 | background-color: #90b1b1; | ||
| 168 | } | ||
| 169 | |||
| 170 | #wireplumber { | ||
| 171 | background-color: #fff0f5; | ||
| 172 | } | ||
| 173 | |||
| 174 | #wireplumber.muted { | ||
| 175 | background-color: #f53c3c; | ||
| 176 | } | ||
| 177 | |||
| 178 | #custom-media { | ||
| 179 | background-color: #66cc99; | ||
| 180 | min-width: 100px; | ||
| 181 | } | ||
| 182 | |||
| 183 | #custom-media.custom-spotify { | ||
| 184 | background-color: #66cc99; | ||
| 185 | } | ||
| 186 | |||
| 187 | #custom-media.custom-vlc { | ||
| 188 | background-color: #ffa000; | ||
| 189 | } | ||
| 190 | |||
| 191 | #temperature { | ||
| 192 | background-color: #f0932b; | ||
| 193 | } | ||
| 194 | |||
| 195 | #temperature.critical { | ||
| 196 | background-color: #eb4d4b; | ||
| 197 | } | ||
| 198 | |||
| 199 | #tray { | ||
| 200 | background-color: @sapphire; | ||
| 201 | } | ||
| 202 | |||
| 203 | #tray > .passive { | ||
| 204 | -gtk-icon-effect: dim; | ||
| 205 | } | ||
| 206 | |||
| 207 | #tray > .needs-attention { | ||
| 208 | -gtk-icon-effect: highlight; | ||
| 209 | background-color: @red; | ||
| 210 | } | ||
| 211 | |||
| 212 | #tray menu { | ||
| 213 | background-color: @mantle; | ||
| 214 | color: @text; | ||
| 215 | } | ||
| 216 | |||
| 217 | #idle_inhibitor { | ||
| 218 | background-color: #2d3436; | ||
| 219 | } | ||
| 220 | |||
| 221 | #idle_inhibitor.activated { | ||
| 222 | background-color: #ecf0f1; | ||
| 223 | } | ||
| 224 | |||
| 225 | #mpd { | ||
| 226 | background-color: #66cc99; | ||
| 227 | } | ||
| 228 | |||
| 229 | #mpd.disconnected { | ||
| 230 | background-color: #f53c3c; | ||
| 231 | } | ||
| 232 | |||
| 233 | #mpd.stopped { | ||
| 234 | background-color: #90b1b1; | ||
| 235 | } | ||
| 236 | |||
| 237 | #mpd.paused { | ||
| 238 | background-color: #51a37a; | ||
| 239 | } | ||
| 240 | |||
| 241 | #language { | ||
| 242 | background: #00b093; | ||
| 243 | padding: 0 5px; | ||
| 244 | margin: 0 5px; | ||
| 245 | min-width: 16px; | ||
| 246 | } | ||
| 247 | |||
| 248 | #keyboard-state { | ||
| 249 | background: #97e1ad; | ||
| 250 | padding: 0 0px; | ||
| 251 | margin: 0 5px; | ||
| 252 | min-width: 16px; | ||
| 253 | } | ||
| 254 | |||
| 255 | #keyboard-state > label { | ||
| 256 | padding: 0 5px; | ||
| 257 | } | ||
| 258 | |||
| 259 | #keyboard-state > label.locked { | ||
| 260 | background: rgba(0, 0, 0, 0.2); | ||
| 261 | } | ||
| 262 | |||
| 263 | #scratchpad { | ||
| 264 | background: rgba(0, 0, 0, 0.2); | ||
| 265 | } | ||
| 266 | |||
| 267 | #scratchpad.empty { | ||
| 268 | background-color: transparent; | ||
| 269 | } | ||
| 270 | |||
| 271 | #privacy { | ||
| 272 | padding: 0; | ||
| 273 | } | ||
| 274 | |||
| 275 | #privacy-item { | ||
| 276 | padding: 0 5px; | ||
| 277 | } | ||
| 278 | |||
| 279 | #privacy-item.screenshare { | ||
| 280 | background-color: #cf5700; | ||
| 281 | } | ||
| 282 | |||
| 283 | #privacy-item.audio-in { | ||
| 284 | background-color: #1ca000; | ||
| 285 | } | ||
| 286 | |||
| 287 | #privacy-item.audio-out { | ||
| 288 | background-color: #0069d4; | ||
| 289 | } | ||
| 290 | |||
| 291 | #mpris { | ||
| 292 | background-color: #74c7ec; | ||
| 293 | } | ||
