improvements to library-songs

src/renderer/style.less

@@ -496,6 +496,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   background: rgb(0 0 0 / 15%);
   flex-direction: column;
   padding: 20px 0px;
+
+  &.libraryNotification {
+    flex-direction: row;
+    padding: 0px;
+    .message {
+      flex-grow: 1;
+    }
+    .spinner {
+      width: 46px;
+      height: 30px;
+      margin-left: 1em;
+    }
+  }
 }
 
 .app-sidebar-content {
@@ -1843,24 +1856,29 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .md-select {
-  padding: 5px 10px;
-  font-size: 1em;
+  width: 100%;
+  padding: 6px;
+  border-radius: 6px;
+  border: 1px solid rgba(200, 200, 200, 0.1);
   font-family: inherit;
-  border-radius: 4px;
-  border: 1px solid rgb(100 100 100 / 35%);
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
-  background: #363636;
-  color: #eee;
-}
+  font-size: 14px;
+  background: rgba(100, 100, 100, 0.25);
+  color: #c8c8c8;
+  font-weight: 500;
 
-.md-select:focus {
-  outline: none;
-}
+  option {
+    font-size: 1em;
+    font-family: inherit;
+    padding: 8px 16px;
+  }
 
-.md-select > option {
-  font-size: 1em;
-  font-family: inherit;
-  padding: 8px 16px;
+  optgroup {
+    background: #2c2c2c;
+  }
+
+  &:focus {
+    outline: solid 1px var(--selected);
+  }
 }
 
 .sidebar-playlist {
@@ -2238,6 +2256,27 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+// Library - Songs page
+.library-page {
+  padding: 0px;
+  .library-header {
+    position: sticky;
+    top: 0;
+    left: 0;
+    border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+    z-index: 6;
+    background: black;
+    padding: 0px 2em;
+    backdrop-filter: blur(32px);
+    background: rgba(24, 24, 24, 0.15);
+    top: var(--navigationBarHeight);
+  }
+
+  .well {
+    margin: 2em;
+  }
+}
+
 /* Album / Playlist Page */
 .playlist-page {
   --bgColor: transparent;
@@ -2835,11 +2874,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   .info-rect {
-    width: 100%;
     height: 100%;
     display: flex;
     flex-flow: column;
     justify-content: center;
+    flex-grow: 1;
   }
 
   .title {
@@ -2848,7 +2887,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   .subtitle {
     width: 90%;
-    font-size: 12px;
+    font-size: .8em;
     opacity: 0.7;
   }
 
@@ -2870,21 +2909,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     justify-content: center;
   }
 
-  .content-rating {
-    text-transform: uppercase;
-    font-size: 10px;
-    border-radius: 3px;
-    background: rgb(200 200 200 / 15%);
-    width: 60px;
-    text-align: center;
-    padding: 5px;
-    margin-right: 12px;
-    flex: 0 0 auto;
-    font-weight: 500;
-    color: #ccc;
+  .explicit-icon {
+    background-image: url("./assets/explicit.svg");
+    height: 12px;
+    width: 36px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
   }
 
   .isLibrary {
+    flex: 0 0 auto;
+    width: 40px;
+    text-align: center;
     button {
       appearance: none;
       border: 0px;
@@ -2913,6 +2949,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     box-shadow: var(--mediaItemShadow);
     color: #eee;
   }
+
+//  list item compact
+  &.compact {
+    height: 40px;
+    font-size: 12px;
+    .artwork {
+      display: none;
+    }
+
+    .info-rect {
+      padding-left: 1em;
+    }
+  }
 }
 
 /* mediaitem-hrect */