mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-18 22:44:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: modernisation of modal theme colours

Browse Source
This commit is contained in:
alexsparkes
2023-01-07 23:48:44 +00:00
parent 51dca6d107
commit 4920ae7b80
7 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/modals/main/marketplace/Items.jsx
View File

@@ -22,7 +22,7 @@ function Items({
collection.news
? { backgroundColor: collection.background_colour }
: {
backgroundImage: `linear-gradient(to right, rgba(0 ,0, 0, 0.9), rgba(0 ,0, 0, 0.7), transparent, rgba(0 ,0, 0, 0.7), rgba(0 ,0, 0, 0.9)), url('${collection.img}')`,
backgroundImage: `linear-gradient(to right, rgba(0 ,0, 0, 0.9), rgba(0 ,0, 0, 0.7), transparent, rgba(0 ,0, 0, 0.7), rgba(0 ,0, 0, 0.9)), url('${collection.img}')`,
}
}
>
@@ -71,6 +71,7 @@ function Items({
<span className="card-title">{item.display_name || item.name}</span>
<span className="card-subtitle">{item.author}</span>
</div>
{item.type}
</div>
))}
</div>

25
src/components/modals/main/scss/marketplace/_main.scss
View File

@@ -15,17 +15,18 @@
.item {
position: relative;
border-radius: 12px;
height: 70px;
width: auto;
padding: 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 15px;
transition: 0.5s;
display: flex;
flex-flow: column;
align-items: center;
text-align: center;
gap: 15px;
@include themed() {
background: t($modal-sidebar);
background: t($modal-secondaryColour);
box-shadow: 0 0 0 1px t($modal-sidebarActive);
&:hover {
background: t($modal-sidebarActive);
@@ -56,6 +57,7 @@
.card-details {
display: flex;
flex-flow: column;
gap: 5px;
.card-title {
font-size: 18px;
@@ -202,18 +204,15 @@
padding: 50px;
@include themed() {
border-radius: t($borderRadius);
background: t($modal-sidebar);
box-shadow: 0 0 0 4px t($modal-sidebarActive);
.sideloadIcon {
font-size: 50px;
color: t($subColor);
}
button {
display: flex;
flex-flow: row;
}
}
button {
display: flex;
flex-flow: row;
}
}

2
src/components/modals/main/scss/marketplace/modules/_item.scss
View File

@@ -30,7 +30,7 @@ p.description {
@include themed() {
background: t($modal-sidebar);
box-shadow: 0 0 0 4px t($modal-sidebarActive);
box-shadow: t(boxShadow);
border-radius: t($borderRadius);
padding: 15px;

9
src/components/modals/main/scss/modules/_navbar.scss
View File

@@ -1,6 +1,15 @@
.navbar-item {
flex-flow: row !important;
padding: 0 15px 0 15px;
@include themed() {
background: t($modal-secondaryColour) !important;
border-radius: t($borderRadius) !important;
box-shadow: t($boxShadow) !important;
border: 0px !important;
&:hover {
background: t($modal-sidebarActive) !important;
}
}
&:hover {
svg {
background: var(--tab-active);

12
src/components/modals/main/scss/settings/modules/tabs/_order.scss
View File

@@ -13,9 +13,9 @@
justify-content: space-between;
align-items: center;
background: t($modal-sidebar);
border: 3px solid t($modal-sidebarActive);
background: t($modal-secondaryColour);
border-radius: t($borderRadius);
box-shadow: t($boxShadow);
svg {
font-size: 1.3rem;
@@ -101,8 +101,9 @@
justify-content: center;
margin-top: 16px;
@include themed() {
background: t($modal-sidebar);
background: t($modal-secondaryColour);
border-radius: t($borderRadius);
box-shadow: t($boxShadow);
}
.previewContainer {
@@ -141,7 +142,8 @@
margin: 20px 20px 0;
}
@include themed() {
background: t($modal-sidebar);
background: t($modal-secondaryColour);
border-radius: t($borderRadius);
box-shadow: t($boxShadow);
}
}
}