waybar: change theme

dot-config/waybar/mocha.css

@@ -21,6 +21,7 @@
 @define-color surface2 #585b70;
 @define-color surface1 #45475a;
 @define-color surface0 #313244;
-@define-color base #1e1e2e;
-@define-color mantle #181825;
+@define-color base rgba(30, 30, 46, 0.2);
+@define-color on-accent #1e1e2e;
+@define-color mantle rgba(24, 24, 37, 0.4);
 @define-color crust #11111b;

dot-config/waybar/waybar.css

@@ -12,7 +12,7 @@ window#waybar {
 /* 	background: @base; */
 	transition-property: background-color;
 	transition-duration: .5s;
-	border-radius: 0px 0px 14px 14px;
+	border-radius: 14px 14px 0px 0px;
 }
 
 #workspaces {
@@ -34,15 +34,15 @@ window#waybar {
 }
 #workspaces button:hover {
     background-color: @lavender;
-	color: @base;
+	color: @on-accent;
 }
 #workspaces button.active {
     background-color: @blue;
-    color: @base
+	color: @on-accent;
 }
 #workspaces button.active:hover {
     background-color: @blue;
-	color: @base;
+	color: @on-accent;
 }
 
 #custom-power, #custom-runner, #battery,
@@ -87,5 +87,5 @@ window#waybar {
 #clock {
 	padding: 0px 10px;
     margin: 4px 5px 4px 2.5px;
-    font-size: 15px;
+    font-size: 14px;
 }

dot-config/waybar/waybar.jsonc

@@ -1,10 +1,10 @@
 {
-	"position": "top",
+	"position": "bottom",
 	"height": 34,
-	"width": 900,
+	"width": 1000,
 	"spacing": 0,
 	"layer": "top",
-    "margin-bottom": -15,
+    "margin-top": -15,
 	"modules-left": ["tray", "custom/spotify"],
 	"modules-center": ["hyprland/workspaces"],
 	"modules-right": ["wireplumber", "hyprland/language", "clock"],
@@ -69,8 +69,7 @@
     
 	"clock": {
 		"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
-		"format-alt": "{:%Y-%m-%d}",
-    	"format": "{:%H:%M}",
+    	"format": "{:%H:%M %b %d}",
     	"timezone": "Asia/Yekaterinburg"
 	}
 }