Merge branch 'ciderapp:develop' into develop

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%;
@@ -1388,23 +1390,24 @@ fieldset:disabled .btn {
 
 .btn-secondary {
   color           : #fff;
-  background-color: #6c757d;
+  border-color    : 1px solid rgba(100, 100, 100, 0.35);
-  border-color    : #6c757d;
+  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;
+  // background-color: #5c636a;
-  border-color    : #565e64;
+  // border-color    : #565e64;
 }
 
-.btn-check:focus+.btn-secondary,
+// .btn-check:focus+.btn-secondary,
-.btn-secondary:focus {
+// .btn-secondary:focus {
-  color           : #fff;
+//   color           : #fff;
-  background-color: #5c636a;
+//   background-color: #5c636a;
-  border-color    : #565e64;
+//   border-color    : #565e64;
-  box-shadow      : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
+//   box-shadow      : 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
-}
+// }
 
 .btn-check:checked+.btn-secondary,
 .btn-check:active+.btn-secondary,

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) {
+                await this.reloadStyles()
+            }
 
             if (this.platform == "darwin") {
                 this.chrome.windowControlPosition = "left"
@@ -762,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) => {
@@ -899,9 +905,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()
@@ -986,6 +989,7 @@ const app = new Vue({
             less.registerStylesheetsImmediately()
             less.refresh(true, true, true)
             this.$forceUpdate()
+            return
         },
         macOSEmu() {
             this.chrome.forceDirectives["macosemu"] = {

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;

src/renderer/themes/groovy/index.less

@@ -1 +0,0 @@
-//

src/renderer/themes/groovy/theme.json

@@ -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
-        }
-    }
-}

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;
+        }
+    }
+
+}

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;
+}

src/renderer/views/pages/settings.ejs

@@ -226,7 +226,6 @@
                                 <select class="md-select" @change="$root.setTheme($root.cfg.visual.theme)" v-model="$root.cfg.visual.theme">
                                     <option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
                                     <option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
-                                    <option value="sweetener.less">Sweetener</option>
                                     <option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
                                 </select>
                                 <button class="md-btn md-btn-small md-btn-block" @click="gitHubExplore()" style="margin-top: 8px">
@@ -964,10 +963,17 @@
                             </b-col>
                         </b-row>
                         </b-list-group-item>
-                        <b-list-group-item variant="dark">
+                        <b-list-group-item slot="footer" style="-webkit-user-drag: none" variant="dark">
+                            <b-row>
+                                <b-col>
                                     <b-dropdown class="stylesDropdown" variant="primary" text="Add Style...">
                                         <b-dropdown-item v-for="theme in themes" @click="addStyle(theme.file)">{{theme.name}}</b-dropdown-item>
                                     </b-dropdown>
+                                </b-col>
+                                <b-col>
+                                    <b-btn @click="gitHubExplore()">{{$root.getLz('settings.option.visual.theme.github.explore')}}</b-btn>    
+                                </b-col>
+                            </b-row>
                         </b-list-group-item>
                 </draggable>    
             </div>
@@ -984,9 +990,30 @@
                 newTheme: null
             }
         },
+        mounted() {
+            this.themes.unshift({
+                name: "Sweetener",
+                file: "sweetener.less"
+            })
+            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")
+            },
             getThemeName(filename) {
+                try {
                     return this.themes.find(theme => theme.file === filename).name;                    
+                }catch(e) {
+                    return filename;
+                }
             },
             moveUp() {
                 const styles = this.$root.cfg.visual.styles

src/renderer/views/pages/themes-github.ejs

@@ -10,7 +10,6 @@
                             v-model="$root.cfg.visual.theme">
                         <option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
                         <option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
-                        <option value="sweetener.less">Sweetener</option>
                         <option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
                     </select>
                 </div>