/* ============================================================ سبزحساب — استایل اپلیکیشن پیاده‌سازی طراحی تأییدشده · بر پایه tokens.css قاعده ج-۱: هیچ وابستگی خارجی ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================ نوار لغزش رنگش از توکن می‌آید تا در حالت شب و با رنگ برند کسب‌وکار هم جا بیفتد — نه نوار خاکستری پیش‌فرض ویندوز وسط یک پوسته سبز. `scrollbar-width` و `scrollbar-color` **ارث می‌رسند**، پس یک بار روی ریشه کافی است و همه ناحیه‌های لغزان را می‌گیرد؛ هر ناحیه‌ای که رنگ دیگری بخواهد (مثل نوار کناری تیره) خودش بازنویسی می‌کند. قاعده‌های `-webkit-` برای مرورگرهای پیش از پشتیبانی استاندارد مانده‌اند؛ جایی که هر دو باشند، مرورگر استاندارد را برمی‌دارد. ============================================================ */ :root { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid transparent; background-clip: padding-box; border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-strong); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ============================================================ پوسته ============================================================ */ .shell { min-height: 100vh; display: flex; flex-direction: column; } /* خط امضای برند بالای پنجره می‌ماند و با صفحه بالا نمی‌رود. نوار کناری چسبان از زیر همین خط شروع می‌شود؛ اگر خط می‌لغزید، بالای منو یک شکاف سه‌پیکسلی به رنگ زمینه باز می‌شد. */ .sweep { position: sticky; inset-block-start: 0; z-index: 45; height: 3px; flex: none; background: var(--brand-sweep); } .shell-body { flex: 1; display: flex; min-height: 0; } /* ---------- سایدبار — سمت راست چون RTL ---------- 🔴 ارتفاعش ارتفاع **پنجره** است، نه ارتفاع صفحه. تا امروز یک ستون معمولی فلکس بود و `align-items: stretch` آن را تا ته بلندترین صفحه کش می‌داد. نتیجه روی یک گزارش سه‌صفحه‌ای: پاورقی «نام کاربر» که `margin-top: auto` دارد سه صفحه پایین‌تر می‌نشست و کاربر برای دیدن دکمه خروج باید تا ته صفحه اسکرول می‌کرد — و خود منو هم با صفحه بالا و پایین می‌رفت. `align-self: flex-start` لازم است: بدون آن `stretch` ارتفاع تعیین‌شده را بی‌اثر می‌کند و `sticky` چیزی برای چسبیدن ندارد. `top: 3px` هم دقیقا قد همان خط امضاست که بالای پنجره مانده. */ .side { width: 232px; flex: none; background: var(--brand-900); display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3); position: sticky; inset-block-start: 3px; align-self: flex-start; height: calc(100vh - 3px); height: calc(100dvh - 3px); /* روی موبایل، نوار آدرس را حساب می‌کند */ overflow: hidden; /* لغزش کار `.side-scroll` است */ } .side-brand { flex: none; display: flex; align-items: center; gap: 9px; padding: var(--sp-1) 10px var(--sp-5); color: #fff; font-weight: 700; font-size: var(--text-card); text-decoration: none; } .side-link { display: flex; align-items: center; gap: 10px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-field); color: #A9CFC3; font-size: var(--text-sub); text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .side-link:hover { background: rgba(255,255,255,.06); color: #fff; } .side-link.on { background: rgba(255,255,255,.10); color: #fff; font-weight: 500; } .side-link svg { flex: none; } /* | گزینه‌ای که در طرح اشتراک نیست — «قفل»، نه «پنهان». | | 🔴 چرا اصلا دیده می‌شود: مشتری‌ای که نمی‌داند این امکان وجود دارد، | هرگز برایش پول نمی‌دهد. پنهان کردنش هیچ چیزی را امن‌تر نمی‌کند | (مسیرش با میان‌افزار `plan:` بسته است) و فقط فروش را می‌کشد. | | قفل با `mask` کشیده می‌شود نه با تصویر، تا رنگش همان رنگ متن باشد | و در تم روشن و تاریک خودبه‌خود درست بماند. */ .side-link[data-locked] { opacity: .5; } .side-link[data-locked]:hover { opacity: .75; } .side-link[data-locked]::after { content: ''; margin-inline-start: auto; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--icon-lock) center / contain no-repeat; mask: var(--icon-lock) center / contain no-repeat; } .side-count { margin-inline-start: auto; font-family: var(--font-num); font-size: 11px; color: #86B5A5; direction: ltr; } .side-pill { margin-inline-start: auto; font-size: 9.5px; font-weight: 500; padding: 2px 7px; border-radius: var(--r-pill); } .side-pill--warn { background: rgba(253,176,34,.18); color: #FDB022; } .side-pill--lime { background: rgba(152,231,102,.16); color: #98E766; } .side-count--warn { font-family: var(--font-ui); padding: 1px 7px; border-radius: var(--r-pill); background: rgba(253,176,34,.18); color: #FDB022; font-size: 10.5px; } /* ---------- بخش‌های جمع‌شونده ---------- 🔴 پیش‌فرض **بسته** است و باز شدن با یک کلاس روی خود بخش — نه با `
`. `
` وسوسه‌انگیز بود چون بدون جاوااسکریپت هم باز و بسته می‌شود، ولی روی گوشی از کار می‌افتاد: آنجا نوار کناری به نوار پایین آیکون‌ها تبدیل می‌شود و پیوندها باید **بی‌توجه به باز یا بسته بودن بخش** دیده شوند. محتوای `
` بسته را با CSS نمی‌شود برگرداند؛ یک `
` ساده را می‌شود. */ .side-sec { margin-top: 2px; } /* یک پیوند تک (خانه، گزارش‌ها) هم‌تراز بخش‌ها نیست — فاصله این را می‌گوید */ .side-link + .side-sec, .side-sec + .side-link { margin-top: var(--sp-4); } /* 🔴 سر بخش در حالت عادی **زمینه ندارد** — هم‌رنگ خود نوار کناری است. تا امروز یک زمینه همیشگی داشت تا «فروش» (بخش) از «فاکتورها» (مقصد) جدا دیده شود. ولی نتیجه در عمل این بود که نوار کناری به شش جعبه روشن روی یک زمینه تیره تبدیل می‌شد — بی‌آنکه موس جایی باشد. یعنی منو همیشه به‌نظر می‌رسید شش چیز «انتخاب‌شده» دارد. تفکیک بخش از مقصد از جای درست‌ترش می‌آید و همین حالا هم هست: فلش باز و بسته، و رنگ متفاوت متن (`#86B5A5` برای بخش در برابر `#A9CFC3` برای پیوند). زمینه، سومین نشانه برای یک تفاوت بود. حالا زمینه فقط **حالت** را می‌گوید: موس رویش هست، یا بخش باز است. ترتیب این سه قاعده عمدی است — `:hover` بعد از `is-open` می‌آید تا روی بخش باز هم بازخورد موس دیده شود (هم‌وزن‌اند، پس ترتیب تصمیم می‌گیرد). */ .side-sec-head { display: flex; align-items: center; gap: 2px; padding-inline-end: 4px; border-radius: var(--r-field); background: transparent; cursor: pointer; transition: background var(--t-fast) var(--ease); } .side-sec.is-open > .side-sec-head { background: transparent; } .side-sec-head:hover { background: rgba(255,255,255,.08); } .side-sec.is-open > .side-sec-head:hover { background: rgba(255,255,255,.10); } .side-sec-head:hover .side-sec-btn, .side-sec-head:hover .side-chev { color: #fff; } /* «+» زیر موس سر بخش سبز می‌ماند — سفید شدنش آن را در ردیف گم می‌کرد */ .side-sec-head:hover .side-add { background: rgba(152,231,102,.24); } /* 🔴 ترتیب سه عنصر سر بخش صریح نوشته شده، نه به امید ترتیب HTML. فلش باید در همه بخش‌ها روی یک خط عمودی بنشیند — چه بخش «+» داشته باشد چه نداشته باشد. پس فلش همیشه بیرونی‌ترین است و «+» بین برچسب و فلش. با تکیه بر ترتیب HTML، هر جابه‌جایی در کامپوننت این ستون را به هم می‌ریخت و «فروش» و «خرید» از بقیه منو بیرون می‌زدند. */ .side-sec-btn { order: 1; } .side-add { order: 2; } .side-chev { order: 3; } .side-sec-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-field); background: transparent; color: #86B5A5; font-size: var(--text-sub); text-align: start; cursor: pointer; transition: color var(--t-fast) var(--ease); } .side-sec-btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-sec-btn svg { flex: none; } .side-sec-btn:focus-visible { outline: 2px solid #98E766; outline-offset: -2px; } .side-sec.is-open > .side-sec-head .side-sec-btn { color: #fff; font-weight: 500; } /* فلش سمت چپ «+» می‌نشیند — بیرون دکمه، ولی روی همان سطر کلیک‌پذیر */ .side-chev { flex: none; display: grid; place-items: center; width: 20px; height: 26px; color: #86B5A5; opacity: .75; transition: transform var(--t-base) var(--ease), color var(--t-fast) var(--ease); } .side-sec.is-open > .side-sec-head .side-chev { transform: rotate(180deg); color: #fff; } /* نشانه بخش بسته — باز که شد، خود پیوند همان را دقیق‌تر نشان می‌دهد */ .side-sec-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #98E766; } .side-sec-warn { flex: none; font-family: var(--font-ui); font-size: 10.5px; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(253,176,34,.18); color: #FDB022; } .side-sec.is-open .side-sec-dot, .side-sec.is-open .side-sec-warn { display: none; } /* «+» فاکتور تازه — چه بخش باز باشد چه بسته، سر جایش است. 🔴 زمینه‌اش **همیشه** دیده می‌شود، نه فقط زیر موس. تا امروز یک خط نازک هم‌رنگ برچسب بود و کنار آیکون بخش و فلش گم می‌شد؛ کسی که دنبال «فاکتور تازه» بود اصلا نمی‌دید که میان‌بری آنجاست. حالا تنها عنصر رنگی سر بخش است و از یک نگاه پیداست. */ .side-add { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-field); background: rgba(152,231,102,.14); box-shadow: inset 0 0 0 1px rgba(152,231,102,.26); color: #98E766; text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .side-add:hover { background: rgba(152,231,102,.34); color: #EAF7EF; } .side-add:focus-visible { outline: 2px solid #98E766; outline-offset: -2px; } /* خط باریک کنار پیوندها می‌گوید این‌ها زیرمجموعه‌اند، نه هم‌تراز */ .side-sec-body { display: none; margin: 2px 0 var(--sp-2); margin-inline-start: 20px; padding-inline-start: 6px; border-inline-start: 1px solid rgba(255,255,255,.09); } .side-sec.is-open > .side-sec-body { display: block; } /* ---------- ناحیه لغزان منو ---------- نشان برند بالا و پاورقی پایین بیرون این لایه‌اند، پس هر دو ثابت می‌مانند. در حالت عادی هیچ نواری دیده نمی‌شود — فقط اگر بخشی باز شود و پیوندهایش از قد پنجره بگذرند. */ .side-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; } .side-scroll::-webkit-scrollbar { width: 6px; } .side-scroll::-webkit-scrollbar-track { background: transparent; } .side-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border: 0; border-radius: var(--r-pill); } .side-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); } .side-foot { flex: none; margin-top: auto; padding: var(--sp-3) 10px var(--sp-1); border-top: 1px solid rgba(255,255,255,.09); } .side-user { display: flex; align-items: center; gap: 9px; } .side-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; background: rgba(152,231,102,.18); color: #98E766; display: grid; place-items: center; font-size: 12px; font-weight: 700; } .side-user b { display: block; color: #fff; font-size: 12px; font-weight: 500; } .side-user span { color: #86B5A5; font-size: 10.5px; } .side-note { font-size: 11px; color: #86B5A5; line-height: 1.7; } /* ---------- نوار بالا ---------- */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: 60px; flex: none; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-6); } .doors { display: flex; gap: 3px; background: var(--surface-sunken); padding: 3px; border-radius: var(--r-pill); } .door { padding: 6px 18px; border-radius: var(--r-pill); color: var(--ink-muted); font-size: var(--text-sub); text-decoration: none; transition: color var(--t-fast) var(--ease); } .door:hover { color: var(--ink); } .door.on { background: var(--brand-primary); color: var(--ink-on-brand); font-weight: 500; } /* 🔴 جعبه جستجو مثل **فیلدهای صفحه** است، نه مثل یک دکمه خاکستری. تا امروز زمینه فرورفته و حاشیه کم‌رنگ داشت و کنار فیلدهای فرم بیگانه به‌نظر می‌رسید: چیزی که شبیه فیلد نبود ولی قرار بود تویش بنویسی. حالا همان `background`, `border-color` و ارتفاع `.input` را دارد و زیر موس و فوکوس هم مثل فیلد رفتار می‌کند — حلقه سبز `:focus` همان حلقه‌ای است که هر فیلد دیگری در سبزحساب دارد. */ .omni { flex: 1; max-width: 460px; height: 38px; display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-field); padding: 0 var(--sp-3); color: var(--ink-faint); font-family: var(--font-ui); font-size: var(--text-sub); cursor: text; text-align: right; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .omni > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .omni:hover { border-color: var(--brand-primary); } .omni:focus-visible { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-50); } .omni svg { flex: none; color: var(--ink-faint); } .omni:hover svg { color: var(--brand-primary); } .kbd { font-family: var(--font-num); font-size: 10.5px; direction: ltr; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; color: var(--ink-faint); } .omni .kbd { margin-inline-start: auto; } .topbar-right { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-4); } .bell { position: relative; color: var(--ink-muted); display: grid; place-items: center; } .bell i { position: absolute; top: -2px; inset-inline-start: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); } .tenant-pill { display: flex; align-items: center; gap: var(--sp-2); padding: 5px 10px 5px 6px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; } /* ---------- ناوبری فرعی ---------- */ .subnav { flex: none; display: flex; gap: var(--sp-1); overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 var(--sp-6); } .subnav a { padding: var(--sp-3); font-size: var(--text-sub); color: var(--ink-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .subnav a:hover { color: var(--ink); } .subnav a.on { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: 500; } /* ---------- صفحه ---------- */ .page { flex: 1; padding: var(--sp-6) var(--sp-6) var(--sp-16); overflow-y: auto; } .page-head { margin-bottom: var(--sp-5); } .page-head h1 { font-size: var(--text-title); font-weight: 700; margin: 0 0 2px; } .page-head p { margin: 0; color: var(--ink-muted); font-size: var(--text-sub); } /* ============================================================ کارت‌ها و آمار ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); } .card > header { padding: 13px var(--sp-5); border-bottom: 1px solid var(--border); background: var(--surface-sunken); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .card > header h2 { margin: 0; font-size: 14px; font-weight: 700; } /* روی زمینه فرورفته سربرگ کارت، ink-faint به ۴٫۳:۱ می‌افتد و رد می‌شود */ .card > header .meta { margin-inline-start: auto; font-size: var(--text-label); color: var(--ink-muted); } .card > .body { padding: var(--sp-4) var(--sp-5); } /* عدد غالب */ .hero-row { display: flex; gap: var(--sp-5); align-items: stretch; margin-bottom: var(--sp-5); flex-wrap: wrap; } .hero { flex: none; width: 330px; padding: 22px var(--sp-6); display: flex; flex-direction: column; justify-content: center; } .hero .k { font-size: 12.5px; color: var(--ink-muted); margin-bottom: var(--sp-2); } .hero .v { font-family: var(--font-num); font-size: 40px; font-weight: 700; line-height: 1.15; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; } .hero .u { font-size: var(--text-label); color: var(--ink-faint); margin-top: 2px; } .hero .delta { display: flex; gap: 6px; margin-top: var(--sp-4); padding-top: 14px; border-top: 1px solid var(--border); font-size: var(--text-label); color: var(--ink-muted); } .stat-grid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-3); min-width: 320px; } .stat { padding: 14px var(--sp-4); } .stat .k { font-size: var(--text-label); color: var(--ink-muted); margin-bottom: 5px; } .stat .v { font-family: var(--font-num); font-size: 20px; font-weight: 600; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; } .stat .s { font-size: 11px; color: var(--ink-faint); margin-top: var(--sp-1); } .stat .s.warn { color: var(--warning); } /* ============================================================ کارهای منتظر ============================================================ */ .task { display: flex; gap: 13px; align-items: center; padding: 13px var(--sp-5); border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; } .task:last-child { border-bottom: 0; } .task:hover { background: var(--brand-50); } .task-ico { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; } .task-ico--warn { background: var(--warning-bg); color: var(--warning); } .task-ico--info { background: var(--info-bg); color: var(--info); } .task-ico--neg { background: var(--negative-bg); color: var(--negative); } .task-body { flex: 1; min-width: 0; } .task-body b { display: block; font-size: var(--text-sub); font-weight: 500; } .task-body span { font-size: 11.5px; color: var(--ink-faint); } .task-cta { font-size: var(--text-label); color: var(--brand-primary); font-weight: 500; white-space: nowrap; } /* ============================================================ نوار کانال ============================================================ */ .bars { display: flex; flex-direction: column; gap: 15px; } .bar-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 6px; } .bar-head b { font-size: var(--text-sub); font-weight: 500; } .bar-head .amt { margin-inline-start: auto; font-family: var(--font-num); font-size: var(--text-sub); font-weight: 600; direction: ltr; } .bar-head .pct { font-family: var(--font-num); font-size: 11px; color: var(--ink-faint); width: 40px; text-align: left; direction: ltr; } .bar-track { height: 7px; background: var(--surface-sunken); border-radius: var(--r-pill); overflow: hidden; } .bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--brand-primary); } .bar-fill--alt { background: var(--brand-400); } .bar-fill--neg { background: var(--negative); } /* ============================================================ جدول ============================================================ */ .scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } th { text-align: right; white-space: nowrap; font-size: var(--text-label); font-weight: 500; color: var(--ink-faint); letter-spacing: .02em; padding: 0 var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--border); } thead th:first-child { padding-top: var(--sp-3); } td { padding: 9px var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--text-sub); } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--brand-50); } tfoot td { font-weight: 700; background: var(--surface-sunken); border-top: 2px solid var(--border-strong); border-bottom: 0; } th.n, td.n { text-align: left; } .n { font-family: var(--font-num); direction: ltr; unicode-bidi: isolate; text-align: left; white-space: nowrap; } .neg { color: var(--negative); } .pos { color: var(--positive); } .muted { color: var(--ink-faint); } .sub { font-size: 11px; color: var(--ink-faint); } /* ============================================================ نشان ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* دکمه پیش‌فرض فرم فهرست — اینتر جست‌وجو کند، نه دانلود اکسل (export-menu) */ .list-default-submit { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* جست‌وجوی زنده: نتیجه قبلی کم‌رنگ تا نتیجه تازه برسد (list.js) */ [data-list-results] { transition: opacity var(--t-fast) var(--ease); } [data-list-results].is-loading { opacity: .55; pointer-events: none; } /* کالای ترکیبی در فهرست کالا — آیکون جعبه جای نقطه */ .bundle-badge { margin-inline-start: var(--sp-2); padding: 2px 8px; vertical-align: middle; } .bundle-badge::before { display: none; } .badge--pos { background: var(--positive-bg); color: var(--positive); } .badge--neg { background: var(--negative-bg); color: var(--negative); } .badge--warn { background: var(--warning-bg); color: var(--warning); } .badge--info { background: var(--info-bg); color: var(--info); } .badge--neu { background: var(--neutral-bg); color: var(--neutral); } /* ============================================================ دکمه ============================================================ */ .btn { height: var(--h-control); padding: 0 var(--sp-4); display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: var(--r-field); font-family: var(--font-ui); font-size: var(--text-sub); font-weight: 500; cursor: pointer; text-decoration: none; /* برچسب دکمه هرگز نباید دو خط شود — دکمه‌ای که می‌شکند خراب است */ white-space: nowrap; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); /* * 🔴 دکمه پایه باید خودش رنگ داشته باشد. * * تا قبل از این، `.btn` بدون تغییردهنده هیچ `background` و `color` * نداشت و ظاهر پیش‌فرض مرورگر را می‌گرفت — که در حالت تاریک یک * جعبه سفید بی‌متن می‌شد. هر تغییردهنده‌ای (`--primary`, `--ghost`, * `--danger`) این را بازنویسی می‌کند، پس چیزی نمی‌شکند. */ background: var(--surface-sunken); color: var(--ink); border-color: var(--border-strong); } /* * 🔴 موس دکمه پایه **فقط** روی دکمه‌های بی‌زمینه سبز می‌کند. * * تا امروز اینجا `.btn:hover { color: var(--brand-primary) }` بدون قید * نوشته بود. `.btn--primary:hover` پایین‌تر فقط `background` را * بازنویسی می‌کرد و `color` را نه — پس متن دکمه سبز پر، زیر موس * سبز می‌شد و روی زمینه سبز عملا ناپدید. یعنی دقیقا همان دکمه‌ای که * مهم‌ترین کار صفحه است («ثبت فاکتور»، «ثبت مشتری») در لحظه‌ای که * کاربر رویش می‌رفت، خوانده نمی‌شد. * * `:not()` جلوی تکرار این را از ریشه می‌گیرد: هر تغییردهنده‌ای که * زمینه پر دارد از این قاعده بیرون است و دیگر لازم نیست یادمان * بماند `color` را هم بازنویسی کنیم. */ .btn:hover:not(.btn--primary):not(.btn--brand) { border-color: var(--brand-primary); color: var(--brand-primary); } .btn--primary { background: var(--brand-primary); color: var(--ink-on-brand); font-weight: 700; } /* رنگ متن صریح تکرار شده — تا اگر روزی قاعده بالا عوض شد، این نشکند */ .btn--primary:hover { background: var(--brand-700); color: var(--ink-on-brand); } :root[data-theme="dark"] .btn--primary:hover { background: var(--brand-300); color: var(--ink-on-brand); } /* * 🔴 `.btn--brand` در چهار قالب نوشته شده بود و **هیچ‌وقت تعریف نشده * بود** — دقیقا همان اشتباهی که `.btn--sm` داشت. * * نتیجه‌اش دکمه‌ای بود با ظاهر دکمه پایه (زمینه فرورفته) که زیر موس * متنش سبز می‌شد: همان ایراد بالا، با یک لایه گیج‌کنندگی بیشتر، چون * نویسنده قالب فکر می‌کرد دکمه‌ای سبز گذاشته. */ .btn--brand { background: var(--brand-primary); color: var(--ink-on-brand); border-color: var(--brand-primary); font-weight: 500; } .btn--brand:hover { background: var(--brand-700); color: var(--ink-on-brand); border-color: var(--brand-700); } :root[data-theme="dark"] .btn--brand:hover { background: var(--brand-300); color: var(--ink-on-brand); border-color: var(--brand-300); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); } .btn--ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .btn--danger { background: transparent; color: var(--negative); border-color: var(--negative); } .btn--danger:hover { background: var(--negative-bg); color: var(--negative); border-color: var(--negative); } /* 🔴 `.btn--sm` در سه جا (پنل نمادهای نرخ، فیلدهای دفترچه) نوشته شده بود ولی هیچ‌وقت تعریف نشده بود — یعنی دکمه‌ای که قرار بود کوچک باشد، با ارتفاع کامل ۴۰ پیکسل داخل یک پنل فشرده می‌نشست. */ .btn--sm { height: var(--h-control-sm); padding: 0 var(--sp-3); font-size: var(--text-label); } /* ============================================================ دفتر روزنامه — نمای دوستونی ============================================================ */ .split { flex: 1; display: flex; min-height: 0; } .split-list { width: 400px; flex: none; background: var(--surface); border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; } .split-list > header { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-2); } .split-list > header b { font-size: var(--text-sub); font-weight: 700; } .split-list .rows { flex: 1; overflow-y: auto; } .split-detail { flex: 1; padding: var(--sp-6); overflow-y: auto; min-width: 0; } .entry-row { display: block; padding: 11px var(--sp-4); border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; border-inline-end: 3px solid transparent; } .entry-row:hover { background: var(--surface-sunken); } .entry-row.on { background: var(--brand-50); border-inline-end-color: var(--brand-primary); } .entry-row .line1 { display: flex; align-items: baseline; gap: var(--sp-2); } .entry-row .num { font-family: var(--font-num); font-size: 12px; font-weight: 600; color: var(--ink-faint); direction: ltr; } .entry-row.on .num { color: var(--ink); } .entry-row .desc { font-size: var(--text-sub); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entry-row.on .desc { font-weight: 500; } .entry-row .line2 { display: flex; gap: 10px; margin-top: 3px; font-size: 11px; color: var(--ink-faint); } /* ============================================================ پالت فرمان ============================================================ */ .palette-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(2,66,64,.42); display: none; align-items: flex-start; justify-content: center; padding: 110px var(--sp-4) var(--sp-4); } .palette-backdrop.open { display: flex; } .palette { width: 100%; max-width: 680px; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--r-modal); overflow: hidden; box-shadow: 0 24px 60px -12px rgba(2,66,64,.35), 0 6px 16px -6px rgba(2,66,64,.18); display: flex; flex-direction: column; max-height: calc(100vh - 160px); } .palette-input { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .palette-input input { flex: 1; border: 0; outline: 0; background: none; font-family: var(--font-ui); font-size: 16px; color: var(--ink); } .palette-input input::placeholder { color: var(--ink-faint); } .palette-results { flex: 1; overflow-y: auto; padding-bottom: var(--sp-2); } .palette-group { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--ink-faint); padding: 14px var(--sp-5) 6px; } .palette-item { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-5); text-decoration: none; color: inherit; cursor: pointer; } .palette-item.on { background: var(--brand-50); } .palette-item .ico { width: 28px; height: 28px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink-muted); } .palette-item.on .ico { background: var(--brand-primary); color: var(--ink-on-brand); } .palette-item .txt { flex: 1; min-width: 0; } .palette-item .txt b { display: block; font-size: 13.5px; font-weight: 500; } .palette-item .txt span { font-size: 11.5px; color: var(--ink-faint); } .palette-foot { display: flex; align-items: center; gap: var(--sp-4); padding: 11px var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-sunken); font-size: 11.5px; color: var(--ink-faint); } .palette-foot span { display: flex; align-items: center; gap: 6px; } .palette-empty { padding: var(--sp-10) var(--sp-5); text-align: center; color: var(--ink-faint); font-size: var(--text-sub); } /* ============================================================ کمکی ============================================================ */ .hint { border-inline-start: 3px solid var(--border-strong); padding: 2px var(--sp-4); margin: var(--sp-4) 0; color: var(--ink-muted); font-size: var(--text-label); line-height: 1.8; max-width: var(--measure); } .empty { padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--ink-faint); font-size: var(--text-sub); } .grid-2 { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--sp-5); } .mobile-only { display: none; } /* ============================================================ ناوبری گوشی — پیش‌فرض: وجود ندارد 🔴 هر سه عنصر روی هر صفحه در HTML هستند و اینجا برداشته می‌شوند. جایگزینش این بود که قالب با یک شرط سرور تصمیم بگیرد رندرشان کند یا نه — که یعنی صفحه‌ای که کش شده، روی دسکتاپ و گوشی یکی نیست و کش صفحه از دست می‌رود. اندازه‌شان هم ناچیز است: نوار پایین پنج خانه دارد و منوی کشویی همان `.side` است که از قبل بود. ============================================================ */ .tabbar, .drawer-scrim, .side-close, .side-fav, .side-doors { display: none; } /* 🔴 وقتی منوی کشویی باز است، صفحه زیرش نباید بلغزد. بدون این، انگشتی که داخل منو بالا و پایین می‌کند به ته فهرست که می‌رسد، صفحه پشت را می‌لغزاند — و کاربر منو را می‌بندد و خودش را جای دیگری از صفحه می‌بیند. */ body.drawer-open { overflow: hidden; } /* کسی که حرکت را خاموش کرده، منو را همان‌جا باز و بسته می‌بیند — بدون کشیده شدن. باز و بسته شدنش سر جایش می‌ماند. */ @media (prefers-reduced-motion: reduce) { .side, .drawer-scrim { transition: none; } } /* ============================================================ موبایل ============================================================ */ @media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0,1fr); } .split { flex-direction: column; } .split-list { width: auto; border-inline-start: 0; border-bottom: 1px solid var(--border); max-height: 320px; } .split-detail { padding: var(--sp-4); } .hero { width: 100%; } .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { /* ══════════════════════════════════════════════════════════ نوار کناری روی گوشی = منوی کشویی، نه نوار خوابیده 🔴 آنچه اینجا بود و چرا رفت: تا امروز همین `.side` به نواری افقی‌لغزان پایین صفحه تبدیل می‌شد و همه پیوندهای `--primary` — حدود بیست‌تا — داخلش می‌نشستند. کامنت قبلی صادقانه نوشته بود که لغزش یک «تصمیم» بوده، ولی تصمیم درستی نبود: • بخش‌ها («فروش»، «پول»، «انبار») حذف می‌شدند، پس ساختار نرم‌افزار روی گوشی اصلا دیده نمی‌شد. • نواری که می‌لغزد یعنی هرچه بعد از خانه چهارم است پنهان است، بی‌آنکه چیزی بگوید پنهان است. • «نام کاربر» و «خروج» هم با `.side-foot` ناپدید می‌شدند. حالا منو کامل است و از لبه راست بیرون می‌آید؛ و چیزی که همیشه دیده می‌شود، نوار پنج‌خانه‌ای `.tabbar` است. ══════════════════════════════════════════════════════════ */ .side { /* 🔴 لبه راست با `inset-inline-start` گرفته می‌شود و نه `right`. سند `dir="rtl"` است، پس شروع محور درون‌خطی همان لبه راست است — همان سمتی که نوار کناری روی دسکتاپ دارد. منویی که از سمت دیگری بیرون بیاید، جای ذهنی‌اش را عوض می‌کند. */ position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; z-index: 91; width: min(19.5rem, 86vw); height: 100%; height: 100dvh; flex-direction: column; padding: var(--sp-4) var(--sp-3); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); border-inline-end: 1px solid rgba(255,255,255,.09); box-shadow: -20px 0 48px rgba(0,0,0,.34); /* 🔴 بسته یعنی بیرون از صفحه، نه `display: none`. با `display: none` منو در هر باز شدن از نو چیده می‌شود و هیچ حرکتی ندارد — کاربر نمی‌فهمد این لایه از کجا آمد و برای بستنش کجا را باید بزند. کشیده شدن از لبه، خودش می‌گوید «همان‌جا هم برمی‌گردد». `translateX` فیزیکی است: مثبت یعنی راست، در RTL هم همین. */ transform: translateX(100%); visibility: hidden; transition: transform .22s var(--ease), visibility 0s linear .22s; } .side.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; } /* 🔴 حالت «ریل آیکونی» اینجا خنثی نمی‌شود — اصلا اعمال نمی‌شود. یک بار همین‌جا قاعده‌های ریل با `display: revert` خنثی شده بودند و دو طور غلط بود: `revert` به مقدار مرورگر برمی‌گردد نه به قاعده قبلی ما (پس `.side-brand` از `flex` به `inline` می‌افتاد)، و `shell.css` بعد از این فایل بار می‌شود پس عرض ۶۲ پیکسلی ریل به هر حال برنده می‌شد. درستش یک خط است و در `shell.css`: کل بلاک ریل درون `@media (min-width: 641px)` نشسته. */ /* تولتیپ ریل روی لمس معنایی ندارد و زیر انگشت گیر می‌کند */ .side [data-tip]::after { content: none; } /* 🔴 دکمه «جمع‌کردن منو» روی گوشی برداشته می‌شود. کاری که می‌کند — بردن نوار کناری به ریل آیکونی — اینجا معنایی ندارد، چون نوار کناری اصلا در چیدمان صفحه نیست. دکمه‌ای که هیچ اتفاق دیدنی‌ای نمی‌اندازد، بدتر از نبودنش است. */ .ticon--edge { display: none; } /* بستن منو — دکمه‌ای که فقط اینجا معنا دارد */ .side-close { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #D9EFE6; cursor: pointer; } .side-close:active { background: rgba(255,255,255,.16); } .side-brand { padding-inline-end: 44px; } /* ---------- دو در ورودی، داخل منو ---------- */ .side-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; flex: none; margin-bottom: var(--sp-4); padding: 3px; border-radius: var(--r-pill); background: rgba(0,0,0,.22); } .side-door { padding: 9px 4px; border-radius: var(--r-pill); color: #86B5A5; text-decoration: none; text-align: center; font-size: 12px; font-weight: 500; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } /* 🔴 در فعال زمینه روشن می‌گیرد و نه فقط رنگ متن. این سوییچ تنها راه رسیدن به «حسابداری» روی گوشی است؛ اگر کاربر نفهمد کدام طرفش ایستاده، با یک زدن به دنیای دیگری می‌رود و فکر می‌کند منو عوض شده چون چیزی خراب شده. */ .side-door.on { background: rgba(255,255,255,.13); color: #fff; } /* ---------- پراستفاده شما ---------- */ .side-fav { display: block; flex: none; padding-bottom: var(--sp-4); } .side-fav-title { display: flex; align-items: center; gap: 5px; padding: 0 10px var(--sp-2); font-size: 10.5px; font-weight: 500; color: #86B5A5; } /* 🔴 دو ستون و نه یک فهرست عمودی. شش مقصد در یک ستون، نصف ارتفاع منو را می‌خورد و بخش‌های واقعی را به زیر خط تا می‌فرستد. دو ستون همان شش‌تا را در سه سطر می‌گذارد و هنوز هدف لمسی‌اش از ۴۴ پیکسل بزرگ‌تر است. */ .side-fav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .side-fav-tile { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: var(--sp-2) 9px; border-radius: var(--r-field); background: rgba(255,255,255,.06); color: #D9EFE6; text-decoration: none; font-size: 11.5px; line-height: 1.4; } .side-fav-tile svg { flex: none; color: #98E766; } .side-fav-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-fav-tile:active { background: rgba(255,255,255,.13); } .side-fav-tile.on { background: rgba(152,231,102,.16); color: #fff; } /* هدف لمسی: هر سطر منو دست‌کم ۴۴ پیکسل. روی دسکتاپ ۳۲ پیکسل کافی است چون نشانگر موس دقیق است؛ انگشت نیست. */ .side-link, .side-sec-btn { min-height: 44px; } /* ---------- پرده پشت منو ---------- */ .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(6, 26, 20, .52); opacity: 0; transition: opacity .22s var(--ease); } .drawer-scrim.is-open { opacity: 1; } /* صفت hidden باید بر کلاس بچربد، وگرنه پرده همیشه روی صفحه است */ .drawer-scrim[hidden] { display: none; } /* ══════════════════════════════════════════════════════════ نوار پایین — پنج خانه ثابت ══════════════════════════════════════════════════════════ */ .tabbar { position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); /* سایه رو به بالا، تا وقتی جدولی زیرش می‌لغزد مرزش دیده شود. بدون آن، ردیف‌های جدول انگار از پشت نوار بیرون می‌زنند. */ box-shadow: 0 -1px 14px rgba(0,0,0,.07); } .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 2px 7px; border: 0; background: none; cursor: pointer; color: var(--ink-faint); text-decoration: none; font-family: var(--font-ui); font-size: 10px; line-height: 1.3; -webkit-tap-highlight-color: transparent; } .tab-mark { position: relative; display: grid; place-items: center; width: 46px; height: 26px; border-radius: var(--r-pill); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 🔴 خانه فعال با یک قرص پشت آیکون گفته می‌شود، نه فقط با رنگ. رنگ‌تنها روی صفحه‌ای که زیر آفتاب دیده می‌شود گم می‌شود، و برای کسی که رنگ را متفاوت می‌بیند اصلا پیامی ندارد. شکل، در هر دو حالت می‌ماند. */ /* کیبورد سخت‌افزاری روی گوشی هم هست — تبلت با کیبورد، یا صفحه‌خوان */ .tab:focus-visible, .side-fav-tile:focus-visible, .side-close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -3px; } .tab.on { color: var(--brand-primary); font-weight: 500; } .tab.on .tab-mark { background: var(--brand-50); } .tab:active .tab-mark { background: var(--surface-sunken); } /* 🔴 «کار اصلی» نقش — برجسته و وسط. توضیح کاملش بالای `MobileNav::BY_ROLE` است: سه خانه دیگر «جا»یند و این یکی «کار». اگر هم‌شکل بودند، پرتکرارترین کار روز کاربر بین سه مقصد گم می‌شد. */ .tab--accent { color: var(--ink-muted); } .tab--accent .tab-mark { width: 46px; height: 32px; margin-top: -2px; background: var(--brand-primary); color: #fff; box-shadow: 0 3px 10px color-mix(in oklab, var(--brand-primary) 38%, transparent); } .tab--accent.on { color: var(--brand-primary); } .tab--accent.on .tab-mark, .tab--accent:active .tab-mark { background: var(--brand-800); } /* نشان «کاری منتظر شماست» روی خانه منو */ .tab-dot { position: absolute; inset-block-start: 1px; inset-inline-end: 9px; width: 7px; height: 7px; border-radius: 50%; background: #FDB022; border: 1.5px solid var(--surface); } .shell-body { flex-direction: column; } .topbar { height: auto; padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; gap: var(--sp-3); } .omni { max-width: none; order: 3; width: 100%; } .topbar-right { gap: var(--sp-3); } .tenant-pill { font-size: 11.5px; } .page { padding: var(--sp-4) var(--sp-4) 84px; } .hero { padding: var(--sp-5); } .hero .v { font-size: 34px; } .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .subnav { padding: 0 var(--sp-4); } table { min-width: 560px; } .palette-backdrop { padding: var(--sp-10) var(--sp-3) var(--sp-3); } .mobile-only { display: block; } .desktop-only { display: none; } } /* ============================================================ درخت کدینگ ============================================================ */ .tree { list-style: none; margin: 0; padding: 0; } .tree li { border-bottom: 1px solid var(--border); } .tree li:last-child { border-bottom: 0; } .tree ul { list-style: none; margin: 0; padding: 0; } .node { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); } .node .code { font-family: var(--font-num); direction: ltr; font-size: var(--text-label); color: var(--ink-faint); min-width: 76px; } .node .name { font-size: var(--text-sub); } .node .biz { font-size: var(--text-label); color: var(--ink-faint); } .node .bal { margin-inline-start: auto; font-family: var(--font-num); direction: ltr; font-size: var(--text-sub); } .lvl1 > .node { background: var(--surface-sunken); font-weight: 700; } .lvl2 > .node { padding-inline-start: calc(var(--sp-5) + 18px); font-weight: 500; } .lvl3 > .node { padding-inline-start: calc(var(--sp-5) + 40px); } .lvl4 > .node { padding-inline-start: calc(var(--sp-5) + 62px); } @media (max-width: 640px) { .node .code { min-width: 62px; } .lvl2 > .node { padding-inline-start: calc(var(--sp-4) + 10px); } .lvl3 > .node { padding-inline-start: calc(var(--sp-4) + 22px); } .lvl4 > .node { padding-inline-start: calc(var(--sp-4) + 34px); } } /* ============================================================ ورود ============================================================ */ body.auth { display: flex; min-height: 100vh; margin: 0; } .auth-form { width: 620px; flex: none; background: var(--surface); border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; } .auth-form .sweep { height: 3px; } .auth-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-10) 96px; } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 44px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 700; } .auth-inner h1 { font-size: 26px; font-weight: 700; margin: 0 0 6px; line-height: 1.35; } .auth-lede { margin: 0 0 var(--sp-8); color: var(--ink-muted); font-size: var(--text-body); } .auth-error { display: flex; gap: 10px; align-items: flex-start; background: var(--negative-bg); color: var(--negative); border-radius: var(--r-card); padding: 12px 14px; font-size: var(--text-sub); line-height: 1.7; margin-bottom: var(--sp-5); } .auth-error svg { flex: none; margin-top: 3px; } .auth-fields { display: flex; flex-direction: column; gap: 18px; } .field { display: flex; flex-direction: column; gap: 7px; } .field-label { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--text-label); font-weight: 500; color: var(--ink-muted); } .field-aside { font-size: var(--text-label); font-weight: 400; } .input { height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-field); background: var(--surface); color: var(--ink); font-family: var(--font-ui); font-size: var(--text-body); outline: none; transition: border-color var(--t-fast) var(--ease); } .input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-50); } .input--num { font-family: var(--font-num); text-align: left; direction: ltr; } .input--bad { border-color: var(--negative); } .input::placeholder { color: var(--ink-faint); } /* ============================================================ فیلد پولی — واحد **داخل** جعبه 🔴 چرا واحد از برچسب به داخل جعبه آمد: برچسب بالای فیلد وقتی خوانده می‌شود که کاربر دارد فیلد را پیدا می‌کند. لحظه‌ای که عدد را تایپ می‌کند، چشمش داخل جعبه است و برچسب دیگر در میدان دیدش نیست. کسی که «۵۰۰» می‌نویسد باید همان‌جا ببیند پانصد تومان است یا پانصد ریال — چون تفاوتشان ده برابر است. `pointer-events: none` و `user-select: none` اجباری‌اند: این برچسب نه باید کلیک را بدزدد (کلیک روی آن باید فیلد را فوکوس کند) نه با مبلغ کپی شود. جعبه را `money.js` دور فیلد می‌پیچد — هم برای فیلدهای قالب، هم برای ردیف‌هایی که فرم در حین کار می‌سازد. ============================================================ */ .money-box { position: relative; display: block; /* پهنای برچسب واحد — هم جای برچسب از آن می‌آید، هم لایی که آن‌طرف جعبه گذاشته می‌شود تا عدد واقعا وسط بیفتد */ --unit-w: 46px; } /* ══════════════════════════════════════════════════════════ 🔴 برچسب واحد سمت **چپ** جعبه می‌نشیند، نه سمت راست ══════════════════════════════════════════════════════════ صفحه راست‌به‌چپ است ولی خود عدد `dir: ltr` است و از چپ خوانده می‌شود. وقتی برچسب سمت راست بود، چشم اول «ریال» را می‌خواند و بعد می‌پرید به چپ عدد تا رقم اولش را پیدا کند — یعنی در جهت مخالف چیزی که همان لحظه دارد تایپ می‌کند. حالا برچسب همان‌جایی است که عدد تمام می‌شود، و خواندن «۸۵٬۰۰۰ ریال» یک حرکت پیوسته است. */ .money-box > .input { width: 100%; padding-inline-end: var(--unit-w); } .money-unit { position: absolute; inset-inline-end: 1px; inset-block: 1px; display: grid; place-items: center; min-inline-size: calc(var(--unit-w) - 1px); padding-inline: 9px; border-start-end-radius: var(--r-field); border-end-end-radius: var(--r-field); background: var(--surface-sunken); border-inline-start: 1px solid var(--border); color: var(--ink-faint); font-family: var(--font-ui); font-size: var(--text-tiny); font-weight: 500; line-height: 1; white-space: nowrap; pointer-events: none; user-select: none; } /* فیلد پولی در جدول اقلام کوتاه‌تر است، پس برچسب هم باید جمع‌تر شود — وگرنه برای عدد جایی نمی‌ماند. */ .line .money-box { --unit-w: 32px; } .line .money-unit { padding-inline: 5px; font-size: 9.5px; } /* ══════════════════════════════════════════════════════════ 🔴 در جدول اقلام، عدد وسط جعبه می‌نشیند — و لایی هر دو طرف یکی است ══════════════════════════════════════════════════════════ `text-align: center` عدد را وسط **ناحیه متن** می‌گذارد، نه وسط جعبه. با لایی نامتقارن (یک طرف ۳۲ پیکسل برای برچسب، طرف دیگر ۱۴)، عدد نه پیکسل کج می‌افتد — روی یک فیلد تنها دیده نمی‌شود، ولی در ستونی که هشت جعبه زیر هم دارد، همین نه پیکسل ستون را کج نشان می‌دهد. پس هر دو طرف به اندازه برچسب لایی می‌گیرند. بیرون جدول این کار را نمی‌کنیم: فیلد پهن با عدد وسط‌چین، عدد را از جایی که چشم دنبالش می‌گردد دور می‌کند. */ .line .money-box > .input { padding-inline: var(--unit-w); text-align: center; } .line .line-qty { text-align: center; } .field-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sub); color: var(--ink-muted); cursor: pointer; } .field-check input { width: 16px; height: 16px; accent-color: var(--brand-primary); } .btn--block { width: 100%; height: 46px; } .auth-foot-note { margin: var(--sp-8) 0 0; font-size: var(--text-sub); color: var(--ink-muted); line-height: 1.8; } .auth-trust { display: flex; gap: 22px; flex-wrap: wrap; padding: var(--sp-10) 96px var(--sp-10); color: var(--ink-faint); font-size: 11px; } .auth-trust span { display: flex; align-items: center; gap: 5px; } /* ---------- ستون اثبات ---------- */ .auth-proof { flex: 1; background: var(--brand-900); color: #D9EFE6; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-10) 84px; position: relative; overflow: hidden; } .auth-proof-glow { position: absolute; border-radius: 50%; pointer-events: none; } .auth-proof-glow--a { inset-inline-end: -140px; top: -100px; width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, rgba(17,173,133,.28), transparent 68%); } .auth-proof-glow--b { inset-inline-start: -180px; bottom: -160px; width: 460px; height: 460px; background: radial-gradient(circle at 60% 40%, rgba(152,231,102,.14), transparent 70%); } .auth-proof-inner { position: relative; } .auth-proof .eyebrow { margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: #98E766; } .auth-proof h2 { font-size: 38px; font-weight: 900; line-height: 1.35; margin: 0 0 20px; color: #fff; text-wrap: balance; } .auth-proof-lede { margin: 0 0 var(--sp-10); font-size: var(--text-card); line-height: 1.9; max-width: 44ch; color: #A9CFC3; } .auth-points { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 400px; } .auth-points > div { display: flex; gap: var(--sp-3); align-items: flex-start; } .auth-points svg { flex: none; margin-top: 3px; } .auth-points b { display: block; color: #fff; font-weight: 500; font-size: var(--text-body); } .auth-points span { font-size: 12.5px; color: #8FBAAD; line-height: 1.7; } @media (max-width: 1000px) { body.auth { flex-direction: column; } .auth-form { width: auto; border-inline-start: 0; } .auth-inner { padding: var(--sp-8) var(--sp-6); } .auth-trust { padding: 0 var(--sp-6) var(--sp-8); } .auth-proof { padding: var(--sp-8) var(--sp-6) var(--sp-12); } .auth-proof h2 { font-size: 28px; } } .side-user > div { min-width: 0; flex: 1; } .side-logout { margin-inline-start: auto; display: flex; } .side-logout button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: #86B5A5; cursor: pointer; border-radius: var(--r-field); transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .side-logout button:hover { color: #fff; background: rgba(255,255,255,.08); } /* روی گوشی هم دیده می‌شود. 🔴 تا امروز زیر ۶۴۰ پیکسل برداشته می‌شد، چون کل پاورقی نوار کناری هم برداشته می‌شد و جایی برای نشستن نداشت. نتیجه‌اش این بود که کاربر موبایل هیچ راه دیدنی‌ای برای خروج از حساب نداشت. حالا منوی کشویی پاورقی دارد و این دکمه سر جایش می‌ماند. */ /* پیوند داخل جدول — نام مشتری، شماره فاکتور، عنوان سند */ .row-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .row-link:hover { color: var(--brand-primary); border-bottom-color: currentColor; } .row-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 2px; } /* ردیفی که کل سطحش به سند می‌برد — نشانگر باید همین را بگوید، وگرنه کاربر نمی‌فهمد می‌تواند هر جای ردیف را بزند. */ tr[data-row-link] { cursor: pointer; } tr[data-row-link]:hover { background: var(--surface-sunken); } /* داخل ردیف، فیلد و دکمه نشانگر خودشان را دارند */ tr[data-row-link] a, tr[data-row-link] button, tr[data-row-link] label { cursor: pointer; } tr[data-row-link] input, tr[data-row-link] textarea { cursor: text; } /* ============================================================ اجزای فرم مشترک — هم در پوسته اپ، هم در صفحه‌های بیرونی 🔴 اینها عمدا در app.css هستند نه gate.css: gate.css فقط روی صفحه انتخاب/ساخت کسب‌وکار بارگذاری می‌شود، و وقتی انتخاب رنگ فقط آنجا استایل داشت، همان کنترل در «تنظیمات کسب‌وکار» بی‌شکل و غیرقابل کلیک می‌شد. ============================================================ */ .field-label em { font-style: normal; font-weight: 400; color: var(--ink-faint); font-size: 11px; } .field-hint { display: block; font-size: var(--text-label); color: var(--ink-faint); line-height: 1.7; margin-top: 4px; } /* ---------- انتخاب رنگ ---------- */ .swatches { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: 2px; } .swatch { cursor: pointer; display: inline-flex; } /* رادیو پنهان می‌شود ولی از جریان خارج نمی‌شود تا فوکوس صفحه‌کلید کار کند */ .swatch input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; margin: 0; pointer-events: none; } .swatch span { display: block; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--sw, var(--surface-sunken)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .swatch:hover span { transform: scale(1.08); } .swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw, var(--border-strong)); } .swatch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; } .swatch--none span { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); position: relative; } .swatch--none span::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(45deg, transparent 45%, var(--border-strong) 45% 55%, transparent 55%); } .swatch--none input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-faint); } /* ---------- تیک‌دار توضیح‌دار ---------- */ .check { display: flex; gap: var(--sp-3); cursor: pointer; align-items: flex-start; } .check input { margin-top: 3px; accent-color: var(--brand-primary); inline-size: 16px; block-size: 16px; flex: none; } .check b { display: block; font-size: var(--text-sub); font-weight: 500; } .check em { font-style: normal; font-size: var(--text-label); color: var(--ink-muted); line-height: 1.85; } /* ---------- دفتر تغییرات ---------- */ .trail-when { white-space: nowrap; } .trail-when b { display: block; font-family: var(--font-num); font-weight: 400; font-size: var(--text-sub); } .trail-when span { display: block; font-family: var(--font-num); font-size: var(--text-tiny); color: var(--ink-faint); } .trail-what b { display: block; font-weight: 500; } .trail-what span { font-size: var(--text-label); color: var(--ink-muted); } .trail-who b { display: block; font-weight: 400; font-size: var(--text-sub); } .trail-who span { display: block; font-family: var(--font-num); font-size: var(--text-tiny); color: var(--ink-faint); direction: ltr; unicode-bidi: isolate; text-align: start; } .trail-diff { display: flex; flex-direction: column; gap: 4px; } .trail-change { font-size: var(--text-label); line-height: 1.9; } .trail-change i { font-style: normal; color: var(--ink-muted); } /* مقدارها جدا ایزوله می‌شوند: عدد و تاریخ لاتین داخل جمله فارسی وگرنه با فلش و پرانتز قاطی می‌شود و جای «از» و «به» عوض می‌شود. */ .trail-val { unicode-bidi: isolate; } .trail-val--old { color: var(--ink-faint); } .trail-val--new { color: var(--ink); font-weight: 500; } .trail-arrow { color: var(--ink-faint); padding: 0 3px; } .trail-more { color: var(--ink-faint); font-size: var(--text-tiny); } /* 🔴 `hidden` روی عنصری که کلاسش `display` دارد کار نمی‌کند — استایل نویسنده بر استایل مرورگر می‌چربد. فرم کالا این را با `style.display` دور می‌زد؛ حالا صریح است و مقدار اصلی `display` دست‌نخورده می‌ماند. */ [data-goods-only][hidden] { display: none; } /* ============================================================ انتخابگر جستجوشونده — مخاطب و کالا 🔴 `