joachim/chezmoi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixing up waybar styling.

Browse Source
This commit is contained in:
Joachim Nielandt 2022-06-08 16:23:38 +02:00
parent f0195aaf41
commit 2a4eba5449
4 changed files with 304 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
dot_config/waybar/config
View File

@ -1,4 +1,20 @@
[
{
// TOP BAR
"name": "top",
"layer": "bottom",
"output": "eDP-1",
// styling
"height": 30,
// modules
"modules-left": [],
"modules-center": ["sway/window"],
"modules-right": ["clock", "tray"],
}
,
{
// BOTTOM BAR
"name": "bottom",
//"layer": "top", // Waybar at top layer
// "position": "bottom", // Waybar position (top|bottom|left|right)
"height": 30, // Waybar height (to be removed for auto height)
@ -6,8 +22,8 @@
"spacing": 4, // Gaps between modules (4px)
// Choose the order of the modules
"modules-left": ["sway/workspaces", "sway/mode", "custom/media"],
"modules-center": ["sway/window"],
"modules-right": ["mpd", "idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "keyboard-state", "sway/language", "battery", "battery#bat2", "clock", "tray"],
"modules-center": [],
"modules-right": ["mpd", "idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "keyboard-state", "sway/language", "battery", "battery#bat2", "clock"],
// Modules configuration
// "sway/workspaces": {
// "disable-scroll": true,
@ -39,7 +55,7 @@
},
"mpd": {
"format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% ",
"format-disconnected": "Disconnected ",
"format-disconnected": " ",
"format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
"unknown-tag": "N/A",
"interval": 2,
@ -79,9 +95,15 @@
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
"format-alt": "{:%Y-%m-%d}"
},
"clock": {
//"timezone": "America/New_York",
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
"format-alt": "{:%Y-%m-%d}"
},
"cpu": {
"format": "{usage}% ",
"tooltip": false
"format": "{usage}%  {icon}",
"format-icons": ["x", "y", "z"],
"tooltip": true
},
"memory": {
"format": "{}% "
@ -157,5 +179,4 @@
// "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
}
}
]

97
dot_config/waybar/style.css
View File

@ -7,28 +7,27 @@
window#waybar {
background-color: #282828;
border-bottom: 3px solid #7c6f64;
color: #fbf1c7;
transition-property: background-color;
transition-duration: 0.5s;
}
window#waybar.hidden {
opacity: 0.2;
}
/*
window#waybar.empty {
&.empty {
background-color: transparent;
}
window#waybar.solo {
&.solo {
background-color: #FFFFFF;
}
*/
}
window#waybar.hidden {
opacity: 0.2;
}
window#waybar.bottom {
border-bottom: 3px solid #7c6f64;
}
window#waybar.termite {
background-color: #282828;
}
window#waybar.chromium {
background-color: #282828;
border: none;
@ -58,7 +57,7 @@ window#waybar.chromium {
}
#mode {
background-color: #64727D;
background-color: #504945;
border-bottom: 3px solid #fbf1c7;
}
@ -95,27 +94,20 @@ window#waybar.chromium {
margin-right: 0;
}
#clock {
background-color: #64727D;
}
@keyframes blink {
to {
background-color: #fbf1c7;
color: #000000;
color: #282828;
}
}
#battery {
background-color: #fbf1c7;
color: #000000;
color: #f38019;
}
#battery.charging, #battery.plugged {
color: #fbf1c7;
background-color: #b8bb26;
color: #b8bb26;
}
#battery.critical:not(.charging) {
color: #fbf1c7;
background-color: #fb4934;
color: #fb4934;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: linear;
@ -124,41 +116,43 @@ window#waybar.chromium {
}
label:focus {
background-color: #282828;
color: #282828;
}
#cpu {
background-color: #b8bb26;
color: #000000;
color: #b8bb26;
border-bottom: solid 3px #b8bb26;
}
#memory {
background-color: #fabd2f;
color: #fabd2f;
border-bottom: solid 3px #fabd2f;
}
#disk {
background-color: #83a598;
color: #83a598;
border-bottom: solid 3px #83a598;
}
#backlight {
background-color: #d3869b;
color: #d3869b;
border-bottom: solid 3px #d3869b;
}
#network {
background-color: #8ec07c;
color: #8ec07c;
border-bottom: solid 3px #8ec07c;
}
#network.disconnected {
background-color: #cc241d;
color: #cc241d;
}
#pulseaudio {
background-color: #fabd2f;
color: #000000;
color: #fabd2f;
}
#pulseaudio.muted {
background-color: #d79921;
color: #2a5c45;
color: #d79921;
}
#custom-media {
@ -174,51 +168,52 @@ label:focus {
}
#temperature {
background-color: #b8bb26;
color: #b8bb26;
}
#temperature.critical {
background-color: #fb4934;
color: #fb4934;
}
#tray {
background-color: #2980b9;
background-color: #282828;
}
#tray > .passive {
-gtk-icon-effect: dim;
}
#tray > .needs-attention {
-gtk-icon-effect: highlight;
background-color: #eb4d4b;
background-color: #cc241d;
}
#idle_inhibitor {
background-color: #7c6f64;
color: #d65d0e;
border-bottom: 3px solid #b16286;
}
#idle_inhibitor.activated {
background-color: #a89984;
color: #7c6f64;
color: #b8bb26;
border-bottom: 3px solid #b8bb26;
}
#mpd {
background-color: #b8bb26;
color: #2a5c45;
color: #b8bb26;
border-bottom: 3px solid #b16286;
}
#mpd.disconnected {
background-color: #cc241d;
color: #cc241d;
border-bottom: 3px solid #cc241d;
}
#mpd.stopped {
background-color: #458588;
color: #458588;
border-bottom: 3px solid #458588;
}
#mpd.paused {
background-color: #83a598;
color: #83a598;
border-bottom: 3px solid #458588;
}
#language {
background: #00b093;
color: #740864;
padding: 0 5px;
margin: 0 5px;
min-width: 16px;
color: #b16286;
border-bottom: 3px solid #b16286;
}
#keyboard-state {

