From 9e52541ecfc1ec7b50efdb7a0cc506689aec01ff Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 23 Feb 2022 03:01:17 -0800
Subject: [PATCH] testing css things with a theme called sweetener

---
 src/renderer/themes/sweetener.less    | 68 +++++++++++++++++++++++++++
 src/renderer/views/pages/settings.ejs |  1 +
 2 files changed, 69 insertions(+)
 create mode 100644 src/renderer/themes/sweetener.less

diff --git a/src/renderer/themes/sweetener.less b/src/renderer/themes/sweetener.less
new file mode 100644
index 00000000..071be700
--- /dev/null
+++ b/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 {
+
+    }
+}
\ No newline at end of file
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 5b058845..c22010cb 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/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">