fix: update background color in achievements panel and list

This commit is contained in:
Hachi-R 2025-02-02 20:33:04 -03:00
parent 2e85363966
commit ad85528666
2 changed files with 13 additions and 13 deletions

View File

@ -3,7 +3,7 @@
.achievement-panel { .achievement-panel {
width: 100%; width: 100%;
padding: globals.$spacing-unit * 2 globals.$spacing-unit * 3; padding: globals.$spacing-unit * 2 globals.$spacing-unit * 3;
background-color: globals.$dark-background-color; background-color: globals.$background-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;

View File

@ -66,9 +66,9 @@ $logo-max-width: 200px;
&__table-header { &__table-header {
width: 100%; width: 100%;
background-color: var(--color-dark-background); background-color: globals.$dark-background-color;
transition: all ease 0.2s; transition: all ease 0.2s;
border-bottom: solid 1px var(--color-border); border-bottom: solid 1px globals.$border-color;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@ -86,13 +86,13 @@ $logo-max-width: 200px;
gap: globals.$spacing-unit * 2; gap: globals.$spacing-unit * 2;
padding: globals.$spacing-unit * 2; padding: globals.$spacing-unit * 2;
width: 100%; width: 100%;
background-color: var(--color-background); background-color: globals.$background-color;
} }
&__item { &__item {
display: flex; display: flex;
transition: all ease 0.1s; transition: all ease 0.1s;
color: var(--color-muted); color: globals.$muted-color;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
@ -102,7 +102,7 @@ $logo-max-width: 200px;
text-align: left; text-align: left;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.15); background-color: globals.$border-color;
text-decoration: none; text-decoration: none;
} }
@ -129,7 +129,7 @@ $logo-max-width: 200px;
&-hidden-icon { &-hidden-icon {
display: flex; display: flex;
color: var(--color-warning); color: globals.$warning-color;
opacity: 0.8; opacity: 0.8;
&:hover { &:hover {
@ -164,7 +164,7 @@ $logo-max-width: 200px;
&--locked { &--locked {
cursor: pointer; cursor: pointer;
color: var(--color-warning); color: globals.$warning-color;
} }
&-icon { &-icon {
@ -219,12 +219,12 @@ $logo-max-width: 200px;
transition: all ease 0.2s; transition: all ease 0.2s;
&::-webkit-progress-bar { &::-webkit-progress-bar {
background-color: rgba(255, 255, 255, 0.15); background-color: globals.$border-color;
border-radius: 4px; border-radius: 4px;
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: var(--color-muted); background-color: globals.$muted-color;
border-radius: 4px; border-radius: 4px;
} }
} }
@ -236,7 +236,7 @@ $logo-max-width: 200px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--color-background); background-color: globals.$background-color;
position: relative; position: relative;
object-fit: cover; object-fit: cover;
@ -252,7 +252,7 @@ $logo-max-width: 200px;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
gap: math.div(globals.$spacing-unit, 2); gap: math.div(globals.$spacing-unit, 2);
color: var(--color-body); color: globals.$muted-color;
cursor: pointer; cursor: pointer;
&:hover { &:hover {