/* ========================================================================== سیستم ۴ تم (۲ روشن، ۲ تیره) برای آرت‌جو با data-theme روی اعمال می‌شود. متغیرهای سمنتیک + بازنگاشت کلاس‌های یوتیلیتی هاردکدشده تا کل رابط از تم تبعیت کند. نسخه‌ی newapp - پورت‌شده از website/app/assets/css/themes.css، همان پالت رنگی عددی را دارد (text-gray-XX/bg-primary-XX/...) پس منطق یکسان است. ========================================================================== */ /* ---------- پالت تم‌ها ---------- */ [data-theme="light"] { --app-bg: #f4f5f7; --surface: #ffffff; --surface-2: #f7f8fa; --text: #13284f; --text-muted: #6b7280; --border: #e9ecef; --accent: #ce571e; --accent-soft: #fdf3ec; --accent-contrast: #ffffff; --shadow: rgba(15, 23, 42, 0.08); --shimmer-base: #f0f0f0; --shimmer-highlight: #e0e0e0; } [data-theme="sky"] { --app-bg: #eaf1fb; --surface: #ffffff; --surface-2: #f1f6fd; --text: #0f2747; --text-muted: #5b6b86; --border: #d8e4f5; --accent: #2f6bff; --accent-soft: #e7efff; --accent-contrast: #ffffff; --shadow: rgba(20, 50, 110, 0.10); --shimmer-base: #eef2f8; --shimmer-highlight: #dde6f5; } [data-theme="dark"] { --app-bg: #15171c; --surface: #1e2128; --surface-2: #262a33; --text: #e8eaed; --text-muted: #9aa1ad; --border: #313742; --accent: #ce571e; --accent-soft: #3a2c12; --accent-contrast: #1a1a1a; --shadow: rgba(0, 0, 0, 0.45); --shimmer-base: #2a2f38; --shimmer-highlight: #3a404b; } [data-theme="midnight"] { --app-bg: #0e1322; --surface: #161d33; --surface-2: #1e2742; --text: #e6e9f5; --text-muted: #97a0c0; --border: #28324f; --accent: #7c8cff; --accent-soft: #1e2742; --accent-contrast: #0e1322; --shadow: rgba(0, 0, 0, 0.5); --shimmer-base: #1f2742; --shimmer-highlight: #2c3557; } /* ---------- نگاشت متغیرهای بوت‌استرپ به متغیرهای تم ---------- */ [data-theme] { --bs-body-bg: var(--app-bg); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-secondary-color: var(--text-muted); --bs-emphasis-color: var(--text); --bs-heading-color: var(--text); --bs-primary: var(--accent); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent); } html[data-theme] body { background-color: var(--app-bg); color: var(--text); } /* ---------- بازنگاشت کلاس‌های یوتیلیتی پرکاربرد ---------- نکته: کلاس‌های پایه‌ی newapp (style.css) خودشان !important دارند، بنابراین برد این قوانین با تساوی !important به کمک تخصیص‌پذیری (attribute selector) حل می‌شود - [data-theme] .text-gray-00 مشخص‌تر از .text-gray-00 است، پس همچنان همین قوانین برنده‌اند. */ /* سطوح (کارت/هدر/مودال) */ [data-theme] .bg-white, [data-theme] .bg-gray-100 { background-color: var(--surface) !important; } /* سطوح فرورفته/ملایم */ [data-theme] .bg-gray-99, [data-theme] .bg-gray-95, [data-theme] .bg-light, [data-theme] .bg-background { background-color: var(--surface-2) !important; } /* متن اصلی */ [data-theme] .text-dark, [data-theme] .text-black, [data-theme] .text-gray-00, [data-theme] .text-gray-10, [data-theme] .text-gray-20, [data-theme] .text-gray-30, [data-theme] .text-secondary-00, [data-theme] .text-secondary-10, [data-theme] .text-secondary-20, [data-theme] .text-secondary-30 { color: var(--text) !important; } /* متن کم‌رنگ/ثانویه */ [data-theme] .text-muted, [data-theme] .text-gray-40, [data-theme] .text-gray-50, [data-theme] .text-gray-60, [data-theme] .text-gray-70 { color: var(--text-muted) !important; } /* رنگ تأکید (برند) */ [data-theme] .text-primary-30, [data-theme] .text-primary-40, [data-theme] .text-primary-50, [data-theme] .text-primary-60, [data-theme] .text-default { color: var(--accent) !important; } [data-theme] .bg-primary-40, [data-theme] .bg-primary-50, [data-theme] .bg-primary-60, [data-theme] .bg-default { background-color: var(--accent) !important; } [data-theme] .bg-primary-90, [data-theme] .bg-primary-95, [data-theme] .bg-primary-99 { background-color: var(--accent-soft) !important; } /* پس‌زمینه‌های آبی ملایم (secondary) - هم‌خانواده‌ی bg-gray-9x/bg-white بالا، وگرنه با متن‌های text-secondary-0x تا 3x (که به var(--text) نگاشت می‌شوند) در تم تیره ناخوانا می‌شوند */ [data-theme] .bg-secondary-100 { background-color: var(--surface) !important; } [data-theme] .bg-secondary-95, [data-theme] .bg-secondary-99 { background-color: var(--surface-2) !important; } /* دکمه‌ها */ [data-theme] .btn-default { background: var(--accent) !important; color: var(--accent-contrast) !important; } [data-theme] .btn-default i { color: var(--accent-contrast) !important; } /* مرزها */ [data-theme] .border, [data-theme] .border-top, [data-theme] .border-bottom, [data-theme] .border-start, [data-theme] .border-end, [data-theme] .border-light, [data-theme] .border-light-subtle { border-color: var(--border) !important; } /* لیست‌گروه/کارت/آفکانواس/مودال‌های بوت‌استرپ */ [data-theme] .card, [data-theme] .list-group-item, [data-theme] .offcanvas, [data-theme] .modal-content, [data-theme] .dropdown-menu { background-color: var(--surface); color: var(--text); border-color: var(--border); } /* ورودی‌ها */ [data-theme] .form-control, [data-theme] .form-select { background-color: var(--surface-2); border-color: var(--border); color: var(--text); } [data-theme] .form-control::placeholder { color: var(--text-muted); } /* ---------- سایدبار همبرگری ---------- */ [data-theme] .sidebar-container { background-color: var(--surface) !important; } /* ---------- اسکرول‌بار ---------- */ [data-theme="dark"] ::-webkit-scrollbar-track, [data-theme="midnight"] ::-webkit-scrollbar-track { background: var(--surface-2); } /* ---------- اجزای سفارشی: هماهنگی با حالت شب ---------- */ /* پیشوند html برای اینکه از استایل‌های scoped کامپوننت‌ها قوی‌تر باشد */ /* دکمه‌های شناور دانلود اپ */ html[data-theme="dark"] .store-box, html[data-theme="midnight"] .store-box { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .store-box-android .store-label, html[data-theme="midnight"] .store-box-android .store-label { color: #6ee7a8; } html[data-theme="dark"] .store-box-ios .store-label, html[data-theme="midnight"] .store-box-ios .store-label { color: var(--text); } html[data-theme="dark"] .store-badge-ios, html[data-theme="midnight"] .store-badge-ios { background: linear-gradient(135deg, #9aa0a6 0%, #3c4043 100%); } /* بنر شناور */ html[data-theme="dark"] .floating-banner, html[data-theme="midnight"] .floating-banner { background: var(--surface); } /* نویگیشن هدر دسکتاپ */ html[data-theme="dark"] .desktop-nav-link, html[data-theme="midnight"] .desktop-nav-link { color: var(--text); } html[data-theme="dark"] .nav-account:hover, html[data-theme="dark"] .nav-chat:hover, html[data-theme="dark"] .nav-support:hover, html[data-theme="dark"] .nav-login:hover, html[data-theme="dark"] .nav-logout:hover, html[data-theme="midnight"] .nav-account:hover, html[data-theme="midnight"] .nav-chat:hover, html[data-theme="midnight"] .nav-support:hover, html[data-theme="midnight"] .nav-login:hover, html[data-theme="midnight"] .nav-logout:hover { background: var(--surface-2); color: var(--text); } html[data-theme="dark"] .nav-dropdown-menu, html[data-theme="midnight"] .nav-dropdown-menu { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .nav-dropdown-item, html[data-theme="midnight"] .nav-dropdown-item { color: var(--text); } html[data-theme="dark"] .nav-dropdown-item:hover, html[data-theme="midnight"] .nav-dropdown-item:hover { background: var(--surface-2); color: var(--accent); } /* دکمه انتخاب موقعیت */ html[data-theme="dark"] .location-btn, html[data-theme="midnight"] .location-btn { background: var(--surface-2); border-color: var(--border) !important; color: var(--text); } html[data-theme="dark"] .location-btn:hover, html[data-theme="midnight"] .location-btn:hover { border-color: #e53935 !important; } html[data-theme="dark"] .location-text, html[data-theme="midnight"] .location-text { color: var(--text); } html[data-theme="dark"] .location-btn.is-selected .location-text, html[data-theme="midnight"] .location-btn.is-selected .location-text { color: #ff8a80; } /* فرم ارتباط با ما */ html[data-theme="dark"] .contact-hero, html[data-theme="midnight"] .contact-hero { background: var(--surface-2); border-color: var(--border); } html[data-theme="dark"] .field, html[data-theme="midnight"] .field { background: var(--surface-2); border-color: var(--border); } html[data-theme="dark"] .field:focus-within, html[data-theme="midnight"] .field:focus-within { background: var(--surface); border-color: var(--accent); } html[data-theme="dark"] .field-input, html[data-theme="midnight"] .field-input { color: var(--text); } html[data-theme="dark"] .subject-chip, html[data-theme="midnight"] .subject-chip { background: var(--surface); border-color: var(--border); color: var(--text-muted); } html[data-theme="dark"] .subject-chip.is-active, html[data-theme="midnight"] .subject-chip.is-active { color: #ffffff; border-color: transparent; } /* ---------- دسته‌بندی و انتخاب موقعیت در حالت شب ---------- */ /* کارت‌های دسته‌بندی (تب‌های موبایل) — قبلاً پس‌زمینه‌ی سفید ثابت داشتند و متن روشنِ تم روی آن ناخوانا می‌شد */ html[data-theme="dark"] .category-tab, html[data-theme="midnight"] .category-tab { background: var(--surface); border-color: var(--border) !important; } html[data-theme="dark"] .category-tab.is-active, html[data-theme="midnight"] .category-tab.is-active { background-color: var(--accent); border-color: var(--accent) !important; } html[data-theme="dark"] .category-tab-panel, html[data-theme="midnight"] .category-tab-panel { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .category-chip, html[data-theme="midnight"] .category-chip { background: var(--surface-2); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .category-chip:hover, html[data-theme="midnight"] .category-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } html[data-theme="dark"] .breadcrumb-crumb, html[data-theme="midnight"] .breadcrumb-crumb { color: var(--text); } /* درخت دسته‌بندی سایدبار دسکتاپ */ html[data-theme="dark"] .category-tree-row:hover, html[data-theme="midnight"] .category-tree-row:hover { background: var(--accent-soft); } html[data-theme="dark"] .category-tree-row:hover .cat-title, html[data-theme="midnight"] .category-tree-row:hover .cat-title { color: var(--accent); } html[data-theme="dark"] .category-tree-row.is-active, html[data-theme="midnight"] .category-tree-row.is-active { background: var(--accent-soft); } html[data-theme="dark"] .category-tree-children, html[data-theme="midnight"] .category-tree-children { background: var(--surface-2); } /* آیتم‌های انتخاب استان و شهر — کلاس‌های کمکی داخل کامپوننت با !important بازتعریف شده‌اند، پس اینجا هم با !important و سلکتور قوی‌تر جبران می‌شود */ html[data-theme="dark"] .location-item, html[data-theme="midnight"] .location-item { background: var(--surface) !important; } html[data-theme="dark"] .location-item:hover, html[data-theme="midnight"] .location-item:hover { background: var(--accent-soft) !important; border-color: var(--accent) !important; } html[data-theme="dark"] .location-item.bg-primary-99, html[data-theme="midnight"] .location-item.bg-primary-99 { background: var(--accent-soft) !important; } html[data-theme="dark"] .location-item .bg-gray-20, html[data-theme="midnight"] .location-item .bg-gray-20 { background: var(--surface-2) !important; } html[data-theme="dark"] .location-item.border-light, html[data-theme="midnight"] .location-item.border-light { border-color: var(--border) !important; } html[data-theme="dark"] .modal-content-wrapper .text-gray-30, html[data-theme="midnight"] .modal-content-wrapper .text-gray-30 { color: var(--text-muted) !important; } html[data-theme="dark"] .btn-outline-secondary, html[data-theme="midnight"] .btn-outline-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); } html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-change-province:hover, html[data-theme="dark"] .btn-close-modal:hover, html[data-theme="dark"] .btn-back:hover, html[data-theme="midnight"] .btn-outline-secondary:hover, html[data-theme="midnight"] .btn-change-province:hover, html[data-theme="midnight"] .btn-close-modal:hover, html[data-theme="midnight"] .btn-back:hover { background: var(--surface-2); } html[data-theme="dark"] .city-badge, html[data-theme="midnight"] .city-badge { background: var(--surface-2) !important; color: var(--text) !important; } /* برچسب دسته‌بندی‌ها در حالت شب پررنگ‌تر شود تا کاملاً خوانا باشد */ html[data-theme="dark"] .category-tab span, html[data-theme="midnight"] .category-tab span { color: var(--text) !important; } html[data-theme="dark"] .category-tab.is-active span, html[data-theme="midnight"] .category-tab.is-active span { color: #ffffff !important; } /* برچسب‌های منوی پایین (خانه، دسته‌بندی، جستجو، ...) */ html[data-theme="dark"] .menu-text, html[data-theme="midnight"] .menu-text { color: var(--text) !important; } html[data-theme="dark"] .menu-item.is-active .menu-text, html[data-theme="midnight"] .menu-item.is-active .menu-text { color: var(--accent) !important; } /* عنوان سایدبار دسته‌بندی و متن‌های درخت */ html[data-theme="dark"] .cat-title, html[data-theme="midnight"] .cat-title { color: var(--text) !important; } /* نوار عنوان سایدبارها گرادیانت کرم ثابت داشت و در حالت شب ناخوانا می‌شد */ html[data-theme="dark"] .category-sidebar-title, html[data-theme="midnight"] .category-sidebar-title, html[data-theme="dark"] .business-sidebar-title, html[data-theme="midnight"] .business-sidebar-title { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }