Yeah, it’s a version thing; Roon updated the display files since last year. Here’s an updated diff of display_ui.html (to the one in 100700667):
2,80d1
< #background-albumart {
< z-index: 0;
< width: 100%;
< height: 100%;
< top: 0;
< left: 0;
< position: fixed;
< }
<
< #background-albumart div.front,#background-albumart div.back {
< background-size: cover;
< background-repeat: no-repeat;
< background-position: center center;
< width: 100%;
< height: 100%;
< top: 0;
< left: 0;
< position: absolute;
< animation-name: fadein;
< animation-duration: 1s;
< transition: opacity 1s linear;
< will-change: opacity;
< }
<
< #background-artistart {
< display: block;
< z-index: 1;
< width: 100%;
< height: 70%;
< overflow: hidden;
< }
<
< #background-artistart div {
< background-size: cover;
< background-repeat: no-repeat;
< background-position: center center;
< width: 100%;
< height: 70%;
< position: absolute;
< top: 0;
< left: 0;
< transition: opacity 1s linear;
< will-change: opacity;
< }
<
< #background-gradient {
< background-size: 100% 100%;
< background-position: left bottom;
< height: 22vh;
< visibility: visible;
< opacity:0;
< animation-name: fadein;
< animation-duration: 1s;
< transition: opacity 1s linear;
< will-change: opacity;
< }
<
< #background-dimming {
< background-size: cover;
< background-repeat: no-repeat;
< background-position: center center;
< background-color: rgba(20,19,19,1); /* #141313, which is the same as the desktop client background dimming layer color */
< width: 100%;
< height: 100%;
< top: 0;
< left: 0;
< position: absolute;
< animation-name: fadein;
< animation-duration: 1s;
< transition: opacity 1s linear;
< will-change: opacity;
< z-index:2;
< opacity:0;
< }
<
< #background-footer {
< background: linear-gradient(to right, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.4));
< height: 30%;
< }
94,237d14
< #lyricscontainer {
< opacity: 0;
< z-index: 3;
< width: 100%;
< height: 70%;
< position: fixed;
< top: 0;
< left: 0;
< overflow: hidden;
< transition: opacity 0.7s linear;
< }
<
< #background-lyrics {
< display: flex;
< flex-direction: column;
< background-color: rgba(0, 0, 0, 0.7);
< z-index: 1;
< width: 100%;
< height: 100%;
< position: absolute;
< top: 0;
< left: 0;
< }
<
< #lyricscountdown {
< display: flex;
< flex-direction: row;
< justify-content: center;
< opacity: 0;
< text-align: center;
< font-size: 4vw;
< font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
< font-weight: bold;
< transition: opacity 0.7s linear;
< will-change: opacity;
< }
<
< #lyricscountdown > * {
< margin: 1.4vw;
< }
<
< #lyricscountdown > span {
< color: white;
< opacity: 0.4;
< transition: opacity 0.2s linear;
< will-change: opacity;
< }
<
< #lyricscountdown > span.active {
< opacity: 1;
< }
<
< #lyricscountdown.reducedAnimation > span {
< transition: none;
< }
<
< #lyricscountdownicon {
< height: 2.5vw;
< width: 2.5vw;
< align-self: center;
< background-repeat: no-repeat;
< background-size: contain;
< background-position: center center;
< }
<
< #lyricsicon {
< opacity: 0;
< height: 2.8vh;
< width: 2.8vh;
< z-index: 3;
< position: absolute;
< right: 11.2vw;
< bottom: 32vh;
< background-repeat: no-repeat;
< background-size: contain;
< background-position: right bottom;
< transition: opacity 1s linear;
< }
<
< #lyricstextcontainer {
< background-color: transparent;
< z-index: 2;
< width: 100%;
< height: 100%;
< position: absolute;
< -webkit-mask-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 5%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.00) 85%);
< mask-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 5%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.00) 85%);
< }
<
< #lyricstextcontainer.reducedAlpha {
< -webkit-mask-image: none;
< mask-image: none;
< }
<
< .lyricstext {
< width: 80%;
< position: absolute;
< top: 70vh;
< left: 10vw;
< margin: 0px;
< padding: 0px;
< color: white;
< font-size: 3.3vw;
< font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
< line-height: 150%;
< font-weight: bold;
< text-align: center;
< user-select: none;
< -webkit-user-select: none;
< -moz-user-select: none;
< transition: transform 0.7s cubic-bezier(0.70, 0, 0.30, 1);
< will-change: transform;
< }
<
< .lyricstext > * {
< opacity: 0.4;
< padding: 0px;
< margin: 3.1vw 0px 3.1vw 0px;
< transition: transform 0.7s linear, opacity 0.7s linear;
< will-change: opacity;
< transform: scale(1); /* Edge won't smoothly transition back to original size without this */
< }
<
< #lyricstextcontainer.reducedAnimation .lyricstext > * {
< opacity: 0.1;
< }
<
< .lyricstext > .current {
< opacity: 1;
< transform: scale(1.125);
< }
<
< #lyricstextcontainer.reducedAnimation .lyricstext > .current {
< opacity: 1;
< }
<
< .lyricstext > .prevnext {
< opacity: 0.6;
< }
<
< #lyricstextcontainer.reducedAnimation .lyricstext > .prevnext {
< opacity: 0.4;
< }
<
239a17
> position: fixed;
241,245c19,22
< width: 22%;
< height: 39%;
< left: 10%;
< bottom: 10%;
< position: fixed;
---
> height: 100%;
> width: 56%;
> top: 0;
> left: 0;
252c29
< background-position: center bottom;
---
> background-position: left center;
260d36
< filter: drop-shadow(0px 0px 2.7vh rgba(0, 0, 0, 0.2));
261a38
>
271,274c48,51
< top: 70%;
< left: 34%;
< bottom: 10%;
< right: 10%;
---
> top: 40%;
> left: 57%;
> bottom: 40%;
> right: 1%;
297c74
< font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
---
> font-family: "Helvetica", "Noto Sans", "Noto Sans JP", "Noto Sans KR", sans-serif;
310a88
> color: white;
314,315c92,93
< height: 7vh;
< top: 2.5%;
---
> height: 5vh;
> top: 0px;
321c99,104
< top: 36%;
---
> top: 3vh;
> }
>
> #line3container {
> height: 5vh;
> top: 6vh;
323a107
>
326c110
< font-size: 5vh;
---
> font-size: 2.5vh;
332c116,120
< font-size: 3.5vh;
---
> font-size: 2.5vh;
> }
>
> #line3container span {
> font-size: 2.5vh;
339c127
< top: 59%;
---
> bottom: 2vh;
345c133
< font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
---
> font-family: "Helvetica", "Noto Sans", "Noto Sans JP", "Noto Sans KR", sans-serif;
351a140
> color: white;
359c148
< background-color: rgba(35, 33, 33, 0.3);
---
> background-color: rgba(33, 33, 33, 1);
360a150
> bottom: 6vh;
362d151
< bottom: 1.785vh;
368a158
> background-color: gray;
372c162
< background-color: #232121;
---
> background-color: white;
382c172
< bottom: 0.2vh;
---
> bottom: 6vh;
384c174
< height: 4vh;
---
> height: 3vh;
409a200
>
441,454d231
< <div id="background-albumart">
< <div class="back"></div>
< <div class="front"></div>
< <div id="background-dimming"></div>
< </div>
< <div id="background-artistart">
< <div class="back"></div>
< <div class="front"></div>
< </div>
< <div id="background-split">
< <div style="flex-grow: 1;"></div>
< <div id="background-gradient" class="visible"></div>
< <div id="background-footer"></div>
< </div>
456,469c233
< <div id="lyricscontainer">
< <div id="background-lyrics">
< <div style="flex-grow: 1;"></div>
< <div id="lyricscountdown">
< <span>3</span>
< <span>2</span>
< <span>1</span>
< <div id="lyricscountdownicon" class="lyricsicon"></div>
< </div>
< <div style="flex-grow: 1;"></div>
< </div>
< <div id="lyricstextcontainer" class="reducedAlphaAvailable reducedAnimationAvailable">
< </div>
< </div>
---
>
479,482c243,245
< <div id="infoicon"></div>
< <div id="progresstimecontainer" style="display: flex; flex-direction: row;">
< <p id="progresstime" class="progresstime"></p>
< <p id="totaltime" class="progresstime"></p>
---
> <div class="linecontainer" id="line3container">
> <span class="back"></span>
> <span class="front"></span>
492a256,259
> <div id="progresstimecontainer" style="display: flex; flex-direction: row;">
> <p id="progresstime" class="progresstime"></p>
> <p id="totaltime" class="progresstime"></p>
> </div>
494c261
< <div id="lyricsicon" class="lyricsicon"></div>
---
> <!-- <div id="lyricsicon" class="lyricsicon"></div> -->