Fixing up waybar styling.

dot_config/waybar/config

@@ -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-center": [],
-    "modules-right": ["mpd", "idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "keyboard-state", "sway/language", "battery", "battery#bat2", "clock", "tray"],
+        "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}% ",
+            "format": "{usage}%  {icon}",
-        "tooltip": false
+            "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
         }
     }
-
+]
-

dot_config/waybar/style.css

@@ -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: #f38019;
-  color: #000000;
 }
 #battery.charging, #battery.plugged {
-  color: #fbf1c7;
+  color: #b8bb26;
-  background-color: #b8bb26;
 }
 #battery.critical:not(.charging) {
-  color: #fbf1c7;
+  color: #fb4934;
-  background-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: #b8bb26;
-  color: #000000;
+  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: #fabd2f;
-  color: #000000;
 }
 #pulseaudio.muted {
-  background-color: #d79921;
+  color: #d79921;
-  color: #2a5c45;
 }
 
 #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: #b8bb26;
-  color: #7c6f64;
+  border-bottom: 3px solid #b8bb26;
 }
 
 #mpd {
-  background-color: #b8bb26;
+  color: #b8bb26;
-  color: #2a5c45;
+  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: #b16286;
-  color: #740864;
+  border-bottom: 3px solid #b16286;
-  padding: 0 5px;
-  margin: 0 5px;
-  min-width: 16px;
 }
 
 #keyboard-state {

dot_config/waybar/style.css.map

@@ -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"}

dot_config/waybar/style.scss

@@ -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;
+    //background-color: transparent;
-    color: #000000;
+    color: $light-orange;
 
     &.charging, &.plugged {
-        color: $fg0;
+        color: $light-green;
-        background-color: $light-green;
+        //background-color: $light-green;
     }
 
     &.critical:not(.charging) {
-        color: $fg0;
+        color: $light-red;
-        background-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: $light-green;
-    color: #000000;
+    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: $light-yellow;
-    color: #000000;
 
     &.muted {
-        background-color: $dark-yellow;
+        color: $dark-yellow;
-        color: #2a5c45;
     }
 }
 
@@ -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: $light-green;
-        color: $bg4;
+        border-bottom: 3px solid $light-green;
     }
 }
 
 
 #mpd {
-    background-color: $light-green;
+    color: $light-green;
-    color: #2a5c45;
+    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;
+    //background: #00b093;
-    color: #740864;
+    color: $dark-purple;
-    padding: 0 5px;
+    border-bottom: 3px solid $dark-purple;
-    margin: 0 5px;
+    // padding: 0 5px;
-    min-width: 16px;
+    // margin: 0 5px;
+    // min-width: 16px;
 }
 
 #keyboard-state {