pilllssssss

src/renderer/less/elements.less

@@ -1861,4 +1861,107 @@ input[type=checkbox][switch]:checked:active::before {
 
 .search-tab.active {
   background: var(--keyColor);
+}
+
+// fancy pills
+.nav-pills {
+  position     : relative;
+  .nav-link {
+    transition: transform .3s var(--appleEase);
+    position  : relative;
+
+
+    &:after {
+      --dist: 1px;
+      content         : "";
+      position        : absolute;
+      top          : var(--dist);
+      bottom       : var(--dist);
+      left         : var(--dist);
+      right        : var(--dist);
+      // width   : 100%;
+      // height  : 100%;
+      background-color: transparent;
+      border-radius   : 50px;
+      z-index         : -1;
+      opacity         : 0;
+      transition: background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
+    }
+
+
+    &:hover {
+      outline      : none;
+      transform    : scale(1.1);
+      // background: #eee;
+      background   : transparent;
+      color        : #333;
+
+      &:after {
+        opacity: 1;
+        background-color: #eee;
+        transition: background-color .25s var(--appleEase),
+        border-radius .25s var(--appleEase),
+        color .0s var(--appleEase),
+        opacity 0.0s var(--appleEase);
+      }
+    }
+
+    &.active {
+      outline      : none;
+      transform    : scale(1.1);
+      // background: #eee;
+      background   : transparent;
+      color        : #333;
+
+      &:after {
+        opacity: 1;
+        background-color: #eee;
+      }
+    }
+
+
+  }
+
+  &:hover {
+    .nav-link.active {
+      outline   : none;
+      transform : scale(1.0);
+      background: transparent;
+      color: #eee;
+      transform : scale(1.0);
+
+      &:after {
+        background   : rgb(200 200 200 / 15%);
+        opacity      : 1;
+        transition: color 0s;
+        // border-radius: 5px;
+        --dist: 4px;
+      }
+
+      &:hover {
+        transform : scale(1.1);
+        z-index   : 1;
+        color     : #333;
+
+        &:after {
+          background: #eee;
+          border-radius: inherit;
+          --dist: 1px;
+        }
+      }
+    }
+  }
+
+  &:after {
+    content       : '';
+    position      : absolute;
+    top           : 0;
+    left          : 0;
+    bottom        : 0;
+    right         : 0;
+    background    : rgb(200 200 200 / 10%);
+    border-radius : 50px;
+    z-index       : 0;
+    pointer-events: none;
+  }
 }

src/renderer/less/pages.less

@@ -788,6 +788,14 @@
     }
   }
 
+  .pilldim {
+    .nav-pills {
+      width: max-content;
+      margin: 0 auto;
+      margin-top: 16px;
+    }
+  }
+
   &.plmin {
     .playlist-display {
       transition: min-height 0.5s ease-in-out;

src/renderer/views/pages/cider-playlist.ejs

@@ -149,7 +149,7 @@
             </div>
             <div class="playlist-body scrollbody">
 
-                <b-tabs pills align="center" content-class="mt-3">
+                <b-tabs pills class="track-pills pilldim" align="center" content-class="mt-3">
                     <b-tab :title="$root.getLz('term.tracks')">
                         <div @mouseover="minClass(true)">
                         <div class="">