New icon and animation for active search bar (thanks @Monochromish)

src/renderer/assets/search-alt.svg

@@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
 <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-  <path fill="white" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
+  <path fill="#fff" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
-  <ellipse style="fill: rgb(255, 255, 255);" cx="209.791" cy="207.093" rx="79.599" ry="79.599"/>
+  <path d="M236.475 116.292c-30.447 13.753-37.74 53.708-14.117 77.332 23.624 23.624 63.579 16.33 77.332-14.117 29.331 95.273-88.453 166.118-158.893 95.678s.406-188.224 95.678-158.893z" style="stroke-width:23.8909;fill:#fff"/>
 </svg>

src/renderer/less/pages.less

@@ -829,17 +829,31 @@
           border: none;
           cursor: pointer;
 
-          > img {
+          > ._svg-icon {
             width: 18px;
             height: 18px;
             margin: auto;
-            opacity: 0.5
+            opacity: 0.5;
           }
         }
 
         .search-btn.active {
-          > img {
+          animation: enlarge 0.5s ease-in-out;
-            opacity: 0.85
+
+          > ._svg-icon {
+            opacity: 1;
+          }
+        }
+
+        @keyframes enlarge {
+          0% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.2);
+          }
+          100% {
+            transform: scale(1);
           }
         }
       }

src/renderer/style.css

@@ -12074,7 +12074,7 @@ input[type=checkbox][switch]:checked:active::before {
   align-items: center;
   color: white;
 }
-.playback-button.navigation > svg {
+.playback-button.navigation > ._svg-icon {
   height: 16px;
   width: 16px;
   pointer-events: none;
@@ -13436,6 +13436,16 @@ input[type=checkbox][switch]:checked:active::before {
 .playlist-page .playlist-body.scrollbody .tabs .tab-content .tab-pane .well {
   margin: 0px;
 }
+.playlist-page .playlist-body .search-input-container {
+  height: 2.5rem;
+  margin: 1rem;
+  margin-top: 0;
+  scroll-margin-top: 1rem;
+}
+.playlist-page .playlist-body .search-input-container .search-input {
+  width: 100%;
+  height: 100%;
+}
 .playlist-page .floating-header {
   position: sticky;
   top: 0;
@@ -13625,6 +13635,38 @@ input[type=checkbox][switch]:checked:active::before {
   font-family: inherit;
   text-transform: uppercase;
 }
+.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn {
+  display: flex;
+  width: 32px;
+  align-items: center;
+  margin-right: 1rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn > ._svg-icon {
+  width: 18px;
+  height: 18px;
+  margin: auto;
+  opacity: 0.5;
+}
+.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active {
+  animation: enlarge 0.5s ease-in-out;
+}
+.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active > ._svg-icon {
+  opacity: 1;
+}
+@keyframes enlarge {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 .playlist-page .friends-info {
   display: flex;
   flex-flow: column;

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

@@ -111,7 +111,7 @@
                                     <button :class="['search-btn', showSearch ? 'active' : '']"
                                             @click="toggleSearch()"
                                             :aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
-                                        <img :src="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
+                                        <svg-icon :url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'"></svg-icon>
                                     </button>
                                     <button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
                                         <div class="svg-icon"></div>