@pmidc/upyog-css 1.1.10 → 1.1.11

package/src/pages/citizen/InboxCard.scss

@@ -159,10 +159,7 @@
 }
 
 .bpa-newbuilding-bpa-section {
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  padding-bottom: 50px;
+
 }
 .bpa-newbuilding-label-field-pair {
   display: flex;
@@ -212,116 +209,170 @@
 }
 
 .bpa-owner-error-message {
-  color: red;
+  color: #dc2626;
   font-size: 12px;
-  margin-top: 4px;
+  margin-top: 6px;
+  font-weight: 500;
 }
+
 .bpa-owner-delete-icon {
   position: relative;
-  bottom: 5px;
+  bottom: 0;
 }
+
 .bpa-owner-link-delete-button {
-  width: 50px;
+  width: 40px;
+  height: 40px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  background: black;
+  background: #fee2e2;
+  border-radius: 8px;
   float: right;
+  margin-top: -10px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #fecaca;
+  }
 }
-.bpa-owner-owner-card {
-  border: 1px solid;
-  border-radius: 5px;
-  padding: 10px;
-  padding-top: 20px;
-  margin-top: 10px;
-  border-color: #f3f3f3;
-  background: #fafafa;
-}
+
+
+
 .bpa-owner-cardlabel-negative-margin {
-  margin-bottom: -15px;
+  margin-bottom: 8px;
 }
+
 .bpa-owner-mobile-row {
-  margin-top: 30px;
+  margin-top: 8px;
+  margin-bottom: 16px;
 }
-.bpa-owner-country-prefix {
-  margin-bottom: 24px;
-  padding: 3px 2px;
-  border: 1px solid #b4b4b4;
-  border-radius: 8px 0 0 8px;
-  display: inline-block;
-}
-.bpa-owner-phone-input {
-  background: #fafafa;
-  padding: 0 4px;
-  border-radius: 0 8px 8px 0;
-  width: 96%;
+
+.bpa-owner-field-container {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  
+  .field-container {
+    margin-bottom: 0;
+  }
+  
+  .text-input input {
+    padding-right: 44px !important;
+  }
 }
+
 .bpa-owner-search-icon-container {
-  position: relative;
-  z-index: 100;
-  right: 44px;
-  margin-top: -24px;
-  margin-right: -20px;
+  position: absolute;
+  right: 12px;
+  top: 36%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
+  z-index: 2;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    fill: #2563eb;
+  }
+
+  &:hover svg {
+    fill: #1e40af;
+  }
 }
+
 .bpa-owner-cardlabel-margin-top {
-  margin-top: 30px;
+  margin-top: 20px;
 }
+
 .bpa-owner-upload-row {
   display: flex;
-  gap: 15px;
+  gap: 16px;
   flex-direction: row;
+  align-items: flex-start;
 }
+
 @media (max-width: 768px) {
-  .upload-row {
+  .bpa-owner-upload-row {
     flex-direction: column;
   }
+  
+  .bpa-owner-field-container {
+    max-width: 100%;
+  }
 }
+
 .bpa-owner-input-bg-fa {
   background: #fafafa;
+  border-radius: 8px;
 }
+
 .bpa-owner-owner-textarea {
   background: #fafafa;
   width: 100%;
   min-height: 80px;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  padding: 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
   resize: vertical;
+  font-size: 14px;
+
+  &:focus {
+    outline: none;
+    border-color: #2563eb;
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+  }
 }
+
 .bpa-owner-checkbox-top {
-  padding-top: 10px;
+  padding-top: 16px;
 }
+
 .bpa-owner-add-owner-row {
   display: flex;
-  padding-bottom: 15px;
-  color: #ff8c00;
+  padding: 16px 0;
 }
+
 .bpa-owner-add-owner-button {
-  padding-top: 10px;
+  padding: 10px 20px;
   background: transparent;
-  border: none;
-  color: inherit;
+  border: 2px dashed #2563eb;
+  border-radius: 8px;
+  color: #2563eb;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(37, 99, 235, 0.05);
+    border-style: solid;
+  }
 }
+
 .bpa-owner-submit-back {
-  border: 1px solid;
-  background: transparent;
-  color: #2947a3;
-  margin-right: 5px;
+  margin-right: 12px;
 }
+
 .bpa-owner-label-field-pair {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px dashed #e0e0e0;
-  padding: 0.5rem 0;
-  color: #333;
+  border-bottom: 1px dashed #e5e7eb;
+  padding: 12px 0;
+  color: #374151;
 }
+
 .bpa-owner-bold-label {
-  font-weight: 700;
-  color: #555;
+  font-weight: 600;
+  color: #4b5563;
 }
+
 .bpa-owner-newbuilding-error-message {
-  color: red;
-  margin-top: 4px;
-  font-size: 0.9rem;
+  color: #dc2626;
+  margin-top: 6px;
+  font-size: 12px;
+  font-weight: 500;
 }

package/src/pages/citizen/citizenNewLogin.scss

@@ -1,18 +1,20 @@
 /* Main Container - Full height viewport */
 .login-page-cover {
   width: 100%;
-  height: 90vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: calc(100vh - 56px); /* Subtract TopBar height */
+
   display: flex;
   align-items: center;
   justify-content: center;
+
+  box-sizing: border-box;
   /* Removed overflow: hidden to prevent scrolling issues */
 }
 
 /* Container - Full height split layout */
 .login-container {
   width: 100%;
-  height: 100vh;
+  min-height: calc(100vh - 56px); /* Subtract TopBar height */
   max-width: 100%;
   display: flex;
   background-color: #ffffff;
@@ -141,21 +143,6 @@
     border-radius: 4px;
     position: relative;
 }
