enhnace login styles on desktop and tablet screens

2025-11-29 13:18:17 +03:00
parent fd4f68d2ac
commit 48bbd9ae85
6 changed files with 428 additions and 164 deletions
--- a/src/pages/login/login.module.css
+++ b/src/pages/login/login.module.css
@@ -1,7 +1,163 @@
 .loginPage {
  background-color: var(--secondary-background);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100vh;
 }

 :global(.darkApp) .loginPage {
  background-color: var(--background);
 }
+
+.loginWrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.restaurantCoverContainer {
+  display: none;
+}
+
+.restaurantCover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0;
+}
+
+.loginContainer {
+  width: 100%;
+  max-width: 100%;
+}
+
+.loginTitle {
+  text-align: center;
+  margin: 20px 0 10% 0;
+  font-size: 18px;
+}
+
+.loginIconContainer {
+  position: relative;
+  margin-bottom: 20px;
+  width: fit-content;
+}
+
+.loginFormContainer {
+  width: 100%;
+}
+
+/* Tablet devices (min-width: 769px and max-width: 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .loginPage {
+    padding: 24px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .loginWrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .loginContainer {
+    max-width: 500px;
+    width: 100%;
+    background-color: var(--background);
+    padding: 48px 40px;
+    border-radius: 24px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    margin: 0 auto;
+  }
+
+  .loginTitle {
+    font-size: 22px;
+    margin: 0 0 32px 0;
+  }
+
+  .loginIconContainer {
+    margin-bottom: 32px;
+  }
+
+  .loginFormContainer {
+    width: 100%;
+  }
+}
+
+/* Desktop devices (min-width: 1025px) */
+@media (min-width: 1025px) {
+  .loginPage {
+    padding: 0;
+    align-items: stretch;
+    max-width: 100%;
+    margin: 0;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .loginWrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    height: 100vh;
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+  }
+
+  .restaurantCoverContainer {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .restaurantCover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .loginContainer {
+    background-color: var(--background);
+    padding: 60px 10vw;
+    border-radius: 0;
+    box-shadow: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow-y: auto;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .loginTitle {
+    font-size: 24px;
+    margin: 0 0 40px 0;
+  }
+
+  .loginIconContainer {
+    margin-bottom: 40px;
+  }
+
+  .loginFormContainer {
+    width: 100%;
+  }
+}
+
+:global(.ant-app-rtl) .loginWrapper {
+  direction: rtl;
+}
+
+:global(.ant-app-rtl) .loginWrapper {
+  grid-template-columns: 1fr 1fr;
+}
+
+:global(.darkApp) .loginContainer {
+  background-color: var(--secondary-background);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}