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

Refactor styles to use 'background' shorthand property instead of 'background-color' for consistency across components. Updated various components including confirmation pop-up, input fields, lists, marketplace, menu, module toggle, simulation, and more. Enhanced visual effects with backdrop filters and adjusted padding/margins for improved layout. Removed unnecessary styles and optimized hover effects for better user experience.

Browse Source
This commit is contained in:
Vishnu
2025-04-29 16:27:03 +05:30
parent 77a6dda068
commit 45fea9465e
37 changed files with 491 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
// Main Container
.realTime-viz {
background-color: #131313;
background: #131313;
border-radius: 20px;
box-shadow: $box-shadow-medium;
width: calc(100% - (320px + 270px + 90px));
@@ -66,7 +66,7 @@
.zone-wrapper {
display: flex;
background-color: var(--background-color);
background: var(--background-color);
position: absolute;
bottom: 0px;
left: 50%;
@@ -84,7 +84,7 @@
}
.arrow {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--background-color);
}
@@ -109,7 +109,7 @@
.zone {
width: auto;
background-color: var(--background-color);
background: var(--background-color);
border-radius: 6px;
padding: 4px 8px;
white-space: nowrap;
@@ -117,7 +117,7 @@
}
.active {
background-color: var(--accent-color);
background: var(--accent-color);
color: var(--background-color);
// color: #FCFDFD !important;
}
@@ -138,13 +138,13 @@
position: relative;
flex: 1;
height: 600px;
background-color: rgb(235, 235, 235);
background: rgb(235, 235, 235);
margin: 0 30px;
transition: height 0.3s ease, margin 0.3s ease;
.zone-wrapper {
display: flex;
background-color: rgba(224, 223, 255, 0.5);
background: rgba(224, 223, 255, 0.5);
position: absolute;
// bottom: 10px;
left: 50%;
@@ -162,7 +162,7 @@
.zone {
width: auto;
background-color: $background-color;
background: $background-color;
border-radius: 6px;
padding: 4px 8px;
white-space: nowrap;
@@ -170,7 +170,7 @@
transition: background-color 0.3s ease;
&.active {
background-color: var(--primary-color);
background: var(--primary-color);
color: var(--accent-color);
}
}
@@ -203,7 +203,7 @@
display: flex;
flex-direction: column;
gap: 6px;
background-color: var(--background-color);
background: var(--background-color);
&::-webkit-scrollbar {
display: none;
@@ -217,7 +217,7 @@
border-radius: 8px;
box-shadow: var(--box-shadow-medium);
padding: 6px 0;
background-color: var(--background-color);
background: var(--background-color);
position: relative;
padding: 0 10px;
@@ -237,7 +237,7 @@
top: 18px;
right: 5px;
transform: translate(0px, 0);
background-color: var(--background-color);
background: var(--background-color);
z-index: 10;
display: flex;
@@ -261,7 +261,7 @@
}
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
width: 100%;
svg {
@@ -353,7 +353,7 @@
border-radius: 8px;
box-shadow: var(--box-shadow-medium);
padding: 6px 0;
background-color: var(--background-color);
background: var(--background-color);
position: relative;
}
}
@@ -377,7 +377,7 @@
.side-button-container {
position: absolute;
display: flex;
background-color: var(--background-color);
background: var(--background-color);
padding: 2px;
border-radius: 2px;
transition: transform 0.3s ease;
@@ -398,7 +398,7 @@
}
.active {
background-color: var(--accent-color);
background: var(--accent-color);
}
&:hover {
@@ -414,7 +414,7 @@
display: flex;
justify-content: center;
// align-items: center;
background-color: var(--accent-color);
background: var(--accent-color);
border: none;
color: var(--background-color);
border-radius: 4px;
@@ -494,7 +494,7 @@
padding: 12px;
box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
border-radius: 8px;
background-color: white;
background: white;
position: absolute;
top: 20px;
right: -100%;
@@ -530,7 +530,7 @@
left: 1px;
width: 10px;
height: 10px;
background-color: var(--primary-color);
background: var(--primary-color);
border-radius: 50%;
}
}
@@ -584,7 +584,7 @@
}
.zone.active {
background-color: #007bff;
background: #007bff;
color: white;
}
@@ -592,7 +592,7 @@
.icon {
// width: 25px !important;
// height: 25px !important;
// background-color: transparent;
// background: transparent;
}
.kebab {
@@ -604,7 +604,7 @@
z-index: 10;
cursor: pointer;
@include flex-center;
background-color: transparent !important;
background: transparent !important;
}
.kebab-options {
@@ -612,7 +612,7 @@
top: 18px;
right: 5px;
transform: translate(0px, 0);
background-color: var(--background-color);
background: var(--background-color);
z-index: 10;
display: flex;
@@ -625,7 +625,7 @@
.icon {
width: 25px !important;
height: 25px !important;
background-color: transparent;
background: transparent;
}
.btn {
@@ -643,7 +643,7 @@
}
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
width: 100%;
svg {
@@ -675,7 +675,7 @@
/* Label styles for displaying distance values */
.distance-label {
position: absolute;
background-color: var(--accent-color);
background: var(--accent-color);
color: white;
font-size: 12px;
padding: 2px 6px;
@@ -769,7 +769,7 @@
.editWidgetOptions {
position: absolute;
background-color: var(--background-color);
background: var(--background-color);
z-index: 3;
display: flex;
flex-direction: column;
@@ -786,7 +786,7 @@
cursor: pointer;
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--accent-color);
}
@@ -794,7 +794,7 @@
color: #f65648;
&:hover {
background-color: #f657484d;
background: #f657484d;
color: #f65648;
}
}