/* ═══════════════════════════════════════════════════════════ FIT PLAN — Main Stylesheet فونت: Vazirmatn (فارسی) + IBM Plex Mono (اعداد) ═══════════════════════════════════════════════════════════ */ /* ═══ فونت‌ها — کاملاً محلی و آفلاین ══════════════════════ قبلاً از Google Fonts (@import) می‌آمد که در ایران معمولاً بسته است و کاربر Tahoma می‌دید. حالا همه از پوشه fonts/ لود می‌شوند. مرورگر فقط فونتِ انتخاب‌شده را دانلود می‌کند، نه همه را. همه با مجوز OFL: Vazirmatn/Sahel/Samim/Shabnam (rastikerdar)، IBM Plex Mono (IBM)، JetBrains Mono (JetBrains). */ @font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700 800 900; font-display:swap; } @font-face { font-family:'Sahel'; src:url('../fonts/Sahel-Regular.woff2') format('woff2'); font-weight:400 500; font-display:swap; } @font-face { font-family:'Sahel'; src:url('../fonts/Sahel-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Sahel'; src:url('../fonts/Sahel-Bold.woff2') format('woff2'); font-weight:700 800 900; font-display:swap; } @font-face { font-family:'Samim'; src:url('../fonts/Samim-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Samim'; src:url('../fonts/Samim-Medium.woff2') format('woff2'); font-weight:500 600; font-display:swap; } @font-face { font-family:'Samim'; src:url('../fonts/Samim-Bold.woff2') format('woff2'); font-weight:700 800 900; font-display:swap; } @font-face { font-family:'Shabnam'; src:url('../fonts/Shabnam-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Shabnam'; src:url('../fonts/Shabnam-Medium.woff2') format('woff2'); font-weight:500 600; font-display:swap; } @font-face { font-family:'Shabnam'; src:url('../fonts/Shabnam-Bold.woff2') format('woff2'); font-weight:700 800 900; font-display:swap; } @font-face { font-family:'IBMPlexMono'; src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'IBMPlexMono'; src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight:500 600 700; font-display:swap; } @font-face { font-family:'JetBrainsMono'; src:url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'JetBrainsMono'; src:url('../fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight:500 600 700; font-display:swap; } /* ═══ ثوابت ═══════════════════════════════════════════════ */ :root { --font-fa: 'Vazirmatn', 'Tahoma', 'Segoe UI', Arial, sans-serif; --font-mono: 'IBMPlexMono', 'Courier New', monospace; --radius: 6px; --radius-lg: 12px; --radius-xl: 18px; } /* ═══ انتخاب فونت توسط کاربر ══════════════════════════════ data-font / data-mono روی ست می‌شود (مثل data-theme). مقدار در localStorage با کلیدهای gp_font و gp_mono می‌ماند. */ [data-font="vazirmatn"] { --font-fa: 'Vazirmatn', 'Tahoma', Arial, sans-serif; } [data-font="sahel"] { --font-fa: 'Sahel', 'Tahoma', Arial, sans-serif; } [data-font="samim"] { --font-fa: 'Samim', 'Tahoma', Arial, sans-serif; } [data-font="shabnam"] { --font-fa: 'Shabnam', 'Tahoma', Arial, sans-serif; } [data-font="system"] { --font-fa: 'Segoe UI', 'Tahoma', 'Iranian Sans', Arial, sans-serif; } [data-mono="plex"] { --font-mono: 'IBMPlexMono', 'Courier New', monospace; } [data-mono="jetbrains"] { --font-mono: 'JetBrainsMono', 'Courier New', monospace; } [data-mono="fa"] { --font-mono: var(--font-fa); } /* ═══ تم‌ها ════════════════════════════════════════════════ */ /* 1 ── تیره کلاسیک (پیش‌فرض) */ :root, [data-theme="dark"] { --glass:rgba(16,16,19,.74); --glass-2:rgba(24,24,28,.6); --glass-brd:rgba(255,255,255,.075); --glass-hi:rgba(255,255,255,.055); --glass-blur:22px; --bg-0:#080809; --bg-1:#111113; --bg-2:#18181c; --bg-3:#222227; --bg-4:#2c2c33; --border:#2e2e36; --border-b:#44444f; --accent:#e8ff00; --accent-fg:#111; --accent-bg:rgba(232,255,0,.07); --accent-bgh:rgba(232,255,0,.14); --red:#ff4455; --green:#3ddc84; --blue:#5599ff; --orange:#ff8844; --purple:#bb66ff; --teal:#22ddcc; --pink:#ff66aa; --amber:#ffbb33; --cyan:#33ccff; --indigo:#8899ff; --lime:#aaee22; --text-1:#f0f0f2; --text-2:#84848f; --text-3:#4a4a55; --shadow:0 4px 24px rgba(0,0,0,.7); --shadow-a:0 0 20px rgba(232,255,0,.18); color-scheme:dark; } /* 2 ── تیره آبی */ [data-theme="dark-blue"] { --glass:rgba(11,20,35,.74); --glass-2:rgba(19,30,48,.6); --glass-brd:rgba(120,170,255,.13); --glass-hi:rgba(150,190,255,.07); --glass-blur:22px; --bg-0:#060c18; --bg-1:#0c1525; --bg-2:#131e30; --bg-3:#1a283d; --bg-4:#22334f; --border:#1e3050; --border-b:#2e4870; --accent:#60a5fa; --accent-fg:#060c18; --accent-bg:rgba(96,165,250,.08); --accent-bgh:rgba(96,165,250,.16); --red:#f87171; --green:#34d399; --blue:#60a5fa; --orange:#fb923c; --purple:#c084fc; --teal:#2dd4bf; --pink:#f472b6; --amber:#fbbf24; --cyan:#67e8f9; --indigo:#818cf8; --lime:#a3e635; --text-1:#e8f0ff; --text-2:#7a90b8; --text-3:#3a4f70; --shadow:0 4px 24px rgba(0,0,0,.7); --shadow-a:0 0 20px rgba(96,165,250,.22); color-scheme:dark; } /* 3 ── تیره بنفش */ [data-theme="dark-purple"] { --glass:rgba(16,12,29,.74); --glass-2:rgba(24,20,42,.6); --glass-brd:rgba(190,140,255,.14); --glass-hi:rgba(200,160,255,.07); --glass-blur:22px; --bg-0:#08050f; --bg-1:#110d1e; --bg-2:#18142a; --bg-3:#211b36; --bg-4:#2a2243; --border:#312555; --border-b:#4a3880; --accent:#c084fc; --accent-fg:#08050f; --accent-bg:rgba(192,132,252,.08); --accent-bgh:rgba(192,132,252,.16); --red:#f87171; --green:#34d399; --blue:#60a5fa; --orange:#fb923c; --purple:#c084fc; --teal:#2dd4bf; --pink:#f472b6; --amber:#fbbf24; --cyan:#67e8f9; --indigo:#818cf8; --lime:#a3e635; --text-1:#f0e8ff; --text-2:#9880cc; --text-3:#4e3a80; --shadow:0 4px 24px rgba(0,0,0,.75); --shadow-a:0 0 22px rgba(192,132,252,.25); color-scheme:dark; } /* 4 ── تیره سبز (Military) */ [data-theme="dark-green"] { --glass:rgba(11,17,8,.74); --glass-2:rgba(18,26,15,.6); --glass-brd:rgba(120,220,140,.13); --glass-hi:rgba(150,230,170,.07); --glass-blur:22px; --bg-0:#050a06; --bg-1:#0c1209; --bg-2:#121a0f; --bg-3:#182215; --bg-4:#1e2c1b; --border:#253320; --border-b:#3a5030; --accent:#4ade80; --accent-fg:#050a06; --accent-bg:rgba(74,222,128,.08); --accent-bgh:rgba(74,222,128,.16); --red:#f87171; --green:#4ade80; --blue:#60a5fa; --orange:#fb923c; --purple:#c084fc; --teal:#2dd4bf; --pink:#f472b6; --amber:#fbbf24; --cyan:#67e8f9; --indigo:#818cf8; --lime:#a3e635; --text-1:#e8f5e0; --text-2:#7a9c70; --text-3:#3a5530; --shadow:0 4px 24px rgba(0,0,0,.75); --shadow-a:0 0 20px rgba(74,222,128,.2); color-scheme:dark; } /* 5 ── روشن خنثی */ [data-theme="light"] { --glass:rgba(255,255,255,.76); --glass-2:rgba(248,248,245,.62); --glass-brd:rgba(0,0,0,.085); --glass-hi:rgba(255,255,255,.92); --glass-blur:20px; --bg-0:#f2f2ef; --bg-1:#ffffff; --bg-2:#f8f8f5; --bg-3:#eeeeeb; --bg-4:#e4e4e0; --border:#d8d8d4; --border-b:#b8b8b4; --accent:#1d4ed8; --accent-fg:#fff; --accent-bg:rgba(29,78,216,.07); --accent-bgh:rgba(29,78,216,.13); --red:#dc2626; --green:#16a34a; --blue:#1d4ed8; --orange:#c2410c; --purple:#7c3aed; --teal:#0d9488; --pink:#db2777; --amber:#d97706; --cyan:#0891b2; --indigo:#4f46e5; --lime:#65a30d; --text-1:#111111; --text-2:#4a4a52; --text-3:#9a9aa5; --shadow:0 2px 14px rgba(0,0,0,.09); --shadow-a:0 0 16px rgba(29,78,216,.18); color-scheme:light; } /* 6 ── روشن گرم (Warm Beige) */ [data-theme="light-warm"] { --glass:rgba(255,253,248,.78); --glass-2:rgba(250,246,238,.64); --glass-brd:rgba(90,74,56,.11); --glass-hi:rgba(255,255,255,.92); --glass-blur:20px; --bg-0:#f5f0e8; --bg-1:#fffdf8; --bg-2:#faf6ee; --bg-3:#f0ebe0; --bg-4:#e6e0d4; --border:#ddd8cc; --border-b:#bfb8a8; --accent:#b45309; --accent-fg:#fff; --accent-bg:rgba(180,83,9,.07); --accent-bgh:rgba(180,83,9,.13); --red:#b91c1c; --green:#166534; --blue:#1e40af; --orange:#c2410c; --purple:#6b21a8; --teal:#115e59; --pink:#9d174d; --amber:#92400e; --cyan:#164e63; --indigo:#3730a3; --lime:#3f6212; --text-1:#1c1008; --text-2:#5a4a38; --text-3:#a09080; --shadow:0 2px 14px rgba(0,0,0,.08); --shadow-a:0 0 16px rgba(180,83,9,.18); color-scheme:light; } /* 7 ── روشن سبز (Fresh) */ [data-theme="light-green"] { --glass:rgba(255,255,255,.78); --glass-2:rgba(244,251,246,.64); --glass-brd:rgba(22,101,52,.11); --glass-hi:rgba(255,255,255,.92); --glass-blur:20px; --bg-0:#edf7f0; --bg-1:#ffffff; --bg-2:#f4fbf6; --bg-3:#e6f5ea; --bg-4:#d8eedd; --border:#c8e8ce; --border-b:#a0d0a8; --accent:#166534; --accent-fg:#fff; --accent-bg:rgba(22,101,52,.07); --accent-bgh:rgba(22,101,52,.14); --red:#b91c1c; --green:#166534; --blue:#1e40af; --orange:#c2410c; --purple:#6b21a8; --teal:#115e59; --pink:#9d174d; --amber:#92400e; --cyan:#164e63; --indigo:#3730a3; --lime:#3f6212; --text-1:#082010; --text-2:#2a5a38; --text-3:#80a888; --shadow:0 2px 14px rgba(0,0,0,.08); --shadow-a:0 0 16px rgba(22,101,52,.18); color-scheme:light; } /* 8 ── روشن آبی (Sky) */ [data-theme="light-blue"] { --glass:rgba(255,255,255,.78); --glass-2:rgba(244,248,255,.64); --glass-brd:rgba(30,64,175,.11); --glass-hi:rgba(255,255,255,.92); --glass-blur:20px; --bg-0:#eef4ff; --bg-1:#ffffff; --bg-2:#f4f8ff; --bg-3:#e4eeff; --bg-4:#d4e4ff; --border:#c4d8f8; --border-b:#9abcf0; --accent:#1e40af; --accent-fg:#fff; --accent-bg:rgba(30,64,175,.07); --accent-bgh:rgba(30,64,175,.14); --red:#b91c1c; --green:#166534; --blue:#1e40af; --orange:#c2410c; --purple:#6b21a8; --teal:#115e59; --pink:#9d174d; --amber:#92400e; --cyan:#164e63; --indigo:#3730a3; --lime:#3f6212; --text-1:#08183a; --text-2:#2a4a7a; --text-3:#7090c0; --shadow:0 2px 14px rgba(0,0,0,.08); --shadow-a:0 0 16px rgba(30,64,175,.18); color-scheme:light; } /* ═══ Smooth transitions ═══════════════════════════════════ */ html { transition: background-color .25s ease, color .25s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-fa); background: var(--bg-0); color: var(--text-1); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 15px; line-height: 1.5; } /* ═══ Scrollbar ════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-b); } /* ═══ Layout ═══════════════════════════════════════════════ سایدبار شناور: از لبه جدا، گوشه‌گرد، شیشه‌ای. #main حاشیه می‌گیرد تا زیر سایدبار نرود. */ #app { display: flex; height: 100vh; overflow: hidden; } /* ═══ Sidebar — شناور و شیشه‌ای ════════════════════════════ */ #sidebar { position: fixed; inset-block: 14px; inset-inline-start: 14px; width: 252px; z-index: 100; display: flex; flex-direction: column; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-brd); box-shadow: 0 18px 50px -12px rgba(0,0,0,.45), 0 0 0 1px var(--glass-hi) inset; overflow: hidden; /* شتاب سخت‌افزاری برای اسلاید روان روی موبایل */ will-change: transform; transition: transform .3s cubic-bezier(.32,.72,0,1); } /* blur فقط جایی که مرورگر پشتیبانی می‌کند — روی دستگاه ضعیف خودبه‌خود به پس‌زمینه مات برمی‌گردد و افت فریم نمی‌دهد */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { #sidebar { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7); backdrop-filter: blur(var(--glass-blur)) saturate(1.7); } } .sidebar-logo { padding: 16px 18px 14px; border-bottom: 1px solid var(--glass-brd); flex-shrink: 0; text-align: center; /* عنوان و زیرعنوان وسط‌چین */ } .sidebar-logo h1 { font-family: var(--font-fa); font-weight: 800; font-size: 1.45rem; color: var(--accent); letter-spacing: .02em; line-height: 1; margin-bottom: 3px; } .sidebar-logo span { font-size: .6rem; font-weight: 500; color: var(--text-3); letter-spacing: .2em; text-transform: uppercase; } .sidebar-nav { padding: 8px; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* ── گروه آکاردئونی ──────────────────────────────────────── */ .nav-group { margin-bottom: 3px; } .nav-group-head { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text-2); font-family: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; user-select: none; transition: background .18s ease, color .18s ease, border-color .18s ease; } .nav-group-head:hover { background: var(--glass-2); color: var(--text-1); } .nav-group.open > .nav-group-head { color: var(--text-1); } /* گروهی که صفحه فعال داخلش است */ .nav-group.has-active > .nav-group-head { color: var(--accent); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 22%, transparent); } .nav-group-head .g-icon { font-size: .95rem; width: 18px; text-align: center; flex-shrink: 0; } .nav-group-head .g-title { flex: 1; text-align: start; } .nav-group-head .g-chev { font-size: .62rem; opacity: .6; flex-shrink: 0; transition: transform .28s cubic-bezier(.4,0,.2,1); } .nav-group.open .g-chev { transform: rotate(90deg); } [dir=rtl] .nav-group .g-chev { transform: rotate(180deg); } [dir=rtl] .nav-group.open .g-chev { transform: rotate(90deg); } /* آکاردئون کشویی. حالتِ نهایی کاملاً اعلانی است (فقط با کلاس .open تعیین می‌شود)، پس حتی اگر انیمیشن اجرا نشود ارتفاع درست است. --nav-h را JS یک‌بار موقع راه‌اندازی از روی محتوا حساب می‌کند تا سرعت کشو طبیعی باشد؛ اگر نبود، مقدار پیش‌فرض کافی است. */ .nav-group-body { overflow: hidden; max-height: 0; opacity: .35; transition: max-height .3s cubic-bezier(.32,.72,0,1), opacity .22s ease; } .nav-group.open > .nav-group-body { max-height: var(--nav-h, 640px); opacity: 1; } .nav-group-inner { padding-top: 2px; } .nav-group-inner > :first-child { margin-top: 3px; } .nav-group-inner > :last-child { margin-bottom: 6px; } /* ═══ پنل مدیریت ═══════════════════════════════════════════ */ .adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px; } .adm-tab { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2); font-family: var(--font-fa); font-size: .78rem; cursor: pointer; white-space: nowrap; transition: all .15s ease; } .adm-tab:hover { color: var(--text-1); border-color: var(--border-b); } .adm-tab.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 700; } /* قفل کنار آیتم‌های VIP در سایدبار */ .feat-lock { pointer-events: none; } /* ── آیتم ─────────────────────────────────────────────────── */ .nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 1px 0; border-radius: 10px; cursor: pointer; font-size: .85rem; font-weight: 400; color: var(--text-2); transition: background .16s ease, color .16s ease, transform .16s ease; user-select: none; } .nav-item:hover { background: var(--glass-2); color: var(--text-1); } .nav-item:active { transform: scale(.985); } .nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; } /* نشانگر کنارِ آیتم فعال */ .nav-item.active::before { content: ''; position: absolute; inset-inline-start: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 17px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .nav-item .nav-icon { font-size: .98rem; width: 19px; text-align: center; flex-shrink: 0; } .nav-item.danger { color: var(--red); } .nav-item.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); } /* برچسب کوچک کنار آیتم (مثلاً «فعال») */ .nav-badge { margin-inline-start: auto; font-size: .58rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: var(--accent); color: var(--accent-fg); letter-spacing: .04em; } /* ── فوتر ─────────────────────────────────────────────────── */ .sidebar-footer { padding: 10px 12px 12px; border-top: 1px solid var(--glass-brd); flex-shrink: 0; } .sidebar-footer-label { font-size: .6rem; font-weight: 700; color: var(--text-3); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; } .theme-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; } .theme-btn { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: transform .15s ease, border-color .15s ease; } .theme-btn:hover { transform: scale(1.12); } .theme-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); } .theme-btn-label { font-size: .58rem; color: var(--text-3); margin-top: 4px; text-align: center; line-height: 1.2; } /* ── عنوان بخش داخل پنل تنظیمات ─────────────────────────── */ .set-sec-title { font-size: .68rem; font-weight: 700; color: var(--text-3); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; } /* ── کارت‌های تم (پنل «تم و ظاهر») ──────────────────────── */ .theme-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .theme-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; background: var(--bg-2); border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; font-family: inherit; transition: border-color .16s ease, background .16s ease, transform .16s ease; } .theme-card:hover { border-color: var(--border-b); transform: translateY(-2px); } .theme-card.active { border-color: var(--accent); background: var(--accent-bg); } .theme-card-dot { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border-b); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.25) inset; } .theme-card-dot i { width: 13px; height: 13px; border-radius: 50%; display: block; } .theme-card-label { font-size: .6rem; color: var(--text-2); text-align: center; line-height: 1.25; } .theme-card.active .theme-card-label { color: var(--accent); font-weight: 600; } @media (max-width: 480px) { .theme-cards { grid-template-columns: repeat(3, 1fr); } } /* ═══ Main ═════════════════════════════════════════════════ */ /* سایدبار fixed است، پس #main باید کنار برود */ #main { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; margin-inline-start: 280px; scroll-behavior: smooth; } /* ═══ Topbar — شناور، هم‌سطح و هم‌شکل سایدبار ═══════════════ قبلاً تمام‌عرض و گوشه‌تیز بود و کنار سایدبارِ گوشه‌گرد ناجور می‌شد. حالا همان ۱۴px فاصله از بالا و همان انحنا را دارد. */ #topbar { position: sticky; top: 14px; z-index: 50; flex-shrink: 0; height: 56px; margin-block-start: 14px; margin-inline-end: 14px; /* لبهٔ بیرونی — سمت سایدبار را #main فاصله داده */ padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 20px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.45), 0 0 0 1px var(--glass-hi) inset; } /* موقع اسکرول، محتوا از شکاف ۱۴px بالای هدر رد می‌شد و دیده می‌شد؛ این نوار همان شکاف را با رنگ صفحه می‌پوشاند. */ #topbar::before { content: ''; position: absolute; inset-inline: -1px; bottom: 100%; height: 15px; background: var(--bg-0); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { #topbar { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7); backdrop-filter: blur(var(--glass-blur)) saturate(1.7); } } .topbar-title { font-family: var(--font-fa); font-size: 1.12rem; font-weight: 700; color: var(--text-1); } .topbar-actions { display: flex; gap: 8px; align-items: center; } /* ═══ Pages ════════════════════════════════════════════════ */ /* پدینگ سمت بیرونی با حاشیهٔ هدر (۱۴px) هم‌راستا می‌شود */ .page { display: none; padding: 20px 20px 40px; padding-inline-end: 34px; } .page.active { display: block; animation: fadeUp .26s cubic-bezier(.32,.72,0,1); } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* اگر کاربر انیمیشن کمتر خواسته، احترام بگذار */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ═══ نقشه عضلات ═══════════════════════════════════════════ */ .bodymap-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 8px 8px; text-align: center; overflow: hidden; } .bodymap-title { font-size: .64rem; font-weight: 700; color: var(--text-3); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 4px; } .bodymap-svg { width: 100%; max-width: 190px; height: auto; display: block; margin: 0 auto; /* شکل‌ها موقع تغییر ریکاوری نرم عوض شوند، نه پرشی */ transition: opacity .3s ease; } .bodymap-svg path, .bodymap-svg ellipse { transition: fill .35s ease, fill-opacity .35s ease; } /* ═══ Buttons ══════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-family: var(--font-fa); font-size: .84rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; white-space: nowrap; line-height: 1.3; transition: all .15s ease; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--accent); color: var(--accent-fg) !important; border-color: var(--accent); } .btn-primary:hover { filter: brightness(1.1); box-shadow: var(--shadow-a); } .btn-secondary { background: var(--bg-3); color: var(--text-1) !important; border-color: var(--border); } .btn-secondary:hover { background: var(--bg-4); border-color: var(--border-b); } .btn-danger { background: rgba(220,38,38,.12); color: var(--red) !important; border-color: rgba(220,38,38,.3); } .btn-danger:hover { background: rgba(220,38,38,.22); } .btn-ghost { background: transparent; color: var(--text-2) !important; border-color: transparent; } .btn-ghost:hover { background: var(--bg-3); color: var(--text-1) !important; } .btn-sm { padding: 5px 11px; font-size: .77rem; } .btn-icon { padding: 6px 9px; } /* ═══ Cards ════════════════════════════════════════════════ */ .card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .card:hover { border-color: var(--border-b); } .card-header { padding: 13px 17px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--bg-1); } .card-title { font-size: 1rem; font-weight: 700; color: var(--text-1); } .card-body { padding: 16px; } /* ═══ Stat cards ═══════════════════════════════════════════ */ .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .stat-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); opacity: 0; transition: opacity .2s; } .stat-card:hover::after { opacity: 1; } .stat-label { font-size: .62rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .18em; margin-bottom: 6px; } .stat-value { font-family: var(--font-fa); font-size: 2rem; font-weight: 800; color: var(--text-1); line-height: 1; } /* ═══ Program cards ════════════════════════════════════════ */ .program-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(275px,1fr)); gap: 16px; } .program-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: all .18s ease; } .program-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } .program-card-header { padding: 14px 16px 11px; display: flex; justify-content: space-between; align-items: flex-start; } .program-name { font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 3px; } .program-days { font-size: .7rem; font-weight: 600; color: var(--accent); } .program-day-list { padding: 0 16px 12px; } .program-day-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--bg-3); font-size: .83rem; } .program-day-item:last-child { border-bottom: none; } .day-num { font-size: .62rem; color: var(--text-3); width: 36px; flex-shrink: 0; font-family: var(--font-mono); } .day-name { color: var(--text-2); flex: 1; } .day-count { font-size: .68rem; color: var(--text-3); font-family: var(--font-mono); } .program-card-footer { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-1); } .program-footer-meta { font-size: .68rem; color: var(--text-3); font-family: var(--font-mono); } /* ═══ Exercise list ════════════════════════════════════════ */ .exercise-list { display: flex; flex-direction: column; gap: 7px; } .exercise-item { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 14px; display: flex; align-items: center; gap: 11px; cursor: pointer; transition: all .15s ease; } .exercise-item:hover { border-color: var(--border-b); background: var(--bg-3); } .exercise-thumb { width: 42px; height: 42px; border-radius: var(--radius); background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; border: 1px solid var(--border); overflow: hidden; } .exercise-thumb img { width: 100%; height: 100%; object-fit: cover; } .ex-big-thumb { width: 60px; height: 60px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; } .exercise-info { flex: 1; min-width: 0; } .exercise-name { font-weight: 600; font-size: .9rem; color: var(--text-1); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exercise-meta { font-size: .7rem; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ═══ Badges ═══════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 4px; font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; flex-shrink: 0; border: 1px solid transparent; } .badge-blue { background:rgba(85,153,255,.14); color:var(--blue); border-color:rgba(85,153,255,.3); } .badge-green { background:rgba(61,220,132,.14); color:var(--green); border-color:rgba(61,220,132,.3); } .badge-red { background:rgba(255,68,85,.14); color:var(--red); border-color:rgba(255,68,85,.3); } .badge-orange { background:rgba(255,136,68,.14); color:var(--orange); border-color:rgba(255,136,68,.3); } .badge-purple { background:rgba(187,102,255,.14);color:var(--purple); border-color:rgba(187,102,255,.3); } .badge-teal { background:rgba(34,221,204,.14); color:var(--teal); border-color:rgba(34,221,204,.3); } .badge-pink { background:rgba(255,102,170,.14);color:var(--pink); border-color:rgba(255,102,170,.3); } .badge-amber { background:rgba(255,187,51,.14); color:var(--amber); border-color:rgba(255,187,51,.3); } .badge-cyan { background:rgba(51,204,255,.14); color:var(--cyan); border-color:rgba(51,204,255,.3); } .badge-indigo { background:rgba(136,153,255,.14);color:var(--indigo); border-color:rgba(136,153,255,.3); } .badge-lime { background:rgba(170,238,34,.14); color:var(--lime); border-color:rgba(170,238,34,.3); } .badge-gray { background:var(--bg-3); color:var(--text-2); border-color:var(--border); } .badge-yellow { background:rgba(250,204,21,.14); color:#ca8a04; border-color:rgba(250,204,21,.3); } /* ── Light theme badge overrides ──────────────────────────── */ [data-theme="light"] .badge-blue, [data-theme="light-warm"] .badge-blue, [data-theme="light-green"] .badge-blue, [data-theme="light-blue"] .badge-blue { color:var(--blue); } [data-theme="light"] .badge-green, [data-theme="light-warm"] .badge-green, [data-theme="light-green"] .badge-green, [data-theme="light-blue"] .badge-green { color:var(--green); } [data-theme="light"] .badge-red, [data-theme="light-warm"] .badge-red, [data-theme="light-green"] .badge-red, [data-theme="light-blue"] .badge-red { color:var(--red); } /* ═══ Forms ════════════════════════════════════════════════ */ .form-group { margin-bottom: 15px; } .form-label { display: block; font-size: .64rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 5px; } .form-input, .form-select, .form-textarea { width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-1); font-family: var(--font-fa); font-size: .88rem; padding: 8px 11px; outline: none; transition: border-color .15s ease; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .form-select { cursor: pointer; } .form-textarea { min-height: 78px; resize: vertical; } .form-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; } .form-row-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } /* stepper wrap */ .stepper-wrap { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .stepper-wrap .form-input { border: none; border-radius: 0; text-align: center; padding: 7px 4px; flex: 1; } .stepper-wrap .form-input:focus { box-shadow: none; border-bottom: 1px solid var(--accent); } .step-btn { background: var(--bg-3); border: none; border-inline-start: 1px solid var(--border); color: var(--text-1); font-size: 1rem; width: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s ease; flex-shrink: 0; } .step-btn:first-child { border-inline-start: none; border-inline-end: 1px solid var(--border); } .step-btn:hover { background: var(--bg-4); } /* ═══ Log table ════════════════════════════════════════════ */ .log-table { width: 100%; border-collapse: collapse; font-size: .83rem; } .log-table th { font-size: .6rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .14em; padding: 8px 13px; text-align: right; border-bottom: 1px solid var(--border); background: var(--bg-1); position: sticky; top: 0; } .log-table td { padding: 10px 13px; border-bottom: 1px solid var(--bg-3); color: var(--text-2); vertical-align: middle; } .log-table tr:hover td { background: var(--bg-2); color: var(--text-1); } .log-table tr:last-child td { border-bottom: none; } /* ═══ Modal ════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 14px; backdrop-filter: blur(4px); animation: fadeUp .14s ease; } .modal { background: var(--bg-2); border: 1px solid var(--border-b); border-radius: var(--radius-lg); width: 100%; max-width: 620px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow); animation: slideUp .18s ease; } .modal-wide { max-width: 860px; } @keyframes slideUp { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { padding: 15px 20px 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .modal-title { font-size: 1.05rem; font-weight: 700; color: var(--text-1); } .modal-close { background: none; border: none; color: var(--text-3); font-size: 1.1rem; cursor: pointer; padding: 3px 8px; border-radius: var(--radius); line-height: 1; transition: all .14s ease; } .modal-close:hover { background: var(--bg-3); color: var(--text-1); } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; background: var(--bg-1); } /* ═══ Session ══════════════════════════════════════════════ */ .session-header { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; } .session-name { font-size: 1.35rem; font-weight: 800; color: var(--accent); } .session-timer { font-family: var(--font-mono); font-size: 1.5rem; color: var(--text-1); letter-spacing: .1em; } .session-block { margin-bottom: 14px; } .session-block-title { font-size: .62rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .2em; margin-bottom: 8px; padding: 0 2px; } .session-exercise { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 10px; overflow: hidden; } .session-exercise-header { padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: var(--bg-1); } .session-exercise-name { font-size: .92rem; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .session-group-exercise .session-exercise-header { background: var(--accent-bg); } /* ═══ Superset / Group Cards ═══════════════════════════════ */ .sg-ex-card { transition: box-shadow .15s; } .sg-ex-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.15); } /* ═══ Set Done Button — animation ══════════════════════════ */ .set-done-btn { transition: all .15s ease, transform .18s cubic-bezier(.34,1.56,.64,1); } .set-done-btn.done { border-color: var(--green); background: rgba(74,222,128,.18); color: var(--green); box-shadow: 0 0 0 3px rgba(74,222,128,.15); } /* ═══ Rest Bar — circular timer ════════════════════════════ */ .rest-bar { position: sticky; bottom: 0; background: var(--bg-1); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 12px 16px; margin: 10px 0; box-shadow: var(--shadow-a); z-index: 10; animation: slideUp .2s ease; } @keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .last-record { font-size: .68rem; color: var(--text-3); padding: 3px 8px; background: var(--bg-3); border-radius: 4px; border: 1px solid var(--border); font-family: var(--font-mono); white-space: nowrap; } .last-record span { color: var(--accent); } .live-sets-container { padding: 4px 0; } .set-row { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--bg-3); flex-wrap: nowrap; overflow: hidden; } .set-row:last-child { border-bottom: none; } .set-num { font-size: .7rem; color: var(--text-3); width: 36px; flex-shrink: 0; font-family: var(--font-mono); } .set-input { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-1); font-family: var(--font-mono); font-size: .86rem; padding: 6px 4px; width: 60px; min-width: 44px; text-align: center; outline: none; transition: border-color .14s; flex-shrink: 1; } .set-input:focus { border-color: var(--accent); } .set-input::placeholder { font-size:.7rem; opacity:.5; } .set-unit { font-size: .66rem; color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0; } .set-done-btn { margin-inline-start: auto; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); background: none; color: var(--text-3); cursor: pointer; font-size: .88rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s ease; } .set-done-btn:hover { border-color: var(--green); color: var(--green); } .set-done-btn.done { border-color: var(--green); background: rgba(61,220,132,.14); color: var(--green); } .cardio-info-box { padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .88rem; color: var(--text-2); } .rest-bar { position: sticky; bottom: 0; background: var(--bg-1); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 14px 18px; margin: 12px 0; box-shadow: var(--shadow-a); z-index: 10; } .rest-countdown { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: var(--accent); } /* ═══ Program editor ═══════════════════════════════════════ */ .prog-day-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; } .prog-day-header { padding: 11px 14px; background: var(--bg-1); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .prog-block { margin: 10px 10px 0; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .prog-block-header { padding: 8px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .prog-item { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); margin: 8px; padding: 12px; overflow: hidden; } .prog-group-item { border-color: var(--accent); background: var(--accent-bg); } .prog-item-top { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; align-items: flex-end; } .method-fields { margin-top: 4px; } .mf-grid { display: flex; gap: 10px; flex-wrap: wrap; } .mf-col { min-width: 90px; } .sets-editor { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .sets-head { display: flex; gap: 4px; padding: 6px 10px; background: var(--bg-1); border-bottom: 1px solid var(--border); font-size: .6rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; } .sets-head span { flex: 1; min-width: 50px; } .set-editor-row { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--bg-3); } .set-editor-row:last-child { border-bottom: none; } .set-num-label { font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); width: 22px; flex-shrink: 0; text-align: center; } .set-inp, .step-inp-f { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-1); font-family: var(--font-mono); font-size: .8rem; padding: 5px 7px; flex: 1; min-width: 48px; text-align: center; outline: none; } .set-inp:focus, .step-inp-f:focus { border-color: var(--accent); } .steps-container { padding: 6px 0; } .step-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--bg-3); } .step-row:last-child { border-bottom: none; } .group-exercises-container { padding: 8px 10px 0; } .group-ex-row { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .group-ex-row:last-child { border-bottom: none; } /* ═══ Filter bar / Tags ════════════════════════════════════ */ .filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .filter-tag { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-3); font-size: .68rem; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: .08em; transition: all .14s ease; } .filter-tag:hover { border-color: var(--border-b); color: var(--text-2); } .filter-tag.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } /* ═══ Search bar ═══════════════════════════════════════════ */ .search-bar { position: relative; margin-bottom: 16px; } .search-bar input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-1); font-family: var(--font-fa); font-size: .88rem; padding: 8px 12px 8px 36px; outline: none; } .search-bar input:focus { border-color: var(--accent); } .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: .82rem; pointer-events: none; } /* ═══ Section header ═══════════════════════════════════════ */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .section-title { font-size: 1.2rem; font-weight: 800; color: var(--text-1); } /* ═══ Info boxes ═══════════════════════════════════════════ */ .info-box { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: .82rem; color: var(--text-2); line-height: 1.5; margin-bottom: 10px; } .warn-box { border-color: rgba(255,136,68,.35); background: rgba(255,136,68,.06); } .pr-box { background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } /* ═══ Toast ════════════════════════════════════════════════ */ #toast-container { position: fixed; bottom: 20px; left: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 7px; } .toast { background: var(--bg-3); border: 1px solid var(--border-b); border-radius: var(--radius); padding: 10px 15px; font-size: .82rem; color: var(--text-1); box-shadow: var(--shadow); animation: slideInL .2s ease; max-width: 300px; transition: opacity .3s, transform .3s; } .toast-out { opacity: 0; transform: translateX(-12px); } .toast-success { border-inline-end: 3px solid var(--green); } .toast-error { border-inline-end: 3px solid var(--red); } .toast-info { border-inline-end: 3px solid var(--accent); } @keyframes slideInL { from { transform: translateX(-14px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ═══ List editor ══════════════════════════════════════════ */ .led-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); } .led-row:last-child { border-bottom: none; } .list-mgr-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 10px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; font-family: var(--font-fa); font-size: .84rem; font-weight: 500; color: var(--text-1); transition: all .15s ease; width: 100%; } .list-mgr-btn:hover { background: var(--bg-4); border-color: var(--border-b); } .method-editor-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); } .method-editor-row:last-child { border-bottom: none; } .day-pick-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: var(--radius); font-size: .88rem; transition: background .14s ease; } .day-pick-row:hover { background: var(--bg-3); } /* ═══ Import drop zone ═════════════════════════════════════ */ .import-drop-zone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 32px; text-align: center; cursor: pointer; color: var(--text-3); transition: all .16s ease; } .import-drop-zone:hover, .import-drop-zone.drag-over { border-color: var(--accent); background: var(--accent-bg); color: var(--text-2); } .drop-icon { font-size: 2rem; margin-bottom: 8px; } .import-drop-zone p { font-size: .8rem; } /* ═══ Misc ═════════════════════════════════════════════════ */ .empty-state { text-align: center; padding: 50px 16px; color: var(--text-3); } .empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: .5; } .empty-state p { font-size: .83rem; } .divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: .65rem; font-weight: 600; background: var(--bg-3); border: 1px solid var(--border); color: var(--text-3); } .progress-bar-wrap { height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden; } .progress-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s ease; } /* ═══ Mobile ═══════════════════════════════════════════════ */ #sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; opacity: 0; transition: opacity .3s ease; } @supports (backdrop-filter: blur(1px)) { #sidebar-overlay { background: rgba(0,0,0,.34); backdrop-filter: blur(3px); } } #sidebar-overlay.show { display: block; opacity: 1; } #menu-toggle { display: none; background: none; border: none; color: var(--text-1); font-size: 1.2rem; cursor: pointer; padding: 5px 8px; border-radius: var(--radius); } #menu-toggle:hover { background: var(--bg-3); } @media (max-width: 768px) { /* سایدبار از لبه می‌آید و تمام‌قد است — شناوری فقط روی دسکتاپ معنی دارد */ #sidebar { inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw); border-radius: 0; border-inline-start: none; z-index: 200; transform: translateX(100%); } [dir=ltr] #sidebar { transform: translateX(-100%); } #sidebar.open { transform: none; } #main { margin-inline-start: 0; } #menu-toggle { display: flex; } .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } .form-row,.form-row-3 { grid-template-columns: 1fr; } .modal-wide { max-width: 100%; } .page { padding: 12px 12px 32px; padding-inline-end: 12px; } /* روی موبایل هدر هم شناور می‌ماند ولی جمع‌وجورتر */ #topbar { padding: 0 14px; margin: 10px 10px 0; top: 10px; border-radius: 15px; } #topbar::before { height: 11px; } .prog-item-top { flex-direction: column; } } /* ═══════════════════════════════════════════════════════════ Calendar — تقویم تمرین ═══════════════════════════════════════════════════════════ */ .cal-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 22px; } .cal-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .cal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bg-1); border-bottom: 1px solid var(--border); } .cal-month-title { font-size: 1.1rem; font-weight: 700; color: var(--text-1); text-align: center; } .cal-legend { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-1); } .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid var(--border); } .cal-dow { padding: 8px 4px; text-align: center; font-size: .68rem; font-weight: 700; color: var(--text-3); background: var(--bg-1); border-bottom: 1px solid var(--border); letter-spacing: .08em; } .cal-cell { min-height: 68px; padding: 7px 5px 5px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: background .14s ease; } .cal-cell:hover { background: var(--bg-3); } .cal-cell:nth-child(7n) { border-left: none; } .cal-empty { cursor: default; opacity: .3; } .cal-day-num { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--text-2); line-height: 1; } .cal-today { background: var(--accent-bg); border-color: var(--accent); } .cal-today .cal-day-num { color: var(--accent); font-weight: 800; } .cal-done { background: rgba(61,220,132,.07); } .cal-planned { background: rgba(85,153,255,.07); } .cal-missed { background: rgba(255,68,85,.07); } .cal-selected { outline: 2px solid var(--accent); outline-offset: -2px; } .cal-dot { font-size: .75rem; line-height: 1; } .cal-dot-done { color: var(--green); } .cal-dot-plan { color: var(--blue); } .cal-dot-miss { color: var(--red); } .cal-prog-name { font-size: .56rem; color: var(--text-3); text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 0 2px; } .cal-actions { padding: 14px 16px; border-bottom: 1px solid var(--border); min-height: 40px; } .cal-shift-section { padding: 16px 18px; background: var(--bg-1); } .cal-section-title { font-size: .72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .16em; margin-bottom: 10px; } /* ── تفکیک بانک / کاربر در exercise list ───────────────── */ .ex-source-badge { font-size: .55rem; padding: 1px 5px; border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; } .ex-source-db { background: rgba(85,153,255,.13); color: var(--blue); border: 1px solid rgba(85,153,255,.3); } .ex-source-user { background: rgba(192,132,252,.13); color: var(--purple); border: 1px solid rgba(192,132,252,.3); } /* ── PWA install banner ──────────────────────────────────── */ #pwa-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; background: var(--bg-3); border-top: 1px solid var(--border); padding: 12px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 -4px 20px rgba(0,0,0,.3); animation: slideUp .25s ease; } #pwa-banner p { flex: 1; font-size: .83rem; color: var(--text-2); margin: 0; } #pwa-banner strong { color: var(--accent); } @media (max-width: 768px) { .cal-stats { grid-template-columns: repeat(2,1fr); } .cal-cell { min-height: 50px; } .cal-prog-name { display: none; } } /* ═══════════════════════════════════════════════════════════ Mobile-First — بهینه موبایل ═══════════════════════════════════════════════════════════ */ /* ── Base mobile improvements ───────────────────────────── */ html { -webkit-text-size-adjust: 100%; touch-action: manipulation; } body { overscroll-behavior-y: none; } /* بزرگ‌تر کردن دکمه‌ها برای لمس */ @media (max-width: 768px) { /* Typography */ body { font-size: 14px; } /* Topbar */ #topbar { height: 50px; padding: 0 12px; } .topbar-title { font-size: 1rem; } /* Pages */ .page { padding: 12px; } /* Buttons — بزرگ‌تر برای لمس */ .btn { padding: 10px 16px; font-size: .86rem; min-height: 40px; } .btn-sm { padding: 8px 12px; font-size: .8rem; min-height: 36px; } .btn-icon { padding: 8px 10px; min-height: 36px; min-width: 36px; } /* Grids */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; } .grid-4 { grid-template-columns: 1fr 1fr; } /* Forms — بزرگ‌تر برای لمس */ .form-input, .form-select, .form-textarea { font-size: 16px; /* جلوگیری از zoom در iOS */ padding: 10px 12px; min-height: 42px; } .form-row, .form-row-3 { grid-template-columns: 1fr; gap: 8px; } .stepper-wrap .form-input { min-height: 42px; } .step-btn { width: 40px; height: 42px; font-size: 1.1rem; } /* Stats */ .stat-card { padding: 12px 14px; } .stat-value { font-size: 1.6rem; } /* Program cards */ .program-grid { grid-template-columns: 1fr; } /* Program editor */ .prog-day-header { flex-direction: column; align-items: flex-start; gap: 8px; } .prog-item-top { flex-direction: column; gap: 8px; } .prog-item-top > div { width: 100% !important; min-width: unset !important; } .mf-grid { gap: 8px; } .mf-col { min-width: unset; flex: 1 1 calc(50% - 4px); } /* Set editor rows */ .set-editor-row { flex-wrap: wrap; gap: 5px; } .set-inp { width: 60px !important; font-size: 14px; } .set-num-label { width: 18px; } /* Session */ .session-header { flex-direction: column; gap: 10px; padding: 12px 14px; } .session-name { font-size: 1.1rem; } .session-timer { font-size: 1.2rem; } .set-input { width: 54px !important; min-width: 40px !important; font-size: 14px; padding: 8px 4px; min-height: 40px; } .set-input[data-field="rpe"] { width: 40px !important; min-width: 36px !important; } .set-done-btn { width: 40px; height: 40px; font-size: 1rem; } .set-row { padding: 8px 12px; gap: 6px; } /* Calendar */ .cal-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .cal-cell { min-height: 44px; } .cal-grid { font-size: .75rem; } /* Modal */ .modal, .modal-wide { max-width: calc(100vw - 16px); border-radius: var(--radius-lg); } .modal-body { padding: 14px; max-height: 75vh; } .modal-header { padding: 12px 14px; } .modal-footer { padding: 10px 14px; gap: 6px; } .modal-footer .btn { flex: 1; justify-content: center; } /* Exercise list */ .exercise-thumb { width: 40px; height: 40px; font-size: 1.1rem; } .exercise-name { font-size: .88rem; } /* Group items in session — full width */ .session-group-exercise .group-ex-row { flex-direction: column; align-items: flex-start; gap: 6px; } .group-ex-row > div { width: 100%; } /* Section header */ .section-header { flex-wrap: wrap; gap: 8px; } .section-header > div { flex-wrap: wrap; gap: 6px; } .section-header .btn { flex: 1; min-width: 100px; justify-content: center; } /* Filter bar — scrollable */ .filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .filter-bar::-webkit-scrollbar { height: 2px; } .filter-tag { white-space: nowrap; } /* Sidebar footer */ .theme-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } /* Day pick modal */ .day-pick-row { padding: 14px 12px; font-size: .9rem; } /* Rest bar */ .rest-bar { border-radius: var(--radius); padding: 12px; } .rest-countdown { font-size: 1rem; } } /* ── iPhone Safe Area ───────────────────────────────────── */ @supports (padding: max(0px)) { #sidebar, #main { padding-bottom: max(0px, env(safe-area-inset-bottom)); } #topbar { padding-top: max(0px, env(safe-area-inset-top)); } #toast-container { bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px)); } } /* ── Large tablets ──────────────────────────────────────── */ @media (min-width: 769px) and (max-width: 1024px) { #sidebar { width: 216px; inset-inline-start: 10px; inset-block: 10px; } #main { margin-inline-start: 238px; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .prog-item-top { flex-wrap: wrap; } .prog-item-top > div { min-width: 140px !important; } } /* ── Touch targets — همه جا ─────────────────────────────── */ @media (hover: none) and (pointer: coarse) { /* موبایل و تبلت — همه دکمه‌های کوچک رو بزرگ‌تر کن */ button, [role="button"] { min-height: 36px; } .nav-item { padding: 12px 18px; } .filter-tag { padding: 7px 14px; } .set-done-btn { width: 44px; height: 44px; } } /* ═══ Profile page extra styles ═══════════════════════════ */ #page-profile .stat-card { padding: 12px 14px; } #page-profile .stat-value { font-size: 1.3rem; } @media (max-width: 768px) { #page-profile .stat-card { padding: 10px 12px; } } /* ═══════════════════════════════════════════════════════════ Analytics styles ═══════════════════════════════════════════════════════════ */ .an-mini-stat { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; text-align: center; } .an-mini-label { font-size: .6rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 4px; } .an-mini-val { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--text-1); line-height: 1; } .an-mini-change { font-size: .68rem; font-family: var(--font-mono); margin-top: 3px; } /* ═══ Auth / Login styles ════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ Auth — fully responsive (mobile → tablet → desktop) ══════════════════════════════════════════════════════════ */ .auth-overlay { position: fixed; inset: 0; z-index: 5000; background: var(--bg-0); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; } /* ── Mobile first: کارت تمام عرض ── */ .auth-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px 20px; width: 100%; max-width: 480px; /* موبایل و تبلت کوچک */ box-shadow: var(--shadow); animation: slideUp .22s ease; } /* ── Tablet: کمی فضای بیشتر ── */ @media (min-width: 600px) { .auth-card { padding: 36px 32px; max-width: 520px; } } /* ── Desktop: layout دو ستونه ── */ @media (min-width: 960px) { .auth-overlay { align-items: stretch; padding: 0; flex-direction: row-reverse; /* کارت سمت راست، پنل سمت چپ */ } .auth-card { flex: 0 0 480px; max-width: 480px; border-radius: 0; border-top: none; border-bottom: none; border-right: none; border-left: 1px solid var(--border); padding: 48px 40px; overflow-y: auto; max-height: 100vh; box-shadow: none; animation: none; display: flex; flex-direction: column; } /* لوگو در desktop بزرگ‌تر */ .auth-logo h1 { font-size: 2.4rem; } } /* ── پنل برندینگ چپ ── */ .auth-brand-panel { display: none; } @media (min-width: 960px) { .auth-brand-panel { display: flex; flex: 1; align-items: center; justify-content: center; padding: 48px; background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%); background-image: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%), radial-gradient(circle at 30% 40%, var(--accent-bg) 0%, transparent 60%); } .auth-brand-inner { max-width: 400px; width: 100%; } } /* ── Wide desktop: کارت کمی عریض‌تر ── */ @media (min-width: 1200px) { .auth-card { flex: 0 0 520px; max-width: 520px; padding: 56px 48px; } } /* ── Logo ── */ .auth-logo { text-align: center; margin-bottom: 28px; } .auth-logo h1 { font-family: var(--font-fa); font-weight: 800; font-size: 2rem; color: var(--accent); letter-spacing: .04em; margin-bottom: 6px; } .auth-logo p { font-size: .84rem; color: var(--text-3); } /* ── Tabs ── */ .auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 22px; } .auth-tab { flex: 1; padding: 11px 8px; text-align: center; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--text-3); border-bottom: 2px solid transparent; transition: all .15s ease; } .auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ── Form sections ── */ .auth-form-section { display: none; } .auth-form-section.active { display: block; } /* ── Footer ── */ .auth-footer { text-align: center; margin-top: 18px; font-size: .8rem; color: var(--text-3); } .auth-skip-btn { background: none; border: none; color: var(--text-3); font-size: .8rem; cursor: pointer; text-decoration: underline; font-family: var(--font-fa); padding: 4px 8px; } .auth-skip-btn:hover { color: var(--text-2); } /* ── User avatar in topbar ────────────────────────────── */ .topbar-user { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--accent); cursor: pointer; flex-shrink: 0; } /* ── Reorder btn improvements ─────────────────────────── */ .item-reorder-wrap { display: flex; flex-direction: column; gap: 2px; align-items: center; margin-top: 18px; flex-shrink: 0; } .item-move-btn { width: 28px; height: 26px; border-radius: 4px; border: 1px solid var(--border-b); background: var(--bg-3); color: var(--text-2); font-size: .85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .13s ease; } .item-move-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } .item-pos-input { width: 28px; height: 22px; border-radius: 3px; border: 1px solid var(--border); background: var(--bg-1); color: var(--text-1); font-family: var(--font-mono); font-size: .72rem; text-align: center; outline: none; } .item-pos-input:focus { border-color: var(--accent); } @media (max-width: 768px) { .item-reorder-wrap { flex-direction: row; margin-top: 10px; } .item-pos-input { width: 36px; height: 32px; font-size: .8rem; } .item-move-btn { width: 32px; height: 32px; font-size: .9rem; } } /* ═══ ویژگی‌های جدید v2 ═══════════════════════════════ */ /* برنامه‌های آماده */ .plan-star { color: var(--amber); } .plan-badge-level { padding: 2px 8px; border-radius: 10px; font-size: .62rem; font-weight: 700; } /* تغذیه */ .macro-bar { height: 8px; border-radius: 4px; transition: width .4s ease; } .water-btn { transition: all .15s; } .water-btn:hover { background: var(--blue); color: white; } /* آنالیز بدن */ .recovery-bar { height: 12px; border-radius: 6px; overflow: hidden; background: var(--bg-3); } .recovery-fill { height: 100%; border-radius: 6px; transition: width .5s ease; } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .photo-thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; } .photo-date { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); padding: 3px 6px; font-size: .58rem; color: #fff; } /* داشبورد ویجت‌ها */ .dashboard-widget { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 14px; } .widget-title { font-size: .65rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .15em; margin-bottom: 10px; } /* PR انیمیشن */ @keyframes prPop { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 60% { transform: scale(.95); } 100% { transform: scale(1); } } .pr-new { animation: prPop .5s ease; color: var(--accent) !important; } /* ستاره رتبه‌بندی */ .stars { color: var(--amber); font-size: .85rem; letter-spacing: 1px; } /* تب‌های فعال‌تر */ .tab-bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .tab-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-3); color: var(--text-2); font-size: .82rem; cursor: pointer; transition: all .15s; } .tab-btn.active, .tab-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; } /* ══ Progressive Overload Engine ══ */ .po-hint { animation: fadeUp .2s ease; } .po-phase-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.62rem; font-weight:700; } .goal-option { transition: all .15s; } .goal-option:hover { border-color:var(--border-b) !important; background:var(--bg-3) !important; } .goal-option.selected { border-color:var(--accent) !important; background:var(--accent-bg) !important; } /* ── RPE input compact ── */ .live-set-row .set-input[data-field="rpe"] { width:44px; font-size:.78rem; color:var(--purple); border-color:var(--purple)33; } .live-set-row .set-input[data-field="rpe"]:focus { border-color:var(--purple); } /* ══ Body Page v2 ══ */ .tab-btn { padding:7px 14px; border-radius:var(--radius); background:var(--bg-2); border:1px solid var(--border); color:var(--text-2); font-size:.8rem; cursor:pointer; font-family:inherit; transition:all .15s; } .tab-btn.active { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); font-weight:600; } .tab-btn:hover:not(.active) { background:var(--bg-3); color:var(--text-1); } /* BodyMap SVG */ svg path, svg ellipse, svg rect { transition: opacity 0.4s ease, fill 0.4s ease; } /* BMI نوار */ .bmi-bar-marker { transition: left 0.5s ease; } /* کارت‌های ریکاوری */ .recovery-card { transition: border-color 0.3s; } .recovery-card:hover { transform: translateY(-1px); } /* ══════════════════════════════════════════════════════════ Exercise Cards — grid view (فاز ۵) ══════════════════════════════════════════════════════════ */ .ex-card:hover { border-color: var(--accent) !important; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.2); } .ex-card:active { transform: translateY(0); }