/* ----------------------------------------------------------------------------- * تولتیپ — کامپوننت مشترک PDP/PLP * * پورت مستقیم کامپوننت `tooltip` دیزاین‌سیستم (next main.css): همان شعاع، پدینگ، * اندازه‌ی فلش، تایپوگرافی و سایه. نام‌ها به `irb-tooltip` فضای‌نام گرفتند چون * `.tooltip` مال بوت‌استرپ است و در این تم لود می‌شود. * * حباب یک المان مشترک است که JS به می‌چسباند و `position:fixed` دارد. * دلیلش این است که PLP و PDP پر از `overflow:hidden` و `.table-responsive`اند و * حبابِ absolute داخل کارت/جدول بریده می‌شد. با fixed روی body هیچ نیایی * نمی‌تواند ببُردش. * * توکن‌ها: تم فعال هیچ‌کدام را تعریف نکرده، پس با مقدار واقعیِ :root پروژه‌ی * next اینجا می‌نشینند (همان قرارداد pages/search.css). * * ⚠️ سلکتورها تک‌خطی‌اند — مینیفایرِ باندل خط جدید را حذف می‌کند و سلکتور * چندخطی بی‌صدا به سلکتور دیگری تبدیل می‌شود. * -------------------------------------------------------------------------- */ .irb-tooltip-bubble { --irb-tooltip-bg: #ffffff; --irb-tooltip-color: #0e121b; --irb-tooltip-desc: #525866; --irb-tooltip-icon: #525866; --irb-tooltip-border-color: #e1e4ea; --irb-tooltip-border-width: 1px; --irb-tooltip-radius: 4px; --irb-tooltip-pad-y: 2px; --irb-tooltip-pad-x: 6px; --irb-tooltip-arrow-w: 8px; --irb-tooltip-arrow-h: 4px; --irb-tooltip-arrow-offset: 8px; --irb-tooltip-max-width: 220px; position: fixed; top: 0; left: 0; z-index: 100000; margin: 0; padding: 0; font-family: var(--Typography-Font-family, "EstedadVF", "EstedadVF Fallback", sans-serif); font-style: normal; text-align: right; text-shadow: none; text-transform: none; letter-spacing: normal; white-space: normal; word-break: normal; word-spacing: normal; overflow-wrap: anywhere; pointer-events: none; opacity: 0; visibility: hidden; transform: translate3d(0, 2px, 0); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; } .irb-tooltip-bubble.is-open { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); transition-delay: 0s; } /* ابعاد فلش به سمت نمایش بستگی دارد، پس پدینگِ ظرف جای فلش را باز می‌کند */ .irb-tooltip-bubble[data-place^="top"] { padding-bottom: var(--irb-tooltip-arrow-h); } .irb-tooltip-bubble[data-place^="bottom"] { padding-top: var(--irb-tooltip-arrow-h); } .irb-tooltip-bubble[data-place="start"] { padding-left: var(--irb-tooltip-arrow-h); } .irb-tooltip-bubble[data-place="end"] { padding-right: var(--irb-tooltip-arrow-h); } .irb-tooltip-bubble__inner { display: block; width: max-content; max-width: min(var(--irb-tooltip-max-width), calc(100vw - 24px)); padding: var(--irb-tooltip-pad-y) var(--irb-tooltip-pad-x); font-size: 12px; line-height: 20px; font-variation-settings: "wght" 400, "KSHD" 100; font-weight: 400; color: var(--irb-tooltip-color); text-align: right; background-color: var(--irb-tooltip-bg); border: var(--irb-tooltip-border-width) solid var(--irb-tooltip-border-color); border-radius: var(--irb-tooltip-radius); box-shadow: 0 12px 24px 0 rgba(14, 18, 27, .06), 0 1px 2px 0 rgba(14, 18, 27, .03); } /* فلش دو لایه است: ::before رنگ بردر را می‌سازد و ::after پس‌زمینه را رویش */ .irb-tooltip-bubble__arrow { position: absolute; display: block; inset: auto; width: var(--irb-tooltip-arrow-w); height: var(--irb-tooltip-arrow-h); pointer-events: none; } .irb-tooltip-bubble__arrow::before, .irb-tooltip-bubble__arrow::after { content: ""; position: absolute; inset: auto; width: 0; height: 0; border-style: solid; border-color: transparent; } .irb-tooltip-bubble[data-place^="top"] .irb-tooltip-bubble__arrow { bottom: 0; } .irb-tooltip-bubble[data-place^="top"] .irb-tooltip-bubble__arrow::before { top: 0; border-width: var(--irb-tooltip-arrow-h) calc(var(--irb-tooltip-arrow-w) / 2) 0; border-top-color: var(--irb-tooltip-border-color); } .irb-tooltip-bubble[data-place^="top"] .irb-tooltip-bubble__arrow::after { top: calc(var(--irb-tooltip-border-width) * -1); border-width: var(--irb-tooltip-arrow-h) calc(var(--irb-tooltip-arrow-w) / 2) 0; border-top-color: var(--irb-tooltip-bg); } .irb-tooltip-bubble[data-place^="bottom"] .irb-tooltip-bubble__arrow { top: 0; } .irb-tooltip-bubble[data-place^="bottom"] .irb-tooltip-bubble__arrow::before { bottom: 0; border-width: 0 calc(var(--irb-tooltip-arrow-w) / 2) var(--irb-tooltip-arrow-h); border-bottom-color: var(--irb-tooltip-border-color); } .irb-tooltip-bubble[data-place^="bottom"] .irb-tooltip-bubble__arrow::after { bottom: calc(var(--irb-tooltip-border-width) * -1); border-width: 0 calc(var(--irb-tooltip-arrow-w) / 2) var(--irb-tooltip-arrow-h); border-bottom-color: var(--irb-tooltip-bg); } /* start = سمت شروعِ خط (در RTL: راستِ تریگر) — فلش روی لبه‌ی راستِ حباب */ .irb-tooltip-bubble[data-place="start"] .irb-tooltip-bubble__arrow { top: 50%; left: 0; width: var(--irb-tooltip-arrow-h); height: var(--irb-tooltip-arrow-w); transform: translateY(-50%); } .irb-tooltip-bubble[data-place="start"] .irb-tooltip-bubble__arrow::before { top: 0; right: 0; border-width: calc(var(--irb-tooltip-arrow-w) / 2) var(--irb-tooltip-arrow-h) calc(var(--irb-tooltip-arrow-w) / 2) 0; border-right-color: var(--irb-tooltip-border-color); } .irb-tooltip-bubble[data-place="start"] .irb-tooltip-bubble__arrow::after { top: 0; right: calc(var(--irb-tooltip-border-width) * -1); border-width: calc(var(--irb-tooltip-arrow-w) / 2) var(--irb-tooltip-arrow-h) calc(var(--irb-tooltip-arrow-w) / 2) 0; border-right-color: var(--irb-tooltip-bg); } .irb-tooltip-bubble[data-place="end"] .irb-tooltip-bubble__arrow { top: 50%; right: 0; width: var(--irb-tooltip-arrow-h); height: var(--irb-tooltip-arrow-w); transform: translateY(-50%); } .irb-tooltip-bubble[data-place="end"] .irb-tooltip-bubble__arrow::before { top: 0; left: 0; border-width: calc(var(--irb-tooltip-arrow-w) / 2) 0 calc(var(--irb-tooltip-arrow-w) / 2) var(--irb-tooltip-arrow-h); border-left-color: var(--irb-tooltip-border-color); } .irb-tooltip-bubble[data-place="end"] .irb-tooltip-bubble__arrow::after { top: 0; left: calc(var(--irb-tooltip-border-width) * -1); border-width: calc(var(--irb-tooltip-arrow-w) / 2) 0 calc(var(--irb-tooltip-arrow-w) / 2) var(--irb-tooltip-arrow-h); border-left-color: var(--irb-tooltip-bg); } /* ---------------------------------- اندازه‌ها -------------------------------- * مقادیر عیناً از دیزاین‌سیستم‌اند، فقط نامشان عوض شده چون آنجا گیج‌کننده است: * sm (پیش‌فرضِ DS) — ۱۲px، پدینگ ۲/۶ — اشاره‌ی کوتاه («کپی شد») * md (DS: --xs) — ۱۴px، پدینگ ۴/۱۰ — توضیح یک‌ودوخطی (پیش‌فرض ما) * lg (DS: --large) — آیکن + تیتر + توضیح، ۲۸۰px * ------------------------------------------------------------------------- */ .irb-tooltip-bubble[data-size="md"] { --irb-tooltip-radius: 6px; --irb-tooltip-pad-y: 4px; --irb-tooltip-pad-x: 10px; --irb-tooltip-arrow-w: 12px; --irb-tooltip-arrow-h: 6px; --irb-tooltip-arrow-offset: 12px; } .irb-tooltip-bubble[data-size="md"] .irb-tooltip-bubble__inner { font-size: 14px; line-height: 22px; } .irb-tooltip-bubble[data-size="lg"] { --irb-tooltip-radius: 12px; --irb-tooltip-pad-y: 12px; --irb-tooltip-pad-x: 12px; --irb-tooltip-arrow-w: 12px; --irb-tooltip-arrow-h: 6px; --irb-tooltip-arrow-offset: 16px; --irb-tooltip-max-width: 280px; } .irb-tooltip-bubble[data-size="lg"] .irb-tooltip-bubble__inner { display: flex; align-items: flex-start; gap: 12px; width: min(280px, calc(100vw - 24px)); } .irb-tooltip-bubble__content { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; } .irb-tooltip-bubble__title { font-size: 14px; line-height: 22px; font-variation-settings: "wght" 500, "KSHD" 100; font-weight: 500; color: var(--irb-tooltip-color); } .irb-tooltip-bubble__desc { font-size: 12px; line-height: 20px; font-variation-settings: "wght" 400, "KSHD" 100; font-weight: 400; color: var(--irb-tooltip-desc); } /* ------------------------------- تریگر (آیکن ⓘ) ------------------------------ */ .irb-tooltip { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; margin: 0; vertical-align: -2px; color: #99a0ae; background: transparent; border: 0; border-radius: 50%; cursor: help; -webkit-appearance: none; appearance: none; transition: color .14s ease; } /* (0,2,1) تا قاعده‌ی svg[height]{height:unset} تم را ببرد */ .irb-tooltip > svg { display: block; width: 14px; height: 14px; } .irb-tooltip:hover, .irb-tooltip:focus-visible, .irb-tooltip[aria-expanded="true"] { color: #525866; } .irb-tooltip:focus { outline: none; } .irb-tooltip:focus-visible { outline: 2px solid #185adb; outline-offset: 2px; } /* تریگر روی یک المان موجود (بدون آیکن): فقط نشانه‌ی تعامل */ .irb-tooltip-target { cursor: help; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #cacfd8; } @media (prefers-reduced-motion: reduce) { .irb-tooltip-bubble { transition: opacity .01ms linear, visibility 0s linear .01ms; transform: none; } .irb-tooltip-bubble.is-open { transform: none; } } /* دارک‌مود تم با [data-theme] است نه prefers-color-scheme */ [data-theme="dark"] .irb-tooltip-bubble { --irb-tooltip-bg: #0e121b; --irb-tooltip-color: #ffffff; --irb-tooltip-desc: #99a0ae; --irb-tooltip-icon: #99a0ae; --irb-tooltip-border-color: transparent; --irb-tooltip-border-width: 0px; }