/* ========================================================================= DESIGN SYSTEM — زبانِ طراحیِ مشترکِ کلِ سایت ------------------------------------------------------------------------- هدف: یه منبعِ واحد برای فونت، رنگ‌ها، سایه‌ها، گردی‌ها — تا همه‌ی صفحات (chat.php، event_admin.php، index.php، صفحه‌ی بازپخش و...) به‌جای رنگ/فونتِ پراکنده‌ی خودشون، از همینا استفاده کنن. این فایل هیچ چیزِ موجودی رو خراب نمی‌کنه — فقط اضافه می‌شه؛ یکی‌یکی صفحات رو باهاش هماهنگ می‌کنیم. نحوه‌ی استفاده: تو هر صفحه، این خط رو (ترجیحاً قبلِ بقیه‌ی CSSهای خودِ صفحه، تا صفحه بتونه در صورتِ نیاز چیزی رو override کنه) اضافه کن: ========================================================================= */ @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css'); :root { /* ---------- رنگِ اصلیِ برند ---------- */ --brand-primary: #2F6FED; --brand-primary-dark: #1E56C9; --brand-primary-light: #EEF3FF; --brand-success: #0F6E56; --brand-success-light: #E6F7F1; --brand-danger: #C81E3A; --brand-danger-light: #FDEAEA; --brand-warning: #E08E00; --brand-warning-light: #FFF6E0; --brand-info: #8B5CF6; --brand-info-light: #F3E8FF; /* ---------- خاکستری‌های نوترال (پس‌زمینه، متن، حاشیه) ---------- */ --gray-50: #FAFBFC; --gray-100: #F5F6F8; --gray-200: #EEF0F3; --gray-300: #E1E4E9; --gray-400: #C5CAD3; --gray-500: #8890A0; --gray-600: #5B6472; --gray-700: #3A4150; --gray-800: #232936; --gray-900: #14181F; /* ---------- سایه‌ها (سطح‌بندیِ ارتفاع) ---------- */ --shadow-sm: 0 1px 3px rgba(20, 24, 31, .07); --shadow-md: 0 4px 16px rgba(20, 24, 31, .08); --shadow-lg: 0 12px 40px rgba(20, 24, 31, .14); --shadow-xl: 0 24px 70px rgba(20, 24, 31, .22); /* ---------- گردیِ گوشه‌ها ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; /* ---------- فاصله‌گذاریِ استاندارد ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --font-main: 'Vazirmatn', tahoma, sans-serif; } html, body { font-family: var(--font-main) !important; } /* یه ترنزیشنِ نرمِ پیش‌فرض برای المان‌های تعاملی — همه‌جای سایت یکدست بشه */ button, a, input, select, textarea { transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; } /* ========================================================================= کلاس‌های پایه‌ای — استفاده‌ی اختیاریه؛ صفحاتِ قدیمی مجبور نیستن همین الان عوض بشن، ولی هر چیزِ جدیدی که از این به بعد می‌سازیم از همینا استفاده می‌کنه، و به‌مرور صفحاتِ قدیمی رو هم بهشون منتقل می‌کنیم ========================================================================= */ .ds-btn{ font-family: var(--font-main); border: 0; border-radius: var(--radius-sm); padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .ds-btn:active{ transform: translateY(1px); } .ds-btn:disabled{ opacity: .55; cursor: not-allowed; } .ds-btn-primary{ background: var(--brand-primary); color: #fff; } .ds-btn-primary:hover:not(:disabled){ background: var(--brand-primary-dark); } .ds-btn-secondary{ background: var(--gray-100); color: var(--gray-700); } .ds-btn-secondary:hover:not(:disabled){ background: var(--gray-200); } .ds-btn-danger{ background: var(--brand-danger-light); color: var(--brand-danger); } .ds-btn-danger:hover:not(:disabled){ background: #FBDADA; } .ds-btn-success{ background: var(--brand-success); color: #fff; } .ds-btn-success:hover:not(:disabled){ background: #0B5644; } .ds-btn-ghost{ background: none; color: var(--gray-600); } .ds-btn-ghost:hover:not(:disabled){ background: var(--gray-100); } /* بج‌های وضعیت — جایگزینِ رنگ‌های دستیِ پراکنده */ .ds-badge{ display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; white-space: nowrap; } .ds-badge-primary{ background: var(--brand-primary-light); color: var(--brand-primary); } .ds-badge-success{ background: var(--brand-success-light); color: var(--brand-success); } .ds-badge-danger{ background: var(--brand-danger-light); color: var(--brand-danger); } .ds-badge-warning{ background: var(--brand-warning-light); color: var(--brand-warning); } .ds-badge-info{ background: var(--brand-info-light); color: var(--brand-info); } .ds-badge-neutral{ background: var(--gray-100); color: var(--gray-600); } /* کارت — سطحِ پایه‌ی همه‌ی جعبه‌ها/پنل‌ها */ .ds-card{ background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } /* ---------- اسپینرِ لودینگ ---------- */ .ds-spinner{ display: inline-block; width: 16px; height: 16px; border: 2px solid var(--gray-300); border-top-color: var(--brand-primary); border-radius: 50%; animation: dsSpin .7s linear infinite; flex-shrink: 0; } @keyframes dsSpin{ to{ transform: rotate(360deg); } } .ds-loading{ display: flex; align-items: center; justify-content: center; gap: 8px; padding: 28px 16px; color: var(--gray-500); font-size: 13px; } /* ---------- حالتِ خالی — یه آیکنِ کم‌رنگ + متن، به‌جای فقط متنِ ساده ---------- */ .ds-empty-state{ text-align: center; padding: 34px 16px; color: var(--gray-500); } .ds-empty-state .ds-empty-icon{ font-size: 34px; color: var(--gray-300); display: block; margin-bottom: 8px; } .ds-empty-state .ds-empty-text{ font-size: 13px; } /* ---------- فِیدِ نرمِ محتوای داینامیک (لیست‌ها بعدِ لود) ---------- */ @keyframes dsFadeIn{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: translateY(0); } } .ds-fade-in{ animation: dsFadeIn .2s ease; } /* ---------- دیالوگِ سفارشی (جایگزینِ confirm/alert خامِ مرورگر) ---------- */ .ds-dialog-overlay{ display: none; position: fixed; inset: 0; background: rgba(20,24,31,.5); z-index: 9999; align-items: center; justify-content: center; padding: 20px; } .ds-dialog-overlay.show{ display: flex; } .ds-dialog-box{ background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); max-width: 360px; width: 100%; padding: var(--space-5); animation: dsDialogIn .15s ease; } @keyframes dsDialogIn{ from{ opacity: 0; transform: translateY(6px) scale(.98); } to{ opacity: 1; transform: translateY(0) scale(1); } } .ds-dialog-message{ font-size: 14px; color: var(--gray-800); line-height: 1.8; margin-bottom: var(--space-4); } .ds-dialog-input{ width: 100%; padding: 9px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-family: var(--font-main); font-size: 14px; box-sizing: border-box; } .ds-dialog-input:focus{ outline: none; border-color: var(--brand-primary); } .ds-dialog-actions{ display: flex; gap: var(--space-2); justify-content: flex-end; }