simulation slider

2025-03-27 10:55:44 +05:30
parent 38ab556d17
commit 68211c277b
6 changed files with 332 additions and 5 deletions
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@@ -0,0 +1,114 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
+.simulation-player-wrapper {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  z-index: 2;
+  transform: translate(-50%, 0);
+  .simulation-player-container {
+    .controls-container {
+      @include flex-center;
+      gap: 12px;
+      margin-bottom: 4px;
+      .simulation-button-container {
+        @include flex-center;
+        gap: 2px;
+        padding: 6px 8px;
+        min-width: 64px;
+        background-color: var(--background-color);
+        border-radius: #{$border-radius-small};
+        cursor: pointer;
+        &:hover {
+          background-color: var(--highlight-accent-color);
+          color: var(--accent-color);
+          path {
+            stroke: var(--accent-color);
+          }
+        }
+      }
+    }
+    .speed-control-container {
+      @include flex-center;
+      gap: 18px;
+      padding: 5px 16px;
+      background: var(--background-color);
+      border-radius: #{$border-radius-medium};
+      box-sizing: #{$box-shadow-medium};
+      .min-value,
+      .max-value {
+        font-weight: var(--font-weight-bold);
+      }
+      .slider-container {
+        width: 580px;
+        max-width: 80vw;
+        height: 28px;
+        background: var(--background-color-gray);
+        border-radius: #{$border-radius-small};
+        position: relative;
+        padding: 4px 26px;
+        .custom-slider {
+          height: 100%;
+          width: 100%;
+          position: relative;
+          .slider-input {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            z-index: 3;
+            cursor: pointer;
+          }
+          .slider-handle {
+            position: absolute;
+            width: 42px;
+            line-height: 20px;
+            text-align: center;
+            background: var(--accent-color);
+            color: var(--primary-color);
+            border-radius: #{$border-radius-small};
+            transform: translateX(-50%);
+            cursor: pointer;
+            z-index: 2;
+          }
+        }
+        .marker{
+            position: absolute;
+            background-color: var(--text-disabled);
+            width: 2px;
+            height: 12px;
+            border-radius: 1px;
+            top: 8px;
+        }
+        .marker.marker-10{
+            left: 10%;
+        }
+        .marker.marker-20{
+            left: 20%;
+        }
+        .marker.marker-30{
+            left: 30%;
+        }
+        .marker.marker-40{
+            left: 40%;
+        }
+        .marker.marker-50{
+            left: 50%;
+        }
+        .marker.marker-60{
+            left: 60%;
+        }
+        .marker.marker-70{
+            left: 70%;
+        }
+        .marker.marker-80{
+            left: 80%;
+        }
+        .marker.marker-90{
+            left: 90%;
+        }
+      }
+    }
+  }
+}