/* ============================================================ gate.css — استایل گیت فعال‌سازی، تک‌نمونه و حالت توسعه‌دهنده (r16.2) مستقل از CSS برنامه؛ هماهنگ با تم سراسری (شیشه‌ای + گرادیان) r16.2: تم کامل با متغیرهای CSS — تاریک/روشن + دو رنگ برند (a1/a2) متغیرها توسط theme-core.js روی ست می‌شوند؛ اینجا فقط فالبک پیش‌فرض. ============================================================ */ /* فالبک متغیرهای تم (اگر theme-core نرسید) */ :root{ --gt-a1:#6366F1; --gt-a2:#0EA5E9; /* r16.7: ویوپورت زنده (کیبورد iOS) — توسط js/viewport.js به‌روز می‌شود */ --vvh:100vh; --vv-top:0px; } html[data-gtm="dark"], html:not([data-gtm]){ --gt-bg1:#0F172A; --gt-bg2:#1E1B4B; --gt-bg3:#312E81; --gt-card:rgba(255,255,255,.08); --gt-card2:rgba(255,255,255,.06); --gt-line:rgba(255,255,255,.16); --gt-line2:rgba(255,255,255,.12); --gt-tx:#F8FAFC; --gt-sub:#C7D2FE; --gt-lbl:#A5B4FC; --gt-dim:#94A3B8; --gt-input-bg:rgba(15,23,42,.55); --gt-input-tx:#F1F5F9; --gt-ph:#64748B; --gt-err:#FDA4AF; --gt-ok:#6EE7B7; --gt-focus:var(--gt-a2); --gt-inputbr:rgba(255,255,255,.22); --gt-blob-op:.5; } html[data-gtm="light"]{ --gt-bg1:#EEF2FF; --gt-bg2:#E0E7FF; --gt-bg3:#CFFAFE; --gt-card:rgba(255,255,255,.78); --gt-card2:rgba(255,255,255,.6); --gt-line:rgba(30,27,75,.16); --gt-line2:rgba(30,27,75,.10); --gt-tx:#1E1B4B; --gt-sub:#4338CA; --gt-lbl:#4F46E5; --gt-dim:#64748B; --gt-input-bg:rgba(255,255,255,.9); --gt-input-tx:#1E1B4B; --gt-ph:#94A3B8; --gt-err:#BE123C; --gt-ok:#047857; --gt-focus:var(--gt-a1); --gt-inputbr:rgba(30,27,75,.22); --gt-blob-op:.35; } /* قبل از گران‌شدن، اپ دیده نمی‌شود (ضد فلش) */ html.dfter-gate:not(.dfter-granted) #app, html.dfter-gate:not(.dfter-granted) .sidebar, html.dfter-gate:not(.dfter-granted) .sidebar-overlay { display: none !important; } /* ---------- اوورلی صفحهٔ فعال‌سازی ---------- */ .dfter-gate-overlay { position: fixed; /* r16.7: هم‌ترازی با ناحیهٔ دیده‌شده — کارت گیت هنگام بازبودن کیبورد iOS زیر کیبورد گم نمی‌شود و در مرکز «ناحیهٔ واقعی قابل دیدن» می‌ماند */ top: var(--vv-top, 0px); left: 0; right: 0; bottom: auto; height: var(--vvh, 100%); z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 18px; overflow: auto; background: radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--gt-a2) 26%, transparent), transparent 60%), linear-gradient(135deg, var(--gt-bg1) 0%, var(--gt-bg2) 45%, var(--gt-bg3) 100%); font-family: Vazirmatn, Tahoma, sans-serif; direction: rtl; color: var(--gt-tx); box-sizing: border-box; transition: background .35s ease; } .dfter-gate-overlay *, .dfter-si-overlay * { box-sizing: border-box; } .dfter-gate-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--gt-blob-op); pointer-events: none; transition: background .35s ease; } .dfter-b1 { width: 380px; height: 380px; background: var(--gt-a1); top: -80px; right: -60px; } .dfter-b2 { width: 320px; height: 320px; background: var(--gt-a2); bottom: -70px; left: -50px; } .dfter-gate-card { position: relative; width: 100%; max-width: 400px; background: var(--gt-card); border: 1px solid var(--gt-line); border-radius: 22px; padding: 28px 24px 18px; text-align: center; backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 24px 60px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .18); animation: dfterPop .45s cubic-bezier(.2, .9, .3, 1.2); } @keyframes dfterPop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .dfter-gate-logo { width: 64px; height: 64px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 30px; border-radius: 18px; background: linear-gradient(135deg, var(--gt-a1), var(--gt-a2)); box-shadow: 0 10px 26px color-mix(in srgb, var(--gt-a1) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35); cursor: default; user-select: none; -webkit-user-select: none; transition: background .35s ease, box-shadow .35s ease; } .dfter-gate-card h1 { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--gt-tx); letter-spacing: -.2px; } .dfter-gate-sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.9; color: var(--gt-sub); } .dfter-field { display: block; text-align: right; margin: 0 0 12px; } .dfter-field > span { display: block; font-size: 11.5px; color: var(--gt-lbl); margin: 0 4px 5px; } .dfter-field input { width: 100%; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--gt-inputbr); background: var(--gt-input-bg); color: var(--gt-input-tx); /* r16.7: حداقل 16px — Safari iOS زیر این اندازه هنگام فوکوس زوم می‌کند */ font: 16px/1 Tahoma, sans-serif; letter-spacing: 1px; outline: none; transition: border-color .2s, box-shadow .2s, background .35s ease; } .dfter-field input:focus { border-color: var(--gt-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gt-focus) 28%, transparent); } .dfter-field input::placeholder { color: var(--gt-ph); letter-spacing: 2px; } .dfter-btn { display: inline-block; padding: 11px 18px; border-radius: 13px; border: 1px solid var(--gt-inputbr); background: var(--gt-card2); color: var(--gt-input-tx); font: 700 13.5px Tahoma, sans-serif; cursor: pointer; transition: transform .15s, background .2s, opacity .2s; -webkit-tap-highlight-color: transparent; } .dfter-btn:hover { background: color-mix(in srgb, var(--gt-a2) 14%, var(--gt-card2)); } .dfter-btn:active { transform: scale(.97); } .dfter-btn:disabled { opacity: .55; cursor: default; } .dfter-btn-primary { width: 100%; border: none; background: linear-gradient(135deg, var(--gt-a1), color-mix(in srgb, var(--gt-a1) 55%, var(--gt-a2)) 55%, var(--gt-a2)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); box-shadow: 0 10px 24px color-mix(in srgb, var(--gt-a1) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.3); margin-top: 2px; transition: background .35s ease, box-shadow .35s ease; } .dfter-btn-ghost { background: transparent; } .dfter-status { min-height: 18px; margin-top: 12px; font-size: 12px; line-height: 1.9; color: var(--gt-dim); word-break: break-word; } .dfter-status.dfter-err { color: var(--gt-err); } .dfter-status.dfter-ok { color: var(--gt-ok); font-weight: 700; } .dfter-status.dfter-info { color: var(--gt-lbl); } .dfter-gate-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--gt-line2); font-size: 10.5px; color: var(--gt-dim); } #dfterInstallSlot .dfter-btn { padding: 7px 12px; font-size: 11.5px; } /* ---------- دکمه و پاپ‌آپ انتخاب تم (r16.2) ---------- */ .dfter-th-btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 10px; border: 1px solid var(--gt-line2); background: var(--gt-card2); color: var(--gt-tx); cursor: pointer; flex: 0 0 auto; } .dfter-th-btn:hover { background: color-mix(in srgb, var(--gt-a2) 16%, var(--gt-card2)); } .dfter-theme-pop { margin-top: 14px; padding: 14px 12px 12px; border: 1px solid var(--gt-line2); border-radius: 16px; background: var(--gt-card2); text-align: right; animation: dfterPop .3s cubic-bezier(.2, .9, .3, 1.2); } .dfter-th-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: var(--gt-tx); } .dfter-th-x { width: 26px; height: 26px; padding: 0; border-radius: 8px; border: none; background: transparent; color: var(--gt-dim); font-size: 13px; cursor: pointer; } .dfter-th-dots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .dfter-th-dot { width: 34px; height: 34px; padding: 3px; border-radius: 50%; border: 2px solid transparent; background: var(--gt-card2); cursor: pointer; transition: transform .15s, border-color .2s; } .dfter-th-dot i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); } .dfter-th-dot:hover { transform: scale(1.1); } .dfter-th-dot.sel { border-color: var(--gt-tx); transform: scale(1.1); } .dfter-th-modes { display: flex; gap: 8px; margin-bottom: 10px; } .dfter-th-mode { flex: 1; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--gt-line2); background: transparent; color: var(--gt-dim); font: 700 12px Tahoma, sans-serif; cursor: pointer; } .dfter-th-mode.sel { background: linear-gradient(135deg, var(--gt-a1), var(--gt-a2)); color: #fff; border-color: transparent; } .dfter-th-custom { display: flex; gap: 10px; margin-bottom: 10px; } .dfter-th-custom label { flex: 1; font-size: 11px; color: var(--gt-lbl); } .dfter-th-custom span { display: block; margin-bottom: 5px; } .dfter-th-custom input[type="color"] { width: 100%; height: 34px; padding: 2px 3px; border: 1px solid var(--gt-inputbr); border-radius: 10px; background: var(--gt-input-bg); cursor: pointer; } .dfter-th-reset { width: 100%; font-size: 11.5px; padding: 8px 10px; border-radius: 10px; } .dfter-th-note { margin: 8px 0 0; font-size: 10px; line-height: 1.8; color: var(--gt-dim); } /* ---------- اوورلی تک‌نمونه (تب دوم) / پنل‌ها ---------- */ .dfter-si-overlay { position: fixed; inset: 0; z-index: 2147483400; display: flex; align-items: center; justify-content: center; padding: 18px; background: color-mix(in srgb, var(--gt-bg1) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: Vazirmatn, Tahoma, sans-serif; direction: rtl; color: var(--gt-tx); text-align: center; } .dfter-si-card { width: 100%; max-width: 380px; background: var(--gt-card); border: 1px solid var(--gt-line); border-radius: 20px; padding: 26px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); animation: dfterPop .35s cubic-bezier(.2, .9, .3, 1.2); } .dfter-si-icon { width: 56px; height: 56px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 16px; background: linear-gradient(135deg, var(--gt-a2), var(--gt-a1)); box-shadow: 0 10px 24px color-mix(in srgb, var(--gt-a1) 35%, transparent); } .dfter-si-card h2 { margin: 0 0 8px; font-size: 16.5px; color: var(--gt-tx); } .dfter-si-card p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.9; color: var(--gt-sub); } .dfter-si-sub { font-size: 11px !important; color: var(--gt-dim) !important; } .dfter-si-card .dfter-btn { margin-top: 10px; } .dfter-si-status { margin-top: 12px; font-size: 11.5px; color: var(--gt-lbl); min-height: 16px; } /* ---------- پنل توسعه‌دهنده ---------- */ .dfter-dev-card { width: 100%; max-width: 640px; /* r16.7: داخل ناحیهٔ دیده‌شده (بالای کیبورد iOS) */ max-height: calc(var(--vvh, 100vh) - 16px); overflow: auto; background: color-mix(in srgb, var(--gt-bg1) 96%, transparent); border: 1px solid var(--gt-line); border-radius: 20px; padding: 18px; text-align: right; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); animation: dfterPop .3s cubic-bezier(.2, .9, .3, 1.2); } .dfter-dev-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .dfter-dev-head h2 { margin: 0; font-size: 15.5px; color: var(--gt-tx); } .dfter-dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } @media (max-width: 560px) { .dfter-dev-grid { grid-template-columns: 1fr; } } .dfter-dev-box { background: var(--gt-card2); border: 1px solid var(--gt-line2); border-radius: 14px; padding: 10px 12px; font-size: 11.5px; line-height: 2; color: var(--gt-dim); word-break: break-word; } .dfter-dev-box b { color: var(--gt-lbl); } .dfter-dev-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .dfter-dev-actions .dfter-btn { font-size: 12px; padding: 9px 13px; } .dfter-danger { border-color: rgba(248, 113, 113, .5); color: #FCA5A5; } /* ---------- حرکت کمتر ---------- */ @media (prefers-reduced-motion: reduce) { .dfter-gate-card, .dfter-si-card, .dfter-dev-card, .dfter-theme-pop { animation: none; } .dfter-btn, .dfter-field input, .dfter-gate-overlay, .dfter-gate-logo { transition: none; } } /* ============================================================ r16.8 — کپسولی + سطر کد با دکمهٔ چسباندن + راهنمای نصب تازه ============================================================ */ /* آیکون لوگو: کپسولی با عمق بیشتر */ .dfter-gate-logo{ border-radius:999px; box-shadow: 0 10px 26px color-mix(in srgb, var(--gt-a1) 45%, transparent), 0 2px 0 rgba(255,255,255,.25) inset, 0 18px 40px color-mix(in srgb, var(--gt-a1) 22%, transparent); } /* ضد باگ فوکوس iOS: هیچ جدِ ورودی‌ها user-select:none نچسبد */ .dfter-gate-overlay input, .dfter-gate-overlay textarea, .dfter-gate-overlay select{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; touch-action:manipulation; caret-color:var(--gt-focus, #38BDF8); } /* سطر کد: ورودی + دکمهٔ چسباندن */ .dfter-code-row{ display:flex; gap:8px; align-items:stretch; } .dfter-code-row #dfterCodeInput{ flex:1; min-width:0; } .dfter-paste-btn{ flex:0 0 auto; width:46px; border-radius:13px; border:1px solid var(--gt-inputbr); background:var(--gt-card2); font-size:18px; cursor:pointer; transition:transform .15s, background .2s; -webkit-tap-highlight-color:transparent; } .dfter-paste-btn:active{ transform:scale(.94); } /* راهنمای نصب تازه (Add to Home Screen) */ .dfter-install-hint{ margin:0 0 14px; padding:10px 12px; border:1px dashed color-mix(in srgb, var(--gt-a2) 45%, transparent); border-radius:13px; background:color-mix(in srgb, var(--gt-a2) 8%, transparent); font-size:11px; line-height:1.9; color:var(--gt-sub); text-align:right; } .dfter-install-hint b{ color:var(--gt-tx); } /* ============================================================ r16.9 — ضد باگ کیبورد standalone iOS (bugs.webkit.org #279904) در برنامهٔ نصب‌شده، وارثگی user-select روی جدّهای ورودی قطع می‌شود و هنگام بازبودن کیبورد، بلور کارت گیت خاموش می‌شود (پایداری ترکیب WebKit + اجرای روان‌تر). ============================================================ */ html.ios-standalone .dfter-gate-overlay, html.ios-standalone .dfter-gate-card, html.ios-standalone .dfter-field, html.ios-standalone .dfter-code-row, html.ios-standalone .dfter-theme-pop, html.ios-standalone .dfter-gate-foot{ -webkit-user-select:text; user-select:text; } html.kb-open .dfter-gate-card{ backdrop-filter:none; -webkit-backdrop-filter:none; background:color-mix(in srgb, var(--gt-bg1) 94%, transparent); }