Style waybar a bit closer to old poly

luan · Apr 19, 2020 · 16bbd28 · 16bbd28
1 parent b5651f3
commit 16bbd28
Showing 1 changed file with 47 additions and 55 deletions.
diff --git a/waybar/.config/waybar/style.css b/waybar/.config/waybar/style.css
@@ -1,12 +1,12 @@
 @import "/home/luan/.cache/wal/colors-waybar.css";
 
 * {
-    border: none;
-    border-radius: 0;
-    font-family: "Roboto Mono", "Font Awesome 5 Free", "Font Awesome 5 Brands", "TerminessTTF Nerd Font", monospace;
-    /* font-family: 'Iosevka Term', 'Font Awesome 5 Free', 'SFNS Display',  Helvetica, Arial, sans-serif; */
-    font-size: 12px;
-    min-height: 0;
+  border: none;
+  border-radius: 0;
+  font-family: "Roboto Mono", "Font Awesome 5 Free", "Font Awesome 5 Brands", "TerminessTTF Nerd Font", monospace;
+  /* font-family: 'Iosevka Term', 'Font Awesome 5 Free', 'SFNS Display',  Helvetica, Arial, sans-serif; */
+  font-size: 12px;
+  min-height: 0;
 }
 
 #clock span {
@@ -15,48 +15,42 @@
 }
 
 window#waybar {
-    background-color: alpha(@background, 0.9);
-    color: #ffffff;
-    transition-property: background-color;
-    transition-duration: .5s;
+  background-color: alpha(@background, 0.9);
+  color: #ffffff;
+  transition-property: background-color;
+  transition-duration: .5s;
 }
 
 window#waybar.hidden {
-    opacity: 0.2;
-}
-
-window#waybar.termite {
-    background-color: #3F3F3F;
-}
-
-window#waybar.chromium {
-    background-color: #000000;
-    border: none;
+  opacity: 0.2;
 }
 
 #workspaces button {
-    padding: 0 5px;
-    background-color: transparent;
-    color: #ffffff;
+  padding: 0 5px;
+  background-color: transparent;
+  color: @color3;
+  transition-property: background-color, color;
+  transition-duration: .5s;
 }
 
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 #workspaces button:hover {
-    background: rgba(0, 0, 0, 0.2);
-    box-shadow: inherit;
+  background: rgba(0, 0, 0, 0.2);
+  box-shadow: inherit;
 }
 
 #workspaces button.focused {
-    background-color: #64727D;
+  color: @foreground;
+  font-weight: bold;
 }
 
 #workspaces button.urgent {
-    background-color: #eb4d4b;
+  background-color: @color4;
 }
 
 #mode {
-    background-color: @color4;
-    color: @foreground;
+  background-color: @color1;
+  color: @foreground;
 }
 
 #clock,
@@ -71,34 +65,32 @@ window#waybar.chromium {
 #tray,
 #mode,
 #idle_inhibitor {
-    padding: 0 5px;
-    margin: 0 2px;
-    color: @foreground;
+  padding: 0 5px;
+  margin: 0 2px;
+  color: @foreground;
+  background-color: transparent;
 }
 
 #clock.date {
   color: @color6;
 }
 
-#battery {
-}
-
 #battery.charging {
-    color: @foreground;
+  color: @foreground;
 }
 
 #battery.critical:not(.charging) {
-    background-color: #f53c3c;
-    color: #ffffff;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+  background-color: @color4;
+  color: @foreground;
+  animation-name: blink;
+  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
 }
 
 label:focus {
-    background-color: #000000;
+  background-color: #000000;
 }
 
 #cpu.0 {
@@ -137,40 +129,40 @@ label:focus {
 }
 
 #network.disconnected {
-    color: #000000;
-    background-color: #f53c3c;
+  color: @foreground;
+  background-color: @color4;
 }
 
 #pulseaudio {
 }
 
 #pulseaudio.output.muted {
-    color: @color8;
+  color: @color8;
 }
 
 #custom-media {
-    color: @color8;
-    min-width: 100px;
+  color: @color8;
+  min-width: 100px;
 }
 
 #temperature.critical {
-    background-color: #eb4d4b;
+  background-color: #eb4d4b;
 }
 
 #idle_inhibitor {
-    color: @color1;
+  color: @color1;
 }
 
 #idle_inhibitor.activated {
-    background-color: @foreground;
-    color: @background;
+  background-color: @foreground;
+  color: @background;
 }
 
 #custom-packages {
-    color: @color8;
+  color: @color8;
 }
 
 #custom-packages.updates {
-    color: @color3;
+  color: @color3;
 }