-.register-login-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    background-color: rgba(255, 255, 255, 1);
-    margin: 8px;
-    padding: 2rem;
-    box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.43922);
-    border-radius: 4px;
-    width: 35%;
-    max-width: 100vw;
-    height: 900px;
-    position: relative;
-}
 
 .login-title {
   font-size: 2rem;
@@ -187,7 +174,6 @@
 .language-wrapper,
 .location-wrapper,
 .input-wrapper {
-  margin-bottom: 24px;
   width: 100%;
 }
 
@@ -270,6 +256,20 @@
   padding: 40px;
   border-radius: 12px;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+}
+
+/* Right Panel - Login Form with scrollable content */
+.login-form-panel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  overflow-y: auto;
+  padding: 20px;
+  min-height: calc(100vh - 56px);
 }
 
 /* Responsive Design - Hide left panel on tablets and mobile */
@@ -322,11 +322,6 @@
     margin-bottom: 24px;
   }
 
-  .language-wrapper,
-  .location-wrapper,
-  .input-wrapper {
-    margin-bottom: 20px;
-  }
 
   .label,
   .account-link {

package/src/pages/citizen/loaderMessage.scss

@@ -1,6 +1,12 @@
+/* ============================================
+   SPACESHIP LOADER - Centered & Responsive
+   ============================================ */
+
 .loader-message {
    overflow: hidden;
-   position: relative;
+   position: fixed;
+   top: 0;
+   left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
@@ -10,16 +16,16 @@
    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: absolute;
-   left: 44%;
-   top: 50%;
+   position: relative;
    animation: speeder .4s linear infinite;
 }
 
-.loader-message .body>span {
+.loader-message .body > span {
    height: 5px;
    width: 35px;
    background: #0d43a7;
@@ -34,7 +40,7 @@
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
-   border-right: 100px solid #000;
+   border-right: 100px solid #1e3a5f;
    border-bottom: 6px solid transparent;
 }
 
@@ -55,7 +61,7 @@
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
-   border-right: 55px solid #000;
+   border-right: 55px solid #1e3a5f;
    border-bottom: 16px solid transparent;
    top: -16px;
    right: -98px;
@@ -85,30 +91,30 @@
    border-radius: 0 0 0 2px;
 }
 
-.loader-message .body>span>span {
+.loader-message .body > span > span {
    width: 30px;
    height: 1px;
    background: #0d43a7;
    position: absolute;
 }
 
-.loader-message .body>span>span:nth-child(1) {
+.loader-message .body > span > span:nth-child(1) {
    top: 0;
    animation: fazer1 .2s linear infinite;
 }
 
-.loader-message .body>span>span:nth-child(2) {
+.loader-message .body > span > span:nth-child(2) {
    top: 3px;
    animation: fazer2 .4s linear infinite;
 }
 
-.loader-message .body>span>span:nth-child(3) {
+.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) {
+.loader-message .body > span > span:nth-child(4) {
    top: 4px;
    animation: fazer4 1s linear infinite;
    animation-delay: -1s;
@@ -118,7 +124,6 @@
    0% {
       left: 0;
    }
-
    100% {
       left: -80px;
       opacity: 0;
@@ -129,7 +134,6 @@
    0% {
       left: 0;
    }
-
    100% {
       left: -100px;
       opacity: 0;
@@ -140,7 +144,6 @@
    0% {
       left: 0;
    }
-
    100% {
       left: -50px;
       opacity: 0;
@@ -151,7 +154,6 @@
    0% {
       left: 0;
    }
-
    100% {
       left: -150px;
       opacity: 0;
@@ -162,43 +164,33 @@
    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);
    }
@@ -208,13 +200,16 @@
    position: absolute;
    width: 100%;
    height: 100%;
+   top: 0;
+   left: 0;
+   pointer-events: none;
 }
 
 .loader-message .longfazers span {
    position: absolute;
    height: 2px;
    width: 20%;
-   background: #0d43a7;
+   background: linear-gradient(90deg, transparent, #0d43a7, transparent);
 }
 
 .loader-message .longfazers span:nth-child(1) {
@@ -242,20 +237,23 @@
 
 .loader-message .message {
    position: absolute;
-   font-family: 'Open Sans', sans-serif;
+   font-family: 'Roboto', 'Open Sans', sans-serif;
    font-weight: 600;
-   font-size: 12px;
+   font-size: 16px;
    text-transform: uppercase;
-   left: 44%;
-   top: 58%;
-   margin-left: -20px;
+   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;
@@ -266,7 +264,6 @@
    0% {
       left: 200%;
    }
-
    100% {
       left: -200%;
       opacity: 0;
@@ -277,7 +274,6 @@
    0% {
       left: 200%;
    }
-
    100% {
       left: -100%;
       opacity: 0;
@@ -288,9 +284,59 @@
    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%;
+   }
 }

package/src/pages/employee/index.scss

@@ -181,6 +181,7 @@
     padding-top: 82px;
     min-height: calc(100vh - 48px);
     display: flex !important;
+    justify-content: center;
   }
 }
 .citizen,

package/src/pages/employee/login.scss

@@ -73,7 +73,8 @@
 /* Login Card */
 .employee-login-card {
   padding: 20px;
-  width: 650px;
+  width: 100%;
+  max-width: 650px;
   overflow: visible;
   position: relative;
   z-index: 1;

package/src/pages/swach/index.scss

@@ -3,6 +3,8 @@
   .card {
     .employee-card-input--front {
       background-color: white;
+      position: relative;
+      z-index: 0 !important;
     }
     input[name="mobileNumber"] {
       max-width: 490px;