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

Refactor Assets component layout and styling; enhance Trigger dropdowns with labels; update MenuBar theme retrieval; fix icon import in AssetPreview; adjust Card component star rating display; modify AddButtons styles and functionality; improve variable definitions in SCSS files; streamline input component styles; refine marketplace card layout; enhance menu dropdown styles; update module toggle styles; adjust tools component styles; improve visualization floating styles; clean up sidebar styles; optimize realTimeViz styles for better responsiveness.

Browse Source
This commit is contained in:
Vishnu
2025-04-30 16:23:24 +05:30
parent 4152e611a9
commit 5119b014b7
23 changed files with 470 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,8 @@ $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;

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

33
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;
@@ -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,
@@ -116,10 +118,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 +134,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;

122
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);
}
}
}
@@ -235,7 +231,6 @@
.outline-container {
height: 100%;
.outline-content-container {
position: relative;
height: 100%;
@@ -256,7 +251,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 +271,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};
@@ -750,7 +745,7 @@
.value-field-container {
margin: 0;
input {
padding: 5px 4px;
padding: 5px 10px;
}
.dropdown {
top: 4px;
@@ -772,8 +767,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;
}
}
@@ -806,7 +801,6 @@
@include flex-space-between;
padding: 4px 12px;
width: 100%;
margin: 2px 0;
border-radius: #{$border-radius-medium};
.value {
display: flex;
@@ -939,6 +933,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;
@@ -948,10 +954,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);
@@ -973,10 +978,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;
}
}
}
@@ -1084,24 +1091,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);
}
}
@@ -1109,7 +1116,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);
@@ -1131,34 +1138,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 {
.assets-container-main {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
max-height: 50vh;
gap: 3px;
padding: 10px 0;
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 {
@@ -1167,8 +1193,8 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 0px 4px;
padding: 10px 0;
gap: 4px;
padding: 2px;
.category {
width: 123px;
@@ -1267,11 +1293,11 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 0px 4px;
padding: 10px 0;
gap: 6px;
padding: 2px;
.assets {
width: 123px;
width: 122px;
height: 95px;
border-radius: #{$border-radius-large};
background: var(--background-color);
@@ -1295,7 +1321,11 @@
width: 100%;
height: 100%;
font-size: var(--font-size-regular);
background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%);
background: linear-gradient(
0deg,
rgba(37, 24, 51, 0) 0%,
rgba(78, 22, 128, 0.4) 100%
);
pointer-events: none;
backdrop-filter: blur(8px);
opacity: 0;
@@ -1316,23 +1346,5 @@
}
}
}
.back-button {
position: absolute;
top: 0;
right: 0;
@include flex-center;
cursor: pointer;
}
}
}
.assets-result {
width: 100%;
height: 100%;
margin: 8px 10px;
.assets-wrapper {
margin: 0;
}
}

65
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,13 @@
}
.active {
background: var(--accent-color);
background: var(--background-color-accent);
color: var(--background-color);
// color: #FCFDFD !important;
}
}
.zone-wrapper.bottom {
bottom: var(--bottomWidth);
// bottom: 200px;
}
.content-container {
@@ -146,7 +139,6 @@
display: flex;
background: rgba(224, 223, 255, 0.5);
position: absolute;
// bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
gap: 6px;
@@ -189,7 +181,6 @@
border-radius: 6px;
overflow: auto;
z-index: $z-index-tools;
overflow: auto;
&::-webkit-scrollbar {
display: none;
@@ -204,6 +195,7 @@
flex-direction: column;
gap: 6px;
background: var(--background-color);
backdrop-filter: blur(10px);
&::-webkit-scrollbar {
display: none;
@@ -211,12 +203,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 +245,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 +272,6 @@
}
}
.close-btn {
position: absolute;
top: 5px;
@@ -369,7 +355,6 @@
.playingFlase {
.zone-wrapper.bottom {
bottom: var(--bottomWidth);
// bottom: 210px;
}
}
@@ -398,7 +383,7 @@
}
.active {
background: var(--accent-color);
background: var(--background-color-accent);
}
&:hover {
@@ -413,8 +398,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;
@@ -425,20 +409,20 @@
}
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;
}
}
}
@@ -589,12 +573,6 @@
}
.floating-wrapper {
.icon {
// width: 25px !important;
// height: 25px !important;
// background: transparent;
}
.kebab {
width: 25px;
height: 25px;
@@ -640,9 +618,6 @@
.label {
color: var(--accent-color);
}
}
&:hover {
background: var(--highlight-accent-color);
width: 100%;
@@ -662,22 +637,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;
@@ -749,15 +721,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 {
@@ -801,4 +770,4 @@
}
}
}
}
}