/* =========================================================== پرنیان | Parniyan — استایل رابط کاربری (فرانت‌اند) نسخه ۱.۱.۰ — طراحی شیشه‌ای نسل جدید + جداسازی کامل از قالب ----------------------------------------------------------- ساختار این فایل: ۱) متغیرهای طراحی ۲) جداسازی کامل از استایل قالب (Theme Isolation) ۳) دکمه شناور مهمان ۴) دکمه شورت‌کد ۵) پوشش + کارت شیشه‌ای ۶) گام‌ها، عنوان، فیلدها ۷) دکمه‌ها (اصلی/ثانویه) + درخشش + لودینگ ۸) جعبه‌های کد یکبار مصرف ۹) لینک‌ها، خطا، بازگشت، ارسال دوباره ۱۰) گام موفقیت ۱۱) دکمه و منوی کاربر واردشده ۱۲) ریسپانسیو / تم تیره / کاهش انیمیشن =========================================================== */ /* ----------------------------------------------------------- ۱) متغیرهای طراحی ----------------------------------------------------------- */ :root { --parniyan-accent: #6d5bd0; --parniyan-accent-2: #9d7ee8; --parniyan-accent-rgb: 109, 91, 208; --parniyan-accent-2-rgb: 157, 126, 232; --parniyan-radius: 22px; --parniyan-blur: 18px; --parniyan-glass-tint-rgb: 255, 255, 255; --parniyan-glass-bg: rgba(255, 255, 255, 0.14); --parniyan-glass-border: rgba(255, 255, 255, 0.35); --parniyan-text: #2c2440; --parniyan-text-rgb: 44, 36, 64; --parniyan-text-soft: #6b6480; --parniyan-overlay-rgb: 15, 10, 30; --parniyan-btn-text: #ffffff; --parniyan-success: #1a8f4a; --parniyan-success-rgb: 26, 143, 74; --parniyan-error: #d64545; --parniyan-error-rgb: 214, 69, 69; /* فونت پرنیان. مقدار واقعی از پنل مدیریت و به‌صورت استایل inline تزریق می‌شود (Parniyan_Settings::font_css): یا نام فونت خود سایت، یا وزیرمتن گوگل، یا فهرست فونت‌های رایج فارسی. این مقدار فقط پشتیبان است. */ --parniyan-font: 'Vazirmatn', 'IRANSansX', 'IRANSans', Tahoma, Arial, sans-serif; --parniyan-ease: cubic-bezier(.22, 1, .36, 1); --parniyan-z-fab: 999990; --parniyan-z-overlay: 2147483000; /* جای دکمه شناور — مقادیر واقعی از پنل مدیریت و به‌صورت استایل inline تزریق می‌شوند (Parniyan_Settings::fab_css). این‌ها فقط مقدار پشتیبان‌اند تا اگر استایل inline به هر دلیلی نرسید، دکمه در گوشه‌ی پایین راست بماند. */ --parniyan-fab-top: auto; --parniyan-fab-right: 24px; --parniyan-fab-bottom: 24px; --parniyan-fab-left: auto; --parniyan-menu-top: auto; --parniyan-menu-right: 24px; --parniyan-menu-bottom: 88px; --parniyan-menu-left: auto; --parniyan-menu-origin: bottom right; --parniyan-menu-shift: 10px; --parniyan-menu-maxw: calc(100vw - 32px); --parniyan-fab-hover-shift: -3px; --parniyan-user-fab-bg: rgba(var(--parniyan-glass-tint-rgb), 0.95); --parniyan-user-fab-text: var(--parniyan-text); --parniyan-shadow-accent: 0 14px 30px -10px rgba(var(--parniyan-accent-rgb), .85); } /* ----------------------------------------------------------- ۲) جداسازی کامل از استایل قالب ----------------------------------------------------------- منطق کار: هر عنصری که داخل رابط پرنیان است، ابتدا «خنثی» می‌شود تا هیچ استایلی از قالب (Dr Plus یا هر قالب دیگر) به آن نفوذ نکند — فونت، فاصله حروف، text-transform، text-shadow، لیست‌استایل، شناوری و… . سپس در همین فایل، طراحی واقعی پرنیان روی آن ساخته می‌شود. به همین دلیل همه‌ی خصوصیات ظاهری دکمه‌ها/اینپوت‌ها با !important نوشته شده‌اند تا استایل قالب در هیچ شرایطی (حتی با سلکتورهای پرجزئیات) غالب نشود. ----------------------------------------------------------- */ /* عنصر ریشه‌ی رابط پرنیان همیشه در جهت RTL و با فونت خودش رندر می‌شود. */ #parniyan-overlay, #parniyan-user, #parniyan-fab, .parniyan-trigger { direction: rtl !important; text-align: start !important; font-family: var(--parniyan-font) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* خنثی‌سازی خصوصیات ارث‌بری که قالب‌ها معمولاً روی همه‌چیز اعمال می‌کنند. */ #parniyan-overlay, #parniyan-overlay *, #parniyan-overlay *::before, #parniyan-overlay *::after, #parniyan-user, #parniyan-user *, #parniyan-user *::before, #parniyan-user *::after, #parniyan-fab, #parniyan-fab *, #parniyan-fab *::before, #parniyan-fab *::after, .parniyan-trigger, .parniyan-trigger *, .parniyan-trigger *::before, .parniyan-trigger *::after { box-sizing: border-box !important; font-family: var(--parniyan-font) !important; letter-spacing: normal !important; word-spacing: normal !important; text-transform: none !important; text-shadow: none !important; text-indent: 0 !important; font-style: normal !important; font-variant: normal !important; font-feature-settings: normal !important; text-decoration: none !important; list-style: none !important; float: none !important; hyphens: none !important; -webkit-hyphens: none !important; -webkit-tap-highlight-color: transparent !important; text-wrap: initial; } /* آیکون‌ها: قالب‌های وردپرسی خیلی وقت‌ها svg/img را سراسری محدود می‌کنند (مثل svg{max-width:100%;height:auto}) و همین باعث می‌شود آیکون‌های ما کوچک یا کشیده شوند. اینجا اندازه‌ها را قطعی می‌کنیم. */ #parniyan-overlay svg, #parniyan-overlay img, #parniyan-user svg, #parniyan-user img, #parniyan-fab svg, .parniyan-trigger svg { display: block !important; max-width: none !important; max-height: none !important; min-width: 0 !important; flex: 0 0 auto !important; fill: none !important; stroke: currentColor !important; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } /* دکمه‌ها، اینپوت‌ها و لینک‌های داخل رابط: حذف کامل ظاهر بومی مرورگر و قالب. */ #parniyan-overlay button, #parniyan-overlay input, #parniyan-user button, #parniyan-user a, #parniyan-fab, .parniyan-trigger { -webkit-appearance: none !important; appearance: none !important; background-color: transparent; background-image: none; border: 0 none; border-radius: 0; box-shadow: none; color: inherit; outline: 0; margin: 0; padding: 0; min-width: 0; min-height: 0; width: auto; height: auto; text-align: inherit; text-decoration: none; vertical-align: baseline; cursor: pointer; font-synthesis: none; } /* ویژگی HTML «hidden» همیشه باید واقعاً پنهان کند، حتی وقتی خودمان برای عنصر display تعیین کرده‌ایم (وگرنه در بعضی مرورگرها دکمه «دریافت کد» و «ورود» هم‌زمان روی هم دیده می‌شوند). */ #parniyan-overlay [hidden], #parniyan-user [hidden] { display: none !important; } /* قفل اسکرول صفحه هنگام باز بودن پاپ‌آپ — با کلاس، نه استایل inline، تا قالب نتواند با overflow خودش آن را بی‌اثر کند. */ html.parniyan-no-scroll, body.parniyan-no-scroll { overflow: hidden !important; touch-action: none !important; } /* ----------------------------------------------------------- ۳) دکمه شناور مهمان ----------------------------------------------------------- جای دکمه از پنل مدیریت می‌آید و با متغیرهای CSS اعمال می‌شود (--parniyan-fab-top / right / bottom / left). همیشه «یک لبه افقی و یک لبه عمودی» مقدار دارند و دو لبه دیگر auto می‌مانند. سه عنصر با همین متغیرها جابه‌جا می‌شوند تا هم‌تراز بمانند: دکمه مهمان (#parniyan-fab)، پیل کاربر واردشده (#parniyan-user) و منوی کشویی (#parniyan-user-menu). ----------------------------------------------------------- */ #parniyan-fab { position: fixed !important; inset: auto !important; top: var(--parniyan-fab-top, auto) !important; right: var(--parniyan-fab-right, 24px) !important; bottom: var(--parniyan-fab-bottom, 24px) !important; left: var(--parniyan-fab-left, auto) !important; z-index: var(--parniyan-z-fab) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; padding: 13px 22px !important; border: 0 !important; border-radius: 999px !important; background-image: linear-gradient(115deg, var(--parniyan-accent) 0%, var(--parniyan-accent-2) 45%, var(--parniyan-accent) 100%) !important; background-size: 220% 100% !important; background-position: 0% 50% !important; color: var(--parniyan-btn-text) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; box-shadow: 0 16px 34px -12px rgba(var(--parniyan-accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 8px rgba(0, 0, 0, .14) !important; transition: transform .25s var(--parniyan-ease), box-shadow .25s ease, background-position .8s var(--parniyan-ease) !important; } #parniyan-fab:hover { /* جهت حرکت با توجه به لبه‌ی عمودی انتخاب‌شده تعیین می‌شود: دکمه‌ای که به بالای صفحه چسبیده، هنگام هاور به پایین می‌رود (به سمت داخل صفحه). */ transform: translateY(var(--parniyan-fab-hover-shift, -3px)) scale(1.02) !important; background-position: 100% 50% !important; box-shadow: 0 22px 42px -12px rgba(var(--parniyan-accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 8px rgba(0, 0, 0, .14) !important; } #parniyan-fab:active { transform: translateY(calc(var(--parniyan-fab-hover-shift, -3px) / 3)) scale(.99) !important; } #parniyan-fab svg { width: 20px !important; height: 20px !important; stroke-width: 1.9 !important; transition: transform .35s var(--parniyan-ease) !important; } #parniyan-fab:hover svg { transform: translateX(-3px) !important; } #parniyan-fab .parniyan-fab__label { position: relative !important; z-index: 1 !important; } /* درخشش نرم ممتد روی دکمه شناور (با تنظیمات قابل خاموش‌کردن). */ #parniyan-fab.parniyan-anim { animation: parniyanShimmer 7s linear infinite !important; } @keyframes parniyanShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* ----------------------------------------------------------- ۴) دکمه شورت‌کد [parniyan_button] ----------------------------------------------------------- */ .parniyan-trigger { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; padding: 13px 26px !important; border: 0 !important; border-radius: 999px !important; background-image: linear-gradient(115deg, var(--parniyan-accent) 0%, var(--parniyan-accent-2) 50%, var(--parniyan-accent) 100%) !important; background-size: 220% 100% !important; background-position: 0% 50% !important; color: var(--parniyan-btn-text) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-decoration: none !important; box-shadow: 0 12px 26px -10px rgba(var(--parniyan-accent-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .4) !important; transition: transform .25s var(--parniyan-ease), box-shadow .25s ease, background-position .7s var(--parniyan-ease) !important; } .parniyan-trigger:hover { transform: translateY(-2px) !important; background-position: 100% 50% !important; color: var(--parniyan-btn-text) !important; box-shadow: 0 18px 34px -10px rgba(var(--parniyan-accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, .45) !important; } .parniyan-trigger:active { transform: translateY(0) !important; } .parniyan-trigger > svg { width: 18px !important; height: 18px !important; stroke-width: 1.9 !important; } /* حالت شیشه‌ای/دورخط برای جاهایی که دکمه روی پس‌زمینه رنگی می‌نشیند. */ .parniyan-trigger--ghost { background-image: none !important; background-color: transparent !important; color: var(--parniyan-accent) !important; box-shadow: inset 0 0 0 1.6px var(--parniyan-accent) !important; } .parniyan-trigger--ghost:hover { background-image: none !important; background-color: var(--parniyan-accent) !important; color: var(--parniyan-btn-text) !important; } /* دکمه شورت‌کد در حالت «کاربر واردشده» */ .parniyan-trigger--user { background-image: none !important; background-color: var(--parniyan-user-fab-bg) !important; color: var(--parniyan-user-fab-text) !important; box-shadow: 0 12px 28px -14px rgba(20, 10, 50, .45), inset 0 0 0 1.6px rgba(var(--parniyan-accent-rgb), .55) !important; padding-block: 8px !important; padding-inline-start: 10px !important; padding-inline-end: 18px !important; } .parniyan-trigger--user:hover { background-color: var(--parniyan-user-fab-bg) !important; color: var(--parniyan-user-fab-text) !important; box-shadow: 0 16px 32px -14px rgba(var(--parniyan-accent-rgb), .7), inset 0 0 0 1.6px var(--parniyan-accent) !important; } /* ----------------------------------------------------------- ۵) پوشش + کارت شیشه‌ای ----------------------------------------------------------- */ #parniyan-overlay { position: fixed !important; inset: 0 !important; z-index: var(--parniyan-z-overlay) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; background: radial-gradient(circle at 28% 18%, rgba(var(--parniyan-accent-rgb), .38), rgba(var(--parniyan-overlay-rgb), .62) 62%) !important; backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important; opacity: 0 !important; visibility: hidden !important; transition: opacity .3s ease, visibility .3s ease !important; } #parniyan-overlay.is-open { opacity: 1 !important; visibility: visible !important; } #parniyan-overlay.parniyan-overlay--light { background: rgba(var(--parniyan-overlay-rgb), .28) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } #parniyan-overlay .parniyan-card { position: relative !important; width: 100% !important; max-width: 432px !important; max-height: calc(100vh - 28px) !important; /* overflow:hidden (نه auto) — کارت هیچ‌وقت اسکرول عمودی نمی‌گیرد. هاله‌های تزئینی که از لبه‌ها بیرون می‌زنند فقط بریده می‌شوند و فضای اسکرول نمی‌سازند. */ overflow: hidden !important; padding: 40px 34px 34px !important; border-radius: var(--parniyan-radius) !important; background-color: var(--parniyan-glass-bg) !important; background-image: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 55%) !important; border: 1px solid var(--parniyan-glass-border) !important; backdrop-filter: blur(var(--parniyan-blur)) saturate(170%) !important; -webkit-backdrop-filter: blur(var(--parniyan-blur)) saturate(170%) !important; box-shadow: 0 40px 90px -24px rgba(16, 8, 42, .65), 0 0 0 1px rgba(255, 255, 255, .07) inset, inset 0 1px 1px rgba(255, 255, 255, .45) !important; color: var(--parniyan-text) !important; direction: rtl !important; text-align: start !important; transform: translateY(26px) scale(.96) !important; opacity: 0 !important; transition: transform .42s var(--parniyan-ease), opacity .35s ease !important; } #parniyan-overlay.is-open .parniyan-card { transform: translateY(0) scale(1) !important; opacity: 1 !important; } @supports (height: 100dvh) { #parniyan-overlay .parniyan-card { max-height: calc(100dvh - 28px) !important; } } /* هاله‌های رنگی پشت محتوا (aurora) */ #parniyan-overlay .parniyan-glow { position: absolute !important; top: -70px !important; inset-inline-start: -50px !important; width: 210px !important; height: 210px !important; background: radial-gradient(circle, rgba(var(--parniyan-accent-2-rgb), .6), transparent 70%) !important; filter: blur(12px) !important; pointer-events: none !important; z-index: 0 !important; } #parniyan-overlay .parniyan-card::after { content: '' !important; position: absolute !important; bottom: -90px !important; inset-inline-end: -60px !important; width: 220px !important; height: 220px !important; background: radial-gradient(circle, rgba(var(--parniyan-accent-rgb), .5), transparent 70%) !important; filter: blur(14px) !important; pointer-events: none !important; z-index: 0 !important; } #parniyan-overlay .parniyan-body { position: relative !important; z-index: 1 !important; } #parniyan-overlay .parniyan-close { position: absolute !important; top: 15px !important; inset-inline-end: 16px !important; z-index: 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border: 0 !important; border-radius: 50% !important; background-color: rgba(255, 255, 255, .28) !important; background-image: none !important; color: var(--parniyan-text) !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35) !important; transition: background-color .2s ease, transform .25s var(--parniyan-ease) !important; } #parniyan-overlay .parniyan-close:hover { background-color: rgba(255, 255, 255, .5) !important; transform: rotate(90deg) !important; } /* ----------------------------------------------------------- ۶) گام‌ها، عنوان و فیلدها ----------------------------------------------------------- */ #parniyan-overlay .parniyan-step { display: none !important; } #parniyan-overlay .parniyan-step.is-active { display: block !important; animation: parniyanFadeIn .4s var(--parniyan-ease) !important; } @keyframes parniyanFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #parniyan-overlay .parniyan-title { margin: 0 0 6px !important; padding: 0 !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1.45 !important; color: var(--parniyan-text) !important; text-align: start !important; } /* نوار گرادیانی کوچک زیر عنوان، به‌جای خط دور کل عنوان. */ #parniyan-overlay .parniyan-title::after { content: '' !important; display: block !important; width: 36px !important; height: 3px !important; margin: 11px 0 0 !important; border-radius: 99px !important; background-image: linear-gradient(90deg, var(--parniyan-accent), var(--parniyan-accent-2)) !important; } #parniyan-overlay .parniyan-sub { margin: 0 0 26px !important; padding: 0 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.9 !important; color: var(--parniyan-text-soft) !important; text-align: start !important; } #parniyan-overlay .parniyan-sub strong { font-weight: 700 !important; color: var(--parniyan-text) !important; direction: ltr !important; display: inline-block !important; } /* پیام راهنما (مثلاً «برای افزودن به سبد خرید ابتدا وارد شوید»). */ #parniyan-overlay .parniyan-notice { margin: 0 0 16px !important; padding: 11px 14px !important; border: 1px solid rgba(var(--parniyan-accent-rgb), .3) !important; border-radius: 12px !important; background-color: rgba(var(--parniyan-accent-rgb), .12) !important; background-image: none !important; color: var(--parniyan-accent) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.85 !important; text-align: start !important; } /* پیام موفقیت (مثل «کد تایید ارسال شد») — سبز، نه قرمز. */ #parniyan-overlay .parniyan-notice--success { border-color: rgba(var(--parniyan-success-rgb), .34) !important; background-color: rgba(var(--parniyan-success-rgb), .12) !important; color: var(--parniyan-success) !important; } #parniyan-overlay .parniyan-notice--success::before { content: '' !important; display: inline-block !important; width: 14px !important; height: 14px !important; margin-inline-end: 7px !important; vertical-align: -2px !important; background-color: currentColor !important; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important; } /* لینک انصراف — فقط در حالت «اجباری» (سبد خرید/تسویه حساب) نمایش داده می‌شود تا کاربر هیچ‌وقت واقعاً گیر نکند. */ #parniyan-overlay .parniyan-dismiss { display: block !important; width: 100% !important; margin: 18px 0 0 !important; padding: 6px 0 !important; border: 0 !important; background: none !important; color: var(--parniyan-text-soft) !important; font-size: 12.5px !important; font-weight: 500 !important; text-align: center !important; text-decoration: underline !important; cursor: pointer !important; } #parniyan-overlay .parniyan-dismiss:hover { color: var(--parniyan-accent) !important; } #parniyan-overlay .parniyan-field { position: relative !important; margin: 0 0 18px !important; } #parniyan-overlay .parniyan-input { display: block !important; width: 100% !important; padding: 15px 16px !important; border: 1px solid rgba(var(--parniyan-text-rgb), .16) !important; border-radius: 15px !important; background-color: rgba(var(--parniyan-glass-tint-rgb), .62) !important; background-image: none !important; color: var(--parniyan-text) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.5 !important; box-shadow: inset 0 1px 2px rgba(20, 10, 50, .05) !important; transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease !important; } #parniyan-overlay .parniyan-input::placeholder { color: rgba(var(--parniyan-text-rgb), .42) !important; opacity: 1 !important; } #parniyan-overlay .parniyan-input:focus { border-color: var(--parniyan-accent) !important; background-color: rgba(var(--parniyan-glass-tint-rgb), .82) !important; box-shadow: 0 0 0 4px rgba(var(--parniyan-accent-rgb), .18), inset 0 1px 2px rgba(20, 10, 50, .04) !important; } /* آیکون داخل فیلد */ #parniyan-overlay .parniyan-field--icon .parniyan-input { padding-inline-start: 46px !important; } #parniyan-overlay .parniyan-field--icon::before { content: '' !important; position: absolute !important; inset-inline-start: 17px !important; inset-block-start: 50% !important; width: 18px !important; height: 18px !important; margin-block-start: -9px !important; background-color: var(--parniyan-text-soft) !important; background-image: none !important; opacity: .8 !important; pointer-events: none !important; transition: background-color .2s ease !important; -webkit-mask: var(--parniyan-icon) center / contain no-repeat !important; mask: var(--parniyan-icon) center / contain no-repeat !important; } #parniyan-overlay .parniyan-field--icon:focus-within::before { background-color: var(--parniyan-accent) !important; opacity: 1 !important; } #parniyan-overlay .parniyan-field--icon[data-icon="id"] { --parniyan-icon: url("data:image/svg+xml;utf8,"); } #parniyan-overlay .parniyan-field--icon[data-icon="lock"] { --parniyan-icon: url("data:image/svg+xml;utf8,"); } #parniyan-overlay .parniyan-field--icon[data-icon="user"] { --parniyan-icon: url("data:image/svg+xml;utf8,"); } /* ----------------------------------------------------------- ۷) دکمه‌ها ----------------------------------------------------------- */ #parniyan-overlay .parniyan-btn { position: relative !important; display: block !important; width: 100% !important; padding: 16px 18px !important; border: 0 !important; border-radius: 15px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-align: center !important; color: var(--parniyan-btn-text) !important; overflow: hidden !important; isolation: isolate !important; box-shadow: none !important; transition: transform .22s var(--parniyan-ease), box-shadow .25s ease, background-position .7s var(--parniyan-ease), filter .2s ease !important; } /* درخشش (shine) که هنگام هاور از روی دکمه عبور می‌کند. */ #parniyan-overlay .parniyan-btn::after { content: '' !important; position: absolute !important; top: -70% !important; bottom: -70% !important; width: 40% !important; inset-inline-start: -70% !important; background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent) !important; transform: skewX(-18deg) !important; transition: inset-inline-start .7s var(--parniyan-ease) !important; pointer-events: none !important; } #parniyan-overlay .parniyan-btn:hover::after { inset-inline-start: 135% !important; } #parniyan-overlay .parniyan-btn-primary { background-color: var(--parniyan-accent) !important; background-image: linear-gradient(115deg, var(--parniyan-accent) 0%, var(--parniyan-accent-2) 46%, var(--parniyan-accent) 100%) !important; background-size: 220% 100% !important; background-position: 0% 50% !important; color: var(--parniyan-btn-text) !important; box-shadow: 0 14px 30px -10px rgba(var(--parniyan-accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 7px rgba(0, 0, 0, .13) !important; } #parniyan-overlay .parniyan-btn-primary:hover { transform: translateY(-2px) !important; background-position: 100% 50% !important; box-shadow: 0 20px 38px -10px rgba(var(--parniyan-accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 7px rgba(0, 0, 0, .13) !important; } #parniyan-overlay .parniyan-btn-primary:active { transform: translateY(0) scale(.992) !important; filter: brightness(.97) !important; } #parniyan-overlay .parniyan-btn:disabled, #parniyan-overlay .parniyan-btn.is-loading { opacity: .72 !important; cursor: not-allowed !important; transform: none !important; filter: none !important; } /* حالت در حال ارسال: متن محو می‌شود و اسپینر جای آن می‌آید. */ #parniyan-overlay .parniyan-btn.is-loading { color: transparent !important; } #parniyan-overlay .parniyan-btn.is-loading::before { content: '' !important; position: absolute !important; inset-block-start: 50% !important; inset-inline-start: 50% !important; width: 19px !important; height: 19px !important; border: 2px solid rgba(255, 255, 255, .4) !important; border-top-color: var(--parniyan-btn-text) !important; border-radius: 50% !important; transform: translate(-50%, -50%) !important; animation: parniyanSpin .7s linear infinite !important; } @keyframes parniyanSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* موج کلیک (ripple) که با جاوااسکریپت تزریق می‌شود. */ .parniyan-ripple { position: absolute !important; border-radius: 50% !important; background-color: rgba(255, 255, 255, .45) !important; background-image: none !important; transform: scale(0) !important; animation: parniyanRipple .62s ease-out forwards !important; pointer-events: none !important; z-index: 0 !important; } @keyframes parniyanRipple { to { transform: scale(2.6); opacity: 0; } } /* لرزش کارت هنگام خطا */ .parniyan-shake { animation: parniyanShake .42s cubic-bezier(.36, .07, .19, .97) !important; } @keyframes parniyanShake { 10%, 90% { transform: translateX(-2px) scale(1); } 20%, 80% { transform: translateX(4px) scale(1); } 30%, 50%, 70% { transform: translateX(-7px) scale(1); } 40%, 60% { transform: translateX(7px) scale(1); } } /* ----------------------------------------------------------- ۸) جعبه‌های کد یکبار مصرف ----------------------------------------------------------- */ #parniyan-overlay .parniyan-otp-boxes { display: flex !important; gap: 9px !important; justify-content: center !important; direction: ltr !important; margin: 6px 0 18px !important; } #parniyan-overlay .parniyan-otp-boxes input { display: block !important; width: 48px !important; height: 58px !important; padding: 0 !important; text-align: center !important; font-size: 23px !important; font-weight: 700 !important; line-height: 1 !important; border: 1px solid rgba(var(--parniyan-text-rgb), .16) !important; border-radius: 14px !important; background-color: rgba(var(--parniyan-glass-tint-rgb), .62) !important; background-image: none !important; color: var(--parniyan-text) !important; box-shadow: inset 0 1px 2px rgba(20, 10, 50, .05) !important; transition: border-color .2s ease, box-shadow .25s ease, transform .2s var(--parniyan-ease), background-color .2s ease !important; } #parniyan-overlay .parniyan-otp-boxes input:focus { border-color: var(--parniyan-accent) !important; background-color: rgba(var(--parniyan-glass-tint-rgb), .85) !important; transform: translateY(-3px) !important; box-shadow: 0 0 0 4px rgba(var(--parniyan-accent-rgb), .18), 0 10px 18px -10px rgba(var(--parniyan-accent-rgb), .8) !important; } #parniyan-overlay .parniyan-otp-boxes input.is-filled { border-color: rgba(var(--parniyan-accent-rgb), .55) !important; background-color: rgba(var(--parniyan-accent-rgb), .1) !important; } #parniyan-overlay .parniyan-otp-boxes.is-error input { border-color: var(--parniyan-error) !important; background-color: rgba(var(--parniyan-error-rgb), .1) !important; animation: parniyanShake .42s cubic-bezier(.36, .07, .19, .97) !important; } /* ----------------------------------------------------------- ۹) لینک ثانویه، بازگشت، خطا، ارسال دوباره ----------------------------------------------------------- */ #parniyan-overlay .parniyan-alt-link { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; margin: 24px 0 0 !important; padding: 6px 0 !important; border: 0 !important; background: none !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.6 !important; color: var(--parniyan-text-soft) !important; text-decoration: none !important; cursor: pointer !important; transition: color .2s ease !important; } #parniyan-overlay .parniyan-alt-link::before { content: '' !important; width: 15px !important; height: 15px !important; flex: 0 0 auto !important; background-color: currentColor !important; opacity: .6 !important; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important; transition: opacity .2s ease !important; } #parniyan-overlay .parniyan-alt-link:hover { color: var(--parniyan-accent) !important; } #parniyan-overlay .parniyan-alt-link:hover::before { opacity: 1 !important; } /* دکمه نجات: وقتی کد ساخته شده ولی ارسال پیامک خطا داده، به کاربر اجازه می‌دهد همان کدی که به دستش رسیده را دستی وارد کند. */ #parniyan-overlay .parniyan-rescue { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; margin: 14px 0 0 !important; padding: 12px 14px !important; border: 1px dashed rgba(var(--parniyan-accent-rgb), .6) !important; border-radius: 13px !important; background-color: rgba(var(--parniyan-accent-rgb), .08) !important; background-image: none !important; color: var(--parniyan-accent) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; cursor: pointer !important; transition: background-color .2s ease, border-color .2s ease !important; } #parniyan-overlay .parniyan-rescue:hover { background-color: rgba(var(--parniyan-accent-rgb), .17) !important; border-color: var(--parniyan-accent) !important; } #parniyan-overlay .parniyan-rescue svg { width: 17px !important; height: 17px !important; stroke-width: 1.9 !important; } #parniyan-overlay .parniyan-back { display: inline-flex !important; align-items: center !important; gap: 5px !important; margin: 0 0 22px !important; padding: 5px 10px 5px 4px !important; border: 0 !important; border-radius: 99px !important; background: none !important; color: var(--parniyan-text-soft) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: color .2s ease, background-color .2s ease !important; } #parniyan-overlay .parniyan-back:hover { color: var(--parniyan-accent) !important; background-color: rgba(var(--parniyan-accent-rgb), .1) !important; } #parniyan-overlay .parniyan-back svg { width: 16px !important; height: 16px !important; transform: scaleX(-1) !important; } #parniyan-overlay .parniyan-error { min-height: 18px !important; margin: -6px 0 18px !important; padding: 0 2px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.6 !important; color: var(--parniyan-error) !important; text-align: start !important; } #parniyan-overlay .parniyan-error:not(:empty)::before { content: '!' !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 15px !important; height: 15px !important; margin-inline-end: 6px !important; border-radius: 50% !important; background-color: var(--parniyan-error) !important; color: var(--parniyan-btn-text) !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; vertical-align: -2px !important; } #parniyan-overlay .parniyan-resend { display: block !important; width: 100% !important; margin: 22px 0 0 !important; padding: 8px 0 !important; border: 0 !important; background: none !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.6 !important; color: var(--parniyan-accent) !important; text-align: center !important; cursor: pointer !important; transition: opacity .2s ease !important; } #parniyan-overlay .parniyan-resend:hover { text-decoration: underline !important; } #parniyan-overlay .parniyan-resend:disabled { color: var(--parniyan-text-soft) !important; cursor: not-allowed !important; text-decoration: none !important; opacity: .8 !important; } /* ----------------------------------------------------------- ۱۰) گام موفقیت ----------------------------------------------------------- */ #parniyan-overlay .parniyan-step[data-step="success"] { text-align: center !important; } #parniyan-overlay .parniyan-step[data-step="success"] .parniyan-title::after { margin-inline: auto !important; } #parniyan-overlay .parniyan-step[data-step="success"] .parniyan-title { text-align: center !important; } #parniyan-overlay .parniyan-step[data-step="success"] .parniyan-sub { text-align: center !important; } #parniyan-overlay .parniyan-success-icon { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 72px !important; height: 72px !important; margin: 6px auto 20px !important; border-radius: 50% !important; background-image: linear-gradient(135deg, var(--parniyan-accent), var(--parniyan-accent-2)) !important; color: var(--parniyan-btn-text) !important; box-shadow: 0 16px 34px -12px rgba(var(--parniyan-accent-rgb), .95) !important; animation: parniyanPop .5s var(--parniyan-ease) !important; } #parniyan-overlay .parniyan-success-icon::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 50% !important; border: 2px solid rgba(var(--parniyan-accent-rgb), .55) !important; animation: parniyanRing 1.8s ease-out infinite !important; } #parniyan-overlay .parniyan-success-icon svg { width: 34px !important; height: 34px !important; stroke-width: 2.6 !important; } #parniyan-overlay .parniyan-success-icon svg path { stroke-dasharray: 34 !important; stroke-dashoffset: 34 !important; animation: parniyanDraw .55s .18s var(--parniyan-ease) forwards !important; } @keyframes parniyanDraw { to { stroke-dashoffset: 0; } } @keyframes parniyanPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes parniyanRing { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } } /* ----------------------------------------------------------- ۱۱) دکمه و منوی کاربر واردشده ----------------------------------------------------------- */ #parniyan-user { position: fixed !important; inset: auto !important; top: var(--parniyan-fab-top, auto) !important; right: var(--parniyan-fab-right, 24px) !important; bottom: var(--parniyan-fab-bottom, 24px) !important; left: var(--parniyan-fab-left, auto) !important; z-index: var(--parniyan-z-fab) !important; } /* پیل شیشه‌ای با حاشیه گرادیانی (تکنیک دو لایه background) */ #parniyan-user .parniyan-user-fab { display: inline-flex !important; align-items: stretch !important; border: 1.6px solid transparent !important; border-radius: 999px !important; background-image: linear-gradient(var(--parniyan-user-fab-bg), var(--parniyan-user-fab-bg)), linear-gradient(120deg, var(--parniyan-accent), var(--parniyan-accent-2)) !important; background-origin: border-box !important; background-clip: padding-box, border-box !important; backdrop-filter: blur(12px) saturate(160%) !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; box-shadow: 0 16px 38px -16px rgba(20, 10, 50, .55), 0 0 0 1px rgba(255, 255, 255, .35) inset !important; transition: transform .25s var(--parniyan-ease), box-shadow .25s ease !important; } #parniyan-user .parniyan-user-fab:hover { transform: translateY(-2px) !important; box-shadow: 0 22px 44px -16px rgba(var(--parniyan-accent-rgb), .75), 0 0 0 1px rgba(255, 255, 255, .4) inset !important; } #parniyan-user .parniyan-user-fab__main { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; padding-block: 7px !important; padding-inline-start: 8px !important; padding-inline-end: 16px !important; border-start-start-radius: 999px !important; border-end-start-radius: 999px !important; border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; background: none !important; color: var(--parniyan-user-fab-text) !important; text-decoration: none !important; overflow: hidden !important; } #parniyan-user .parniyan-user-fab__main:only-child { border-radius: 999px !important; } #parniyan-user .parniyan-user-fab__name { display: block !important; max-width: 150px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--parniyan-user-fab-text) !important; } #parniyan-user .parniyan-avatar, .parniyan-trigger .parniyan-avatar { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; flex: 0 0 auto !important; border-radius: 50% !important; background-image: linear-gradient(135deg, var(--parniyan-accent), var(--parniyan-accent-2)) !important; color: var(--parniyan-btn-text) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; overflow: hidden !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8) !important; } #parniyan-user .parniyan-avatar img, .parniyan-trigger .parniyan-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; margin: 0 !important; } /* چیپ آیکون داشبورد */ #parniyan-user .parniyan-user-fab__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; flex: 0 0 auto !important; border-radius: 50% !important; background-image: linear-gradient(135deg, var(--parniyan-accent), var(--parniyan-accent-2)) !important; color: var(--parniyan-btn-text) !important; box-shadow: 0 6px 14px -6px rgba(var(--parniyan-accent-rgb), .95) !important; transition: transform .3s var(--parniyan-ease) !important; } #parniyan-user .parniyan-user-fab__icon svg { width: 16px !important; height: 16px !important; stroke-width: 2 !important; } #parniyan-user .parniyan-user-fab__main:hover .parniyan-user-fab__icon { transform: scale(1.08) rotate(-6deg) !important; } #parniyan-user .parniyan-user-fab__toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; border: 0 !important; border-inline-start: 1px solid rgba(var(--parniyan-text-rgb), .1) !important; border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; border-start-end-radius: 999px !important; border-end-end-radius: 999px !important; background: none !important; color: var(--parniyan-user-fab-text) !important; cursor: pointer !important; overflow: hidden !important; transition: background-color .2s ease !important; } #parniyan-user .parniyan-user-fab__toggle:hover { background-color: rgba(var(--parniyan-accent-rgb), .1) !important; } #parniyan-user .parniyan-user-fab__toggle svg { width: 16px !important; height: 16px !important; transition: transform .3s var(--parniyan-ease) !important; } #parniyan-user .parniyan-user-fab__toggle[aria-expanded="true"] svg { transform: rotate(180deg) !important; } /* آیکون داشبورد در انتهای دکمه شورت‌کد کاربر واردشده */ .parniyan-trigger--user > svg { width: 17px !important; height: 17px !important; color: var(--parniyan-accent) !important; } /* حالت گرادیانی (اگر مدیر ظاهر پررنگ‌تر را بخواهد). */ #parniyan-user.parniyan-user--gradient .parniyan-user-fab { background-image: linear-gradient(115deg, var(--parniyan-accent), var(--parniyan-accent-2) 55%, var(--parniyan-accent)), linear-gradient(115deg, var(--parniyan-accent), var(--parniyan-accent-2)) !important; background-size: 220% 100%, 100% 100% !important; border-color: transparent !important; } #parniyan-user.parniyan-user--gradient .parniyan-user-fab__name, #parniyan-user.parniyan-user--gradient .parniyan-user-fab__toggle { color: var(--parniyan-btn-text) !important; } #parniyan-user.parniyan-user--gradient .parniyan-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55) !important; } #parniyan-user.parniyan-user--gradient .parniyan-user-fab__icon { background-image: none !important; background-color: rgba(255, 255, 255, .22) !important; } #parniyan-user.parniyan-user--gradient .parniyan-user-fab__toggle { border-inline-start-color: rgba(255, 255, 255, .28) !important; } #parniyan-user.parniyan-user--gradient .parniyan-user-fab__toggle:hover { background-color: rgba(255, 255, 255, .18) !important; } #parniyan-user.parniyan-user--gradient .parniyan-user-fab:hover { background-position: 100% 50%, 0 0 !important; } /* منوی کشویی ----------------------------------------------------------- منو همیشه کنارِ همان لبه‌ای باز می‌شود که دکمه در آن است: • دکمه پایین صفحه → منو بالای دکمه (bottom = فاصله دکمه + ۶۴px) • دکمه بالای صفحه → منو زیر دکمه (top = فاصله دکمه + ۶۴px) محاسبه در PHP انجام می‌شود و نتیجه‌اش به‌صورت متغیر CSS می‌آید. */ #parniyan-user-menu { position: fixed !important; inset: auto !important; top: var(--parniyan-menu-top, auto) !important; right: var(--parniyan-menu-right, 24px) !important; bottom: var(--parniyan-menu-bottom, 88px) !important; left: var(--parniyan-menu-left, auto) !important; z-index: var(--parniyan-z-fab) !important; width: 272px !important; max-width: var(--parniyan-menu-maxw, calc(100vw - 32px)) !important; padding: 8px !important; border: 1px solid rgba(var(--parniyan-text-rgb), .1) !important; border-radius: 20px !important; background-color: var(--parniyan-user-fab-bg) !important; background-image: linear-gradient(160deg, rgba(var(--parniyan-accent-rgb), .08), transparent 60%) !important; backdrop-filter: blur(16px) saturate(170%) !important; -webkit-backdrop-filter: blur(16px) saturate(170%) !important; box-shadow: 0 30px 60px -20px rgba(20, 10, 50, .5) !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(var(--parniyan-menu-shift, 10px)) scale(.96) !important; transform-origin: var(--parniyan-menu-origin, bottom right) !important; transition: opacity .25s ease, transform .3s var(--parniyan-ease), visibility .25s ease !important; } #parniyan-user-menu.is-open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; } #parniyan-user-menu .parniyan-user-menu__head { display: flex !important; align-items: center !important; gap: 11px !important; padding: 12px 12px 14px !important; border-block-end: 1px solid rgba(var(--parniyan-text-rgb), .09) !important; margin-block-end: 6px !important; } #parniyan-user-menu .parniyan-avatar { width: 42px !important; height: 42px !important; font-size: 16px !important; } #parniyan-user-menu .parniyan-user-menu__name { display: block !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.6 !important; color: var(--parniyan-user-fab-text) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 175px !important; } #parniyan-user-menu .parniyan-user-menu__meta { display: block !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.6 !important; color: var(--parniyan-text-soft) !important; direction: ltr !important; text-align: start !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 175px !important; } #parniyan-user-menu .parniyan-user-menu__item { position: relative !important; display: flex !important; align-items: center !important; gap: 11px !important; width: 100% !important; padding: 11px 12px !important; border: 0 !important; border-radius: 13px !important; background: none !important; color: var(--parniyan-user-fab-text) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.5 !important; text-align: start !important; text-decoration: none !important; cursor: pointer !important; overflow: hidden !important; transition: background-color .18s ease, color .18s ease, transform .18s ease !important; } #parniyan-user-menu .parniyan-user-menu__item:hover { background-color: rgba(var(--parniyan-accent-rgb), .12) !important; color: var(--parniyan-accent) !important; transform: translateX(-3px) !important; } #parniyan-user-menu .parniyan-user-menu__item svg { width: 17px !important; height: 17px !important; stroke-width: 1.9 !important; opacity: .85 !important; } #parniyan-user-menu .parniyan-user-menu__item--logout { color: var(--parniyan-error) !important; } #parniyan-user-menu .parniyan-user-menu__item--logout:hover { background-color: rgba(var(--parniyan-error-rgb), .12) !important; color: var(--parniyan-error) !important; } /* ----------------------------------------------------------- ۱۲) ریسپانسیو، تم تیره، کاهش انیمیشن ----------------------------------------------------------- */ /* صفحه‌نمایش‌های کم‌ارتفاع (لپ‌تاپ کوچک، تبلت افقی، موبایل چرخیده): همه‌چیز جمع‌وجور می‌شود تا کارت بدون هیچ اسکرولی جا شود. */ @media (max-height: 680px) { #parniyan-overlay { padding: 12px !important; } #parniyan-overlay .parniyan-card { padding: 26px 24px 22px !important; } #parniyan-overlay .parniyan-title { font-size: 19px !important; } #parniyan-overlay .parniyan-title::after { width: 30px !important; margin-top: 8px !important; } #parniyan-overlay .parniyan-sub { margin-bottom: 18px !important; font-size: 13px !important; line-height: 1.75 !important; } #parniyan-overlay .parniyan-field { margin-bottom: 13px !important; } #parniyan-overlay .parniyan-input { padding: 12px 14px !important; font-size: 14px !important; } #parniyan-overlay .parniyan-field--icon .parniyan-input { padding-inline-start: 42px !important; } #parniyan-overlay .parniyan-otp-boxes { margin: 4px 0 14px !important; } #parniyan-overlay .parniyan-otp-boxes input { width: 44px !important; height: 48px !important; font-size: 19px !important; } #parniyan-overlay .parniyan-error { margin: -5px 0 13px !important; } #parniyan-overlay .parniyan-btn { padding: 13px 16px !important; font-size: 14px !important; } #parniyan-overlay .parniyan-alt-link { margin-top: 18px !important; } #parniyan-overlay .parniyan-back { margin-bottom: 16px !important; } #parniyan-overlay .parniyan-resend { margin-top: 16px !important; } #parniyan-overlay .parniyan-success-icon { width: 60px !important; height: 60px !important; margin-bottom: 14px !important; } #parniyan-overlay .parniyan-success-icon svg { width: 28px !important; height: 28px !important; } } /* آخرین سنگر: اگر صفحه از این هم کوتاه‌تر بود، به‌جای بریده‌شدن محتوا، اسکرول برمی‌گردد. (فقط برای صفحه‌های بسیار کوتاه) */ @media (max-height: 420px) { #parniyan-overlay .parniyan-card { overflow-y: auto !important; } } @media (max-width: 480px) { #parniyan-overlay { padding: 14px !important; } #parniyan-overlay .parniyan-card { padding: 32px 22px 26px !important; } #parniyan-overlay .parniyan-title { font-size: 20px !important; } #parniyan-overlay .parniyan-otp-boxes { gap: 7px !important; } #parniyan-overlay .parniyan-otp-boxes input { width: 42px !important; height: 52px !important; font-size: 19px !important; border-radius: 12px !important; } #parniyan-fab { padding: 11px 18px !important; font-size: 13px !important; } #parniyan-user .parniyan-user-fab__name { max-width: 96px !important; } /* توجه: فاصله‌ی دکمه از لبه‌های صفحه در موبایل هم از پنل مدیریت می‌آید (متغیرهای --parniyan-fab-*) و با یک media query در CSS تولیدشده تزریق می‌شود. عمداً اینجا مقدار ثابت نمی‌گذاریم، وگرنه روی تنظیمات مدیر غلبه می‌کرد. */ } /* حالت تیره سیستم‌عامل. توجه: اگر مدیر سایت رنگ‌ها را شخصی‌سازی کرده باشد، کلاس parniyan-custom-theme روی پاپ‌آپ می‌نشیند و این بلوک دیگر اعمال نمی‌شود تا رنگ‌های انتخابی مدیر دست‌نخورده بمانند. */ @media (prefers-color-scheme: dark) { #parniyan-overlay:not(.parniyan-custom-theme) .parniyan-card { --parniyan-text: #f3f0fd; --parniyan-text-rgb: 243, 240, 253; --parniyan-text-soft: rgba(243, 240, 253, .68); --parniyan-glass-tint-rgb: 28, 22, 48; --parniyan-glass-bg: rgba(28, 22, 48, .55); --parniyan-glass-border: rgba(255, 255, 255, .16); --parniyan-user-fab-bg: rgba(30, 24, 50, .92); --parniyan-user-fab-text: #f3f0fd; } #parniyan-overlay:not(.parniyan-custom-theme) .parniyan-input, #parniyan-overlay:not(.parniyan-custom-theme) .parniyan-otp-boxes input { background-color: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .16) !important; color: #f3f0fd !important; } #parniyan-overlay:not(.parniyan-custom-theme) .parniyan-input::placeholder { color: rgba(243, 240, 253, .45) !important; } #parniyan-overlay:not(.parniyan-custom-theme) .parniyan-close { background-color: rgba(255, 255, 255, .12) !important; color: #f3f0fd !important; } #parniyan-overlay:not(.parniyan-custom-theme) .parniyan-close:hover { background-color: rgba(255, 255, 255, .24) !important; } #parniyan-overlay:not(.parniyan-custom-theme) .parniyan-notice--success { border-color: rgba(var(--parniyan-success-rgb), .4) !important; background-color: rgba(var(--parniyan-success-rgb), .15) !important; color: var(--parniyan-success) !important; } #parniyan-user .parniyan-user-fab__toggle { border-inline-start-color: rgba(255, 255, 255, .14) !important; } #parniyan-user-menu { border-color: rgba(255, 255, 255, .14) !important; } #parniyan-user-menu .parniyan-user-menu__head { border-block-end-color: rgba(255, 255, 255, .12) !important; } } /* ----------------------------------------------------------- ۱۴) حالت اجباری (سبد خرید و تسویه حساب ووکامرس) ----------------------------------------------------------- در این صفحات پاپ‌آپ با کلیک روی پس‌زمینه یا کلید Esc بسته نمی‌شود و دکمه ضربدر هم پنهان است، تا کاربر مهمان مجبور شود شماره‌اش را وارد کند. برای اینکه هیچ‌وقت واقعاً گیر نکند، لینک «فعلاً انصراف می‌دهم» نمایش داده می‌شود. */ #parniyan-overlay.parniyan-overlay--mandatory .parniyan-close { display: none !important; } #parniyan-overlay.parniyan-overlay--mandatory .parniyan-glow { background: radial-gradient(circle, rgba(var(--parniyan-accent-rgb), .7), transparent 70%) !important; } /* ----------------------------------------------------------- ۱۵) صفحه «حساب من» ووکامرس ----------------------------------------------------------- کاربر مهمان در این صفحه باید فقط پاپ‌آپ پرنیان را ببیند، نه فرم ورود/ثبت‌نام خودِ ووکامرس. سلکتورها عمداً کلی هستند تا با قالب‌های مختلف (از جمله WoodMart) هم کار کنند. برای حالت بدون جاوااسکریپت، یک فالبک noscript در functions سمت PHP چاپ می‌شود که این فرم را دوباره نمایان می‌کند. */ body.parniyan-account-locked #customer_login, body.parniyan-account-locked .woocommerce-form-login, body.parniyan-account-locked .woocommerce-form-register, body.parniyan-account-locked form.woocommerce-form-login, body.parniyan-account-locked form.woocommerce-form-register, body.parniyan-account-locked .wd-login-form, body.parniyan-account-locked .wd-register-form { display: none !important; } @media (prefers-reduced-motion: reduce) { #parniyan-overlay, #parniyan-overlay *, #parniyan-user, #parniyan-user *, #parniyan-fab, .parniyan-trigger { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .parniyan-anim #parniyan-fab { animation: none !important; } } /* ----------------------------------------------------------- ۱۳) تثبیت ویژگی hidden (بسیار مهم) ----------------------------------------------------------- این قانون عمداً در انتهای فایل تکرار شده است. دلیل: دکمه‌ها و فیلدهای ما display خودشان را با !important تعیین می‌کنند (مثلاً .parniyan-btn با display:block). قانون [hidden] هم specificity برابر دارد، پس در نبرد !important، آن‌که دیرتر نوشته شده برنده است. اگر این بلوک در ابتدای فایل بماند، دکمه «ورود» کنار «دریافت کد ورود» دیده می‌شود و فیلدهای پنهان واقعاً پنهان نمی‌شوند. */ #parniyan-overlay [hidden], #parniyan-user [hidden] { display: none !important; } /* رنگ متن نشان «!» روی پیام خطا همیشه سفید می‌ماند (مستقل از رنگ متن دکمه‌ها). */ #parniyan-overlay .parniyan-error:not(:empty)::before { color: #fff !important; }