@pmidc/upyog-css 1.2.36-UAT.36 → 1.2.36-UAT.37

package/src/pages/citizen/loaderMessage.scss

@@ -1,342 +1,342 @@
-/* ============================================
-   SPACESHIP LOADER - Centered & Responsive
-   ============================================ */
-
-.loader-message {
-   overflow: hidden;
-   position: fixed;
-   top: 0;
-   left: 0;
-   height: 100vh;
-   width: 100vw;
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   flex-direction: column;
-   font-weight: 600;
-   font-size: 14px;
-   color: #000;
-   background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 50%, #dbeafe 100%);
-   z-index: 9999;
-}
-
-.loader-message .body {
-   position: relative;
-   animation: speeder .4s linear infinite;
-}
-
-.loader-message .body > span {
-   height: 5px;
-   width: 35px;
-   background: #0d43a7;
-   position: absolute;
-   top: -19px;
-   left: -40px;
-   border-radius: 2px 10px 1px 0;
-}
-
-.loader-message .base span {
-   position: absolute;
-   width: 0;
-   height: 0;
-   border-top: 6px solid transparent;
-   border-right: 100px solid #1e3a5f;
-   border-bottom: 6px solid transparent;
-}
-
-.loader-message .base span::before {
-   content: "";
-   height: 22px;
-   width: 22px;
-   border-radius: 50%;
-   background: #0d43a7;
-   position: absolute;
-   right: -110px;
-   top: -16px;
-}
-
-.loader-message .base span::after {
-   content: "";
-   position: absolute;
-   width: 0;
-   height: 0;
-   border-top: 0 solid transparent;
-   border-right: 55px solid #1e3a5f;
-   border-bottom: 16px solid transparent;
-   top: -16px;
-   right: -98px;
-}
-
-.loader-message .face {
-   position: absolute;
-   height: 12px;
-   width: 20px;
-   background: #0d43a7;
-   border-radius: 20px 20px 0 0;
-   transform: rotate(-40deg);
-   right: -125px;
-   top: -15px;
-}
-
-.loader-message .face::after {
-   content: "";
-   height: 12px;
-   width: 12px;
-   background: #0d43a7;
-   right: 4px;
-   top: 7px;
-   position: absolute;
-   transform: rotate(40deg);
-   transform-origin: 50% 50%;
-   border-radius: 0 0 0 2px;
-}
-
-.loader-message .body > span > span {
-   width: 30px;
-   height: 1px;
-   background: #0d43a7;
-   position: absolute;
-}
-
-.loader-message .body > span > span:nth-child(1) {
-   top: 0;
-   animation: fazer1 .2s linear infinite;
-}
-
-.loader-message .body > span > span:nth-child(2) {
-   top: 3px;
-   animation: fazer2 .4s linear infinite;
-}
-
-.loader-message .body > span > span:nth-child(3) {
-   top: 1px;
-   animation: fazer3 .4s linear infinite;
-   animation-delay: -1s;
-}
-
-.loader-message .body > span > span:nth-child(4) {
-   top: 4px;
-   animation: fazer4 1s linear infinite;
-   animation-delay: -1s;
-}
-
-@keyframes fazer1 {
-   0% {
-      left: 0;
-   }
-   100% {
-      left: -80px;
-      opacity: 0;
-   }
-}
-
-@keyframes fazer2 {
-   0% {
-      left: 0;
-   }
-   100% {
-      left: -100px;
-      opacity: 0;
-   }
-}
-
-@keyframes fazer3 {
-   0% {
-      left: 0;
-   }
-   100% {
-      left: -50px;
-      opacity: 0;
-   }
-}
-
-@keyframes fazer4 {
-   0% {
-      left: 0;
-   }
-   100% {
-      left: -150px;
-      opacity: 0;
-   }
-}
-
-@keyframes speeder {
-   0% {
-      transform: translate(2px, 1px) rotate(0deg);
-   }
-   10% {
-      transform: translate(-1px, -3px) rotate(-1deg);
-   }
-   20% {
-      transform: translate(-2px, 0px) rotate(1deg);
-   }
-   30% {
-      transform: translate(1px, 2px) rotate(0deg);
-   }
-   40% {
-      transform: translate(1px, -1px) rotate(1deg);
-   }
-   50% {
-      transform: translate(-1px, 3px) rotate(-1deg);
-   }
-   60% {
-      transform: translate(-1px, 1px) rotate(0deg);
-   }
-   70% {
-      transform: translate(3px, 1px) rotate(-1deg);
-   }
-   80% {
-      transform: translate(-2px, -1px) rotate(1deg);
-   }
-   90% {
-      transform: translate(2px, 1px) rotate(0deg);
-   }
-   100% {
-      transform: translate(1px, -2px) rotate(-1deg);
-   }
-}
-
-.loader-message .longfazers {
-   position: absolute;
-   width: 100%;
-   height: 100%;
-   top: 0;
-   left: 0;
-   pointer-events: none;
-}
-
-.loader-message .longfazers span {
-   position: absolute;
-   height: 2px;
-   width: 20%;
-   background: linear-gradient(90deg, transparent, #0d43a7, transparent);
-}
-
-.loader-message .longfazers span:nth-child(1) {
-   top: 20%;
-   animation: lf .6s linear infinite;
-   animation-delay: -5s;
-}
-
-.loader-message .longfazers span:nth-child(2) {
-   top: 40%;
-   animation: lf2 .8s linear infinite;
-   animation-delay: -1s;
-}
-
-.loader-message .longfazers span:nth-child(3) {
-   top: 60%;
-   animation: lf3 .6s linear infinite;
-}
-
-.loader-message .longfazers span:nth-child(4) {
-   top: 80%;
-   animation: lf4 .5s linear infinite;
-   animation-delay: -3s;
-}
-
-.loader-message .message {
-   position: absolute;
-   font-family: 'Roboto', 'Open Sans', sans-serif;
-   font-weight: 600;
-   font-size: 16px;
-   text-transform: uppercase;
-   letter-spacing: 2px;
-   bottom: 35%;
-   left: 50%;
-   transform: translateX(-50%);
-   color: #0d43a7;
-   text-align: center;
-   white-space: nowrap;
-}
-
-@keyframes lf {
-   0% {
-      left: 200%;
-   }
-   100% {
-      left: -200%;
-      opacity: 0;
-   }
-}
-
-@keyframes lf2 {
-   0% {
-      left: 200%;
-   }
-   100% {
-      left: -200%;
-      opacity: 0;
-   }
-}
-
-@keyframes lf3 {
-   0% {
-      left: 200%;
-   }
-   100% {
-      left: -100%;
-      opacity: 0;
-   }
-}
-
-@keyframes lf4 {
-   0% {
-      left: 200%;
-   }
-   100% {
-      left: -100%;
-      opacity: 0;
-   }
-}
-
-/* ============================================
-   RESPONSIVE STYLES
-   ============================================ */
-
-/* Tablet */
-@media screen and (max-width: 768px) {
-   .loader-message .body {
-      transform: scale(0.85);
-   }
-   
-   .loader-message .message {
-      font-size: 14px;
-      letter-spacing: 1.5px;
-   }
-   
-   .loader-message .longfazers span {
-      height: 1.5px;
-   }
-}
-
-/* Mobile */
-@media screen and (max-width: 480px) {
-   .loader-message .body {
-      transform: scale(0.7);
-   }
-   
-   .loader-message .message {
-      font-size: 12px;
-      letter-spacing: 1px;
-      bottom: 38%;
-   }
-   
-   .loader-message .longfazers span {
-      height: 1px;
-      width: 25%;
-   }
-}
-
-/* Small Mobile */
-@media screen and (max-width: 320px) {
-   .loader-message .body {
-      transform: scale(0.6);
-   }
-   
-   .loader-message .message {
-      font-size: 10px;
-      letter-spacing: 0.5px;
-      bottom: 40%;
-   }
+/* ============================================
+   SPACESHIP LOADER - Centered & Responsive
+   ============================================ */
+
+.loader-message {
+   overflow: hidden;
+   position: fixed;
+   top: 0;
+   left: 0;
+   height: 100vh;
+   width: 100vw;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   flex-direction: column;
+   font-weight: 600;
+   font-size: 14px;
+   color: #000;
+   background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 50%, #dbeafe 100%);
+   z-index: 9999;
+}
+
+.loader-message .body {
+   position: relative;
+   animation: speeder .4s linear infinite;
+}
+
+.loader-message .body > span {
+   height: 5px;
+   width: 35px;
+   background: #0d43a7;
+   position: absolute;
+   top: -19px;
+   left: -40px;
+   border-radius: 2px 10px 1px 0;
+}
+
+.loader-message .base span {
+   position: absolute;
+   width: 0;
+   height: 0;
+   border-top: 6px solid transparent;
+   border-right: 100px solid #1e3a5f;
+   border-bottom: 6px solid transparent;
+}
+
+.loader-message .base span::before {
+   content: "";
+   height: 22px;
+   width: 22px;
+   border-radius: 50%;
+   background: #0d43a7;
+   position: absolute;
+   right: -110px;
+   top: -16px;
+}
+
+.loader-message .base span::after {
+   content: "";
+   position: absolute;
+   width: 0;
+   height: 0;
+   border-top: 0 solid transparent;
+   border-right: 55px solid #1e3a5f;
+   border-bottom: 16px solid transparent;
+   top: -16px;
+   right: -98px;
+}
+
+.loader-message .face {
+   position: absolute;
+   height: 12px;
+   width: 20px;
+   background: #0d43a7;
+   border-radius: 20px 20px 0 0;
+   transform: rotate(-40deg);
+   right: -125px;
+   top: -15px;
+}
+
+.loader-message .face::after {
+   content: "";
+   height: 12px;
+   width: 12px;
+   background: #0d43a7;
+   right: 4px;
+   top: 7px;
+   position: absolute;
+   transform: rotate(40deg);
+   transform-origin: 50% 50%;
+   border-radius: 0 0 0 2px;
+}
+
+.loader-message .body > span > span {
+   width: 30px;
+   height: 1px;
+   background: #0d43a7;
+   position: absolute;
+}
+
+.loader-message .body > span > span:nth-child(1) {
+   top: 0;
+   animation: fazer1 .2s linear infinite;
+}
+
+.loader-message .body > span > span:nth-child(2) {
+   top: 3px;
+   animation: fazer2 .4s linear infinite;
+}
+
+.loader-message .body > span > span:nth-child(3) {
+   top: 1px;
+   animation: fazer3 .4s linear infinite;
+   animation-delay: -1s;
+}
+
+.loader-message .body > span > span:nth-child(4) {
+   top: 4px;
+   animation: fazer4 1s linear infinite;
+   animation-delay: -1s;
+}
+
+@keyframes fazer1 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -80px;
+      opacity: 0;
+   }
+}
+
+@keyframes fazer2 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -100px;
+      opacity: 0;
+   }
+}
+
+@keyframes fazer3 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -50px;
+      opacity: 0;
+   }
+}
+
+@keyframes fazer4 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -150px;
+      opacity: 0;
+   }
+}
+
+@keyframes speeder {
+   0% {
+      transform: translate(2px, 1px) rotate(0deg);
+   }
+   10% {
+      transform: translate(-1px, -3px) rotate(-1deg);
+   }
+   20% {
+      transform: translate(-2px, 0px) rotate(1deg);
+   }
+   30% {
+      transform: translate(1px, 2px) rotate(0deg);
+   }
+   40% {
+      transform: translate(1px, -1px) rotate(1deg);
+   }
+   50% {
+      transform: translate(-1px, 3px) rotate(-1deg);
+   }
+   60% {
+      transform: translate(-1px, 1px) rotate(0deg);
+   }
+   70% {
+      transform: translate(3px, 1px) rotate(-1deg);
+   }
+   80% {
+      transform: translate(-2px, -1px) rotate(1deg);
+   }
+   90% {
+      transform: translate(2px, 1px) rotate(0deg);
+   }
+   100% {
+      transform: translate(1px, -2px) rotate(-1deg);
+   }
+}
+
+.loader-message .longfazers {
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   top: 0;
+   left: 0;
+   pointer-events: none;
+}
+
+.loader-message .longfazers span {
+   position: absolute;
+   height: 2px;
+   width: 20%;
+   background: linear-gradient(90deg, transparent, #0d43a7, transparent);
+}
+
+.loader-message .longfazers span:nth-child(1) {
+   top: 20%;
+   animation: lf .6s linear infinite;
+   animation-delay: -5s;
+}
+
+.loader-message .longfazers span:nth-child(2) {
+   top: 40%;
+   animation: lf2 .8s linear infinite;
+   animation-delay: -1s;
+}
+
+.loader-message .longfazers span:nth-child(3) {
+   top: 60%;
+   animation: lf3 .6s linear infinite;
+}
+
+.loader-message .longfazers span:nth-child(4) {
+   top: 80%;
+   animation: lf4 .5s linear infinite;
+   animation-delay: -3s;
+}
+
+.loader-message .message {
+   position: absolute;
+   font-family: 'Roboto', 'Open Sans', sans-serif;
+   font-weight: 600;
+   font-size: 16px;
+   text-transform: uppercase;
+   letter-spacing: 2px;
+   bottom: 35%;
+   left: 50%;
+   transform: translateX(-50%);
+   color: #0d43a7;
+   text-align: center;
+   white-space: nowrap;
+}
+
+@keyframes lf {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -200%;
+      opacity: 0;
+   }
+}
+
+@keyframes lf2 {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -200%;
+      opacity: 0;
+   }
+}
+
+@keyframes lf3 {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -100%;
+      opacity: 0;
+   }
+}
+
+@keyframes lf4 {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -100%;
+      opacity: 0;
+   }
+}
+
+/* ============================================
+   RESPONSIVE STYLES
+   ============================================ */
+
+/* Tablet */
+@media screen and (max-width: 768px) {
+   .loader-message .body {
+      transform: scale(0.85);
+   }
+   
+   .loader-message .message {
+      font-size: 14px;
+      letter-spacing: 1.5px;
+   }
+   
+   .loader-message .longfazers span {
+      height: 1.5px;
+   }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+   .loader-message .body {
+      transform: scale(0.7);
+   }
+   
+   .loader-message .message {
+      font-size: 12px;
+      letter-spacing: 1px;
+      bottom: 38%;
+   }
+   
+   .loader-message .longfazers span {
+      height: 1px;
+      width: 25%;
+   }
+}
+
+/* Small Mobile */
+@media screen and (max-width: 320px) {
+   .loader-message .body {
+      transform: scale(0.6);
+   }
+   
+   .loader-message .message {
+      font-size: 10px;
+      letter-spacing: 0.5px;
+      bottom: 40%;
+   }
 }