/* ========================================================== اصلاحات نمایش موبایل (فیزیک‌لند) این فایل باید آخرین فایل CSS لود شده در باشد تا بتواند تداخل‌های قبلی هدر/سایدبار را رفع کند و باکس‌های عرض‌ثابتِ ساخته‌شده توسط جاوااسکریپت (مودال‌ها، پنل ادمین و ...) را برای گوشی واکنش‌گرا کند. ========================================================== */ /* جلوگیری از اسکرول افقی ناخواسته در کل صفحه */ html, body { max-width: 100%; overflow-x: hidden; } /* ------------------------------------------------------------ ۱) رفع باگ: باز بودن سایدبار روی هدر بسته نمی‌شود لایه‌ی تیره (overlay) باید بالاتر از هدر بنشیند تا هم هدر را موقع باز بودن منو غیرقابل‌کلیک/تار کند و هم با کلیک روی آن (طبق app.js) سایدبار بسته شود. ------------------------------------------------------------ */ #overlay { z-index: 100000; /* بالاتر از هدر (1000) و پایین‌تر از سایدبار (99999... ) */ } .sidebar { z-index: 100001; /* همیشه بالاتر از overlay بماند */ } /* ------------------------------------------------------------ ۲) بازطراحیِ هدر برای گوشی: لوگو + (دکمه ورود و همبرگری) در یک ردیف بالا (با ترفند flex-wrap، نه position:absolute، تا دکمه ورود و همبرگری واقعاً کنار هم و هم‌تراز باشن)، زیرش ناوبری به‌صورت یک خط اسکرول‌شونده ------------------------------------------------------------ */ @media screen and (max-width: 768px) { .main-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 12px 15px 10px; text-align: initial; } /* سمت راست ردیف اول: لوگو + عنوان سایت */ .header-right { order: 1; width: auto; display: flex; } .brand-section { gap: 8px; } .logo { width: 40px; height: 40px; } .site-info h1 { font-size: 17px; margin-bottom: 0; } .site-info p { display: none; } /* سمت چپ ردیف اول: دکمه ورود + همبرگری، کنار هم و هم‌تراز */ .action-section { order: 2; width: auto; margin: 0; gap: 10px; align-items: center; } /* کادر سرچ تو گوشی جا نمی‌شود؛ داخل سایدبار/جستجوی دیگری در دسترسه */ .search-box { display: none; } .login-btn { white-space: nowrap; padding: 8px 16px !important; font-size: 13px !important; line-height: 1; } .hamburger-menu { margin: 0; width: 34px; height: 34px; } /* ردیف دوم: منوی اصلی - یک خط قابل اسکرول افقی به‌جای چندین خط شلوغ، تمام عرض */ .main-nav { order: 3; flex-basis: 100%; width: 100%; margin: 16px 0 0; overflow: visible; } .main-nav ul { flex-wrap: nowrap !important; justify-content: flex-start; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 4px 12px; margin: 0; scrollbar-width: none; } .main-nav ul::-webkit-scrollbar { display: none; } /* دکمه‌های منو به شکل قرص (pill) با پس‌زمینه و حاشیه‌ی محو، به‌جای متن‌های ولِ شناور */ .main-nav ul li { flex-shrink: 0; } .main-nav ul li a { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: #e7defc; padding: 9px 18px; border-radius: 50px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); opacity: 1; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease; } /* حذف خط زیرینِ نسخه دسکتاپ که تو قرص گوشی معنی نداره */ .main-nav ul li a::after { display: none !important; } .main-nav ul li a:active, .main-nav ul li a.nav-active { background: rgba(255, 183, 3, 0.16); border-color: rgba(255, 183, 3, 0.55); color: #ffb703; transform: scale(0.97); } /* دکمه «خانه» با رنگ برند کمی برجسته‌تر دیده میشه تا نقطه شروع منو مشخص باشه */ .main-nav ul li a.nav-home { background: rgba(255, 183, 3, 0.14); border-color: rgba(255, 183, 3, 0.4); color: #ffb703; } @keyframes navRowFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* منوی کشویی «پایه‌ها»: چون هاور روی گوشی کار نمی‌کند، با تپ/کلیک (کلاس open که با جاوااسکریپت اضافه می‌شود) باز می‌شود */ .dropdown-menu { top: calc(100% + 8px); } .dropdown.open .dropdown-menu { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) !important; } .dropdown.open > a svg { transform: rotate(180deg); } } @media (prefers-reduced-motion: reduce) { .main-nav { animation: none; } } @media screen and (max-width: 480px) { .site-info h1 { font-size: 16px; } .main-nav ul { gap: 14px; } .main-nav ul li a { font-size: 13px; } .login-btn { padding: 7px 12px !important; font-size: 12px !important; } } /* ------------------------------------------------------------ ۳) سایدبار در گوشی‌های خیلی کوچک کمی عریض‌تر و خواناتر شود ------------------------------------------------------------ */ @media screen and (max-width: 380px) { .sidebar { width: 82vw; left: -82vw; } } /* ------------------------------------------------------------ ۴) رفع مودال‌ها/باکس‌های عرض‌ثابت که مستقیم داخل جاوااسکریپت با px هاردکد شده‌اند (پنل ادمین، افزودن دوست، ثبت‌نام و ...). نکته‌ی مهم: سلکتور باید با یک فاصله/سمی‌کالن قبل از «width» شروع بشه، وگرنه با «max-width:450px» هم قاطی می‌شه و باکس‌هایی که از قبل با width:90% + max-width درست‌وحسابی ریسپانسیو بودن رو خراب می‌کنه (همون چیزی که باعث بهم‌ریختگیِ وسط‌چینی شد). همچنین به‌جای override کردنِ width، فقط یک سقفِ max-width اضافه می‌کنیم تا منطق وسط‌چینیِ خودِ عنصر (margin:auto یا justify-content:center والد) دست‌نخورده بمونه. ------------------------------------------------------------ */ @media screen and (max-width: 600px) { div[style*=" width:400px"], div[style*=" width: 400px"], div[style*=" width:450px"], div[style*=" width: 450px"], div[style*=" width:500px"], div[style*=" width: 500px"], div[style*=" width:460px"], div[style*=" width: 460px"], form[style*=" width:400px"], form[style*=" width: 400px"], #signupForm, #avatarGrid { max-width: 92vw !important; } } /* ------------------------------------------------------------ ۶) رفع تداخل دکمه ضربدر با عکس آواتار در صفحه‌ی چت با دوست دکمه ضربدر position:fixed با top/right ثابت بود؛ چون تو گوشی باکس چت تقریباً کل عرض صفحه رو می‌گیره، آواتار (که گوشه‌ی بالا-راستِ باکسه) درست زیر دکمه ضربدر می‌افتاد. راه‌حل: باکسِ چت رو کمی از بالا فاصله می‌دیم و خودِ دکمه رو کوچک‌تر و چسبیده به گوشه می‌کنیم تا با هم قاطی نشن. ------------------------------------------------------------ */ @media screen and (max-width: 600px) { #chatFullModal { align-items: flex-start !important; padding-top: 60px; box-sizing: border-box; } #chatFullModal > div { height: 75vh !important; max-height: calc(100vh - 80px) !important; } .close-main-btn { top: 10px !important; right: 10px !important; width: 38px !important; height: 38px !important; font-size: 20px !important; } } @media screen and (max-width: 768px) { #admin-panel-view { padding: 12px !important; } #admin-panel-view .admin-toolbar-row { flex-direction: column; align-items: stretch !important; gap: 10px; } #admin-panel-view .admin-back-btn { align-self: flex-start; border-radius: 8px; background: #eee; border: none; } #admin-panel-view .admin-btn-group { width: 100%; justify-content: center; gap: 8px !important; } #admin-panel-view .admin-btn-group button { padding: 9px 14px !important; font-size: 13px !important; flex: 1 1 auto; justify-content: center !important; } #admin-panel-view h2 { font-size: 17px; margin: 14px 0 10px; } #admin-panel-view .admin-table-wrap { border-radius: 10px; border: 1px solid #eee; -webkit-overflow-scrolling: touch; } #admin-panel-view .admin-users-table { font-size: 10px !important; min-width: 640px; /* اجازه بده جدول به‌جای فشرده شدن، اسکرول بخورد */ } #admin-panel-view .admin-users-table th, #admin-panel-view .admin-users-table td { padding: 6px 4px !important; white-space: nowrap; } } @media screen and (max-width: 480px) { #admin-panel-view .admin-btn-group button { font-size: 12px !important; padding: 8px 10px !important; } }