peliprint/blueprint/data/internal/build/templates/2/contents/public/overlay.style.css
2023-09-23 16:34:02 +02:00

27 lines
No EOL
1.4 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');
html {background-color: #000;}
@keyframes backdrop { 0% {rotate: 0deg} 100% {rotate: 360deg}}
@keyframes backdrop2 { 0% {rotate: 45deg} 100% {rotate: 405deg}}
@keyframes backdrop3 { 0% {rotate: 90deg} 100% {rotate: 450deg}}
@keyframes backdrop4 { 0% {rotate: 135deg} 100% {rotate: 495deg}}
@keyframes backdropstart { 0% {opacity: 0} 55% {opacity: 0} 100% {opacity: 0.9}}
@keyframes backdropstart2 { 0% {opacity: 0} 55% {opacity: 0} 100% {opacity: 0.5}}
@keyframes backdropstart3 { 0% {opacity: 0} 55% {opacity: 0} 100% {opacity: 0.8}}
@keyframes backdropstart4 { 0% {opacity: 0} 55% {opacity: 0} 100% {opacity: 0.7}}
.backdrop, .backdrop2, .backdrop3, .backdrop4 {
overflow: hidden;
z-index: 1;
background: url("/extensions/^#identifier#^/backdrop.jpg") no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
position: fixed;
filter: blur(200px);
background-color: #000;
}
.backdrop {animation: backdrop 60s infinite linear, backdropstart 2.1s; opacity: 0.9; left: 10%; scale: 0.96}
.backdrop2 {animation: backdrop2 50s infinite linear, backdropstart2 2.4s; opacity: 0.5; top: 20%; cale: 1.5}
.backdrop3 {animation: backdrop3 70s infinite linear, backdropstart3 2.7s; opacity: 0.8; bottom: 60%; scale: 0.8}
.backdrop4 {animation: backdrop4 40s infinite linear, backdropstart4 2.9s; opacity: 0.7; left: 5%; top: 10%; scale: 0.8}