testing css things with a theme called sweetener

src/renderer/themes/sweetener.less

@@ -0,0 +1,68 @@
+@panelColorsFallback: rgb(30 30 30);
+@panelColors        : rgb(30 30 30 / 45%);
+
+.menu-panel {
+    .menu-panel-body {
+        background-color: @panelColors;
+        backdrop-filter : blur(32px) saturate(180%);
+        animation: menuIn .10s var(--appleEase);
+    }
+
+
+    @keyframes menuIn {
+        0% {
+            opacity   : 0;
+            transform : translateY(-10px);
+            background: @panelColorsFallback;
+        }
+
+        100% {
+            opacity   : 1;
+            transform : translateY(0);
+            background: @panelColors;
+        }
+    }
+
+}
+
+
+.cd-mediaitem-square:not(.mediaitem-card) {
+    transition      : transform .2s var(--appleEase);
+    transition-delay: .1s;
+    padding         : 12px;
+
+    // background-color: red;
+    height: 250px;
+
+
+    .artwork-container {}
+
+    .info-rect {}
+
+    .artwork-container,
+    .info-rect {
+        transition      : transform .22s var(--appleEase);
+        transition-delay: .05s;
+    }
+
+    &:hover {
+        .artwork-container {
+            transform       : scale(1.1) ;
+            transition      : transform .1s var(--appleEase);
+            transition-delay: 0s;
+            transform-origin: center;
+        }
+
+
+        .info-rect {
+            z-index         : 1;
+            transition      : transform .1s var(--appleEase);
+            transition-delay: 0s;
+            transform       : translateY(8px);
+        }
+    }
+
+    &:active {
+
+    }
+}

src/renderer/views/pages/settings.ejs

@@ -135,6 +135,7 @@
                         <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">