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

15
app/src/styles/abstracts/variables.scss
View File

@@ -16,12 +16,13 @@ $text-button-color: #f3f3fd;
$text-color-dark: #f3f3fd;
$text-disabled-dark: #6f6f7a;
$input-text-color-dark: #b5b5c8;
$highlight-text-color-dark: #b392f0;
$highlight-text-color-dark: #d2baff;
$text-button-color-dark: #f3f3fd;
// background colors
// ---------- light mode ----------
$background-color: linear-gradient(-45deg, #fcfdfdcc 0%, #fcfdfd99 100%);
$background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%);
$background-color-solid-gradient: linear-gradient(-45deg, #fcfdfd 0%, #fcfdfd 100%);
$background-color-solid: #fcfdfd;
$background-color-secondary: #fcfdfd4d;
$background-color-accent: #6f42c1;
@@ -44,6 +45,7 @@ $background-radial-gray-gradient: radial-gradient(
// ---------- dark mode ----------
$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
$background-color-solid-gradient-dark: linear-gradient(-45deg, #333333 0%, #2d2437 100%);
$background-color-solid-dark: #19191d;
$background-color-secondary-dark: #19191d99;
$background-color-accent-dark: #6f42c1;
@@ -105,19 +107,10 @@ $color5: #c7a8ff;
// old variables
$accent-color: #6f42c1;
$accent-color-dark: #c4abf1;
$highlight-accent-color: #e0dfff;
$highlight-accent-color-dark: #403e6a;
// $background-color: #fcfdfd;
// $background-color-dark: #19191d;
// $background-color-secondary: #e1e0ff80;
// $background-color-secondary-dark: #39394f99;
$background-color-gray: #f3f3f3;
$background-color-gray-dark: #232323;
// $border-color: #e0dfff;
// $border-color-dark: #403e6a;
$shadow-color: #3c3c431a;
$shadow-color-dark: #8f8f8f1a;

2
app/src/styles/base/base.scss
View File

@@ -11,6 +11,7 @@
// background colors
--background-color: #{$background-color};
--background-color-solid: #{$background-color-solid};
--background-color-solid-gradient: #{$background-color-solid-gradient};
--background-color-secondary: #{$background-color-secondary};
--background-color-accent: #{$background-color-accent};
--background-color-button: #{$background-color-button};
@@ -61,6 +62,7 @@
// background colors
--background-color: #{$background-color-dark};
--background-color-solid-gradient: #{$background-color-solid-gradient-dark};
--background-color-solid: #{$background-color-solid-dark};
--background-color-secondary: #{$background-color-secondary-dark};
--background-color-accent: #{$background-color-accent-dark};

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;

331
app/src/styles/layout/sidebar.scss
View File

@@ -7,7 +7,7 @@
top: 32px;
left: 8px;
background: var(--background-color);
backdrop-filter: blur(150px);
backdrop-filter: blur(15px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
@@ -30,10 +30,6 @@
padding: 0 8px;
width: 100%;
max-width: calc(100% - 32px);
.input-value {
color: var(--accent-color);
}
}
}
@@ -55,8 +51,6 @@
.active {
background: var(--background-color-accent);
outline: 1px solid var(--border-color);
outline-offset: -1px;
rect {
stroke: var(--icon-default-color-active);
}
@@ -64,7 +58,12 @@
fill: var(--icon-default-color-active);
}
&:hover {
background: var(--background-color-secondary);
rect {
stroke: var(--icon-default-color);
}
circle {
fill: var(--icon-default-color);
}
}
}
}
@@ -235,7 +234,6 @@
.outline-container {
height: 100%;
.outline-content-container {
position: relative;
height: 100%;
@@ -256,7 +254,7 @@
top: 32px;
right: 8px;
background: var(--background-color);
backdrop-filter: blur(150px);
backdrop-filter: blur(15px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
@@ -276,7 +274,7 @@
.share-button {
padding: 4px 12px;
color: var(--text-color);
color: var(--text-button-color);
background: var(--background-color-button);
font-weight: var(--font-weight-regular);
border-radius: #{$border-radius-large};
@@ -370,14 +368,14 @@
width: 34px;
border-radius: #{$border-radius-circle};
background: var(--background-color-secondary);
backdrop-filter: blur(8px);
box-shadow: #{$box-shadow-medium};
backdrop-filter: blur(12px);
outline: 1px solid var(--border-color);
outline-offset: -1px;
}
.active {
background: var(--background-color-accent);
outline: none;
}
}
@@ -395,55 +393,43 @@
.no-event-selected {
color: #666;
padding: 1.8rem 1rem;
padding: 16px;
grid-column: 1 / -1;
.products-list {
padding-top: 1rem;
.product-item {
text-align: start;
margin-top: 8px;
padding: 2px 0;
text-decoration: none;
display: flex;
flex-wrap: wrap;
gap: 6px;
button {
width: fit-content;
position: relative;
@include flex-center;
gap: 4px;
background: var(--background-color);
padding: 8px 12px;
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
&:hover {
background: var(--background-color-accent);
color: var(--text-button-color);
outline: none;
path {
stroke: var(--text-button-color);
stroke-width: 1.3;
}
}
}
}
.products-list-title {
text-align: start;
color: var(--accent-color);
font-size: var(--font-size-regular);
}
ul {
li {
text-align: start;
margin: 8px 0;
padding: 2px 0;
text-decoration: none;
&::marker {
content: "";
}
button {
width: fit-content;
position: relative;
transition: all 0.2s ease;
@include flex-center;
gap: 4px;
&:before {
content: "";
position: absolute;
left: 0;
bottom: -4px;
background: var(--accent-color);
height: 1px;
width: 0%;
transition: all 0.3s ease;
}
}
&:hover {
button {
path {
stroke: var(--accent-color);
strokeWidth: 1.5px;
}
color: var(--accent-color);
&:before {
width: 100%;
}
}
}
}
}
}
}
}
@@ -456,6 +442,9 @@
.sidebar-right-content-container {
.dataSideBar {
.inputs-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
.datas {
.input-value {
padding: 5px 10px;
@@ -487,6 +476,7 @@
.datas__class {
display: flex;
align-items: center;
gap: 12px;
.multi-level-dropdown {
width: 170px;
@@ -496,22 +486,13 @@
justify-content: space-between;
gap: 6px;
}
}
}
.datas__class {
display: flex;
gap: 12px;
// .datas__separator {
// }
.disable {
cursor: not-allowed;
pointer-events: none;
/* Disables all mouse interactions */
opacity: 0.5;
/* Optional: Makes the button look visually disabled */
.disable {
cursor: not-allowed;
pointer-events: none;
/* Disables all mouse interactions */
opacity: 0.5;
/* Optional: Makes the button look visually disabled */
}
}
}
}
@@ -522,12 +503,6 @@
padding-bottom: 6px;
}
.inputs-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
}
.selectedMain-container {
display: flex;
flex-direction: column;
@@ -627,10 +602,8 @@
width: 100%;
height: 150px;
background: #f0f0f0;
// border-radius: 8px;
display: flex;
align-items: center;
// justify-content: center;
}
.optionsContainer {
@@ -713,7 +686,7 @@
path {
stroke: var(--accent-color);
strokeWidth: 1.5px;
stroke-width: 1.5px;
}
&:hover {
@@ -742,14 +715,14 @@
.add-button {
@include flex-center;
padding: 2px 4px;
background: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-button);
color: var(--text-button-color);
border-radius: #{$border-radius-small};
cursor: pointer;
outline: none;
border: none;
path {
stroke: var(--primary-color);
stroke: var(--text-button-color);
}
&:disabled {
background: var(--text-disabled);
@@ -763,7 +736,7 @@
.value-field-container {
margin: 0;
input {
padding: 5px 4px;
padding: 5px 10px;
}
.dropdown {
top: 4px;
@@ -785,8 +758,8 @@
padding: 6px 12px;
.regularDropdown-container {
padding: 5px 8px;
outline: 2px solid var(--border-color);
outline-offset: -2px;
outline: 1px solid var(--border-color);
outline-offset: -1px;
border: none;
}
}
@@ -804,11 +777,10 @@
}
.lists-main-container {
margin: 2px 8px;
width: calc(100% - 12px);
margin-right: 4px;
margin: 2px;
width: calc(100% - 4px);
background: var(--background-color-gray);
border-radius: #{$border-radius-small};
border-radius: 8px;
min-height: 120px;
.list-container {
@@ -818,10 +790,9 @@
.list-item {
@include flex-space-between;
padding: 2px 12px;
padding: 4px 12px;
width: 100%;
margin: 2px 0;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-medium};
.value {
display: flex;
justify-content: flex-start;
@@ -953,6 +924,18 @@
}
}
.trigger-wrapper {
.trigger-item {
.trigger-name {
padding: 8px;
margin-top: 4px;
}
.value-field-container {
margin: 0;
}
}
}
.footer {
@include flex-center;
justify-content: flex-start;
@@ -962,10 +945,9 @@
}
.compare-simulations-container {
margin: 6px;
background: var(--background-color-gray);
padding: 12px;
border-radius: #{$border-radius-medium};
border-radius: #{$border-radius-large};
.compare-simulations-header {
font-weight: var(--font-weight-medium);
@@ -987,10 +969,12 @@
input {
width: fit-content;
background: var(--accent-color);
color: var(--highlight-accent-color);
padding: 2px 8px;
background: var(--background-color-button);
color: var(--text-button-color);
padding: 3px 10px;
cursor: pointer;
border: none;
outline: none;
}
}
}
@@ -1098,24 +1082,24 @@
input {
border: none;
outline: none;
cursor: pointer;
transition: all 0.2s;
&:hover {
transform: translateY(-2px);
box-shadow: #{$box-shadow-medium};
outline: 1px solid var(--accent-color);
outline: 1px solid var(--input-border-color);
}
}
.cancel {
background: transparent;
color: var(--accent-color);
background: var(--background-color-secondary);
color: var(--text-color);
}
.submit {
background: var(--accent-color);
color: var(--highlight-accent-color);
background: var(--background-color-button);
color: var(--text-button-color);
}
}
@@ -1123,7 +1107,7 @@
margin: 6px;
background: var(--background-color-gray);
padding: 12px;
border-radius: #{$border-radius-medium};
border-radius: #{$border-radius-large};
.custom-analysis-header {
font-weight: var(--font-weight-medium);
@@ -1145,28 +1129,53 @@
input {
width: fit-content;
background: var(--accent-color);
color: var(--highlight-accent-color);
padding: 2px 8px;
background: var(--background-color-button);
color: var(--text-button-color);
padding: 3px 10px;
cursor: pointer;
border: none;
outline: none;
}
}
}
}
}
.assets-container {
padding: 0 6px;
.assets-container-main {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
max-height: 50vh;
gap: 3px;
overflow: auto;
.assets-result {
width: 100%;
.assets-wrapper {
margin: 0;
}
}
.assets-list-section {
width: 100%;
padding: 4px;
}
.assets-wrapper {
width: 100%;
position: relative;
margin: 8px 10px;
h2 {
h2,
.searched-content {
color: var(--text-color);
font-family: $large;
font-weight: $bold-weight;
padding: 8px;
@include flex-space-between;
.back-button {
cursor: pointer;
}
}
.categories-container {
@@ -1175,14 +1184,16 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 8px;
padding: 10px 0;
gap: 4px;
padding: 2px;
.category {
width: 121px;
width: 123px;
height: 95px;
border-radius: 3.59px;
background: var(--background-color-gray);
border-radius: #{$border-radius-large};
background: var(--background-color);
outline: 1px solid var(--border-color);
outline-offset: -1px;
padding: 8px;
padding-top: 12px;
font-weight: $bold-weight;
@@ -1193,8 +1204,6 @@
position: relative;
z-index: 3;
font-size: var(--font-size-regular);
// -webkit-text-fill-color: transparent;
// -webkit-text-stroke: 1px black;
}
&::after {
@@ -1260,7 +1269,6 @@
.category-image {
position: absolute;
// top: 50%;
bottom: 0;
right: -10px;
transform: translate(0, 0%) scale(0.8);
@@ -1276,14 +1284,15 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
padding: 10px 0;
gap: 6px;
padding: 2px;
.assets {
width: 117px;
width: 122px;
height: 95px;
border-radius: #{$border-radius-small};
background: var(--background-color-gray);
border-radius: #{$border-radius-large};
background: var(--background-color);
outline: 1px solid var(--border-color);
font-weight: $medium-weight;
position: relative;
overflow: hidden;
@@ -1301,18 +1310,20 @@
z-index: 3;
padding: 8px;
width: 100%;
max-height: 38px;
height: 100%;
font-size: var(--font-size-regular);
background: color-mix(
in srgb,
var(--background-color) 40%,
transparent
background: linear-gradient(
0deg,
rgba(37, 24, 51, 0) 0%,
rgba(78, 22, 128, 0.4) 100%
);
backdrop-filter: blur(5px);
pointer-events: none;
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.3s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
@@ -1326,63 +1337,5 @@
}
}
}
.back-button {
position: absolute;
top: 0;
right: 0;
@include flex-center;
cursor: pointer;
}
}
}
.assets-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
padding: 10px 0;
.assets {
width: 117px;
height: 95px;
border-radius: 3.59px;
background: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $medium-weight;
position: relative;
overflow: hidden;
.asset-name {
position: relative;
z-index: 3;
font-size: var(--font-size-regular);
}
.asset-image {
height: 100%;
width: 100%;
position: absolute;
// top: 50%;
// right: 5px;
// transform: translate(0, -50%);
top: 0;
left: 0;
z-index: 2;
}
}
}
.assets-result {
width: 100%;
height: 100%;
margin: 8px 10px;
.assets-wrapper {
margin: 0;
}
}

72
app/src/styles/pages/realTimeViz.scss
View File

@@ -4,7 +4,6 @@
// Main Container
.realTime-viz {
background: #131313;
border-radius: 20px;
box-shadow: $box-shadow-medium;
width: calc(100% - (320px + 270px + 90px));
height: calc(100% - (250px));
@@ -24,19 +23,15 @@
}
.floating {
width: calc(var(--realTimeViz-container-width) * 0.2);
height: calc(var(--realTimeViz-container-width) * 0.05);
min-width: 250px;
max-width: 300px;
// min-height: 83px !important;
// max-height: 100px !important;
background: var(--background-color);
border: 1.23px solid var(--border-color);
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
box-shadow: 0px 4.91px 4.91px 0px #0000001c;
border-radius: $border-radius-medium;
padding: 18px;
@@ -67,12 +62,12 @@
.zone-wrapper {
display: flex;
background: var(--background-color);
backdrop-filter: blur(10px);
position: absolute;
bottom: 0px;
left: 50%;
gap: 6px;
border-radius: 8px;
max-width: 80%;
overflow: auto;
max-width: calc(100% - 500px);
min-width: 150px;
@@ -117,15 +112,15 @@
}
.active {
background: var(--accent-color);
color: var(--background-color);
// color: #FCFDFD !important;
background: var(--background-color-accent);
color: var(--text-button-color);
border: none;
outline: none;
}
}
.zone-wrapper.bottom {
bottom: var(--bottomWidth);
// bottom: 200px;
}
.content-container {
@@ -146,7 +141,6 @@
display: flex;
background: rgba(224, 223, 255, 0.5);
position: absolute;
// bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
gap: 6px;
@@ -189,7 +183,6 @@
border-radius: 6px;
overflow: auto;
z-index: $z-index-tools;
overflow: auto;
&::-webkit-scrollbar {
display: none;
@@ -203,7 +196,8 @@
display: flex;
flex-direction: column;
gap: 6px;
// background: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(10px);
&::-webkit-scrollbar {
display: none;
@@ -211,12 +205,10 @@
.chart-container {
width: 100%;
max-height: 100%;
border: 1px dashed var(--background-color-gray);
border-radius: 8px;
box-shadow: var(--box-shadow-medium);
padding: 6px 0;
background: var(--background-color);
position: relative;
padding: 0 10px;
@@ -255,14 +247,11 @@
color: var(--text-color);
&:hover {
background: var(--highlight-accent-color);
width: 100%;
.label {
color: var(--accent-color);
}
}
&:hover {
background: var(--highlight-accent-color);
width: 100%;
svg {
&:first-child {
@@ -285,7 +274,6 @@
}
}
.close-btn {
position: absolute;
top: 5px;
@@ -369,7 +357,6 @@
.playingFlase {
.zone-wrapper.bottom {
bottom: var(--bottomWidth);
// bottom: 210px;
}
}
@@ -402,7 +389,7 @@
}
.active {
background: var(--accent-color);
background: var(--background-color-accent);
}
&:hover {
@@ -417,8 +404,7 @@
height: 18px;
display: flex;
justify-content: center;
// align-items: center;
background: var(--accent-color);
background: var(--background-color-accent);
border: none;
color: var(--background-color);
border-radius: 4px;
@@ -426,24 +412,23 @@
.add-icon {
@include flex-center;
transition: rotate 0.2s;
}
path {
stroke: var(--primary-color);
stroke: var(--text-color);
stroke-width: 2;
}
}
.active {
background: #ffe3e0;
background: #f657482f;
.add-icon {
rotate: 45deg;
path {
stroke: #f65648;
stroke-width: 2;
stroke-width: 1.3;
}
@@ -596,12 +581,6 @@
}
.floating-wrapper {
.icon {
// width: 25px !important;
// height: 25px !important;
// background: transparent;
}
.kebab {
width: 25px;
height: 25px;
@@ -647,9 +626,6 @@
.label {
color: var(--accent-color);
}
}
&:hover {
background: var(--highlight-accent-color);
width: 100%;
@@ -669,22 +645,19 @@
}
.distance-line {
position: absolute;
border-style: dashed;
border-color: var(--accent-color);
/* Green color for visibility */
border-color: var(--background-color-accent);
border-width: 1px;
pointer-events: none;
/* Ensure lins don't interfere with dragging */
z-index: 10000;
}
/* Label styles for displaying distance values */
.distance-label {
position: absolute;
background: var(--accent-color);
color: white;
background: var(--background-color-accent);
color: var(--text-button-color);
font-size: 12px;
padding: 2px 6px;
border-radius: 3px;
@@ -756,15 +729,12 @@
}
.activeChart {
outline: 2px solid var(--accent-color);
outline: 1px solid var(--highlight-secondary-color);
z-index: 2 !important;
}
.chart-container.notLinked {
outline: 1px solid red;
}
.connectionSuccess {
@@ -983,4 +953,4 @@
opacity: 0;
transform: scaleY(0);
}
}
}