waybar: refine style.css

diff --git a/config/waybar/config b/config/waybar/config
index f99955bdd9fd3d0396c8d464c7ee28c2759079ad..4f8ac47b1f366f65ebd62ea51f1d0bfd09f8524a 100644 (file)
--- a/config/waybar/config
+++ b/config/waybar/config
@@ -3,7 +3,7 @@
     "position": "bottom", // Waybar position (top|bottom|left|right)
     "height": 26, // Waybar height (to be removed for auto height)
     // "width": 1280, // Waybar width
-    "spacing": 6, // Gaps between modules (4px)
+    "spacing": -8, // Gaps between modules (4px)
     // Choose the order of the modules
     "modules-left": ["hyprland/workspaces", "mpd"],
     "modules-center": ["hyprland/window"],
@@ -58,7 +58,7 @@
     },
 
     "hyprland/window": {
-        "format": "{title}",
+        "format": "{initialClass} - {title}",
     },
 
 

diff --git a/config/waybar/style.css b/config/waybar/style.css
index 8f68bf05d76abb9a99d53b08727799b6e612ba94..8e7d78dee4b45e04a90b34dbb9a8cd8334d49bdf 100644 (file)
--- a/config/waybar/style.css
+++ b/config/waybar/style.css
@@ -1,14 +1,23 @@
 * {
-  font-family: "LiterationMono Nerd Font";
+  font-family: "BlexMono Nerd Font";
   font-size: 17px;
   min-height: 0px;
 }
 
+#window {
+    padding: 0 76px;
+    margin: 0 4px;
+    background-color: rgba(124,175,194,1.0);
+    border-bottom: 3px solid rgba(100, 114, 125, 1);
+    color: #181818;
+}
 
 window#waybar {
-    background-color: rgba(43, 48, 59, 1.0);
-    border-bottom: 2px solid rgba(100, 114, 125, 1);
-    color: #ffffff;
+    padding: 0 16px;
+    margin: 0 4px;
+    background-color: rgba(59, 64, 69, 1.0);
+    border-bottom: 3px solid rgba(100, 114, 125, 1);
+       color: #eff0f1;
     transition-property: background-color;
     transition-duration: .5s;
 }
@@ -17,74 +26,111 @@ window#waybar.hidden {
 }
 window#waybar.empty {
     background-color: transparent;
-    background-image: linear-gradient(0deg, rgba(43,48,59,1.0), rgba(22,24,30,0))
+    background-image: linear-gradient(0deg, rgba(42,46,50,1.0), rgba(22,24,30,0))
 }
 window#waybar.foot {
-    background-color: rgba(24,24,24,1.0);
+    background-color: rgba(62,79,95,1.0);
 }
 
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+button:hover {
+    background: inherit;
+    box-shadow: inset 0 -3px #ffffff;
+}
 
-#workspaces button {
+#workspaces {
        padding: 0 10px;
-       background: inherit;
-       color:#ffffff;
-       border-bottom: 2px solid rgba(100, 114, 125, 0.0);
-       font-weight: bold;
+    background-image: linear-gradient(0deg, rgba(228,169,68, 0.9), rgba(228,169,68, 0.6), rgba(59, 64, 69, 0.5));
+    border-bottom: 3px solid rgba(100, 114, 125, 1);
+       color: #181818;
+}
+#workspaces button {
+       box-shadow: inherit;
+       text-shadow: inherit;
        border: none;
        border-radius: 0;
 }
 #workspaces button:hover {
-       background: inherit;
-       border-bottom: 2px solid tomato;
-       box-shadow: inset 0 -28px #c9545d;
+       box-shadow: inherit;
+       text-shadow: inherit;
 }
 #workspaces button.active {
-       font-weight: bold;
-       border-bottom: 2px solid lightblue;
+    background-image: linear-gradient(0deg, rgba(124,175,194,0.9), rgba(124,175,194,0.7), rgba(59, 64, 69, 0.5));
 }
 #workspaces button.focused {
-       border-bottom: 2px solid #c9545d;
+    background-color: rgba(124,175,194,1.0);
 }
 #workspaces button.urgent {
-       border-bottom: 2px solid #eb4d4b;
+    background-color: #da4453;
+    color: #fcfcfc;
 }
 
 
 #cpu,
-#memory,
-#temperature {
-    padding: 0 15px;
-    color: #ffffff;
+#pulseaudio,
+#memory {
+    padding: 0 16px;
+    margin: 0 4px;
+    color: #eff0f1;
 }
 
-
+#clock,
+#keyboard-state,
+#temperature,
 #temperature#temp2 {
-    padding: 0 15px;
-    color: #ffffff;
+    padding: 0 16px;
+    margin: 0 4px;
+    color: #eff0f1;
 }
 
 
 #mpris {
-  margin: 2px;
-  padding: 10px;
-  background-color: rgba(23,28,39,0.3);
-  color: #ffffff;
+    padding: 0 16px;
+    margin: 0 4px;
+    background-color: rgba(23,28,39,0.3);
+    color: #eff0f1;
 }
 
 
 #mpd {
-    padding: 0 20px;
-    color: #ffffff;
+    padding: 0 24px;
+    margin: 0 4px;
+    color: #eff0f1;
+    font-family: "IBM Plex Serif";
+    font-size: 17px;
+    min-height: 0px;
 }
 
 
 #clock {
-    padding: 0 3px;
-    margin: 0 2px;
+    padding-left: 16px;
+    padding-right: 32px;
+    margin: 0 4px;
 }
 
 
 #idle_inhibitor {
-    padding: 0 15px;
-    color: #ffffff;
+    padding: 0 8px;
+    margin: 0 4px;
+    color: #181818;
+    background-image: linear-gradient(0deg, rgba(228,169,68, 0.9), rgba(228,169,68, 0.6), rgba(59, 64, 69, 0.5));
+    border-bottom: 3px solid rgba(100, 114, 125, 1);
+}
+#custom-powermenu,
+#custom-wallpaper {
+    padding: 0 8px;
+    padding-right: 0px;
+    margin: 0 4px;
+    color: #181818;
+    background-image: linear-gradient(0deg, rgba(228,169,68, 0.9), rgba(228,169,68, 0.6), rgba(59, 64, 69, 0.5));
+    border-bottom: 3px solid rgba(100, 114, 125, 1);
+}
+
+#tray {
+    padding: 0 16px;
+    margin: 0 4px;
+    color: #fcfcfc;
+    /*background-color: rgba(228,169,68, 0.8);
+    background-image: linear-gradient(0deg, rgba(228,169,68, 1.0), rgba(228,169,68, 1.0), rgba(228,169,68, 0.4), rgba(22,24,30,0.4))
+    */
 }