Style waybar
This commit is contained in:
parent
577f998d72
commit
d701f79c11
1 changed files with 58 additions and 104 deletions
|
|
@ -1,3 +1,21 @@
|
|||
@define-color base03 #002b36;
|
||||
@define-color base02 #073642;
|
||||
@define-color base01 #586e75;
|
||||
@define-color base00 #657b83;
|
||||
@define-color base0 #839496;
|
||||
@define-color base1 #93a1a1;
|
||||
@define-color base2 #eee8d5;
|
||||
@define-color base3 #fdf6e3;
|
||||
@define-color yellow #b58900;
|
||||
@define-color orange #cb4b16;
|
||||
@define-color red #dc322f;
|
||||
@define-color magenta #d33682;
|
||||
@define-color violet #6c71c4;
|
||||
@define-color blue #268bd2;
|
||||
@define-color cyan #2aa198;
|
||||
@define-color green #859900;
|
||||
|
||||
|
||||
* {
|
||||
/* `otf-font-awesome` is required to be installed for icons */
|
||||
font-family: JetBrainsMono, FontAwesome, Roboto, Helvetica, Arial, sans-serif;
|
||||
|
|
@ -6,8 +24,8 @@
|
|||
}
|
||||
|
||||
window#waybar {
|
||||
background-color: rgba(43, 48, 59, 0.3);
|
||||
border-bottom: 3px solid rgba(100, 114, 125, 0.5);
|
||||
background-color: rgba(0, 43, 54, 0.3);
|
||||
border-bottom: 3px solid rgba(101, 123, 131, 0.5);
|
||||
color: #ffffff;
|
||||
transition-property: background-color;
|
||||
transition-duration: .5s;
|
||||
|
|
@ -55,11 +73,6 @@ button:hover {
|
|||
box-shadow: inset 0 -3px #ffffff;
|
||||
}
|
||||
|
||||
/* you can set a style on hover for any module like this */
|
||||
#pulseaudio:hover {
|
||||
background-color: #a37800;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
padding: 0 5px;
|
||||
background-color: transparent;
|
||||
|
|
@ -71,17 +84,17 @@ button:hover {
|
|||
}
|
||||
|
||||
#workspaces button.focused {
|
||||
background-color: #64727D;
|
||||
background-color: @base02;
|
||||
box-shadow: inset 0 -3px #ffffff;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
background-color: #eb4d4b;
|
||||
background-color: @orange;
|
||||
}
|
||||
|
||||
#mode {
|
||||
background-color: #64727D;
|
||||
box-shadow: inset 0 -3px #ffffff;
|
||||
background-color: @violet;
|
||||
box-shadow: inset 0 -3px @base03;
|
||||
}
|
||||
|
||||
#clock,
|
||||
|
|
@ -99,18 +112,19 @@ button:hover {
|
|||
#mode,
|
||||
#idle_inhibitor,
|
||||
#scratchpad,
|
||||
#power-profiles-daemon,
|
||||
#custom-power,
|
||||
#mpd {
|
||||
#language
|
||||
{
|
||||
padding: 0 10px;
|
||||
color: #ffffff;
|
||||
background-color: @base03;
|
||||
color: @base1;
|
||||
}
|
||||
|
||||
#window,
|
||||
#workspaces {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
halestorm darkness always wins
|
||||
.modules-right *, .modules-left * {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -119,7 +133,7 @@ button:hover {
|
|||
.modules-left > widget:first-child > #workspaces {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
halestorm darkness always wins
|
||||
/* If workspaces is the rightmost module, omit right margin */
|
||||
.modules-right > widget:last-child > #workspaces {
|
||||
margin-right: 0;
|
||||
|
|
@ -133,31 +147,32 @@ button:hover {
|
|||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
|
||||
#clock {
|
||||
background-color: #64727D;
|
||||
border-bottom: 3px solid @violet;
|
||||
}
|
||||
|
||||
#battery {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
#backlight {
|
||||
border-bottom: 3px solid @violet;
|
||||
}
|
||||
|
||||
#battery.charging, #battery.plugged {
|
||||
color: #ffffff;
|
||||
background-color: #26A65B;
|
||||
border-bottom: 3px solid @green;
|
||||
}
|
||||
|
||||
#battery {
|
||||
border-bottom: 3px solid @blue;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
to {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
border-bottom: 3px solid @red;
|
||||
}
|
||||
}
|
||||
|
||||
/* Using steps() instead of linear as a timing function to limit cpu usage */
|
||||
#battery.critical:not(.charging) {
|
||||
background-color: #f53c3c;
|
||||
color: #ffffff;
|
||||
border-bottom: 3px solid @base03;
|
||||
animation-name: blink;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: steps(12);
|
||||
|
|
@ -165,102 +180,60 @@ button:hover {
|
|||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
#power-profiles-daemon {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#power-profiles-daemon.performance {
|
||||
background-color: #f53c3c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#power-profiles-daemon.balanced {
|
||||
background-color: #2980b9;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#power-profiles-daemon.power-saver {
|
||||
background-color: #2ecc71;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
label:focus {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
#cpu {
|
||||
background-color: #2ecc71;
|
||||
color: #000000;
|
||||
border-bottom: 3px solid @cyan;
|
||||
}
|
||||
|
||||
#memory {
|
||||
background-color: #9b59b6;
|
||||
border-bottom: 3px solid @magenta;
|
||||
}
|
||||
|
||||
#disk {
|
||||
background-color: #964B00;
|
||||
}
|
||||
|
||||
#backlight {
|
||||
background-color: #90b1b1;
|
||||
border-bottom: 3px solid @orange;
|
||||
}
|
||||
|
||||
#network {
|
||||
background-color: #2980b9;
|
||||
border-bottom: 3px solid @blue;
|
||||
}
|
||||
|
||||
#network.disconnected {
|
||||
background-color: #f53c3c;
|
||||
border-bottom: 3px solid @orange;
|
||||
}
|
||||
|
||||
#pulseaudio {
|
||||
background-color: #f1c40f;
|
||||
color: #000000;
|
||||
border-bottom: 3px solid @yellow;
|
||||
}
|
||||
|
||||
#pulseaudio.muted {
|
||||
background-color: #90b1b1;
|
||||
color: #2a5c45;
|
||||
}
|
||||
|
||||
#wireplumber {
|
||||
background-color: #fff0f5;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#wireplumber.muted {
|
||||
background-color: #f53c3c;
|
||||
border-bottom: 3px solid @orange;
|
||||
}
|
||||
|
||||
#custom-media {
|
||||
background-color: #66cc99;
|
||||
color: #2a5c45;
|
||||
min-width: 100px;
|
||||
border-bottom: 3px solid @cyan;
|
||||
}
|
||||
|
||||
#custom-media.custom-spotify {
|
||||
background-color: #66cc99;
|
||||
}
|
||||
|
||||
#custom-media.custom-vlc {
|
||||
background-color: #ffa000;
|
||||
#custom-media.custom-firefox {
|
||||
border-bottom: 3px solid @orange;
|
||||
}
|
||||
|
||||
#custom-power {
|
||||
background-color: #2d3436;
|
||||
border-bottom: 3px solid @base01;
|
||||
}
|
||||
|
||||
#temperature {
|
||||
background-color: #f0932b;
|
||||
border-bottom: 3px solid @yellow;
|
||||
}
|
||||
|
||||
#temperature.critical {
|
||||
background-color: #eb4d4b;
|
||||
border-bottom: 3px solid @orange;
|
||||
}
|
||||
|
||||
#tray {
|
||||
background-color: #2980b9;
|
||||
padding: 0 10px;
|
||||
border-bottom: 3px solid @green;
|
||||
}
|
||||
|
||||
#tray > .passive {
|
||||
|
|
@ -273,34 +246,15 @@ label:focus {
|
|||
}
|
||||
|
||||
#idle_inhibitor {
|
||||
background-color: #2d3436;
|
||||
border-bottom: 3px solid @base01;
|
||||
}
|
||||
|
||||
#idle_inhibitor.activated {
|
||||
background-color: #ecf0f1;
|
||||
color: #2d3436;
|
||||
}
|
||||
|
||||
#mpd {
|
||||
background-color: #66cc99;
|
||||
color: #2a5c45;
|
||||
}
|
||||
|
||||
#mpd.disconnected {
|
||||
background-color: #f53c3c;
|
||||
}
|
||||
|
||||
#mpd.stopped {
|
||||
background-color: #90b1b1;
|
||||
}
|
||||
|
||||
#mpd.paused {
|
||||
background-color: #51a37a;
|
||||
border-bottom: 3px solid @base3;
|
||||
}
|
||||
|
||||
#language {
|
||||
background: #00b093;
|
||||
color: #740864;
|
||||
border-bottom: 3px solid @cyan;
|
||||
padding: 0 5px;
|
||||
margin: 0 5px;
|
||||
min-width: 16px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue