diff --git a/src/assets/scss/themes/theme.material3.scss b/src/assets/scss/themes/theme.material3.scss index aa81a5b0..02088fc2 100644 --- a/src/assets/scss/themes/theme.material3.scss +++ b/src/assets/scss/themes/theme.material3.scss @@ -250,7 +250,6 @@ div[style*='margin: 0px 0px 10px;'] { .el-input-number--small, .el-input--small, .el-input__inner { - height: 45px !important; line-height: 45px !important; } @@ -345,22 +344,30 @@ input[type='number'], .el-pagination button.btn-prev { border-top-left-radius: 16px; border-bottom-left-radius: 16px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; padding-left: 12px; padding-right: 8px; } .el-pagination button.btn-prev::after { border-top-left-radius: 16px; border-bottom-left-radius: 16px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; } .el-pagination button.btn-next { border-top-right-radius: 16px; border-bottom-right-radius: 16px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; padding-left: 8px; padding-right: 8px; } .el-pagination button.btn-next::after { border-top-right-radius: 16px; border-bottom-right-radius: 16px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; } .el-pager li, .el-pager li.btn-quicknext, @@ -368,6 +375,7 @@ input[type='number'], position: relative; padding: 0 8px; font-weight: 500; + border-radius: 0px; background-color: rgb(var(--md-sys-color-secondary-container)); color: rgb(var(--md-sys-color-on-surface-variant)); } @@ -654,7 +662,8 @@ input[type='number'], display: none; } .el-table__expand-icon { - margin: 0 4px; + display: flex; + height: 100%; } .el-table__expand-icon--expanded, .x-friend-group > .el-icon-arrow-right.rotate { @@ -815,6 +824,13 @@ input[type='number'], transition: left 200ms cubic-bezier(0, 0.5, 0.5, 1.5); } +// Fix the white toggle +.el-switch__action { + background: transparent !important; + box-shadow: none !important; + display: none !important; +} + /* ---------- Segmented buttons ---------- */ .el-radio-button__inner, @@ -910,11 +926,24 @@ input[type='number'], background: rgb(93, 86, 107); } +// Override all element-plus theme coloring +.el-radio-button__inner { + --el-radio-button-checked-bg-color: rgb(var(--md-sys-color-secondary-container)); + --el-radio-button-checked-text-color: rgb(var(--md-sys-color-on-secondary-container)); + --el-radio-button-checked-border-color: rgb(var(--md-sys-color-outline)); +} + /* ---------- Filled button ---------- */ .el-button { position: relative; } + +.el-button--small.is-circle, +.el-button.is-circle { + width: 40px !important; +} + .el-button::after { position: absolute; content: ''; @@ -1332,6 +1361,7 @@ img.x-link.el-popover__reference { font-size: 20px; line-height: 20px; vertical-align: bottom; + background-color: transparent !important; color: rgb(var(--md-sys-color-on-surface-variant)); transition: color 0.1s ease-in-out; font-variation-settings: 'FILL' 0; @@ -1420,7 +1450,7 @@ img.x-link.el-popover__reference { border-radius: 28px; padding: 24px; background: var(--md-sys-color-surface-3); - margin: auto !important; + margin-top: 3%; } .el-dialog__body { padding: 0 !important; @@ -1563,6 +1593,13 @@ img.x-link.el-popover__reference { .color-picker { line-height: 32px; margin-right: 16px !important; + margin-left: 10px !important; +} +.el-color-picker { + padding: 5px; +} +.el-color-picker__trigger { + border: none; } .el-color-picker--small .el-color-picker__trigger { height: 32px; @@ -1573,7 +1610,6 @@ img.x-link.el-popover__reference { border-radius: 4px; } .el-color-picker__color-inner { - margin: 2px; border-radius: 4px; } .el-color-picker__panel { @@ -1588,6 +1624,11 @@ img.x-link.el-popover__reference { /* ---------- Menu ---------- */ +.el-popper.is-light { + border: 8px !important; + background: none !important; + border-radius: 8px !important; +} .el-popper[x-placement^='top'], .el-popper[x-placement^='bottom'] { margin: 0; @@ -1598,9 +1639,6 @@ img.x-link.el-popover__reference { border: none; border-radius: 8px; background: var(--md-sys-color-surface-2); - box-shadow: - 0 3px 6px rgba(0, 0, 0, 0.16), - 0 3px 6px rgba(0, 0, 0, 0.23); overflow: auto; max-height: 90%; } @@ -2216,6 +2254,25 @@ div.x-friend-list border-color: rgb(var(--md-sys-color-primary)) !important; } +// Fix the height difference of search bar +.el-select__wrapper, +.el-input__wrapper { + height: 32px !important; + box-sizing: border-box !important; + padding: 0 8px !important; +} +.el-select__wrapper .el-input__inner, +.el-input__wrapper .el-input__inner { + height: 100% !important; + line-height: 32px !important; +} + +.el-input__inner { + border: none !important; + background: transparent !important; + box-shadow: none !important; +} + .el-table { background-color: rgb(var(--md-sys-color-surface)) !important; } diff --git a/src/shared/constants/themes.js b/src/shared/constants/themes.js index 6b75d34d..77d248cc 100644 --- a/src/shared/constants/themes.js +++ b/src/shared/constants/themes.js @@ -4,7 +4,7 @@ import amoled from '../../assets/scss/themes/theme.amoled.scss?url'; // import darkvanillaold from '../../assets/scss/themes/theme.darkvanillaold.scss?url'; // import darkvanilla from '../../assets/scss/themes/theme.darkvanilla.scss?url'; // import pink from '../../assets/scss/themes/theme.pink.scss?url'; -// import material3 from '../../assets/scss/themes/theme.material3.scss?url'; +import material3 from '../../assets/scss/themes/theme.material3.scss?url'; export const THEME_CONFIG = { system: { @@ -27,7 +27,7 @@ export const THEME_CONFIG = { cssFile: amoled, isDark: true, name: 'Amoled' - } + }, // darkvanillaold: { // cssFile: darkvanillaold, // isDark: true, @@ -43,9 +43,9 @@ export const THEME_CONFIG = { // isDark: true, // name: 'Pink' // }, - // material3: { - // cssFile: material3, - // isDark: true, - // name: 'Material 3' - // } + material3: { + cssFile: material3, + isDark: true, + name: 'Material 3' + } };