/* --------------------------------------------------------------------------- * UI ของ CONSOLE.MULTISTORE.ME ที่ใช้ร่วม /app และ /admin (ผู้ใช้ขอ 2026-10-03) * * 1. เปลี่ยนหน้าแบบนุ่ม (ไม่กระพริบ) — View Transitions ข้ามหน้าของเบราว์เซอร์ * 2. ตัวบอกกำลังโหลด (คู่กับ public/js/ms-loading-indicator.js — แบบ console.thevirus) * 3. สีแบรนด์ตามโลโก้ MULTISTORE.ME: ม่วง #9614e2 → ชมพูแดง #ef3062 * 4. ป้ายมงกุฎ Premium บนเมนู (badge สี "premium") * * ไฟล์ static ไม่ผ่าน Vite (deploy ไม่มีขั้น npm build) — โหลดผ่าน render hook HEAD_END + StaticAsset::url() * โหมดมืด: ใช้ selector .dark ของ Filament ทุกจุดที่สีต่างกัน * --------------------------------------------------------------------------- */ :root { --ms-brand-from: #9614e2; --ms-brand-to: #ef3062; --ms-brand-gradient: linear-gradient(90deg, var(--ms-brand-from) 0%, var(--ms-brand-to) 100%); --ms-premium-from: #f7c948; --ms-premium-to: #e8890c; } /* ---------- 1. เปลี่ยนหน้าแบบนุ่ม ---------- * แผงนี้โหลดหน้าใหม่ทั้งหน้าทุกครั้งที่กดเมนู → เดิมจอขาว/ดำแวบก่อนวาดหน้าใหม่ * View Transitions: เบราว์เซอร์เก็บภาพหน้าเดิมไว้แล้วค่อยเปลี่ยนเป็นหน้าใหม่แบบ crossfade สั้น ๆ * เมนูซ้ายกับแถบบนตั้งชื่อแยก → อยู่นิ่งที่เดิม ไม่จางหายไปพร้อมเนื้อหา * เบราว์เซอร์ที่ไม่รองรับ (Firefox รุ่นเก่า) = ทำงานแบบเดิม ไม่มีอะไรพัง */ @view-transition { navigation: auto; } .fi-main-sidebar { view-transition-name: ms-sidebar; } .fi-topbar { view-transition-name: ms-topbar; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; animation-timing-function: ease-out; } /* เมนู/แถบบน: ตัดภาพของหน้าเดิมทิ้งทันที แสดงของหน้าใหม่เลย (ไม่ fade) * ถ้าปล่อยภาพเดิมค้าง แถบเมนูที่เลือกจะซ้อน 2 อัน (อันเก่าค้างแวบหนึ่งแล้วค่อยหาย — ผู้ใช้เจอ 2026-10-03) */ ::view-transition-old(ms-sidebar), ::view-transition-old(ms-topbar) { display: none; } ::view-transition-new(ms-sidebar), ::view-transition-new(ms-topbar) { animation: none; mix-blend-mode: normal; } ::view-transition-group(ms-sidebar), ::view-transition-group(ms-topbar) { animation: none; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ---------- 2. ตัวบอกกำลังโหลด ---------- */ .ms-loading { position: fixed; inset: 0 0 auto 0; z-index: 2147483000; pointer-events: none; } .ms-loading-bar { height: 3px; width: 100%; opacity: 0; background: linear-gradient(90deg, transparent 0%, var(--ms-brand-from) 35%, var(--ms-brand-to) 65%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; transition: opacity 120ms ease; } .ms-loading.is-active .ms-loading-bar { opacity: 1; animation: ms-loading-slide 1.1s ease-in-out infinite; } .ms-loading-label { position: absolute; top: 0.75rem; left: 50%; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 9999px; font-size: 14px; color: var(--ms-brand-from); background-color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / 0.12), 0 0 0 1px color-mix(in oklab, var(--ms-brand-from) 25%, transparent); opacity: 0; transform: translate(-50%, -0.5rem); transition: opacity 150ms ease, transform 150ms ease; } .ms-loading.is-active.is-slow .ms-loading-label { opacity: 1; transform: translate(-50%, 0); } .dark .ms-loading-label { color: #d8a6ff; background-color: var(--gray-900); box-shadow: 0 4px 14px rgb(0 0 0 / 0.4), 0 0 0 1px color-mix(in oklab, var(--ms-brand-to) 40%, transparent); } .ms-loading-spinner { width: 0.875rem; height: 0.875rem; border-radius: 9999px; border: 2px solid color-mix(in oklab, currentColor 25%, transparent); border-top-color: currentColor; animation: ms-loading-spin 0.7s linear infinite; } html.ms-busy, html.ms-busy * { cursor: progress !important; } @keyframes ms-loading-slide { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } } @keyframes ms-loading-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ms-loading.is-active .ms-loading-bar { animation: none; background: var(--ms-brand-gradient); } .ms-loading-spinner { animation-duration: 2s; } } /* ---------- 3. สีแบรนด์ ---------- * primary ของ Filament = ม่วงจากโลโก้ (ตั้งใน ConfiguresSharedPanel::colors) * เมนูที่เลือกอยู่ = แถบไล่สีม่วง → ชมพูแดง แบบโลโก้ · ตัวอักษร/ไอคอนขาว */ .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn, .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) { background-color: transparent; background-image: var(--ms-brand-gradient); box-shadow: 0 4px 14px -6px color-mix(in oklab, var(--ms-brand-to) 70%, transparent); } .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: #fff; } /* ---------- 4. ป้ายมงกุฎ Premium ---------- * เมนู 👑 ใช้ badge สี "premium" (trait App\Filament\Concerns\HasPremiumBadge) * แสดงเป็นป้ายทองไล่สี + ไอคอนมงกุฎขาวคม (SVG) แทนอีโมจิ ที่เดิมเล็ก/จางและสีจมกับพื้น * เมนูที่เลือกอยู่ (พื้นไล่สีม่วง-ชมพู): ป้ายยังเป็นทองพร้อมขอบขาว → ยังเด่น */ .fi-badge.fi-color-premium { --ms-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 7.5l4.5 3.6L12 4l4.5 7.1L21 7.5l-1.9 10.1a1 1 0 0 1-1 .8H5.9a1 1 0 0 1-1-.8L3 7.5zM6 20h12v1.6H6z'/%3E%3C/svg%3E"); position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.3rem; padding: 0 0.4rem; border-radius: 9999px; font-size: 0; color: transparent; background-image: linear-gradient(135deg, var(--ms-premium-from) 0%, var(--ms-premium-to) 100%); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25), inset 0 0 0 1px rgb(255 255 255 / 0.35); --tw-ring-shadow: 0 0 #0000; } .fi-badge.fi-color-premium::before { content: ''; width: 1rem; height: 1rem; background-color: #fff; -webkit-mask: var(--ms-crown) center / contain no-repeat; mask: var(--ms-crown) center / contain no-repeat; filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.15)); } .fi-badge.fi-color-premium > * { display: none; } .fi-sidebar .fi-sidebar-item.fi-active .fi-badge.fi-color-premium { box-shadow: 0 0 0 1.5px #fff, 0 2px 6px rgb(0 0 0 / 0.3); } /* ---------- 5. กล่องรอโหลด (skeleton) ---------- * widget ที่โหลดทีหลัง (lazy — เช่น Dashboard ที่ต้องถาม ERP) เดิมแสดงเป็นกล่องว่างสีพื้น ดูเหมือนหน้าพัง (ผู้ใช้เจอ 2026-10-03) * ใช้กับ .fi-loading-section ของ Filament ทุกที่: วาดโครงหัวข้อ + เส้นข้อความจาง ๆ แล้วมีแสงวิ่งผ่าน * ช่องไอคอนเป็นสี่เหลี่ยมมุมเหลี่ยม (background วาดมุมมนไม่ได้) · วาดด้วย CSS ล้วน (ไม่ต้องแก้ widget ทีละตัว) · ป้าย "กำลังโหลด" สำหรับโปรแกรมอ่านหน้าจออยู่ใน markup เดิมของ Filament */ .fi-section.fi-loading-section { --ms-skel: rgb(0 0 0 / 0.07); --ms-skel-shine: rgb(255 255 255 / 0.55); position: relative; overflow: hidden; min-height: 8rem; background-image: linear-gradient(var(--ms-skel), var(--ms-skel)), linear-gradient(var(--ms-skel), var(--ms-skel)), linear-gradient(var(--ms-skel), var(--ms-skel)), linear-gradient(var(--ms-skel), var(--ms-skel)), linear-gradient(var(--ms-skel), var(--ms-skel)); background-repeat: no-repeat; /* หัวข้อ (วงกลมไอคอน + แถบชื่อ) · เส้นข้อความ 3 เส้นยาวไม่เท่ากัน */ background-size: 1.25rem 1.25rem, 32% 0.875rem, 88% 0.625rem, 72% 0.625rem, 54% 0.625rem; background-position: 1.5rem 1.25rem, 3.25rem 1.45rem, 1.5rem 3.9rem, 1.5rem 5.15rem, 1.5rem 6.4rem; } .fi-section.fi-loading-section:where(.dark, .dark *) { --ms-skel: rgb(255 255 255 / 0.07); --ms-skel-shine: rgb(255 255 255 / 0.06); } .fi-section.fi-loading-section::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 0%, var(--ms-skel-shine) 50%, transparent 100%); animation: ms-skeleton-shine 1.4s ease-in-out infinite; } @keyframes ms-skeleton-shine { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .fi-section.fi-loading-section::after { animation: none; display: none; } } /* ---------- 6. ปุ่มหลัก (primary แบบทึบ) ---------- * ธีม Brisk ใช้เฉด 400 เป็นพื้นปุ่ม (ออกแบบมาให้ส้มอ่อน + ตัวอักษรเข้ม) — เปลี่ยนเป็นม่วงแล้วได้ม่วงจาง ตัวอักษรขาวอ่านยาก * ใช้ไล่สีแบรนด์แบบเดียวกับเมนูที่เลือก · ToggleButtons ที่ยังไม่เลือกไม่โดน (กฎใน shared.css) */ .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):not(.fi-fo-toggle-buttons-btn-ctn > input:not(:checked) + .fi-btn) { background-color: var(--ms-brand-from); background-image: var(--ms-brand-gradient); border-color: transparent; box-shadow: 0 4px 12px -6px color-mix(in oklab, var(--ms-brand-to) 70%, transparent); } .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):not(.fi-fo-toggle-buttons-btn-ctn > input:not(:checked) + .fi-btn):hover { filter: brightness(1.08); } /* ---------- popup ฟอร์ม (App\Filament\Support\ModalForm · round-4a) ---------- หัว/ท้ายติดที่: Filament stickyModalHeader/Footer (เนื้อหาเลื่อนภายใน popup) large = กว้างเกือบเต็มจอ (มีขอบ) แต่ไม่เกิน 1600px · สูงไม่เกินจอ มือถือ (< 640px) = เต็มจอทุกขนาด ไม่มีขอบ/มุมโค้ง */ .fi-modal-window.ms-modal-form-large { max-width: min(1600px, calc(100vw - 2rem)); } /* สูงไม่เกินจอ เลื่อนภายใน popup เสมอ — Filament ใส่ให้เฉพาะความกว้างที่ไม่ใช่ screen (Width::Screen เลื่อนไม่ได้ ที่ #5 เจอ) */ .fi-modal-window.ms-modal-form { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; } .fi-modal-window.ms-modal-form .fi-modal-footer-actions { /* ยกเลิก ซ้าย · บันทึก ขวา (Spec) — DOM ของ Filament เป็น [บันทึก, …, ยกเลิก] และใช้ row-reverse: บังคับ row แล้วดึงยกเลิกไปซ้ายสุด ที่เหลือชิดขวา */ display: flex; flex-direction: row !important; justify-content: flex-end !important; flex-wrap: wrap !important; /* ปุ่มเยอะ (เช่น ใบส่ง 6 ปุ่ม) ขึ้นบรรทัดใหม่ ไม่ล้นจอ */ width: 100%; gap: .75rem; } .fi-modal-window.ms-modal-form .fi-modal-footer-actions > [data-ms-modal-cancel] { order: -1; margin-inline-end: auto; } /* ปุ่มบันทึก (submit) ขวาสุดเสมอ — ปุ่มเสริม/เมนู "เพิ่มเติม" (ModalForm::moreMenu) อยู่ระหว่างยกเลิกกับบันทึก */ .fi-modal-window.ms-modal-form .fi-modal-footer-actions > [type="submit"] { order: 1; } /* ≤ 480px: shared.css ทำปุ่มทุกตัวเต็มความกว้างซ้อนแนวตั้ง — popup ฟอร์มให้อยู่แถวเดียว ยืดเท่า ๆ กัน (ปิด | เพิ่มเติม ▾ | บันทึก) ปุ่มเยอะเกินแถวจะขึ้นบรรทัดใหม่ (ควรย้ายเข้า ModalForm::moreMenu) */ @media (max-width: 30rem) { .fi-modal-window.ms-modal-form .fi-modal-footer-actions { gap: .5rem; } .fi-modal-window.ms-modal-form .fi-modal-footer-actions > * { width: auto !important; flex: 1 1 auto; justify-content: center; } .fi-modal-window.ms-modal-form .fi-modal-footer-actions > * > .fi-btn, .fi-modal-window.ms-modal-form .fi-modal-footer-actions > .fi-dropdown .fi-dropdown-trigger > .fi-btn { width: 100%; } } @media (max-width: 639.98px) { .fi-modal-window-ctn:has(> .fi-modal-window.ms-modal-form) { padding: 0 !important; } .fi-modal-window.ms-modal-form { width: 100vw; max-width: 100vw !important; height: 100dvh; max-height: 100dvh !important; border-radius: 0 !important; } .fi-modal-window.ms-modal-form > .fi-modal-header, .fi-modal-window.ms-modal-form > .fi-modal-footer { border-radius: 0 !important; } /* แถบปุ่มไม่ติดที่บนมือถือ — เลื่อนไปพร้อมเนื้อหา (popup ที่มีหลายปุ่มกินจอ ~40% ที่ #3 เจอ) · หัว popup ยังติดที่ */ .fi-modal-window.ms-modal-form > .fi-modal-footer { position: static !important; } /* เนื้อหายืดเต็มที่ว่าง → ฟอร์มสั้น: แถบปุ่มอยู่ล่างสุดของจอ (ไม่ลอยกลางจอ) · ฟอร์มยาว: แถบปุ่มอยู่ท้ายเนื้อหา */ .fi-modal-window.ms-modal-form > .fi-modal-content { flex: 1 0 auto; } } /* ---------- 7. Dropdown (Select) ---------- * ทั้งระบบใช้ dropdown ของ Filament (AppServiceProvider: Select/SelectFilter ->native(false)) — ไม่ใช่