Refactor styles: update backdrop-filter values for improved UI consistency; clean up code formatting in various components.

app/src/styles/components/simulation/simulation.scss

@@ -3,7 +3,7 @@
 
 .simulation-player-wrapper {
   position: fixed;
-  bottom: 12px;
+  bottom: 32px;
   left: 50%;
   z-index: 2;
   transform: translate(-50%, 0);
@@ -35,11 +35,11 @@
       @include flex-space-between;
       gap: 12px;
       justify-content: space-between;
-      .header{
+      .header {
         @include flex-center;
         gap: 6px;
         padding: 0 8px;
-        svg{
+        svg {
           scale: 1.3;
         }
       }
@@ -299,6 +299,37 @@
       }
     }
   }
+
+  .open {
+    .start-displayer,
+    .end-displayer {
+      display: none;
+    }
+
+    .timmer {
+      display: none;
+    }
+    .progresser-wrapper {
+      padding-top: 4px;
+    }
+
+    .time-displayer {
+      height: 0;
+      opacity: 0;
+      pointer-events: none;
+      display: none;
+    }
+
+    .processDisplayer {
+      padding: 0 8px;
+      background: transparent;
+
+      .process-player {
+        width: 0;
+        display: none !important;
+      }
+    }
+  }
 }
 
 .processDisplayer {
@@ -314,22 +345,6 @@
     font-size: var(--font-size-tiny);
   }
 
-  .timmer {
-    width: auto;
-    position: absolute;
-    bottom: 0;
-    font-size: var(--font-size-tiny);
-  }
-
-  .start-displayer {
-    left: 8px;
-  }
-
-  .end-displayer {
-    width: auto;
-    right: 8px;
-  }
-
   .start-displayer {
     bottom: 4px;
     left: 16px;
@@ -351,12 +366,12 @@
     border-width: 1px;
     background: var(--background-color-accent, #6f42c1);
   }
-  .process-wrapper{
+  .process-wrapper {
     .process-container {
       position: relative;
       display: flex;
       width: 100%;
-      
+
       .process {
         height: 5px;
         border-radius: 4px;
@@ -368,35 +383,3 @@
     }
   }
 }
-
-.simulation-player-container.open {
-
-  .start-displayer,
-  .end-displayer {
-    display: none;
-  }
-
-  .timmer {
-    display: none;
-  }
-  .progresser-wrapper {
-    padding-top: 4px;
-  }
-
-  .time-displayer {
-    height: 0;
-    opacity: 0;
-    pointer-events: none;
-    display: none;
-  }
-
-  .processDisplayer {
-    padding: 0 8px;
-    background: transparent;
-
-    .process-player {
-      width: 0;
-      display: none !important;
-    }
-  }
-}