/* public/style.css — سیستم طراحی مشترک «چاپ شایان» تم تاریک/روشن یکپارچه با data-theme روی . بدون وابستگی شبکه. */ /* ---------- فونت Dana ---------- */ @font-face { font-family: 'Dana'; src: url('assets/fonts/dana-fanum-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Dana'; src: url('assets/fonts/dana-fanum-demibold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Dana'; src: url('assets/fonts/dana-fanum-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Dana'; src: url('assets/fonts/dana-fanum-extrabold.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Dana'; src: url('assets/fonts/dana-fanum-black.woff2') format('woff2'); font-weight: 900; font-display: swap; } /* ---------- توکن‌های تم ---------- */ :root { --accent: #10b981; --accent-2: #059669; --accent-soft: rgba(16, 185, 129, 0.12); --accent-glow: rgba(16, 185, 129, 0.45); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.12); --radius-sm: 12px; --radius: 18px; --radius-lg: 26px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* تاریک (پیش‌فرض) */ --bg: #0b1120; --bg-grad: radial-gradient(at 0% 0%, rgba(16,185,129,0.16) 0, transparent 45%), radial-gradient(at 100% 100%, rgba(56,189,248,0.14) 0, transparent 45%); --surface: rgba(30, 41, 59, 0.55); --surface-2: rgba(15, 23, 42, 0.85); --surface-solid: #1e293b; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --text: #f1f5f9; --text-muted: #94a3b8; --input-bg: rgba(0, 0, 0, 0.25); --shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.55); --ripple: rgba(255, 255, 255, 0.25); } html[data-theme="light"] { --bg: #f1f5f9; --bg-grad: radial-gradient(at 0% 0%, rgba(16,185,129,0.14) 0, transparent 45%), radial-gradient(at 100% 100%, rgba(56,189,248,0.14) 0, transparent 45%); --surface: rgba(255, 255, 255, 0.8); --surface-2: rgba(255, 255, 255, 0.95); --surface-solid: #ffffff; --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.14); --text: #0f172a; --text-muted: #64748b; --input-bg: rgba(15, 23, 42, 0.04); --shadow: 0 24px 50px -12px rgba(15, 23, 42, 0.18); --ripple: rgba(15, 23, 42, 0.12); } * { box-sizing: border-box; font-family: 'Dana', -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; } body { background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; color: var(--text); direction: rtl; min-height: 100vh; transition: background-color 0.4s var(--ease), color 0.3s var(--ease); } /* ---------- آیکون SVG ---------- */ .icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex-shrink: 0; stroke: currentColor; fill: none; } .icon svg { width: 100%; height: 100%; display: block; } /* ---------- دکمه‌ها ---------- */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--radius); cursor: pointer; font-family: inherit; font-weight: 700; font-size: 15px; padding: 14px 20px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px -4px var(--accent-glow); transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s; user-select: none; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -6px var(--accent-glow); } .btn:active { transform: translateY(0) scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(0.3); } .btn-block { width: 100%; } .btn-ghost { background: var(--input-bg); color: var(--text); box-shadow: none; border: 1px solid var(--border); } .btn-ghost:hover { background: var(--border); box-shadow: none; } .btn-danger { background: var(--danger); box-shadow: 0 6px 18px -4px rgba(239,68,68,0.5); } .icon-btn { position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--input-bg); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; text-decoration: none; transition: 0.2s var(--ease); flex-shrink: 0; } .icon-btn:hover { background: var(--border); color: var(--text); transform: translateY(-2px); } .icon-btn .icon { width: 21px; height: 21px; } /* اثر ripple نیتیو */ .ripple-ink { position: absolute; border-radius: 50%; transform: scale(0); background: var(--ripple); pointer-events: none; animation: ripple 0.6s var(--ease); } @keyframes ripple { to { transform: scale(2.6); opacity: 0; } } /* ---------- کارت ---------- */ .card { background: var(--surface); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } /* ---------- اینپوت ---------- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .input { width: 100%; padding: 14px 16px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 15px; outline: none; transition: 0.2s var(--ease); } .input:focus { border-color: var(--accent); background: var(--input-bg); box-shadow: 0 0 0 4px var(--accent-soft); } .input::placeholder { color: var(--text-muted); } /* ---------- سوئیچ ---------- */ .switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: 0.3s var(--ease); cursor: pointer; } .switch .slider::before { content: ""; position: absolute; height: 22px; width: 22px; right: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.3s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .switch input:checked + .slider { background: var(--accent); } .switch input:checked + .slider::before { transform: translateX(-20px); } /* ---------- اسپینر ---------- */ .spinner { width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- مودال ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-box { background: var(--surface-2); border: 1px solid var(--border); backdrop-filter: blur(22px); padding: 28px; border-radius: var(--radius-lg); width: min(360px, 90vw); text-align: center; box-shadow: var(--shadow); transform: scale(0.92) translateY(10px); transition: transform 0.3s var(--ease); } .modal-overlay.active .modal-box { transform: scale(1) translateY(0); } /* ---------- اسکرول‌بار ---------- */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ---------- toast ---------- */ .toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; } .toast { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; animation: toastIn 0.3s var(--ease); backdrop-filter: blur(12px); } .toast.ok { border-color: var(--accent); } .toast.err { border-color: var(--danger); } @keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .hidden { display: none !important; }