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.

This commit is contained in:
2025-04-29 16:27:03 +05:30
parent 77a6dda068
commit 45fea9465e
37 changed files with 491 additions and 525 deletions

View File

@@ -13,14 +13,15 @@
border-radius: #{$border-radius-large};
width: fit-content;
transition: width 0.2s;
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(8px);
z-index: #{$z-index-default};
.split {
height: 20px;
width: 2px;
border-radius: 2px;
background: var(--highlight-accent-color);
background: var(--text-disabled);
}
.draw-tools,
@@ -48,10 +49,10 @@
}
.active {
background-color: var(--accent-color);
background: var(--accent-color);
&:hover {
background-color: var(--accent-color);
background: var(--accent-color);
}
}
}
@@ -91,7 +92,7 @@
padding: 4px;
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--accent-color);
path {
@@ -117,7 +118,7 @@
@include flex-center;
padding: 3px;
border-radius: #{$border-radius-small};
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
gap: 2px;
position: relative;
@@ -131,7 +132,7 @@
&::after {
content: "";
position: absolute;
background-color: var(--accent-color);
background: var(--accent-color);
left: 3px;
top: 3px;
height: 18px;
@@ -161,7 +162,7 @@
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
cursor: pointer;
@include flex-center;
position: fixed;
@@ -174,7 +175,7 @@
font-weight: 700;
&:hover {
font-weight: 500;
background-color: var(--accent-color);
background: var(--accent-color);
color: var(--highlight-accent-color);
&::after{
animation: pulse 1s ease-out infinite;