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

@@ -4,11 +4,13 @@
// text colors
--text-color: #{$text-color};
--text-disabled: #{$text-disabled};
--text-button-color: #{$text-button-color};
--input-text-color: #{$input-text-color};
--highlight-text-color: #{$highlight-text-color};
// background colors
--background-color: #{$background-color};
--background-color-solid: #{$background-color-solid};
--background-color-secondary: #{$background-color-secondary};
--background-color-accent: #{$background-color-accent};
--background-color-button: #{$background-color-button};
@@ -52,11 +54,13 @@
// text colors
--text-color: #{$text-color-dark};
--text-disabled: #{$text-disabled-dark};
--text-button-color: #{$text-button-color-dark};
--input-text-color: #{$input-text-color-dark};
--highlight-text-color: #{$highlight-text-color-dark};
// background colors
--background-color: #{$background-color-dark};
--background-color-solid: #{$background-color-solid-dark};
--background-color-secondary: #{$background-color-secondary-dark};
--background-color-accent: #{$background-color-accent-dark};
--background-color-button: #{$background-color-button-dark};
@@ -100,7 +104,7 @@
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: var(--background-color-gray);
background: var(--background-color-gray);
}
#root-over {
@@ -132,8 +136,8 @@ body {
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
@@ -142,13 +146,12 @@ body {
}
::-webkit-scrollbar-thumb {
background: var(--accent-color);
background: var(--background-color-button);
border-radius: 4px;
border: 2px solid var(--primary-color);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color);
background: var(--background-color-button);
}
::-webkit-scrollbar-corner {

View File

@@ -1,5 +1,9 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
section, .section{
padding: 12px;
outline: 1px solid var(--border-color);
border-radius: 16px;
border-radius: #{$border-radius-large};
background: var(--background-color);
}