add volume widget

resources/bar.css

@@ -0,0 +1,61 @@
+* {
+    all: unset; /* Tries to remove all styling */
+}
+
+window {
+/* sleak modern  */
+    background-color: rgba(30, 30, 30, 0.8);
+    color: #ffffff;
+    font-family: "IBMPlexSans-Regular", sans-serif;
+    font-size: 14px;
+    padding: 2px 7px;
+
+}
+
+#clock-label {
+    font-weight: bold;
+    font-family: monospace;
+}
+
+.workspace-pill {
+    background-color: rgba(255, 255, 255, 0.12);
+    padding: 2px 5px;
+    margin-right: 6px;
+    border-radius: 5px;
+}
+
+.workspace-pill:last-child {
+    margin-right: 0;
+}
+
+.workspace-pill-focused {
+    background-color: rgba(255, 255, 255, 0.18);
+}
+
+.workspace-pill-active {
+    background-color: rgba(255, 255, 255, 0.25);
+}
+
+.workspace-pill-urgent {
+    background-color: #ff5555;
+    color: #111;
+}
+
+/* Hover effect: slightly brighten background and show pointer */
+.workspace-pill:hover {
+    background-color: rgba(255, 255, 255, 0.20);
+}
+
+.tray-icon {
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    min-width: 0;
+    min-height: 0;
+}
+
+#spacer {
+    color: rgba(255, 255, 255, 0.3);
+    padding: 0 5px;
+}