/* ============================================================ * login.css — หน้าเข้าสู่ระบบ * แนวทาง: Modern Healthcare SaaS / Fluent 2 × Material Design 3 * ระยะห่างทั้งหมดยึดระบบ 8px * ============================================================ */ .login-page { /* ⚠ ธีมน้ำเงิน Business Cloud 13 ก.ย. 2569 — ค่าเดียวกับ --brand-950/800 และ --primary-dark ใน base.css (หน้านี้ใช้ชื่อ --p-* ของตัวเองมาตั้งแต่แรก จึงคงชื่อเดิม) เดิมเป็นเขียวมรกต #0A2C2D / #0F3D3E / #14504F */ --p-900: #061E47; /* น้ำเงินเข้มสุด */ --p-800: #0A3A85; /* สีหลักของพื้นหน้า login */ --p-700: #0D47A1; --blue: #1565C0; /* accent — โฟกัส / ลิงก์ = --primary/--focus */ --p-shadow-rgb: 4, 20, 48; --red: #EF4444; /* accent — เส้นชีพจร / ข้อผิดพลาด */ --text: #1F2937; --text-2:#6B7280; --hair: #E5E7EB; --hair-2:#F3F4F6; /* ระบบระยะห่าง 8px */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s7: 56px; --s8: 64px; --s10: 80px; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s6) var(--s3); background: linear-gradient(160deg, var(--p-700) 0%, var(--p-800) 42%, var(--p-900) 100%); font-family: "Segoe UI", "Sarabun", system-ui, -apple-system, sans-serif; } /* ⚠⚠ ลายเส้นคลื่นหัวใจ (.login-page::before) **ถอดออกแล้ว 13 ก.ย. 2569 (ผู้ใช้สั่ง)** พร้อมกับของเมนูซ้าย — พื้นหน้า login เหลือไล่เฉดน้ำเงินอย่างเดียว */ /* ขอบจอมืดลงเล็กน้อย ดึงสายตาเข้าหาการ์ดกลางจอ */ .login-page::after { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 72% 62% at 50% 44%, rgba(0,0,0,0) 0%, rgba(var(--p-shadow-rgb),.5) 100%); pointer-events: none; } .login-page > main { position: relative; z-index: 1; width: 100%; max-width: 456px; } /* ---------- การ์ดกระจก ---------- */ .login-card { padding: var(--s7) var(--s6) var(--s5); border-radius: 24px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .96); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 2px 4px rgba(var(--p-shadow-rgb), .22), 0 18px 34px -8px rgba(var(--p-shadow-rgb), .36), 0 56px 100px -24px rgba(var(--p-shadow-rgb), .58); text-align: center; animation: card-in .55s cubic-bezier(.16, 1, .3, 1) both; } @keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.985); } } /* ---------- หน้ารอระหว่างตรวจสอบสิทธิ์ ---------- * class .resuming ถูกใส่ที่ โดยสคริปต์ใน * ก่อนเบราว์เซอร์วาดหน้าจอ — ฟอร์ม login จึงไม่แวบขึ้นมาให้เห็น */ .splash { display: none; } html.resuming .login-card { display: none; } html.resuming .splash { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s8) var(--s6); border-radius: 24px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .96); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 2px 4px rgba(var(--p-shadow-rgb), .22), 0 18px 34px -8px rgba(var(--p-shadow-rgb), .36), 0 56px 100px -24px rgba(var(--p-shadow-rgb), .58); animation: card-in .45s cubic-bezier(.16, 1, .3, 1) both; } .splash img { width: 100%; max-width: 216px; height: auto; } .splash .status { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: #4B5563; } .splash .spinner { width: 17px; height: 17px; border: 2px solid rgba(37, 99, 235, .22); border-top-color: var(--blue); } /* ---------- โลโก้ ---------- */ .login-logo { width: 100%; max-width: 216px; height: auto; margin: 0 auto var(--s4); } /* ---------- หัวเรื่อง ---------- */ .login-card h1 { margin: 0 0 var(--s5); font-size: 27px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text); } /* ---------- ปุ่ม Google ---------- */ .google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 var(--s3); border: 1px solid var(--hair); border-radius: 14px; background: #fff; color: var(--text); font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.005em; cursor: pointer; box-shadow: 0 1px 2px rgba(31, 41, 55, .05); transition: border-color .24s ease, box-shadow .24s ease, background-color .24s ease, transform .24s cubic-bezier(.16, 1, .3, 1); } .google-btn:hover { border-color: rgba(37, 99, 235, .42); background: #FCFDFF; box-shadow: 0 3px 6px rgba(31, 41, 55, .09), 0 14px 28px -8px rgba(37, 99, 235, .38); transform: translateY(-2px); } .google-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(31, 41, 55, .1); transition-duration: .1s; } .google-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .google-btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; } .google-btn svg { width: 20px; height: 20px; flex: none; } /* ---------- คำอธิบายท้ายการ์ด ---------- */ .login-note { margin: var(--s5) 0 0; /* ห่างจากปุ่มขึ้นอีก 8px (32 → 40) */ padding-top: var(--s3); border-top: 1px solid var(--hair-2); font-size: 13.5px; line-height: 1.5; color: #4B5563; /* contrast 8.1:1 */ } /* ---------- ท้ายหน้า ---------- */ .login-foot { margin: var(--s4) 0 0; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: .045em; color: rgba(255, 255, 255, .82); /* เข้มขึ้นจาก .62 */ animation: card-in .55s cubic-bezier(.16,1,.3,1) .12s both; } /* ---------- กล่องแจ้งเตือน ---------- */ #alert { margin-bottom: var(--s3); border-radius: 14px; font-size: 13.5px; animation: fade-in .22s ease-out; } @keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } } .alert .mail { font-weight: 600; word-break: break-all; } .alert .retry { margin-top: 12px; padding: 8px 16px; border: 1px solid currentColor; border-radius: 10px; background: rgba(255, 255, 255, .72); color: inherit; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .18s ease; } .alert .retry:hover { background: #fff; } /* ---------- สถานะระหว่างรอเลือกบัญชี ---------- */ .waiting { margin-top: var(--s3); padding: var(--s2); border: 1px solid rgba(37, 99, 235, .2); border-radius: 14px; background: rgba(37, 99, 235, .045); text-align: left; font-size: 13.5px; line-height: 1.65; color: var(--text); animation: fade-in .22s ease-out; } .waiting b { color: #1D4ED8; font-weight: 600; } .waiting p { margin: 4px 0 0; color: var(--text-2); } .waiting .spinner { width: 16px; height: 16px; border: 2px solid rgba(37,99,235,.22); border-top-color: var(--blue); } .waiting .tip { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(37, 99, 235, .14); font-size: 12.5px; color: var(--text-2); } .waiting #fallback { margin-top: 12px; } .waiting #fallback .btn { width: 100%; min-height: 44px; border-radius: 10px; background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; font-size: 14px; } .waiting #fallback .btn:hover { background: #1976D2; } .linky { display: block; width: 100%; margin-top: 4px; padding: 6px; border: 0; background: none; color: var(--text-2); font-family: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; } .linky:hover { color: var(--text); } /* ---------- จอเล็ก ---------- */ @media (max-width: 520px) { .login-page { padding: var(--s3) var(--s2); } .login-card { padding: var(--s5) var(--s3) var(--s4); border-radius: 20px; } .login-logo { max-width: 176px; margin-bottom: var(--s3); } .login-card h1 { font-size: 23px; margin-bottom: var(--s4); } } /* ---------- เคารพการตั้งค่าลดการเคลื่อนไหว ---------- */ @media (prefers-reduced-motion: reduce) { .login-card, .login-foot, #alert, .waiting { animation: none; } .google-btn { transition: none; } .google-btn:hover { transform: none; } }