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

• Styling updates

Browse Source 
• Added entries for future themes
This commit is contained in:
nutty
2026-06-30 01:02:04 +10:00
parent 819d3c2fd3
commit 534a328edf
9 changed files with 484 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/themes/standard/index.html
+8 -7
View File
@@ -1,26 +1,27 @@
<div id="main-wrapper">
<div id="album-art-container">
<div id="album-art-layer"></div>
<div id="album-art-transition-layer"></div>
</div>
<div id="song-info-container">
<div id="background-layer"></div>
<div id="background-transition-layer"></div>
<div id="album-art-container">
<div id="album-art-layer"></div>
<div id="album-art-transition-layer"></div>
</div>
<div id="song-info-wrapper">
<div id="track-label" class="text-label">&nbsp;</div>
<div id="artist-label" class="text-label">&nbsp;</div>
<div id="progress-container">
<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 id="time-container">
<div id="current-time">0:00</div>
<div id="duration">0:00</div>
</div>
</div>
</div>
now-playing/themes/standard/script.js
+8 -8
View File
@@ -193,12 +193,12 @@ async function ChangeTrack(mediaProps, tintColor) {
}, 250);
}
function SetAlbumArtSize() {
const height = songInfoContainer.offsetHeight;
albumArtContainer.style.height = `${height}px`;
albumArtContainer.style.width = `${height}px`;
}
// function SetAlbumArtSize() {
// const height = songInfoContainer.offsetHeight;
// albumArtContainer.style.height = `${height}px`;
// albumArtContainer.style.width = `${height}px`;
// }
requestAnimationFrame(() => {
SetAlbumArtSize();
});
// requestAnimationFrame(() => {
// SetAlbumArtSize();
// });
now-playing/themes/standard/style.css
+29 -32
View File
@@ -1,3 +1,8 @@
:root {
--border-radius: 20px;
--component-radius: calc(var(--border-radius) * 0.75);
}
#main-wrapper {
width: 500px;
display: flex;
@@ -10,13 +15,15 @@
#album-art-container {
/* 1. Tell it to maintain a 1:1 square ratio */
height: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 1em;
border-radius: var(--component-radius);
position: relative;
background-size: cover;
background-position: center;
display: var(--show-album-art);
flex-shrink: 0;
}
#album-art-layer,
@@ -44,11 +51,13 @@
position: relative;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
flex-direction: row;
align-items: center;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
gap: 1.5em;
padding: 0.75em 1em;
}
/* The background now fills the frame */
@@ -82,10 +91,15 @@
position: relative; /* Keeps it in the document flow */
z-index: 2; /* Sits above the background-layer */
padding: 1em 1.75em;
/* padding: 1em 1.75em; */
display: flex;
flex-direction: column;
gap: 0.3em;
margin: 0.5em 0em;
flex-grow: 1;
min-width: 0;
}
#track-label {
@@ -111,9 +125,11 @@
#progress-container {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
gap: 0.2em;
margin-top: 0.2em;
gap: 0.5em;
}
#progress-bar-track {
@@ -135,34 +151,15 @@
position: relative;
}
#progress-bar-fill::after {
content: '';
position: absolute;
right: -6px; /* Adjust to center the circle on the end of the bar */
top: 50%;
transform: translateY(-50%);
width: 0.8em; /* Diameter of your circle */
height: 0.8em;
background-color: var(--accent-color, #ffffff);
border-radius: 50%;
filter: brightness(1.4);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Adds depth */
/* Optional: Hide it if the width is too small */
opacity: 0;
transition: all 1s ease-in-out;
}
/* Show the handle when the progress bar is active */
#progress-bar-track:hover #progress-bar-fill::after,
#progress-bar-fill:not([style*="width: 0%"])::after {
opacity: 1;
}
#time-container {
/* #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;
}