/* 🆕 v1.5.5: اوورلی سبک هنگام ذخیره/آپلود (فاویکون سایت وسط صفحه می‌چرخه) */ .s4w-loading-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 999999; } .s4w-loading-overlay img { width: 46px; height: 46px; animation: s4w-spin 1s linear infinite; } @keyframes s4w-spin { to { transform: rotate(360deg); } } /* 🆕 v1.5.4: محتوای نمونه‌کار/فروشگاه که جای بخش «لینک‌ها» تزریق می‌شه، برخلاف خودِ اون بخش هیچ محدودیت عرضی نداره (چون بیرون از .profile-links قرار می‌گیره) و همین باعث می‌شد روی دسکتاپ عکس‌ها خیلی بزرگ و کشیده بشن. اینجا یک عرض حداکثریِ معقول و وسط‌چین براش تعریف می‌کنیم، هماهنگ با عرض کارت پروفایل. */ /* 🐛→✅ v2.6.4: text-align صریحاً center نبود؛ چون این ظرف مستقیماً جای بخش لینک‌های قالبِ پروفایل تزریق می‌شه (نه همیشه داخلِ یک والدِ وسط‌چین)، محتوایی مثل عکس/تیترِ صفحه‌ی تک‌آیتم بسته به قالبِ انتخابیِ آرتیست گاهی راست‌چین می‌ماند. الان صریحاً وسط‌چین است تا مستقل از قالب همیشه یکسان باشد. */ .s4w-work-inline, .s4w-works-inline, .s4w-store-inline, .s4w-product-inline { max-width: 600px; margin: 0 auto; text-align: center; } /* 🐛→✅ v2.6.3 (v10.0: ساده‌شده) — قالبِ app1 برای رنگ‌بندیِ زمینه‌ی شیشه‌ای‌رنگش کلاسِ s4w-tpl-app1 را روی .s4m-artist-profile می‌گیرد (توسطِ s4w_profile_template_class() در PHP). وقتی نمونه‌کار/فروشگاه/ رویداد — که با رنگ‌های خنثیِ خودش طراحی شده — داخلِ همین رنگ‌بندی تزریق می‌شه، وسط‌چینیِ متن و رنگِ سفیدِ ارثی باعثِ کم‌خوانایی می‌شد؛ این قانون آن را به حالتِ خوانای معمولیِ پلاگین برمی‌گرداند. 🆕 v10.0: طبقِ معماریِ جدیدِ قالب‌ها، «کارتِ شیشه‌ایِ» تصویریِ app1 (max-width: 420px) دیگر روی خودِ .s4m-artist-profile نیست — در یک کلاسِ داخلیِ اختصاصی (.s4m-profile-card، در profile-app1.php) است، دقیقاً مثلِ الگویی که default/modern/colors همیشه داشتند. یعنی .s4m-artist-profile دیگر هیچ‌وقت (نه فقط برای app1، برای هیچ قالبی) max-width عددی نمی‌گیرد و قانونِ استثناءِ قبلیِ اینجا (:has(.s4w-tpl-app1)) دیگر لازم نیست — حذف شد. */ /* 🐛→✅ v2.7.5: طبقِ درخواستِ صریح، محتوای نمونه‌کار/رویداد/فروشگاه در قالب‌های modern و app1 هم باید وسط‌چین باشد، دقیقاً مثلِ default/colors. قبلاً این قانون (.s4w-tpl-app1) با همون specificityِ قانونِ عمومیِ وسط‌چینِ بالا (.s4w-work-inline و...) ولی چون بعد از آن در فایل می‌آمد، برنده می‌شد و راست‌چینش می‌کرد؛ الان صریحاً center است. */ .s4w-tpl-app1 { color: #ddd; /* 🐛→✅ v2.7.6: طبقِ گزارش، وسط‌چینیِ modern/app1 باید مثلِ default/colors تضمینی باشه؛ !important اضافه شد تا هیچ قانونِ دیگری (با هر specificityِ ای) نتونه بی‌اثرش کنه. */ text-align: center !important; } .s4w-tpl-app1 .s4m-product-card, .s4w-tpl-app1 .s4w-work-card { background: rgba(0, 0, 0, 0.25); } /* 🆕 v2.7.5: قالبِ modern هم باید همیشه وسط‌چین بماند (طبقِ همان درخواست) — این قانون صریحاً همان چیزی را تضمین می‌کند که تا امروز فقط به‌طورِ تلویحی از .s4w-work-inline و... به ارث می‌رسید. */ .s4w-tpl-modern { text-align: center !important; } .s4m-work-page, .s4m-store-page { max-width: 720px; margin: 30px auto; padding: 0 16px; font-family: 'Vazirmatn', Tahoma, sans-serif; } .s4m-work-cover, .s4m-work-gallery img { display: block; width: 100%; max-width: 480px; /* 🆕 v2.6.4: کمی بزرگ‌تر از قبل (420px)، هماهنگ با صفحه‌ی محصول/رویداد */ height: auto; /* نسبت اصلی عکس حفظ بشه */ margin: 0 auto 12px; border-radius: 9px; } .s4m-work-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .s4m-work-play-btn, .s4m-buy-btn { display: inline-block; background: #1b1b1b; color: #fff; border: none; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-family: inherit; text-decoration: none; } .s4m-work-dsp-links { list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .s4m-work-dsp-links a { padding: 6px 12px; border: 1px solid #ddd; border-radius: 20px; text-decoration: none; } /* 🆕 v2.10.0: پلیرِ embedِ داخلِ صفحه — تا هر لینکِ DSPای که آرتیست وارد کرده (حتی اگه فقط همون یکی رو داشته باشه) بشه همون‌جا شنیدش، بدون خروج از سایت. رجوع کنید به s4m_get_dsp_embed_html() در s4m-works-render.php. */ .s4m-dsp-embed-wrap { width: 100%; max-width: 480px; margin: 0 auto 12px; } .s4m-dsp-embed { display: block; width: 100%; border: none; border-radius: 9px; } .s4m-dsp-embed-soundcloud { height: 166px; } .s4m-dsp-embed-spotify { height: 152px; } .s4m-dsp-embed-apple { height: 175px; } .s4m-dsp-embed-youtube { aspect-ratio: 16 / 9; height: auto; } /* 🐛 v1.4 فیکس: این کلاس تو HTML به‌عنوان s4w-store-grid رندر می‌شه (نه s4m-)؛ قبلاً اینجا اشتباهاً s4m-store-grid نوشته شده بود و هیچ‌وقت اعمال نمی‌شد، یعنی گرید محصولات فروشگاه کاملاً بدون استایل بود */ .s4m-product-card { border: 1px solid #eee; border-radius: 12px; padding: 12px; } .s4m-product-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; display: block; } .s4m-sold-out { color: #b00; font-weight: bold; } /* ===================================================================== 🆕 v2.7.1: گریدِ یکپارچه و کاملاً ریسپانسیوِ نمونه‌کارها/رویدادها/فروشگاه --------------------------------------------------------------------- قبلاً هر قالب (modern/colors/app1) یک بلوکِ CSS جداگانه با تعدادِ ستونِ ثابت (۲ یا ۳) و max-width ثابت (640/960px) داشت — یعنی هم کدِ تکراریِ زیاد، و هم روی صفحه‌های خیلی بزرگ (لپ‌تاپ/دسکتاپ/TV) چون ظرف هیچ‌وقت از ۹۶۰px بیشتر نمی‌شد، تعدادِ ستون هیچ‌وقت از ۳ فراتر نمی‌رفت. الان یک سیستمِ گریدِ مشترک، مستقل از قالب، جایگزینِ همه‌شون شده: ۱) عرضِ ظرف (max-width) به‌ازای بازه‌ی اندازه‌ی صفحه، پلکانی زیاد می‌شه (موبایل کوچک → موبایل معمولی → تبلت/آیپد کوچک → آیپد پرو/لپ‌تاپ → دسکتاپ → صفحه‌های خیلی بزرگ/TV). ۲) توی خودِ گرید، به‌جای عددِ ستونِ ثابت، از repeat(auto-fill, minmax(min(Xpx, 46%), 1fr)) استفاده شده: - min(Xpx, 46%) یعنی روی باریک‌ترین صفحه‌ها هم (مثلاً موبایلِ ۳۲۰px) حداقلِ عرضِ هر کارت خودش رو با عرضِ ظرف تطبیق می‌ده و همیشه دستِ‌کم ۲ ستون جا می‌شه (چون ۲×۴۶٪ کمتر از ۱۰۰٪ عرضه)، بدونِ نیاز به یک breakpointِ جداگانه فقط برای «تضمینِ ۲ ستون». - Xpx در هر breakpoint کمی بزرگ‌تر می‌شه، تا روی صفحه‌های بزرگ‌تر (بجای صرفاً کِش‌اومدنِ همون ۲-۳ کارت) واقعاً ستون‌های بیشتری (تا حدودِ ۴-۶ ستون روی دسکتاپ/TV) اضافه بشه، بدونِ اینکه کارت‌ها روی صفحه‌های خیلی بزرگ بیش‌ازحد ریز بشن. قالبِ app1 چون پس‌زمینه‌ی شیشه‌ای/رنگِ متفاوت داره، فقط رنگش (بالاتر، .s4w-tpl-app1) دست‌نخورده مونده؛ چیدمانِ گرید حالا برای همه یکسانه. */ .s4w-works-inline, .s4w-store-inline { max-width: 640px; width: 100%; margin: 0 auto; /* 🆕 v2.7.6: این ظرف حالا خودش یک «کوئری‌کانتینر» است — رجوع کنید به توضیحِ کاملِ زیر (بخشِ گریدِ ریسپانسیو) برای دلیل. */ container-type: inline-size; } @media (min-width: 480px) { .s4w-works-inline, .s4w-store-inline { max-width: 700px; } } @media (min-width: 700px) { .s4w-works-inline, .s4w-store-inline { max-width: 860px; } } @media (min-width: 900px) { .s4w-works-inline, .s4w-store-inline { max-width: 1040px; } } @media (min-width: 1200px) { .s4w-works-inline, .s4w-store-inline { max-width: 1280px; } } @media (min-width: 1600px) { .s4w-works-inline, .s4w-store-inline { max-width: 1560px; } } @media (min-width: 2200px) { /* صفحه‌های خیلی بزرگ/TV: دیگه بیشتر از این عریض نشه، وگرنه کارت‌ها بیش‌ازحد پخش و فاصله‌دار می‌شن؛ به‌جاش تعدادِ ستون‌ها (پایین‌تر) زیاد می‌شه */ .s4w-works-inline, .s4w-store-inline { max-width: 1800px; } } .s4w-works-grid, .s4w-store-grid { display: grid !important; width: 100% !important; grid-template-columns: repeat(auto-fill, minmax(min(150px, 46%), 1fr)) !important; gap: 12px !important; } /* ⬇️ Fallback مبتنی بر @media (عرضِ viewport) — برای مرورگرهای خیلی قدیمی که هنوز Container Query را پشتیبانی نمی‌کنند. بلوکِ @container پایین‌تر، وقتی پشتیبانی بشه، همینِ همین قوانین رو (با اولویتِ بالاتر چون بعداً می‌آد) override می‌کنه. */ @media (min-width: 700px) { .s4w-works-grid, .s4w-store-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 14px !important; } } @media (min-width: 1024px) { .s4w-works-grid, .s4w-store-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 16px !important; } } @media (min-width: 1600px) { .s4w-works-grid, .s4w-store-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 20px !important; } } /* 🐛→✅ v2.7.5 (قبلی): تلاش برای رفعِ باگِ «برمی‌گرده به یک ستون وقتی عرض بیشتر می‌شه» — در modern/colors/app1، گریدِ بالا داخلِ .s4m-profile-card تزریق می‌شود که خودش یک max-width ثابت دارد (420 تا 480px). راه‌حلِ آن نسخه این بود که این محدودیت با :has() برداشته بشه تا breakpointهای مبتنی‌بر-viewport بالا واقعاً به کانتینر برسه. 🐛→✅ v2.7.6: این ترفند ریشه‌ی مشکل را حل نمی‌کرد — چون breakpointهای بالا همچنان بر مبنای عرضِ *viewport* هستند، نه عرضِ واقعیِ همین ظرف؛ در صفحاتی که ظرف به هر دلیلِ دیگری (نه فقط .s4m-profile-card — مثلاً حاشیه‌ی تمِ سایت، سایدبار، ستون‌بندیِ صفحه) از عرضِ viewport کوچک‌تر می‌ماند، همون سقوطِ ناگهانی به ۱ ستون در یک آستانه‌ی خاص دوباره اتفاق می‌افتد. راه‌حلِ واقعی: Container Query — به‌جای گوش‌دادن به عرضِ viewport، گرید مستقیماً به عرضِ *خودِ* .s4w-works-inline/.s4w-store-inline (که چند خط بالاتر container-type گرفته) گوش می‌ده. این یعنی مستقل از اینکه این ظرف داخلِ کدوم قالب/کارتی نشسته، تعدادِ ستون‌ها همیشه دقیقاً متناسب با عرضِ واقعاً در دسترس محاسبه می‌شه — بدونِ امکانِ این ناهم‌خوانی. این بلوک، به‌عنوانِ یک لایه‌ی دفاعیِ اضافی (برای مرورگرهای بدونِ پشتیبانیِ Container Query)، همچنان نگه داشته شده. */ .s4m-profile-card:has(.s4w-works-inline), .s4m-profile-card:has(.s4w-store-inline) { max-width: 1800px !important; width: 100% !important; } /* ===================================================================== 🐛→✅ v2.7.7: علتِ واقعیِ باگِ «بالای 700px هر پست یک ستون/سطرِ جدا می‌شه» (default) و «توی modern/app1 همه‌چیز فشرده تو یک ستونِ باریکِ سمتِ راست جمع می‌شه» (colors چون به‌طورِ اتفاقی سالم بود) — پیدا شد: --------------------------------------------------------------------- .s4w-works-inline/.s4w-store-inline همیشه به‌عنوانِ تنها فرزندِ داخلِ ".s4m-links" تزریق می‌شه (نگاه کنید به s4m_tpl_links() در s4m-template-engine.php) — یعنی همون ظرفی که قالب‌های پروفایل برای نمایشِ خودِ لینک‌های آرتیست طراحی‌ش کرده‌ن، با استایلِ مخصوصِ همون کارِ دیگه: • .s4m-links--modern و .s4m-links--app1: display:grid با minmax(150-180px, 1fr) — یعنی .s4w-works-inline به‌عنوانِ تنها آیتمِ این گرید، فقط عرضِ یک ستونِ گرید (~۱۵۰-۱۸۰px) می‌گیره! دقیقاً همون «فشرده‌شدنِ همه‌چیز تو یک ستونِ باریک» که گزارش شد. • .s4m-links--default: width:81%; max-width:333px — یعنی حتی با گریدِ داخلیِ درستِ s4w-works-grid، عرضِ واقعاً در دسترس هیچ‌وقت از ۳۳۳px بیشتر نمی‌شه؛ چون @containerهای گریدِ بالا (که برای عرض‌های ≥480px طراحی شدن) تو همچین عرضِ کوچیکی هیچ‌وقت فعال نمی‌شن، فقط فال‌بکِ @media(min-width:700px) (که برمبنای عرضِ viewport نه عرضِ واقعیِ همین ظرف کار می‌کنه) فعال می‌مونه و ستونِ ثابتِ 170px رو تحمیل می‌کنه — که تو یه ظرفِ 333px فقط جای ۱ ستون می‌شه! • .s4m-links--colors: display:flex; flex-direction:column — چون align-items پیش‌فرض stretch است، تنها فرزندش (.s4w-works-inline) به‌طورِ خودکار عرضِ کامل می‌گیره؛ برای همینه که فقط colors تصادفاً درست بود. راه‌حل: هر وقت این ظرف صرفاً حاملِ محتوای نمونه‌کار/رویداد/فروشگاهه (نه لینک‌های واقعیِ آرتیست)، تمامِ محدودیت‌های چیدمانِ مخصوصِ لینک (grid/flex/width/max-width/padding) خنثی می‌شه و به یک ظرفِ سادهٔ block با عرضِ کامل تبدیل می‌شه — مستقل از این‌که کدوم قالب انتخاب شده. بعد از این، سیستمِ Container Query خودِ s4w-works-grid/ s4w-store-grid (بالاتر در همین فایل) عرضِ واقعیِ در دسترس رو درست می‌بینه و باگِ «سقوط به ۱ ستون» هم خودبه‌خود رفع می‌شه، چون دیگه هیچ ظرفِ والدی عرض رو به‌اشتباه به ۳۳۳/۱۵۰/۱۸۰px محدود نمی‌کنه. */ .s4m-links:has(.s4w-works-inline), .s4m-links:has(.s4w-store-inline), .s4m-links:has(.s4w-work-inline), .s4m-links:has(.s4w-product-inline) { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: initial !important; } /* ===================================================================== 🆕 v2.7.6: نسخه‌ی نهاییِ ریسپانسیوِ گرید — مبتنی بر Container Query --------------------------------------------------------------------- برخلافِ @media که به عرضِ کلِ صفحه (viewport) واکنش نشون می‌ده، @container به عرضِ واقعیِ همون کانتینری که container-type گرفته (اینجا .s4w-works-inline/.s4w-store-inline) واکنش نشون می‌ده. یعنی این گرید حالا صرف‌نظر از اینکه داخلِ کدوم قالب/چه چیزِ دیگه‌ای نشسته، همیشه دقیقاً با عرضِ واقعاً در دسترسِ خودش (نه عرضِ صفحه) ستون‌بندی می‌شه — تضمینِ یک رشدِ همیشه-صعودیِ تعدادِ ستون (هیچ‌وقت با بزرگ‌تر شدنِ عرض، تعدادِ ستون کم نمی‌شه): ۱ ستون در باریک‌ترین حالت → ۲ ستون در عرضِ کم → ۳ ستون → ۴ ستون → ۵ ستون یا بیشتر در عرض‌های خیلی بزرگ. چون این قوانین بعد از بلوکِ @media بالا می‌آیند و specificityِ یکسانی دارند، در مرورگرهایی که Container Query را پشتیبانی می‌کنند همیشه همین قوانین برنده می‌شوند (بدونِ نیاز به !important اضافه‌تر)؛ در مرورگرهای بدونِ پشتیبانی، کلِ این بلوک نادیده گرفته می‌شه و همون @media بالا به‌عنوانِ fallback باقی می‌مونه. */ @container (min-width: 480px) { .s4w-works-grid, .s4w-store-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 14px !important; } } @container (min-width: 640px) { .s4w-works-grid, .s4w-store-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 14px !important; } } @container (min-width: 860px) { .s4w-works-grid, .s4w-store-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 16px !important; } } @container (min-width: 1100px) { .s4w-works-grid, .s4w-store-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 18px !important; } } @container (min-width: 1500px) { .s4w-works-grid, .s4w-store-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 20px !important; } } /* --- App1: صفحه‌ی جزئیاتِ تک‌آیتم (نمونه‌کار/رویداد/محصول) — فقط ۱ آیتم، وسط‌چین، کمی بزرگ‌تر از سایزِ فعلی --- */ .s4w-tpl-app1.s4w-work-inline, .s4w-tpl-app1.s4w-product-inline { max-width: 620px; margin: 0 auto; text-align: center; } .s4w-tpl-app1 .s4m-work-cover, .s4w-tpl-app1 .s4m-work-gallery.s4m-single img, .s4w-tpl-app1 .s4m-product-card img, .s4w-tpl-app1 .s4m-dsp-embed-wrap { max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; } /* === بخش نمونه‌کارها در پروفایل === */ .s4w-works-section { max-width: 540px; margin: 32px auto 0; padding: 0 16px 32px; font-family: 'Vazirmatn', Tahoma, sans-serif; } .s4w-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .s4w-section-title { font-size: 18px; color: #ccc; margin: 0; } .s4w-add-btn { background: #0073aa; color: #fff; border: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 14px; } .s4w-empty { color: #888; text-align: center; } .s4w-store-link-row { margin-bottom: 16px; } .s4w-store-link-btn { display: inline-block; background: #1e1e1e; color: #ddd; border: 1px solid #444; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: 13px; } .s4w-store-link-btn:hover { border-color: #0073aa; color: #fff; } /* گرید نمونه‌کارها — استایلِ ریسپانسیوش بالاتر (بخشِ v2.7.1) تعریف شده؛ اینجا فقط استایلِ خودِ کارت‌هاست. */ .s4w-work-card { background: #1e1e1e; border-radius: 10px; overflow: hidden; position: relative; } .s4w-card-link { text-decoration: none; display: block; } /* 🐛→✅ v2.5.7: قبلاً کاور با background-image روی یک
نمایش داده می‌شد — یعنی loading="lazy" (که فقط روی تگ کار می‌کند) هیچ اثری نداشت و مرورگر همه‌ی عکس‌های نمونه‌کار را همان اول، حتی پایینِ صفحه را هم، دانلود می‌کرد. الان یک واقعی است؛ object-fit:cover همان جلوه‌ی بصریِ background-size:cover قبلی را حفظ می‌کند. برای حالتِ «بدون کاور» (آیکون/ایموجیِ جایگزین) همچنان یک
است چون عکسی برای نمایش وجود ندارد — همین کلاس روی هر دو کار می‌کند. */ .s4w-card-cover { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background-color: #2a2a2a; } .s4w-no-cover { display: flex; align-items: center; justify-content: center; font-size: 36px; color: #666; } .s4w-card-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .s4w-card-title { color: #ddd; font-size: 13px; font-weight: bold; } /* 🆕→✅ اصلاح نهایی طبق خواسته: ویرایش/حذف بدون آیکون ولی با رنگ/استایل، همیشه در همون ردیف (بدون اسکرول، بدون رفتن به خط بعد) — چون الان فقط ۲ دکمه‌ی متنیِ کوتاه‌اند، جا کم نمی‌آید. آیکونِ تگ‌ها هم از این ردیف جدا شد و به یک نشانِ گردِ روی خودِ کاور منتقل شد (شبیه نشانِ «افراد تگ‌شده» روی عکس اینستاگرام). */ .s4w-card-actions { display: flex; flex-wrap: nowrap; gap: 6px; padding: 6px 8px; background: rgba(0,0,0,0.5); overflow: hidden; } /* 🐛→✅ v2.7.6: طبقِ گزارش، این دکمه‌ها (مخصوصاً حذف) گاهی استایلِ خودِ قالب/تمِ سایت رو می‌گرفتن (رنگ/پدینگ/بوردر پیشفرضِ دکمه‌های تم روی button ست می‌شه) — چون قبلاً روی این قانون‌ها !important نبود و فقط به ترتیبِ لودِ CSS (اولویتِ ۲۰ در enqueue) تکیه شده بود که همیشه کافی نیست (مثلاً وقتی استایلِ پایه‌ی دکمه‌های تم دیرتر/به‌صورتِ inline لود بشه). الان با !important تضمین می‌شه. */ .s4w-edit-btn, .s4w-delete-btn, .s4w-edit-product-btn, .s4w-delete-product-btn, .s4w-edit-event-btn, .s4w-delete-event-btn { flex: 1 1 0; min-width: 0; border: none !important; padding: 6px 4px !important; border-radius: 6px !important; cursor: pointer; font-family: inherit; font-size: 12px !important; text-align: center; white-space: nowrap; box-shadow: none !important; } .s4w-edit-btn, .s4w-edit-product-btn, .s4w-edit-event-btn { background: #444 !important; color: #ddd !important; } .s4w-delete-btn, .s4w-delete-product-btn, .s4w-delete-event-btn { background: #622 !important; color: #fcc !important; } /* 🆕 نشانِ «هم‌کاری‌های تگ‌شده» روی گوشه‌ی کاورِ نمونه‌کار — دقیقاً مثل نشانِ تگ روی عکس اینستاگرام؛ چون بیرون از لینکِ کارت است، کلیک روش صفحه را عوض نمی‌کند. */ .s4w-manage-tags-toggle-btn { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 20px; padding: 4px 9px; font-size: 12px; cursor: pointer; backdrop-filter: blur(2px); } .s4w-manage-tags-toggle-btn:hover { background: rgba(0,0,0,0.8); } /* مودال */ .s4w-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; } .s4w-modal-box { background: #1e1e1e; color: #ddd; border-radius: 14px; padding: 24px; width: 92%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; } .s4w-modal-close { position: absolute; top: 12px; left: 14px; background: none; border: none; color: #aaa; font-size: 22px; cursor: pointer; line-height: 1; } .s4w-modal-box h3 { margin: 0 0 18px; font-size: 17px; color: #eee; } .s4w-form-group { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; } .s4w-form-group label { font-size: 13px; color: #aaa; } .s4w-req { color: #e55; } .s4w-form-group input[type=text], .s4w-form-group input[type=url], .s4w-form-group select, .s4w-form-group textarea { background: #2a2a2a; border: 1px solid #444; border-radius: 7px; color: #ddd; padding: 8px 10px; font-family: inherit; font-size: 13px; outline: none; width: 100%; box-sizing: border-box; } .s4w-form-group input:focus, .s4w-form-group select:focus, .s4w-form-group textarea:focus { border-color: #0073aa; } .s4w-form-group small { color: #666; font-size: 11px; } .s4w-upload-btn { background: #333; border: 1px dashed #555; color: #aaa; padding: 8px 14px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 13px; } .s4w-gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .s4w-gallery-thumbs img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; } .s4w-form-actions { display: flex; gap: 10px; margin-top: 18px; } .s4w-submit-btn { flex: 1; background: #0073aa; color: #fff; border: none; padding: 10px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 14px; } .s4w-submit-btn:disabled { opacity: 0.6; cursor: default; } .s4w-cancel-btn { background: #333; color: #aaa; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-family: inherit; } /* === محتوای work/store وقتی داخل تمپلیت پروفایل تزریق می‌شه === */ /* 🐛→✅ v2.6.4: با وسط‌چینِ سراسریِ بالا (روی .s4w-work-inline/.s4w-product-inline)، لینکِ بازگشت هم وسط می‌افتاد که برخلافِ رفتارِ معمولِ چنین لینک‌هاست؛ دوباره راست‌چین (خواندنیِ طبیعیِ RTL) شد. */ .s4w-back-link { margin-bottom: 14px; text-align: right; } .s4w-back-link a { color: #8ab4f8; text-decoration: none; font-size: 13px; } /* 🆕 v1.5.2: نوار تب پروفایل/نمونه‌کارها/فروشگاه — بالای عکس پروفایل */ .s4w-tabs { visibility: hidden; /* تا وقتی جاوااسکریپت جابه‌جاش نکرده، دیده نشه (بدون پرش تصویری) */ display: flex; justify-content: center; gap: 6px; /* 🐛→✅ v2.6.6: این نوار به‌عنوان اولینِ فرزندِ .s4m-artist-profile تزریق می‌شود؛ بدونِ margin-top کاملاً به لبه‌ی بالاییِ کارتِ پروفایل (مخصوصاً در قالب modern که خودِ padding داخلیِ هدر کمتر محسوس است) می‌چسبید. کمی فاصله اضافه شد. 🐛→✅ v2.7.5: ۱۰px کافی نبود — چون فقط default padding-topِ کافی روی خودِ .s4m-artist-profile دارد (رجوع کنید به توضیحِ کاملِ این تفاوت در s4m-artist-manager/includes/templates)، در modern/colors/ app1 که این padding را ندارند، نوار همچنان به لبه‌ی بالا چسبیده دیده می‌شد. به یک مقدارِ محسوس‌تر افزایش یافت که در هر ۴ قالب کافی باشد (در default هم فقط کمی بیشتر می‌شود، نه یک تغییرِ محسوس). */ margin-top: 18px; margin-bottom: 16px; flex-wrap: wrap; } /* 🐛→✅ v2.7.7: طبقِ درخواستِ صریح، فاصله‌ی اضافیِ اختصاصیِ ۳۰px بالای نوارِ تب برای modern/colors/app1 (که در v2.7.6 اضافه شده بود) کاملاً حذف شد — تشخیصِ آن نسخه اشتباه بود. همین margin-top: 18px پایه (بالاتر) برای هر ۴ قالب کافی و یکسان است. */ .s4w-tab { padding: 7px 18px; color: #aaa; text-decoration: none; font-size: 13px; background: #1e1e1e; border: 1px solid #333; border-radius: 999px; transition: color .15s, background .15s, border-color .15s; } .s4w-tab:hover { color: #fff; border-color: #555; } .s4w-tab-active { color: #fff; font-weight: bold; background: #0073aa; border-color: #0073aa; } .s4w-tab-edit { border-style: dashed; } .s4w-tab-edit:hover { border-color: #0073aa; color: #fff; } /* 🆕 v2.6.5: چرخ‌دنده‌ی ویرایش، وقتی کنارِ اسم (نه داخلِ نوارِ تب) قرار می‌گیرد. طراحیِ کوچیک و گردِ مستقل از رنگ‌بندیِ قالبِ پروفایل — چون این المان با جاوااسکریپت داخلِ قالب‌های مختلف (که هرکدام رنگ‌بندیِ خودشان را دارند) درج می‌شود، به‌جای وابستگی به رنگِ هر قالب، یک ظاهرِ خنثی و شیشه‌ای دارد که روی هر پس‌زمینه‌ای (تیره یا روشن) خوانا بماند. */ .s4w-tab-edit-float { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 6px; border-radius: 50%; background: rgba(128, 128, 128, 0.18); border: 1px solid rgba(128, 128, 128, 0.35); text-decoration: none; font-size: 15px; vertical-align: middle; transition: background .15s ease, transform .15s ease; } .s4w-tab-edit-float:hover { background: rgba(0, 115, 170, 0.35); transform: rotate(25deg); } /* 🐛→✅ v2.6.11: کلاسِ s4w-avatar-gear-wrap دیگر استفاده نمی‌شود — هدرِ فشرده الان کاملاً استاتیک است (رجوع کنید به s4m_render_compact_header_script در s4m-works-render.php)، بدون هیچ جابه‌جاییِ جاوااسکریپتی. */ .s4w-work-inline-title { margin: 6px 0 14px; font-size: 20px; color: #eee; } .s4m-product-desc { color: #999; font-size: 12px; margin: 4px 0; } .s4w-work-collabs { margin-top: 20px; font-size: 13px; color: #ccc; } .s4w-work-collabs ul { list-style: none; padding: 0; margin: 6px 0 0; } .s4w-work-collabs a { color: #8ab4f8; text-decoration: none; } .s4w-store-inline .s4w-section-header { margin-bottom: 14px; } /* v1.5+: خصوصیت‌های تکمیلی گرید و کارت (ادغام‌شده با تعریف اصلی بالا) */ /* 🐛→✅ v2.6.4: gap این‌جا با !important جدیدِ خط ۱۱۳ همیشه بی‌اثر بود؛ حذف شد تا مقدارِ واقعیِ gap فقط یک‌جا (بالا) تعریف شود و گمراه‌کننده نباشد. */ .s4w-works-grid { margin-top: 14px; } .s4w-work-card { transition: transform 0.15s; color: inherit; } .s4w-work-card:hover { transform: translateY(-3px); } .s4w-work-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .s4w-work-card-title { display: block; padding: 8px 10px; font-size: 0.85rem; } /* 🆕 v1.6.1: کارتِ نمونه‌کاری که به‌عنوان همکاری روی پروفایل کاربر تگ‌شده نمایش داده می‌شود 🐛→✅ v2.6.3: کارتِ محصولِ همکاری‌شده (s4w-product-card-collab) این قانون رو نداشت، پس «position: relative» برای موقعیت‌دهیِ برچسبِ «🤝 همکاری با ...» (که position:absolute داره) روی خودِ کارت وجود نداشت؛ در نتیجه برچسب به نزدیک‌ترین جدِ positioned بالاتر می‌چسبید و بالای کل صفحه ظاهر می‌شد، نه روی عکسِ همون محصول. */ .s4w-work-card-collab, .s4w-product-card-collab { position: relative; border: 1px solid rgba(255,255,255,0.15); } .s4w-card-collab-badge { position: absolute; top: 6px; right: 6px; left: 6px; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.68rem; padding: 3px 8px; border-radius: 20px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s4w-card-collab-role { display: block; font-size: 0.72rem; opacity: 0.75; margin-top: 2px; } /* 🆕 v1.6.1: جعبه‌ی درخواست‌های تگ همکاری با ۳ دکمه‌ی پاسخ */ .s4w-pending-tags { margin: 14px 0; padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.05); } .s4w-pending-tags ul { list-style: none; padding: 0; margin: 8px 0 0; } .s4w-pending-tag-item { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.08); } .s4w-pending-tag-item:first-child { border-top: none; } .s4w-pending-tag-text { display: block; font-size: 0.85rem; margin-bottom: 8px; } .s4w-pending-tag-preview-link { display: inline-block; margin-inline-start: 6px; } .s4w-pending-tag-actions { display: flex; flex-wrap: wrap; gap: 6px; } .s4w-pending-tag-actions button { font-size: 0.75rem; padding: 6px 10px; border-radius: 6px; border: none; cursor: pointer; } .s4w-tag-accept-visible { background: #2e7d32; color: #fff; } .s4w-tag-accept-hidden { background: #6d6d6d; color: #fff; } .s4w-tag-reject { background: #b32d2e; color: #fff; } /* 🆕 v1.6.2: جعبه‌ی «همکاری‌های من» (سمتِ کاربر تگ‌شده) */ .s4w-my-collabs { margin: 14px 0; padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.05); } .s4w-my-collabs ul { list-style: none; padding: 0; margin: 8px 0 0; } .s4w-my-collab-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.82rem; } .s4w-my-collab-item:first-child { border-top: none; } .s4w-my-collab-remove { background: #b32d2e; color: #fff; border: none; border-radius: 6px; padding: 5px 10px; font-size: 0.72rem; cursor: pointer; flex: none; } /* 🆕 v1.6.2: پنل مدیریت همکاران روی هر کارتِ نمونه‌کار (سمتِ صاحبِ اثر) */ .s4w-manage-tags-toggle-btn { background: transparent; border: 1px solid currentColor; opacity: 0.8; } .s4w-manage-tags-panel { margin-top: 8px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.25); } .s4w-work-tags-manage-list { list-style: none; margin: 0; padding: 0; } .s4w-work-tags-manage-item { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); } .s4w-work-tags-manage-item:first-child { border-top: none; } .s4w-work-tags-manage-item img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; } .s4w-manage-name { font-weight: bold; } .s4w-manage-role { opacity: 0.7; } .s4w-manage-status { margin-inline-start: auto; padding: 2px 8px; border-radius: 20px; font-size: 0.65rem; } .s4w-manage-status-pending { background: #8a6d00; color: #fff; } .s4w-manage-status-accepted { background: #2e7d32; color: #fff; } .s4w-manage-status-rejected { background: #b32d2e; color: #fff; } .s4w-work-tag-remove-btn { background: #b32d2e; color: #fff; border: none; border-radius: 6px; padding: 3px 8px; font-size: 0.68rem; cursor: pointer; flex: none; } /* 🆕 v1.6.3: پاپ‌آپ همکاران (اینستاگرام‌مانند) — جمع‌وجور با عکس کوچک */ .s4w-collab-popup-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; } .s4w-collab-popup { background: #1e1e1e; color: #ddd; border-radius: 12px; width: 90%; max-width: 320px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; } .s4w-collab-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); flex: none; } .s4w-collab-popup-title { font-size: 13px; font-weight: bold; color: #eee; } .s4w-collab-popup-close { background: none; border: none; color: #aaa; font-size: 18px; line-height: 1; cursor: pointer; } .s4w-collab-popup-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; } .s4w-collab-popup-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid rgba(255,255,255,0.06); } .s4w-collab-popup-item:first-child { border-top: none; } .s4w-collab-popup-item img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; } .s4w-cpp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .s4w-cpp-name { font-size: 12px; color: #eee; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s4w-cpp-name:hover { text-decoration: underline; } .s4w-cpp-role { font-size: 10.5px; color: #999; } .s4w-cpp-status { font-size: 9.5px; padding: 2px 7px; border-radius: 20px; flex: none; } .s4w-cpp-status-pending { background: #8a6d00; color: #fff; } .s4w-cpp-status-accepted { background: #2e7d32; color: #fff; } .s4w-cpp-status-rejected { background: #b32d2e; color: #fff; } .s4w-cpp-remove { background: none; border: none; color: #b32d2e; font-size: 16px; line-height: 1; cursor: pointer; flex: none; padding: 0 2px; } .s4w-cpp-empty { padding: 14px 12px; font-size: 12px; color: #999; text-align: center; } /* 🆕 v1.5: کارت محصول قابل‌کلیک */ .s4m-product-card-link { text-decoration: none; color: inherit; display: block; } /* 🆕 v1.5: صفحه‌ی اختصاصی محصول (همین ساختار برای رویداد هم استفاده می‌شود) */ /* 🐛→✅ v2.6.4: طبق درخواست، عکس و تیترِ صفحه‌ی تک‌آیتم باید وسط‌چین باشند؛ بقیه‌ی متن (توضیحات، قیمت، وضعیت) برای خوانایی راست‌چین می‌مانَد. عکس هم کمی بزرگ‌تر شد (420px → 480px). */ .s4w-product-page { text-align: right; } .s4w-product-page-image { display: block; width: 100%; max-width: 480px; /* 🆕 v2.6.4: کمی بزرگ‌تر از قبل (420px)، طبق درخواست */ height: auto; /* نسبت اصلی عکس (۱:۱ یا ۱۶:۹ یا هرچی) حفظ بشه */ margin: 0 auto 16px; border-radius: 12px; } .s4w-product-page-info { flex: 1; min-width: 220px; } .s4w-product-page-info > h2 { text-align: center; } .s4w-product-page-desc { line-height: 1.8; margin: 10px 0; text-align: right; } /* 🆕 v1.5.8: جعبه‌ی درخواست‌های تگ همکاری در انتظار (صفحه‌ی نمونه‌کارهای خودِ کاربر) */ .s4w-pending-tags { background: #fff8e6; border: 1px solid #f0d98c; border-radius: 10px; padding: 12px 16px; margin: 14px 0; } .s4w-pending-tags strong { display: block; margin-bottom: 8px; font-size: 0.95rem; } .s4w-pending-tags ul { list-style: none; margin: 0; padding: 0; } .s4w-pending-tags li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #f0e2b8; } .s4w-pending-tags li:first-child { border-top: none; } .s4w-pending-tags li span { flex: 1; min-width: 200px; font-size: 0.88rem; } .s4w-pending-tags button { border: none; border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 0.82rem; } /* 🆕 v1.6.0: فیلدهای تگ همکار — جستجوی زنده + دراپ‌دانِ چندانتخابیِ نقش 🆕 v1.6.3: قاب مشخص دور کل بخش + دکمه‌ی «+ افزودن» با استایل واضح، هماهنگ با مودال تیره — قبلاً این دکمه هیچ استایلی نداشت و روی پس‌زمینه‌ی تیره‌ی مودال عملاً دیده نمی‌شد. */ .s4w-tag-fields { direction: rtl; border: 1px solid #444; border-radius: 10px; padding: 12px; background: rgba(255,255,255,0.03); } .s4w-tag-remaining-note { color: #999 !important; } .s4w-tag-added-list li { color: #222; } .s4w-tag-results { position: absolute; z-index: 50; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); max-height: 220px; overflow-y: auto; overflow-x: hidden; left: 0; right: 0; width: auto; box-sizing: border-box; margin-top: 2px; } /* 🆕 v1.7.2: عکسِ کاربر سمتِ چپِ ردیف باشه (نه راست) — row-reverse چون این والد dir:rtl هست و اولین فرزندِ DOM (عکس) با flex-direction معمولی سمتِ راست می‌افتاد؛ row-reverse اون رو می‌بره سمتِ چپ. */ .s4w-tag-result-row { padding: 6px 10px; cursor: pointer; font-size: 0.88rem; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; } .s4w-tag-result-row:hover { background: #f4f4f4; } .s4w-tag-result-row img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; } .s4w-tag-result-row .s4w-tag-result-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; } .s4w-tag-result-row .s4w-tag-result-name { font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s4w-tag-result-row .s4w-tag-result-username { direction: ltr; text-align: right; color: #888; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 🆕 v1.8.9: ردیفِ همکارِ اضافه‌شده در سیستمِ یکپارچه‌ی تگ (نمونه‌کار/رویداد/محصول) — عکسِ کوچک + نامِ جمع‌وجور + دراپ‌دانِ چندانتخابیِ نقش (+ فیلدِ درصد فقط برای محصول) + دکمه‌ی حذف، همه در یک ردیفِ کوتاه و شیک. */ .s4w-tag-added-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 8px; background: #f6f7f7; border-radius: 20px; margin-bottom: 6px; } .s4w-tag-added-item img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; } .s4w-tag-added-name { flex: 1 1 auto; font-size: 12.5px; font-weight: 600; color: #222; min-width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s4w-tag-added-percent { width: 58px; padding: 4px 6px; border-radius: 6px; border: 1px solid #bbb; background: #fff; color: #111; font-size: 12px; } .s4w-tag-added-remove { background: none; border: none; color: #b32d2e; font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; } /* 🆕 v1.8.9: دراپ‌دانِ چندانتخابیِ نقش — دکمه‌ی جمع‌وجور که با کلیک، پنلِ چک‌باکسیِ نقش‌ها را باز/بسته می‌کند. جایگزینِ