extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: modernisation of modal theme colours

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
postcss.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
plugins: {},
};

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);
}
}
}

12
src/scss/_variables.scss
View File

@ -16,6 +16,7 @@ $modal-sidebar: 'modal-sidebar';
$modal-sidebarActive: 'modal-sidebarActive';
$link: 'link';
$weather: 'weather';
$modal-secondaryColour: 'modal-secondaryColour';
$theme-colours: (
'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
@ -69,6 +70,7 @@ $themes: (
'modal-background': #fff,
'modal-sidebar': rgba(240, 240, 240, 1),
'modal-sidebarActive': rgba(219, 219, 219, 0.72),
'modal-secondaryColour': #fafafa,
'link': rgba(83, 82, 237, 1),
),
dark: (
@ -81,9 +83,10 @@ $themes: (
'boxShadow': 0 0 0 1px #484848,
'btn-background': #222,
'btn-backgroundHover': #565656,
'modal-background': #2f3542,
'modal-sidebar': #353b48,
'modal-sidebarActive': rgba(65, 71, 84, 0.9),
'modal-background': #0a0a0a,
'modal-sidebar': #0e1013,
'modal-sidebarActive': #333,
'modal-secondaryColour': #111,
'link': rgb(115, 115, 255),
),
);
@ -174,7 +177,8 @@ $themes: (
@include themed() {
@if $type == 'standard' {
background: t($modal-sidebar);
border: 3px solid t($modal-sidebarActive);
box-shadow: t($boxShadow);
border: 0;
color: t($color);
&:hover {