new effect when entering fullscreen lyrics

src/renderer/style.less

@@ -208,6 +208,7 @@ body.notransparency::before {
   0% {
     transform: rotateZ(0deg);
   }
+
   100% {
     transform: rotateZ(360deg);
   }
@@ -217,7 +218,8 @@ body.notransparency::before {
   display: none !important;
 }
 
-input[type="text"], input[type="number"] {
+input[type="text"],
+input[type="number"] {
   background   : #1c1c1c;
   border-radius: 3px;
   border       : 1px solid rgb(200 200 200 / 25%);
@@ -248,6 +250,7 @@ a.dropdown-item {
     background-color: var(--selected);
     color           : var(--textColor);
   }
+
   &:active {
     background-color: var(--selected-click);
   }
@@ -270,6 +273,7 @@ a.dropdown-item {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -443,6 +447,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
       filter: brightness(80%) blur(180px) saturate(180%) contrast(1);
     }
   }
+
+  transition: .3s var(--appleEase);
 }
 
 .search-input-container {
@@ -522,6 +528,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
   .app-playback-controls {
     margin: 0 auto;
+
     .control-buttons {
       display        : flex;
       justify-content: center;
@@ -537,6 +544,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     display: flex;
     padding: 6px;
     border : 0;
+
     >button {
       appearance  : none;
       width       : 100%;
@@ -544,12 +552,15 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
       padding-left: 40px;
       text-align  : left;
       font-family : inherit;
+
       &:hover {
         background-color: var(--selected);
       }
+
       &:active {
         background-color: var(--selected-click);
       }
+
       &:after {
         content        : '';
         display        : flex;
@@ -683,10 +694,12 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     box-shadow     : var(--ciderShadow-Generic);
     backdrop-filter: var(--glassFilter);
     animation      : cmenuBodyIn .5s var(--appleEase);
+
     @keyframes cmenuBodyIn {
       0% {
         background: rgb(30 30 30);
       }
+
       100% {
         background: rgb(30 30 30 / 45%);
       }
@@ -1008,6 +1021,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-chrome .app-chrome--center {
+
   //width: 40%;
   .app-title-text {
     font-size: 0.8em;
@@ -1060,11 +1074,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   border-radius      : 6px;
 }
 
-.volume-button:active, .volume-button--small:active {
+.volume-button:active,
+.volume-button--small:active {
   transform: scale(0.9);
 }
 
-.volume-button.active, .volume-button--small.active {
+.volume-button.active,
+.volume-button--small.active {
   background-image: url("./assets/feather/volume.svg");
 }
 
@@ -1155,7 +1171,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     transform: scale(1.1);
   }
 
-  &:active, &.active {
+  &:active,
+  &.active {
     border-radius: 100%;
     transform    : scale(1.1);
     outline      : 2px solid var(--keyColor);
@@ -1175,9 +1192,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   >div {
     height: 100%;
     width : 32px;
+
     &:hover {
       background: rgb(200 200 200 / 10%);
     }
+
     &.close {
       width              : 100%;
       height             : 100%;
@@ -1190,6 +1209,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
         background-color: rgb(196, 43, 28)
       }
     }
+
     &.minmax {
       background-image   : var(--gfx-maxBtn);
       background-position: center;
@@ -1198,9 +1218,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
       width              : 100%;
       height             : 100%;
     }
+
     &.minmax.restore {
       background-image: var(--gfx-restoreBtn);
     }
+
     &.minimize {
       background-image   : var(--gfx-minBtn);
       background-position: center;
@@ -1256,6 +1278,7 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
     align-items       : center;
     width             : 100%;
   }
+
   .song-name {
     font-weight: 600;
     text-align : center;
@@ -1325,6 +1348,7 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
     z-index          : 1;
   }
 }
+
 // Add Music Video Icons to Songs that are Music Videos
 div[data-type="library-music-videos"] .info-rect .title::before,
 div[data-type="musicVideo"] .info-rect .title::before {
@@ -1460,6 +1484,7 @@ div[data-type="musicVideo"] .info-rect .title::before {
   flex               : 0 0 auto;
   margin             : 6px;
   image-rendering    : -webkit-optimize-contrast;
+
   .mediaitem-artwork {
     border-radius: var(--mediaItemRadiusSmall);
   }
@@ -1586,7 +1611,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 /* Window is smaller <= 1023px width */
 @media only screen and (max-width: 1120px) {
   .display--small {
-    display: inherit !important;;
+    display: inherit !important;
+    ;
 
     .slider {
       width  : 100%;
@@ -1742,6 +1768,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 .lyric-body:hover>.lyric-line:not(.active) {
   filter: none !important;
 }
+
 .lyric-body>.lyric-line:not(.active) {
   // transition: filter var(--appleEase) 0.5s ease;
 }
@@ -1786,7 +1813,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   transition     : opacity 0.1s var(--appleEase);
 }
 
-.lyric-body:hover + .lyric-footer, .lyric-footer:hover {
+.lyric-body:hover+.lyric-footer,
+.lyric-footer:hover {
   display: flex;
 }
 
@@ -1937,18 +1965,23 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       margin        : 0px 16px 0px 0px;
       pointer-events: none;
     }
+
     &.githubBtn {
       background-color: #211F1F;
     }
+
     &.kofiBtn {
       background-color: #FBAA19;
     }
+
     &.opencollectiveBtn {
       background-color: #7fadf2;
     }
+
     &.discordBtn {
       background-color: #5865F2;
     }
+
     &.twitterBtn {
       background-color: #1D9BF0;
     }
@@ -2037,9 +2070,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     display        : flex;
     flex-flow      : wrap;
     justify-content: center;
+
     .cd-mediaitem-square-container {
       align-items: center;
     }
+
     .cd-mediaitem-square {
       width          : 220px;
       height         : 260px;
@@ -2062,6 +2097,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       @media screen and (min-width: 1500px) {
         grid-template-columns: repeat(5, minmax(200px, 1fr));
       }
+
       // less than 1100px
       @media screen and (max-width: 1150px) {
         grid-template-columns: repeat(3, minmax(200px, 1fr));
@@ -2105,11 +2141,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   opacity     : 1;
   // animation: micaEnter 1s ease-in-out forwards;
   filter      : brightness(1) saturate(320%);
+
   @keyframes micaEnter {
     0% {
       opacity  : 0;
       transform: translateY(10px);
     }
+
     100% {
       opacity  : 1;
       transform: translateY(0px);
@@ -2137,9 +2175,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     z-index        : 14 !important;
     backdrop-filter: var(--glassFilter);
   }
+
   .app-navigation {
     height: 100%;
   }
+
   .app-drawer {
     width        : 100%;
     right        : 0px;
@@ -2200,6 +2240,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     opacity  : 0;
     transform: scale(0.98)
   }
+
   100% {
     opacity  : 1;
     transform: scale(1);
@@ -2332,9 +2373,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   transform: translateX(400px);
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: dark) {}
-
-}
 
 :root {
   --gfx-closeBtn  : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjM2LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MzYtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PmN2D9EAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAEtJREFUGJWNkMENwDAIA1FGY/8hkn8HOAqPfBsFKvz1yZYtbqwAlUIB6saUAH2NJ4MvL4PLgK/x13LAGTSqEaVa1a0x7XvcmI3D1wbntaRbB2haYwAAAABJRU5ErkJggg==');
@@ -2387,22 +2426,26 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       transition: 0.2s ease-in-out filter;
     }
   }
+
   .playback-info {
     position        : absolute;
     width           : 100%;
     bottom          : 0;
     padding         : 20px 40px;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%);
+
     .song-artist {
       font-size  : 1.7rem;
       font-weight: bold;
     }
+
     .song-name {
       font-size  : 1.2rem;
       font-weight: bold;
       color      : rgb(255, 255, 255, 0.8);
     }
   }
+
   input[type="range"] {
     align-self   : center;
     height       : 4px;
@@ -2412,6 +2455,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   .song-progress input[type="range"] {
     appearance: initial;
+
     &::-webkit-slider-thumb {
       box-shadow        : 0px 0px 0px #000000;
       border            : 1px solid #39404D;
@@ -2437,25 +2481,30 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   top   : 0;
   bottom: unset;
 }
+
 .inactive {
   opacity: 0;
 }
+
 #apple-music-video-player-controls {
   position: absolute;
   z-index : 100001;
   float   : left;
   width   : 100%;
   height  : 100%;
+
   .playback-info {
     .song-progress {
       display: flex;
     }
+
     .app-chrome-item.display--large {
       position      : relative;
       display       : flex;
       flex-direction: row;
       flex-wrap     : nowrap;
       align-items   : center;
+
       .playback-button {
         position : absolute;
         top      : 50%;
@@ -2464,6 +2513,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         padding  : 3px;
       }
     }
+
     .song-artist-album {
       font-weight    : 400;
       font-size      : 12px;
@@ -2609,6 +2659,7 @@ body.no-gpu {
   .bg-artwork-container {
     display  : none;
     animation: none !important;
+
     .bg-artwork {
       animation: none !important;
     }
@@ -2652,6 +2703,7 @@ body.no-gpu {
     backdrop-filter: unset;
     mix-blend-mode : unset;
     background     : #1c1c1c;
+    transition: unset;
   }
 
   .wpfade-enter-active,
@@ -2692,6 +2744,7 @@ body.no-gpu {
 .moreinfo-modal {
   .modal-window {
     height: max-content !important;
+
     .modal-content {
       height       : max-content !important;
       padding-block: 25px;