/* Golden Merbuk / ชวาเสียงทอง — App Shell CSS วาง ไว้หลังไฟล์ CSS หลักใน ปรับตัวแปรสี/ระยะด้านล่างให้ตรงกับธีมจริงของเว็บ (--purple, --gold-dark ฯลฯ ที่มีอยู่แล้ว) */ :root{ --app-nav-height: 60px; --app-nav-bg: rgba(63,47,52,.97); --app-nav-active: #F1B6C5; /* ให้ตรงกับสีทองที่ใช้ใน jp-btn-gold */ --app-nav-inactive: #D7C7CC; } /* ให้หน้าเว็บรู้สึกเหมือนแอป: ปิดการเด้งขอบจอ (pull-to-refresh / rubber-band) */ html{ overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; } body{ overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; /* กันเนื้อหาชนแถบเมนูล่างที่ลอยอยู่ + เผื่อ safe-area ของ iPhone (Home indicator) */ padding-bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom, 0px)); } /* เมื่อเปิดแบบ standalone (ติดตั้งเป็นแอปแล้ว) เผื่อ safe-area ด้านบนสำหรับ notch/status bar */ @media all and (display-mode: standalone){ header, .jp-navbar, .jp-header{ padding-top: env(safe-area-inset-top, 0px); } } /* ========== กันภาพล้นจอทั่วทั้งเว็บ (เผื่อภาพจากวิดเจ็ต/แบนเนอร์ที่ไม่มี style กำกับ) ========== */ img{ max-width: 100%; height: auto; } /* ========== แถบเมนูล่างแบบแอป ========== */ .app-bottom-nav{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; background: var(--app-nav-bg); border-top: 1px solid rgba(255,255,255,.08); padding-bottom: env(safe-area-inset-bottom, 0px); height: calc(var(--app-nav-height) + env(safe-area-inset-bottom, 0px)); } .app-bottom-nav a{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--app-nav-inactive); text-decoration: none; font-size: .68rem; transition: color .15s ease; } .app-bottom-nav a .icon{ font-size: 1.25rem; line-height: 1; } .app-bottom-nav a.active{ color: var(--app-nav-active); } .app-bottom-nav a:active{ opacity: .6; } /* ========== เอฟเฟกต์เปลี่ยนหน้าแบบ native (รองรับเฉพาะเบราว์เซอร์ที่รองรับ View Transitions, เบราว์เซอร์อื่นจะข้ามไปเฉยๆ ไม่พัง ไม่กระทบการใช้งาน) ========== */ @view-transition{ navigation: auto; } ::view-transition-old(root){ animation: app-fade-out .15s ease both; } ::view-transition-new(root){ animation: app-fade-in .18s ease both; } @keyframes app-fade-in{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} } @keyframes app-fade-out{ from{ opacity:1;} to{ opacity:0;} } /* แถบติดตั้งแอป (แสดงเมื่อ JS ตรวจพบว่าติดตั้งได้) */ .app-install-banner{ position: fixed; left: 12px; right: 12px; bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom,0px) + 10px); z-index: 998; background: #4a373d; color: #fff; border-radius: 14px; padding: 12px 14px; display: none; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .app-install-banner.show{ display:flex; } .app-install-banner button{ margin-left:auto; border:none; border-radius: 999px; padding: 8px 14px; font-weight:700; background: var(--app-nav-active); color:#141414; } .app-install-banner .dismiss{ background: transparent; color:#9a9a9a; padding:8px; margin-left:4px; font-weight:400; }