/* ═══════════════════════════════════════════════════════════════════ Flazza Quiz Themes - CORE ONLY (Themes extracted to /themes/*) ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ Flazza Quiz Themes — طبقة بصرية موحَّدة للّاعب والمضيف معاً ───────────────────────────────────────────────────────────────────── المبدأ: - الثيم يعيد تعريف متغيرات (CSS vars) فقط؛ لا تغيير للـ markup ولا للـ layout. - يُطبَّق عبر سمة data-quiz-theme على حتى يشمل html/body::before. - يبقى "classic" هو الافتراضي ومطابق للتصميم الحالي بلا تغيير بصري. - بقية الثيمات تُحدِّث لوحة الألوان والخلفية فقط — بنفس بنية المكوِّنات. نقاط التأثير المدعومة (من play.css + host-base.css): play: --bg, --bg2, --primary, --primary-light, --primary-glow, --accent, --accent-glow, --border-glow host: --bg, --bg-purple, --bg-gradient, --purple, --purple-light, --purple-glow, --pink, --cyan ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ FOUNDATION: body::before للمضيف (play.css يعرّفه بالفعل؛ host-base.css لا) ───────────────────────────────────────────────────────────────────── نُنشئ body::before فارغاً على المضيف حتى تستطيع الثيمات تطبيق خلفيات عليه. ═══════════════════════════════════════════════════════════════════ */ /* ── Play (body::before already exists in play.css) ── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat; } /* ── Host: إخفاء أشكال bg-shapes الافتراضية عند تفعيل ثيم غير classic ── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .bg-shapes { display: none !important; } /* ── Host: إخفاء شبكة الخطوط الافتراضية ── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .host-grid { display: none !important; } /* ─── Toast Notification — الإشعارات ─── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .toast-box, html[data-quiz-theme]:not([data-quiz-theme="classic"]) .sa-toast { background: var(--qzt-toast-bg) !important; border-color: var(--qzt-toast-border) !important; } /* ─── Play Card / Feedback — بطاقة اللاعب والتغذية الراجعة ─── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .play-card, html[data-quiz-theme]:not([data-quiz-theme="classic"]) #q-box { background: var(--qzt-theme-surface, rgba(20, 20, 40, 0.85)); border: 1px solid var(--qzt-theme-border, rgba(255, 255, 255, 0.08)); } html[data-quiz-theme]:not([data-quiz-theme="classic"]) .feedback.ok { border-color: var(--qzt-theme-accent, currentColor); } html[data-quiz-theme]:not([data-quiz-theme="classic"]) .fb-icon { color: var(--qzt-theme-accent, currentColor); } /* ─── Lobby Player Cards — بطاقات اللاعبين في اللوبي ─── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .player-card, html[data-quiz-theme]:not([data-quiz-theme="classic"]) .lobby-player-card { border: 1px solid var(--qzt-theme-border, rgba(255, 255, 255, 0.08)); } /* ─── Play Hero — بطاقة اللاعب الرئيسية ─── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .play-hero { border-color: var(--qzt-theme-border, rgba(255, 255, 255, 0.10)); } html[data-quiz-theme]:not([data-quiz-theme="classic"]) .play-hero__status { color: var(--qzt-theme-accent, #8b5cf6); } /* ─── Image Questions — لا نعرض أي نص حي فوق الصورة أثناء الجولة ─── */ html[data-quiz-theme] body[data-phase="QUESTION"] #sec-question .question-primary-col--stage:has(#q-visual:not([hidden])) .question-image-prompt, html[data-quiz-theme] body[data-phase="ANSWER_LOCKED"] #sec-question .question-primary-col--stage:has(#q-visual:not([hidden])) .question-image-prompt, html[data-quiz-theme] body[data-phase="QUESTION"] #sec-question .question-stage-hero:has(#q-visual:not([hidden])) .question-body, html[data-quiz-theme] body[data-phase="ANSWER_LOCKED"] #sec-question .question-stage-hero:has(#q-visual:not([hidden])) .question-body, html[data-quiz-theme] body[data-phase="QUESTION"] #sec-question .question-stage-hero:has(#q-visual:not([hidden])) #q-text.question-text, html[data-quiz-theme] body[data-phase="ANSWER_LOCKED"] #sec-question .question-stage-hero:has(#q-visual:not([hidden])) #q-text.question-text { display: none !important; } /* ─── Leaderboard — لوحة الصدارة ─── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .lb2-hero__title, html[data-quiz-theme]:not([data-quiz-theme="classic"]) .q-live-lb-title { color: var(--qzt-theme-accent, currentColor); } html[data-quiz-theme]:not([data-quiz-theme="classic"]) .lb2-champion-card__ribbon { background: var(--qzt-theme-surface, rgba(20, 20, 40, 0.85)); border-color: var(--qzt-theme-border); } /* ─── Lobby Meta Cells — خلايا معلومات اللوبي ─── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .arena-lobby__meta-cell { border-color: var(--qzt-theme-border, rgba(255, 255, 255, 0.08)); } html[data-quiz-theme]:not([data-quiz-theme="classic"]) .arena-lobby__meta-value { color: var(--qzt-theme-accent, #8b5cf6); } /* ─── QR Code wrap — إطار رمز QR ─── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .arena-lobby__qr-wrap { border-color: var(--qzt-theme-border, rgba(255, 255, 255, 0.10)); box-shadow: 0 0 30px rgba(var(--qzt-theme-accent-rgb, 139, 92, 246), 0.12); } /* ─── PIN Display — عرض الرقم ─── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .hx-pin, html[data-quiz-theme]:not([data-quiz-theme="classic"]) .lobby-join-hero__pin { color: var(--qzt-theme-accent, #fbbf24); } /* ─── Streak Banner — شريط السلسلة ─── */ html[data-quiz-theme]:not([data-quiz-theme="classic"]) .streak-banner { border-color: var(--qzt-theme-accent, #8b5cf6); color: var(--qzt-theme-accent, #8b5cf6); } /* (Host Background Override \u2014 \u0645\u064f\u0639\u0631\u0651\u0641 \u0644\u0643\u0644 \u062b\u064a\u0645 \u0641\u064a \u0627\u0644\u0623\u0639\u0644\u0649 \u0639\u0628\u0631 .host-bg) */ /* ─── تخفيف المؤثرات عند تعطيل "تأثير التتويج" (victory_video_enabled=false) ─── */ html[data-quiz-victory="off"] #winner-effect, html[data-quiz-victory="off"] .winner-effect, html[data-quiz-victory="off"] video.coronation-video, html[data-quiz-victory="off"] .coronation-video { display: none !important; } /* ─── إخفاء Confetti عندما يُوقفها منشئ المسابقة (confetti_enabled=false) ─── */ html[data-quiz-confetti="off"] .confetti-container, html[data-quiz-confetti="off"] #confetti-canvas, html[data-quiz-confetti="off"] canvas.confetti-canvas { display: none !important; } /* ─── إخفاء هوية اللوبي عند تعطيلها من الإعدادات (show_branding=false) ─── */ html[data-quiz-branding="off"] .quiz-cover-pill, html[data-quiz-branding="off"] .quiz-brand-logo, html[data-quiz-branding="off"] .lobby-cover-image, html[data-quiz-branding="off"] .play-lobby-brand, html[data-quiz-branding="off"] .brand { display: none !important; }