mirror of https://github.com/mue/mue.git
feat: modernisation of modal theme colours
This commit is contained in:
parent
51dca6d107
commit
4920ae7b80
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {},
|
||||||
|
};
|
|
@ -22,7 +22,7 @@ function Items({
|
||||||
collection.news
|
collection.news
|
||||||
? { backgroundColor: collection.background_colour }
|
? { 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-title">{item.display_name || item.name}</span>
|
||||||
<span className="card-subtitle">{item.author}</span>
|
<span className="card-subtitle">{item.author}</span>
|
||||||
</div>
|
</div>
|
||||||
|
{item.type}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,17 +15,18 @@
|
||||||
.item {
|
.item {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
height: 70px;
|
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 15px;
|
||||||
|
|
||||||
@include themed() {
|
@include themed() {
|
||||||
background: t($modal-sidebar);
|
background: t($modal-secondaryColour);
|
||||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||||
&:hover {
|
&:hover {
|
||||||
background: t($modal-sidebarActive);
|
background: t($modal-sidebarActive);
|
||||||
|
@ -56,6 +57,7 @@
|
||||||
.card-details {
|
.card-details {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
@ -202,18 +204,15 @@
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
|
|
||||||
@include themed() {
|
@include themed() {
|
||||||
border-radius: t($borderRadius);
|
|
||||||
background: t($modal-sidebar);
|
|
||||||
box-shadow: 0 0 0 4px t($modal-sidebarActive);
|
|
||||||
|
|
||||||
.sideloadIcon {
|
.sideloadIcon {
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
color: t($subColor);
|
color: t($subColor);
|
||||||
}
|
}
|
||||||
button {
|
}
|
||||||
display: flex;
|
|
||||||
flex-flow: row;
|
button {
|
||||||
}
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -30,7 +30,7 @@ p.description {
|
||||||
|
|
||||||
@include themed() {
|
@include themed() {
|
||||||
background: t($modal-sidebar);
|
background: t($modal-sidebar);
|
||||||
box-shadow: 0 0 0 4px t($modal-sidebarActive);
|
box-shadow: t(boxShadow);
|
||||||
border-radius: t($borderRadius);
|
border-radius: t($borderRadius);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,15 @@
|
||||||
.navbar-item {
|
.navbar-item {
|
||||||
flex-flow: row !important;
|
flex-flow: row !important;
|
||||||
padding: 0 15px 0 15px;
|
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 {
|
&:hover {
|
||||||
svg {
|
svg {
|
||||||
background: var(--tab-active);
|
background: var(--tab-active);
|
||||||
|
|
|
@ -13,9 +13,9 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
background: t($modal-sidebar);
|
background: t($modal-secondaryColour);
|
||||||
border: 3px solid t($modal-sidebarActive);
|
|
||||||
border-radius: t($borderRadius);
|
border-radius: t($borderRadius);
|
||||||
|
box-shadow: t($boxShadow);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
|
@ -101,8 +101,9 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
@include themed() {
|
@include themed() {
|
||||||
background: t($modal-sidebar);
|
background: t($modal-secondaryColour);
|
||||||
border-radius: t($borderRadius);
|
border-radius: t($borderRadius);
|
||||||
|
box-shadow: t($boxShadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.previewContainer {
|
.previewContainer {
|
||||||
|
@ -141,7 +142,8 @@
|
||||||
margin: 20px 20px 0;
|
margin: 20px 20px 0;
|
||||||
}
|
}
|
||||||
@include themed() {
|
@include themed() {
|
||||||
background: t($modal-sidebar);
|
background: t($modal-secondaryColour);
|
||||||
border-radius: t($borderRadius);
|
border-radius: t($borderRadius);
|
||||||
|
box-shadow: t($boxShadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -16,6 +16,7 @@ $modal-sidebar: 'modal-sidebar';
|
||||||
$modal-sidebarActive: 'modal-sidebarActive';
|
$modal-sidebarActive: 'modal-sidebarActive';
|
||||||
$link: 'link';
|
$link: 'link';
|
||||||
$weather: 'weather';
|
$weather: 'weather';
|
||||||
|
$modal-secondaryColour: 'modal-secondaryColour';
|
||||||
|
|
||||||
$theme-colours: (
|
$theme-colours: (
|
||||||
'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
|
'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
|
||||||
|
@ -69,6 +70,7 @@ $themes: (
|
||||||
'modal-background': #fff,
|
'modal-background': #fff,
|
||||||
'modal-sidebar': rgba(240, 240, 240, 1),
|
'modal-sidebar': rgba(240, 240, 240, 1),
|
||||||
'modal-sidebarActive': rgba(219, 219, 219, 0.72),
|
'modal-sidebarActive': rgba(219, 219, 219, 0.72),
|
||||||
|
'modal-secondaryColour': #fafafa,
|
||||||
'link': rgba(83, 82, 237, 1),
|
'link': rgba(83, 82, 237, 1),
|
||||||
),
|
),
|
||||||
dark: (
|
dark: (
|
||||||
|
@ -81,9 +83,10 @@ $themes: (
|
||||||
'boxShadow': 0 0 0 1px #484848,
|
'boxShadow': 0 0 0 1px #484848,
|
||||||
'btn-background': #222,
|
'btn-background': #222,
|
||||||
'btn-backgroundHover': #565656,
|
'btn-backgroundHover': #565656,
|
||||||
'modal-background': #2f3542,
|
'modal-background': #0a0a0a,
|
||||||
'modal-sidebar': #353b48,
|
'modal-sidebar': #0e1013,
|
||||||
'modal-sidebarActive': rgba(65, 71, 84, 0.9),
|
'modal-sidebarActive': #333,
|
||||||
|
'modal-secondaryColour': #111,
|
||||||
'link': rgb(115, 115, 255),
|
'link': rgb(115, 115, 255),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
@ -174,7 +177,8 @@ $themes: (
|
||||||
@include themed() {
|
@include themed() {
|
||||||
@if $type == 'standard' {
|
@if $type == 'standard' {
|
||||||
background: t($modal-sidebar);
|
background: t($modal-sidebar);
|
||||||
border: 3px solid t($modal-sidebarActive);
|
box-shadow: t($boxShadow);
|
||||||
|
border: 0;
|
||||||
color: t($color);
|
color: t($color);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
Loading…
Reference in New Issue