spo/music-jeopardy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add more categories
Some checks failed
On Push Deploy / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Johnny322
2026-02-08 15:57:50 +01:00
parent 52ed6ffd11
commit a4f4e1728a
41 changed files with 12 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/styles.css
View File

@@ -373,8 +373,8 @@ audio.hidden-audio {
}
.custom-player {
width: min(420px, 100%);
min-height: 200px;
width: min(840px, 100%);
min-height: 400px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: radial-gradient(circle at top, rgba(61, 214, 255, 0.2), rgba(8, 12, 26, 0.9) 70%);
@@ -445,36 +445,18 @@ audio.hidden-audio {
.pulse-rays {
position: absolute;
inset: -20%;
inset: -10%;
border-radius: 50%;
background:
radial-gradient(circle at 30% 20%, hsla(var(--ray-hue, 200), 90%, 70%, 0.35), transparent 55%),
radial-gradient(circle at 75% 35%, hsla(var(--ray-hue, 200), 90%, 70%, 0.28), transparent 60%),
radial-gradient(circle at 40% 80%, hsla(var(--ray-hue, 200), 90%, 70%, 0.25), transparent 58%),
radial-gradient(circle at 70% 70%, hsla(var(--ray-hue, 200), 90%, 70%, 0.22), transparent 62%),
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 70%, 0.18), transparent 65%);
opacity: calc(0.08 + var(--ray, 0) * 0.75);
filter: blur(calc(8px - var(--ray, 0) * 2px));
transform: scale(calc(0.9 + var(--ray, 0) * 0.5));
transition: opacity 0.14s ease-out, transform 0.14s ease-out, filter 0.14s ease-out;
mask-image: radial-gradient(
circle,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.5) calc(25% + var(--ray, 0) * 10%),
rgba(0, 0, 0, 1) calc(55% + var(--ray, 0) * 20%),
rgba(0, 0, 0, 0) 100%
);
-webkit-mask-image: radial-gradient(
circle,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.5) calc(25% + var(--ray, 0) * 10%),
rgba(0, 0, 0, 1) calc(55% + var(--ray, 0) * 20%),
rgba(0, 0, 0, 0) 100%
);
mask-size: 100% 100%;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 95%, 72%, 0.45) 0%, transparent 45%),
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 68%, 0.35) 0%, transparent 60%),
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 85%, 65%, 0.25) 0%, transparent 72%),
radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 80%, 60%, 0.2) 0%, transparent 85%);
opacity: calc(0.15 + var(--ray, 0) * 0.7);
filter: blur(calc(10px - var(--ray, 0) * 3px));
transform: scale(calc(0.95 + var(--ray, 0) * 0.7));
transition: opacity 0.12s ease-out, transform 0.12s ease-out, filter 0.12s ease-out;
mix-blend-mode: screen;
z-index: 1;
}