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:
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user