From df91e6ed2da88d59184ed0c5f579b9d54e76cc92 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Thu, 12 Oct 2023 19:59:26 +0000 Subject: [PATCH] split splash styles --- packages/app/src/theme/index.less | 94 +--------- packages/app/src/theme/splash.less | 277 +++++++++++++++++++++++++++++ 2 files changed, 278 insertions(+), 93 deletions(-) create mode 100644 packages/app/src/theme/splash.less diff --git a/packages/app/src/theme/index.less b/packages/app/src/theme/index.less index cbf57b62..942b4d15 100755 --- a/packages/app/src/theme/index.less +++ b/packages/app/src/theme/index.less @@ -3,6 +3,7 @@ @import "theme/fonts.css"; @import "theme/fixments.less"; @import "theme/mobile.less"; +@import "theme/splash.less"; *, *:before, @@ -246,99 +247,6 @@ svg { } } -.app_splash_wrapper { - position: absolute; - - top: 0; - left: 0; - - overflow: hidden; - - backdrop-filter: blur(10px); - --webkit-backdrop-filter: blur(10px); - - background-color: #252525; - color: #d7d7d7; - - width: 100%; - height: 100%; - z-index: 1000; - - display: flex; - flex-direction: column; - - align-items: center; - justify-content: center; - - >div { - margin-bottom: 40px; - } - - svg { - color: rgb(215, 215, 215) !important; - } - - &.fade-away { - opacity: 0; - transition: all 300ms ease-in-out; - } - - .splash_logo { - width: 100px; - height: 100px; - - display: flex; - flex-direction: column; - - align-items: center; - justify-content: center; - - img { - width: 100%; - } - } - - .splash_label { - font-size: 2rem; - - svg { - margin: 0 !important; - } - } - - .splash_footer { - display: flex; - flex-direction: column; - - justify-content: center; - align-items: center; - - position: absolute; - - bottom: 0; - left: 0; - right: 0; - - margin: auto; - width: fit-content; - - height: 300px; - - #powered_by { - height: 40px; - margin-bottom: 10px; - - filter: grayscale(1) brightness(0.8); - } - - h4 { - font-family: "Space Grotesk", sans-serif; - font-size: 0.8rem; - font-weight: 400; - } - } -} - #fullImageViewer { .__react_modal_image__modal_container { background-color: rgba(0, 0, 0, 0.3) !important; diff --git a/packages/app/src/theme/splash.less b/packages/app/src/theme/splash.less new file mode 100644 index 00000000..4fff410e --- /dev/null +++ b/packages/app/src/theme/splash.less @@ -0,0 +1,277 @@ +@iterations: 12; + +.app_splash_wrapper { + position: fixed; + + top: 0; + left: 0; + + overflow: hidden; + + background-color: #252525; + color: #d7d7d7; + + width: 100vw; + height: 100vh; + height: 100dvh; + + z-index: 1000; + + display: flex; + flex-direction: column; + + align-items: center; + justify-content: center; + + .layers_wrapper { + position: absolute; + + z-index: 99; + + width: 288px; + height: 288px; + } + + .content { + position: relative; + + z-index: 100; + + display: flex; + flex-direction: column; + + align-items: center; + justify-content: center; + + padding: 70px; + + width: 300px; + height: 300px; + + border-radius: 12px; + + img { + width: 100%; + height: 100%; + } + } + + svg { + color: rgb(215, 215, 215) !important; + } + + &.fade-away { + opacity: 0; + transition: all 300ms ease-in-out; + } + + .splash_logo { + width: 100px; + height: 100px; + + display: flex; + flex-direction: column; + + align-items: center; + justify-content: center; + + img { + width: 100%; + } + } + + .splash_label { + font-size: 2rem; + + svg { + margin: 0 !important; + } + } + + .splash_footer { + display: flex; + flex-direction: column; + + justify-content: center; + align-items: center; + + position: absolute; + + bottom: 0; + left: 0; + right: 0; + + margin: auto; + width: fit-content; + + height: 300px; + + #powered_by { + height: 40px; + margin-bottom: 10px; + + filter: grayscale(1) brightness(0.8); + } + } +} + +// .mixin-loop (@i) when (@i > 0) { +// .square:nth-child(@{i}) { +// padding: (@i * 10px); + +// top: (@i * -10px); +// left: (@i * -10px); + +// border-radius: 12px; + +// //backdrop-filter: blur(10px); + +// border: 2px solid var(--colorPrimary); + +// -webkit-animation: magic 1s ease forwards; +// -webkit-animation-delay: (@i * 200ms); +// } + +// .mixin-loop(@i - 1); +// } + +// .mixin-loop(@iterations); + + +@keyframes magic { + 0% { + transform: scale(1) + } + + 100% { + transform: scale(1.5); + } +} + +.loader_wrapper { + user-select: none; + position: absolute; + z-index: 1000; + right: 0; + bottom: 0; + width: auto; + height: 29px; + + margin: 30px; + background-color: #2d2d2dc2; + border-radius: 28px; + + &.end { + animation: unshow 0.8s linear; + + .loader>div { + animation: loader 0.8s linear; + } + + opacity: 0; + display: none; + } + + .loader { + transform: scale(0.28); + width: 54px; + height: 23px; + } + + .loader>div { + width: 6px; + height: 20px; + position: absolute; + left: -10px; + bottom: 15px; + border-radius: 5px; + transform-origin: 10px 35px; + transform: rotate(0deg); + animation: loader 0.8s infinite; + } + + .loader>div:nth-child(2) { + transform: rotate(45deg); + animation-delay: 0.1s; + } + + .loader>div:nth-child(3) { + transform: rotate(90deg); + animation-delay: 0.2s; + } + + .loader>div:nth-child(4) { + transform: rotate(135deg); + animation-delay: 0.3s; + } + + .loader>div:nth-child(5) { + transform: rotate(180deg); + animation-delay: 0.4s; + } + + .loader>div:nth-child(6) { + transform: rotate(225deg); + animation-delay: 0.5s; + } + + .loader>div:nth-child(7) { + transform: rotate(270deg); + animation-delay: 0.6s; + } + + .loader>div:nth-child(8) { + transform: rotate(315deg); + animation-delay: 0.7s; + } +} + +@keyframes loader { + 0% { + background: transparent; + left: -10px; + transform-origin: 10px 35px; + } + + 30% { + background: #fff; + } + + 100% { + background: transparent; + left: 10px; + transform-origin: -10px 35px; + } +} + +@keyframes unshow { + 0% { + opacity: 1; + display: block; + } + + 100% { + opacity: 0; + display: none; + } +} + +@keyframes appear { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes blur-out { + 0% { + filter: blur(10px); + } + + 100% { + filter: blur(0px); + } +} \ No newline at end of file