@pmidc/upyog-css 1.1.0 → 1.1.2

package/src/pages/citizen/citizenNewLogin.scss

@@ -1,357 +1,193 @@
-/* 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%;
-  height: 100vh;
-  max-width: 100%;
-  display: flex;
-  background-color: #ffffff;
-  overflow: hidden;
-}
-
-/* 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;
-    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;
-  font-weight: 700;
-  color: #0b0c0c;
-  margin-bottom: 8px;
-}
-
-.login-subtitle {
-  font-size: 0.95rem;
-  color: #686677;
-  margin: 0;
-}
-
-/* Form Elements */
-.label {
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 25px;
-  color: #686677;
-  display: block;
-  margin-bottom: 8px;
-}
-
-.label span {
-  color: #ff1515;
-}
-
-.language-wrapper,
-.location-wrapper,
-.input-wrapper {
-  margin-bottom: 24px;
-  width: 100%;
-}
-
-.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;
-}
-
-.location-wrapper .select-active {
-  border-radius: 8px !important;
-}
-
-.input-wrapper .submit-bar,
-.input-wrapper .submit-bar-disabled {
-  width: 100%;
-}
-
-.input-wrapper .card-label {
-  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;
-}
-
-/* Account Link */
-.account-link {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 25px;
-  text-align: center;
-  margin-top: 24px;
-  color: #0b0c0c;
-}
-
-.link {
-  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;
-}
-
-.resendIn span {
-  color: #5b68f0;
-}
-
-.resend {
-  text-align: right;
-  cursor: pointer;
-  font-weight: 700;
-  color: #5b68f0;
-}
-
-/* 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;
-    }
-    .login-wrapper{
-        width: 60%;
-    }
-    .register-login-wrapper{
-         width: 60%;
-    }
-}
-@media (min-width: 769px) and (max-width : 1024px) {
-    .lag-loc-wrapper {
-        flex-direction: column;
-        gap: 0px;
-    }
-    .login-wrapper{
-        width: 60%;
-    }
-    .register-login-wrapper{
-         width: 60%;
-    }
-}
+.login-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.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%;
+}
+
+.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: 750px;
+    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 {
+    width: 100%;
+    max-width: 525px;
+    font-size: 2.5rem;
+    color: #0b0c0c;
+    font-weight: 600;
+    text-align: center;
+    padding: 2rem 0rem;
+}
+
+.lag-loc-wrapper {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    max-width: 540px;
+    gap: 30px;
+}
+
+.location-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+}
+
+/* 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;
+}
+
+.location-wrapper .select-active {
+    border-radius: 8px !important;
+}
+
+.language-wrapper {
+    width: 100%;
+    max-width: 260px;
+}
+
+.label {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 25px;
+    color: #686677;
+
+    span {
+        color: #ff1515;
+    }
+}
+
+.input-wrapper {
+    width: 100%;
+    max-width: 540px;
+}
+
+.input-wrapper .submit-bar,
+.input-wrapper .submit-bar-disabled {
+    width: 100%;
+    max-width: 540px;
+}
+
+.input-wrapper .card-label {
+    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;
+}
+
+.account-link {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 25px;
+    text-align: center;
+}
+
+.link {
+    color: #1778ff;
+    text-decoration: underline;
+}
+
+.resendIn {
+    font-size: 16px;
+    font-weight: 500;
+    color: #686677;
+    text-align: right;
+
+    span {
+        color: #1778ff;
+    }
+}
+
+.resend {
+    text-align: right;
+    cursor: pointer;
+    font-weight: 700;
+}
+
+.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;
+}
+
+@media (max-width: 768px) {
+    .lag-loc-wrapper {
+        flex-direction: column;
+        gap: 0px;
+    }
+    .login-wrapper{
+        width: 60%;
+    }
+    .register-login-wrapper{
+         width: 60%;
+    }
+}
+@media (min-width: 769px) and (max-width : 1024px) {
+    .lag-loc-wrapper {
+        flex-direction: column;
+        gap: 0px;
+    }
+    .login-wrapper{
+        width: 60%;
+    }
+    .register-login-wrapper{
+         width: 60%;
+    }
+}

package/src/pages/citizen/container.scss

@@ -1,33 +1,23 @@
-.citizen-home-footer {
-  @apply flex  w-full  h-10 bg-grey-bg pb-md pt-sm justify-center;
-  img {
-    @apply ml-sm;
-  }
-}
-
-.employee .citizen-home-footer {
-  @apply fixed bottom-0;
-}
-.fill-path-primary-main {
-  path {
-    fill: #1359C8;
-  }
-}
-
-.obps-search {
-  margin: 8px;
-}
-.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;
+.citizen-home-footer {
+  @apply flex  w-full  h-10 bg-grey-bg pb-md pt-sm justify-center;
+  img {
+    @apply ml-sm;
+  }
+}
+
+.employee .citizen-home-footer {
+  @apply fixed bottom-0;
+}
+.fill-path-primary-main {
+  path {
+    fill: #1359C8;
+  }
+}
+
+.obps-search {
+  margin: 8px;
+}
+.font-Weigth-bold {
+  font-weight: 600 !important;
+      margin-top: 20px !important;
 }