/* ============================================================== SA SILVER — فایل تم مرکزی هدف: همه‌ی رنگ‌ها از اینجا کنترل بشن تا بعداً به‌راحتی قابل تغییر باشن. کافیه در هر صفحه، بعد از فونت‌ها، این فایل رو include کنید: و کلاس‌های رنگی قدیمی (gold-text, card-gold, ...) رو با متغیرهای زیر جایگزین کنید. ============================================================== */ :root { /* ---- پالت نقره‌ای براق (تم پیش‌فرض / تیره) ---- */ --bg-page: #0a0a0c; --bg-surface: #131317; --bg-surface-2: #1a1a20; --bg-input: #0d0d10; --border-subtle: #2a2a30; --border-accent: #8a8f9a; /* به‌جای طلایی قبلی: نقره‌ای خنثی */ /* گرادینت "نقره براق" برای لوگو / برجسته‌سازی */ --accent-gradient: linear-gradient(180deg, #f4f6f9 0%, #b7bcc6 45%, #7d838f 100%); --accent-solid: #c7cbd4; --accent-solid-strong: #eef0f3; --accent-muted: #9aa0ab; --text-primary: #f1f2f4; --text-secondary: #b7bcc6; --text-muted: #7d818c; --success: #6abf6e; --success-bg: rgba(106, 191, 110, 0.1); --danger: #d97862; --danger-bg: rgba(217, 120, 98, 0.1); --warning: #ebd396; --warning-bg: rgba(235, 211, 150, 0.12); --info: #a8d8ff; --info-bg: rgba(42, 74, 110, 0.2); --shadow-frame: 0 30px 60px rgba(0,0,0,0.8), 0 0 0 2px var(--border-accent); --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --radius-pill: 30px; } /* ---- حالت روشن ---- */ [data-theme="light"] { --bg-page: #eef0f3; --bg-surface: #ffffff; --bg-surface-2: #f5f6f8; --bg-input: #ffffff; --border-subtle: #dcdfe4; --border-accent: #9aa0ab; --accent-gradient: linear-gradient(180deg, #6b7280 0%, #3f4550 100%); --accent-solid: #4b5160; --accent-solid-strong: #2b2f38; --accent-muted: #6b7280; --text-primary: #1c1e22; --text-secondary: #4b5160; --text-muted: #7d818c; --shadow-frame: 0 20px 40px rgba(20,20,30,0.12), 0 0 0 2px var(--border-accent); } /* ---- کلاس‌های کمکی عمومی (جایگزین رنگ‌های هاردکد قدیمی) ---- */ .gold-text, /* alias قدیمی - همون رنگ برجسته نقره‌ای */ .accent-text { color: var(--accent-solid-strong); } .muted-text { color: var(--text-muted); } .white-text { color: var(--text-primary); } .logo, .card-highlight .accent-icon { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .card, .app-frame, .login-box { background: var(--bg-surface); } .card-gold, .card-accent { border: 1px solid var(--border-accent); } .btn-primary { background: var(--accent-gradient); color: #0d0d10; } [data-theme="light"] .btn-primary { color: #ffffff; } .input-field, input, select, textarea { background: var(--bg-input); border: 1px solid var(--border-subtle); color: var(--text-primary); } .input-field:focus, input:focus, select:focus, textarea:focus { border-color: var(--border-accent); box-shadow: 0 0 10px rgba(150, 155, 165, 0.25); } .success-msg { color: var(--success); background: var(--success-bg); border-right: 3px solid var(--success); } .error-msg { color: var(--danger); background: var(--danger-bg); border-right: 3px solid var(--danger); } /* ---- دکمه تعویض تم (روز/شب) ---- */ .theme-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-accent); background: var(--bg-surface-2); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: 0.25s; } .theme-toggle:hover { transform: scale(1.08); } body { background: var(--bg-page); color: var(--text-primary); transition: background 0.25s, color 0.25s; } /* ============================================================== منوی همبرگری (کشویی) — مشترک بین همه صفحات ============================================================== */ .hamburger-btn { background: none; border: none; color: var(--text-primary); font-size: 20px; cursor: pointer; padding: 4px 6px; line-height: 1; } .nav-drawer { position: fixed; top: 0; right: -300px; width: 280px; max-width: 82vw; height: 100%; background: var(--bg-surface); z-index: 1000; transition: right 0.3s ease; border-left: 1px solid var(--border-accent); overflow-y: auto; box-shadow: -10px 0 40px rgba(0,0,0,0.5); } .nav-drawer.open { right: 0; } .nav-drawer-profile { padding: 24px 16px 16px; border-bottom: 1px solid var(--border-subtle); text-align: center; } .nav-drawer-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 24px; font-weight: bold; color: #0d0d10; } .nav-drawer-items { padding: 8px 0; } .sidebar-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-secondary); cursor: pointer; transition: 0.2s; border-right: 3px solid transparent; text-decoration: none; font-size: 13px; } .sidebar-item i { width: 20px; color: var(--accent-solid); text-align: center; } .sidebar-item:hover, .sidebar-item.active { background: var(--bg-surface-2); color: var(--text-primary); border-right-color: var(--border-accent); } .sidebar-item-danger { color: var(--danger); } .sidebar-item-danger i { color: var(--danger); } .nav-drawer-logout { border-top: 1px solid var(--border-subtle); margin-top: 8px; padding-top: 14px; } .nav-drawer-footer { text-align: center; color: var(--text-muted); font-size: 9px; padding: 16px; border-top: 1px solid var(--border-subtle); margin-top: 8px; } .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999; display: none; } .sidebar-overlay.show { display: block; } /* زنگ اعلان‌ها */ .notif-btn { position: relative; cursor: pointer; color: var(--text-primary); font-size: 18px; } .notif-badge { position: absolute; top: -6px; left: -8px; background: var(--danger); color: #fff; font-size: 9px; font-weight: bold; border-radius: 10px; padding: 1px 5px; min-width: 15px; text-align: center; }