2
dot_config/waybar/style.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.scss","gruvbox.scss"],"names":[],"mappings":"AAEA;AACI;AACA;EACA;EACA;;;AAGJ;EACI,kBCKE;EDJF;EACA,OCYE;EDXF;EACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;EACI,kBChBE;;;ADmBN;EACI,kBCpBE;EDqBF;;;AAGJ;EACI;EACA;EACA,OClBE;ADmBF;EACA;AACA;EACA;EACA;AAEA;;AACA;EACI;EACA;;AAGJ;EACI,kBCrCF;EDsCE;;AAGJ;EACI;;;AAKR;EACI;EACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAcI;EACA,OC9DE;;;ADiEN;AAAA;EAEI;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;;;AAGJ;EACI;;;AAGJ;EACI;IACI,kBCtFF;IDuFE;;;AAIR;EACI,kBC5FE;ED6FF;;AAEA;EACI,OChGF;EDiGE,kBChFM;;ADmFV;EACI,OCrGF;EDsGE,kBCtFI;EDuFJ;EACA;EACA;EACA;EACA;;;AAIR;EACI,kBCzHE;;;AD4HN;EACI,kBCnGU;EDoGV;;;AAGJ;EACI,kBCvGW;;;AD0Gf;EACI,kBC1GS;;;AD6Gb;EACI,kBC7GW;;;ADgHf;EACI,kBChHS;;;ADmHb;EACI,kBClIO;;;ADqIX;EACI,kBC3HW;ED4HX;;AAEA;EACI,kBCxIM;EDyIN;;;AAKR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAKR;EACI,kBCtJU;;ADwJV;EACI,kBC1JI;;;AD+JZ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;;AAKR;EACI,kBCjME;;ADmMF;EACI,kBC7LF;ED8LE,OCrMF;;;AD0MN;EACI,kBCvLU;EDwLV;;AAEA;EACI,kBCrMG;;ADwMP;EACI,kBCtMI;;ADyMR;EACI,kBCjMK;;;ADqMb;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI,YCrNQ;EDsNR,OC3OE;ED4OF;EACA;EACA;;AAEA;EACI;;AAGJ;EACI","file":"style.css"}
{"version":3,"sourceRoot":"","sources":["style.scss","gruvbox.scss"],"names":[],"mappings":"AAEA;AACI;AACA;EACA;EACA;;;AAIA;EACI,kBCIF;EDHE,OCYF;EDXE;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACI;;AAGJ;EACI;;AAYJ;EACI,kBCnBN;;ADsBE;EACI,kBCvBN;EDwBM;;;AAMZ;EACI;EACA;EACA,OCxBE;ADyBF;EACA;AACA;EACA;EACA;AAEA;;AACA;EACI;EACA;;AAGJ;EACI,kBC3CF;ED4CE;;AAGJ;EACI;;;AAKR;EACI,kBCtDE;EDuDF;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAcI;EACA,OCpEE;;;ADuEN;AAAA;EAEI;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;;;AAOJ;EACI;IACI,kBC5FF;ID6FE,OCtGF;;;AD0GN;EAEI,OC7EW;;AD+EX;EACI,OCrFM;;ADyFV;EACI,OC3FI;ED6FJ;EACA;EACA;EACA;EACA;;;AAIR;EACI,OC/HE;;;ADkIN;EACI,OCzGU;ED0GV;;;AAGJ;EACI,OC7GW;ED8GX;;;AAGJ;EACI,OCjHS;EDkHT;;;AAGJ;EACI,OCrHW;EDsHX;;;AAGJ;EACI,OCzHS;ED0HT;;;AAGJ;EACI,OC5IO;;;AD+IX;EACI,OCrIW;;ADuIX;EACI,OCjJM;;;ADsJd;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAKR;EACI,OC9JU;;ADgKV;EACI,OClKI;;;ADuKZ;EACI,kBCjME;;ADmMF;EACI;;AAGJ;EACI;EACA,kBCzLG;;;AD8LX;EACI,OCzLU;ED0LV;;AAEA;EACI,OCzLM;ED0LN;;;AAKR;EACI,OChMU;EDiMV;;AAEA;EACI,OC9MG;ED+MH;;AAGJ;EACI,OChNI;EDiNJ;;AAGJ;EACI,OC5MK;ED6ML;;;AAIR;EAEI,OC3NU;ED4NV;;;AAMJ;EACI,YClOQ;EDmOR,OCxPE;EDyPF;EACA;EACA;;AAEA;EACI;;AAGJ;EACI","file":"style.css"}

