Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated realTime vis panel smooth transition

Browse Source
This commit is contained in:
Nalvazhuthi
2025-04-30 18:20:36 +05:30
parent 9829899aec
commit 6a51fbca61
12 changed files with 369 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/src/styles/components/simulation/simulation.scss
View File

@@ -10,7 +10,7 @@
width: 70%;
.simulation-player-container {
background-color: var(--background-color);
background: var(--background-color);
padding: 7px;
border-radius: 15px;
display: flex;
@@ -18,7 +18,10 @@
gap: 8px;
.progresser-wrapper {
background-color: var(--highlight-accent-color);
outline: 1px solid var(--border-color);
background: var(--background-color);
// background-color: var(--highlight-accent-color);
padding: 4px 5px;
border-radius: 12px;
display: flex;
@@ -61,7 +64,8 @@
height: 8px;
border-radius: 5px;
// overflow: hidden;
background-color: var(--highlight-accent-color);
outline: 1px solid var(--border-color);
background: var(--background-color);
.progress {
border-radius: 5px;
@@ -82,7 +86,8 @@
cursor: pointer;
&:hover {
background: var(--highlight-accent-color);
outline: 1px solid var(--border-color);
background: var(--background-color);
color: var(--accent-color);
path {
@@ -94,7 +99,7 @@
.speed-control-container {
@include flex-center;
gap: 18px;
gap: 32px;
padding: 5px 16px;
// background: var(--background-color);
border-radius: #{$border-radius-medium};
@@ -122,7 +127,8 @@
.speed-label {
font-size: var(--font-size-tiny);
position: absolute;
bottom: -4px;
bottom: -7px;
transform: translate(-50%, -0%);
&:first-child {
left: 0;
@@ -171,13 +177,14 @@
z-index: 2;
}
}
.marker{
position: absolute;
background-color: var(--text-disabled);
width: 2px;
height: 12px;
border-radius: 1px;
top: 8px;
.marker {
position: absolute;
background-color: var(--text-disabled);
width: 2px;
height: 12px;
border-radius: 1px;
top: 8px;
}
.marker.marker-10 {
@@ -239,9 +246,8 @@
.timeline {
padding: 16px;
// background: #f5f3fa;
background: linear-gradient(90.17deg, rgba(255, 255, 255, 0.64) 1.53%, rgba(255, 255, 255, 0.48) 98.13%);
outline: 1px solid var(--border-color);
background: var(--background-color);
border-radius: 30px;
display: flex;
align-items: center;
@@ -271,9 +277,8 @@
background-color: #d3d3e2;
&.filled {
background-color: #8f5cf2;
border: 4px solid var(--accent-color);
background-color: var(--accent-color);
border: 4px solid #8f5cf2;
}
}
}
@@ -302,7 +307,8 @@
.processDisplayer {
border-radius: 5px;
// overflow: hidden;
background-color: var(--highlight-accent-color);
outline: 1px solid var(--border-color);
background: var(--background-color);
padding: 14px 6px;
position: relative;