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:
@@ -15,7 +15,8 @@ input {
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 1px solid var(--accent-color);
|
||||
outline: 1px solid var(--border-color-accent);
|
||||
background: var(--background-color-input-focus);
|
||||
}
|
||||
|
||||
&:-webkit-autofill,
|
||||
@@ -27,26 +28,19 @@ input {
|
||||
caret-color: var(--input-text-color);
|
||||
|
||||
// Background styles
|
||||
background-color: var(--background-color) !important;
|
||||
-webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
|
||||
background: var(--background-color-solid) !important;
|
||||
-webkit-box-shadow: 0 0 0px 1000px var(--background-color-solid) inset !important;
|
||||
}
|
||||
|
||||
// File input specific style adjustments
|
||||
&::file-selector-button {
|
||||
font-size: 14px;
|
||||
color: var(--accent-color);
|
||||
background-color: var(--background-color-secondary);
|
||||
background: var(--background-color-secondary);
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: #{$border-radius-small};
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
// Hover effect for the file button
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,8 +87,8 @@ input {
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
background: var(--background-color-button);
|
||||
color: var(--text-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,14 +96,13 @@ input {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 8px 10px;
|
||||
background: var(--background-color);
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
.search-container {
|
||||
@include flex-center;
|
||||
width: 100%;
|
||||
border-radius: #{$border-radius-small};
|
||||
background-color: var(--background-color);
|
||||
padding: 6px 2px;
|
||||
position: relative;
|
||||
border: 1px solid var(--border-color);
|
||||
@@ -129,7 +122,7 @@ input {
|
||||
font-weight: var(--font-weight-regular);
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
@@ -141,16 +134,17 @@ input {
|
||||
height: 24px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
background: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid var(--accent-color);
|
||||
background: var(--background-color-input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,7 +160,7 @@ input {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 12px;
|
||||
background-color: var(--background-color);
|
||||
background: var(--background-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
z-index: 1;
|
||||
@@ -182,7 +176,7 @@ input {
|
||||
gap: 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-secondary);
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
@@ -197,11 +191,11 @@ input {
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: var(--highlight-accent-color);
|
||||
background: var(--highlight-accent-color);
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
background: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -226,13 +220,13 @@ input {
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
background-color: var(--background-color);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: var(--primary-color);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
z-index: 10;
|
||||
@@ -241,6 +235,7 @@ input {
|
||||
left: 0;
|
||||
top: 110%;
|
||||
padding: 4px;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
.dropdown-search {
|
||||
margin-bottom: 4px;
|
||||
@@ -253,8 +248,8 @@ input {
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
background-color: var(--highlight-accent-color);
|
||||
color: var(--highlight-text-color);
|
||||
background: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -318,7 +313,7 @@ input {
|
||||
|
||||
.dropdown-button {
|
||||
width: 100%;
|
||||
background-color: var(--background-color) !important;
|
||||
background: var(--background-color) !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
padding: 5px 10px;
|
||||
|
||||
@@ -335,11 +330,11 @@ input {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #333333;
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
&.open {
|
||||
background-color: #333333;
|
||||
background: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -347,7 +342,7 @@ input {
|
||||
position: absolute;
|
||||
top: 110%;
|
||||
right: -16px;
|
||||
background-color: var(--background-color);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
@@ -412,7 +407,7 @@ input {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color);
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -435,12 +430,12 @@ input {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
&.open {
|
||||
color: var(--accent-color);
|
||||
background-color: var(--highlight-accent-color);
|
||||
background: var(--highlight-accent-color);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -472,8 +467,8 @@ input {
|
||||
}
|
||||
|
||||
.check-box {
|
||||
height: 22px;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
width: 38px;
|
||||
background: var(--background-color-secondary);
|
||||
border-radius: #{$border-radius-large};
|
||||
position: relative;
|
||||
@@ -481,8 +476,8 @@ input {
|
||||
|
||||
.check-box-style {
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
background: var(--accent-color);
|
||||
@@ -523,7 +518,7 @@ input {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--primary-color);
|
||||
background: var(--background-color-accent);
|
||||
border-radius: #{$border-radius-circle};
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
@@ -597,19 +592,19 @@ input {
|
||||
cursor: not-allowed;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background: var(--primary-color);
|
||||
background: var(--background-color-accent);
|
||||
box-shadow: none;
|
||||
outline: 4px solid var(--text-disabled);
|
||||
outline: -4px;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background: var(--primary-color);
|
||||
background: var(--background-color-accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
background: var(--primary-color);
|
||||
background: var(--background-color-accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -644,14 +639,10 @@ input {
|
||||
padding: 2px 32px;
|
||||
border: none;
|
||||
border-radius: #{$border-radius-large};
|
||||
color: var(--text-disabled);
|
||||
background: var(--accent-color);
|
||||
color: var(--text-color);
|
||||
background: var(--background-color-button);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -710,11 +701,6 @@ input {
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -722,8 +708,8 @@ input {
|
||||
.invite-button {
|
||||
padding: 4px 12px;
|
||||
border-radius: #{$border-radius-large};
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
background: var(--background-color-accent);
|
||||
color: var(--text-button-color);
|
||||
}
|
||||
|
||||
.multi-email-invite-input.active {
|
||||
@@ -770,7 +756,7 @@ input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: #{$border-radius-small};
|
||||
background-color: var(--background-color-gray);
|
||||
background: var(--background-color-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user