This repository has been archived on 2023-12-17. You can view files and clone it, but cannot push or open issues or pull requests.
extension/ui/apps/dashboard/components/Art.scss

157 lines
3.5 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: linear-gradient(300deg, 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: 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;
}
.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);
}
}