/* * [A11y] คอนทราสต์และโฟกัสตามเกณฑ์ WCAG 2.1 AA — โหลดเป็นไฟล์สุดท้ายใน ของทุกหน้าพนักงาน * * ผู้ใช้ส่วนใหญ่ใช้ NVDA แต่ผู้ที่สายตาเลือนรางยังต้อง "มองเห็น" ตัวอักษรและตำแหน่งโฟกัสได้ชัด * ค่าที่แก้มาจากผลตรวจ axe-core: สีมาตรฐานของ Bootstrap หลายตัวต่ำกว่า 4.5:1 บนพื้นขาว/เทาอ่อน * (ปุ่มน้ำเงิน #0d6efd/#007bff, ป้าย bg-info ตัวขาวบนฟ้า, สีเหลือง warning, ตัวอักษรเทา muted) * แก้ที่ไฟล์นี้ที่เดียว ไม่ต้องไล่แก้ทุกเทมเพลต */ /* ---------- โฟกัส: เห็นชัดทุกองค์ประกอบ ---------- บางช่องตั้ง outline:none ไว้แบบ inline (เช่นช่องรับเงินใน POS) จึงต้องใช้ !important */ :focus-visible { outline: 3px solid #b45309 !important; outline-offset: 2px !important; } /* ---------- ปุ่มหลักสีน้ำเงิน ---------- */ .btn.btn-primary { --bs-btn-bg: #0a58ca; --bs-btn-border-color: #0a58ca; --bs-btn-hover-bg: #084298; --bs-btn-hover-border-color: #084298; --bs-btn-active-bg: #084298; --bs-btn-active-border-color: #084298; --bs-btn-disabled-bg: #0a58ca; --bs-btn-disabled-border-color: #0a58ca; background-color: #0a58ca; border-color: #0a58ca; color: #fff; } .btn.btn-primary:hover, .btn.btn-primary:active { background-color: #084298; border-color: #084298; } /* ---------- ปุ่มแบบเส้นขอบ (บนพื้น #f5f5f5 ของหน้าผู้จัดการ) ---------- */ .btn-outline-primary { --bs-btn-color: #0a58ca; --bs-btn-border-color: #0a58ca; --bs-btn-hover-bg: #0a58ca; --bs-btn-hover-border-color: #0a58ca; --bs-btn-active-bg: #0a58ca; --bs-btn-active-border-color: #0a58ca; color: #0a58ca; border-color: #0a58ca; } .btn-outline-danger { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; --bs-btn-hover-bg: #b02a37; --bs-btn-hover-border-color: #b02a37; --bs-btn-active-bg: #b02a37; color: #b02a37; border-color: #b02a37; } .btn-outline-success { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43; --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #146c43; --bs-btn-active-bg: #146c43; color: #146c43; border-color: #146c43; } .btn-outline-secondary { --bs-btn-color: #495057; --bs-btn-border-color: #6c757d; color: #495057; } .btn-outline-warning { --bs-btn-color: #6b4400; --bs-btn-border-color: #a86f00; color: #6b4400; border-color: #a86f00; } .btn-outline-info { --bs-btn-color: #055160; --bs-btn-border-color: #087990; color: #055160; border-color: #087990; } .btn-outline-primary:hover, .btn-outline-danger:hover, .btn-outline-success:hover { color: #fff; } /* ---------- ตัวอักษรสี ---------- */ .text-warning { color: #8a5a00 !important; } .text-info { color: #055160 !important; } .text-primary { color: #0a58ca !important; } .text-muted { color: #565e64 !important; } /* บนพื้นเข้ม (แถบเมนูด้านข้างของหน้าผู้จัดการ/admin) ต้องกลับเป็นสีอ่อน */ .bg-dark .text-muted, .sidebar .text-muted, .text-white + .text-muted { color: #c3c9cf !important; } .text-success { color: #146c43 !important; } .text-danger { color: #b02a37 !important; } /* ---------- ป้าย (badge) ---------- */ .badge.bg-info, .badge.text-bg-info { color: #052c65 !important; } .badge.bg-warning, .badge.text-bg-warning { color: #000 !important; } .badge.bg-light, .badge.text-bg-light { color: #212529 !important; } /* ---------- เฉพาะหน้า ---------- */ /* แถบเมนูด้านข้างหน้า admin (admin.css ใช้ #007bff) */ .sidebar .nav-link.active { background: #0a58ca; } /* หน้าเข้าสู่ระบบ */ .login-divider { color: #5a6472 !important; } /* ปุ่มออกจากระบบของหน้า POS (#f44 ตัวขาว = 3.4:1) */ .logout-btn { background: #c62828 !important; } .logout-btn:hover { background: #a31515 !important; } /* หน้า platform ใช้ตัวแปรสีของตัวเอง */ :root { --muted: #56606d; --primary: #2f5bd3; }