feat(update): huge changes

styles/osd.css

@@ -1,44 +1,47 @@
-.osd-panel {
-  background-color: transparent;
+#osd {
+  background-color: var(--surface);
+  padding: 10px;
+  border-radius: 6px;
+  margin-top: 6px;
+}
+
+#osd scale {
+  min-width: 150px;
+}
+
+#osd trough {
+  background: var(--surface-container);
+  min-height: 10px;
+  margin-right: 4px;
+  border-radius: 99px;
+}
+
+#osd highlight {
+  border-radius: 99px 0px 0px 99px;
+  background: var(--primary);
+  margin-right: 6px;
+}
+
+#osd slider {
+  color: var(--on-primary);
+  background-color: var(--primary);
+  background-size: 20px;
+  min-width: 5px;
+  min-height: 10px;
+  border-radius: 12px;
+  padding: 0px;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: -10px;
+  margin-bottom: -10px;
+  box-shadow:
+    -1px 0px 0px 1px var(--surface-container),
+    1px 0px 0px 1px var(--surface-container);
 }
 
 #osd-label {
+  font-weight: bold;
   font-size: 17px;
-  font-weight: bold;
-}
-
-#osd-value {
-  font-weight: bold;
-  font-size: 25px;
-}
-
-#progress-container {
-  border-radius: 6px;
-  min-height: 12px;
-  min-width: 150px;
-}
-
-#progress-fill {
-  background-color: @primary;
-  border-radius: 6px;
-  min-height: 8px;
-  transition: min-width 0.3s ease-in-out;
-}
-
-#progress-background {
-  background-color: @surfaceContainer;
-  border-radius: 6px;
-  min-height: 8px;
-  min-width: 150px;
-}
-
-#control-section {
-  padding: 10px;
-  border-radius: 10px;
-  background-color: lighter(@background);
-}
-
-.osd-hidden {
-  opacity: 0;
-  transition: opacity 0.3s ease-in-out;
 }