tabs

src/renderer/less/directives.less

@@ -1,4 +1,3 @@
-
 #app.navbar {
   --navigationBarHeight: 38px;
 }
@@ -7,18 +6,21 @@
   --chromeHeight1: 46px;
   --chromeHeight2: 90px;
   --chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2));
+
   .modular-fs .app-drawer .lyric-footer {
     bottom: var(--chromeHeight2);
   }
+
   .app-chrome {
 
     &:not(.chrome-bottom) {
       .app-chrome--center {
         flex: 1;
+
         .top-nav-group {
           background   : @baseColor;
           border       : 1px solid lighten(@baseColor, 8);
-          border-radius: 10px;
+          border-radius: 12px;
           display      : flex;
           height       : 32px;
 
@@ -32,17 +34,44 @@
             align-items     : center;
             margin          : 0px;
             height          : 100%;
+            position        : relative;
+
+            &:before {
+              --dist          : 1px;
+              content         : '';
+              position        : absolute;
+              top             : var(--dist);
+              left            : var(--dist);
+              right           : var(--dist);
+              bottom          : var(--dist);
+              background-color: #fff;
+              opacity         : 0;
+              border-radius   : 10px;
+              transform       : scale(0.5);
+              transition      : transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+            }
 
             &:after {
               display: none;
             }
 
             &:hover {
-                  background-color: lighten(@baseColor, @colorMixRate * 5);
+              background-color: transparent;
+
+              &:before {
+                transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
+                opacity   : .1;
+                transform : scale(1);
+              }
             }
 
             &.active {
-                  background-color: lighten(@baseColor, @colorMixRate * 5);
+              background-color: transparent;
+
+              &:before {
+                opacity  : .2;
+                transform: scale(1);
+              }
             }
 
             &.md-btn-primary {
@@ -251,7 +280,8 @@
             -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
           }
 
-          .song-artist, .song-album {
+          .song-artist,
+          .song-album {
             font-size: 0.75em;
             opacity  : 0.8;
             cursor   : pointer;