/* ========================================================= Gray UI Add-On (no background changes) Scope: only colors (semantic + buttons) and images. Toggle by adding class "theme-grayui" to . Remove to revert. ========================================================= */ body.theme-grayui { /* โทนเทาหลัก (ปรับได้) */ --g-neutral-50: #f4f5f6; --g-neutral-100: #e9ecef; --g-neutral-200: #dde1e6; --g-neutral-300: #cfd3da; --g-neutral-400: #b8bec7; --g-neutral-500: #9aa1ab; --g-neutral-600: #7e858f; --g-neutral-700: #656b74; --g-neutral-800: #4f545c; --g-neutral-900: #3c4046; /* map เฉพาะ “สีแบรนด์/สถานะ” → โทนเทา ไม่ยุ่งกับพื้นหลัง body/card/table ฯลฯ */ --bs-primary: var(--g-neutral-700); --bs-primary-rgb: 101, 107, 116; --bs-info: var(--g-neutral-600); --bs-info-rgb: 126, 133, 143; --bs-success: var(--g-neutral-700); --bs-success-rgb: 101, 107, 116; --bs-warning: var(--g-neutral-500); --bs-warning-rgb: 154, 161, 171; --bs-danger: var(--g-neutral-800); --bs-danger-rgb: 79, 84, 92; --bs-secondary: var(--g-neutral-600); --bs-secondary-rgb: 126, 133, 143; /* สีลิงก์ให้ไปทางเทา (แต่ยังเห็นเป็นลิงก์) */ --bs-link-color: var(--g-neutral-800); --bs-link-hover-color: var(--g-neutral-900); /* ไม่แตะ --bs-body-bg, --bs-card-bg, ฯลฯ */ } /* ----------------------- Buttons ----------------------- */ /* ปรับเฉพาะโทนปุ่มให้เป็นเทา ๆ ทั้ง solid/outline */ body.theme-grayui .btn-primary, body.theme-grayui .btn-info, body.theme-grayui .btn-success, body.theme-grayui .btn-warning, body.theme-grayui .btn-danger, body.theme-grayui .btn-secondary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 90%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 90%, white); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 80%, black); --bs-btn-color: #fff; } /* outline ให้ดูเป็นเส้นเทา ๆ */ body.theme-grayui .btn-outline-primary, body.theme-grayui .btn-outline-info, body.theme-grayui .btn-outline-success, body.theme-grayui .btn-outline-warning, body.theme-grayui .btn-outline-danger, body.theme-grayui .btn-outline-secondary { --bs-btn-color: var(--g-neutral-800); --bs-btn-border-color: var(--g-neutral-400); --bs-btn-hover-bg: var(--g-neutral-100); --bs-btn-hover-border-color: var(--g-neutral-600); } /* ถ้าปุ่มใช้ .btn-info (เช่นปุ่ม “ค้นหา”) จะถูกแมปเป็นเทากลาง */ body.theme-grayui .btn-info { --bs-btn-bg: var(--g-neutral-600); --bs-btn-border-color: var(--g-neutral-600); --bs-btn-hover-bg: var(--g-neutral-700); --bs-btn-hover-border-color: var(--g-neutral-700); } /* ----------------------- Semantic text badges/etc ----------------------- */ /* ไม่เปลี่ยนพื้นหลังของ badge/pill ทั่วระบบ ให้แค่โทนข้อความ */ body.theme-grayui .text-primary, body.theme-grayui .link-primary, body.theme-grayui .text-success, body.theme-grayui .text-info, body.theme-grayui .text-warning, body.theme-grayui .text-danger, body.theme-grayui .text-secondary { color: var(--g-neutral-800) !important; } /* ----------------------- Images (เฉพาะ “ภาพ” ไม่ใช่พื้นหลัง) ----------------------- */ /* ทำรูปภาพเป็นโทนเทา โดยไม่แตะ .auth-one-bg หรือ background-image */ body.theme-grayui img:not(.no-gray) { filter: grayscale(100%); } /* หากไม่ต้องการให้บางรูปเป็นเทา (เช่นโลโก้) ให้เติม class="no-gray" ที่ นั้น */ /* เลเยอร์กรองเฉพาะพื้นหลังด้วย backdrop-filter */ body.theme-grayui .auth-one-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; backdrop-filter: grayscale(100%); -webkit-backdrop-filter: grayscale(100%); } /* ===== Velzon tokens mapping (เฉพาะตอนเปิด theme-grayui) ===== */ body.theme-grayui { /* โทนเทากลางสำหรับ info */ --vz-info: #7e858f; --vz-info-rgb: 126, 133, 143; } /* ทำให้ปุ่ม .btn-info กลับมาอ่านค่า border/bg จากตัวแปร Velzon */ body.theme-grayui .btn-info { --vz-btn-bg: var(--vz-info); --vz-btn-border-color: var(--vz-info); /* << ตรงนี้ที่ขาด */ --vz-btn-color: #fff; /* โทนตอน hover/active (ไล่เทาเข้มขึ้นเล็กน้อย) */ --vz-btn-hover-bg: color-mix(in srgb, var(--vz-info) 92%, black); --vz-btn-hover-border-color: color-mix(in srgb, var(--vz-info) 92%, black); --vz-btn-active-bg: color-mix(in srgb, var(--vz-info) 85%, black); --vz-btn-active-border-color: color-mix(in srgb, var(--vz-info) 85%, black); } /* เผื่อบางหน้าของ Velzon ใช้ตัวแปรของ Bootstrap บนปุ่มเดียวกัน */ body.theme-grayui .btn-info { --bs-btn-bg: var(--vz-info); --bs-btn-border-color: var(--vz-info); --bs-btn-hover-bg: color-mix(in srgb, var(--vz-info) 92%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--vz-info) 92%, black); --bs-btn-active-bg: color-mix(in srgb, var(--vz-info) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--vz-info) 85%, black); }