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

153 lines
3.3 KiB
SCSS
Raw Normal View History

@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;
2023-07-27 23:28:02 +00:00
.art-rotate {
// transform: rotate(-180deg);
animation: 5000ms rotate linear infinite;
transition: transform 500ms;
2023-07-27 23:28:02 +00:00
.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;
2023-07-27 23:28:02 +00:00
> div {
position: absolute;
inset: 0;
transition: opacity 500ms;
}
.gradient-1 {
2023-08-03 17:53:07 +00:00
background: radial-gradient(circle, rgba(75, 75, 75, 1) 0%, rgba(0, 0, 0, 1) 100%);
2023-07-27 23:28:02 +00:00
z-index: -1;
}
2023-07-27 23:28:02 +00:00
.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 {
2023-08-13 19:01:48 +00:00
background: radial-gradient(circle, rgba(75,75,75,1) 0%, rgba(0,0,0,1) 100%);
2023-07-27 23:28:02 +00:00
opacity: 0;
z-index: -4;
}
}
}
&.connected {
top: 50%;
left: -35em;
transform: translate(0, -50%);
2023-07-27 23:28:02 +00:00
.art-rotate {
transform: rotate(-151.13deg);
animation: none;
2023-07-27 23:28:02 +00:00
.art {
@include fluid-width-height(72rem, 72rem);
2023-07-27 23:28:02 +00:00
.gradient-1 {
opacity: 0;
}
.gradient-4 {
opacity: 1;
}
}
}
}
&.pulse {
2023-07-27 23:28:02 +00:00
.art-rotate {
will-change: transform;
transform: rotate(-151.13deg);
animation: none;
2023-08-03 15:13:33 +00:00
2023-07-27 23:28:02 +00:00
.art {
.gradient-1 {
opacity: 0;
}
2023-07-27 23:28:02 +00:00
.gradient-2 {
opacity: 1;
}
}
}
}
}
2023-08-03 15:13:33 +00:00
2023-08-03 17:53:07 +00:00
@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);
}
}