Moved some things to be Less formatted

resources/cider-ui-tests/style.less

@@ -93,6 +93,7 @@ body[platform='linux'] {
   position: relative;
   overflow: hidden;
 }
+
 [hidden] {
   display: none !important;
 }
@@ -632,6 +633,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   from {
     transform: translateX(100%);
   }
+
   to {
     transform: translateX(-100%);
   }
@@ -875,11 +877,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   box-shadow: unset;
 }
 
-.playback-button:hover, .playback-button--small:hover {
+.playback-button:hover,
+.playback-button--small:hover {
   background-color: rgb(200 200 200 / 10%);
 }
 
-.playback-button:active, .playback-button--small:active {
+.playback-button:active,
+.playback-button--small:active {
   transform: scale(0.9);
 }
 
@@ -1326,10 +1330,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     opacity: 0.25;
     transform: scale(0.85);
   }
+
   50% {
     opacity: 1;
     transform: scale(1);
   }
+
   100% {
     opacity: 0.25;
     transform: scale(0.85);
@@ -1340,6 +1346,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   0% {
     opacity: 0.25;
   }
+
   100% {
     opacity: 1;
   }
@@ -1406,9 +1413,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 /* Album / Playlist Page */
 .playlist-page {
   padding: 0px;
-}
 
-.playlist-page .well {
+  .well {
     background: rgba(200, 200, 200, 0.05);
     border-radius: 10px;
     padding: var(--contentInnerPadding);
@@ -1416,51 +1422,50 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     margin-top: 16px;
   }
 
-.playlist-page .playlist-body {
+  .playlist-body {
     padding: var(--contentInnerPadding);
   }
 
   .playlist-display {
     padding: var(--contentInnerPadding);
     min-height: 300px;
-}
 
-.playlist-display .playlist-info{
+    .playlist-info {
       flex-shrink: unset;
       display: flex;
       flex-flow: column;
       justify-content: flex-end;
-}
 
-.playlist-display .playlist-info .playlist-name {
+      .playlist-name {
         font-weight: 700;
         font-size: 1.6rem;
         margin-bottom: 6px;
         margin-right: 6px;
         flex-shrink: unset;
-
       }
-.playlist-display .playlist-info .playlist-artist {
+
+      .playlist-artist {
         font-weight: 500;
         font-size: 1.6rem;
         margin-bottom: 6px;
         margin-right: 6px;
         flex-shrink: unset;
       }
-.playlist-display .playlist-info .playlist-desc {
+
+      .playlist-desc {
         box-sizing: border-box;
         font-size: 14px;
         flex-shrink: unset;
         margin-right: 5px;
         max-height: 100px;
         position: relative;
-}
+
-.playlist-display .playlist-info .playlist-desc .content {
+        .content {
           height: 100px;
           -webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
         }
 
-.playlist-display .playlist-info .playlist-desc .more-btn {
+        .more-btn {
           appearance: none;
           position: absolute;
           right: 0;
@@ -1481,14 +1486,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
           font-family: inherit;
           text-transform: uppercase;
         }
+      }
 
-.playlist-display .playlist-info .playlist-desc-expanded {
+      .playlist-desc-expanded {
         box-sizing: border-box;
         font-size: 14px;
         position: relative;
-}
 
-.playlist-display .playlist-info .playlist-desc-expanded .more-btn {
+        .more-btn {
           appearance: none;
           position: absolute;
           right: 0;
@@ -1509,20 +1514,24 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
           font-family: inherit;
           text-transform: uppercase;
         }
+      }
+    }
+  }
 
   .playlist-time {
     font-size: 0.9em;
     margin: 6px;
     opacity: 0.7;
   }
+}
+
 
 /* Artist Page */
 
 .artist-page {
   padding: 0px;
-}
 
-.artist-page .artist-header {
+  .artist-header {
     background: var(--keyColor);
     color: white;
     display: flex;
@@ -1530,19 +1539,43 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     justify-content: space-between;
     min-height: 300px;
     position: relative;
+
+    .animated {
+      width: 100%;
+      height: 100%;
+      align-self: center;
+      position: absolute;
+      overflow: hidden;
+      box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+
+      video {
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        min-height: 56.25vw;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
 
-.artist-page .artist-image {
+    .row .col.flex-center {
+      z-index: 4;
+    }
+  }
+
+  .artist-image {
     width: 200px;
     height: 200px;
     margin: 32px;
   }
 
-.artist-page .artist-body {
+  .artist-body {
     padding: var(--contentInnerPadding);
   }
 
-.artist-page .well {
+  .well {
     background: rgba(200, 200, 200, 0.05);
     border-radius: 10px;
     padding: var(--contentInnerPadding);
@@ -1550,7 +1583,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     margin-top: 16px;
   }
 
-.artist-page .showmoreless {
+  .showmoreless {
     font-family: inherit;
     font-size: 16px;
     font-weight: 500;
@@ -1565,10 +1598,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     float: right;
   }
 
-.artist-page .showmoreless:hover {
+  .showmoreless:hover {
     background: rgb(200 200 200 / 10%);
   }
-
+}
 
 /* Artist Page End */
 
@@ -1589,56 +1622,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   position: relative;
   width: 100%;
   height: 100%;
-}
+
-.mediaitem-artwork .animatedartwork-view-box .animated{
+  .animatedartwork-view-box {
     position: absolute;
     top: 0px;
     width: 100%;
     height: 100%;
-}
 
-.mediaitem-artwork .animatedartwork-view-box .animated > video {
+    .animated {
-  width: 100%;
-  height: 100%;
-}
-
-.mediaitem-artwork .animatedartwork-view-box{
       position: absolute;
       top: 0px;
       width: 100%;
       height: 100%;
-}
 
-.artist-header .animated{
+      video {
         width: 100%;
         height: 100%;
-  align-self: center;
+      }
-  position: absolute;
+    }
-  overflow: hidden;
-  box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
   }
 
-.artist-header .row .col.flex-center{
+  &.rounded {
-  z-index: 4;
+    border-radius: 100%;
-}
+    &::after {
-
-.artist-header .animated > video {
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
-  min-height: 56.25vw;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-
-}
-
-.mediaitem-artwork.rounded {
       border-radius: 100%;
     }
+  }
 
-.mediaitem-artwork::after {
+  &::after {
     content: "";
     box-shadow: var(--mediaItemShadow);
     z-index: 1;
@@ -1650,16 +1661,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     border-radius: inherit;
   }
 
-.mediaitem-artwork.rounded::after {
+  img {
-  border-radius: 100%;
-}
-
-.mediaitem-artwork>img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     image-rendering: -webkit-optimize-contrast;
   }
+}
 
 /* horizontal media scroller */
 .cd-hmedia-scroller {
@@ -1667,15 +1675,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   display: flex;
   flex-flow: row;
   overflow-x: scroll;
-}
 
-.cd-hmedia-scroller::-webkit-scrollbar-thumb{
+  &::-webkit-scrollbar-thumb {
     box-shadow: none;
   }
 
-.cd-hmedia-scroller:hover::-webkit-scrollbar-thumb{
+  &:hover::-webkit-scrollbar-thumb {
     box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
   }
+}
 
 /* mediaitem-list-item */
 .cd-mediaitem-list-item {
@@ -1689,13 +1697,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   align-items: center;
   cursor: pointer;
   border-bottom: 1px solid rgb(200 200 200 / 10%);
-}
 
-.cd-mediaitem-list-item:hover {
+  .artwork {
-  background: rgb(200 200 200 / 10%);
-}
-
-.cd-mediaitem-list-item .artwork {
     height: 34px;
     width: 34px;
     border-radius: var(--mediaItemRadius);
@@ -1708,35 +1711,35 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     outline: none;
   }
 
-.cd-mediaitem-list-item .artwork.round {
+  .artwork.round {
     border-radius: var(--mediaItemRadiusRound);
   }
 
-.cd-mediaitem-list-item .info-rect {
+  .info-rect {
     width: 100%;
   }
 
-.cd-mediaitem-list-item .title {
+  .title {
     width: 100%;
   }
 
-.cd-mediaitem-list-item .subtitle {
+  .subtitle {
     width: 90%;
     font-size: 12px;
     opacity: 0.7;
   }
 
-.cd-mediaitem-list-item .duration {
+  .duration {
     min-width: 60px;
     text-align: center;
   }
 
-.cd-mediaitem-list-item .metainfo {
+  .metainfo {
     min-width: 145px;
     text-align: center;
   }
 
-.cd-mediaitem-list-item .content-rating {
+  .content-rating {
     text-transform: uppercase;
     font-size: 10px;
     border-radius: 3px;
@@ -1750,12 +1753,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     color: #ccc;
   }
 
-.cd-mediaitem-list-item .isLibrary>button {
+  .isLibrary {
+    button {
       appearance: none;
       border: 0px;
       background: transparent;
       cursor: pointer;
     }
+  }
+
+  &:hover {
+    background: rgb(200 200 200 / 10%);
+  }
+}
 
 /* mediaitem-hrect */
 .cd-mediaitem-hrect {
@@ -1770,9 +1780,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   align-items: center;
   border-radius: 6px;
   cursor: pointer;
-}
 
-.cd-mediaitem-hrect .artwork {
+  .artwork {
     height: 70px;
     width: 70px;
     background: blue;
@@ -1784,24 +1793,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     margin: 18px;
   }
 
-.cd-mediaitem-hrect .artwork.round {
+  .artwork.round {
     border-radius: var(--mediaItemRadiusRound);
   }
 
-.cd-mediaitem-hrect .info-rect {
+  .info-rect {
     width: 100%;
   }
 
-.cd-mediaitem-hrect .title {
+  .title {
     width: 100%;
     text-align: center;
   }
 
-.cd-mediaitem-hrect .subtitle {
+  .subtitle {
     width: 100%;
     text-align: center;
     font-size: 12px;
   }
+}
 
 /* mediaitem-square-sp */
 .cd-mediaitem-square-sp {
@@ -1818,13 +1828,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   margin-left: 10px;
   cursor: pointer;
   background-color: var(--spcolor);
-}
 
-.cd-mediaitem-square-sp:hover {
+  .artwork {
-  box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
-}
-
-.cd-mediaitem-square-sp .artwork {
     height: 190px;
     width: 190px;
     background: blue;
@@ -1835,10 +1840,50 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     flex: 0 0 auto;
     margin: 6px;
     margin-top: 0px;
+
+    &.round {
+      border-radius: var(--mediaItemRadiusRound);
     }
 
-.artwork
+    &:hover {
-{height: 190px;
+      box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+    }
+  }
+
+  .title {
+    width: 90%;
+    text-align: center;
+  }
+
+  .subtitle {
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  >.cd-mediaitem-square-large-overlay {
+    z-index: 3;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  +.cd-mediaitem-square-large-overlay {
+    pointer-events: none;
+  }
+
+  &:hover+.cd-mediaitem-square-large-overlay {
+    opacity: 1;
+  
+  }
+
+  &:hover {
+    box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+  }
+}
+
+.artwork {
+  height: 190px;
   width: 190px;
   background: blue;
   border-top-left-radius: 6px;
@@ -1850,43 +1895,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   margin-top: 0px;
 }
 
-.cd-mediaitem-square-sp .artwork:hover {
-  box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
-}
-
-.cd-mediaitem-square-sp .artwork.round {
-  border-radius: var(--mediaItemRadiusRound);
-}
-
-.cd-mediaitem-square-sp .title {
-  width: 90%;
-  text-align: center;
-}
-
-.cd-mediaitem-square-sp .subtitle {
-  width: 100%;
-  text-align: center;
-  font-size: 12px;
-}
-
-
-.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay {
-  z-index: 3;
-}
-.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover {
-  opacity: 1;
-}
-
-.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay {
-  pointer-events: none;
-
-}
-
-.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay {
-  opacity: 1;
-
-}
-
 /* mediaitem-square-large */
 .cd-mediaitem-square-large {
   width: 190px;
@@ -1900,15 +1908,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   border-radius: 6px;
   margin-left: 10px;
   cursor: pointer;
-}
+
-.cd-mediaitem-square-large > * {
+  >* {
     z-index: inherit;
-
   }
-
+}
-/* .cd-mediaitem-square-large .artwork:hover {
-    box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
-} */
 
 .cd-mediaitem-square-large .artwork {
   height: 190px;
@@ -1939,9 +1943,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   pointer-events: auto;
 
 }
+
 .cd-mediaitem-square-large>.cd-mediaitem-square-large-overlay {
   z-index: 3;
 }
+
 .cd-mediaitem-square-large>.cd-mediaitem-square-large-overlay:hover {
   opacity: 1;
 }
@@ -2026,12 +2032,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   font-size: 16px;
   border-radius: 4px;
   padding: 6px;
-}
 
-.cd-btn-seeall:hover {
+  &:hover {
     cursor: pointer;
     background: rgb(200 200 200 / 10%)
   }
+}
 
 /* Cider */
 
@@ -2045,6 +2051,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 .wpfade-leave-to {
   opacity: 0;
 }
+
 /* Transitions End */
 
 @media (prefers-color-scheme: light) {
@@ -2162,4 +2169,6 @@ div#captions {
   color: yellow;
 }
 
-[v-cloak] {display: none!important}
+[v-cloak] {
+  display: none !important
+}