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

refactor: fix css animations and restructure css classes

This commit is contained in:
Derrick Hammer 2023-07-26 14:47:16 -04:00
parent ac2cf57152
commit 629fcfe062
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
2 changed files with 98 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
@import "../../../styles/mixins";
@import "../../../styles/vars";
@import "../../../styles/artwork";
.art-wrapper {
position: absolute;
top: 50%;
@ -8,83 +9,86 @@
transform: translate(-50%, -125%);
transition: left 500ms, transform 500ms;
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;
&.done {
> div {
position: absolute;
inset: 0;
transition: opacity 500ms;
}
.gradient-1 {
background: linear-gradient(
272.67deg,
#ff005c -27.49%,
#0c0c0d 26.91%,
#ff005c 49.4%,
#ed6a5e 99.62%
);
z-index: -1;
}
.gradient-2 {
background: conic-gradient(
from 180deg at 50% 50%,
#a67833 -15.8deg,
#e91f1f 222.32deg,
#a67833 344.2deg,
#e91f1f 582.32deg
);
opacity: 0;
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;
}
}
&.connected {
top: 50%;
left: -35em;
transform: translate(0, -50%);
}
}
.art-rotate {
transform: rotate(-151.13deg);
animation: none;
.art {
@include fluid-width-height(72rem, 72rem);
}
}
.gradient-1 {
opacity: 0;
}
.art-rotate {
transform: rotate(-180deg);
animation: 5000ms rotate;
transition: transform 500ms;
&.done {
transform: rotate(-151.13deg);
}
}
.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 {
position: absolute;
inset: 0;
transition: opacity 500ms;
}
.gradient-1 {
background: linear-gradient(
272.67deg,
#ff005c -27.49%,
#0c0c0d 26.91%,
#ff005c 49.4%,
#ed6a5e 99.62%
);
z-index: -1;
}
.gradient-2 {
background: conic-gradient(
from 180deg at 50% 50%,
#a67833 -15.8deg,
#e91f1f 222.32deg,
#a67833 344.2deg,
#e91f1f 582.32deg
);
opacity: 0;
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;
.gradient-4 {
opacity: 1;
}
}
&.pulse {
@ -96,38 +100,16 @@
opacity: 1;
}
}
}
.art-rotate {
// transform: rotate(-180deg);
animation: 5000ms rotate linear infinite;
transition: transform 500ms;
&.connected {
.gradient-1 {
opacity: 0;
}
.gradient-3 {
opacity: 1;
}
}
&.done {
@include fluid-width-height(72rem, 72rem);
.gradient-1 {
opacity: 0;
}
.gradient-4 {
opacity: 1;
}
.loading-text {
display: block;
.loading-text-connected {
top: 0;
left: -25%;
transform: translate(-125%, 0);
opacity: 0;
}
}
transform: rotate(-151.13deg);
animation: none;
}
}
@ -145,28 +127,28 @@
0% {
transform: rotate(127.54deg);
}
20% {
15.38% {
transform: rotate(127.54deg);
}
30% {
23.08% {
transform: rotate(420deg);
}
50% {
38.46% {
transform: rotate(420deg);
}
60% {
46.15% {
transform: rotate(360deg);
}
90% {
69.23% {
transform: rotate(360deg);
}
100% {
76.92% {
transform: rotate(540deg);
}
92.31% {
transform: rotate(540deg);
}
100% {
transform: rotate(127.54deg);
}
}

3
ui/apps/dashboard/components/Art.svelte
View File

@ -2,13 +2,14 @@
import { waitForConnected } from "../../../../shared/util.ts";
let connected = false;
let pulse = false;
waitForConnected(() => {
connected = true;
});
</script>
<div class="art-wrapper">
<div class="art-wrapper" class:pulse class:connected>
<div class="art-rotate">
<div class="art">
<div class="gradient-1" />