waybar: use dracula-esque colours, FiraCode Retina

also adjust margin sizes, font sizes and weight
This commit is contained in:
surtur 2022-03-26 15:45:41 +01:00
parent e2673e07f0
commit 4619c0b8b3
Signed by: wanderer
GPG Key ID: 19CE1EC1D9E0486D

@ -1,8 +1,8 @@
* {
border: none;
border-radius: 0;
font-family: DejaVu Sans;
font-size: 13px;
font-size: 14px;
font-weight: 400;
box-shadow: none;
text-shadow: none;
transition-duration: 0s;
@ -10,35 +10,42 @@
/* The whole bar */
#waybar {
background: #323232;
background: #282a36;
color: white;
font-family: Cantarell, Noto Sans, sans-serif;
font-family: FiraCode Retina, Noto Sans, sans-serif;
font-weight: 600;
font-size: 13px;
}
window {
color: rgba(217, 216, 216, 1);
#window {
border-top: 3px solid transparent;
padding: 0 2px;
background: rgba(35, 31, 32, 0.00);
color: #bd93f9;
font-weight: 700;
}
window#waybar.solo {
color: rgba(217, 216, 216, 1);
/* color: rgba(217, 216, 216, 1); */
}
#mode {
border-top: 3px solid transparent;
padding: 1px 2px;
background: #791455;
padding: .1em .2em;
/* padding: .1em .2em; */
}
#workspaces {
margin: 0 0px;
margin: 0;
padding: 0;
}
#workspaces button {
border-top: 2px solid transparent;
/* To compensate for the top border and still have vertical centering */
/* padding: .1em .1em; */
padding: 0;
border-top: 2px solid transparent;
padding: 0 2px;
color: #888888;
}
@ -47,9 +54,10 @@ window#waybar.solo {
}
#workspaces button.focused {
border-color: #4c7899;
border-top: 2px solid #bd93f9;
color: white;
background-color: #285577;
background-color: #6262a4;
font-weight: 700;
}
#workspaces button.urgent {
@ -57,18 +65,17 @@ window#waybar.solo {
color: #c9545d;
}
#mode, #battery, #cpu, #memory, #network, #pulseaudio, #backlight, #custom-storage, #custom-spotify, #custom-weather, #custom-mail {
#mode, #battery, #cpu, #memory, #pulseaudio, #backlight, #custom-storage, #custom-spotify, #custom-weather, #custom-mail {
margin: 0px 5px 0px 5px;
/* min-width: 25px; */
min-width: 30px;
}
#language {
margin: 0px 5px;
min-width: 18px;
min-width: 30px;
}
#clock.date {
margin: 0px 0px 0px 10px;
margin: 0px 0px 0px 5px;
}
#clock.time {
margin: 0px 10px 0px 0px
@ -79,25 +86,42 @@ window#waybar.solo {
color: white;
}
}
@keyframes blink-w-cr {
to {
color: pink;
}
}
#battery.warning {
color: rgba(255, 210, 4, 1);
color: #ffbf00;
background-color: #282a36;
font-weight: bold;
animation: blink-w-cr 2s linear infinite alternate;
}
#battery.critical {
color: rgba(238, 46, 36, 1);
animation: blink .7s linear infinite alternate;
background-color: #282a36;
font-weight: bold;
animation: blink-w-cr .9s linear infinite alternate;
}
#battery.charging {
color: rgba(59, 176, 216, 1);
background-color: #282a36;
font-weight: bold;
animation: blink 1s linear infinite alternate;
animation: blink 2s linear infinite alternate;
}
#network {
/* min-width: 10px; */
margin: 0px 2px 0px 5px;
}
#network.disconnected {
color: red;
background-color: #282a36;
}
#network.wireguard {
margin: 0 3px 0 0;
margin: 0 3px;
min-width: 0;
}
@ -107,24 +131,26 @@ window#waybar.solo {
}
#custom-storage.warning {
color: rgba(255, 210, 4, 1);
color: #ffbf00;
background-color: #282a36;
}
#custom-storage.critical {
color: rgba(238, 46, 36, 1);
background-color: #282a36;
}
#custom-storage {
margin: 0 0 0 10px;
margin: 0 0 0 7px;
}
#memory {
margin: 0 5px;
}
#memory.warning {
color: #ffbf00;
background-color: #323232;
background-color: #282a36;
}
#memory.critical {
color: rgba(238, 46, 36, 1);
background-color: #323232;
background-color: #282a36;
}
#cpu {
/* color: #6c71c4; */
@ -132,18 +158,19 @@ window#waybar.solo {
}
#cpu.warning {
color: #99c1f1;
background-color: #323232;
background-color: #282a36;
}
#cpu.critical {
color: rgba(238, 46, 36, 1);
background-color: #323232;
background-color: #282a36;
}
#tray {
margin: 0 5px 0 10px;
margin: 0 5px;
min-width: 30px;
}
#pulseaudio {
margin: 0 5px 0 5px;
margin: 0 2px;
}