/* ===================================================================== xco-app-native.css --------------------------------------------------------------------- هدف: وقتی سایت داخل اپ اندروید اکسکو (TWA) باز شده، حس «اپلیکیشن واقعی» بدهد نه یک صفحه‌ی وب داخل قاب: ۱) لمسِ ممتد (long-press) روی دکمه/لینک/تصویر/باکس‌های عادی، منوی پیش‌فرض مرورگر (باز کردن در تب جدید، هم‌رسانی پیوند، ذخیره‌ی تصویر و ...) را باز نکند. ۲) لمسِ ممتد روی متن‌های عادی سایت باکس «کپی/جستجو/ترجمه»ی گوشی را باز نکند. ۳) هر جایی که کاربر واقعاً متن وارد/ویرایش می‌کند (input، textarea، ادیتور محتوا و ...) دقیقاً مثل قبل، انتخاب/کپی/پیست/منوی گوشی کامل و طبیعی کار کند. نکته‌ی مهم (اصلاح‌شده): نسخه‌ی اول این فایل قانون‌های user-select و touch-action را روی خودِ (یعنی همان عنصری که در حالت TWA واقعاً اسکرول می‌شود) و با سلکتور همه‌گیر "*" اعمال می‌کرد؛ این ترکیب در وب‌ویوی TWA اندروید باعث قفل‌شدن کامل اسکرول صفحه شد. برای همین: - user-select/touch-callout فقط روی تنظیم می‌شود (نه و نه با "*")؛ چون این دو خاصیت به‌صورت طبیعی به فرزندان ارث می‌رسند، نیازی به تکرار روی تک‌تک عناصر نیست. - touch-action و overscroll-behavior کلاً از روی / حذف شدند (نه ضروری برای خواسته‌ی اصلی، و پرخطر برای اسکرول). همه‌ی قواعد این فایل فقط زیرِ کلاس ".xco-app-mode" اعمال می‌شوند - این کلاس فقط وقتی به اضافه می‌شود که سایت واقعاً داخل اپ اندروید باز شده باشد؛ نگاه کنید به اسکریپت ابتدای در app/Views/layout/header.php. در مرورگر معمولی، هیچ‌کدام از این قواعد فعال نمی‌شوند. ===================================================================== */ /* حذف هایلایت آبی/خاکستری پیش‌فرض هنگام تپ روی لینک/دکمه در کروم موبایل - کاملاً بصری/بی‌خطر، تأثیری روی اسکرول ندارد. */ html.xco-app-mode { -webkit-tap-highlight-color: transparent; } /* --------------------------------------------------------------------- هسته‌ی اصلی: عدم قابلیت انتخاب متن + عدم callout روی تنظیم می‌شود (نه ، نه با سلکتور "*")؛ چون این دو خاصیت به فرزندان ارث می‌رسند، همین یک قانون کل صفحه را می‌پوشاند بدون دست‌کاری مستقیم خودِ عنصر اسکرول‌شونده. --------------------------------------------------------------------- */ html.xco-app-mode body { -webkit-touch-callout: none; /* منوی لمسِ ممتد سافاری/وب‌ویو (کپی/هم‌رسانی/ذخیره) */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* جلوگیری از باز شدن منوی «ذخیره/هم‌رسانی تصویر» و درگ‌کردن تصاویر با لمسِ ممتد */ html.xco-app-mode img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } /* --------------------------------------------------------------------- استثناها: هر جا کاربر واقعاً متن وارد/ویرایش می‌کند یا صراحتاً باید قابل‌انتخاب/کپی باشد، انتخاب متن و منوی گوشی کاملاً عادی برمی‌گردد. --------------------------------------------------------------------- */ html.xco-app-mode input, html.xco-app-mode textarea, html.xco-app-mode select, html.xco-app-mode option, html.xco-app-mode [contenteditable="true"], html.xco-app-mode [contenteditable=""], /* برای مواردی مثل کد پیگیری سفارش، شماره‌ی کارت/شبا، کد معرف و... که قرار است کاربر بتواند با انگشتش نگه‌دارد و کپی کند، کلاس زیر را روی همان عنصر اضافه کنید: ... */ html.xco-app-mode .xco-copyable, html.xco-app-mode .xco-copyable * { -webkit-touch-callout: default; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* --------------------------------------------------------------------- حذف اسکرول‌بار مرورگر در کانتینرهای اسکرول‌شونده‌ی داخلیِ پنل (افقی/عمودی): اسکرول‌بار عریض و خاکستریِ کروم روی نواحیِ اسکرول‌شونده‌ی داخلی - جدول‌های عریض (.table-responsive)، لیست‌های افقی مثل مقایسه‌ی پیشنهادها، یا لیست‌های عمودیِ چت/نوتیفیکیشن/چیپ‌های خدمت/چک‌لیست پروفایل/بایاتم‌شیت/آفکنواس - یکی از واضح‌ترین نشانه‌های «این یک وب‌سایت است» است و حس «اپ بومی» را از بین می‌برد. عمداً همین‌جا (زیر xco-app-mode، مثل بقیه‌ی این فایل) خاموش می‌شود، نه به‌صورت سراسری در style.css: در نسخه‌ی دسکتاپ/موبایل-وب، اسکرول‌بارِ نازک سراسریِ style.css (بخش «Custom scrollbar») هم زیبا و هم برای کاربر ماوس/تاچ‌پد یک نشانه‌ی «این ناحیه اسکرول دارد» و قابل‌درگ‌کردن است، پس نباید حذف شود. داخل اپ که فقط با انگشت اسکرول می‌شود، همان نوار صرفاً نویز بصری‌ست. در هر دو حالت خودِ اسکرول کاملاً فعال می‌ماند - فقط نوارش دیده نمی‌شود - پس هیچ قابلیتی/دسترس‌پذیری‌ای از دست نمی‌رود؛ به همین دلیل هم روی کل / اعمال نشده (آن‌جا برای دسترس‌پذیریِ ناوبریِ کلی صفحه بهتر است دست‌نخورده بماند). --------------------------------------------------------------------- */ html.xco-app-mode .table-responsive, html.xco-app-mode .offer-compare-scroll, html.xco-app-mode .notif-dropdown-list, html.xco-app-mode #serviceChipGrid, html.xco-app-mode #specialtyChipGrid, html.xco-app-mode .specialty-results-scroll, html.xco-app-mode .chat-thread-body, html.xco-app-mode .chat-thread-form textarea.form-control, html.xco-app-mode .profile-checklist-panel, html.xco-app-mode .modal.modal-bottom-sheet .modal-body, html.xco-app-mode .offcanvas-body { scrollbar-width: none; -ms-overflow-style: none; } html.xco-app-mode .table-responsive::-webkit-scrollbar, html.xco-app-mode .offer-compare-scroll::-webkit-scrollbar, html.xco-app-mode .notif-dropdown-list::-webkit-scrollbar, html.xco-app-mode #serviceChipGrid::-webkit-scrollbar, html.xco-app-mode #specialtyChipGrid::-webkit-scrollbar, html.xco-app-mode .specialty-results-scroll::-webkit-scrollbar, html.xco-app-mode .chat-thread-body::-webkit-scrollbar, html.xco-app-mode .chat-thread-form textarea.form-control::-webkit-scrollbar, html.xco-app-mode .profile-checklist-panel::-webkit-scrollbar, html.xco-app-mode .modal.modal-bottom-sheet .modal-body::-webkit-scrollbar, html.xco-app-mode .offcanvas-body::-webkit-scrollbar { display: none; width: 0; height: 0; }