/* ============================================================ skeleton.css — ระบบ Skeleton Loading (ใช้ทุกหน้า) ------------------------------------------------------------ โหลดจาก partials/head.ejs โครงกระดูกหน้าเว็บอยู่ใน partials/navbar.ejs โครงกระดูกหลังบ้านอยู่ใน partials/admin_header.ejs ตัวควบคุมการโชว์/ซ่อนอยู่ใน partials/footer.ejs ============================================================ */ :root{ /* โหมดมืด: ตั้งให้เห็นชัดพอว่าเป็น "โครงกระดูก" (เดิมจางมากจนดูเหมือนจอดำ) */ --pgsk-base: rgba(255, 255, 255, .085); --pgsk-hi: rgba(255, 255, 255, .15); --pgsk-line: rgba(255, 255, 255, .11); --pgsk-card: rgba(255, 255, 255, .05); --pgsk-edge: rgba(255, 255, 255, .09); --pgsk-bg: var(--bg-body, #0d0d0f); } html[data-theme="light"]{ --pgsk-base: rgba(15, 23, 42, .07); --pgsk-hi: rgba(15, 23, 42, .13); --pgsk-line: rgba(15, 23, 42, .09); --pgsk-card: rgba(15, 23, 42, .04); --pgsk-edge: rgba(15, 23, 42, .07); --pgsk-bg: #0d0d0f; } /* ---------- ชิ้นส่วน shimmer ---------- */ .pgsk{ position: relative; overflow: hidden; background: var(--pgsk-base); border-radius: 10px; } .pgsk::after{ content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--pgsk-hi), transparent); animation: pgskShimmer 1.25s ease-in-out infinite; } @keyframes pgskShimmer{ 100%{ transform: translateX(100%); } } /* ---------- โครงกระดูกเต็มหน้า (overlay) ---------- */ #pgSkel{ position: fixed; inset: 0; z-index: 9998; /* สำคัญ: ห้ามกินคลิก/สกรอลล์ — ไม่งั้นเวลากดลิงก์ที่ไม่เปลี่ยนหน้า หน้าเว็บจะ "แช่แข็ง" อยู่หลัง overlay จนกว่าจะหมดเพดานเวลา */ pointer-events: none; /* ให้แถบเมนูจริง (navbar / แถบหัวหลังบ้าน) ยังมองเห็นอยู่: พื้นโปร่งช่วงบนสุด (--pgsk-top = ความสูงแถบเมนูจริง) แล้วเริ่มทึบใต้แถบเมนู engine จะวัดความสูงจริงจาก DOM มาใส่ให้เอง */ padding: var(--pgsk-top, 64px) 0 0; background: linear-gradient(to bottom, transparent 0, transparent var(--pgsk-top, 64px), var(--pgsk-bg) var(--pgsk-top, 64px)); overflow: hidden; /* โชว์/ซ่อนด้วย display เท่านั้น ⚠️ ห้ามใช้ animation/transition/opacity ที่นี่เด็ดขาด: เคยใช้ pgskIn/pgskAutoOut และ opacity transition แล้วเจอบั๊กจริง — พอ overlay ถูก display:none ครั้งหนึ่ง ทั้ง animation และ transition จะค้างที่เวลา 0 → overlay "display:block แต่โปร่งใส 0%" = ตอนกดเปลี่ยนหน้าไม่เห็นโครงกระดูกเลย (หรือเห็นเป็นจอดำ) */ display: none; } #pgSkel.pgsk-show{ display: block; } /* ⚠️ ดักบั๊ก "เปลี่ยนหน้าแล้ว UI ไปกองซ้าย ครึ่งขวาว่าง": คลาส pgsk-nav ถูกเติมที่ (head.ejs) ถ้ามีที่ไหนเขียนกฎแบบ .pgsk-nav{display:flex} จะกลายเป็น flex container → body หดเหลือกว้างเท่าเนื้อหาและชิดซ้าย บรรทัดนี้บังคับให้ เป็น block เสมอ (specificity สูงกว่ากฎคลาสเดี่ยว) */ html.pgsk-nav{ display: block; } /* ------------------------------------------------------------ โหมดมืด: โครงกระดูกชุดเก่าในหน้าแรก (.skel-*) ตั้งไว้จางมาก (3–6% ขาว) บนพื้นดำจึงมองไม่เห็น → ขาวเฟรมว่างเหมือนจอดำ ต้องเร่งความสว่าง (ผูกกับ html:not([data-theme="light"]) เพื่อไม่ให้ไปทับโหมดสว่าง) ------------------------------------------------------------ */ html:not([data-theme="light"]) .skel{ background: rgba(255, 255, 255, .085); } html:not([data-theme="light"]) .skel::after{ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent); } html:not([data-theme="light"]) .skel-banner{ background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); } html:not([data-theme="light"]) .skel-banner::after{ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); } html:not([data-theme="light"]) .skel-ro-card, html:not([data-theme="light"]) .skel-product{ background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); } /* หน้าที่มีโครงกระดูกของตัวเองในหน้า (หน้าแรก) → ไม่ต้องใช้ overlay ตอนโหลดครั้งแรก (JS จะถอดคลาสนี้ออกเองเมื่อกดลิงก์เปลี่ยนหน้า) */ #pgSkel.pgsk-off{ display: none; } /* หน้าหลังบ้าน = คลุมเต็มจอ (วาดแถบหัว/แถบข้างปลอมเอง) */ #pgSkel.pgsk-full{ --pgsk-top: 0px; } /* กดลิงก์เข้ามาหน้าแรก = ใช้ overlay อันเดียว → ซ่อนโครงกระดูกในหน้าไม่ให้ซ้อนกัน */ html.pgsk-nav #skelInit{ display: none; } .pgsk-shell{ position: relative; } /* ---------- โครงกระดูกที่อิง layout จริงของแต่ละหน้า ---------- */ /* เทียบเท่า main{padding-top:24px; padding-bottom:70px} ของหน้าจริง */ .pgsk-page{ padding-top: 24px; padding-bottom: 70px; } /* ของจริงกำหนดความกว้างไว้ที่ main > .container.container-wide (1320px) โครงกระดูกไม่ได้อยู่ใต้ main จึงต้องกำหนดเองให้เท่ากัน */ #pgSkel .container.container-wide{ max-width: 1320px; } @media (min-width: 1400px){ #pgSkel .container.container-wide{ max-width: 1320px !important; } } .pgsk-field{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .pgsk-body{ padding: 12px; display: flex; flex-direction: column; gap: 10px; } .pgsk-rowline{ display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--pgsk-edge); } .pgsk-rowline > .pgsk{ flex: 0 1 auto; } /* แถบหัว + แถบข้างของหลังบ้าน (ใช้ความสูง/ความกว้างจริงจาก admin-modern.css) */ .pgsk-admin-head{ position: fixed; left: 0; right: 0; top: 0; height: var(--admin-header-height, 64px); display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--pgsk-bg); border-bottom: 1px solid var(--pgsk-edge); } .pgsk-admin-side{ position: fixed; left: 0; top: 0; bottom: 0; width: var(--admin-sidebar-width, 260px); padding: 16px; background: var(--pgsk-bg); border-right: 1px solid var(--pgsk-edge); display: flex; flex-direction: column; gap: 10px; overflow: hidden; } /* จอเล็ก (≤992px) แถบข้างหลังบ้านจริงถูกซ่อน (translateX(-100%)) → โครงกระดูกก็ต้องซ่อนด้วย (ตัว .admin-content จริงจัดการ margin-left:0 ให้เองแล้ว) */ @media (max-width: 992px){ #pgSkel .pgsk-admin-side{ display: none; } } /* navbar ปลอม ⚠️ ห้ามใช้ชื่อคลาส .pgsk-nav ที่นี่เด็ดขาด เพราะชื่อนี้ถูกใช้เป็น state class บน ใช้ .pgsk-fakenav แทน (ปัจจุบันโครงกระดูกไม่ได้วาด navbar ปลอมแล้ว จึงไม่มีใครใช้) */ .pgsk-fakenav{ display: flex; align-items: center; gap: 10px; } .pgsk-dot{ width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; } .pgsk-pill{ width: 96px; height: 30px; border-radius: 999px; flex: 0 0 auto; } .pgsk-pill.sm{ width: 72px; } .pgsk-pill-r{ margin-left: auto; width: 88px; } /* แบนเนอร์ */ .pgsk-hero{ width: 100%; height: 200px; border-radius: 18px; } /* แถวการ์ดแนวนอน (รายการล่าสุด) */ .pgsk-row{ display: flex; gap: 12px; overflow: hidden; } .pgsk-mini{ flex: 0 0 250px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--pgsk-card); border: 1px solid var(--pgsk-edge); border-radius: 14px; } .pgsk-mini-img{ width: 52px; height: 52px; border-radius: 10px; flex: 0 0 auto; } .pgsk-mini-lines{ display: flex; flex-direction: column; gap: 8px; width: 100%; } /* เส้นข้อความ */ .pgsk-line{ height: 12px; border-radius: 6px; } .pgsk-l15{ width: 15%; } .pgsk-l20{ width: 20%; } .pgsk-l25{ width: 25%; } .pgsk-l30{ width: 30%; } .pgsk-l40{ width: 40%; } .pgsk-l50{ width: 50%; } .pgsk-l60{ width: 60%; } .pgsk-l70{ width: 70%; } .pgsk-l80{ width: 80%; } .pgsk-l90{ width: 90%; } /* การ์ดสินค้า */ .pgsk-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .pgsk-card{ background: var(--pgsk-card); border: 1px solid var(--pgsk-edge); border-radius: 16px; overflow: hidden; } .pgsk-card-img{ height: 140px; border-radius: 0; } .pgsk-card-body{ padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; } .pgsk-btn{ height: 34px; border-radius: 999px; } /* ---------- โครงกระดูกหน้าแอดมิน ---------- */ .pgsk-admin-head{ height: 52px; border-radius: 14px; } .pgsk-stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .pgsk-stat{ height: 92px; border-radius: 16px; } .pgsk-panel{ border: 1px solid var(--pgsk-edge); background: var(--pgsk-card); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .pgsk-tr{ display: flex; align-items: center; gap: 14px; } .pgsk-tr > .pgsk{ flex: 0 0 auto; } /* ---------- Skeleton ในตาราง (DataTables) ---------- */ tr.pgsk-rows > td{ padding: 12px 10px !important; border: 0 !important; } tr.pgsk-rows td .pgsk-line{ display: block; height: 13px; width: 88%; } /* ---------- รูปภาพที่ยังโหลดไม่เสร็จ ---------- */ img.pgsk-loading{ background-color: var(--pgsk-base); background-image: linear-gradient(100deg, transparent 25%, var(--pgsk-hi) 50%, transparent 75%); background-size: 220% 100%; background-repeat: no-repeat; animation: pgskImg 1.4s linear infinite; } @keyframes pgskImg{ 0%{ background-position: 130% 0; } 100%{ background-position: -130% 0; } } /* ---------- แถบโหลดบนสุด (ตอนยิง AJAX) ---------- */ #pgBar{ position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10050; background: linear-gradient(90deg, var(--brand, #22c55e), var(--brand-light, #4ade80)); box-shadow: 0 0 10px rgba(var(--brand-rgb, 34, 197, 94), .75); opacity: 0; transition: width .25s ease, opacity .2s ease; pointer-events: none; } #pgBar.pgsk-on{ opacity: 1; } /* ---------- คอนเทนเนอร์/โครงหน้าต่างๆ (ให้ตรงกับแต่ละหน้า) ---------- */ .pgsk-stack{ display: flex; flex-direction: column; gap: 14px; } .pgsk-grid-auto{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .pgsk-split{ display: grid; grid-template-columns: 5fr 7fr; gap: 20px; } .pgsk-2col{ display: grid; grid-template-columns: 265px 1fr; gap: 20px; align-items: start; } .pgsk-center{ display: flex; align-items: flex-start; justify-content: center; padding: 34px 0; } .pgsk-side{ gap: 12px; } .pgsk-input{ height: 42px; border-radius: 10px; } .pgsk-circle{ width: 58px; height: 58px; border-radius: 50%; margin: 0 auto; } .pgsk-auth-card{ width: 100%; max-width: 430px; padding: 30px 28px; gap: 14px; } .pgsk-wide{ border: 1px solid var(--pgsk-edge); background: var(--pgsk-card); border-radius: 16px; overflow: hidden; } .pgsk-wide-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } .pgsk-wide-lines{ display: flex; flex-direction: column; gap: 8px; flex: 1; } .pgsk-l35{ width: 35%; } .pgsk-l45{ width: 45%; } .pgsk-l55{ width: 55%; } .pgsk-l65{ width: 65%; } .pgsk-l75{ width: 75%; } .pgsk-l85{ width: 85%; } /* ---------- จอเล็ก ---------- */ @media (max-width: 991px){ .pgsk-grid{ grid-template-columns: repeat(2, 1fr); } .pgsk-stat-grid{ grid-template-columns: repeat(2, 1fr); } .pgsk-hero{ height: 150px; } .pgsk-mini{ flex: 0 0 210px; } .pgsk-split{ grid-template-columns: 1fr; } .pgsk-2col{ grid-template-columns: 1fr; } .pgsk-side{ display: none; } } @media (max-width: 575px){ #pgSkel{ padding: 56px 12px 12px; } .pgsk-hero{ height: 120px; } .pgsk-pill{ width: 70px; height: 26px; } .pgsk-card-img{ height: 110px; } .pgsk-row{ gap: 10px; } .pgsk-mini{ flex: 0 0 185px; } } /* ---------- เคารพการตั้งค่า "ลดการเคลื่อนไหว" ---------- */ @media (prefers-reduced-motion: reduce){ .pgsk::after{ animation: none; } img.pgsk-loading{ animation: none; } } /* ============================================================ โหมดสว่าง (Light theme) — โครงกระดูก/หน้าโหลดต้องไม่ดำ ------------------------------------------------------------ หมายเหตุ: style.css อ้าง var(--bg-body, #0d0d0f) ใน .skel-section และ #pageLoader แต่ไม่เคยนิยาม --bg-body ไว้ → ในโหมดสว่างจึงตกไป ใช้ค่า fallback สีดำ จึงต้องนิยามให้ตรงตามธีมที่นี่ ============================================================ */ :root{ --bg-body: #0d0d0f; --pgsk-bg: #0d0d0f; } html[data-theme="light"]{ --bg-body: #f7f7f8; --pgsk-bg: #f7f7f8; } /* หน้าโหลด (splash) — style.css บังคับ #111111 !important ไว้ทั้ง 2 ธีม (skeleton.css โหลดทีหลัง จึงเขียนทับได้ด้วย !important + specificity เท่ากัน) */ html[data-theme="light"] #pageLoader, html[data-theme="light"] #taskLoader{ background: #f7f7f8 !important; } html[data-theme="light"] #pageLoader .page-loader-msg, html[data-theme="light"] #taskLoader .task-loader-msg, html[data-theme="light"] .page-loader-msg{ color: #3f3f46 !important; } html[data-theme="light"] #pageLoader::before, html[data-theme="light"] #taskLoader::before{ opacity: .16; mix-blend-mode: normal; } /* โครงกระดูกชุดเก่าในหน้าแรก (.skel-banner / .skel-ro-* / .skel-product) ที่ยังใช้โทนขาวจาง → โหมดสว่างต้องเปลี่ยนเป็นเทาเข้มจางจึงจะมองเห็น */ html[data-theme="light"] .skel-banner, html[data-theme="light"] .skel-ro-card, html[data-theme="light"] .skel-product{ background: rgba(15, 23, 42, .045); border-color: rgba(15, 23, 42, .07); } html[data-theme="light"] .skel-banner::after{ background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .07), transparent); }