audiolabs selector changes

src/renderer/less/pages.less

@@ -862,7 +862,9 @@
   .spprofile-line {
     height: 300px;
     width: 100%;
+    max-width: 1024px;
     padding: 16px;
+    margin: 0 auto;
 
     .spprofile-viewport {
       height: 100%;
@@ -877,24 +879,48 @@
         height: 100%;
         width: 64px;
         top: 0;
-        background: #eee;
+        background: rgb(0 0 0 / 20%);
         z-index: 1;
         border: 0px;
-        -webkit-mask-position: center;
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-size: 1em;
+        transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
+        &:hover {
+          background: var(--selected);
+          transform: scale(1.1);
+        }
 
+        &:active {
+          transition: background 0s var(--appleEase);
+          background: var(--selected-click);
+        }
+
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: #eee;
+          opacity: 1;
+          -webkit-mask-position: center;
+          -webkit-mask-repeat: no-repeat;
+          -webkit-mask-size: 1em;
+        }
       }
 
       .spprev {
         left: 0;
-        -webkit-mask-image: url("./views/svg/chevron-left.svg");
+        &:before {
+          -webkit-mask-image: url("./views/svg/chevron-left.svg");
+        }
 
       }
 
       .nextprev {
         right: 0;
-        -webkit-mask-image: url("./views/svg/chevron-right.svg");
+        &:before {
+          -webkit-mask-image: url("./views/svg/chevron-right.svg");
+        }
 
       }
 
@@ -905,14 +931,40 @@
         overflow: hidden;
         background: black;
 
+        >img {
+          WIDTH: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
         .sptitle {
           position: absolute;
-          bottom: 32px;
+          bottom: 0px;
           left: 0;
-          width:100%;
+          width: 100%;
           text-align: center;
+          font-size: 18px;
+          text-shadow: 0px 2px 4px #00000033;
         }
       }
+
+      .spfade-enter-active,
+      .spfade-leave-active {
+        --transitionTime: 0.2s;
+        transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
+        will-change: opacity, transform;
+      }
+
+      .spfade-enter {
+        opacity: 0;
+        transform: scale(1.2) translate3d(0,0,0);
+        will-change: opacity, transform;
+      }
+      .spfade-leave-to {
+        opacity: 1;
+        transform: scale(1) translate3d(0,0,0);
+        will-change: opacity, transform;
+      }
     }
   }