Dots Changes

* Waybar Changes
  * Fixes Keyboard-state (Need to add user to input group)
  * Adds Limit to mpc title
  * Icon Music Play state Display

waybar/config.jsonc

@@ -8,10 +8,10 @@
     // Choose the order of the modules
     "modules-left": [
         "hyprland/workspaces",
-        "sway/mode",
-        "sway/scratchpad",
-        "custom/media",
-        "custom/keyboard-state"
+//        "sway/mode",
+//        "sway/scratchpad",
+//        "custom/media",
+        "keyboard-state"
     ],
     "modules-center": [
         // "group/quicklinks",
@@ -29,7 +29,7 @@
         "custom/mem",
         // "temperature",
         "backlight",
-        "keyboard-state",
+        //"keyboard-state",
         "sway/language",
         "battery",
         "battery#bat2",
@@ -51,14 +51,16 @@
             "*": 5
         } 
     },
-    "custom/keyboard-state": {
-        "numlock": true,
+    "keyboard-state": {
+        "numlock": false,
+        "interval": 1,
         "capslock": true,
         "format": "{name} {icon}",
         "format-icons": {
             "locked": "",
             "unlocked": ""
-        }
+        },
+        "device-path": "/dev/input/event5"
     },
     "sway/mode": {
         "format": "<span style=\"italic\">{}</span>"
@@ -71,7 +73,7 @@
         "tooltip-format": "{app}: {title}"
     },
     "mpd": {
-        "format": " Playing",
+        "format": "{stateIcon} - {title}",
         //{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% 
         "format-disconnected": "Disconnected ",
         "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
@@ -96,7 +98,8 @@
         },
         "tooltip-format": "{album} - {title}",
         "tooltip-format-disconnected": "MPD (disconnected)",
-        "on-click": "mpc toggle"
+        "on-click": "mpc toggle",
+        "title-len": 20
     },
     "idle_inhibitor": {
         "format": "{icon}",

waybar/style.css

@@ -68,16 +68,25 @@ window#waybar.empty #window {
 	padding: 0;
 }
 
+#workspaces {
+	background-color: #000000;
+	padding: 2px;
+	margin: 2px;
+	border-radius: 16px;
+	border: 2px solid #ebdbb2;
+	color: #ebdbb2;
+}
+
 #workspaces>button {
 	font-size: 12.5px;
 	transition: all 0.3s ease;
-	padding: 0 6px;
+	padding: 0 8px 0 8px;
 	margin: 0;
 	border-radius: 2.5px;
 }
 
 #workspaces>button.empty.flat {
-	color: #ebdbb2;;
+	color: #ebdbb2;
 }
 
 #workspaces>button.urgent {
@@ -87,6 +96,7 @@ window#waybar.empty #window {
 #workspaces>button.active.flat {
 	color: #000000;
 	background: #ebdbb2;
+	padding: 0 8px 0 8px;
 }
 
 #workspaces>button.inactive {
@@ -94,7 +104,7 @@ window#waybar.empty #window {
 }
 
 #workspaces>button:nth-child(1) {
-	border-radius: 100px 16px 16px 100px
+	border-radius: 100px 16px 16px 100px;
 }
 
 #workspaces>button:last-child {
@@ -132,10 +142,20 @@ window#waybar.empty #window {
 }
 
 #clock {
+	background-color: #000000;
 	padding-left: 10px;
 	padding-right: 10px;
 	border-radius: 16px;
 	font-weight: bold;
+	color: #ebdbb2;
+	border: 2px solid #ebdbb2;
+	margin: 2px;
+	/* background-color: #000000; */
+	/* padding: 2px; */
+	/* margin: 2px; */
+	/* border-radius: 16px; */
+	/* border: 2px solid #ebdbb2; */
+	/* color: #ebdbb2; */
 	/* border: 1px solid #e74c3c; */
 }
 
@@ -211,11 +231,10 @@ window#waybar.empty #window {
 /* 	border: 2px solid #ebdbb2; */
 /* } */
 #mpd {
-	margin-left: 10px;
-	margin-right: 10px;
+	margin: 2px;
 	border: 2px solid #ebdbb2;
 	border-radius: 16px;
-	padding: 0 10px;
+	padding: 0 10px 0px 10px;
 	color: #ebdbb2;
 	background: #000000;
 }
@@ -283,15 +302,15 @@ window#waybar.empty #window {
 	background: @color5;
 }
 
-.modules-left,
-.modules-center
-{
-	background: #000000;
-	border: 2px solid #ebdbb2;
-	border-radius: 100px;
-	padding: 2px 2px;
-	color: #ebdbb2;
-}
+/* .modules-left, */
+/* .modules-center */
+/* { */
+/* 	background: #000000; */
+/* 	border: 2px solid #ebdbb2; */
+/* 	border-radius: 100px; */
+/* 	padding: 2px 2px; */
+/* 	color: #ebdbb2; */
+/* } */
 
 /* .modules-right  {
 
@@ -306,3 +325,15 @@ window#waybar.empty #window {
 #custom-filemanager {
 	margin-right: 23px;
 }
+
+#keyboard-state {
+	background-color: #000000;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	padding-left: 5px;
+	padding-right: 10px;
+	margin: 2px;
+	border-radius: 16px;
+	border: 2px solid #ebdbb2;
+	color: #ebdbb2;
+}