✨ feat(osd): add OSD for brightness, volume, and microphone controls

styles/launcher.css

@@ -1,48 +0,0 @@
-#launcher {
-  transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
-  background-color: var(--shadow);
-}
-
-#launcher entry {
-  transition: all 0.1s ease;
-  border-radius: 11px;
-  box-shadow: inset 0 0 0 1px var(--outline);
-  min-width: 400px;
-  padding: 10px;
-}
-
-#slot-button {
-  border-radius: 40px;
-  padding: 0 16px;
-  animation: loadSlot 0.5s ease;
-  min-height: 52px;
-  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-@keyframes loadSlot {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-#slot-button:hover,
-#slot-button:focus,
-#slot-button:selected,
-#slot-button.selected {
-  border-radius: 16px;
-  background-color: var(--surface);
-  padding-left: 20px;
-}
-
-#slot-button:active {
-  background-color: var(--primary);
-}
-
-#clip-icon {
-  font-size: 20px;
-  color: var(--primary);
-}

styles/osd.css

@@ -0,0 +1,49 @@
+#osd {
+  background: var(--shadow);
+  padding: 12px 20px;
+  margin-bottom: 60px;
+}
+
+#osd scale {
+  min-width: 150px;
+}
+
+#osd trough {
+  background: var(--surface);
+  min-height: 10px;
+  margin-right: 4px;
+  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+#osd trough highlight {
+  border-radius: 100px 0px 0px 100px;
+  background: var(--primary);
+  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+#osd.muted trough highlight,
+#osd.muted slider,
+#osd scale.muted trough highlight,
+#osd scale.muted slider {
+  background-color: var(--surface-bright);
+}
+
+#osd slider {
+  background-color: var(--primary);
+  background-size: 20px 20px;
+  min-width: 4px;
+  min-height: 8px;
+  border-radius: 2px;
+  padding: 0px;
+  margin: -14px 0;
+  box-shadow:
+    -4px 0 0px 2px var(--shadow),
+    4px 0 0px 2px var(--shadow);
+  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+#brighntess-icons.muted,
+#vol-icon.muted,
+#mic-icon.muted {
+  color: var(--outline);
+}