/* * MES789 Sovereign Design Tokens * ที่มา: MES789 Sovereign Color Blueprint (PDF) — ล็อกค่าตรงตามเอกสารทุกจุด * ใช้ CSS Variables กลาง เพื่อให้โมดูลอื่นในอนาคต (ฟีด/เพื่อน/บทความ) เรียกใช้ชุดสีเดียวกันได้ * แนะนำ: ก็อปบล็อก :root นี้ไปแปะใน "Additional CSS" ของธีม (Customizer) ได้เลย * จะได้ใช้ตัวแปรเดียวกันทั้งเว็บ ไม่ต้องเขียนเลขสีซ้ำในแต่ละโมดูล */ :root { /* พื้นหลัง/โครงสร้าง */ --mes-bg-void: #0C0C0E; /* Deep Void Black - พื้นหลังหลักทั้งเว็บ */ --mes-bg-card: #121212; /* Sovereign Charcoal - พื้นหลังการ์ด/เนื้อหา */ --mes-bg-nav: #1C1C1E; /* Charcoal Shield - แถบเมนู/ฟุตเตอร์ */ --mes-border: #2C2C2E; /* Obsidian Border - เส้นขอบ/เส้นคั่น */ /* ตัวอักษร */ --mes-text-body: #E0E0E0; /* Muted Ivory - เนื้อหาหลัก */ --mes-text-meta: #8E8E93; /* Slate Platinum - วันที่/ผู้เขียน/metadata */ /* สีแห่งอำนาจ (ใช้เฉพาะจุดสำคัญเท่านั้น) */ --mes-gold: #D4AF37; /* Imperial Gold - โลโก้/H1/ไอคอนหลัก */ --mes-red: #8B0000; /* Sacred Vermilion - ปุ่ม CTA/ลิงก์คลิก */ /* ระยะห่างมาตรฐานตามคู่มือ */ --mes-line-height: 1.7; --mes-letter-spacing-gold: 0.03em; } .mpc-profile-wrap { max-width: 900px; margin: 0 auto; background: var(--mes-bg-void); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.5); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; position: relative; /* 🐞 [แก้ตามที่สั่ง — เนื้อหาทับแถบเมนูบน] ประวัติบรรทัดนี้ยาว: ยุค WordPress เคยตั้ง 2147483000 กันแผงลอย/แชทของธีมมาบังคลิก แล้วลดเหลือ var(--mes-z-guard, 800) — แต่ในระบบ v5 standalone "ไม่มีใครประกาศตัวแปรนี้" (mes-zindex-scale.css ไม่ได้ย้ายตามมา และไม่มีธีมภายนอกให้กันอีกแล้ว) ค่าจึงตกลงมาที่ 800 เสมอ — สูงกว่าแถบเมนูบน (topbar z=300) และเมนูตาราง สี่เหลี่ยม (tb-apps z=400) ผลคือเลื่อนหน้าโปรไฟล์แล้ว "การ์ดไหลทับแถบเมนู" ตรงตามอาการที่เจ้าของแจ้งเป๊ะ ตอนนี้เหลือ z-index:1 พอ — isolation:isolate บรรทัดล่างสร้าง stacking context ให้อยู่แล้ว ชั้นซ้อนภายในการ์ด (z 2/20) ยังทำงานเหมือนเดิมทุกอย่าง ส่วนเครื่องมือเต็มจอ (100000/100060) เป็น position:fixed คนละบริบท ไม่กระทบ ⚠️ กติกาชั้นซ้อนทั้งเว็บ: เนื้อหาในหน้า < 100 · แถบเมนูบน-ล่าง 300 · เมนูตาราง 400 · เมนูลากคลุมลิงก์ 500 · เครื่องมือเต็มจอ 9000 ขึ้นไป */ z-index: 1; isolation: isolate; /* สร้าง stacking context ใหม่ กันชั้นในถูกทับจากภายนอกโดยไม่ตั้งใจ */ } .mpc-cover { position: relative; /* [แก้ตามที่สั่ง ข้อ 3] ปกสูงขึ้น ให้ภาพกินพื้นที่จากบนสุดลงมาถึงใต้แถบชื่อ ส่วนที่เป็นข้อมูลโปรไฟล์ด้านล่างจะทับบนปกแบบโปร่งแสง (ดู .mpc-header) */ height: 380px; background-size: cover; background-position: center; background-color: var(--mes-bg-nav); background-image: linear-gradient(135deg, var(--mes-bg-nav), var(--mes-bg-void)); } /* [เพิ่มโดย Claude] ไล่เฉดโปร่งแสงคาดด้านล่างรูปปก ตามที่ขอ (ข้อ 4) — ให้ปุ่ม/ข้อความด้านล่างอ่านง่ายขึ้น ไม่มีเส้นขอบล่างแบบเดิมแล้ว ให้รูปดูต่อเนื่องเต็มไม่มีรอยตัด */ .mpc-cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.55)); pointer-events: none; } /* [แก้ตามที่สั่ง ข้อ 1] เหลือแค่ไอคอนกล้องกลม ๆ ไม่มีข้อความ "เปลี่ยนรูปปก" คนเข้าใจเองอยู่แล้วว่ากล้อง = เปลี่ยนรูป และไม่บังภาพปกด้วย [แก้ 22 ก.ย. 2569 — แม่บท #7] ย้ายจากมุมขวาบนกลับมามุมขวาล่าง ให้ตรงกับตำแหน่งเดิมของเว็บ และให้เหมือนกับปุ่มเดียวกันบนเพจ/กลุ่ม (กติกาตัวเลือกรูปชุดเดียว — ต้องหน้าตา/ตำแหน่งเดียวกันทุกที่) */ .mpc-change-cover-btn { position: absolute; right: 16px; bottom: 16px; top: auto; background: rgba(12,12,14,.6); color: var(--mes-gold); border: 1px solid rgba(212,175,55,.5); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 17px; padding: 0; cursor: pointer; letter-spacing: var(--mes-letter-spacing-gold); transition: background .15s ease; z-index: 20; pointer-events: auto; } .mpc-change-cover-btn:hover { background: rgba(212,175,55,.15); } /* [เพิ่ม 22 ก.ย. 2569 — แม่บท #7] ↔ ปรับตำแหน่ง/ซูมรูปปกที่ตั้งไว้แล้ว (ไม่เปลี่ยนรูป) — ตัวเดียวกับที่เพจ/กลุ่มมี (.gh-pic-fit-cover) วางชิดซ้ายของปุ่มกล้อง (ห่าง 48px) อยู่แถวเดียวกันมุมขวาล่าง */ .mpc-cover-fit-btn { position: absolute; right: 64px; bottom: 16px; background: rgba(12,12,14,.6); color: var(--mes-gold); border: 1px solid rgba(212,175,55,.5); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 15px; padding: 0; cursor: pointer; z-index: 20; pointer-events: auto; list-style: none; } .mpc-cover-fit-btn::-webkit-details-marker { display: none; } .mpc-cover-fit-panel { position: absolute; right: 16px; bottom: 62px; z-index: 21; background: var(--mes-bg-nav, #1a1414); border: 1px solid rgba(212,175,55,.35); border-radius: 10px; padding: 10px 12px; width: 200px; font-size: .78rem; color: var(--mes-text-dim, #a1938c); } .mpc-cover-fit-panel label { display: block; margin: 6px 0; } .mpc-cover-fit-panel input[type=range] { width: 100%; } .mpc-cover-fit-panel output { color: var(--mes-gold); font-weight: 600; } /* [แก้ตามที่สั่ง ข้อ 3] แถบข้อมูลทับบนปกแบบโปร่งแสง ~88% เข้มพอให้ตัวอักษรอ่านชัด แต่ยังเห็นภาพปกจาง ๆ ทะลุด้านหลัง ทำให้รู้สึกว่าปกเต็มพื้นที่ต่อเนื่อง ไม่มีรอยตัดแข็ง ๆ */ .mpc-header { display: flex; align-items: flex-end; gap: 20px; padding: 0 24px 20px; margin-top: -110px; position: relative; flex-wrap: wrap; background: rgba(18, 18, 20, .88); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .mpc-avatar-box { position: relative; flex-shrink: 0; width: 120px; height: 120px; } .mpc-avatar-img { width: 120px !important; height: 120px !important; min-width: 120px; min-height: 120px; max-width: 120px; max-height: 120px; border-radius: 50% !important; border: 4px solid var(--mes-bg-void); object-fit: cover; background: var(--mes-bg-nav); display: block; aspect-ratio: 1 / 1; } .mpc-change-avatar-btn { position: absolute; right: 0; bottom: 0; background: var(--mes-gold); color: var(--mes-bg-void); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 14px; z-index: 20; pointer-events: auto; } .mpc-header-info { flex: 1; padding-bottom: 6px; padding-top: 16px; } .mpc-name { color: var(--mes-gold); margin: 0 0 4px; font-size: 24px; letter-spacing: var(--mes-letter-spacing-gold); } .mpc-bio { color: var(--mes-text-body); font-size: 14px; line-height: var(--mes-line-height); } .mpc-edit-btn, .mpc-save-btn { /* 🐞 [แก้บั๊ก] เดิมไม่มีบรรทัดนี้ — เบราว์เซอร์ไม่ให้