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

app/src/styles/components/form.scss

@@ -0,0 +1,26 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.rename-tool-tip {
+  position: absolute;
+  background: var(--background-color);
+  padding: 10px 16px;
+  width: 260px;
+  border-radius: #{$border-radius-large};
+  outline: 1px solid var(--border-color);
+  z-index: 100;
+  .header {
+    @include flex-center;
+    gap: 8px;
+    .icon {
+      @include flex-center;
+    }
+    .name {
+      color: var(--text-color);
+    }
+    input {
+      width: 100%;
+      margin-top: 6px;
+    }
+  }
+}

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;
-    }
-  }
-}

app/src/styles/components/tools.scss

@@ -14,7 +14,7 @@
   width: fit-content;
   transition: width 0.2s;
   background: var(--background-color);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(20px);
   z-index: 2;
   outline: 1px solid var(--border-color);
   outline-offset: -1px;
@@ -31,6 +31,7 @@
   .activeDropicon {
     @include flex-center;
     gap: 2px;
+    // stylelint-disable-next-line
     interpolate-size: allow-keywords;
     width: 0;
     opacity: 0;
@@ -44,9 +45,11 @@
       border-radius: #{$border-radius-medium};
 
       &:hover {
-        background: color-mix(in srgb,
+        background: color-mix(
-            var(--highlight-accent-color) 60%,
+          in srgb,
-            transparent);
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
       }
     }
 
@@ -70,9 +73,11 @@
       position: relative;
 
       &:hover {
-        background: color-mix(in srgb,
+        background: color-mix(
-            var(--highlight-accent-color) 60%,
+          in srgb,
-            transparent);
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
       }
 
       .drop-down-container {
@@ -179,11 +184,11 @@
     font-weight: 500;
     background: var(--accent-color);
     color: var(--highlight-accent-color);
-    &::after{
+    &::after {
       animation: pulse 1s ease-out infinite;
     }
   }
-  &::after{
+  &::after {
     content: "";
     position: absolute;
     height: 100%;
@@ -195,14 +200,14 @@
 }
 
 @keyframes pulse {
-  0%{
+  0% {
     opacity: 0;
-    scale: .5;
+    scale: 0.5;
   }
-  50%{
+  50% {
     opacity: 1;
   }
-  100%{
+  100% {
     opacity: 0;
     scale: 2;
   }
@@ -218,4 +223,4 @@
     width: fit-content;
     opacity: 1;
   }
-}
+}

app/src/styles/layout/sidebar.scss

@@ -7,7 +7,7 @@
   top: 32px;
   left: 8px;
   background: var(--background-color);
-  backdrop-filter: blur(15px);
+  backdrop-filter: blur(20px);
   border-radius: #{$border-radius-extra-large};
   outline: 1px solid var(--border-color);
   box-shadow: #{$box-shadow-medium};
@@ -250,7 +250,7 @@
   top: 32px;
   right: 8px;
   background: var(--background-color);
-  backdrop-filter: blur(15px);
+  backdrop-filter: blur(20px);
   border-radius: #{$border-radius-extra-large};
   outline: 1px solid var(--border-color);
   box-shadow: #{$box-shadow-medium};
@@ -363,7 +363,7 @@
       height: 34px;
       width: 34px;
       border-radius: #{$border-radius-circle};
-      background: var(--background-color-secondary);
+      background: var(--background-color-solid-gradient);
       backdrop-filter: blur(12px);
       outline: 1px solid var(--border-color);
       outline-offset: -1px;
@@ -416,7 +416,7 @@
                 outline: none;
                 path {
                   stroke: var(--text-button-color);
-                  strokeWidth: 1.3;
+                  stroke-width: 1.3;
                 }
               }
             }
@@ -682,7 +682,7 @@
 
         path {
           stroke: var(--accent-color);
-          strokeWidth: 1.5px;
+          stroke-width: 1.5px;
         }
 
         &:hover {