smueller/HexaHost-Web-Prod
1
0
Fork 0
mirror of https://git.hexahost.dev/smueller/HexaHost-Frontend.git synced 2026-06-02 07:18:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add animated gradient background for "Beliebt" badge: Introduced a new CSS class for the featured badge with a linear gradient and animation effects. Added media query to disable animation for users preferring reduced motion, enhancing accessibility.

Browse Source
This commit is contained in:
TheOnlyMace
2026-04-09 21:26:29 +02:00
parent b6e268855e
commit d3da589a1d
1 changed files with 25 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
public/assets/css/custom.css
View File

@@ -15,3 +15,28 @@
justify-content: center;
margin-top: 2rem;
}
/* Animierter Farbverlauf für "Beliebt"-Badge */
.featured-badge {
background: linear-gradient(135deg, #ff51f9 0%, #a348ff 50%, #3978ff 100%);
background-size: 220% 220%;
animation: featured-badge-colors 6s ease infinite;
}
@keyframes featured-badge-colors {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@media (prefers-reduced-motion: reduce) {
.featured-badge {
animation: none;
}
}