Merge branch 'main' of https://github.com/CiderApp/Cider

src/renderer/style.less

@@ -3583,6 +3583,33 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     height: 50vh;
   }
 
+  .background{
+    position: absolute;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+
+    .bgArtworkMaterial {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+  
+      .bg-artwork-container{
+        z-index: unset;
+      }
+      
+      .bg-artwork-container .bg-artwork {
+        filter: brightness(80%) saturate(69%) blur(180px) contrast(0.8) opacity(0.8);
+      }
+
+      .no-animation{
+        animation : unset;
+      }
+    }
+  }
+
+
+
   .lyrics-col{
 
     width: 60vh;
@@ -3602,6 +3629,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       display: flex;
       justify-content: center;
     }
+
+    .lyric-line{
+      font-size: 35px;
+    }
+
   } 
 
   .queue-col{
@@ -3798,6 +3830,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 // Modular
 .modular-fs {
   .app-drawer {

src/renderer/views/components/fullscreen.ejs

@@ -1,5 +1,14 @@
 <script type="text/x-template" id="fullscreen-view">
     <div class="fullscreen-view">
+        <div class="background">
+            <div class="bgArtworkMaterial">
+                <div class="bg-artwork-container">
+                    <img v-if="(app.cfg.visual.bg_artwork_rotation || app.animateBackground)" class="bg-artwork a" :src="image.replace('600x600','30x30') ?? ''">
+                    <img v-if="(app.cfg.visual.bg_artwork_rotation || app.animateBackground)" class="bg-artwork b" :src="image.replace('600x600','30x30') ?? ''">
+                    <img v-if="!(app.cfg.visual.bg_artwork_rotation || app.animateBackground)" class="bg-artwork no-animation" :src="image.replace('600x600','30x30') ?? ''">
+                </div>
+            </div>
+        </div>
         <div class="row fs-row">
             <div class="col artwork-col">
                 <div class="artwork"  @click="app.appMode = 'player'">