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 'Use Custom Colors' toggle for all themes. FUCK YEAH CUSTOM COLORS I'M LITERALLY CUMMING FUCK!!

Browse Source
This commit is contained in:
nutty
2026-08-01 06:05:52 +10:00
parent 5d541fe483
commit 8ef8af4288
12 changed files with 190 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
now-playing/script.js
+3
View File
@@ -32,6 +32,9 @@ const fontSize = GetIntParam("fontSize", 20);
const maxWidth = GetIntParam("maxWidth", 500); const maxWidth = GetIntParam("maxWidth", 500);
const verticalAlignment = urlParams.get('verticalAlignment') || 'align-to-center'; const verticalAlignment = urlParams.get('verticalAlignment') || 'align-to-center';
const textAlignment = urlParams.get('textAlignment') || 'left'; const textAlignment = urlParams.get('textAlignment') || 'left';
const useCustomColors = GetBooleanParam("useCustomColors", false);
const color1 = urlParams.get('color1') || '#ffffff';
const color2 = urlParams.get('color2') || '#1d1d1d';
const includedApplications = urlParams.get('includedApplications') || ''; const includedApplications = urlParams.get('includedApplications') || '';
const excludedApplications = urlParams.get('excludedApplications') || ''; const excludedApplications = urlParams.get('excludedApplications') || '';
now-playing/settings/settings.json
+26
View File
@@ -124,6 +124,32 @@
"defaultValue": "left", "defaultValue": "left",
"group": "Appearance" "group": "Appearance"
}, },
{
"id": "useCustomColors",
"label": "Use Custom Colors",
"description": "",
"type": "checkbox",
"defaultValue": false,
"group": "Appearance"
},
{
"id": "color1",
"label": "Primary Color",
"description": "",
"type": "color",
"defaultValue": "#ffffff",
"showIf": "useCustomColors",
"group": "Appearance"
},
{
"id": "color2",
"label": "Secondary Color",
"description": "",
"type": "color",
"defaultValue": "#1d1d1d",
"showIf": "useCustomColors",
"group": "Appearance"
},
{ {
"id": "includedApplications", "id": "includedApplications",
"label": "Included Apps", "label": "Included Apps",
now-playing/style.css
+2 -2
View File
@@ -184,11 +184,11 @@ body {
} }
.text-label.is-overflowing .scroll-content { .text-label.is-overflowing .scroll-content {
animation: ping-pong-scroll var(--marquee-duration, 8s) linear infinite; animation: ping-pong-scroll var(--marquee-duration, 8s) ease-in-out infinite;
} }
.text-label.is-overflowing { .text-label.is-overflowing {
animation: ping-pong-mask var(--marquee-duration, 8s) linear infinite; animation: ping-pong-mask var(--marquee-duration, 8s) ease-in-out infinite;
/* Static gradient structure referencing dynamic color variables */ /* Static gradient structure referencing dynamic color variables */
mask-image: linear-gradient( mask-image: linear-gradient(
now-playing/themes/album-art/script.js
+25 -8
View File
@@ -60,14 +60,28 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
// Apply a tint // Apply a tint
const baseColor = accentColorPalette.DarkMuted; if (!useCustomColors)
// Solid from 0% to 30%, then fading to 0% opacity at 100% {
textInfoContainer.style.background = `linear-gradient(to top, ${baseColor}FF 0%, ${baseColor}FF 10%, ${baseColor}00 100%)`; const baseColor = accentColorPalette.DarkMuted;
if (!showAlbumArt) // Solid from 0% to 30%, then fading to 0% opacity at 100%
songInfoContainer.style.background = accentColorPalette.LightVibrant; textInfoContainer.style.background = `linear-gradient(to top, ${baseColor}FF 0%, ${baseColor}FF 10%, ${baseColor}00 100%)`;
if (!showAlbumArt)
songInfoContainer.style.background = accentColorPalette.LightVibrant;
// Apply text color // Apply text color
document.body.style.color = accentColorPalette.LightVibrant; document.body.style.color = accentColorPalette.LightVibrant;
}
else
{
const baseColor = color2;
// Solid from 0% to 30%, then fading to 0% opacity at 100%
textInfoContainer.style.background = `linear-gradient(to top, ${baseColor}FF 0%, ${baseColor}FF 10%, ${baseColor}00 100%)`;
if (!showAlbumArt)
songInfoContainer.style.background = color1;
// Apply text color
document.body.style.color = color1;
}
trackLabel.style.opacity = ""; trackLabel.style.opacity = "";
artistLabel.style.opacity = ""; artistLabel.style.opacity = "";
@@ -90,5 +104,8 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent)); progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBar.style.width = `${progressPercent}%`; progressBar.style.width = `${progressPercent}%`;
progressBar.style.setProperty('--accent-color', `${accentColorPalette.LightVibrant}`); if (!useCustomColors)
progressBar.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
else
progressBar.style.setProperty('--accent-color', color1);
} }
now-playing/themes/card/script.js
+9 -1
View File
@@ -98,5 +98,13 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent)); progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBarFill.style.width = `${progressPercent}%`; progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); if (!useCustomColors)
{
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
}
else
{
progressBarFill.style.setProperty('--accent-color', color1);
document.body.style.color = color1;
}
} }
now-playing/themes/classic/script.js
+9 -1
View File
@@ -98,5 +98,13 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent)); progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBarFill.style.width = `${progressPercent}%`; progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); if (!useCustomColors)
{
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
}
else
{
progressBarFill.style.setProperty('--accent-color', color1);
document.body.style.color = color1;
}
} }
now-playing/themes/compact/script.js
+33 -13
View File
@@ -53,19 +53,39 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
// Extract the image source string (use fallback if Windows has no art) // Extract the image source string (use fallback if Windows has no art)
// Set the pill color // Set the pill color
switch (themeVariant) { if (!useCustomColors)
case "compact-inverted": {
progressBarTrack.style.backgroundColor = accentColorPalette.LightVibrant; switch (themeVariant) {
progressBar.style.background = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`; case "compact-inverted":
songLabel.style.color = accentColorPalette.LightVibrant; progressBarTrack.style.backgroundColor = accentColorPalette.LightVibrant;
songLabelBackground.style.color = accentColorPalette.DarkVibrant; progressBar.style.background = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`;
break; songLabel.style.color = accentColorPalette.LightVibrant;
default: songLabelBackground.style.color = accentColorPalette.DarkVibrant;
progressBarTrack.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`; break;
progressBar.style.background = accentColorPalette.LightVibrant; default:
songLabel.style.color = accentColorPalette.DarkVibrant; progressBarTrack.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`;
songLabelBackground.style.color = accentColorPalette.LightVibrant; progressBar.style.background = accentColorPalette.LightVibrant;
break; songLabel.style.color = accentColorPalette.DarkVibrant;
songLabelBackground.style.color = accentColorPalette.LightVibrant;
break;
}
}
else
{
switch (themeVariant) {
case "compact-inverted":
progressBarTrack.style.backgroundColor = `color-mix(in srgb, ${color1}, black 60%)`;
progressBar.style.background = color2;
songLabel.style.color = color1;
songLabelBackground.style.color = color2;
break;
default:
progressBarTrack.style.backgroundColor = color2;
progressBar.style.background = color1;
songLabel.style.color = color2;
songLabelBackground.style.color = color1;
break;
}
} }
songLabel.style.opacity = ""; songLabel.style.opacity = "";
now-playing/themes/compact/style.css
+2 -2
View File
@@ -92,11 +92,11 @@
/* Marquee scroll animation */ /* Marquee scroll animation */
#song-label.is-overflowing .scroll-content, #song-label.is-overflowing .scroll-content,
#song-label-background.is-overflowing .scroll-content { #song-label-background.is-overflowing .scroll-content {
animation: ping-pong-scroll var(--marquee-duration, 8s) linear infinite; animation: ping-pong-scroll var(--marquee-duration, 8s) ease-in-out infinite;
} }
/* Mask animation applied to container */ /* Mask animation applied to container */
#song-label.is-overflowing, #song-label.is-overflowing,
#song-label-background.is-overflowing { #song-label-background.is-overflowing {
animation: ping-pong-mask var(--marquee-duration, 8s) linear infinite; animation: ping-pong-mask var(--marquee-duration, 8s) ease-in-out infinite;
} }
now-playing/themes/simple/script.js
+10 -9
View File
@@ -92,15 +92,16 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent)); progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBarFill.style.width = `${progressPercent}%`; progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
switch (themeVariant) { if (!useCustomColors)
case "matte": {
progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant); progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
break; document.body.style.color = accentColorPalette.LightVibrant;
case "matte-dark": }
default: else
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); {
break; progressBarFill.style.setProperty('--accent-color', color1);
document.body.style.color = color1;
} }
} }
now-playing/themes/simple/style.css
+1
View File
@@ -53,6 +53,7 @@
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;
gap: 0.25em; gap: 0.25em;
transition: color 1s ease;
} }
#background-transition-layer { #background-transition-layer {
now-playing/themes/standard/script.js
+65 -22
View File
@@ -73,26 +73,55 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
SetLabelText('track-label', swapArtistTrack ? mediaProps.Artist : mediaProps.Title); SetLabelText('track-label', swapArtistTrack ? mediaProps.Artist : mediaProps.Title);
SetLabelText('artist-label', swapArtistTrack ? mediaProps.Title : mediaProps.Artist); SetLabelText('artist-label', swapArtistTrack ? mediaProps.Title : mediaProps.Artist);
switch (themeVariant) { if (!useCustomColors)
case "matte": {
document.body.style.color = accentColorPalette.DarkVibrant; switch (themeVariant) {
break; case "matte":
case "matte-dark": document.body.style.color = accentColorPalette.DarkVibrant;
document.body.style.color = accentColorPalette.LightVibrant; break;
break; case "matte-dark":
document.body.style.color = accentColorPalette.LightVibrant;
break;
}
}
else
{
switch (themeVariant) {
case "matte":
document.body.style.color = color2;
break;
// case "matte-dark":
default:
document.body.style.color = color1;
break;
}
} }
// Extract the image source string (use fallback if Windows has no art) // Extract the image source string (use fallback if Windows has no art)
const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png'; const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png';
// Set the image // Set the image
switch (themeVariant) { if (!useCustomColors) {
case "matte": switch (themeVariant) {
songInfoContainer.style.backgroundColor = accentColorPalette.LightVibrant; case "matte":
break; songInfoContainer.style.backgroundColor = accentColorPalette.LightVibrant;
case "matte-dark": break;
songInfoContainer.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`; case "matte-dark":
break; songInfoContainer.style.backgroundColor = `color-mix(in srgb, ${accentColorPalette.DarkMuted}, black 60%)`;
break;
}
}
else
{
switch (themeVariant) {
case "matte":
songInfoContainer.style.backgroundColor = color1;
break;
// case "matte-dark":
default:
songInfoContainer.style.backgroundColor = `color-mix(in srgb, ${color2}, black 60%)`;
break;
}
} }
backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`; backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
@@ -135,13 +164,27 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
progressPercent = Math.min(100, Math.max(0, progressPercent)); progressPercent = Math.min(100, Math.max(0, progressPercent));
progressBarFill.style.width = `${progressPercent}%`; progressBarFill.style.width = `${progressPercent}%`;
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
switch (themeVariant) { if (!useCustomColors) {
case "matte": switch (themeVariant) {
progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant); case "matte":
break; progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant);
case "matte-dark": break;
default: case "matte-dark":
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant); default:
break; progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
break;
}
}
else
{
switch (themeVariant) {
case "matte":
progressBarFill.style.setProperty('--accent-color', color2);
break;
// case "matte-dark":
default:
progressBarFill.style.setProperty('--accent-color', color1);
break;
}
} }
} }
now-playing/themes/vinyl/script.js
+4 -1
View File
@@ -66,7 +66,10 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
const durationMs = timelineProps.EndTime; const durationMs = timelineProps.EndTime;
progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0; progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
progressPercent = Math.min(100, Math.max(0, progressPercent)); progressPercent = Math.min(100, Math.max(0, progressPercent));
document.documentElement.style.setProperty('--accent-color', `${accentColorPalette.LightVibrant}`); if (!useCustomColors)
document.documentElement.style.setProperty('--accent-color', `${accentColorPalette.LightVibrant}`);
else
document.documentElement.style.setProperty('--accent-color', color1);
// Calculate the offset. // Calculate the offset.
// 0% progress = 157.1 offset. 100% progress = 0 offset. // 0% progress = 157.1 offset. 100% progress = 0 offset.