LumeWeb
/
extension
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: restructure animation css

This commit is contained in:
Derrick Hammer 2023-07-27 19:28:02 -04:00
parent a11abc7bda
commit a6b962149a
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
1 changed files with 84 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
ui/apps/dashboard/components/Art.scss
View File

@ -9,65 +9,72 @@
transform: translate(-50%, -125%); transform: translate(-50%, -125%);
transition: left 500ms, transform 500ms; transition: left 500ms, transform 500ms;
z-index: -1; z-index: -1;
.art {
position: relative;
@include fluid-width-height(9.0625rem, 9.0625rem);
background-image: $lume-2-base64;
background-size: cover;
background-position: 50%;
transition: width 500ms, height 500ms;
> div { .art-rotate {
position: absolute; // transform: rotate(-180deg);
inset: 0; animation: 5000ms rotate linear infinite;
transition: opacity 500ms; transition: transform 500ms;
}
.gradient-1 { .art {
background: linear-gradient( position: relative;
272.67deg, @include fluid-width-height(9.0625rem, 9.0625rem);
#ff005c -27.49%, background-image: $lume-2-base64;
#0c0c0d 26.91%, background-size: cover;
#ff005c 49.4%, background-position: 50%;
#ed6a5e 99.62% transition: width 500ms, height 500ms;
);
z-index: -1;
}
.gradient-2 { > div {
background: conic-gradient( position: absolute;
from 180deg at 50% 50%, inset: 0;
#a67833 -15.8deg, transition: opacity 500ms;
#e91f1f 222.32deg, }
#a67833 344.2deg,
#e91f1f 582.32deg
);
opacity: 0;
z-index: -2;
}
.gradient-3 { .gradient-1 {
background: conic-gradient( background: linear-gradient(
from -89.79deg at 50% 50%, 272.67deg,
#33a653 -15.8deg, #ff005c -27.49%,
#080808 222.32deg, #0c0c0d 26.91%,
#33a653 344.2deg, #ff005c 49.4%,
#080808 582.32deg #ed6a5e 99.62%
); );
opacity: 0; z-index: -1;
z-index: -3; }
}
.gradient-4 { .gradient-2 {
background: conic-gradient( background: conic-gradient(
from 180deg at 50% 50%, from 180deg at 50% 50%,
#2f2f2f -15.8deg, #a67833 -15.8deg,
#66d155 222.32deg, #e91f1f 222.32deg,
#2f2f2f 344.2deg, #a67833 344.2deg,
#66d155 582.32deg #e91f1f 582.32deg
); );
opacity: 0; opacity: 0;
z-index: -4; z-index: -2;
}
.gradient-3 {
background: conic-gradient(
from -89.79deg at 50% 50%,
#33a653 -15.8deg,
#080808 222.32deg,
#33a653 344.2deg,
#080808 582.32deg
);
opacity: 0;
z-index: -3;
}
.gradient-4 {
background: conic-gradient(
from 180deg at 50% 50%,
#2f2f2f -15.8deg,
#66d155 222.32deg,
#2f2f2f 344.2deg,
#66d155 582.32deg
);
opacity: 0;
z-index: -4;
}
} }
} }
@ -75,44 +82,43 @@
top: 50%; top: 50%;
left: -35em; left: -35em;
transform: translate(0, -50%); transform: translate(0, -50%);
.art-rotate { .art-rotate {
transform: rotate(-151.13deg); transform: rotate(-151.13deg);
animation: none; animation: none;
.art { .art {
@include fluid-width-height(72rem, 72rem); @include fluid-width-height(72rem, 72rem);
}
}
.gradient-1 {
opacity: 0;
}
.gradient-4 { .gradient-1 {
opacity: 1; opacity: 0;
}
.gradient-4 {
opacity: 1;
}
}
} }
} }
&.pulse { &.pulse {
.gradient-1 { .art-rotate {
opacity: 0; will-change: transform;
transform: rotate(-151.13deg);
animation: none;
.art {
.gradient-1 {
opacity: 0;
}
.gradient-2 {
opacity: 1;
}
}
} }
.gradient-2 {
opacity: 1;
}
} }
} }
.art-rotate {
// transform: rotate(-180deg);
animation: 5000ms rotate linear infinite;
transition: transform 500ms;
&.connected {
transform: rotate(-151.13deg);
animation: none;
}
}
@keyframes fade-in { @keyframes fade-in {
0% { 0% {
opacity: 0; opacity: 0;