mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 05:23:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): update styles for modal and buttons, improve theme handling

Browse Source
This commit is contained in:
alexsparkes
2026-01-24 15:20:08 +00:00
parent 66fe285fb1
commit f58ad986da
5 changed files with 78 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Elements/MainModal/scss/index.scss
View File

@@ -89,13 +89,14 @@
height: 80vh;
width: clamp(60vw, 1400px, 90vw);
background-color: rgba(1, 1, 1, 0.7);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
overflow: hidden;
border-radius: 12px;
// @include themed {
// background-color: t($modal-background);
// }
@include themed {
background-color: t($modal-background);
}
}
/* fixes for font size on extension */

51
src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
View File

@@ -26,50 +26,37 @@
@include modal-button(standard);
padding: 10px 20px;
border-radius: 16px !important;
transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
border-radius: 12px !important;
transition: all 0.2s ease;
position: relative;
@include themed {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(209, 213, 219, 0.2) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
@media (prefers-color-scheme: dark) {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
}
.light & {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(209, 213, 219, 0.2) !important;
background: transparent !important;
border: none !important;
}
.dark & {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
background: transparent !important;
border: none !important;
}
&:hover {
@include themed {
backdrop-filter: blur(18px) saturate(190%);
-webkit-backdrop-filter: blur(18px) saturate(190%);
background: rgba(255, 255, 255, 0.15) !important;
background: rgba(0, 0, 0, 0.04) !important;
}
.light & {
background: rgba(255, 255, 255, 0.15) !important;
background: rgba(0, 0, 0, 0.04) !important;
}
.dark & {
background: rgba(255, 255, 255, 0.08) !important;
}
svg {
filter: brightness(1.1);
background: rgba(255, 255, 255, 0.06) !important;
}
}
@@ -96,22 +83,18 @@
.btn-navigation-active {
@include themed {
backdrop-filter: blur(20px) saturate(200%) !important;
-webkit-backdrop-filter: blur(20px) saturate(200%) !important;
background: rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
background: rgba(0, 0, 0, 0.06) !important;
box-shadow: none !important;
}
.light & {
background: rgba(255, 255, 255, 0.25) !important;
border: 1px solid rgba(209, 213, 219, 0.3) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
background: rgba(0, 0, 0, 0.06) !important;
border: none !important;
}
.dark & {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
background: rgba(255, 255, 255, 0.1) !important;
border: none !important;
}
}

7
src/components/Elements/MainModal/scss/modules/_topBar.scss
View File

@@ -10,10 +10,13 @@
padding: 1.5rem 1.5rem;
// width: 100%;
background-color: rgba(1, 1, 1, 0.9);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@include themed {
background-color: t($modal-background);
border-bottom: 1px solid t($modal-sidebarActive);
}
.topBarLeft {
display: flex;