153 lines
3.3 KiB
SCSS
153 lines
3.3 KiB
SCSS
@import "../../../styles/mixins";
|
|
@import "../../../styles/vars";
|
|
@import "../../../styles/artwork";
|
|
|
|
.art-wrapper {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -125%);
|
|
transition: left 500ms, transform 500ms;
|
|
z-index: -1;
|
|
|
|
.art-rotate {
|
|
// transform: rotate(-180deg);
|
|
animation: 5000ms rotate linear infinite;
|
|
transition: transform 500ms;
|
|
|
|
.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: radial-gradient(circle, rgba(75, 75, 75, 1) 0%, rgba(0, 0, 0, 1) 100%);
|
|
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: radial-gradient(circle, rgba(75,75,75,1) 0%, rgba(0,0,0,1) 100%);
|
|
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;
|
|
}
|
|
|
|
.gradient-4 {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.pulse {
|
|
.art-rotate {
|
|
will-change: transform;
|
|
transform: rotate(-151.13deg);
|
|
animation: none;
|
|
|
|
.art {
|
|
.gradient-1 {
|
|
opacity: 0;
|
|
}
|
|
|
|
.gradient-2 {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(127.54deg);
|
|
}
|
|
15.38% {
|
|
transform: rotate(127.54deg);
|
|
}
|
|
23.08% {
|
|
transform: rotate(420deg);
|
|
}
|
|
38.46% {
|
|
transform: rotate(420deg);
|
|
}
|
|
46.15% {
|
|
transform: rotate(360deg);
|
|
}
|
|
69.23% {
|
|
transform: rotate(360deg);
|
|
}
|
|
76.92% {
|
|
transform: rotate(540deg);
|
|
}
|
|
92.31% {
|
|
transform: rotate(540deg);
|
|
}
|
|
100% {
|
|
transform: rotate(127.54deg);
|
|
}
|
|
}
|