diff --git a/src/renderer/less/bootstrap.less b/src/renderer/less/bootstrap.less index bb7120a7..ace079f4 100644 --- a/src/renderer/less/bootstrap.less +++ b/src/renderer/less/bootstrap.less @@ -35,10 +35,12 @@ color: #212529; text-align: left; list-style: none; - background-color: #fff; + background-color: var(--color1); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; + box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-ShadowSubtle); + backdrop-filter: var(--glassFilter); } .dropdown-menu[data-bs-popper] { top: 100%; diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js index adbcb950..e1abc256 100644 --- a/src/renderer/main/vueapp.js +++ b/src/renderer/main/vueapp.js @@ -582,7 +582,7 @@ const app = new Vue({ this.setTheme(this.cfg.visual.theme) } if (this.cfg.visual.styles.length != 0) { - this.reloadStyles() + await this.reloadStyles() } if (this.platform == "darwin") { @@ -765,6 +765,9 @@ const app = new Vue({ ipcRenderer.on('theme-update', (event, arg) => { less.refresh(true, true, true) self.setTheme(self.cfg.visual.theme, true) + if (app.cfg.visual.styles.length != 0) { + app.reloadStyles() + } }) ipcRenderer.on('SoundCheckTag', (event, tag) => { @@ -986,6 +989,7 @@ const app = new Vue({ less.registerStylesheetsImmediately() less.refresh(true, true, true) this.$forceUpdate() + return }, macOSEmu() { this.chrome.forceDirectives["macosemu"] = { diff --git a/src/renderer/style.less b/src/renderer/style.less index 7d50fab8..aa4d73ee 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -44,6 +44,7 @@ --songProgressBackground: #333; --textColor: #eee; --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%)); + --glassFilter: blur(16px) saturate(180%); } *:focus-visible { @@ -238,6 +239,17 @@ input[type="text"], input[type="number"] { opacity: 0.70; } +a.dropdown-item { + color: var(--textColor); + + &:hover { + background-color: var(--selected); + color: var(--textColor); + } + &:active { + background-color: var(--selected-click); + } +} .bg-artwork { position: absolute;