105
dot_config/waybar/style.scss
View File

@ -7,35 +7,41 @@
font-size: 12px;
}
window#waybar {
window {
&#waybar {
background-color: $bg0;
border-bottom: 3px solid $bg4;
color: $fg0;
transition-property: background-color;
transition-duration: .5s;
}
window#waybar.hidden {
&.hidden {
opacity: 0.2;
}
&.bottom {
border-bottom: 3px solid $bg4;
}
/*
window#waybar.empty {
&.empty {
background-color: transparent;
}
window#waybar.solo {
&.solo {
background-color: #FFFFFF;
}
*/
window#waybar.termite {
&.termite {
background-color: $bg0;
}
window#waybar.chromium {
&.chromium {
background-color: $bg0;
border: none;
}
}
}
#workspaces button {
padding: 0 5px;
@ -65,7 +71,7 @@ window#waybar.chromium {
#mode {
background-color: #64727D;
background-color: $bg2;
border-bottom: 3px solid $fg0;
}
@ -103,28 +109,28 @@ window#waybar.chromium {
}
#clock {
background-color: #64727D;
// background-color: #64727D;
}
@keyframes blink {
to {
background-color: $fg0;
color: #000000;
color: $bg0;
}
}
#battery {
background-color: $fg0;
color: #000000;
//background-color: transparent;
color: $light-orange;
&.charging, &.plugged {
color: $fg0;
background-color: $light-green;
color: $light-green;
//background-color: $light-green;
}
&.critical:not(.charging) {
color: $fg0;
background-color: $light-red;
color: $light-red;
//background-color: $light-red;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: linear;
@ -134,41 +140,43 @@ window#waybar.chromium {
}
label:focus {
background-color: $bg0;
color: $bg0;
}
#cpu {
background-color: $light-green;
color: #000000;
color: $light-green;
border-bottom: solid 3px $light-green;
}
#memory {
background-color: $light-yellow;
color: $light-yellow;
border-bottom: solid 3px $light-yellow;
}
#disk {
background-color: $light-blue;
color: $light-blue;
border-bottom: solid 3px $light-blue;
}
#backlight {
background-color: $light-purple;
color: $light-purple;
border-bottom: solid 3px $light-purple;
}
#network {
background-color: $light-aqua;
color: $light-aqua;
border-bottom: solid 3px $light-aqua;
}
#network.disconnected {
background-color: $dark-red;
color: $dark-red;
}
#pulseaudio {
background-color: $light-yellow;
color: #000000;
color: $light-yellow;
&.muted {
background-color: $dark-yellow;
color: #2a5c45;
color: $dark-yellow;
}
}
@ -189,16 +197,16 @@ label:focus {
#temperature {
background-color: $light-green;
color: $light-green;
&.critical {
background-color: $light-red;
color: $light-red;
}
}
#tray {
background-color: #2980b9;
background-color: $bg0;
& > .passive {
-gtk-icon-effect: dim;
@ -206,44 +214,49 @@ label:focus {
& > .needs-attention {
-gtk-icon-effect: highlight;
background-color: #eb4d4b;
background-color: $dark-red;
}
}
#idle_inhibitor {
background-color: $bg4;
color: $dark-orange;
border-bottom: 3px solid $dark-purple;
&.activated {
background-color: $fg4;
color: $bg4;
color: $light-green;
border-bottom: 3px solid $light-green;
}
}
#mpd {
background-color: $light-green;
color: #2a5c45;
color: $light-green;
border-bottom: 3px solid $dark-purple;
&.disconnected {
background-color: $dark-red;
color: $dark-red;
border-bottom: 3px solid $dark-red;
}
&.stopped {
background-color: $dark-blue;
color: $dark-blue;
border-bottom: 3px solid $dark-blue;
}
&.paused {
background-color: $light-blue;
color: $light-blue;
border-bottom: 3px solid $dark-blue;
}
}
#language {
background: #00b093;
color: #740864;
padding: 0 5px;
margin: 0 5px;
min-width: 16px;
//background: #00b093;
color: $dark-purple;
border-bottom: 3px solid $dark-purple;
// padding: 0 5px;
// margin: 0 5px;
// min-width: 16px;
}
#keyboard-state {