wanderer/dotfiles
2
2
Fork 0
Code Issues 1 Pull Requests Releases Activity

waybar: use dracula-esque colours, FiraCode Retina

Browse Source 
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 changed files with 57 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
.config/waybar/style.css
View File

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