/* ========================================================================== املاک قم (site14) — حالت شب. این فایل روی همه ی صفحه های سایت ۱۴ لود می شود ولی تا وقتی روی صفت data-theme="dark" ننشیند هیچ قاعده ای از آن فعال نمی شود ، پس حالت روز دست نخورده می ماند. ساختار رنگ سایت ۱۴ توکنی است ( --qa-* در public.css ، --dv-* در search.css ، --c-* در admin14.css ) ، پس تنه ی کار همان بازتعریف توکن هاست و بعد از آن فقط جاهایی که رنگ را مستقیم و بدون توکن نوشته اند وصله می شود. پالت شب از خودِ سرمه ای برند (#14263F) بیرون آمده تا سایت در شب همان هویت روز را داشته باشد ، نه خاکستری خنثی. نارنجی و آبی یک پله روشن تر می شوند چون رنگ اشباع روی زمینه ی تیره کم کنتراست دیده می شود. عکس های ملک و آواتار مشاور عمداً دست نخورده می مانند : تیره کردنشان تنها کاری است که در حالت شب سایت املاک نباید کرد. ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; /* ── سطح ها ── */ --qa-d-bg: #0D1524; /* زمینه ی صفحه */ --qa-d-surface: #151F33; /* کارت و پنل */ --qa-d-surface-2: #1C2942; /* سطحِ بالاتر : منوی بازشو ، مودال ، ورودی فوکوس */ --qa-d-sunken: #0A111D; /* گودتر از صفحه : نوار ابزار ، ردیف جدول */ --qa-d-line: #263449; --qa-d-line-2: #32435C; /* ── متن ── */ --qa-d-ink: #E9EEF7; --qa-d-body: #BDC9DA; --qa-d-muted: #8D9CB4; --qa-d-faint: #6B7B94; } /* ══════════════════════════════════════════════════════════════════════════ ۱) توکن های public.css ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { /* --qa-navy همان تله ی --c-navy را دارد : ۲۸ بار رنگِ *متن* است و ۱۱ بار زمینه. اکثریت با متن است ، پس توکن روشن می شود و آن ۱۱ زمینه پایین تر جداگانه تیره می شوند. --qa-navy-3 برعکس ، فقط زمینه است ( سه بار ) ، پس خودش تیره می ماند و لازم نیست جایی وصله شود. */ --qa-navy: var(--qa-d-ink); --qa-navy-2: #D7E0EE; --qa-navy-3: #24334F; --qa-navy-soft: #1B2740; --qa-navy-line: var(--qa-d-line-2); --qa-navy-lite: #9DB0CB; --qa-trust: #4FA6F0; --qa-trust-2: #6FBBFB; --qa-trust-soft: #14243A; --qa-trust-line: #2A4767; --qa-green: #34C08A; --qa-green-soft: #10281F; /* نارنجی عمداً *روشن تر نشده* : هم زمینه ی دکمه های اصلی است ( با متن سفید روی آن ) و هم رنگِ متن و آیکن. روشن ترش کردن ، متنِ سفیدِ روی دکمه ها را از ۳٫۲۵ به ۲٫۶ می انداخت یعنی بدتر از حالت روز ، در حالی که همین #F06210 روی زمینه ی شب خودش ۴٫۶ می دهد و به عنوان متن کاملاً خواناست. فقط سایه روشن ها یک پله بالا می روند تا حالت hover دیده شود. */ --qa-orange: #F06210; --qa-orange-2: #FF7A2E; --qa-orange-soft: #2A1A10; --qa-orange-deep: #FF8A45; --qa-orange-deep-2: #FFA166; --qa-orange-deep-soft: #2A1A10; --qa-slate: #A3B1C7; --qa-slate-2: #8D9CB4; --qa-slate-soft: #1A2437; --qa-ink: var(--qa-d-ink); --qa-body: var(--qa-d-body); --qa-muted: var(--qa-d-muted); /* کم رنگ ترین لایه ی متن روی زمینه ی تیره یک پله بالاتر از نسخه ی روز گرفته می شود ؛ #6B7B94 روی سطحِ کارت فقط ۳٫۸ می داد و برچسب «تومان» زیر قیمت عملاً محو بود. */ --qa-faint: #8A99B0; --qa-line: var(--qa-d-line); --qa-line-soft: #1E2A3E; --qa-page: var(--qa-d-bg); --qa-soft: #111A2B; --qa-surface: var(--qa-d-surface); --qa-tint-cool: #131E31; --qa-tint-warm: #201829; --qa-teal: #2FBFB0; --qa-violet: #9B7BEA; /* سایه ی سیاه روی زمینه ی تیره دیده نمی شود ؛ عمق با خطِ روشن تر ساخته می شود ، پس سایه ها فقط عمیق تر و کم رنگ تر می شوند تا لبه ها نرم بماند. */ --qa-shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 6px 18px rgba(0, 0, 0, .3); --qa-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5); } /* ══════════════════════════════════════════════════════════════════════════ ۲) پایه ی صفحه ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body { background-color: var(--qa-d-bg); color: var(--qa-d-body); } html[data-theme="dark"] .qa-page { background: var(--qa-d-bg); color: var(--qa-d-body); } /* پرده ی بارگذاری از قبل سرمه ای است ؛ در شب فقط یک پله تیره تر می شود تا لحظه ی ورود به صفحه پرش روشنایی ندهد. */ html[data-theme="dark"] #pageLoading14 { background: var(--qa-d-bg) !important; } /* ══════════════════════════════════════════════════════════════════════════ ۳) هدر و منوی عمومی (header_public) ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .qa-header { background: rgba(13, 21, 36, .92); border-bottom-color: var(--qa-d-line); box-shadow: 0 1px 0 var(--qa-d-line); } html[data-theme="dark"] .qa-header__brand img { background: var(--qa-d-surface-2); } html[data-theme="dark"] .qa-hbtn--ghost { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .qa-hbtn--ghost:hover { background: #24334F; border-color: var(--qa-orange); color: var(--qa-orange); } html[data-theme="dark"] .qa-burger { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); } html[data-theme="dark"] .qa-burger span { background: var(--qa-d-ink); } html[data-theme="dark"] .qa-oc, html[data-theme="dark"] .qa-oc__body { background: var(--qa-d-surface); color: var(--qa-d-body); } html[data-theme="dark"] .qa-oc__head, html[data-theme="dark"] .qa-oc__sep, html[data-theme="dark"] .qa-oc__link { border-color: var(--qa-d-line); } html[data-theme="dark"] .qa-oc__link { color: var(--qa-d-body); } html[data-theme="dark"] .qa-oc__link:hover, html[data-theme="dark"] .qa-oc__link.is-active { background: var(--qa-d-surface-2); color: var(--qa-orange); } /* منوی کاربر — هم در هدر عمومی هم در هدر پنل */ html[data-theme="dark"] .dropdown-menu { background-color: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-body); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); } html[data-theme="dark"] .dropdown-item { color: var(--qa-d-body); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: #24334F; color: var(--qa-d-ink); } html[data-theme="dark"] .dropdown-divider { border-top-color: var(--qa-d-line-2); } html[data-theme="dark"] .qa-udrop__head { border-color: var(--qa-d-line-2); } html[data-theme="dark"] .qa-udrop__head .name { color: var(--qa-d-ink); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2.2); } /* ══════════════════════════════════════════════════════════════════════════ ۴) صفحه ی نخست — باکس جستجو ، تب ها ، نقشه ══════════════════════════════════════════════════════════════════════════ */ /* گرادیانِ روشنِ پشت باکس اول با توکن ساخته نشده بود */ html[data-theme="dark"] .q-hunt:before { background: linear-gradient(180deg, #0A111D 0%, var(--qa-d-bg) 52%, var(--qa-d-bg) 100%); } html[data-theme="dark"] .q-hunt__panel { background: var(--qa-d-surface); border-color: var(--qa-d-line); } html[data-theme="dark"] .q-hunt__mark, html[data-theme="dark"] .q-hunt__mark--brand { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .q-hunt__mark:after { border-color: var(--qa-d-surface); } html[data-theme="dark"] .q-tabs { background: linear-gradient(180deg, #0F1828 0%, #131D2F 100%); border-color: var(--qa-d-line); } html[data-theme="dark"] .q-tab { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-body); } html[data-theme="dark"] .q-type { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-body); } html[data-theme="dark"] .q-field input, html[data-theme="dark"] .q-field select { background: var(--qa-d-sunken); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .q-field input:focus, html[data-theme="dark"] .q-field select:focus { background: var(--qa-d-surface-2); } html[data-theme="dark"] .q-field input::placeholder { color: var(--qa-d-faint); } html[data-theme="dark"] .q-map, html[data-theme="dark"] .q-mapside__card { background: var(--qa-d-surface); border-color: var(--qa-d-line); } html[data-theme="dark"] .q-map__head a { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .q-mapside__stats li > a:hover { background: #24334F; } html[data-theme="dark"] .q-mapside__rows > a, html[data-theme="dark"] .q-mapside__rows > div { border-bottom-color: var(--qa-d-line); } /* ── جاهایی که سرمه ای *زمینه* است ، نه متن ─────────────────────────────── چون توکن --qa-navy روشن شده ( رنگِ متن ) ، هر جا که با همان توکن زمینه می ساخت به یک لکه ی روشن تبدیل می شد. نتیجه اش دکمه ی «تماس» با متنِ سفید روی زمینه ی سفید بود ( نسبت ۱٫۱۶ ) و همین طور نوار نقشه ، نشانگرها و کارت محله. اینجا همان فهرست دقیق دوباره تیره می شود. */ html[data-theme="dark"] .qa-btn--ink, html[data-theme="dark"] .qa-btn--navy, html[data-theme="dark"] .q-phone, html[data-theme="dark"] .qa-area, html[data-theme="dark"] .qa-aghero__ava img { background: var(--qa-d-surface-2); } html[data-theme="dark"] .qa-btn--ink:hover, html[data-theme="dark"] .qa-btn--navy:hover, html[data-theme="dark"] .q-mapside__all:hover, html[data-theme="dark"] .q-map .leaflet-control-zoom a:hover, html[data-theme="dark"] .q-map__bar i, html[data-theme="dark"] .q-pin__in:after { background: #24334F; } html[data-theme="dark"] .q-grad, html[data-theme="dark"] .q-hunt__panel:before, html[data-theme="dark"] .q-map__head, html[data-theme="dark"] .q-map__styles button.is-on, html[data-theme="dark"] .q-pin__in, html[data-theme="dark"] .q-cl__in, html[data-theme="dark"] .q-hunt__mark { background: linear-gradient(125deg, #22314E 0%, #1A2740 100%); } /* برچسب وضعیت روی گالری : متنِ سفید روی آبیِ روشن شده فقط ۲٫۶ می داد */ html[data-theme="dark"] .qa-flag { color: #06203A; } /* سربرگ جدول ها در صفحه های عمومی : theme14 آنجا color:#000!important دارد و admin14 که این را به سفید برمی گرداند فقط برای کاربر واردشده لود می شود ، پس مهمان سربرگِ مشکی روی زمینه ی تیره می دید ( نسبت ۱٫۱۱ ). */ html[data-theme="dark"] .table:not(.table-dark) thead:not(.thead-dark) th, html[data-theme="dark"] .table:not(.table-dark) tbody th { color: var(--qa-d-ink) !important; } /* ══════════════════════════════════════════════════════════════════════════ ۵) کارت ملک ، کارت مشاور ، کارت محله ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .qa-ecard, html[data-theme="dark"] .qa-agentcard, html[data-theme="dark"] .qa-area { background: var(--qa-d-surface); border-color: var(--qa-d-line); } /* جای خالیِ عکس تا وقتی تصویر نیامده : در روز خاکستری روشن بود و در شب مثل یک لکه ی سفید در لیست دیده می شد. */ html[data-theme="dark"] .qa-ecard__media, html[data-theme="dark"] .qa-ecard__agent, html[data-theme="dark"] .qa-noimg { background: #1A2437; } html[data-theme="dark"] .qa-ecard__foot { background: var(--qa-d-sunken); border-color: var(--qa-d-line); } html[data-theme="dark"] .qa-ecard__agent { border-color: var(--qa-d-surface); } /* برچسب «اجاره» متنِ سفید روی --qa-trust دارد. آبیِ اعتماد در شب باید روشن شود ( وگرنه لینک ها روی زمینه ی تیره خوانده نمی شوند ) ولی همان آبیِ روشن زیر متنِ سفید فقط ۲٫۶ می دهد. پس اینجا رابطه برعکس می شود : چیپِ روشن با متنِ تیره — که در حالت شب شکل درست تری هم دارد. */ html[data-theme="dark"] .qa-tag--rent { color: #06203A; } html[data-theme="dark"] .qa-agentcard__ava img { border-color: var(--qa-d-surface); } html[data-theme="dark"] .qa-agentcard__medal { border-color: var(--qa-d-surface); } html[data-theme="dark"] .qa-agtag { color: var(--qa-d-body); } /* ══════════════════════════════════════════════════════════════════════════ ۶) صفحه ی نمایش ملک — گالری ، قیمت ، مبدل ، پرسش و پاسخ ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .qa-gal__tools--bare .qa-gtool, html[data-theme="dark"] .qa-conv__btn, html[data-theme="dark"] .qa-faq__links a, html[data-theme="dark"] .q-qr, html[data-theme="dark"] .q-store { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .qa-faq__links a:hover, html[data-theme="dark"] .qa-faq__links a:focus { background: #2A1A10; border-color: var(--qa-orange); } html[data-theme="dark"] .qa-price { background: linear-gradient(115deg, #241708, #1B1207); border-color: #4A2C14; } html[data-theme="dark"] .qa-price__sub { border-inline-start-color: #4A2C14; } html[data-theme="dark"] .qa-conv__range::-webkit-slider-thumb, html[data-theme="dark"] .qa-conv__range::-moz-range-thumb { background: var(--qa-d-ink); } html[data-theme="dark"] .qa-acc-marker { border-color: var(--qa-d-surface); } html[data-theme="dark"] .q-follow__card--ig { background: linear-gradient(125deg, #2A1220 0%, #241713 46%, #1C1A28 100%); border-color: #4A2438; } html[data-theme="dark"] .q-follow__card--app { background: linear-gradient(125deg, var(--qa-trust-soft) 0%, var(--qa-d-surface) 100%); } html[data-theme="dark"] .q-phone__screen { background: linear-gradient(180deg, var(--qa-d-surface-2) 0%, var(--qa-trust-soft) 100%); } /* نوار وضعیت مدیر و گزارش بازدید روی صفحه ی ملک */ html[data-theme="dark"] .admin-status-bar__switch, html[data-theme="dark"] .estate-operation-section .estate-operation-item, html[data-theme="dark"] .qa-visits__empty, html[data-theme="dark"] .qa-visits__table thead th { background: var(--qa-d-sunken); border-color: var(--qa-d-line); color: var(--qa-d-body); } /* ══════════════════════════════════════════════════════════════════════════ ۷) صفحه ی جستجو (search.css — دامنه ی .dv-page) ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .dv-page { --dv-ink: var(--qa-d-ink); --dv-body: var(--qa-d-body); --dv-muted: var(--qa-d-muted); --dv-faint: var(--qa-d-faint); --dv-line: var(--qa-d-line); --dv-line-2: var(--qa-d-line-2); /* مثل --qa-orange : زمینه ی دکمه ی «اعمال فیلتر» با متن سفید است ، پس روشن تر نمی شود. */ --dv-accent: #F06210; --dv-accent-2: #FF7A2E; --dv-accent-soft: #2A1A10; --dv-navy: var(--qa-d-ink); --dv-surface: var(--qa-d-surface); --dv-page-bg: var(--qa-d-bg); --dv-sunken: var(--qa-d-sunken); --dv-sh-1: 0 1px 2px rgba(0, 0, 0, .32), 0 1px 3px rgba(0, 0, 0, .28); --dv-sh-2: 0 4px 8px -2px rgba(0, 0, 0, .34), 0 12px 28px -6px rgba(0, 0, 0, .46); --dv-sh-3: 0 20px 48px rgba(0, 0, 0, .6); } html[data-theme="dark"] .dv-toggle, html[data-theme="dark"] .dv-preset, html[data-theme="dark"] .dv-ms__btn, html[data-theme="dark"] .dv-ms__clear, html[data-theme="dark"] .dv-chip, html[data-theme="dark"] .dv-select, html[data-theme="dark"] .dv-act, html[data-theme="dark"] .dv-help a, html[data-theme="dark"] .dv-group select, html[data-theme="dark"] .dv-group input[type="text"], html[data-theme="dark"] .dv-group input[type="number"], html[data-theme="dark"] .dv-group input[type="search"] { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .dv-search input, html[data-theme="dark"] .dv-ms__search input { background: var(--qa-d-sunken); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .dv-search input:focus, html[data-theme="dark"] .dv-ms__search input:focus, html[data-theme="dark"] .dv-deal button.is-on { background: var(--qa-d-surface-2); } html[data-theme="dark"] .dv-page input::placeholder { color: var(--qa-d-faint); } html[data-theme="dark"] .dv-active__chip { background: #2A1A10; border-color: #4A2C14; } html[data-theme="dark"] .dv-group select.has-value, html[data-theme="dark"] .dv-group input.has-value, html[data-theme="dark"] .dv-ms.has-value .dv-ms__btn, html[data-theme="dark"] .dv-type:hover { border-color: #7A4522; } html[data-theme="dark"] .dv-help { color: var(--qa-d-body); } html[data-theme="dark"] .dv-fav.is-on, html[data-theme="dark"] .dv-cmp.is-on, html[data-theme="dark"] .dv-pin__in { background: var(--qa-d-surface-2); } html[data-theme="dark"] .dv-act--wa:hover { background: #10281F; } /* اسکلت بارگذاری : درخششِ روشن روی زمینه ی تیره چشم می زند */ html[data-theme="dark"] .dv-skel span, html[data-theme="dark"] .dv-skel i { background: linear-gradient(90deg, #1A2437 25%, #22304A 37%, #1A2437 63%); } /* ══════════════════════════════════════════════════════════════════════════ ۸) نقشه (leaflet) — کاشی ها روشن اند ، پس فقط کنترل ها تیره می شوند ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .leaflet-control-zoom a, html[data-theme="dark"] .leaflet-bar a { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { background: var(--qa-d-surface-2); color: var(--qa-d-body); } html[data-theme="dark"] .leaflet-container { background: var(--qa-d-sunken); } /* نشانگرها لبه ی سفید دارند تا از کاشی جدا شوند ؛ آن لبه در شب رنگِ سطح می گیرد نه سفید. */ html[data-theme="dark"] .q-pin__in, html[data-theme="dark"] .q-cl__in, html[data-theme="dark"] .dv-cl__in { border-color: var(--qa-d-surface); } /* ══════════════════════════════════════════════════════════════════════════ ۹) پنل — پایه ی بوت استرپ (theme14.min.css) ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --bs-body-bg: #0D1524; --bs-body-color: #BDC9DA; --bs-body-rgb: 189, 201, 218; --bs-light: #151F33; --bs-light-rgb: 21, 31, 51; --bs-dark: #E9EEF7; --bs-dark-rgb: 233, 238, 247; --bs-white-rgb: 21, 31, 51; } html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .accordion-button, html[data-theme="dark"] .accordion-item { background-color: var(--qa-d-surface); border-color: var(--qa-d-line); color: var(--qa-d-body); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer, html[data-theme="dark"] .offcanvas-header { background-color: var(--qa-d-sunken); border-color: var(--qa-d-line); color: var(--qa-d-ink); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .input-group-text { background-color: var(--qa-d-sunken); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--qa-d-surface-2); border-color: var(--qa-orange); color: var(--qa-d-ink); box-shadow: 0 0 0 .2rem rgba(255, 122, 46, .18); } html[data-theme="dark"] .form-control::placeholder { color: var(--qa-d-faint); } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-select:disabled { background-color: #131B2B; color: var(--qa-d-muted); } /* فلشِ کشویی بوت استرپ یک SVG رنگ ثابت (#454056) داخل background-image است */ html[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23BDC9DA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } html[data-theme="dark"] .form-check-input { background-color: var(--qa-d-sunken); border-color: var(--qa-d-line-2); } html[data-theme="dark"] .form-check-input:checked { background-color: var(--qa-orange); border-color: var(--qa-orange); } html[data-theme="dark"] .form-label { color: var(--qa-d-body); } /* برچسب های بی کلاس ؛ با :where تا برچسبِ کلاس دارِ فرم های اختصاصی ( مثلاً .dv-group label ) رنگ خودش را نگه دارد. */ :where(html[data-theme="dark"]) label { color: var(--qa-d-body); } html[data-theme="dark"] .table { --bs-table-striped-color: var(--qa-d-body); --bs-table-striped-bg: rgba(255, 255, 255, .028); --bs-table-active-color: var(--qa-d-ink); --bs-table-active-bg: rgba(255, 255, 255, .05); --bs-table-hover-color: var(--qa-d-ink); --bs-table-hover-bg: rgba(255, 255, 255, .05); color: var(--qa-d-body); border-color: var(--qa-d-line); } html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--qa-d-line); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--qa-d-muted); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--qa-d-surface); border-color: var(--qa-d-line); color: var(--qa-d-ink); } html[data-theme="dark"] .page-link { color: var(--qa-d-body); } html[data-theme="dark"] .page-link:hover { background-color: var(--qa-d-surface-2); color: var(--qa-d-ink); } html[data-theme="dark"] hr { border-color: var(--qa-d-line-2); } /* theme14.min.css رنگِ متن را در ده ها جا ثابت نوشته ( #1f1b2d تیتر ، #454056 متنِ رابط ، #666276 متنِ کم رنگ ) و بعضی از آن قاعده ها از قاعده ی admin14 هم قوی ترند — مثلاً .table:not(.table-dark) td با وزن ۰,۳,۱ بر .table tbody td با وزن ۰,۲,۱ پیروز می شود. برای همین سلول های جدول در شب خاکستریِ تیره می ماندند. این بلوک همان رنگ های ثابت را برمی گرداند. */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3, html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6, html[data-theme="dark"] dt, html[data-theme="dark"] .blockquote, html[data-theme="dark"] .col-form-label, html[data-theme="dark"] .dropdown-header, html[data-theme="dark"] .link-dark { color: var(--qa-d-ink); } html[data-theme="dark"] .form-check-label, html[data-theme="dark"] .form-control-plaintext, html[data-theme="dark"] .list-group-item-action, html[data-theme="dark"] .btn-link, html[data-theme="dark"] .card-nav-link, html[data-theme="dark"] .navbar .navbar-nav .nav-link { color: var(--qa-d-body); } /* این چند تا در theme14 با !important نوشته شده اند ، پس بدون !important هیچ وزنی جلودارشان نیست. سلول جدول ( .table:not(.table-dark) td ) شاخص ترینشان است : همه ی ارقام و عنوان های جدول های پنل از همین یک قاعده رنگ می گیرند. */ html[data-theme="dark"] .table:not(.table-dark) td, html[data-theme="dark"] .text-body { color: var(--qa-d-body) !important; } html[data-theme="dark"] .text-nav, html[data-theme="dark"] .text-primary, html[data-theme="dark"] .icon-box-title:not(.text-light):not(.text-white) { color: var(--qa-d-ink) !important; } html[data-theme="dark"] .list-group-item-secondary, html[data-theme="dark"] .list-group-item-light { background-color: var(--qa-d-surface-2) !important; color: var(--qa-d-ink) !important; } html[data-theme="dark"] .list-group-item-light:hover, html[data-theme="dark"] .list-group-item-secondary:hover, html[data-theme="dark"] .card-active[class^="bg-"], html[data-theme="dark"] .card-active[class*=" bg-"], html[data-theme="dark"] .card[data-bs-toggle="collapse"]:not(.collapsed) { background-color: var(--qa-d-surface-2) !important; } /* تقویم انتخاب تاریخ : روزهای درون بازه و روز امروز رنگ ثابت دارند */ html[data-theme="dark"] .flatpickr-calendar, html[data-theme="dark"] .flatpickr-months, html[data-theme="dark"] .flatpickr-weekdays { background: var(--qa-d-surface-2); color: var(--qa-d-ink); } html[data-theme="dark"] .flatpickr-day { color: var(--qa-d-body); } html[data-theme="dark"] .flatpickr-day.inRange { background-color: #24334F !important; } html[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--qa-d-faint) !important; } html[data-theme="dark"] .blockquote-footer { color: var(--qa-d-muted); } /* دکمه ی بدون نوع ( .btn تنها ) و دکمه های روشنِ بوت استرپ : زمینه شان در شب تیره می شود ، پس متنشان هم باید روشن شود. */ html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-outline-dark { background-color: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-dark:hover { background-color: #24334F; border-color: var(--qa-d-line-2); color: #fff; } html[data-theme="dark"] .badge.bg-secondary, html[data-theme="dark"] .badge.bg-light, html[data-theme="dark"] .badge.bg-faded-dark, html[data-theme="dark"] .badge.bg-faded-secondary { background-color: var(--qa-d-surface-2) !important; color: var(--qa-d-ink) !important; } /* نشان های سبز و قرمزِ پنل متنِ سفید دارند ، پس زمینه شان نباید روشن شود. --c-green / --c-red خودشان روشن می مانند چون جای دیگری *متن* اند ( مثلاً .pb14-copy.is-done ) ، و فقط همین دو نشان زمینه ی تیره تر می گیرند. */ html[data-theme="dark"] .badge.bg-success { background-color: #10704E !important; } html[data-theme="dark"] .badge.bg-danger { background-color: #9B2C3C !important; } html[data-theme="dark"] .alert-secondary, html[data-theme="dark"] .alert-light, html[data-theme="dark"] .alert-dark { background-color: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } /* پیام های رنگیِ بوت استرپ. اینها در theme14.min.css اند که فایل قالبِ آماده است و ساخت خودکار سراغش نمی رود ، پس تنها جایی بودند که هنوز کادر روشن روی صفحه ی شب می ساختند — «خطای اعتبارسنجی» بالای فرم ثبت ملک با همین کادر صورتیِ روشن می آمد. */ html[data-theme="dark"] .alert-danger { background-color: #2B1418; border-color: #6B2A32; color: #F8A5AC; } html[data-theme="dark"] .alert-success { background-color: #0E241C; border-color: #1F5C46; color: #6EE7B7; } html[data-theme="dark"] .alert-info { background-color: #131E33; border-color: #2A4570; color: #93B8FA; } html[data-theme="dark"] .alert-warning, html[data-theme="dark"] .alert-primary { background-color: #2A1A10; border-color: #6B3A1C; color: #FBB584; } html[data-theme="dark"] .alert a, html[data-theme="dark"] .alert .alert-link { color: inherit; text-decoration: underline; } html[data-theme="dark"] .popover-header, html[data-theme="dark"] .popover-body { background-color: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); } /* کمک‌کننده های بوت استرپ که رنگ را !important می نویسند و توکن جوابشان نیست */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--qa-d-surface) !important; } html[data-theme="dark"] .text-dark { color: var(--qa-d-ink) !important; } html[data-theme="dark"] .text-muted { color: var(--qa-d-muted) !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end, html[data-theme="dark"] .border-light { border-color: var(--qa-d-line) !important; } /* ══════════════════════════════════════════════════════════════════════════ ۱۰) پنل — admin14.css ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --c-navy: #22314E; --c-navy-light: #2C3E60; --c-navy-soft: #1C2942; --c-gold: #F06210; --c-gold-light: #FF7A2E; --c-gold-soft: #2A1A10; --c-green: #34C08A; --c-green-soft: #10281F; --c-red: #E8798A; --c-red-soft: #2A1219; --c-text: #BDC9DA; --c-text-sub: #8D9CB4; --c-bg: #0D1524; --c-card: #151F33; --c-border: #263449; --c-shadow: 0 1px 4px rgba(0, 0, 0, .4); } /* --c-navy دو کار همزمان می کند : هم زمینه ی دکمه و سربرگ جدول است و هم رنگِ *متنِ* لینک و دکمه ی outline. یک توکن نمی تواند در شب هر دو را درست کند — اگر روشنش کنیم سربرگ جدول سفیدِ کور می شود و اگر تیره بماند لینک ها ناپیدا می شوند. پس توکن تیره می ماند ( برای زمینه ) و هر جا *متن* بوده اینجا جدا روشن می شود. بدون این تکه ، دکمه ی «انصراف» و همه ی لینک های پنل روی زمینه ی شب سرمه ای روی سرمه ای بودند و عملاً دیده نمی شدند. */ /* :where() عمداً استفاده شده تا وزنِ این قاعده دقیقاً به اندازه ی همان a { color: var(--c-navy) } بماند ( ۰,۰,۱ ). اگر ساده می نوشتیم html[data-theme="dark"] a وزنش ۰,۱,۱ می شد و رنگِ *همه ی* لینک های کلاس دار سایت — عنوان کارت ملک ، لینک های منو ، دکمه های متنی — را هم آبی می کرد. با :where فقط لینکی رنگ می گیرد که هیچ قاعده ی کلاس داری نداشته باشد ، و چون این فایل آخر لود می شود بر a ی admin14 پیروز است. */ :where(html[data-theme="dark"]) a { color: var(--qa-trust); } :where(html[data-theme="dark"]) a:hover { color: var(--qa-trust-2); } html[data-theme="dark"] .btn-outline-primary { color: var(--qa-d-ink) !important; border-color: var(--qa-d-line-2) !important; } html[data-theme="dark"] .btn-outline-primary:hover { background-color: #24334F !important; border-color: var(--qa-orange) !important; color: #fff !important; } html[data-theme="dark"] .breadcrumb-item a, html[data-theme="dark"] .page-link { color: var(--qa-trust); } html[data-theme="dark"] .dropdown-item:hover { color: var(--qa-d-ink); } html[data-theme="dark"] .alert-primary { background-color: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: var(--qa-d-ink); } /* هدر و پاورقی پنل از قبل سرمه ای اند ؛ در شب فقط با زمینه ی صفحه هم خانواده می شوند تا مثل یک باندِ روشن جلو نزنند. */ html[data-theme="dark"] .h14 { background: #111B2C !important; border-bottom-color: var(--qa-orange); } html[data-theme="dark"] .footer14 { background: #111B2C; } html[data-theme="dark"] .footer14-brand img { background: var(--qa-d-surface-2); } html[data-theme="dark"] .h14 .dropdown-menu .dropdown-item:hover { background: #24334F !important; } html[data-theme="dark"] .h14 .dropdown-menu .dropdown-item.danger:hover { background: #2A1219 !important; } html[data-theme="dark"] .h14 .duser-info, html[data-theme="dark"] .oc14 .offcanvas-header, html[data-theme="dark"] .oc14 .oc-quickbar, html[data-theme="dark"] .oc14 .oc-link, html[data-theme="dark"] .oc14 .oc-divider { border-color: var(--qa-d-line) !important; } html[data-theme="dark"] .oc14 .oc-divider { background: var(--qa-d-sunken); } html[data-theme="dark"] .oc14 .oc-user img { border-color: var(--qa-d-line-2); } /* سربرگ جدول های پنل سرمه ای و متنِ سفید دارند ؛ دست نخورده می مانند ولی ردیف های راه راه باید تیره شوند. */ html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, .028); } html[data-theme="dark"] .table tbody td { border-bottom-color: var(--qa-d-line); } /* سرصفحه ی فرم ها و بخش های فرم ثبت ملک / مشتری */ html[data-theme="dark"] .customer-page-head, html[data-theme="dark"] .customer-create-head, html[data-theme="dark"] .customer-create-form, html[data-theme="dark"] .customer-create-actions, html[data-theme="dark"] .estate-create-head, html[data-theme="dark"] .estate-create14 .create-section, html[data-theme="dark"] #customerFilters { background: var(--qa-d-surface) !important; border-color: var(--qa-d-line) !important; } html[data-theme="dark"] .estate-create14 .create-section h2 { background: var(--qa-d-sunken); border-bottom-color: var(--qa-d-line); color: var(--qa-d-ink); } html[data-theme="dark"] #customerFilters .customer-check-option, html[data-theme="dark"] .customer-create-form .form-check, html[data-theme="dark"] .customer-create-form .buyer-content:has(> div > .form-check-input), html[data-theme="dark"] .customer-create-form .customer-liquidity { background: var(--qa-d-sunken); border-color: var(--qa-d-line-2); } html[data-theme="dark"] .customer-create-form .customer-liquidity .form-check { background: var(--qa-d-surface-2); } html[data-theme="dark"] #customerFilters .d-flex.justify-content-center { border-top-color: var(--qa-d-line); } html[data-theme="dark"] .estate-create14 .sec-nav { background: var(--qa-d-surface); border-color: var(--qa-d-line); } /* فیلدهای «الزامی» نارنجی روشن اند ؛ در شب باید تیره بمانند وگرنه فرم پر از لکه ی روشن می شود ولی نشانه بودنشان حفظ شود. */ html[data-theme="dark"] .estate-create14 .necessary, html[data-theme="dark"] .estate-create-tip { background: #2A1A10 !important; border-color: #7A4522 !important; color: var(--qa-d-ink); } html[data-theme="dark"] .estate-create14 .dropzone { background: var(--qa-d-sunken); } /* ══════════════════════════════════════════════════════════════════════════ ۱۱) گفتگوی گروهی (group-chat.css) — رنگ ها آنجا ثابت نوشته شده اند ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .gc-host, html[data-theme="dark"] .gc-body { background: var(--qa-d-bg); } html[data-theme="dark"] .gc-bubble { background: var(--qa-d-surface); border-color: var(--qa-d-line); color: var(--qa-d-body); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } html[data-theme="dark"] .gc-msg.mine .gc-bubble { background: #1B2E4C; border-color: #2A4767; } html[data-theme="dark"] .gc-name { color: var(--qa-d-ink); } html[data-theme="dark"] .gc-msg.mine .gc-name { color: var(--qa-trust-2); } html[data-theme="dark"] .gc-day span { background: var(--qa-d-surface-2); color: var(--qa-d-muted); } html[data-theme="dark"] .gc-avatar { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); } html[data-theme="dark"] .gc-empty { color: var(--qa-d-muted); } /* ══════════════════════════════════════════════════════════════════════════ ۱۲) کتابخانه ها — select2 و sweetalert2 ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple, html[data-theme="dark"] .select2-dropdown, html[data-theme="dark"] .select2-search__field { background-color: var(--qa-d-sunken) !important; border-color: var(--qa-d-line-2) !important; color: var(--qa-d-ink) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-theme="dark"] .select2-results__option { color: var(--qa-d-ink); } html[data-theme="dark"] .select2-results__option[aria-selected="true"] { background-color: var(--qa-d-surface-2); } html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--qa-orange); } html[data-theme="dark"] .swal2-popup { background: var(--qa-d-surface) !important; color: var(--qa-d-body) !important; } html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container, html[data-theme="dark"] .swal2-content { color: var(--qa-d-ink) !important; } html[data-theme="dark"] .swal2-input, html[data-theme="dark"] .swal2-textarea, html[data-theme="dark"] .swal2-select { background: var(--qa-d-sunken) !important; border-color: var(--qa-d-line-2) !important; color: var(--qa-d-ink) !important; } /* ══════════════════════════════════════════════════════════════════════════ ۱۳) دکمه ی تغییر حالت — یک شکل برای هر دو هدر ══════════════════════════════════════════════════════════════════════════ */ .qa-themebtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 1px solid var(--qa-line, #E7EBF2); border-radius: 50%; background: #fff; color: #14263F; font-size: 1rem; line-height: 1; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .qa-themebtn:hover, .qa-themebtn:focus { border-color: #F06210; color: #F06210; outline: none; } /* داخل هدر پنل ( .h14 ) زمینه سرمه ای است ، پس دکمه باید شفاف و روشن باشد */ .h14 .qa-themebtn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; } .h14 .qa-themebtn:hover, .h14 .qa-themebtn:focus { background: rgba(255, 255, 255, .16); border-color: #F06210; color: #F47A2A; } html[data-theme="dark"] .qa-themebtn { background: var(--qa-d-surface-2); border-color: var(--qa-d-line-2); color: #FFC46B; } html[data-theme="dark"] .qa-themebtn:hover, html[data-theme="dark"] .qa-themebtn:focus { border-color: var(--qa-orange); color: var(--qa-orange); } /* آیکن ماه در روز دیده می شود و خورشید در شب — نه هر دو با هم */ .qa-themebtn .qa-themebtn__night { display: inline; } .qa-themebtn .qa-themebtn__day { display: none; } html[data-theme="dark"] .qa-themebtn .qa-themebtn__night { display: none; } html[data-theme="dark"] .qa-themebtn .qa-themebtn__day { display: inline; } /* نسخه ی داخل منوی موبایل : ردیفِ کامل ، نه دایره */ .qa-themebtn--row { width: 100%; height: auto; justify-content: flex-start; gap: 10px; padding: 11px 12px; border-radius: 10px; font-size: .84rem; font-weight: 700; } /* مدال نقره ای داشبورد : darkgen خاکستری را وارونه می کند و مدال از حالت فلزی در می آید در حالی که طلا و برنز دست نخورده می مانند ؛ پس هر سه را دستی نگه می داریم */ html[data-theme="dark"] .medal-silver { background: #C7D0DC; color: #333C4A; box-shadow: inset 0 0 0 1px #AEB9C8; }