/* * Mourning Theme CSS - ไว้อาลัย (เวอร์ชันแก้ไข Cookie Consent) * เพื่อแสดงความไว้อาลัยชั่วคราว * วิธีใช้: เพิ่ม ใน * * อัพเดท: แก้ไขโดยไม่ใช้ filter กับ body เพื่อให้ Cookie Consent คลิกได้ */ /* ======================================== 1. แปลงเว็บเป็นโทนสีขาว-ดำ (ไม่ใช้กับ body) ======================================== */ /* ใช้ filter กับส่วนต่างๆ แทนการใช้กับ body */ .content-wrapper, .main-header, .main-sidebar, .main-footer, .card, .navbar, nav, header, footer, section, article, aside, .container, .container-fluid, .row { filter: grayscale(40%); -webkit-filter: grayscale(40%); } /* ======================================== 2. ยกเว้น Cookie Consent จาก filter ⭐ IMPORTANT ======================================== */ /* ยกเว้น Cookie Consent ทั้งหมดจาก grayscale */ #cookie-law-info-bar, #cookie-law-info-bar *, .cookie-notice, .cookie-notice *, .cookie-consent, .cookie-consent *, .cookie-banner, .cookie-banner *, div[class*="cookie"], div[class*="cookie"] *, div[id*="cookie"], div[id*="cookie"] *, div[class*="consent"], div[class*="consent"] *, div[id*="consent"], div[id*="consent"] * { filter: none !important; -webkit-filter: none !important; } /* ทำให้ Cookie Consent แสดงผลด้านบนสุดและคลิกได้ */ #cookie-law-info-bar, .cookie-notice, .cookie-consent, .cookie-banner, div[class*="cookie"], div[id*="cookie"], div[class*="consent"], div[id*="consent"] { position: fixed !important; z-index: 999999 !important; pointer-events: auto !important; } /* ปุ่มทั้งหมดใน Cookie Consent ต้องคลิกได้ */ #cookie-law-info-bar button, #cookie-law-info-bar a, #cookie-law-info-bar input, .cookie-notice button, .cookie-notice a, .cookie-notice input, .cookie-consent button, .cookie-consent a, .cookie-consent input, .cookie-banner button, .cookie-banner a, .cookie-banner input, div[class*="cookie"] button, div[class*="cookie"] a, div[class*="cookie"] input, div[id*="cookie"] button, div[id*="cookie"] a, div[id*="cookie"] input { pointer-events: auto !important; cursor: pointer !important; z-index: 9999999 !important; position: relative !important; } /* ให้ปุ่มอนุญาตมีสีเขียวชัดเจน */ #cookie-law-info-bar button, .cookie-notice button, .cookie-consent button, div[class*="cookie"] button, div[id*="cookie"] button { background-color: #4CAF50 !important; color: white !important; border: 2px solid #2d2d2d !important; padding: 8px 20px !important; font-weight: bold !important; } #cookie-law-info-bar button:hover, .cookie-notice button:hover, .cookie-consent button:hover, div[class*="cookie"] button:hover, div[id*="cookie"] button:hover { background-color: #45a049 !important; border-color: #000 !important; } /* ======================================== 3. ปรับแต่งสีพื้นหลังและข้อความ ======================================== */ .content-wrapper, .main-footer, .card { background-color: #f5f5f5 !important; } .card-header { background-color: #e0e0e0 !important; border-bottom: 2px solid #333 !important; } /* ปรับสีข้อความให้เด่นชัดในโหมดขาว-ดำ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #000 !important; } /* ======================================== 4. ปรับแต่งปุ่มต่างๆ ======================================== */ .btn { filter: grayscale(40%) contrast(120%) !important; } .btn:hover { filter: grayscale(40%) contrast(130%) brightness(95%) !important; } /* ======================================== 5. ปรับแต่งรูปภาพให้เป็นขาว-ดำ ======================================== */ img { filter: grayscale(40%); -webkit-filter: grayscale(40%); } /* ======================================== 6. แถบด้านข้าง (Sidebar) ======================================== */ .main-sidebar { background-color: #2d2d2d !important; } /* ======================================== 7. ส่วนหัวเว็บไซต์ (Header/Navbar) ======================================== */ .main-header { background-color: #2d2d2d !important; border-bottom: 3px solid #000 !important; } /* ======================================== 8. การ์ดและกล่องเนื้อหา ======================================== */ .card-outline { border-top: 3px solid #333 !important; } /* ======================================== 9. ตาราง (Tables) ======================================== */ .table thead th { background-color: #d0d0d0 !important; border-bottom: 2px solid #333 !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.03) !important; } /* ======================================== 10. Modal และ Alert ======================================== */ .modal-header { background-color: #e0e0e0 !important; border-bottom: 2px solid #333 !important; } .swal2-popup { filter: grayscale(40%); } /* ======================================== 11. เพิ่มข้อความไว้อาลัยที่ Footer (Optional) ======================================== */ .main-footer::before { content: "🕯️ ขอแสดงความไว้อาลัย 🕯️"; display: block; text-align: center; padding: 10px; background-color: #000; color: #fff; font-size: 14px; font-weight: bold; margin-bottom: 10px; } /* ======================================== 12. รองรับ Print (ถ้ามีการพิมพ์เอกสาร) ======================================== */ @media print { body::before, body::after, .main-footer::before { display: none; } } /* ======================================== 13. Animation เบาๆ สำหรับริบบิ้น ======================================== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .main-footer::before { animation: fadeIn 1s ease-in; } /* ======================================== 14. ปรับแต่ง Breadcrumb ======================================== */ .breadcrumb { background-color: #e8e8e8 !important; } /* ======================================== 15. ปรับแต่ง Select2 และ Form Elements ======================================== */ .select2-container--default .select2-selection--single { background-color: #f5f5f5 !important; border: 1px solid #999 !important; } input[type="text"], input[type="date"], input[type="email"], input[type="password"], select, textarea { background-color: #f9f9f9 !important; border: 1px solid #999 !important; } input[type="text"]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus { border-color: #333 !important; box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15) !important; } /* ======================================== 16. ให้ลิงก์และปุ่มทั้งหมดคลิกได้ ======================================== */ a, button, input[type="button"], input[type="submit"] { pointer-events: auto !important; } /* ======================================== 17. ยกเว้นองค์ประกอบพิเศษอื่นๆ ======================================== */ /* ปุ่มแชทและ floating elements */ [class*="chat"], [id*="chat"], [class*="float"], [id*="float"], .floating-button, .sticky-button { filter: none !important; -webkit-filter: none !important; pointer-events: auto !important; }