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:23:27 +05:30
parent 6a51fbca61 bd402275b2
commit 66d8196537
75 changed files with 3802 additions and 2712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/src/styles/components/input.scss
View File

@@ -51,9 +51,6 @@ input[type="number"] {
-webkit-appearance: none;
margin: 0;
}
// Firefox
-moz-appearance: textfield;
}
.input-value {
@@ -105,7 +102,7 @@ input[type="number"] {
.search-wrapper {
position: sticky;
top: 0;
padding: 8px 10px;
padding: 0px 10px;
width: 100%;
z-index: 1;
@@ -140,15 +137,16 @@ input[type="number"] {
.clear-button {
@include flex-center;
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
width: 21px;
height: 21px;
border: none;
border-radius: #{$border-radius-large};
cursor: pointer;
background: transparent;
&:hover {
background: var(--highlight-accent-color);
background: var(--background-color-secondary);
}
}
}
@@ -219,9 +217,9 @@ input[type="number"] {
.regularDropdown-container {
width: 100%;
min-width: 80px;
padding: 2px 4px;
padding: 4px 8px;
border: 1px solid var(--border-color);
border-radius: 6px;
border-radius: #{$border-radius-large};
position: relative;
cursor: pointer;
@@ -230,7 +228,7 @@ input[type="number"] {
display: flex;
justify-content: space-between;
cursor: pointer;
border-radius: 6px;
border-radius: #{$border-radius-large};
}
.dropdown-options {
@@ -238,7 +236,7 @@ input[type="number"] {
width: 100%;
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-large};
z-index: 10;
max-height: 200px;
overflow-y: auto;
@@ -255,7 +253,7 @@ input[type="number"] {
padding: 2px 4px;
cursor: pointer;
flex-direction: row !important;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-medium};
&:hover {
color: var(--highlight-text-color);
@@ -272,17 +270,19 @@ input[type="number"] {
.input.default {
width: 100%;
position: relative;
@include flex-center;
gap: 6px;
.dropdown {
top: 2px;
right: 2px;
position: absolute;
background: var(--highlight-accent-color);
border-radius: #{$border-radius-small};
padding: 1px 4px;
height: 100%;
background: var(--background-color-drop-down-gradient);
border-radius: #{$border-radius-extra-large};
padding: 1px 8px;
outline: 1px solid var(--border-color);
.active-option {
color: var(--accent-color);
line-height: 22px;
color: var(--text-color);
font-size: var(--font-size-small);
}
}
@@ -304,10 +304,10 @@ input[type="number"] {
.eye-picker-button {
height: 24px;
min-width: 24px;
min-width: 36px;
@include flex-center;
border-radius: #{$border-radius-small};
background: var(--background-color-secondary);
border-radius: #{$border-radius-large};
background: var(--background-color-drop-down-gradient);
cursor: pointer;
}
@@ -326,6 +326,9 @@ input[type="number"] {
background: var(--background-color) !important;
border: 1px solid var(--border-color) !important;
padding: 5px 10px;
cursor: pointer;
border-radius: #{$border-radius-extra-large};
transition: background-color 0.3s ease;
.label {
white-space: nowrap;
@@ -333,12 +336,6 @@ input[type="number"] {
max-width: 80%;
text-overflow: ellipsis;
}
// font-size: 12px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
&:hover {
background: #333333;
}
@@ -354,7 +351,8 @@ input[type="number"] {
right: -16px;
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 5px;
border-radius: #{$border-radius-large};
backdrop-filter: blur(18px);
box-shadow: #{$box-shadow-medium};
z-index: 1000;
min-width: 200px;
@@ -364,13 +362,11 @@ input[type="number"] {
.dropdown-content {
display: flex;
flex-direction: column;
gap: 6px;
padding: 2px;
.nested-dropdown {
margin-left: 0;
}
padding: 10px;
}
.loading {
@@ -409,15 +405,16 @@ input[type="number"] {
.dropdown-item {
display: block;
padding: 5px 10px;
padding: 4px 10px;
text-decoration: none;
color: var(--text-color);
font-size: var(--font-size-regular);
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: #{$border-radius-large};
&:hover {
background: var(--background-color);
color: var(--accent-color);
background: var(--highlight-accent-color);
}
}
@@ -428,24 +425,25 @@ input[type="number"] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
padding: 4px 10px;
cursor: pointer;
font-size: var(--font-size-regular);
color: var(--text-color);
transition: background-color 0.3s ease;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-large};
.arrow-container {
@include flex-center;
}
&:hover {
background: var(--background-color);
color: var(--accent-color);
background: var(--highlight-accent-color);
}
&.open {
color: var(--accent-color);
background: var(--highlight-accent-color);
color: var(--text-button-color);
background: var(--background-color-accent);
}
.icon {
@@ -649,7 +647,7 @@ input[type="number"] {
padding: 2px 32px;
border: none;
border-radius: #{$border-radius-large};
color: var(--text-color);
color: var(--text-button-color);
background: var(--background-color-button);
transition: all 0.2s;
cursor: pointer;

26
app/src/styles/components/lists.scss
View File

@@ -34,9 +34,8 @@
padding: 12px;
}
.list-container {
li.list-container {
padding: 2px;
// margin-left: 10px;
overflow: hidden;
.list-item {
@@ -45,11 +44,13 @@
text-align: center;
padding: 4px 8px;
border-radius: #{$border-radius-large};
.value {
width: 100%;
text-align: start;
max-width: 180px;
.zone-header{
@include flex-center;
.value {
width: 100%;
text-align: start;
max-width: 180px;
}
}
.options-container {
@@ -61,11 +62,18 @@
cursor: pointer;
}
}
&:first-child{
background: var(--highlight-accent-color);
.input-value{
color: var(--highlight-text-color);
}
}
}
.active {
background: var(--highlight-accent-color);
color: var(--primary-color);
.input-value{
color: var(--highlight-text-color);
}
}
}

16
app/src/styles/components/marketPlace/marketPlace.scss
View File

@@ -9,8 +9,8 @@
position: absolute;
left: 0;
top: 0;
padding: 100px 50px;
padding-bottom: 32px;
padding: 10px;
padding-top: 100px;
.marketplace-container {
position: relative;
@@ -59,8 +59,9 @@
.regularDropdown-container {
max-width: 159px;
height: 100%;
border-radius: #{$border-radius-large};
border-radius: #{$border-radius-extra-large};
border: 1px solid var(--border-color);
padding: 0 10px;
.dropdown-header {
align-items: center;
}
@@ -68,8 +69,9 @@
.button {
padding: 5px 20px;
border: 1px solid var(--accent-color);
border-radius: 14px;
background: var(--background-color-button);
color: var(--text-button-color);
}
.rating-container {
@@ -106,14 +108,14 @@
.cards-wrapper-container {
display: flex;
flex-wrap: wrap;
gap: 28px;
gap: 18px;
.card-container {
width: calc(25% - 23px);
width: calc(25% - 14px);
border-radius: 18px;
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000d;
background: var(--background-color);
background: var(--background-color-solid-gradient);
border: 1px solid var(--border-color);
position: relative;
display: flex;

32
app/src/styles/components/menu/menu.scss
View File

@@ -7,7 +7,7 @@
gap: 2px;
position: relative;
border-radius: #{$border-radius-extra-large};
background: var(--background-color-drop-down);
background: var(--background-color-drop-down-gradient);
padding: 3px 8px;
width: fit-content;
max-width: 100%;
@@ -25,11 +25,12 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-color);
}
}
.more-options-button {
@include flex-center;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-medium};
height: 22px;
position: relative;
&:hover {
@@ -52,7 +53,7 @@
top: 32px;
left: 0;
z-index: 5;
background: var(--background-color);
background: var(--background-color-solid);
color: var(--text-color);
box-shadow: var(--box-shadow-light);
border-radius: 8px;
@@ -69,7 +70,7 @@
position: relative;
height: 100%;
padding: 4px 8px 4px 12px;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-medium};
.menu-button {
width: 100%;
cursor: pointer;
@@ -89,19 +90,21 @@
.dropdown-menu {
position: absolute;
top: 0;
left: 100%;
background: var(--background-color);
left: 103%;
background: var(--background-color-solid);
min-width: 220px;
border-radius: 4px;
border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
outline: 1px solid var(--border-color);
backdrop-filter: blur(20px);
outline-offset: -1px;
z-index: 100;
padding: 4px;
.menu-item-container {
position: relative;
.menu-item {
padding: 4px 8px 4px 12px;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-medium};
display: flex;
justify-content: space-between;
align-items: center;
@@ -138,18 +141,19 @@
.submenu {
position: absolute;
left: 100%;
left: 102%;
top: 0;
background: var(--background-color);
background: var(--background-color-solid);
min-width: 200px;
border-radius: 0 4px 4px 4px;
border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
outline: 1px solid var(--border-color);
outline-offset: -1px;
z-index: 101;
padding: 4px;
.submenu-item {
padding: 4px 8px 4px 12px;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-medium};
display: flex;
justify-content: space-between;
align-items: center;

2
app/src/styles/components/moduleToggle.scss
View File

@@ -38,7 +38,7 @@
left: 0;
width: 0%;
height: 100%;
background: var(--highlight-accent-color);
background: var(--background-color-solid-gradient);
transition: width 0.2s;
border-radius: #{$border-radius-extra-large};
}

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

@@ -16,6 +16,8 @@
background: var(--background-color);
backdrop-filter: blur(8px);
z-index: #{$z-index-default};
outline: 1px solid var(--border-color);
outline-offset: -1px;
.split {
height: 20px;
@@ -28,7 +30,7 @@
.general-options,
.activeDropicon {
@include flex-center;
gap: 8px;
gap: 2px;
interpolate-size: allow-keywords;
width: 0;
opacity: 0;
@@ -39,7 +41,7 @@
height: 28px;
width: 28px;
cursor: pointer;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-medium};
&:hover {
background: color-mix(in srgb,
@@ -77,19 +79,20 @@
position: absolute;
bottom: 40px;
left: 0;
box-shadow: #{$box-shadow-medium};
padding: 8px;
border-radius: #{$border-radius-large};
padding: 2px 4px;
border-radius: #{$border-radius-medium};
background: var(--background-color);
backdrop-filter: blur(8px);
.option-list {
margin: 4px 0;
display: flex;
align-items: center;
white-space: nowrap;
border-radius: #{$border-radius-medium};
gap: 6px;
padding: 4px;
padding: 2px;
padding-right: 12px;
margin: 2px 0;
&:hover {
background: var(--highlight-accent-color);
@@ -116,10 +119,10 @@
.toggle-threed-button {
@include flex-center;
padding: 3px;
border-radius: #{$border-radius-small};
background: var(--highlight-accent-color);
gap: 2px;
padding: 4px;
border-radius: #{$border-radius-medium};
background: var(--background-color);
gap: 5px;
position: relative;
.toggle-option {
@@ -132,30 +135,25 @@
&::after {
content: "";
position: absolute;
background: var(--accent-color);
left: 3px;
top: 3px;
height: 18px;
width: 18px;
border-radius: #{$border-radius-small};
background: var(--background-color-accent);
left: 2px;
top: 2px;
height: 23px;
width: 23px;
border-radius: #{$border-radius-medium};
transition: all 0.2s;
}
.active {
color: var(--highlight-accent-color);
color: var(--text-button-color);
}
}
.toggled {
&::after {
left: 24px;
left: 25px;
}
}
}
.exitPlay {

3
app/src/styles/components/visualization/floating/common.scss
View File

@@ -182,7 +182,6 @@
background: var(--background-color-secondary);
border-radius: 20px;
color: var(--text-color);
background: #252525cc;
.header-wrapper {
width: 100%;
@@ -276,7 +275,7 @@
.icon {
width: 45px;
height: 45px;
background: var(--accent-color);
background: var(--background-color-accent);
display: flex;
justify-content: center;
align-items: center;