NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Drift accent gradients on buttons, hero, spotlight, active rows and modals

Browse Source
This commit is contained in:
Admin
2026-09-23 21:37:41 +02:00
parent 805e521b1d
commit 55cc803708
4 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-player/src/routes/+page.svelte
+2 -2
View File
@@ -134,7 +134,7 @@
</svelte:head>
<Page>
<div class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 sm:px-9 sm:py-8.5">
<div class="relative hero-surface overflow-hidden rounded-panel-lg px-6 py-8 sm:px-9 sm:py-8.5">
<div
class="relative flex flex-col items-start gap-7 lg:flex-row lg:flex-wrap lg:items-end lg:justify-between"
>
@@ -209,7 +209,7 @@
{#if spotlight}
<section>
<div
class="grid grid-cols-1 overflow-hidden rounded-panel-lg spotlight-surface lg:grid-cols-2"
class="grid spotlight-surface grid-cols-1 overflow-hidden rounded-panel-lg lg:grid-cols-2"
>
<div class="flex flex-col justify-center p-8 sm:p-9">
<div
web-player/src/routes/layout.css
+24
View File
@@ -225,14 +225,24 @@
}
@utility surface-active {
background-image: var(--mf-g-active);
background-size: 180% 100%;
animation: gradient-drift 14s ease-in-out infinite alternate;
}
@utility surface-active-hover {
background-image: var(--mf-g-hover);
background-size: 180% 100%;
animation: gradient-drift 14s ease-in-out infinite alternate;
}
@utility hero-surface {
background-image: var(--mf-hero-bg);
background-size: 180% 100%;
animation: gradient-drift 18s ease-in-out infinite alternate;
}
@utility spotlight-surface {
background-size:
180% 100%,
100% 100%;
animation: gradient-drift 18s ease-in-out infinite alternate;
background-image:
var(--mf-spotlight-bg),
linear-gradient(
@@ -242,6 +252,10 @@
transparent 92.5%
);
}
@utility glow-drift {
background-size: 180% 100%;
animation: gradient-drift 18s ease-in-out infinite alternate;
}
@utility field-control {
@apply w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-fg-2 focus:bg-surface-2 focus:outline-none;
}
@@ -341,6 +355,15 @@ button:disabled {
}
}
@keyframes gradient-drift {
from {
background-position: 0% 50%;
}
to {
background-position: 100% 50%;
}
}
@keyframes sheen {
from {
background-position: 200% 0;
@@ -380,6 +403,7 @@ button:disabled {
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;