@pmidc/upyog-css 1.1.5 → 1.1.6

package/src/pages/citizen/citizenNewLogin.scss

@@ -1,33 +1,144 @@
+/* Main Container - Full height viewport */
+.login-page-cover {
+  width: 100%;
+  height: 90vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Removed overflow: hidden to prevent scrolling issues */
+}
+
+/* Container - Full height split layout */
 .login-container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
+  width: 100%;
+  height: 100vh;
+  max-width: 100%;
+  display: flex;
+  background-color: #ffffff;
+  overflow: hidden;
 }
 
-.login-page-cover {
-    background: linear-gradient(0deg, rgba(41, 71, 163, 0.9), rgba(41, 71, 163, 0.9)),
-        url("https://sdc-uat.lgpunjab.gov.in/filestore/v1/files/viewfile/?name=pb%2Fproperty-upload%2FOctober%2F16%2F1760620815250vZVIeEsyde.jpeg");
-    background-size: cover;
-    background-position: center;
-    height: 100vh;
-    width: 100%;
+/* Left Panel - Hero Section takes full height */
+.login-hero-panel {
+  flex: 1;
+  background: linear-gradient(135deg, #5b68f0 0%, #7b5fc7 100%);
+  color: white;
+  padding: 60px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+}
+
+.hero-content {
+  max-width: 500px;
+  text-align: center;
+}
+
+.hero-icon-circle {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 30px;
+  backdrop-filter: blur(10px);
+}
+
+.hero-icon-circle svg {
+  width: 50px;
+  height: 50px;
+  color: white;
+}
+
+.hero-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 20px;
+  line-height: 1.2;
+}
+
+.hero-description {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  margin-bottom: 50px;
+  opacity: 0.95;
+}
+
+.hero-features {
+  display: flex;
+  justify-content: space-around;
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.feature-icon {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.feature-icon:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+  transform: translateY(-5px);
 }
 
+.feature-icon svg {
+  color: white;
+}
+
+.feature-text {
+  font-size: 0.95rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* 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;
+}
+
+/* Login Wrapper - Matches reference image design */
 .login-wrapper {
+  width: 100%;
+  max-width: 480px;
+  background-color: #ffffff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+}
+
+.login-form-header {
+  margin-bottom: 30px;
     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: 750px;
     position: relative;
 }
 .register-login-wrapper {
@@ -45,129 +156,182 @@
     height: 900px;
     position: relative;
 }
+
 .login-title {
-    width: 100%;
-    max-width: 525px;
-    font-size: 2.5rem;
-    color: #0b0c0c;
-    font-weight: 600;
-    text-align: center;
-    padding: 2rem 0rem;
+  font-size: 2rem;
+  font-weight: 700;
+  color: #0b0c0c;
+  margin-bottom: 8px;
 }
 
-.lag-loc-wrapper {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    max-width: 540px;
-    gap: 30px;
+.login-subtitle {
+  font-size: 0.95rem;
+  color: #686677;
+  margin: 0;
 }
 
-.location-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
+/* Form Elements */
+.label {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 25px;
+  color: #686677;
+  display: block;
+  margin-bottom: 8px;
 }
 
-/* The inner select div */
-.location-wrapper .select {
-    display: flex;
-    align-items: center;
-    border: 1px solid #b4b4b4 !important;
-    background-color: rgba(255, 255, 255, var(--bg-opacity));
-    border-radius: 8px;
+.label span {
+  color: #ff1515;
 }
 
-.location-wrapper .select-active {
-    border-radius: 8px !important;
-}
-
-.language-wrapper {
-    width: 100%;
-    max-width: 260px;
+.language-wrapper,
+.location-wrapper,
+.input-wrapper {
+  margin-bottom: 24px;
+  width: 100%;
 }
 
-.label {
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 25px;
-    color: #686677;
-
-    span {
-        color: #ff1515;
-    }
+.location-wrapper .select {
+  display: flex;
+  align-items: center;
+  border: 1px solid #b4b4b4 !important;
+  background-color: rgba(255, 255, 255, var(--bg-opacity));
+  border-radius: 8px;
 }
 
-.input-wrapper {
-    width: 100%;
-    max-width: 540px;
+.location-wrapper .select-active {
+  border-radius: 8px !important;
 }
 
 .input-wrapper .submit-bar,
 .input-wrapper .submit-bar-disabled {
-    width: 100%;
-    max-width: 540px;
+  width: 100%;
 }
 
 .input-wrapper .card-label {
-    font-weight: 500 !important;
-    font-size: 16px !important;
-    line-height: 25px !important;
-    color: #686677 !important;
+  font-weight: 500 !important;
+  font-size: 16px !important;
+  line-height: 25px !important;
+  color: #686677 !important;
 }
 
-.input-wrapper.hide-submit-buttons+.submit-bar,
-.input-wrapper.hide-submit-buttons+.submit-bar-disabled {
-    display: none !important;
+.input-wrapper.hide-submit-buttons + .submit-bar,
+.input-wrapper.hide-submit-buttons + .submit-bar-disabled {
+  display: none !important;
 }
 
+/* Account Link */
 .account-link {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 25px;
-    text-align: center;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 25px;
+  text-align: center;
+  margin-top: 24px;
+  color: #0b0c0c;
 }
 
 .link {
-    color: #1778ff;
-    text-decoration: underline;
+  color: #5b68f0;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.link:hover {
+  color: #7b5fc7;
+  text-decoration: underline;
 }
 
+/* OTP Section */
 .resendIn {
-    font-size: 16px;
-    font-weight: 500;
-    color: #686677;
-    text-align: right;
+  font-size: 16px;
+  font-weight: 500;
+  color: #686677;
+  text-align: right;
+}
 
-    span {
-        color: #1778ff;
-    }
+.resendIn span {
+  color: #5b68f0;
 }
 
 .resend {
-    text-align: right;
-    cursor: pointer;
-    font-weight: 700;
+  text-align: right;
+  cursor: pointer;
+  font-weight: 700;
+  color: #5b68f0;
 }
 
-.login-circle {
-    width: 75px;
-    height: 75px;
-    border-radius: 50%;
-    background-color: #2947a3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 24px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-    cursor: pointer;
-    position: absolute;
-    top: -30px;
+/* Register Login Wrapper - For registration page with same left panel */
+.register-login-wrapper {
+  width: 100%;
+  max-width: 480px;
+  background-color: #ffffff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+}
+
+/* Responsive Design - Hide left panel on tablets and mobile */
+@media (max-width: 1024px) {
+  .login-hero-panel {
+    display: none;
+  }
+
+  .login-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  }
+
+  .login-form-panel {
+    background: transparent;
+  }
+
+  .login-wrapper,
+  .register-login-wrapper {
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  }
 }
 
 @media (max-width: 768px) {
+  .login-wrapper,
+  .register-login-wrapper {
+    padding: 30px 24px;
+    max-width: 95%;
+  }
+
+  .login-title {
+    font-size: 1.75rem;
+  }
+
+  .login-subtitle {
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-wrapper,
+  .register-login-wrapper {
+    padding: 24px 20px;
+  }
+
+  .login-title {
+    font-size: 1.5rem;
+  }
+
+  .login-form-header {
+    margin-bottom: 24px;
+  }
+
+  .language-wrapper,
+  .location-wrapper,
+  .input-wrapper {
+    margin-bottom: 20px;
+  }
+
+  .label,
+  .account-link {
+    font-size: 14px;
+  }
     .lag-loc-wrapper {
         flex-direction: column;
         gap: 0px;

package/src/pages/citizen/container.scss

@@ -20,4 +20,14 @@
 .font-Weigth-bold {
   font-weight: 600 !important;
       margin-top: 20px !important;
+}
+
+.obps-citizen-search-header{
+  background:#ffffff;
+  padding: 20px 0px;
+  color: #00000099;
+  padding: 10px;
+}
+.obps-citizen-card-paragraph{
+  text-align: center;
 }

package/src/pages/employee/dashboard.scss

@@ -133,7 +133,7 @@
 
         .employee-dashboard-quick-services-title {
           color: "#000";
-          font-family: "Manrope";
+          
           font-weight: 700;
           font-size: 20px;
           line-height: 27.32px;

package/src/pages/employee/dss.scss

@@ -69,6 +69,8 @@ padding: 8px 24px;
 
 .dss-white-pre{
   white-space: pre;
+  float: right;
+  margin-top: 20px;
 
 }
 .dss-white-pre-line{