/* ========================================================================== สะพานเชื่อมไลบรารีภายนอกเข้ากับธีมของเรา -------------------------------------------------------------------------- โหลดหลัง bootstrap.css แต่ก่อน app.css เสมอ bootstrap.css → vendor.css (ไฟล์นี้) → app.css ไฟล์นี้ทำ 3 อย่าง 1. แปลงตัวแปรของ Bootstrap ให้เป็นสีของเรา คอมโพเนนต์ทุกตัวจะกลายเป็นกรมท่า+ทองเอง 2. แก้จุดที่ชื่อคลาสชนกัน 3. แต่งหน้าตา Plyr กับ Swiper ให้เข้าชุด ========================================================================== */ /* --------------------------------------------------------------------------- 1. แปลงตัวแปร Bootstrap เป็นสีของเรา Bootstrap 5.3 วางสีทั้งหมดไว้บนตัวแปร --bs-* แล้วคอมโพเนนต์ทุกตัวอ่านจากตรงนี้ เขียนทับที่เดียวจึงเปลี่ยนได้ทั้งชุด ไม่ต้องไล่เขียนทับทีละคอมโพเนนต์ (ใช้คู่กับ data-bs-theme="dark" บนแท็ก ซึ่งเปิดโหมดมืดในตัวของ Bootstrap เอง) --------------------------------------------------------------------------- */ :root, [data-bs-theme="dark"] { --bs-body-bg: #070b16; --bs-body-color: #eaeefb; --bs-emphasis-color: #ffffff; --bs-secondary-color: rgba(154, 166, 201, .85); --bs-tertiary-color: rgba(102, 115, 154, .8); --bs-tertiary-bg: #0e1530; --bs-secondary-bg: #121a3a; --bs-border-color: #1e2a52; --bs-border-radius: 12px; --bs-border-radius-sm: 9px; --bs-border-radius-lg: 16px; --bs-border-radius-xl: 20px; --bs-primary: #d4af37; --bs-primary-rgb: 212, 175, 55; --bs-primary-text-emphasis: #f4d98b; --bs-primary-bg-subtle: #1a1508; --bs-primary-border-subtle: #a8842a; --bs-link-color: #d4af37; --bs-link-color-rgb: 212, 175, 55; --bs-link-hover-color: #f4d98b; --bs-code-color: #f4d98b; --bs-highlight-bg: #2a2208; /* วงแหวนตอนโฟกัส — คีย์บอร์ดต้องเห็นชัดว่าอยู่ตรงไหน */ --bs-focus-ring-color: rgba(212, 175, 55, .38); --bs-focus-ring-width: 3px; --bs-font-sans-serif: "Prompt", "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bs-body-font-size: 14.5px; --bs-body-line-height: 1.72; } /* --------------------------------------------------------------------------- 2. จุดที่ชื่อคลาสชนกัน เว็บนี้เขียน CSS เองมาก่อนจะเอา Bootstrap เข้ามา ชื่อคลาสจึงทับกัน 3 ตัว app.css โหลดทีหลังก็จริง แต่ชนะเฉพาะ "คุณสมบัติที่เราประกาศไว้เอง" เท่านั้น คุณสมบัติที่ Bootstrap ประกาศแต่เราไม่ได้ประกาศ จะยังมีผลอยู่และทำหน้าเว็บพัง --------------------------------------------------------------------------- */ /* * .card — ตัวที่พังหนักสุด * ของเราคือกล่องโปสเตอร์โปร่ง ๆ (พื้นหลังกับขอบอยู่ที่ .card-art ข้างใน) * ของ Bootstrap เป็นการ์ดทึบมีพื้นหลังและขอบของตัวเอง * ถ้าไม่ล้าง โปสเตอร์ทุกใบบนเว็บจะมีกล่องสีอ่อนกับขอบซ้อนออกมาอีกชั้น */ .card { --bs-card-bg: transparent; --bs-card-border-width: 0; --bs-card-spacer-y: 0; --bs-card-spacer-x: 0; display: block; background: transparent; border: 0; border-radius: 0; } /* * .btn — Bootstrap ตั้ง --bs-btn-* ไว้เป็นชุด และบางตัวเราไม่ได้ประกาศทับ * ที่ต้องล้างจริง ๆ คือ box-shadow ตอนโฟกัส ซึ่งเป็นสีฟ้าของ Bootstrap * ปุ่มทองมีวงแหวนฟ้าล้อมตอนกดจะดูหลุดธีมทันที */ .btn { --bs-btn-focus-box-shadow: 0 0 0 3px rgba(212, 175, 55, .3); --bs-btn-box-shadow: none; text-decoration: none; } .btn:focus-visible { box-shadow: 0 0 0 3px rgba(212, 175, 55, .3); } /* * .alert — Bootstrap ต้องมีคลาสคู่ (.alert-danger) ถึงจะได้สีขอบ * ของเราใช้ .alert.err / .alert.ok ที่ตั้งสีเอง จึงแค่กันไม่ให้เผลอได้ขอบใส */ .alert { --bs-alert-border-color: currentColor; } /* * .nav — Bootstrap สั่ง list-style กับ padding-left ไว้เผื่อใช้กับ