/* ═══════════════════════════════════════════════════════════════════════════ بطاقة «ثبّت التطبيق» ولافتة «التطبيق مثبّت على هذا الجهاز» --------------------------------------------------------------------------- ملفّ واحد يخدم التطبيقين، ويحرّكه js/pwa-install.js وحده. ⚠️ مستقلّ عن Tailwind عمداً — كملفّ error-panel.css. لوحة الإدارة تبني أصنافها بـ npm run tw:build فالصنف غير المبنيّ لا يُطبَّق شيئاً، ومنصّة الطلبات تعتمد Play CDN الذي لا يولّد أصنافاً غائبة عن الـ DOM وقت الإقلاع. فكلّ ما هنا أصناف خاصّة بادئتها spwa وقيمٌ صريحة. ثلاثة محاور مستقلّة يبدّلها JS، وكلّ محور نمطُه: data-state على البطاقة --> prompt | ios | done data-platform على النافذة --> desktop | android | ios lang على --> ar (الأصل) | en | hi ولذلك تتداخل العناصر ولا تتقاطع القواعد: مغلّف الحالة يحوي مغلّفات اللغة. الموضع: أسفل جهة النهاية (اليسار الفيزيائي في العربية). قِيس أن الجهة البادئة محجوزة للـ sidebar وزرّ «تسجيل الخروج» في لوحة الإدارة، والوسط لمؤشّر «جارٍ تجهيز الصفحة». ولافتة إعادة الاتصال في التطبيقين علويّة فلا تزاحم. ═══════════════════════════════════════════════════════════════════════════ */ :root { --spwa-z: 9000; /* تحت لافتة إعادة الاتصال (99990) وشارة BlazorDevTools (99999) */ --spwa-accent: #0950c3; /* = hsl(217 91% 40%) لون الأساس في التطبيقين */ --spwa-accent-dark: #073e99; --spwa-accent-soft: #e8f0fe; --spwa-surface: #ffffff; --spwa-ink: #111827; --spwa-ink-dim: #6b7280; --spwa-line: #e5e7eb; --spwa-muted: #f3f4f6; --spwa-shadow: 0 24px 60px -18px rgba(9, 80, 195, .32), 0 6px 18px -6px rgba(0, 0, 0, .12); } .dark { --spwa-accent: #3b82f6; --spwa-accent-dark: #2563eb; --spwa-accent-soft: rgba(59, 130, 246, .16); --spwa-surface: #0f172a; --spwa-ink: #f8fafc; --spwa-ink-dim: #94a3b8; --spwa-line: rgba(148, 163, 184, .22); --spwa-muted: rgba(148, 163, 184, .12); --spwa-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7), 0 6px 18px -6px rgba(0, 0, 0, .5); } /* ─────────────────── محور اللغة ─────────────────── كل نصّ موجود في الـ DOM بلغاته، وتُظهر CSS الموافق للغة . لا بناء نصوص من JS ولا انتظار خدمة الترجمة — و مضبوط قبل أوّل رسم في التطبيقين. العربية هي الأصل، فإن جاءت لغة لا نصّ لها بقيت العربية ظاهرة. */ .spwa-card [data-lang], .spwa-oia [data-lang], .spwa-modal [data-lang] { display: none; } .spwa-card [data-lang="ar"], .spwa-oia [data-lang="ar"], .spwa-modal [data-lang="ar"] { display: revert; } html[lang="en"] .spwa-card [data-lang="ar"], html[lang="en"] .spwa-oia [data-lang="ar"], html[lang="en"] .spwa-modal [data-lang="ar"], html[lang="hi"] .spwa-card [data-lang="ar"], html[lang="hi"] .spwa-oia [data-lang="ar"], html[lang="hi"] .spwa-modal [data-lang="ar"] { display: none; } html[lang="en"] .spwa-card [data-lang="en"], html[lang="en"] .spwa-oia [data-lang="en"], html[lang="en"] .spwa-modal [data-lang="en"], html[lang="hi"] .spwa-card [data-lang="hi"], html[lang="hi"] .spwa-oia [data-lang="hi"], html[lang="hi"] .spwa-modal [data-lang="hi"] { display: revert; } /* ═══════════════════════ بطاقة التثبيت ═══════════════════════ */ /* مخفيّة افتراضياً؛ JS يضيف is-open حين يثبت أن التطبيق غير مثبّت */ .spwa-card { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: var(--spwa-z); width: min(400px, calc(100vw - 48px)); box-sizing: border-box; display: none; overflow: hidden; border-radius: 16px; background: var(--spwa-surface); border: 1px solid var(--spwa-line); box-shadow: var(--spwa-shadow); color: var(--spwa-ink); font-family: inherit; text-align: start; } .spwa-card.is-open { display: block; animation: spwa-in .42s cubic-bezier(.2, .8, .25, 1) both; } .spwa-card.is-closing { animation: spwa-out .24s ease-in both; } /* خيط علوي بلون الأساس */ .spwa-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--spwa-accent), var(--spwa-accent-dark)); } /* على الجوال: لوح سفليّ بعرض الشاشة — البطاقة الضيّقة تُهدر العرض */ @media (max-width: 640px) { .spwa-card { inset-inline: 12px; bottom: 12px; width: auto; } } /* ⚠️ لا قاعدة ثابتة لتفادي الأشرطة السفلية هنا: js/pwa-install.js يقيس ما يحتلّ أسفل الشاشة فعلاً (شريط ملخّص السلّة، تنقّل الجوّال، شارة BlazorDevTools) ويكتب bottom على العنصر مباشرةً. قاعدة CSS بأصناف كل تطبيق تتعطّل صامتاً عند أوّل إعادة تسمية، والقياس لا يتعطّل. */ .spwa-card__row { display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 16px; } /* بلاطة الشعار: خلفية فاتحة بلون الأساس وحافّة ناعمة كأيقونة تطبيق */ .spwa-card__icon { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--spwa-accent-soft); box-shadow: inset 0 0 0 1px var(--spwa-line); overflow: hidden; } .spwa-card__icon img { width: 44px; height: 44px; display: block; border-radius: 10px; } .spwa-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .spwa-card__title { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; } .spwa-card__desc { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--spwa-ink-dim); } /* خطوات iOS: قائمة بخطوتين، الرقم داخل دائرة بلون الأساس */ .spwa-card__steps { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .spwa-card__steps li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--spwa-ink); } .spwa-card__steps i, .spwa-modal__steps i { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--spwa-accent); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; } /* أيقونة «مشاركة» في iOS داخل النصّ — مربّع وسهم */ .spwa-card__share { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-inline: 2px; color: var(--spwa-accent); } .spwa-card__actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; } /* ⚠️ min-height صريح: التطبيقان يفرضان 44px على كل button (هدف اللمس العام)، وبدون تثبيتها هنا يختلف ارتفاع الزرّ بين التطبيقين. */ .spwa-btn { appearance: none; border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; min-height: 40px; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; } .spwa-btn--primary { background: var(--spwa-accent); color: #fff; box-shadow: 0 6px 14px -6px rgba(9, 80, 195, .7); } .spwa-btn--primary:hover { background: var(--spwa-accent-dark); transform: translateY(-1px); } .spwa-btn--ghost { background: transparent; color: var(--spwa-ink-dim); } .spwa-btn--ghost:hover { background: var(--spwa-muted); color: var(--spwa-ink); } /* زرّ الإغلاق في زاوية النهاية */ .spwa-close { flex: none; margin-inline-start: auto; width: 28px; height: 28px; min-height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--spwa-ink-dim); font-size: 18px; line-height: 1; cursor: pointer; transition: background .18s ease, color .18s ease; } .spwa-close:hover { background: var(--spwa-muted); color: var(--spwa-ink); } /* ─── محور الحالة: JS يبدّل data-state، وCSS تُظهر المقطع الموافق ─── المقاطع الثلاثة (prompt / ios / done) موجودة دائماً في الـ DOM. */ .spwa-card [data-for] { display: none; } .spwa-card[data-state="prompt"] [data-for="prompt"], .spwa-card[data-state="ios"] [data-for="ios"], .spwa-card[data-state="done"] [data-for="done"] { display: revert; } /* حالة «تمّ التثبيت»: البلاطة تصير علامة صحّ */ .spwa-card[data-state="done"] .spwa-card__icon { background: var(--spwa-accent); } .spwa-card[data-state="done"] .spwa-card__icon img { display: none; } .spwa-card__check { display: none; width: 26px; height: 26px; color: #fff; } .spwa-card[data-state="done"] .spwa-card__check { display: block; animation: spwa-pop .4s cubic-bezier(.2, .8, .25, 1) both; } @keyframes spwa-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes spwa-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(14px); } } @keyframes spwa-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ═══════════ لافتة «التطبيق مثبّت على هذا الجهاز» ═══════════ في موضع بطاقة التثبيت نفسه: الاثنتان لا تظهران معاً أبداً (وصول beforeinstallprompt يعني غير مثبّت، وغيابُه مع العلامة يعني مثبّتاً). */ .spwa-oia { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: calc(var(--spwa-z) + 1); width: min(460px, calc(100vw - 48px)); box-sizing: border-box; display: none; overflow: hidden; border-radius: 14px; background: var(--spwa-surface); border: 1px solid var(--spwa-line); box-shadow: var(--spwa-shadow); color: var(--spwa-ink); text-align: start; } .spwa-oia.is-open { display: block; animation: spwa-oia-in .4s cubic-bezier(.2, .8, .25, 1) both; } .spwa-oia.is-closing { animation: spwa-oia-out .22s ease-in both; } .spwa-oia::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--spwa-accent), var(--spwa-accent-dark)); } @media (max-width: 640px) { .spwa-oia { inset-inline: 12px; bottom: 12px; width: auto; } } .spwa-oia__bar { display: flex; align-items: center; gap: 12px; padding: 12px 12px 10px; } .spwa-oia__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--spwa-accent-soft); box-shadow: inset 0 0 0 1px var(--spwa-line); overflow: hidden; } .spwa-oia__icon img { width: 32px; height: 32px; display: block; border-radius: 8px; } .spwa-oia__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .spwa-oia__title { font-size: 14px; font-weight: 700; line-height: 1.3; } .spwa-oia__desc { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--spwa-ink-dim); } .spwa-oia__btn { flex: none; appearance: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; min-height: 38px; padding: 9px 14px; border-radius: 999px; background: var(--spwa-accent); color: #fff; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(9, 80, 195, .7); transition: background .18s ease, transform .18s ease; } .spwa-oia__btn:hover { background: var(--spwa-accent-dark); transform: translateY(-1px); } @media (max-width: 480px) { .spwa-oia__desc { display: none; } } /* ─── نافذة «كيف تفتح التطبيق» ─── */ .spwa-modal { position: fixed; inset: 0; z-index: calc(var(--spwa-z) + 2); display: grid; place-items: center; padding: 20px; } .spwa-modal[hidden] { display: none; } /* خلفية حقيقية لا ::after: النقر عليها يغلق النافذة. بلا backdrop-filter — الطمس يعكس محتوى الصفحة مرآةً عند الحوافّ. */ .spwa-modal__back { position: absolute; inset: 0; background: rgba(9, 16, 30, .55); opacity: 0; transition: opacity .2s ease; } .spwa-modal.is-open .spwa-modal__back { opacity: 1; } .spwa-modal__card { position: relative; width: min(380px, 100%); box-sizing: border-box; padding: 26px 22px 20px; border-radius: 16px; background: var(--spwa-surface); color: var(--spwa-ink); box-shadow: var(--spwa-shadow); text-align: center; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .25, 1); } .spwa-modal.is-open .spwa-modal__card { opacity: 1; transform: none; } .spwa-modal__close { position: absolute; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px; min-height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--spwa-ink-dim); font-size: 20px; line-height: 1; cursor: pointer; } .spwa-modal__close:hover { background: var(--spwa-muted); color: var(--spwa-ink); } .spwa-modal__icon { width: 64px; height: 64px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 18px; background: var(--spwa-accent-soft); box-shadow: inset 0 0 0 1px var(--spwa-line); overflow: hidden; } .spwa-modal__icon img { width: 52px; height: 52px; display: block; border-radius: 12px; } .spwa-modal__title { margin: 0 0 14px; font-size: 17px; font-weight: 700; } /* محور المنصّة: JS يضع data-platform على الجذر، وCSS تُظهر الموافق وحده */ .spwa-modal [data-platform] { display: none; } .spwa-modal[data-platform="desktop"] [data-platform="desktop"], .spwa-modal[data-platform="android"] [data-platform="android"], .spwa-modal[data-platform="ios"] [data-platform="ios"] { display: revert; } .spwa-modal__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; text-align: start; } .spwa-modal__steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--spwa-muted); font-size: 13px; line-height: 1.5; } /* تنبيه الإذن: المتصفّح يسأل «فتح في التطبيق؟» أوّل مرّة */ .spwa-modal__note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(242, 167, 59, .12); border: 1px solid rgba(242, 167, 59, .35); font-size: 12px; line-height: 1.5; color: #8a5a12; text-align: start; } .dark .spwa-modal__note { color: #f2c98b; } .spwa-modal__actions { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; } .spwa-modal__actions .spwa-btn { width: 100%; padding-block: 12px; font-size: 14px; min-height: 44px; } @keyframes spwa-oia-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes spwa-oia-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } } @media (prefers-reduced-motion: reduce) { .spwa-card.is-open, .spwa-card.is-closing, .spwa-card__check, .spwa-oia.is-open, .spwa-oia.is-closing { animation: none; } .spwa-modal__back, .spwa-modal__card { transition: none; } }