/** * login-redesign.css — หน้า /login (auth/login.blade.php) * * ระยะ Redesign ตาม request ลูกค้า + Plane DOAE-280 / DOAE-592 / DOAE-672: * - ข่าวเต็มความกว้างด้านบน (2 ประเภท × 2 การ์ดใหญ่ + 4 การ์ดเล็ก) * - กล่อง Login ย้ายมาอยู่ล่างข่าว แบ่ง 2 คอลัมน์ ThaID (ซ้าย) | "หรือ" | user/pass (ขวา) * - ปุ่ม navbar "เข้าสู่ระบบ" scroll หากล่อง (#from_login) ไม่ redirect * แก้ CSS ที่นี่เท่านั้น (public/css) — ห้ามแก้ resources/css/app.css */ /* หมายเหตุ: การ scroll ไป #from_login ใช้ JS custom animation (เร็ว ~350ms) ในหน้า login แทน CSS scroll-behavior:smooth ที่ browser คุม duration เอง(ช้าเมื่อหน้ายาว) */ /* ══════════════════════════════════════════════════════════════ 1) ปุ่ม "เข้าสู่ระบบ" มุมขวาบน navbar ══════════════════════════════════════════════════════════════ */ .navbar-actions { display: flex; align-items: center; justify-content: flex-end; height: 100%; } .navbar-login-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--head_font); color: var(--head_bg) !important; font-size: var(--ds-font-size-base, 16px); font-weight: 700; line-height: 1; padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; white-space: nowrap; cursor: pointer; } .navbar-login-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), 0 3px 6px rgba(0, 0, 0, 0.2); text-decoration: none; color: var(--head_bg) !important; } .navbar-login-btn i { font-size: 1em; } /* ── ไอคอนข่าวใน navbar — โผล่เฉพาะ mobile (≤576) แทนปุ่มเข้าสู่ระบบ ── คงรูปเดิม (newspaper.png ~40px) แค่ย้ายขึ้นมาใน navbar — ไม่ใส่พื้น/กรอบ >576 ซ่อน (desktop/tablet มี news grid + ปุ่ม "ดูทั้งหมด" ให้กดอยู่แล้ว) */ .navbar-news-btn { display: none; align-items: center; line-height: 0; cursor: pointer; flex: 0 0 auto; transition: transform 0.15s ease; } .navbar-news-btn img { width: 40px; height: auto; display: block; /* เงาซ้อน 2 ชั้น → ไอคอนดูลอยเด่นบน navbar สีเข้ม = สื่อว่ากดได้ */ filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 5px 9px rgba(0, 0, 0, 0.4)); transition: filter 0.15s ease; } .navbar-news-btn:hover { transform: translateY(-2px); text-decoration: none; } .navbar-news-btn:hover img { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); } @media (max-width: 991.98px) { .navbar-actions { justify-content: center; margin-top: 10px; } } /* จอ ≤576px: ข่าว (.desktop) ถูกซ่อน + Login อยู่ใต้ header → ไม่ต้อง jump section ซ่อนปุ่ม "เข้าสู่ระบบ" แล้วโชว์ "ไอคอนข่าว" แทน (กดไปหน้ารวมข่าวได้ตลอดขณะ sticky) */ @media (max-width: 576px) { .navbar-actions { margin-top: 0; } .navbar-login-btn { display: none; } .navbar-news-btn { display: inline-flex; } } /* ══════════════════════════════════════════════════════════════ 1b) Navbar — sticky (jump ไปโซน Login ได้ทุกจังหวะ) + จัด layout responsive (scoped: login-redesign.css โหลดเฉพาะหน้า login เท่านั้น) ══════════════════════════════════════════════════════════════ */ .header-home { position: sticky; top: 0; z-index: 1030; /* .header-home = bootstrap .row วางตรงใต้ → มี negative margin -15px สองข้าง ทำให้กว้างเกิน viewport 30px → horizontal scroll + sticky header ยื่นเกินขอบ ("navbar โชว์ไม่เต็ม") ล้าง margin ให้พอดี viewport (container ภายในมี padding 15px จัด content เองอยู่แล้ว) ต้อง !important เพราะ Bootstrap .row{margin:-15px} โหลดหลัง login-redesign.css */ margin-left: 0 !important; margin-right: 0 !important; } /* header เป็น flex แถวเดียว: โลโก้ซ้าย (ยืดได้) + ปุ่มขวา (กว้างพอดี) จัดกึ่งกลางแนวตั้ง */ .header-home .container > .row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; } .header-home .icon-header { flex: 1 1 auto; max-width: none; text-align: left; margin: 0; } .header-home .navbar-actions-col { flex: 0 0 auto; max-width: none; width: auto; padding-right: 0; } /* จอกลาง-เล็ก: ลดขนาดตัวอักษร/โลโก้ ลดการตัดบรรทัดแปลก ๆ ของชื่อระบบ */ @media (max-width: 1200px) { .header-home .icon { font-size: 20px; line-height: 1.35; } .header-home .icon img { width: 84px !important; } } @media (max-width: 768px) { .header-home .icon { font-size: 17px; } .header-home .icon img { width: 64px !important; } .header-home .icon label, .header-home .icon { margin-left: 0 !important; } } /* ══════════════════════════════════════════════════════════════ 2) News: การ์ดใหญ่ (hero) แถวแรก + การ์ดเล็กแถวสอง ══════════════════════════════════════════════════════════════ */ /* Thumbnail ทุกการ์ด (ใหญ่/เล็ก) แสดงอัตราส่วน 16:10 เสมอ + object-fit:contain → ไม่ crop รูป คงบุคคล/ข้อความในภาพครบ ไม่ขาดหาย (ลูกค้าซีเรียสเรื่องการย่อภาพ) */ .news-col-lg .image_h2, .news-col-sm .image_h2 { aspect-ratio: 16 / 10 !important; width: 100% !important; height: auto !important; object-fit: contain !important; background: #f2f4f7; /* พื้นหลัง letterbox เมื่อสัดส่วนภาพไม่พอดี 16:10 */ } /* การ์ดใหญ่: ชื่อข่าวใหญ่ขึ้นเล็กน้อย */ .news-col-lg .newsDetail { font-size: var(--ds-font-size-lg) !important; -webkit-line-clamp: 2; height: 2.9em !important; } /* hover ยกการ์ดเล็กน้อย ทั้งใหญ่และเล็ก */ .news-frame { transition: transform 0.18s ease, box-shadow 0.18s ease; } .news-frame:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* ปุ่ม "ดูทั้งหมด" = DS secondary (outline) ธรรมดา — สีตาม --ds-color-primary (ฟ้าเมื่อ theme ฟ้า / remap เป็นส้มอัตโนมัติเมื่ออยู่ใน .ds-theme-user) ; ds-btn มี white-space:nowrap อยู่แล้ว */ /* ══════════════════════════════════════════════════════════════ 3) Login section — แบ่ง 2 คอลัมน์ + separator "หรือ" ตรงกลาง ══════════════════════════════════════════════════════════════ */ /* margin-bottom เผื่อ footer (position:fixed สูง ~60px) + ให้ระยะ login→footer ที่มองเห็น (~60px) สมดุลกับระยะ news→login ด้านบน (news mb 40 + login pt 20 = ~60px) */ .login-section-wrap { margin-bottom: 120px; } /* กล่องขาว (คง .from_login เดิม แต่ให้กว้างเต็ม + padding) ใช้ gap เท่ากันระหว่าง 3 ส่วน (ThaID | หรือ | user/pass) เพื่อให้ "หรือ" อยู่กึ่งกลางสมดุล */ .login-split { display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--ds-spacing-xl, 32px); padding: var(--ds-spacing-xl, 32px); } .login-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; } /* ThaID เป็น panel เต็มขอบ → ระยะห่างวัดจากขอบ panel; ใส่ padding ภายใน panel เอง */ .login-col-thaid { padding: var(--ds-spacing-xl, 32px) var(--ds-spacing-lg, 24px); } /* ฝั่ง user/pass ไม่มีพื้นหลัง → ไม่ใส่ padding แนวนอน ให้ระยะจาก "หรือ" = gap เท่าฝั่ง ThaID */ .login-col-userpass { padding: var(--ds-spacing-lg, 24px) 0; } /* ── ฝั่ง user/pass: field + ปุ่ม "เข้าสู่ระบบ" กว้างเท่ากันทุกจอ + ไม่ยืดเกินบนจอกว้าง ── เดิม: field = col-md-12 เต็มคอลัมน์ (จอ 1024→372px, 1440→553px, 1920→769px) → กว้างเกินสวยงาม ปุ่ม .btn-login-1 = global width:70% จัดกึ่งกลาง → แคบกว่า field + ขอบไม่ตรงกัน แก้: cap เนื้อหาฟอร์มที่ 400px จัดกึ่งกลาง (สอดคล้อง avatar/heading ที่ center อยู่แล้ว) + normalize ขอบ label/field/ปุ่ม/ลืมรหัสผ่าน ให้ตรงกันเป๊ะ responsive (ความกว้าง field = ปุ่ม เสมอ): • คอลัมน์ ≥ ~400px (จอ ≳1080) → cap 400px จัดกึ่งกลาง (จอใหญ่/FHD ไม่ยืดเกิน) • คอลัมน์ < 400px (จอ 768–1080) → ยืดเต็มคอลัมน์ (fluid) • < 768px (stack) → เต็มความกว้าง panel */ .login-col-userpass .card-body { max-width: 400px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* ลบ negative margin ของ .row (avatar row + box2) ไม่ให้ล้นกรอบ 400 */ .login-col-userpass .card-body .row { margin-left: 0; margin-right: 0; } /* กล่องปุ่ม + ลิงก์ลืมรหัสผ่าน inset 10px ให้ขอบตรงกับ field (form-login มี padding 10px) */ .login-col-userpass .box2 > .col-md-12 { padding-left: 10px; padding-right: 10px; } /* สีปุ่มตาม --ds-color-primary (ฟ้าเมื่อ theme ฟ้า / remap เป็นส้มอัตโนมัติเมื่ออยู่ใน .ds-theme-user) ที่นี่ตั้งแค่ "ขนาด": เต็มกรอบ = กว้างเท่า field + สูง 52px เท่าปุ่ม ThaID (เด่น/กดง่าย) ds-btn เป็น inline-flex align/justify center → text ยังอยู่กลางเมื่อ fix height */ .login-col-userpass .login-submit-btn { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; height: 52px; } /* ตัวคั่นกลาง + คำว่า "หรือ" — แนวตั้งบน desktop (ระยะซ้าย-ขวาเท่ากันด้วย gap ของ .login-split) */ .login-or { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; } .login-or-line { flex: 1 1 auto; width: 1px; background: rgba(0, 0, 0, 0.12); } .login-or-text { margin: 12px 0; font-size: var(--ds-font-size-base, 16px); color: var(--body_font, #555); background: var(--ds-color-white); padding: 6px 4px; font-weight: 600; } /* ── ฝั่ง ThaID (ซ้าย) — gradient น้ำเงิน (ชั้นล่าง) + รูป BG ทับด้วย blend soft-light ── layer แรก = รูป (บนสุด) blend soft-light ลงบน gradient / layer สอง = gradient เดิม (ล่าง, normal) ยังไม่มีไฟล์ /images/login/thaid-bg.jpg → เบราว์เซอร์ข้ามชั้นรูป โชว์ gradient ล้วน (graceful ไม่พัง) วางไฟล์ชื่อ thaid-bg.jpg ในโฟลเดอร์ public/images/login/ แล้วรูปจะ blend ทันที */ .login-col-thaid { background-image: url('/images/login/thaid-bg.jpg'), linear-gradient(150deg, #060850 0%, #0a2e7a 55%, #1547a8 100%); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; background-blend-mode: soft-light, normal; border-radius: 16px; color: var(--ds-color-white); } .thaid-head { text-align: center; } .thaid-title { font-weight: 700; color: var(--ds-color-white); font-size: var(--ds-font-size-2xl, 24px); margin-bottom: var(--ds-spacing-lg, 24px); } /* โลโก้ด้านบน — ขอบมน (squircle) มีขอบขาวให้เด่นบนพื้น gradient เพิ่มระยะห่างบน-ล่าง ไม่ให้ชิดข้อความจนดูอึดอัด */ .thaid-logo { width: 96px; height: 96px; object-fit: cover; border-radius: 20px; background: var(--ds-color-white); padding: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); margin: var(--ds-spacing-sm, 8px) 0 var(--ds-spacing-xl, 32px); } .thaid-subtitle { color: rgba(255, 255, 255, 0.9); font-size: var(--ds-font-size-base, 16px); margin-bottom: var(--ds-spacing-2xl, 40px); line-height: 1.7; } /* ปุ่มเข้าสู่ระบบด้วย ThaID — ใช้ DS pill () เพื่อ consistency คง identity ThaID: พื้นขาว + โลโก้ + เงา (deviation ที่สมเหตุผล บนพื้น gradient เข้ม) scope .login-col-thaid (0,2,0) override ds-btn-light (0,1,0): grey→white, ตัดขอบ ทรง pill / จัดกลาง / transition มาจาก ds-btn base (ไม่ตั้ง border-radius = ได้ 999px) */ .login-col-thaid .btn-thaid { display: flex; gap: 12px; width: 100%; max-width: 340px; margin: 0 auto; height: 52px; /* override ds-btn-light (ซึ่งใช้ !important): grey→ขาว identity ThaID, ตัดขอบ */ background: var(--ds-color-white) !important; color: var(--ds-color-text) !important; font-size: 18px; font-weight: 700; border: none !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } .login-col-thaid .btn-thaid:hover { background: #f2f7ff !important; color: var(--ds-color-text) !important; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(0, 0, 0, 0.26); } .thaid-btn-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; object-fit: cover; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } /* ══════════════════════════════════════════════════════════════ 4) Responsive — จอเล็กเรียงบนลงล่าง: user/pass ขึ้นก่อน ThaID ══════════════════════════════════════════════════════════════ */ @media (max-width: 767.98px) { .login-split { flex-direction: column; gap: var(--ds-spacing-sm, 8px); /* stack แนวตั้ง: ลด gap ไม่ให้ห่างเกิน */ padding: var(--ds-spacing-md, 16px); } /* mobile: ให้ padding รอบด้าน ไม่ให้เนื้อหาชิดขอบ panel จนดูแน่น (โดยเฉพาะกล่อง ThaID) */ .login-col, .login-col-thaid, .login-col-userpass { padding: var(--ds-spacing-xl, 32px) var(--ds-spacing-lg, 24px); } /* order: ThaID (ซ้าย) ขึ้นก่อน → user/pass ตามหลัง */ .login-col-thaid { order: 1; } .login-or { order: 2; } .login-col-userpass { order: 3; } /* separator เปลี่ยนเป็นแนวนอน */ .login-or { flex-direction: row; width: 100%; padding: 8px 0; } .login-or-line { width: auto; height: 1px; flex: 1 1 auto; } .login-or-text { margin: 0 12px; } } /* ══════════════════════════════════════════════════════════════ A11y) keyboard focus ที่มองเห็นได้ (WCAG 2.2 — 2.4.7 Focus Visible / 2.4.11) หมายเหตุ: bootstrap/style เดิมตั้ง outline:0 ทั่วระบบ → คืน focus ring เฉพาะ scope หน้า login (ไม่แตะสีธีมที่รอสรุปกับลูกค้า — ใช้สี neutral) ══════════════════════════════════════════════════════════════ */ .navbar-login-btn:focus-visible, .navbar-news-btn:focus-visible, .login-section-wrap a:focus-visible, .login-section-wrap button:focus-visible, .login-section-wrap .toggle-password:focus-visible, .login-section-wrap input:focus-visible, .login-section-wrap .thaid-btn:focus-visible { outline: 3px solid #1a56db !important; outline-offset: 2px !important; border-radius: 4px; } /* fallback สำหรับเบราว์เซอร์ที่ยังไม่รองรับ :focus-visible */ .login-section-wrap .toggle-password:focus { outline: 3px solid #1a56db !important; outline-offset: 2px !important; } .toggle-password { cursor: pointer; }