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