-accouting Wep

accounting-ng-nuttakit/src/app/component/login-page/login-page.component.css

@@ -12,8 +12,6 @@
 
 /* Page layout */
 .login-widget {
-  /* Fill the viewport and center the card. Do not let the page itself
-     scroll; the card gets an internal max-height instead. */
   min-height: 100vh;
   height: 100vh;
   display: flex;
@@ -37,8 +35,6 @@
   display: flex;
   flex-direction: column;
   gap: 14px;
-  /* Constrain the card so it never forces the page to scroll. If content
-     grows, the card will scroll internally. */
   max-height: calc(100vh - 56px);
   overflow: auto;
 }
@@ -46,7 +42,7 @@
 /* Modal/backdrop styles */
 .login-backdrop{
   position: fixed;
-  inset: 0; /* top:0; right:0; bottom:0; left:0; */
+  inset: 0;
   background: rgba(0,0,0,0.38);
   display: flex;
   align-items: center;
@@ -64,33 +60,10 @@
   box-shadow: 0 20px 50px rgba(2,6,23,0.4);
 }
 
-/* Slightly larger brand area inside modal */
-.modal-card .brand{ padding: 18px; }
-
-/* Make the primary button pill-shaped and slightly larger */
-button.primary{
-  color: #000;
-  border-radius: 999px;
-  padding: 10px 18px;
-  font-size: 15px;
-}
-
-/* Make biometric and other action buttons visually lighter */
-.biometric{
-  border-radius: 999px;
-  padding: 8px 12px;
-}
-
-/* On small screens reduce modal padding and width to avoid overflow */
-@media (max-width: 420px){
-  .login-backdrop{ padding: 12px; }
-  .login-modal{ max-width: 100%; }
-  .modal-card .brand{ padding: 12px; }
-}
-
 /* Brand area */
 .brand{
   text-align: center;
+  padding: 18px; /* Use padding from modal-card .brand */
   padding-bottom: 4px;
   border-bottom: 1px solid #eef2f5;
 }
@@ -116,12 +89,11 @@ button.primary{
 
 /* Form area */
 .form{
-  /* keep compact spacing inside the card */
   margin-top: 6px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 6px 0 2px;
+  padding: 6px 22px 2px 22px; /* Adjusted padding to match card padding */
 }
 
 /* Field label wrapper */
@@ -185,8 +157,9 @@ input:focus{
   margin-top: 4px;
 }
 button.primary{
-  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
+  /* ⭐️ แก้ไขตรงนี้: เปลี่ยนสีข้อความเป็นสีดำตามคำขอ */
   color: #000000;
+  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
   border: none;
   padding: 10px 14px;
   border-radius: 6px;
@@ -196,6 +169,7 @@ button.primary{
   box-shadow: 0 6px 18px rgba(0,120,212,0.12);
   transition: transform .06s ease, box-shadow .12s ease, opacity .12s ease;
 }
+
 button.primary:hover:not(:disabled){
   transform: translateY(-1px);
   box-shadow: 0 10px 24px rgba(0,120,212,0.14);
@@ -206,6 +180,7 @@ button.primary:active{
 button.primary:disabled{
   opacity: 0.55;
   cursor: not-allowed;
+  color: #000000; /* ข้อความ Disabled ก็ยังเป็นสีดำ */
   box-shadow: none;
 }
 
@@ -230,6 +205,7 @@ button.primary:disabled{
   font-weight: 600;
   font-size: 13px;
 }
+
 .biometric svg{ display: block; opacity: .95; }
 .biometric:hover{
   background: rgba(0,120,212,0.04);
@@ -276,14 +252,14 @@ button.primary:disabled{
 
 /* Small screens */
 @media (max-width:420px){
+  .login-backdrop{ padding: 12px; }
+  .login-modal{ max-width: 100%; }
+  .modal-card .brand{ padding: 12px; }
+
   .login-widget .card{
     padding: 18px;
     width: 100%;
   }
   .brand h1{ font-size: 18px; }
-  .brand .subtitle{
-  font-family: "Kanit";
-  font-weight: 1000;
-  font-style: normal; }
   .biometric span, .primary{ font-size: 13px; }
 }