/* * ============================================================================ * تمِ مینی‌اپ — «روشن» پیش‌فرض، «تیره» با data-theme="dark" روی * ============================================================================ * * چرا این شکلی: کلِ مینی‌اپ (پنلِ نمایندگان، رباتِ تک‌فروشی، فروشگاهِ مشتری و * ساختِ کانفیگ) با رنگِ سخت‌کدشده نوشته شده بود. به‌جای دوباره‌نویسیِ استایل‌ها، * هر رنگ به یک توکن نگاشت شد و اینجا برای دو تم مقدار می‌گیرد: * * • ‎--*-rgb → فقط سه‌تاییِ rgb عوض می‌شود و alpha ِ هر مصرف‌کننده دست‌نخورده * می‌ماند. یعنی «پوششِ روشن روی تیره» خودبه‌خود به «پوششِ تیره * روی روشن» تبدیل می‌شود و سلسله‌مراتبِ ارتفاع حفظ می‌شود. * • ‎--s-* → سطوح (صفحه، کارت، فیلد، منو). * • ‎--t-* → رمپِ متنِ خنثی، از پررنگ تا محو. * • ‎--a-*-t / --a-*-f → اکسنت: نسخهٔ «متن» در تمِ روشن تیره‌تر می‌شود تا کنتراست * داشته باشد، نسخهٔ «پُرکننده» تقریباً همان می‌ماند. * * این فایل باید آخرین stylesheet ِ هر صفحه باشد تا حرفِ آخر را دربارهٔ توکن‌ها بزند. */ :root { color-scheme: light; /* خانواده‌های rgb — آلفا سرِ جایش می‌ماند، فقط rgb عوض می‌شود */ --ink-rgb: 15,23,42; --vio-rgb: 109,40,217; --vio5-rgb: 124,58,237; --vio4-rgb: 124,58,237; --vio3-rgb: 109,40,217; --vio2-rgb: 147,51,234; --vio1-rgb: 126,34,206; --ind-rgb: 79,70,229; --ind6-rgb: 67,56,202; --teal-rgb: 13,148,136; --cyan-rgb: 8,145,178; --cyan4-rgb: 14,116,144; --emr-rgb: 5,150,105; --emr5-rgb: 4,120,87; --red4-rgb: 220,38,38; --red5-rgb: 220,38,38; --red6-rgb: 185,28,28; --amb-rgb: 217,119,6; --amb5-rgb: 217,119,6; --yel-rgb: 202,138,4; --gray-rgb: 100,116,139; --gray2-rgb: 100,116,139; --gray3-rgb: 71,85,105; --inkteal-rgb: 3,33,28; --tg-rgb: 42,171,238; --well-rgb: 148,163,184; --shadow-rgb: 71,85,105; /* سطوح */ --s-card-a: rgba(255,255,255,.97); --s-card-b: rgba(250,250,255,.97); --s-card-a2: rgba(255,255,255,.99); --s-card-b2: rgba(251,251,255,.99); --s-sheet-a: #ffffff; --s-sheet-b: #f7f8fd; --s-pop: rgba(255,255,255,.98); --s-pop2: rgba(255,255,255,.98); --s-glass: rgba(255,255,255,.86); --s-glass2: rgba(255,255,255,.94); --s-glass3: rgba(255,255,255,.9); --s-glass4: rgba(248,249,253,.94); --s-glass5: rgba(243,240,253,.9); --s-glass6: rgba(255,255,255,.9); --s-option: #f5f6fb; --scrim: rgba(15,23,42,.42); --scrim2: rgba(15,23,42,.44); --scrim3: rgba(15,23,42,.42); --scrim4: rgba(255,255,255,.82); --s-fade: rgba(246,247,252,.88); --s-panel: rgba(255,255,255,.88); --s-card-c: rgba(255,255,255,.99); --s-card-d: rgba(249,250,254,.99); --s-page: #f3f4fa; --s-page1: #f5f6fb; --s-page2: #eceef7; --s-deep: #e9ebf4; --s-field: #f1f2f8; --s-opt: #f6f7fc; --s-menu: #ffffff; --s-menu2: #ffffff; --s-raised: #ffffff; --s-raised2: #f8f9fd; --s-tile-a: #d6f5ef; --s-tile-b: #e2eefb; --s-raised3: #f4f5fa; --s-raised4: #ffffff; --s-raised5: #ffffff; /* رمپِ متنِ خنثی */ --t-strong: #0f172a; --t-body: #1e293b; --t-body2: #243044; --t-label: #334155; --t-label2: #3d4a5c; --t-menu: #47536a; --t-dim: #55617a; --t-caption: #5f6b82; --t-muted: #68738a; --t-hint: #717c93; --t-ph: #98a1b3; --t-faint: #a8b0be; --t-slate50: #0f172a; --t-slate200: #334155; --t-slate300: #475569; --t-slate400: #64748b; /* اکسنت‌ها: ‎-t متن، ‎-f پُرکننده */ --a-teal-t: #0f766e; --a-teal-f: #5eead4; --a-teal4-t: #0d9488; --a-teal4-f: #14b8a6; --a-teal5-t: #0f766e; --a-teal5-f: #14b8a6; --a-teal6-t: #0f766e; --a-teal6-f: #0d9488; --a-mint-t: #047857; --a-mint-f: #a7f3d0; --a-emr3-t: #047857; --a-emr3-f: #6ee7b7; --a-emr4-t: #059669; --a-emr4-f: #10b981; --a-emr5-t: #047857; --a-emr5-f: #059669; --a-grn3-t: #15803d; --a-grn3-f: #86efac; --a-grn4-t: #15803d; --a-grn4-f: #22c55e; --a-vio4-t: #6d28d9; --a-vio4-f: #8b5cf6; --a-vio3-t: #6d28d9; --a-vio3-f: #c4b5fd; --a-vio2-t: #6d28d9; --a-vio2-f: #ddd6fe; --a-pur3-t: #7e22ce; --a-pur3-f: #d8b4fe; --a-pur2-t: #7e22ce; --a-pur2-f: #e9d5ff; --a-vio5-t: #7c3aed; --a-vio5-f: #8b5cf6; --a-vio6-t: #6d28d9; --a-vio6-f: #7c3aed; --a-ind4-t: #4f46e5; --a-ind4-f: #818cf8; --a-ind5-t: #4f46e5; --a-ind5-f: #6366f1; --a-amb4-t: #b45309; --a-amb4-f: #fbbf24; --a-amb2-t: #92400e; --a-amb2-f: #fde68a; --a-amb5-t: #b45309; --a-amb5-f: #f59e0b; --a-amb6-t: #b45309; --a-amb6-f: #d97706; --a-gold-t: #a16207; --a-gold-f: #d6a942; --a-org-t: #c2410c; --a-org-f: #fb923c; --a-red3-t: #b91c1c; --a-red3-f: #fca5a5; --a-red2-t: #b91c1c; --a-red2-f: #fecaca; --a-red4-t: #dc2626; --a-red4-f: #ef4444; --a-red5-t: #dc2626; --a-red5-f: #ef4444; --a-red7-t: #c0392f; --a-red7-f: #ff9a90; --a-red8-t: #dc2626; --a-red8-f: #f87171; --a-cyan4-t: #0e7490; --a-cyan4-f: #22d3ee; --a-sky-t: #0284c7; --a-sky-f: #38bdf8; --a-cyan5-t: #0891b2; --a-cyan5-f: #06b6d4; --a-cyan6-t: #0e7490; --a-cyan6-f: #0891b2; --a-blue-t: #2563eb; --a-blue-f: #3b82f6; --a-ice-t: #0e7490; --a-ice-f: #8ef; --a-ice2-t: #0f766e; --a-ice2-f: #add; --a-andr-t: #2f8a3f; --a-andr-f: #7dd77d; --a-ios-t: #1a72ad; --a-ios-f: #7cc3f0; /* متن روی پُرکنندهٔ اکسنت (دکمهٔ CTA و…) — در هر دو تم سفید */ --on-accent: #fff; /* هالهٔ پس‌زمینهٔ صفحه */ --bg-aurora: radial-gradient(130% 55% at 78% -6%, rgba(var(--vio-rgb), .10), transparent 52%), radial-gradient(110% 45% at 20% -4%, rgba(var(--teal-rgb), .09), transparent 50%), radial-gradient(90% 45% at 50% 106%, rgba(var(--ind-rgb), .07), transparent 60%), linear-gradient(#fbfbff, #f1f2fa); /* رنگِ کرومِ تلگرام/مرورگر — theme.js از همین می‌خواند */ --chrome-color: #f5f6fb; } :root[data-theme="dark"] { color-scheme: dark; /* rgb families */ --ink-rgb: 255,255,255; --vio-rgb: 124,58,237; --vio5-rgb: 139,92,246; --vio4-rgb: 167,139,250; --vio3-rgb: 196,181,253; --vio2-rgb: 216,180,254; --vio1-rgb: 233,213,255; --ind-rgb: 99,102,241; --ind6-rgb: 79,70,229; --teal-rgb: 45,212,191; --cyan-rgb: 6,182,212; --cyan4-rgb: 34,211,238; --emr-rgb: 52,211,153; --emr5-rgb: 16,185,129; --red4-rgb: 248,113,113; --red5-rgb: 239,68,68; --red6-rgb: 220,80,70; --amb-rgb: 251,191,36; --amb5-rgb: 245,158,11; --yel-rgb: 234,179,8; --gray-rgb: 133,133,158; --gray2-rgb: 154,154,176; --gray3-rgb: 207,207,222; --inkteal-rgb: 3,33,28; --tg-rgb: 42,171,238; --well-rgb: 0,0,0; --shadow-rgb: 0,0,0; /* surfaces */ --s-card-a: rgba(24,24,38,.92); --s-card-b: rgba(14,14,24,.92); --s-card-a2: rgba(24,24,38,.98); --s-card-b2: rgba(14,14,24,.98); --s-sheet-a: rgba(28,28,45,.99); --s-sheet-b: rgba(15,15,26,.99); --s-pop: rgba(18,18,30,.95); --s-pop2: rgba(18,18,18,0.95); --s-glass: rgba(18,17,39,0.55); --s-glass2: rgba(18,17,39,0.85); --s-glass3: rgba(24,24,48,0.75); --s-glass4: rgba(12,12,28,0.85); --s-glass5: rgba(30,27,75,0.7); --s-glass6: rgba(13,13,24,.82); --s-option: rgb(16,16,25); --scrim: rgba(3,3,8,.72); --scrim2: rgba(3,3,8,.74); --scrim3: rgba(5,5,11,.72); --scrim4: rgba(7,7,16,.72); --s-fade: rgba(5,5,11,.82); --s-panel: rgba(4,4,9,.74); --s-card-c: rgba(24,24,40,.98); --s-card-d: rgba(14,14,26,.98); --s-page: #05050b; --s-page1: #070710; --s-page2: #0a0a17; --s-deep: #0b0b14; --s-field: #0d0d18; --s-opt: #101019; --s-menu: #15151f; --s-menu2: #16161f; --s-raised: #181825; --s-raised2: #1a1a28; --s-tile-a: #11313a; --s-tile-b: #0b1b24; --s-raised3: #12121f; --s-raised4: #1c1c30; --s-raised5: #17172a; /* text ramp */ --t-strong: #fff; --t-body: #ececf6; --t-body2: #e4e4f2; --t-label: #d3d3e2; --t-label2: #cfcfde; --t-menu: #b9b9cc; --t-dim: #9a9ab0; --t-caption: #85859e; --t-muted: #7a7a95; --t-hint: #6f6f8a; --t-ph: #54546b; --t-faint: #4a4a60; --t-slate50: #f8fafc; --t-slate200: #e2e8f0; --t-slate300: #cbd5e1; --t-slate400: #94a3b8; /* accents */ --a-teal-t: #5eead4; --a-teal-f: #5eead4; --a-teal4-t: #2dd4bf; --a-teal4-f: #2dd4bf; --a-teal5-t: #22b8a6; --a-teal5-f: #22b8a6; --a-teal6-t: #0d9488; --a-teal6-f: #0d9488; --a-mint-t: #a7f3d0; --a-mint-f: #a7f3d0; --a-emr3-t: #6ee7b7; --a-emr3-f: #6ee7b7; --a-emr4-t: #34d399; --a-emr4-f: #34d399; --a-emr5-t: #10b981; --a-emr5-f: #10b981; --a-grn3-t: #86efac; --a-grn3-f: #86efac; --a-grn4-t: #4ade80; --a-grn4-f: #4ade80; --a-vio4-t: #a78bfa; --a-vio4-f: #a78bfa; --a-vio3-t: #c4b5fd; --a-vio3-f: #c4b5fd; --a-vio2-t: #ddd6fe; --a-vio2-f: #ddd6fe; --a-pur3-t: #d8b4fe; --a-pur3-f: #d8b4fe; --a-pur2-t: #e9d5ff; --a-pur2-f: #e9d5ff; --a-vio5-t: #8b5cf6; --a-vio5-f: #8b5cf6; --a-vio6-t: #7c3aed; --a-vio6-f: #7c3aed; --a-ind4-t: #818cf8; --a-ind4-f: #818cf8; --a-ind5-t: #6366f1; --a-ind5-f: #6366f1; --a-amb4-t: #fbbf24; --a-amb4-f: #fbbf24; --a-amb2-t: #fde68a; --a-amb2-f: #fde68a; --a-amb5-t: #f59e0b; --a-amb5-f: #f59e0b; --a-amb6-t: #d97706; --a-amb6-f: #d97706; --a-gold-t: #d6a942; --a-gold-f: #d6a942; --a-org-t: #fb923c; --a-org-f: #fb923c; --a-red3-t: #fca5a5; --a-red3-f: #fca5a5; --a-red2-t: #fecaca; --a-red2-f: #fecaca; --a-red4-t: #f87171; --a-red4-f: #f87171; --a-red5-t: #ef4444; --a-red5-f: #ef4444; --a-red7-t: #ff9a90; --a-red7-f: #ff9a90; --a-red8-t: #f88; --a-red8-f: #f88; --a-cyan4-t: #22d3ee; --a-cyan4-f: #22d3ee; --a-sky-t: #38bdf8; --a-sky-f: #38bdf8; --a-cyan5-t: #06b6d4; --a-cyan5-f: #06b6d4; --a-cyan6-t: #0891b2; --a-cyan6-f: #0891b2; --a-blue-t: #3b82f6; --a-blue-f: #3b82f6; --a-ice-t: #8ef; --a-ice-f: #8ef; --a-ice2-t: #add; --a-ice2-f: #add; --a-andr-t: #7dd77d; --a-andr-f: #7dd77d; --a-ios-t: #7cc3f0; --a-ios-f: #7cc3f0; --bg-aurora: radial-gradient(130% 55% at 78% -6%, rgba(var(--vio-rgb), .26), transparent 52%), radial-gradient(110% 45% at 20% -4%, rgba(var(--teal-rgb), .16), transparent 50%), radial-gradient(90% 45% at 50% 106%, rgba(var(--ind-rgb), .12), transparent 60%), linear-gradient(#070710, #0a0a17); --chrome-color: #070710; } /* ── رنگ‌های داخلِ صفتِ ارائه‌ایِ SVG ─────────────────────────────────────────── */ [stroke="#fff"], [stroke="#FFF"] { stroke: var(--t-strong); } [fill="#fff"], [fill="#FFF"] { fill: var(--t-strong); } [stroke="#7a7a95"], [stroke="#7A7A95"] { stroke: var(--t-muted); } [fill="#7a7a95"], [fill="#7A7A95"] { fill: var(--t-muted); } [stroke="#85859e"], [stroke="#85859E"] { stroke: var(--t-caption); } [fill="#85859e"], [fill="#85859E"] { fill: var(--t-caption); } [stroke="#6f6f8a"], [stroke="#6F6F8A"] { stroke: var(--t-hint); } [fill="#6f6f8a"], [fill="#6F6F8A"] { fill: var(--t-hint); } [stroke="#4a4a60"], [stroke="#4A4A60"] { stroke: var(--t-faint); } [fill="#4a4a60"], [fill="#4A4A60"] { fill: var(--t-faint); } [stroke="#5eead4"], [stroke="#5EEAD4"] { stroke: var(--a-teal-t); } [fill="#5eead4"], [fill="#5EEAD4"] { fill: var(--a-teal-t); } [stroke="#2dd4bf"], [stroke="#2DD4BF"] { stroke: var(--a-teal4-t); } [fill="#2dd4bf"], [fill="#2DD4BF"] { fill: var(--a-teal4-t); } [stroke="#a78bfa"], [stroke="#A78BFA"] { stroke: var(--a-vio4-t); } [fill="#a78bfa"], [fill="#A78BFA"] { fill: var(--a-vio4-t); } [stroke="#c4b5fd"], [stroke="#C4B5FD"] { stroke: var(--a-vio3-t); } [fill="#c4b5fd"], [fill="#C4B5FD"] { fill: var(--a-vio3-t); } [stroke="#d8b4fe"], [stroke="#D8B4FE"] { stroke: var(--a-pur3-t); } [fill="#d8b4fe"], [fill="#D8B4FE"] { fill: var(--a-pur3-t); } [stroke="#e9d5ff"], [stroke="#E9D5FF"] { stroke: var(--a-pur2-t); } [fill="#e9d5ff"], [fill="#E9D5FF"] { fill: var(--a-pur2-t); } [stroke="#fbbf24"], [stroke="#FBBF24"] { stroke: var(--a-amb4-t); } [fill="#fbbf24"], [fill="#FBBF24"] { fill: var(--a-amb4-t); } [stroke="#f87171"], [stroke="#F87171"] { stroke: var(--a-red4-t); } [fill="#f87171"], [fill="#F87171"] { fill: var(--a-red4-t); } [stroke="#cfcfde"], [stroke="#CFCFDE"] { stroke: var(--t-label2); } [fill="#cfcfde"], [fill="#CFCFDE"] { fill: var(--t-label2); } [stroke="rgba(255,255,255,.03)"] { stroke: rgba(var(--ink-rgb),.03); } [fill="rgba(255,255,255,.03)"] { fill: rgba(var(--ink-rgb),.03); } [stroke="rgba(255,255,255,.06)"] { stroke: rgba(var(--ink-rgb),.06); } [fill="rgba(255,255,255,.06)"] { fill: rgba(var(--ink-rgb),.06); } [stroke="rgba(255,255,255,.07)"] { stroke: rgba(var(--ink-rgb),.07); } [fill="rgba(255,255,255,.07)"] { fill: rgba(var(--ink-rgb),.07); } /* ── کارتِ سرورِ انتخاب‌شده در create-config.html ──────────────────────────────── زمینهٔ کارت در هر دو تم یک فرمول دارد (`rgba(--vio-rgb,.3)`)، ولی در تمِ روشن روی سفید می‌نشیند و بنفشِ ملایم می‌شود — و متن‌های آن کارت با خانوادهٔ `-f` (پُرکننده، یعنی بنفشِ پریده) نوشته شده بودند. نتیجه در تمِ روشن: نسبتِ کنتراستِ ۱٫۰۵ برای برچسبِ منطقه (عملاً نامرئی) و ۲٫۱۸ برای آیکون و تگ. چون تینتِ خودِ کارت دست نمی‌خورد، «انتخاب‌شده‌بودن» دقیقاً به‌همان وضوحِ امروز می‌ماند؛ فقط جوهر تیره و زمینهٔ آیکون/تگ رقیق می‌شود. مقادیرِ تمِ تیره عیناً همان‌اند که بود. */ :root { --cc-srv-ink: #4c1d95; /* آیکونِ کد و تگِ سرویس */ --cc-srv-ink2: #4c1d95; /* برچسبِ منطقه */ --cc-srv-badge: rgba(var(--vio-rgb), .14); /* زمینهٔ آیکون و تگ */ } :root[data-theme="dark"] { --cc-srv-ink: #e9d5ff; --cc-srv-ink2: #d8b4fe; --cc-srv-badge: rgba(var(--vio-rgb), .4); } /* ── دکمهٔ سوییچِ تم ────────────────────────────────────────────────────────── اگر صفحه‌ای خودش المانِ #theme-toggle را جای دلخواهش گذاشته باشد (مثلِ صفحهٔ اشتراک که آن را کنارِ دکمهٔ «به‌روزرسانی» می‌گذارد) theme.js فقط سیمش می‌کند و کلاسِ .theme-toggle ِ شناور اعمال نمی‌شود. وگرنه دکمه را خودش می‌سازد. */ #theme-toggle .ic-moon { display: none; } :root[data-theme="dark"] #theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] #theme-toggle .ic-moon { display: block; } .theme-toggle { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 9px); left: 9px; z-index: 2147483000; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 11px; border: 1px solid rgba(var(--ink-rgb), .12); background: var(--s-menu); color: var(--t-caption); cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 18px -8px rgba(var(--shadow-rgb), .55); transition: background .18s, color .18s, border-color .18s, transform .12s; } .theme-toggle:hover { color: var(--t-body); border-color: rgba(var(--vio-rgb), .38); } .theme-toggle:active { transform: scale(.92); } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* جا باز کردن برای دکمه در صفحاتی که گوشهٔ چپِ بالا محتوا دارند (RTL: inline-end = چپ) */ .sh-top { padding-inline-end: max(52px, calc((100% - var(--col)) / 2)); } .rt-topbar { padding-inline-end: 46px; } /* index.html — دو نمایی که هدرِ سراسری را پنهان می‌کنند («کانفیگ‌های من» و um-fullscreen ِ «آمار و حسابداری») نوارِ خودشان را می‌فرستند بالای صفحه، و کنارهٔ چپِ آن نوار (چیپِ کیفِ پول / سوییچِ شمسی-میلادی) دقیقاً زیرِ دکمهٔ شناور می‌افتد — رویِ دومی حتی کلیکِ دکمهٔ «میلادی» را می‌گرفت. برخلافِ دو موردِ بالا این نوارها درونِ ستونِ ۴۸۰px ِ وسط‌چین‌اند، پس اندازهٔ ثابت روی پنجره‌های پهن الکی محتوا را جابه‌جا می‌کرد. به‌جایش فقط به‌اندازهٔ کمبود جا باز می‌شود: ۵۱px = لبهٔ راستِ دکمه (‎9 + 34) + فاصلهٔ ۸px ‎--tt-edge = فاصلهٔ لبهٔ چپِ نوار تا لبهٔ پنجره؛ کفِ آن گاترِ صفحه است و شاخهٔ دوم مالِ وقتی است که ستون به سقفِ ۴۸۰px خورده و وسط‌چین شده. گاترِ دو صفحه یکی نیست (بادیِ ۸px + پدینگِ ۲px ِ کارت، مقابلِ ۶px ِ um-fullscreen) پس ثابت‌ها جدا هستند. روی پنجره‌های پهن حاصل صفر می‌شود و چیدمان دست‌نخورده می‌ماند. */ .mc-topbar, .ac-topbar, .cc-top { padding-inline-end: max(0px, calc(51px - var(--tt-edge))); } .mc-topbar { --tt-edge: max(10px, (100vw - 476px) / 2); } .ac-topbar { --tt-edge: max( 6px, (100vw - 492px) / 2); } /* create-config.html قابِ ثابتِ ۳۹۰px ِ وسط‌چین است (نه ستونِ کشسان)، پس لبه‌اش صرفاً نصفِ فضای بیرونِ قاب + پدینگِ ۱۵px ِ خودش است. روی ویوپورتِ کوتاه قاب می‌چسبد به بالا و چیپِ کیفِ پول می‌رود زیرِ دکمه — روی ویوپورتِ بلند اصلاً تداخلی نیست چون قاب وسط‌چینِ عمودی می‌شود؛ این قاعده در هر دو حالت درست کار می‌کند. */ .cc-top { --tt-edge: max( 0px, (100vw - 390px) / 2 + 15px); }