mirror of
https://github.com/Cleanuparr/Cleanuparr.git
synced 2026-09-12 21:37:53 -04:00
Fix slow page loads on iOS caused by the background orbs (#744)
This commit is contained in:
Flaminel authored and GitHub committed
1 parent
a502eb6407
commit
ea7ea9630d
4 files changed
+133
-86
No files matched your search
@@ -12,34 +12,16 @@
|
||||
overflow: hidden;
|
||||
|
||||
// Ambient orbs for glassmorphism atmosphere
|
||||
&::before,
|
||||
&::after {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(var(--orb-blur));
|
||||
inset: -120px;
|
||||
opacity: var(--orb-opacity);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background-image: var(--orb-layers-auth);
|
||||
animation: float 20s ease-in-out infinite alternate,
|
||||
hue-drift 60s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: var(--orb-primary);
|
||||
top: -80px;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: var(--orb-secondary);
|
||||
bottom: -80px;
|
||||
left: 10%;
|
||||
animation-delay: -10s;
|
||||
orb-hue 60s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&__card {
|
||||
|
||||
@@ -17,57 +17,17 @@
|
||||
}
|
||||
|
||||
// Ambient gradient orbs for glassmorphism depth
|
||||
&__main::before,
|
||||
&__main::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
filter: blur(var(--orb-blur));
|
||||
opacity: var(--orb-opacity);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
animation:
|
||||
float 20s ease-in-out infinite alternate,
|
||||
hue-drift 60s ease-in-out infinite;
|
||||
transition: opacity 0.5s ease, filter 0.5s ease;
|
||||
}
|
||||
|
||||
&__main::before {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: var(--orb-primary);
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
}
|
||||
|
||||
&__main::after {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: var(--orb-secondary);
|
||||
bottom: -100px;
|
||||
left: -50px;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
// Third orb: teal/blue accent for color variety
|
||||
&::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
background: var(--orb-tertiary);
|
||||
filter: blur(var(--orb-blur));
|
||||
inset: -120px;
|
||||
opacity: var(--orb-opacity);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
top: 50%;
|
||||
left: 30%;
|
||||
animation:
|
||||
float 15s ease-in-out infinite alternate,
|
||||
hue-drift 60s ease-in-out infinite;
|
||||
animation-delay: -5s;
|
||||
transition: opacity 0.5s ease, filter 0.5s ease;
|
||||
background-image: var(--orb-layers);
|
||||
animation: float 20s ease-in-out infinite alternate,
|
||||
orb-hue 60s ease-in-out infinite;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
||||
@@ -89,6 +89,12 @@
|
||||
100% { background-position: calc(200px + 100%) 0; }
|
||||
}
|
||||
|
||||
@keyframes orb-hue {
|
||||
0% { filter: hue-rotate(0deg); }
|
||||
50% { filter: hue-rotate(-35deg); }
|
||||
100% { filter: hue-rotate(0deg); }
|
||||
}
|
||||
|
||||
// Ambient orb float for glassmorphism background
|
||||
@keyframes float {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
@@ -97,13 +103,6 @@
|
||||
100% { transform: translate(10px, -10px) scale(1.02); }
|
||||
}
|
||||
|
||||
// Slow hue rotation for ambient orbs — barely noticeable color drift
|
||||
@keyframes hue-drift {
|
||||
0% { filter: blur(var(--orb-blur, 120px)) hue-rotate(0deg); }
|
||||
50% { filter: blur(var(--orb-blur, 120px)) hue-rotate(-35deg); }
|
||||
100% { filter: blur(var(--orb-blur, 120px)) hue-rotate(0deg); }
|
||||
}
|
||||
|
||||
// Toast entrance glow
|
||||
@keyframes toast-glow {
|
||||
from { box-shadow: 0 0 20px var(--toast-glow-color, rgba(var(--accent-rgb), 0.3)); }
|
||||
@@ -150,8 +149,7 @@
|
||||
}
|
||||
|
||||
:root[data-performance-mode='true'] .shell__main::before,
|
||||
:root[data-performance-mode='true'] .shell__main::after,
|
||||
:root[data-performance-mode='true'] .shell::after {
|
||||
:root[data-performance-mode='true'] .auth-layout::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -184,8 +182,7 @@
|
||||
}
|
||||
|
||||
.shell__main::before,
|
||||
.shell__main::after,
|
||||
.shell::after {
|
||||
.auth-layout::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -95,10 +95,64 @@
|
||||
|
||||
// Ambient orbs
|
||||
--orb-opacity: 0.15;
|
||||
--orb-blur: 120px;
|
||||
--orb-primary: radial-gradient(circle, var(--brand-500), var(--brand-800));
|
||||
--orb-secondary: radial-gradient(circle, var(--brand-400), var(--brand-600));
|
||||
--orb-tertiary: radial-gradient(circle, var(--brand-400), var(--brand-700));
|
||||
--orb-1: #6b34cb;
|
||||
--orb-1: color-mix(in srgb, var(--brand-800) 67%, var(--brand-500));
|
||||
--orb-2: #8a55f1;
|
||||
--orb-2: color-mix(in srgb, var(--brand-600) 67%, var(--brand-400));
|
||||
--orb-3: #8049e4;
|
||||
--orb-3: color-mix(in srgb, var(--brand-700) 67%, var(--brand-400));
|
||||
--orb-layers:
|
||||
radial-gradient(circle 610px at calc(100% - 270px) 270px,
|
||||
color-mix(in srgb, var(--orb-1) 92%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 88.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 78.4%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 62.2%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 43.2%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 25.3%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 11.8%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 4.2%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 0.9%, transparent), transparent, transparent),
|
||||
radial-gradient(circle 560px at 270px calc(100% - 220px),
|
||||
color-mix(in srgb, var(--orb-2) 78.3%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 74.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 63.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 48.1%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 31.9%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 17.8%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 8.1%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 2.8%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 0.6%, transparent), transparent, transparent),
|
||||
radial-gradient(circle 510px at calc(30% + 198px) calc(50% + 150px),
|
||||
color-mix(in srgb, var(--orb-3) 56.5%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 53.3%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 44.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 32.9%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 21%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 11.4%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 5.1%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 1.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 0.3%, transparent), transparent, transparent);
|
||||
--orb-layers-auth:
|
||||
radial-gradient(circle 560px at calc(90% - 296px) 240px,
|
||||
color-mix(in srgb, var(--orb-1) 78.3%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 74.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 63.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 48.1%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 31.9%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 17.8%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 8.1%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 2.8%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 0.6%, transparent), transparent, transparent),
|
||||
radial-gradient(circle 535px at calc(10% + 271px) calc(100% - 215px),
|
||||
color-mix(in srgb, var(--orb-2) 68.4%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 64.9%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 54.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 40.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 26.4%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 14.5%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 6.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 2.3%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 0.5%, transparent), transparent, transparent);
|
||||
}
|
||||
|
||||
// Light theme
|
||||
@@ -187,8 +241,62 @@
|
||||
|
||||
// Ambient orbs (stronger for light backgrounds; retint with accent)
|
||||
--orb-opacity: 0.35;
|
||||
--orb-blur: 150px;
|
||||
--orb-primary: radial-gradient(circle, var(--brand-500), var(--brand-700));
|
||||
--orb-secondary: radial-gradient(circle, var(--brand-400), var(--brand-600));
|
||||
--orb-tertiary: radial-gradient(circle, var(--brand-500), var(--brand-800));
|
||||
--orb-1: #7739e3;
|
||||
--orb-1: color-mix(in srgb, var(--brand-700) 67%, var(--brand-500));
|
||||
--orb-2: #8a55f1;
|
||||
--orb-2: color-mix(in srgb, var(--brand-600) 67%, var(--brand-400));
|
||||
--orb-3: #6b34cb;
|
||||
--orb-3: color-mix(in srgb, var(--brand-800) 67%, var(--brand-500));
|
||||
--orb-layers:
|
||||
radial-gradient(circle 700px at calc(100% - 270px) 270px,
|
||||
color-mix(in srgb, var(--orb-1) 78.3%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 74.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 63.5%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 48%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 31.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 17.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 8%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 2.8%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 0.6%, transparent), transparent, transparent),
|
||||
radial-gradient(circle 650px at 270px calc(100% - 220px),
|
||||
color-mix(in srgb, var(--orb-2) 61.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 58.2%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 48.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 36%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 23.1%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 12.5%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 5.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 1.9%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 0.4%, transparent), transparent, transparent),
|
||||
radial-gradient(circle 600px at calc(30% + 198px) calc(50% + 150px),
|
||||
color-mix(in srgb, var(--orb-3) 40.9%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 38.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 32.2%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 23.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 15.1%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 8.1%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 3.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 1.2%, transparent),
|
||||
color-mix(in srgb, var(--orb-3) 0.2%, transparent), transparent, transparent);
|
||||
--orb-layers-auth:
|
||||
radial-gradient(circle 650px at calc(90% - 296px) 240px,
|
||||
color-mix(in srgb, var(--orb-1) 61.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 58.2%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 48.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 36%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 23.1%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 12.5%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 5.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 1.9%, transparent),
|
||||
color-mix(in srgb, var(--orb-1) 0.4%, transparent), transparent, transparent),
|
||||
radial-gradient(circle 625px at calc(10% + 271px) calc(100% - 215px),
|
||||
color-mix(in srgb, var(--orb-2) 51.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 48.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 40.7%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 29.9%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 19%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 10.2%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 4.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 1.6%, transparent),
|
||||
color-mix(in srgb, var(--orb-2) 0.3%, transparent), transparent, transparent);
|
||||
}
|
||||
Reference in new issue
Block a user