Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-19 04:00:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added auto scroll when text is too long

Browse Source
This commit is contained in:
nutty
2026-07-23 15:15:44 +10:00
parent 6795224fea
commit 1c3ddbd907
14 changed files with 389 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/script.js
+57 -15
View File
@@ -11,6 +11,7 @@ const urlParams = new URLSearchParams(queryString);
const REQUIRED_VERSION = '0.0.2';
const SMTC_BRIDGE_DOWNLOAD_URL = 'https://github.com/nuttylmao/smtc-bridge/releases';
let VersionChecked = false;
///////////////////
// PAGE ELEMENTS //
@@ -70,21 +71,6 @@ else
// Set text alignment
document.documentElement.style.setProperty('--text-alignment', `${textAlignment}`);
switch (textAlignment)
{
case 'left':
document.documentElement.style.setProperty('--justify-content', `flex-start`);
document.documentElement.style.setProperty('--trailing-fade', `linear-gradient(to right, black calc(100% - 1em), transparent 100%)`);
break;
case 'center':
document.documentElement.style.setProperty('--justify-content', `center`);
document.documentElement.style.setProperty('--trailing-fade', `linear-gradient(to right, black calc(100% - 1em), transparent 100%)`);
break;
case 'right':
document.documentElement.style.setProperty('--justify-content', `flex-end`);
document.documentElement.style.setProperty('--trailing-fade', ``);
break;
}
@@ -167,7 +153,10 @@ async function FetchMedia() {
}
// Check the SMTC Bridge version
if (!VersionChecked) {
CheckSMTCBridgeVersion(data.app_version);
VersionChecked = true;
}
// Update the UI with the received data
// console.log(data);
@@ -411,3 +400,56 @@ function SetVisibility(visible) {
mainWrapper.style.animation = `${hideAnimation} 0.5s ease-out forwards`;
}
}
// MARQUEE LOGIC
// This is a more advanced marquee implementation that calculates the overflow distance and adjusts the scroll speed accordingly
const labelData = new Map();
// Adjust this value to change scroll speed (pixels per second)
const SCROLL_SPEED_PX_PER_SEC = 40;
function SetLabelText(elementId, text) {
const label = document.getElementById(elementId);
if (!label) return;
labelData.set(elementId, text);
ApplyMarquee(label, text);
// Keep it responsive on container resize
if (!label._resizeObserver) {
label._resizeObserver = new ResizeObserver(() => {
const currentText = labelData.get(elementId);
if (currentText) ApplyMarquee(label, currentText);
});
label._resizeObserver.observe(label);
}
}
function ApplyMarquee(label, text) {
// 1. Render single span to measure dimensions
label.classList.remove('is-overflowing');
label.innerHTML = `<span class="scroll-content">${text}</span>`;
const scrollContent = label.querySelector('.scroll-content');
const textWidth = scrollContent.scrollWidth;
const containerWidth = label.clientWidth;
const overflowDistance = textWidth - containerWidth;
// 2. Check if text exceeds container
if (overflowDistance > 0) {
// Calculate travel distance in percentage relative to scrollContent's width
const distancePercent = (overflowDistance / textWidth) * 100;
// Compute duration to keep speed consistent regardless of length
// We multiply travel time by 2 (for both directions) plus 3 seconds for pauses
const travelTime = overflowDistance / SCROLL_SPEED_PX_PER_SEC;
const totalDuration = (travelTime * 2) + 3;
// Pass calculated variables to CSS
scrollContent.style.setProperty('--scroll-distance', `-${distancePercent}%`);
label.style.setProperty('--marquee-duration', `${totalDuration}s`);
label.classList.add('is-overflowing');
}
}
now-playing/style.css
+110 -1
View File
@@ -10,7 +10,8 @@ body {
justify-content: center;
align-items: center;
height: 100vh;
margin: 0.5em;
padding: 0.5em;
box-sizing: border-box;
}
@@ -141,3 +142,111 @@ body {
opacity: 0;
}
}
@property --mask-left {
syntax: '<color>';
inherits: false;
initial-value: black;
}
@property --mask-right {
syntax: '<color>';
inherits: false;
initial-value: transparent;
}
.text-label {
--fade-width: 0.5em;
white-space: nowrap;
overflow: hidden;
display: block;
width: 100%;
mask-image: var(--trailing-fade);
-webkit-mask-image: var(--trailing-fade);
transition: opacity 0.25s ease-in-out;
}
.text-label:empty {
display: none !important;
}
.text-label:has(.scroll-content:empty),
.text-label:has(#track-label:empty) {
display: none !important;
}
.text-label .scroll-content {
display: inline-flex;
white-space: nowrap;
will-change: transform;
}
.text-label.is-overflowing .scroll-content {
animation: ping-pong-scroll var(--marquee-duration, 8s) linear infinite;
}
.text-label.is-overflowing {
animation: ping-pong-mask var(--marquee-duration, 8s) linear infinite;
/* Static gradient structure referencing dynamic color variables */
mask-image: linear-gradient(
to right,
var(--mask-left) 0px,
black var(--fade-width),
black calc(100% - var(--fade-width)),
var(--mask-right) 100%
);
-webkit-mask-image: linear-gradient(
to right,
var(--mask-left) 0px,
black var(--fade-width),
black calc(100% - var(--fade-width)),
var(--mask-right) 100%
);
}
@keyframes ping-pong-scroll {
0%, 15% {
transform: translateX(0%);
}
50%, 65% {
transform: translateX(var(--scroll-distance, -100%));
}
100% {
transform: translateX(0%);
}
}
@keyframes ping-pong-mask {
/* 1. AT START: Left is solid (black), Right is faded (transparent) */
0%, 15% {
--mask-left: black;
--mask-right: transparent;
}
/* 2. MOVING LEFT: Left smoothly fades in (transparent), Right stays faded */
22%, 43% {
--mask-left: transparent;
--mask-right: transparent;
}
/* 3. AT FAR END: Right smoothly solidifies (black), Left stays faded */
50%, 65% {
--mask-left: transparent;
--mask-right: black;
}
/* 4. MOVING RIGHT: Right smoothly fades back out (transparent) */
72%, 93% {
--mask-left: transparent;
--mask-right: transparent;
}
/* 5. RETURN TO START: Left smoothly solidifies (black) */
100% {
--mask-left: black;
--mask-right: transparent;
}
}
now-playing/themes/card/script.js
+2 -2
View File
@@ -53,8 +53,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
// Wait for fade (0.5s), then swap the real text and hide overlay
setTimeout(() => {
trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
SetLabelText('track-label', swapArtistTrack ? mediaProps.Artist : mediaProps.Title);
SetLabelText('artist-label', swapArtistTrack ? mediaProps.Title : mediaProps.Artist);
// Extract the image source string (use fallback if Windows has no art)
const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png';
now-playing/themes/card/style.css
+1 -1
View File
@@ -13,7 +13,6 @@
}
#album-art-container {
/* 1. Tell it to maintain a 1:1 square ratio */
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--component-radius);
@@ -90,6 +89,7 @@
display: flex;
flex-direction: column;
gap: 0.3em;
max-height: 100%;
}
#track-label {
now-playing/themes/classic/script.js
+2 -2
View File
@@ -53,8 +53,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
// Wait for fade (0.5s), then swap the real text and hide overlay
setTimeout(async () => {
trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
SetLabelText('track-label', swapArtistTrack ? mediaProps.Artist : mediaProps.Title);
SetLabelText('artist-label', swapArtistTrack ? mediaProps.Title : mediaProps.Artist);
// Extract the image source string (use fallback if Windows has no art)
const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png';
now-playing/themes/classic/style.css
+2 -2
View File
@@ -64,7 +64,7 @@
flex-direction: row;
align-items: center;
overflow: hidden;
gap: 0.5em;
gap: 1em;
transition: all 0.25s ease-in-out;
}
@@ -99,7 +99,7 @@
position: relative; /* Keeps it in the document flow */
z-index: 2; /* Sits above the background-layer */
padding: 1em 1.75em;
padding: 1em 1.3em;
display: flex;
flex-direction: column;
gap: 0.3em;
now-playing/themes/compact/script.js
+67 -31
View File
@@ -48,23 +48,28 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
// Wait for fade (0.5s), then swap the real text and hide overlay
setTimeout(() => {
trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
trackLabelBackground.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
artistLabelBackground.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
// trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
// artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
// trackLabelBackground.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
// artistLabelBackground.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
if (swapArtistTrack) {
SetSongInfo(mediaProps.Artist, mediaProps.Title);
} else {
SetSongInfo(mediaProps.Title, mediaProps.Artist);
}
// Extract the image source string (use fallback if Windows has no art)
// Set the pill color
switch (themeVariant) {
case "compact-inverted":
songInfoContainer.style.backgroundColor = accentColorPalette.LightVibrant;
progressBarTrack.style.backgroundColor = accentColorPalette.LightVibrant;
progressBar.style.background = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`;
songLabel.style.color = accentColorPalette.LightVibrant;
songLabelBackground.style.color = accentColorPalette.DarkVibrant;
break;
default:
songInfoContainer.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`;
progressBarTrack.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`;
progressBar.style.background = accentColorPalette.LightVibrant;
songLabel.style.color = accentColorPalette.DarkVibrant;
songLabelBackground.style.color = accentColorPalette.LightVibrant;
@@ -74,30 +79,6 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
songLabel.style.opacity = "";
songLabelBackground.style.opacity = "";
// // If text is too long, add a marquee
// requestAnimationFrame(() => {
// const containerWidth = songInfoContainer.clientWidth;
// const textWidth = trackLabel.clientWidth + artistLabel.clientWidth;
// console.log(containerWidth);
// console.log(textWidth);
// if (textWidth > containerWidth) {
// songLabel.classList.add('scrolling-text');
// songLabelBackground.classList.add('scrolling-text');
// // Calculate speed: 50 pixels per second is a good standard
// const duration = (textWidth + containerWidth) / 50;
// console.log(duration);
// document.documentElement.style.setProperty('--scroll-duration', `${duration}s`);
// document.documentElement.style.setProperty('--container-width', `${textWidth}px`);
// document.documentElement.style.setProperty('--text-width', `-${textWidth}px`);
// } else {
// songLabel.classList.remove('scrolling-text');
// songLabelBackground.classList.remove('scrolling-text');
// }
// });
setTimeout(() => {
SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250);
@@ -127,7 +108,62 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
// Update the clip-path
progressBar.style.clipPath = `inset(0 ${clipRight}% 0 0)`;
progressBarTrack.style.clipPath = `inset(0 0 0 ${progressPercent}%)`;
// // Set the progress bar but with a transition for smoothness
// const clipRight = progressPercent;
// progressBar.style.maskImage = `linear-gradient(to right, black calc(${clipRight}% - 4em), transparent ${clipRight}%)`
// const transitionWidth = '1em';
// progressBar.style.maskImage = `linear-gradient(to right, black calc(${clipRight}% - ${transitionWidth}), transparent ${clipRight}%)`
// progressBarTrack.style.maskImage = `linear-gradient(to right, transparent calc(${clipRight}% - ${transitionWidth}), black ${clipRight}%)`;
}
// MARQUEE LOGIC
// This is a more advanced marquee implementation that calculates the overflow distance and adjusts the scroll speed accordingly
// Call this function whenever the track changes
function SetSongInfo(trackName, artistName) {
// Update main text and background layer simultaneously
UpdateSingleSongLabel('song-label', trackName, artistName);
UpdateSingleSongLabel('song-label-background', trackName, artistName);
}
function UpdateSingleSongLabel(containerId, trackName, artistName) {
const container = document.getElementById(containerId);
if (!container) return;
// 1. Structure the inner HTML with a wrapper so we can measure exact inline width
container.classList.remove('is-overflowing');
container.innerHTML = `
<span class="scroll-content">
<span class="track-label">${trackName}</span>
<span class="artist-label">${artistName}</span>
</span>
`;
const scrollContent = container.querySelector('.scroll-content');
// 2. Measure total width of (Track + Artist) against parent width
const textWidth = scrollContent.scrollWidth;
const containerWidth = container.clientWidth;
const overflowDistance = textWidth - containerWidth;
// 3. If the combined row overflows, set the CSS variables and add class
if (overflowDistance > 0) {
const distancePercent = (overflowDistance / textWidth) * 100;
const travelTime = overflowDistance / SCROLL_SPEED_PX_PER_SEC;
const totalDuration = (travelTime * 2) + 3; // 3 seconds total for start/end pauses
scrollContent.style.setProperty('--scroll-distance', `-${distancePercent}%`);
container.style.setProperty('--marquee-duration', `${totalDuration}s`);
container.classList.add('is-overflowing');
}
// 4. Attach ResizeObserver once to handle responsive window resizes
if (!container._resizeObserver) {
container._resizeObserver = new ResizeObserver(() => {
UpdateSingleSongLabel(containerId, trackName, artistName);
});
container._resizeObserver.observe(container);
}
}
now-playing/themes/compact/style.css
+34 -14
View File
@@ -35,6 +35,10 @@
-webkit-mask-image: linear-gradient(to right, black calc(100% - 4em), transparent 100%); */
}
#progress-bar-track {
transition: all 1s ease-in-out;
}
.progress {
box-sizing: border-box;
padding: 0.25em 0.75em;
@@ -53,7 +57,7 @@
gap: 0.5em;
min-width: 100%;
justify-content: var(--justify-content);
overflow: visible;
overflow: hidden;
}
#artist-label,
@@ -69,23 +73,39 @@
}
.text-label {
white-space: nowrap;
/* overflow: hidden; */
transition: opacity 0.25s ease-in-out;
}
/* TODO: Marquee doesn't work that well, disabling for now */
/* .scrolling-text {
animation: marquee var(--scroll-duration, 15s) linear infinite;
display: inline-block;
/* Inner wrapper holding track + artist inline */
#song-label .scroll-content,
#song-label-background .scroll-content {
display: inline-flex;
flex-direction: row;
align-items: baseline;
gap: 0.5em; /* Spacing between Track and Artist */
white-space: nowrap;
will-change: transform;
}
@keyframes marquee {
0% {
transform: translateX(var(--container-width));
/* Preserve original font weights */
.track-label {
font-weight: 700;
}
100% {
transform: translateX(var(--text-width));
.artist-label {
font-size: 0.8em;
font-weight: 400;
opacity: 0.7;
}
/* Marquee scroll animation */
#song-label.is-overflowing .scroll-content,
#song-label-background.is-overflowing .scroll-content {
animation: ping-pong-scroll var(--marquee-duration, 8s) linear infinite;
}
/* Mask animation applied to container */
#song-label.is-overflowing,
#song-label-background.is-overflowing {
animation: ping-pong-mask var(--marquee-duration, 8s) linear infinite;
}
} */
now-playing/themes/simple/index.html
+5 -6
View File
@@ -1,5 +1,4 @@
<div id="main-wrapper">
<div id="yet-another-wrapper-yup">
<div id="album-art-container">
<div id="album-art-layer"></div>
<div id="album-art-transition-layer"></div>
@@ -9,12 +8,12 @@
<div id="track-label" class="text-label">&nbsp;</div>
<div id="artist-label" class="text-label">&nbsp;</div>
<div id="progress-container">
<label>
<span id="current-time" class="progress-text">0:00</span>
<span>/</span>
<span id="duration" class="progress-text">0:00</span>
</label>
<div id="current-time" class="progress-text">0:00</div>
<div id="progress-bar-track">
<div id="progress-bar-fill"></div>
<div></div>
</div>
<div id="duration" class="progress-text">0:00</div>
</div>
</div>
</div>
now-playing/themes/simple/script.js
+46 -4
View File
@@ -10,6 +10,7 @@ const albumArtTransition = document.getElementById('album-art-transition-layer')
const trackLabel = document.getElementById('track-label');
const artistLabel = document.getElementById('artist-label');
const progressContainer = document.getElementById('progress-container');
const progressBarFill = document.getElementById('progress-bar-fill');
const currentTimeLabel = document.getElementById('current-time');
const durationLabel = document.getElementById('duration');
@@ -34,8 +35,9 @@ if (!showProgressBar)
progressContainer.style.display = 'none';
// If text alignment is 'right', swap the album art to the right hand side too
if (textAlignment == 'right')
document.getElementById('yet-another-wrapper-yup').appendChild(document.getElementById('album-art-container'));
if (textAlignment == 'right') {
mainWrapper.style.flexDirection = 'row-reverse';
}
@@ -52,8 +54,10 @@ async function ChangeTrack(mediaProps) {
// Wait for fade (0.5s), then swap the real text and hide overlay
setTimeout(() => {
trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
// trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
// artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
SetLabelText('track-label', swapArtistTrack ? mediaProps.Artist : mediaProps.Title);
SetLabelText('artist-label', swapArtistTrack ? mediaProps.Title : mediaProps.Artist);
// Extract the image source string (use fallback if Windows has no art)
const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png';
@@ -81,4 +85,42 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
durationLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
// Set progressbar
// Ensure we don't divide by zero or exceed 100%
const durationMs = timelineProps.EndTime;
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
switch (themeVariant) {
case "matte":
progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant);
break;
case "matte-dark":
default:
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
break;
}
}
// Helper function to calculate height of album art
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
// Get the accurate rendered height of song-info-container
const infoHeight = entry.contentRect.height;
// Calculate 125% of that height
const targetSize = infoHeight * 1.5;
console.log(targetSize);
// Apply to album art (setting both width & height ensures it stays square)
albumArtContainer.style.height = `${targetSize}px`;
albumArtContainer.style.width = `${targetSize}px`;
}
});
// Start watching the song info container for size changes
observer.observe(songInfoContainer);
now-playing/themes/simple/style.css
+33 -28
View File
@@ -6,23 +6,13 @@
width: 500px;
display: flex;
flex-direction: row;
align-items: stretch;
opacity: 0;
}
#yet-another-wrapper-yup {
position: relative;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75em;
transition: all 0.25s ease-in-out;
gap: 1em;
opacity: 0;
}
#album-art-container {
/* 1. Tell it to maintain a 1:1 square ratio */
height: 150%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--border-radius);
@@ -62,23 +52,13 @@
overflow: hidden;
flex-grow: 1;
min-width: 0;
gap: 0.25em;
}
#background-transition-layer {
z-index: 0;
}
/* The content sits on top */
#song-info-wrapper {
position: relative; /* Keeps it in the document flow */
z-index: 2; /* Sits above the background-layer */
padding: 1em 1.75em;
display: flex;
flex-direction: column;
gap: 0.3em;
}
#track-label {
font-size: 1em;
font-weight: 600;
@@ -93,11 +73,36 @@
}
#progress-container {
font-size: 0.6em;
font-weight: 400;
opacity: 0.6;
text-align: var(--text-alignment);
margin-top: 0.5em;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.2em;
margin-top: 0.2em;
gap: 0.5em;
}
#progress-bar-track {
width: 100%;
height: 0.4em;
border-radius: 1em;
background-color: #ffffff3a;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Adds depth */
}
#progress-bar-fill {
height: 100%;
width: 0%; /* JS will control this */
border-radius: 1em;
background-color: var(--accent-color, #ffffff);
transition: width 1s ease-in-out, background-color 1s ease-in-out;
/* This makes the handle track the end of the bar */
position: relative;
}
.progress-text {
font-size: 0.7em;
opacity: 0.5;
}
.text-label {
now-playing/themes/standard/index.html
-3
View File
@@ -20,9 +20,6 @@
<div></div>
</div>
<div id="duration" class="progress-text">0:00</div>
<div id="time-container">
</div>
</div>
</div>
</div>
now-playing/themes/standard/script.js
+9 -2
View File
@@ -5,6 +5,7 @@
const mainWrapper = document.getElementById('main-wrapper');
const albumArtContainer = document.getElementById('album-art-container');
const songInfoContainer = document.getElementById('song-info-container');
const songInfoWrapper = document.getElementById('song-info-wrapper');
const albumArtLayer = document.getElementById('album-art-layer');
const albumArtTransition = document.getElementById('album-art-transition-layer');
const backgroundLayer = document.getElementById('background-layer');
@@ -48,6 +49,10 @@ switch (themeVariant) {
break;
}
// If text alignment is 'right', swap the album art to the right hand side too
if (textAlignment == 'right') {
songInfoContainer.style.flexDirection = 'row-reverse';
}
////////////////////
@@ -65,8 +70,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
// Wait for fade (0.5s), then swap the real text and hide overlay
setTimeout(async () => {
trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
SetLabelText('track-label', swapArtistTrack ? mediaProps.Artist : mediaProps.Title);
SetLabelText('artist-label', swapArtistTrack ? mediaProps.Title : mediaProps.Artist);
switch (themeVariant) {
case "matte":
@@ -100,6 +105,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
backgroundLayer.style.opacity = "";
albumArtLayer.style.opacity = "";
console.log(songInfoWrapper.clientWidth);
setTimeout(() => {
// Set the image
backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`;
now-playing/themes/standard/style.css
-16
View File
@@ -115,14 +115,6 @@
text-align: var(--text-alignment);
}
.text-label {
white-space: nowrap;
overflow: hidden;
mask-image: var(--trailing-fade);
-webkit-mask-image: var(--trailing-fade);
transition: opacity 0.25s ease-in-out;
}
#progress-container {
display: flex;
flex-direction: row;
@@ -151,14 +143,6 @@
position: relative;
}
/* #time-container {
display: flex;
justify-content: space-between;
font-size: 0.7em;
opacity: 0.5;
display: none;
} */
.progress-text {
font-size: 0.7em;
opacity: 0.5;