/* ═══════════════════════════════════════════════════════════════════════════ تم‌های تابلوی مشتری — چهار چیدمان (۱۸ سپتامبر ۲۰۲۶) هر تم فقط یک مقدارِ `data-board` روی است و **هیچ‌کدام ساختارِ HTML را عوض نمی‌کند**: همان `.card` با `button.ci` و دو `.px` و یک `.drawer`. پس هر تمی که این‌جا خراب شود، با برگشتنِ `data-board` به `classic` کاملاً می‌رود. ۱) classic — تابلوی ردیفیِ امروز. هیچ قاعده‌ای این‌جا ندارد (پایه = style.css). ۲) tiles — کاشیِ شیشه‌ای. ۳) ledger — دفترِ آرام. ۴) royal — سرمه‌ای و طلا. ⚠️ رنگ‌ها همه توکن‌اند و از پالتِ انتخاب‌شده می‌آیند (`--gold*`, `--navy`, …) تا انتخابِ رنگِ مشتری روی هر چهار چیدمان هم بنشیند. ⚠️ سلکتورها با `html[data-board=…]` شروع می‌شوند تا بی‌توجه به ترتیبِ فایل‌ها بر قاعده‌های پایه سوار شوند. ⚠️ `.lbl` (برچسبِ داخلِ دکمه) همیشه در HTML هست؛ classic و ledger پنهانش می‌کنند. ═══════════════════════════════════════════════════════════════════════════ */ /* برچسبِ داخلِ دکمه فقط در تم‌هایی که جا دارند دیده می‌شود */ .px .lbl { display: none; } /* ═══ ۲) کاشیِ شیشه‌ای ══════════════════════════════════════════════════════ هر قلم یک کاشی: نام بالا، زیرش دو دکمه‌ی پهنِ کم‌رنگ با برچسبِ داخلی. چون برچسب داخلِ دکمه است، سرتیترِ ستون‌ها لازم نیست و فقط واحدِ پول می‌ماند. */ html[data-board="tiles"] { --act-buy-bg: rgba(62,208,126,.11); --act-sell-bg: rgba(255,107,94,.11); --act-off-bg: rgba(255,255,255,.03); --tile-bg: var(--surface); --tile-line: var(--line-soft); --tile-shadow: 0 2px 12px rgba(0,0,0,.28); } html[data-board="tiles"][data-theme="light"] { --act-buy-bg: #E6F3EB; /* متنِ #0B6B44 رویش ۶٫۱:۱ */ --act-sell-bg: #FAE9E6; /* متنِ #A32A20 رویش ۶٫۲:۱ */ --act-off-bg: rgba(26,21,10,.035); --tile-bg: rgba(255,255,255,.84); --tile-line: rgba(255,255,255,.95); --tile-shadow: 0 1px 2px rgba(40,32,10,.04), 0 10px 28px rgba(40,32,10,.07); } html[data-board="tiles"] .px .lbl { display: block; } /* سرتیتر: فقط واحدِ پول، کنارِ راست */ html[data-board="tiles"] .boardhead { grid-template-columns: minmax(0, 1fr); border: 0; } html[data-board="tiles"] .boardhead .bh-grp { display: flex; border: 0; padding: 0 4px 2px; } html[data-board="tiles"] .boardhead .bh-grp.dup, html[data-board="tiles"] .boardhead .bh-buy, html[data-board="tiles"] .boardhead .bh-sell { display: none; } html[data-board="tiles"] .boardhead .bh-cur { font-size: 11.5px; text-align: start; } /* شبکه‌ی کاشی‌ها — ردیف‌به‌ردیف، نه ستونی */ html[data-board="tiles"] .list .cat-group { display: grid; grid-auto-flow: row dense; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 9px; margin-bottom: 6px; } /* کشوی باز جا می‌خواهد (نمودار) ⇒ کاشیِ بازشده کلِ ردیف را می‌گیرد */ html[data-board="tiles"] .list .cat-group > .card:has(> .drawer:not([hidden])), html[data-board="tiles"] .list .cat-group > .card.ref { grid-column: 1 / -1; } html[data-board="tiles"] .list .card:not(.ref) { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; border-radius: 16px; background: var(--tile-bg); border: 1px solid var(--tile-line); box-shadow: var(--tile-shadow); } html[data-board="tiles"] .list .card:not(.ref) > .ci { text-align: start; padding: 0 0 2px; align-items: start; } html[data-board="tiles"] .list .card:not(.ref) .card-title { font-size: 14px; line-height: 1.35; -webkit-line-clamp: 2; } html[data-board="tiles"] .list .card:not(.ref) .card-unit { justify-content: flex-start; font-size: 11px; margin-top: 2px; padding-inline-end: 18px; } html[data-board="tiles"] .list .card:not(.ref) .chg { font-size: 11px; } html[data-board="tiles"] .list .card:not(.ref) button.ci .caret { top: 2px; bottom: auto; width: 16px; height: 16px; } /* دو دکمه‌ی قیمت */ html[data-board="tiles"] .list .card:not(.ref) > .px { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: center; gap: 1px; min-height: 52px; padding: 6px 10px; border-radius: 12px; text-align: start; border: 1px solid transparent; box-shadow: none; } html[data-board="tiles"] .list .card:not(.ref) > .px.buy { background: var(--act-buy-bg); } html[data-board="tiles"] .list .card:not(.ref) > .px.sell { background: var(--act-sell-bg); } html[data-board="tiles"] .px .lbl { font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; } html[data-board="tiles"] .list .card:not(.ref) > .px .val { font-size: clamp(15px, 4.3vw, 18px); letter-spacing: 0; line-height: 1.3; /* ⚠️ ارقامِ هم‌عرضِ وزیرمتن خیلی باز و «کش‌آمده» دیده می‌شوند؛ در کاشی هر عدد تنهاست و لازم نیست زیرِ عددِ دیگری تراز شود. */ font-variant-numeric: normal; } html[data-board="tiles"] .list .card:not(.ref) > .px .gram { font-size: 10.5px; font-variant-numeric: normal; letter-spacing: 0; } html[data-board="tiles"] .list .card:not(.ref) > .px .gram::before { content: 'گرمی '; } @media (hover: hover) { html[data-board="tiles"] .list .card:not(.ref) > .px:hover:not(.off) { border-color: currentColor; } } /* خاموش: زمینه‌ی تخت و خط‌چین + برچسبِ «بسته» (نشانه‌ی غیررنگی) */ html[data-board="tiles"] .list .card:not(.ref) > .px.off { background: var(--act-off-bg); border: 1px dashed var(--line); } html[data-board="tiles"] .px.off .lbl::after { content: ' · بسته'; } @media (max-width: 639px) { html[data-board="tiles"] .list .card:not(.ref) { padding: 9px; gap: 5px; border-radius: 15px; } html[data-board="tiles"] .list .card:not(.ref) > .px { min-height: 0; padding: 5px 9px; } html[data-board="tiles"] .list .card:not(.ref) .card-unit { margin-top: 0; } } /* تمِ روشن: پس‌زمینه‌ی سرگروه با زمینه یکی بماند، خطِ زیرش لازم نیست */ html[data-board="tiles"][data-theme="light"] .grouphead { border-bottom: 0; } html[data-board="tiles"] .gh-name { font-size: 15px; } html[data-board="tiles"] .grouphead .gh-ico { width: 24px; height: 24px; } @media (min-width: 640px) { html[data-board="tiles"] .list .cat-group { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } html[data-board="tiles"] .list .card:not(.ref) { padding: 13px; gap: 7px; border-radius: 18px; } html[data-board="tiles"] .list .card:not(.ref) .card-title { font-size: 15px; } html[data-board="tiles"] .list .card:not(.ref) > .px { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 46px; } html[data-board="tiles"] .list .card:not(.ref) > .px .val { justify-self: end; font-size: 17px; } html[data-board="tiles"] .list .card:not(.ref) > .px .gram { grid-column: 2; justify-self: end; } /* کاشیِ بازشده کلِ ردیف را می‌گیرد؛ دکمه‌ها کنارِ هم و به اندازه‌ی یک کاشی می‌مانند وگرنه برچسب و عدد ۱۱۰۰ پیکسل از هم دور می‌افتادند. */ html[data-board="tiles"] .list .card:not(.ref):has(> .drawer:not([hidden])) { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 300px) minmax(0, 1fr); column-gap: 10px; } /* ⚠️ جای هر فرزند صریح است — قاعده‌های پایه‌ی تابلوی ردیفی (`.ci` ستونِ ۲، خرید ستونِ ۱، فروش ستونِ ۳، کشو ردیفِ ۲) هنوز زنده‌اند و بی‌این‌ها همه‌چیز جابه‌جا می‌افتاد. */ html[data-board="tiles"] .list .card:not(.ref):has(> .drawer:not([hidden])) > .ci { grid-column: 1 / -1; grid-row: 1; } html[data-board="tiles"] .list .card:not(.ref):has(> .drawer:not([hidden])) > .px.buy { grid-column: 1; grid-row: 2; } html[data-board="tiles"] .list .card:not(.ref):has(> .drawer:not([hidden])) > .px.sell { grid-column: 2; grid-row: 2; } html[data-board="tiles"] .list .card:not(.ref):has(> .drawer:not([hidden])) > .drawer { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; } } @media (min-width: 1240px) { html[data-board="tiles"] .list, html[data-board="tiles"] .stickybar, html[data-board="tiles"] .banner, html[data-board="tiles"] .notice, html[data-board="tiles"] .pad, html[data-board="tiles"] .listfoot, html[data-board="tiles"] .updbar, html[data-board="tiles"] .bnrs, html[data-board="tiles"] .bottomnav { max-width: 1180px; } } /* ═══ ۳) دفترِ آرام ═════════════════════════════════════════════════════════ هر دسته یک برگه‌ی یکپارچه است و قلم‌ها ردیف‌های همان برگه — بی‌قاب، بی‌سایه، فقط یک خطِ موییِ جداکننده. رنگ **فقط روی خودِ عدد** می‌نشیند، نه پشتِ آن؛ تابلوی بازار، نه تابلوی چراغانی. ارقام درشت‌ترند چون هیچ تزئینی با آن‌ها رقابت نمی‌کند. */ html[data-board="ledger"] .list { padding-inline: 12px; gap: 10px; } html[data-board="ledger"] .list .cat-group { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; padding: 2px 12px; gap: 0; /* ⚠️ یک ستون در هر اندازه: دفترِ آرام ذاتاً جدول است و دو جدولِ کنارِ هم چشم را همان‌قدر شلوغ می‌کند که کارت‌های رنگی. */ grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; } html[data-board="ledger"] .list .cat-group > .card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 7px 0; gap: 6px; border-bottom: 1px solid var(--line-soft); } html[data-board="ledger"] .list .cat-group > .card:last-child { border-bottom: 0; } /* ⚠️ عنوان وسط‌چین می‌ماند: راست‌چینش (نسخه‌ی اول) آن را به عددِ خریدِ کناری می‌چسباند و روی گوشی «آب‌شده نقدی۱۰۰,۸۰۵,۰۰۰» یک رشته دیده می‌شد (عکسِ ۱۸ سپتامبر). */ html[data-board="ledger"] .list .card .card-title { font-size: 13px; line-height: 1.3; } /* دکمه‌های قیمت: بی‌جعبه، فقط عدد */ html[data-board="ledger"] .list .card > .px { background: none; border: 0; box-shadow: none; border-radius: 8px; min-height: 40px; padding: 2px 4px; } html[data-board="ledger"] .list .card > .px .val { font-size: clamp(13px, 3.7vw, 15.5px); letter-spacing: -.2px; } html[data-board="ledger"] .list .card > .px .gram { color: var(--text-faint); } @media (hover: hover) { html[data-board="ledger"] .list .card > .px:hover:not(.off) { background: var(--surface-2); border: 0; } } /* خاموش: بی‌راه‌راه و بی‌خط‌چین (جعبه‌ای نمانده که خط‌چین شود) — رنگِ مرده کافی است */ html[data-board="ledger"] .list .card > .px.off { background: none; border: 0; } html[data-board="ledger"] .list .card > .px.off::after { display: none; } /* سرگروه: بی‌پرده و بی‌خط، فقط یک تیترِ کوچک بالای برگه */ html[data-board="ledger"] .grouphead { background: none; border: 0; padding: 10px 4px 4px; margin-top: 2px; } html[data-board="ledger"] .grouphead::before { display: none; } html[data-board="ledger"] .gh-name { font-size: 13.5px; } html[data-board="ledger"] .grouphead .gh-ico { width: 19px; height: 19px; } /* کارتِ مرجع هم ردیفِ همان برگه است */ html[data-board="ledger"] .list .cat-group > .card.ref { border-style: none; border-bottom: 1px solid var(--line-soft); } @media (min-width: 640px) { /* ⚠️ دفترِ آرام در دسکتاپ هم **یک ستون** است؛ پس سرستونِ دوتاییِ پایه باید یکی شود، وگرنه «شما می‌خرید / شما می‌فروشید» دو بار بالای یک جدول می‌آمد (عکسِ ۱۸ سپتامبر). */ html[data-board="ledger"] .boardhead { grid-template-columns: minmax(0, 1fr); } html[data-board="ledger"] .boardhead .bh-grp.dup { display: none; } /* ستون‌های عدد پهن‌تر: با عرضِ پایه‌ی دوستونه رقمِ اولِ «۱۰۰,۸۰۵,۰۰۰» بریده می‌شد */ html[data-board="ledger"] .list .card:not(.ref) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); } html[data-board="ledger"] .list .cat-group { padding-inline: 16px; } html[data-board="ledger"] .list .card .card-title { font-size: 13.5px; } html[data-board="ledger"] .list .card > .px .val { font-size: 16px; } } /* ═══ ۴) سرمه‌ای و طلا ══════════════════════════════════════════════════════ تمِ «برندِ حسن»: سرگروه یک نوارِ سرمه‌ای تیره است و دکمه‌ها به‌جای زمینه‌ی کم‌رنگ، پر و قاطع‌اند — خرید طلاییِ پررنگ، فروش سرمه‌ای. برچسب داخلِ دکمه می‌آید چون دو رنگِ پر، دیگر خودشان «سبز=خرید / قرمز=فروش» را نمی‌گویند. ⚠️ رنگِ خرید از `--gold` پالت می‌آید، پس با انتخابِ رنگِ مشتری هم‌رنگ می‌شود. */ html[data-board="royal"] { --ry-head: var(--navy); --ry-sheet: var(--surface); /* ⚠️ `--on-navy` در تمِ **روشن** به یک رنگِ تیره بازتعریف می‌شود (style.css) — با آن، عدد روی دکمه‌ی سرمه‌ای و نامِ دسته روی نوارِ سرمه‌ای تقریباً ناخوانا بود (عکسِ ۱۸ سپتامبر، ۱٫۴:۱). پس این تم متنِ روی سرمه‌ای را از توکنِ خودش می‌گیرد که در هر دو تم روشن است. */ --ry-ink: #FFFFFF; --ry-ink-2: rgba(255,255,255,.72); } html[data-board="royal"][data-theme="light"] { --ry-sheet: #FFFFFF; } /* شب: پس‌زمینه‌ی صفحه خودش سرمه‌ای است و نوارِ سرگروه در آن گم می‌شد ⇒ یک پله روشن‌تر + لبه‌ی طلایی */ html[data-board="royal"]:not([data-theme="light"]) { --ry-head: var(--ry-head-night, #26327A); } html[data-board="royal"]:not([data-theme="light"]) .grouphead { box-shadow: inset 0 -2px 0 var(--gold); } /* ⚠️ برچسبِ داخلِ دکمه در این تم **نمی‌آید**: چیدمانش همان سه‌ستونیِ ردیفی است و دکمه باریک؛ «شما می‌فروشید» در ۳۹۰px بریده می‌شد (عکسِ ۱۸ سپتامبر). سرستونِ بالای تابلو و دو رنگِ متضاد خودشان جهت را می‌گویند. */ html[data-board="royal"] .list { gap: 8px; } html[data-board="royal"] .list .cat-group { background: var(--ry-sheet); border: 1px solid var(--line-soft); border-radius: 0 0 14px 14px; padding: 6px 10px 8px; gap: 6px; margin-top: -2px; } html[data-board="royal"] .list .cat-group > .card { background: none; border: 0; box-shadow: none; padding: 3px 0; } /* نوارِ سرمه‌ایِ سرگروه، چسبیده به برگه‌ی زیرش */ html[data-board="royal"] .grouphead { background: var(--ry-head); color: var(--ry-ink); border: 0; border-radius: 14px 14px 0 0; padding: 9px 12px; margin-top: 10px; } html[data-board="royal"] .grouphead::before { display: none; } html[data-board="royal"] .gh-name { color: var(--ry-ink); font-size: 14px; } html[data-board="royal"] .gh-n { color: var(--ry-ink-2); } html[data-board="royal"] .grouphead .gh-ico { width: 21px; height: 21px; } /* دکمه‌ها: پر و قاطع */ html[data-board="royal"] .list .card > .px { min-height: 46px; border-radius: 10px; padding: 5px 8px; border: 1px solid transparent; box-shadow: none; } html[data-board="royal"] .list .card > .px.buy { background: var(--gold); color: var(--on-gold); border-color: var(--gold-deep); } html[data-board="royal"] .list .card > .px.sell { background: var(--navy); color: var(--ry-ink); border-color: var(--navy); } html[data-board="royal"] .list .card > .px .val { font-size: clamp(11.5px, 3.4vw, 14px); } html[data-board="royal"] .list .card > .px.sell .gram { color: var(--ry-ink-2); } html[data-board="royal"] .list .card > .px.buy .gram { opacity: .75; } /* خاموش: هر دو سمت خاکستریِ تخت، با خط‌چین و برچسبِ «بسته» */ html[data-board="royal"] .list .card > .px.off, html[data-board="royal"] .list .card > .px.off.buy, html[data-board="royal"] .list .card > .px.off.sell { background: var(--surface-2); border: 1px dashed var(--line); } html[data-board="royal"] .list .card > .px.off.buy { color: var(--up-ink-off); } html[data-board="royal"] .list .card > .px.off.sell { color: var(--down-ink-off); } /* کارتِ مرجع سربرگِ رنگی ندارد و ردیفِ ساده‌ی خودش می‌ماند */ html[data-board="royal"] .list .cat-group > .card.ref { background: none; } @media (min-width: 640px) { html[data-board="royal"] .list .cat-group { padding: 8px 14px 10px; } html[data-board="royal"] .list .card > .px .val { font-size: 14.5px; } /* ستونِ ثابتِ ۹۵پیکسلیِ پایه برای دکمه‌ی پر و عددِ ۱۴٫۵ تنگ بود (۲۳ عددِ بریده، سنجه‌ی ۱۸ سپتامبر) */ html[data-board="royal"] .list .card:not(.ref) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); } } /* ═══ کارتِ «ظاهر صفحه» در نمای «بیشتر» ════════════════════════════════════ انتخابگرِ خودِ مشتری. عمداً در «بیشتر» است و نه یک دکمه‌ی دیگر در سربرگ — سربرگ جای کارهای روزمره است، نه تنظیماتی که کاربر یک بار عوضش می‌کند. */ .look-box { display: grid; gap: 10px; padding: 12px; } .look-hint { margin: 0; font-size: 11px; } .look-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 560px) { .look-boards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .look-card { display: grid; gap: 7px; justify-items: center; padding: 10px 6px; border-radius: 12px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; min-height: 44px; transition: border-color .15s, background .15s; } .look-card.on { border-color: var(--gold); background: var(--surface-3, var(--surface-2)); } .look-card.on b { color: var(--gold-ink); } .look-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (hover: hover) { .look-card:hover { border-color: var(--gold); } } /* نمونه‌ی کوچکِ چیدمان — سه چهار میله که شکلِ تابلو را می‌رسانند */ .lt { display: grid; width: 46px; height: 32px; gap: 3px; } .lt i { display: block; background: var(--text-faint); border-radius: 2px; opacity: .55; } .lt-classic { grid-template-rows: repeat(3, 1fr); } .lt-classic i { height: 100%; } .lt-tiles { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } .lt-tiles i { border-radius: 4px; } .lt-ledger { grid-template-rows: repeat(3, 1fr); gap: 5px; } .lt-ledger i { height: 2px; align-self: center; } .lt-royal { grid-template-rows: 9px 1fr 1fr; } .lt-royal .lt-h { background: var(--navy); opacity: 1; border-radius: 3px 3px 0 0; } .lt-royal .lt-r { background: var(--gold); opacity: .75; } .look-pals { display: flex; flex-wrap: wrap; gap: 8px; } .look-dot { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0; border: 2px solid var(--line); background: linear-gradient(135deg, var(--d1) 50%, var(--d2) 50%); position: relative; } /* ناحیه‌ی لمس ۴۴px بدونِ بزرگ‌کردنِ خودِ دایره */ .look-dot::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; } .look-dot.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold); } .look-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ═══ پرداختِ دورِ دوم (۱۹ سپتامبر ۲۰۲۶ — ممیزیِ عکسیِ هر چهار تم) ═══════════ */ /* ── فلشِ کشو کنارِ خودِ نام، نه گوشه‌ی ستون ────────────────────────────── فلش `position:absolute` پایینِ لبه‌ی چپِ ستونِ عنوان بود ⇒ روی تابلو کنارِ دکمه‌ی «می‌فروشید» می‌افتاد و مثلِ یک علامتِ یتیم دیده می‌شد (مالِ هیچ‌چیز). حالا دنباله‌ی خودِ نام است و معنی‌اش «این نام باز می‌شود» روشن است. کاشی فلشِ گوشه‌ی خودش را دارد. */ html:not([data-board="tiles"]) .list .card:not(.ref) button.ci .caret { display: none; } html:not([data-board="tiles"]) .list .card:not(.ref) button.ci > .card-unit { padding-inline-end: 0; } /* ⚠️ فلش `absolute` لبه‌ی **خودِ متن** است، نه inline: به‌صورتِ inline در نامِ بلند («آب‌شده نقد پس‌فردا») تنها به خطِ دوم می‌شکست. عنوان به اندازه‌ی متنش جمع می‌شود (`fit-content`) و ۱۵px جا برای فلش نگه می‌دارد. */ html:not([data-board="tiles"]) .list .card:not(.ref) button.ci > .card-title { position: relative; justify-self: center; width: fit-content; max-width: 100%; padding-inline-end: 15px; } html:not([data-board="tiles"]) .list .card:not(.ref) .card-title::after { content: ''; position: absolute; inset-inline-end: 0; top: calc(50% - 6px); width: 12px; height: 12px; background: var(--text-faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .18s; } html:not([data-board="tiles"]) .list .card:not(.ref) button.ci[aria-expanded="true"] .card-title::after { transform: rotate(180deg); background: var(--gold-ink); } @media (prefers-reduced-motion: reduce) { html .list .card .card-title::after { transition: none; } } /* ── کاشی روی گوشی: یک ستون، دو دکمه کنارِ هم ───────────────────────────── دو ستونِ کاشی روی ۳۹۰px هر قلم را ~۲۰۰px بلند می‌کرد (فقط ۴ قلم در صفحه) و قلمِ فردِ آخرِ هر دسته تنها با یک نیمه‌ی خالی کنارش می‌ماند. حالا هر کاشی یک ردیفِ ~۱۰۵پیکسلی است: نام بالا، «می‌خرید» راست و «می‌فروشید» چپ — همان جهتِ تابلوی ردیفی. */ @media (max-width: 639px) { html[data-board="tiles"] .list .cat-group { grid-template-columns: minmax(0, 1fr); gap: 8px; } html[data-board="tiles"] .list .card:not(.ref) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 9px 10px 10px; } html[data-board="tiles"] .list .card:not(.ref) > .ci { grid-column: 1 / -1; grid-row: 1; } html[data-board="tiles"] .list .card:not(.ref) > .px.buy { grid-column: 1; grid-row: 2; } html[data-board="tiles"] .list .card:not(.ref) > .px.sell { grid-column: 2; grid-row: 2; } html[data-board="tiles"] .list .card:not(.ref) > .drawer { grid-column: 1 / -1; grid-row: 3; } /* نام و واحد در یک خط: نام راست، واحد و تغییر کنارش */ html[data-board="tiles"] .list .card:not(.ref) > .ci { display: flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: 8px; padding-inline-end: 22px; /* ⚠️ روی گوشیِ لمسی `button.ci` حداقل ۴۴px است؛ بی `align-content` نام بالای آن می‌چسبید و یک باریکه‌ی خالیِ ۲۲پیکسلی تا دکمه‌ها می‌ماند (عکسِ لمسیِ ۱۹ سپتامبر). ناحیه‌ی لمس با padding بزرگ و margin منفی ≥۴۴ می‌ماند ولی فاصله‌ی دیدنی تا دکمه‌ها همان ۶px است. */ min-height: 0; padding-block: 12px; margin-block: -12px -6px; } html[data-board="tiles"] .list .card:not(.ref) .card-title { font-size: 14.5px; } html[data-board="tiles"] .list .card:not(.ref) .card-unit { padding-inline-end: 0; } html[data-board="tiles"] .list .card:not(.ref) button.ci .caret { top: calc(50% - 8px); } html[data-board="tiles"] .list .card:not(.ref) > .px { padding: 6px 10px; } html[data-board="tiles"] .list .card:not(.ref) > .px .val { font-size: clamp(15px, 4.4vw, 17.5px); } } /* ── دفترِ آرام ─────────────────────────────────────────────────────────── */ /* گوشی: ستونِ ثابتِ ۹۵پیکسلی رقمِ اولِ «۲۳۲,۱۱۸,۰۰۰» را می‌بُرید (عکسِ ۱۹ سپتامبر). ستون‌ها نسبی شدند و عدد کمی جمع‌وجورتر. */ @media (max-width: 639px) { html[data-board="ledger"] .list .card:not(.ref) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); } /* نامِ بلند («آب‌شده نقد کارتخوان») با فلشِ کنارش باید یک‌خطی بماند */ html[data-board="ledger"] .list .card .card-title { font-size: 12.5px; } html[data-board="ledger"] .list .card > .px .val { font-size: clamp(12.5px, 3.5vw, 14.5px); letter-spacing: -.3px; } html[data-board="ledger"] .list .card > .px { padding: 2px 0; } } /* دسکتاپ: یک جدولِ ۱۲۷۰پیکسلی عدد و نام را ۴۰۰ پیکسل از هم دور می‌انداخت و چشم باید عرضِ صفحه را می‌پیمود. جدول تا ۸۸۰ پهن می‌شود و وسط می‌نشیند. */ @media (min-width: 960px) { html[data-board="ledger"] .list, html[data-board="ledger"] .stickybar, html[data-board="ledger"] .banner, html[data-board="ledger"] .notice, html[data-board="ledger"] .listfoot, html[data-board="ledger"] .updbar, html[data-board="ledger"] .bnrs { max-width: 880px; margin-inline: auto; } html[data-board="ledger"] .list .card > .px .val { font-size: 17px; } html[data-board="ledger"] .list .card .card-title { font-size: 14.5px; } html[data-board="ledger"] .list .card:not(.ref) { padding-block: 10px; } } /* ── سرمه‌ای و طلا ──────────────────────────────────────────────────────── */ /* نوارِ سرگروه به برگه‌ی زیرش **چسبیده**: فاصله‌ی ۶پیکسلیِ قبلی (گپِ فهرست) یک باریکه‌ی سفید بینِ سرمه‌ای و برگه می‌انداخت و دو تکه‌ی جدا دیده می‌شدند. */ html[data-board="royal"] .list .cat-group { margin-top: -8px; border-top: 0; } /* گوشی: عدد از دکمه‌ی پر بیرون می‌زد («۲۳۲» → «r۳۲»، عکسِ ۱۹ سپتامبر) */ @media (max-width: 639px) { html[data-board="royal"] .list .card:not(.ref) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); } html[data-board="royal"] .list .card > .px { padding: 5px 3px; } html[data-board="royal"] .list .card > .px .val { font-size: clamp(12px, 3.45vw, 14px); letter-spacing: -.35px; } } /* لبه‌ی طلاییِ زیرِ سرگروه در تمِ روشن هم (در شب بود): مرزِ نوار و برگه‌ی سفید */ html[data-board="royal"][data-theme="light"] .grouphead { box-shadow: inset 0 -2px 0 var(--gold); } /* ── پیش‌نمایشِ پنل: نوارِ اسکرولِ خاکستری داخلِ قابِ گوشی دیده می‌شد ── */ html[data-preview="1"] { scrollbar-width: none; } html[data-preview="1"]::-webkit-scrollbar { display: none; }