/* ======================================== Nayok City Municipality - Black & White Theme คำแนะนำการใช้งาน: 1. บันทึกไฟล์นี้เป็น "style-bw.css" 2. เพิ่มลิงก์ในส่วน ของ index.htm: ======================================== */ /* แก้ไข Encoding สำหรับภาษาไทย */ @charset "UTF-8"; /* ===== RESET & BASE STYLES ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Sarabun', 'Tahoma', 'Arial', sans-serif; background-color: #ffffff; color: #333333; line-height: 1.6; } /* ===== แก้ที่ 1: HEADER / แถบด้านบน ===== */ /* เปลี่ยนจากสีน้ำเงิน/สีสดใส → สีดำ-เทา */ header, .header, .top-header { background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%) !important; color: #ffffff !important; border-bottom: 3px solid #000000; } /* ===== แก้ที่ 2: NAVIGATION / เมนู ===== */ /* เปลี่ยนสีเมนูเป็นโทนขาว-เทาอ่อน */ nav, .nav, .navbar, .menu { background-color: #f5f5f5 !important; border-bottom: 2px solid #e0e0e0; } nav a, .nav a, .navbar a, .menu a { color: #1a1a1a !important; text-decoration: none; padding: 10px 20px; display: inline-block; transition: all 0.3s ease; } nav a:hover, .nav a:hover, .navbar a:hover, .menu a:hover { background-color: #ffffff !important; color: #000000 !important; border-bottom: 3px solid #2c2c2c; } /* ===== แก้ที่ 3: TABLES / ตาราง (ไม่มีเส้น) ===== */ /* เปลี่ยนจากสีสดใส → ขาว-เทา และลบเส้นขอบทั้งหมด */ table { background-color: #ffffff !important; border: none !important; border-collapse: collapse; } table tr { border: none !important; } table td, table th { background-color: #ffffff !important; color: #333333 !important; padding: 10px; border: none !important; } /* แถวหัวตาราง */ table thead tr, table tr:first-child, table th { background: linear-gradient(180deg, #4a4a4a 0%, #2c2c2c 100%) !important; color: #ffffff !important; font-weight: bold; border: none !important; } /* แถวสลับสี (zebra striping) */ table tr:nth-child(even) { background-color: #f9f9f9 !important; } table tr:hover { background-color: #f0f0f0 !important; } /* ===== แก้ที่ 4: BUTTONS / ปุ่ม ===== */ /* เปลี่ยนปุ่มเป็นโทนดำ-ขาว */ button, .button, .btn, input[type="submit"], input[type="button"] { background: linear-gradient(135deg, #4a4a4a 0%, #2c2c2c 100%) !important; color: #ffffff !important; border: 2px solid #1a1a1a; padding: 10px 25px; cursor: pointer; transition: all 0.3s ease; } button:hover, .button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover { background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%) !important; border-color: #000000; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } /* ===== แก้ที่ 5: CONTENT BOXES / กล่องเนื้อหา ===== */ /* เปลี่ยนพื้นหลังสี → ขาว/เทาอ่อน */ .content, .box, .panel, .card, div[style*="background"] { background-color: #ffffff !important; border: 1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* ===== แก้ที่ 6: HEADINGS / หัวข้อ ===== */ h1, h2, h3, h4, h5, h6 { color: #1a1a1a !important; font-weight: bold; } h1 { border-bottom: 3px solid #2c2c2c; padding-bottom: 10px; } h2 { border-bottom: 2px solid #4a4a4a; padding-bottom: 8px; } /* ===== แก้ที่ 7: LINKS / ลิงก์ ===== */ a { color: #2c2c2c !important; text-decoration: underline; transition: color 0.3s ease; } a:hover { color: #000000 !important; text-decoration: none; } a:visited { color: #4a4a4a !important; } /* ===== แก้ที่ 8: SIDEBAR / แถบด้านข้าง ===== */ .sidebar, .side-menu, aside { background-color: #f5f5f5 !important; border: 1px solid #e0e0e0; color: #333333 !important; } .sidebar a, .side-menu a, aside a { color: #1a1a1a !important; padding: 8px 15px; display: block; border-bottom: 1px solid #e0e0e0; } .sidebar a:hover, .side-menu a:hover, aside a:hover { background-color: #ffffff !important; color: #000000 !important; text-decoration: none; } /* ===== แก้ที่ 9: FOOTER / ส่วนท้าย ===== */ footer, .footer { background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important; color: #ffffff !important; padding: 20px; border-top: 3px solid #000000; } footer a, .footer a { color: #cccccc !important; } footer a:hover, .footer a:hover { color: #ffffff !important; } /* ===== แก้ที่ 10: IMAGES / รูปภาพ ===== */ /* เพิ่ม grayscale filter ให้รูปภาพ */ img { filter: grayscale(100%); transition: filter 0.3s ease; border: 1px solid #e0e0e0; } img:hover { filter: grayscale(0%); } /* ===== แก้ที่ 11: FORMS / แบบฟอร์ม ===== */ input[type="text"], input[type="email"], input[type="password"], textarea, select { background-color: #ffffff !important; color: #333333 !important; border: 2px solid #cccccc; padding: 8px; transition: border-color 0.3s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: #2c2c2c; outline: none; box-shadow: 0 0 5px rgba(44, 44, 44, 0.3); } /* ===== แก้ที่ 12: NEWS / ข่าวสาร ===== */ .news, .news-item, .article { background-color: #ffffff !important; border: 1px solid #e0e0e0; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .news-title, .article-title { color: #1a1a1a !important; font-weight: bold; border-bottom: 2px solid #cccccc; padding-bottom: 5px; } /* ===== แก้ที่ 13: HIGHLIGHT / ไฮไลท์ ===== */ .highlight, .featured, .important { background-color: #2c2c2c !important; color: #ffffff !important; padding: 15px; border-left: 5px solid #000000; } /* ===== แก้ที่ 14: ICONS / ไอคอน ===== */ .icon, i, .fa { color: #2c2c2c !important; } /* ===== แก้ที่ 15: BREADCRUMB / เส้นทางหน้า ===== */ .breadcrumb { background-color: #f5f5f5 !important; padding: 10px; border: 1px solid #e0e0e0; } .breadcrumb a { color: #2c2c2c !important; } /* ===== PRINT STYLES / สำหรับพิมพ์ ===== */ @media print { body { background-color: #ffffff; color: #000000; } header, nav, footer { background: none !important; color: #000000 !important; } } /* ===== RESPONSIVE / รองรับมือถือ ===== */ @media (max-width: 768px) { body { font-size: 14px; } nav a, .nav a, .navbar a, .menu a { padding: 8px 10px; font-size: 14px; } } /* ===== ACCESSIBILITY / การเข้าถึง ===== */ :focus { outline: 3px solid #2c2c2c; outline-offset: 2px; } /* ===== แก้เพิ่มเติม: ลบสีพื้นหลังที่อาจมี inline style ===== */ [style*="background-color"], [style*="bgcolor"] { background-color: #ffffff !important; } [style*="color"] { color: #333333 !important; } /* ===== THE END ===== */