From: Andre Ramnitz <tux.rising@gmail.com>
Date: Sat, 23 Dec 2023 13:46:38 +0000 (+0100)
Subject: waybar: refine style.css
X-Git-Tag: v0.2~283
X-Git-Url: https://git.ramnitz.eu/?a=commitdiff_plain;h=0b8f3ed3e553873da828aaf4e28167a64fd99f1a;p=dotfiles.git

waybar: refine style.css
---

diff --git a/config/waybar/config b/config/waybar/config
index f99955bd..4f8ac47b 100644
--- 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 8f68bf05..8e7d78de 100644
--- 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))
+    */
 }