From 4c0f66ac7568adb97d5d6531819c33a74f320a4b Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 17:31:35 -0700
Subject: [PATCH 1/5] change to footer
---
src/renderer/less/bootstrap.less | 23 ++++++++++++-----------
src/renderer/views/pages/settings.ejs | 26 ++++++++++++++++++++------
2 files changed, 32 insertions(+), 17 deletions(-)
diff --git a/src/renderer/less/bootstrap.less b/src/renderer/less/bootstrap.less
index a32d04bc..bb7120a7 100644
--- a/src/renderer/less/bootstrap.less
+++ b/src/renderer/less/bootstrap.less
@@ -1388,23 +1388,24 @@ fieldset:disabled .btn {
.btn-secondary {
color : #fff;
- background-color: #6c757d;
- border-color : #6c757d;
+ border-color : 1px solid rgba(100, 100, 100, 0.35);
+ background-color: rgba(100, 100, 100, 0.25);
+ border-top-color: 1px solid rgba(100, 100, 100, 0.5);
}
.btn-secondary:hover {
color : #fff;
- background-color: #5c636a;
- border-color : #565e64;
+ // background-color: #5c636a;
+ // border-color : #565e64;
}
-.btn-check:focus+.btn-secondary,
-.btn-secondary:focus {
- color : #fff;
- background-color: #5c636a;
- border-color : #565e64;
- box-shadow : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
-}
+// .btn-check:focus+.btn-secondary,
+// .btn-secondary:focus {
+// color : #fff;
+// background-color: #5c636a;
+// border-color : #565e64;
+// box-shadow : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
+// }
.btn-check:checked+.btn-secondary,
.btn-check:active+.btn-secondary,
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 3195af5e..a3526a65 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -964,11 +964,18 @@
-
-
- {{theme.name}}
-
-
+
+
+
+
+ {{theme.name}}
+
+
+
+ {{$root.getLz('settings.option.visual.theme.github.explore')}}
+
+
+
`,
@@ -985,8 +992,15 @@
}
},
methods: {
+ gitHubExplore() {
+ this.$root.appRoute("themes-github")
+ },
getThemeName(filename) {
- return this.themes.find(theme => theme.file === filename).name;
+ try {
+ return this.themes.find(theme => theme.file === filename).name;
+ }catch(e) {
+ return filename;
+ }
},
moveUp() {
const styles = this.$root.cfg.visual.styles
From 2a01b11ace86bb361b897924af76c8ff4f6fefe2 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 17:34:49 -0700
Subject: [PATCH 2/5] moved reloadStyle position in init
---
src/renderer/main/vueapp.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index e049ff71..adbcb950 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -581,6 +581,9 @@ const app = new Vue({
if (this.cfg.visual.theme != "default.less" && this.cfg.visual.theme != "") {
this.setTheme(this.cfg.visual.theme)
}
+ if (this.cfg.visual.styles.length != 0) {
+ this.reloadStyles()
+ }
if (this.platform == "darwin") {
this.chrome.windowControlPosition = "left"
@@ -899,9 +902,6 @@ const app = new Vue({
this.$forceUpdate()
}, 500)
ipcRenderer.invoke("renderer-ready", true)
- if (this.cfg.visual.styles.length != 0) {
- this.reloadStyles()
- }
document.querySelector("#LOADER").remove()
if (this.cfg.general.themeUpdateNotification) {
this.checkForThemeUpdates()
From b62bf9023c54e674ce8dcd84df32016bd210516f Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 17:49:08 -0700
Subject: [PATCH 3/5] restyled .dropdown, reloadStyles changes
---
src/renderer/less/bootstrap.less | 4 +++-
src/renderer/main/vueapp.js | 6 +++++-
src/renderer/style.less | 12 ++++++++++++
3 files changed, 20 insertions(+), 2 deletions(-)
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;
From 9eb1b408c94263062c168be76045824d5af1c714 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 18:10:57 -0700
Subject: [PATCH 4/5] added built in styles, reduce visuals and inline drawer
---
src/renderer/themes/compactui.less | 0
src/renderer/themes/groovy/index.less | 1 -
src/renderer/themes/groovy/theme.json | 15 ----
src/renderer/themes/inline_drawer.less | 41 +++++++++
src/renderer/themes/reduce_visuals.less | 115 ++++++++++++++++++++++++
src/renderer/views/pages/settings.ejs | 10 +++
6 files changed, 166 insertions(+), 16 deletions(-)
create mode 100644 src/renderer/themes/compactui.less
delete mode 100644 src/renderer/themes/groovy/index.less
delete mode 100644 src/renderer/themes/groovy/theme.json
create mode 100644 src/renderer/themes/inline_drawer.less
create mode 100644 src/renderer/themes/reduce_visuals.less
diff --git a/src/renderer/themes/compactui.less b/src/renderer/themes/compactui.less
new file mode 100644
index 00000000..e69de29b
diff --git a/src/renderer/themes/groovy/index.less b/src/renderer/themes/groovy/index.less
deleted file mode 100644
index ab0c0141..00000000
--- a/src/renderer/themes/groovy/index.less
+++ /dev/null
@@ -1 +0,0 @@
-//
\ No newline at end of file
diff --git a/src/renderer/themes/groovy/theme.json b/src/renderer/themes/groovy/theme.json
deleted file mode 100644
index db9f5469..00000000
--- a/src/renderer/themes/groovy/theme.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "name": "Groovy",
- "description": "Inspired by Groove Music and Media Player found on Windows",
- "version": "1.0.0",
- "author": "ciderapp",
- "github_repo": "ciderapp/Groovy",
- "directives": {
- "windowLayout": {
- "value": "twopanel"
- },
- "lcdArtworkSize": {
- "value": 70
- }
- }
-}
\ No newline at end of file
diff --git a/src/renderer/themes/inline_drawer.less b/src/renderer/themes/inline_drawer.less
new file mode 100644
index 00000000..a87f6a61
--- /dev/null
+++ b/src/renderer/themes/inline_drawer.less
@@ -0,0 +1,41 @@
+&:not(.modular-fs) {
+ .app-drawer {
+ border-radius: 0px;
+ top : 0;
+ right : 0;
+ height : 100%;
+ box-shadow : unset;
+ border-left : 1px solid var(--color2);
+ background : var(--color1);
+ margin-right : 0px;
+ position : relative;
+ }
+
+ .drawertransition-enter-active,
+ .drawertransition-leave-active {
+ transition: margin .25s var(--appleEase), opacity .25s var(--appleEase);
+ }
+
+ .drawertransition-enter,
+ .drawertransition-leave-to {
+ margin-right: -300px;
+ }
+
+ @media screen and (max-width: 1120px) {
+ .app-drawer {
+ margin-right: 0px;
+ position : absolute;
+ }
+
+ .drawertransition-enter-active,
+ .drawertransition-leave-active {
+ transition: right .25s var(--appleEase), opacity .25s var(--appleEase);
+ }
+
+ .drawertransition-enter,
+ .drawertransition-leave-to {
+ right: -300px;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/renderer/themes/reduce_visuals.less b/src/renderer/themes/reduce_visuals.less
new file mode 100644
index 00000000..9b23fb0a
--- /dev/null
+++ b/src/renderer/themes/reduce_visuals.less
@@ -0,0 +1,115 @@
+body {
+ --ciderShadow-Generic : var(--mediaItemShadow);
+ --mediaItemShadow-Shadow : var(--mediaItemShadow);
+ --mediaItemShadow-ShadowSubtle: var(--mediaItemShadow);
+}
+
+.bg-artwork-container {
+ display : none;
+ animation: none !important;
+
+ .bg-artwork {
+ animation: none !important;
+ }
+}
+
+.replaycard-enter-active,
+.replaycard-leave-active {
+ transition: unset;
+}
+
+.replaycard-enter,
+.replaycard-leave-to {
+ opacity : 0;
+ transform: translateY(20px);
+}
+
+.modal-enter-active,
+.modal-leave-active {
+ transition: unset;
+}
+
+.modal-enter,
+.modal-leave-to {
+ opacity : 0;
+ transform: scale(1.10);
+}
+
+.wpfade-enter-active,
+.wpfade-leave-active {
+ transition: opacity .1s var(--appleEase);
+}
+
+.wpfade-enter,
+.wpfade-leave-to {
+ opacity: 0;
+}
+
+.wpfade_transform-enter-active,
+.wpfade_transform-leave-active {
+ transition : unset;
+ will-change: unset;
+}
+
+.wpfade_transform-enter {
+ opacity : 0;
+ transform : unset;
+ will-change: unset;
+}
+
+.wpfade_transform-leave-to {
+ opacity : 0;
+ transform : unset;
+ will-change: unset;
+}
+
+
+.wpfade_transform_backwards-enter-active,
+.wpfade_transform_backwards-leave-active {
+ transition: unset;
+}
+
+.wpfade_transform_backwards-enter {
+ opacity : 0;
+ transform : unset;
+ will-change: unset;
+}
+
+.wpfade_transform_backwards-leave-to {
+ opacity : 0;
+ transform : unset;
+ will-change: unset;
+}
+
+.fabfade-enter-active,
+.fabfade-leave-active {
+ transition: unset;
+}
+
+.fabfade-enter,
+.fabfade-leave-to {
+ opacity : 0;
+ transform: scale(0.5);
+}
+
+.fsModeSwitch-enter-active,
+.fsModeSwitch-leave-active {
+ transition: unset;
+}
+
+.fsModeSwitch-enter,
+.fsModeSwitch-leave-to {
+ transform: scale(1.10);
+ opacity : 0;
+}
+
+
+.drawertransition-enter-active,
+.drawertransition-leave-active {
+ transition: unset;
+}
+
+.drawertransition-enter,
+.drawertransition-leave-to {
+ right: -300px;
+}
\ No newline at end of file
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index a3526a65..5b868266 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -991,6 +991,16 @@
newTheme: null
}
},
+ mounted() {
+ this.themes.unshift({
+ name: "Reduce Visuals",
+ file: "reduce_visuals.less"
+ })
+ this.themes.unshift({
+ name: "Inline Drawer",
+ file: "inline_drawer.less"
+ })
+ },
methods: {
gitHubExplore() {
this.$root.appRoute("themes-github")
From 6d7a00214fca72cebf2d16458a6dcde96ab8722f Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 11 Apr 2022 18:14:53 -0700
Subject: [PATCH 5/5] moved sweetener from theme to style
---
src/renderer/views/pages/settings.ejs | 5 ++++-
src/renderer/views/pages/themes-github.ejs | 1 -
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 5b868266..7a45c317 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -226,7 +226,6 @@