Spaces:
Running
Running
| /* المتغيرات العامة */ | |
| :root { | |
| --primary-color: #2563eb; | |
| --secondary-color: #1e40af; | |
| --success-color: #059669; | |
| --warning-color: #d97706; | |
| --error-color: #dc2626; | |
| --text-primary: #1f2937; | |
| --text-secondary: #6b7280; | |
| --background: #f8fafc; | |
| --surface: #ffffff; | |
| --border: #e5e7eb; | |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| --border-radius: 12px; | |
| --transition: all 0.3s ease; | |
| } | |
| /* إعادة تعيين الأساسيات */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: var(--background); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* الشاشات */ | |
| .screen { | |
| display: none; | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| .screen.active { | |
| display: block; | |
| } | |
| /* شاشة التحميل */ | |
| .loading-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 9999; | |
| color: white; | |
| } | |
| .loading-content { | |
| text-align: center; | |
| animation: fadeInUp 0.8s ease; | |
| } | |
| .loading-logo { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| animation: pulse 2s infinite; | |
| } | |
| .loading-spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 3px solid rgba(255, 255, 255, 0.3); | |
| border-top: 3px solid white; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 1rem auto; | |
| } | |
| /* شاشة تسجيل الدخول */ | |
| .login-container { | |
| max-width: 400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .login-header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .app-logo { | |
| font-size: 3rem; | |
| color: var(--primary-color); | |
| margin-bottom: 1rem; | |
| } | |
| .login-header h1 { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| } | |
| .login-header p { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| /* النماذج */ | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| .input-group { | |
| position: relative; | |
| display: flex; | |
| } | |
| .input-prefix { | |
| background: var(--border); | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--border); | |
| border-left: none; | |
| border-radius: var(--border-radius) 0 0 var(--border-radius); | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| input { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--border); | |
| border-radius: var(--border-radius); | |
| font-family: inherit; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .input-group input { | |
| border-radius: 0 var(--border-radius) var(--border-radius) 0; | |
| border-right: none; | |
| } | |
| input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); | |
| } | |
| /* الأزرار */ | |
| .btn-primary, .btn-secondary, .btn-small, .btn-link { | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: var(--border-radius); | |
| font-family: inherit; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| text-decoration: none; | |
| } | |
| .btn-primary { | |
| background: var(--primary-color); | |
| color: white; | |
| width: 100%; | |
| margin-bottom: 1rem; | |
| } | |
| .btn-primary:hover { | |
| background: var(--secondary-color); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| .btn-secondary { | |
| background: var(--surface); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border); | |
| width: 100%; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--background); | |
| } | |
| .btn-small { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.875rem; | |
| background: var(--surface); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-link { | |
| background: none; | |
| color: var(--primary-color); | |
| padding: 0; | |
| font-size: 0.875rem; | |
| } | |
| /* تسجيل الدخول البديل */ | |
| .alternative-login { | |
| text-align: center; | |
| margin: 1rem 0; | |
| } | |
| .alternative-login p { | |
| color: var(--text-secondary); | |
| margin-bottom: 1rem; | |
| position: relative; | |
| } | |
| .alternative-login p::before, | |
| .alternative-login p::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| width: 40%; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| .alternative-login p::before { | |
| right: 60%; | |
| } | |
| .alternative-login p::after { | |
| left: 60%; | |
| } | |
| .register-link { | |
| text-align: center; | |
| margin-top: 2rem; | |
| } | |
| .register-link a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| } | |
| /* المحافظ المدعومة */ | |
| .supported-wallets { | |
| margin-top: 2rem; | |
| text-align: center; | |
| } | |
| .supported-wallets h3 { | |
| font-size: 1rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-secondary); | |
| } | |
| .wallet-logos { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1rem; | |
| } | |
| .wallet-logo { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--surface); | |
| transition: var(--transition); | |
| } | |
| .wallet-logo:hover { | |
| transform: scale(1.05); | |
| box-shadow: var(--shadow); | |
| } | |
| .wallet-logo img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| /* الشاشة الرئيسية */ | |
| .main-header { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| padding: 2rem 1rem; | |
| border-radius: 0 0 2rem 2rem; | |
| } | |
| .header-top { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| } | |
| .user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .user-avatar { | |
| width: 50px; | |
| height: 50px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| } | |
| .user-details h3 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .user-details p { | |
| font-size: 0.875rem; | |
| opacity: 0.8; | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .icon-btn { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| border-radius: 50%; | |
| color: white; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| transition: var(--transition); | |
| } | |
| .icon-btn:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .badge { | |
| position: absolute; | |
| top: -5px; | |
| left: -5px; | |
| background: var(--error-color); | |
| color: white; | |
| font-size: 0.75rem; | |
| padding: 0.125rem 0.375rem; | |
| border-radius: 10px; | |
| min-width: 18px; | |
| text-align: center; | |
| } | |
| /* الرصيد الإجمالي */ | |
| .total-balance { | |
| text-align: center; | |
| } | |
| .total-balance h2 { | |
| font-size: 1rem; | |
| opacity: 0.9; | |
| margin-bottom: 0.5rem; | |
| } | |
| .balance-amount { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| } | |
| .balance-actions { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| } | |
| .balance-actions .btn-small { | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| /* المحتوى الرئيسي */ | |
| .main-content { | |
| padding: 2rem 1rem 6rem; | |
| } | |
| .main-content section { | |
| margin-bottom: 2rem; | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .section-header h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| /* الإجراءات السريعة */ | |
| .actions-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| } | |
| .action-btn { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| } | |
| .action-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| border-color: var(--primary-color); | |
| } | |
| .action-btn i { | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| .action-btn span { | |
| font-weight: 500; | |
| } | |
| /* الرسوم المتحركة */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| } | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* قائمة المحافظ */ | |
| .wallets-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .wallet-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .wallet-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| border-color: var(--primary-color); | |
| } | |
| .wallet-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .wallet-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .wallet-icon img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .wallet-details h4 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| } | |
| .wallet-details p { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .wallet-balance { | |
| text-align: left; | |
| } | |
| .wallet-balance .amount { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--success-color); | |
| } | |
| .wallet-balance .currency { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| /* قائمة المعاملات */ | |
| .transactions-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .transaction-item { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--border-radius); | |
| padding: 1rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .transaction-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .transaction-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1rem; | |
| } | |
| .transaction-icon.send { | |
| background: rgba(220, 38, 38, 0.1); | |
| color: var(--error-color); | |
| } | |
| .transaction-icon.receive { | |
| background: rgba(5, 150, 105, 0.1); | |
| color: var(--success-color); | |
| } | |
| .transaction-icon.bill { | |
| background: rgba(217, 119, 6, 0.1); | |
| color: var(--warning-color); | |
| } | |
| .transaction-details h5 { | |
| font-size: 1rem; | |
| font-weight: 500; | |
| margin-bottom: 0.25rem; | |
| } | |
| .transaction-details p { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .transaction-amount { | |
| text-align: left; | |
| } | |
| .transaction-amount .amount { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| .transaction-amount.positive .amount { | |
| color: var(--success-color); | |
| } | |
| .transaction-amount.negative .amount { | |
| color: var(--error-color); | |
| } | |
| .transaction-amount .time { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| /* شريط التنقل السفلي */ | |
| .bottom-nav { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: var(--surface); | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-around; | |
| padding: 0.75rem 0; | |
| z-index: 100; | |
| } | |
| .nav-item { | |
| background: none; | |
| border: none; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.25rem; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| transition: var(--transition); | |
| padding: 0.5rem; | |
| border-radius: var(--border-radius); | |
| } | |
| .nav-item.active { | |
| color: var(--primary-color); | |
| } | |
| .nav-item i { | |
| font-size: 1.25rem; | |
| } | |
| .nav-item span { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| /* رؤوس الشاشات */ | |
| .screen-header { | |
| background: var(--surface); | |
| border-bottom: 1px solid var(--border); | |
| padding: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| .back-btn { | |
| background: none; | |
| border: none; | |
| font-size: 1.25rem; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| border-radius: 50%; | |
| transition: var(--transition); | |
| } | |
| .back-btn:hover { | |
| background: var(--background); | |
| } | |
| .screen-header h2 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| /* النوافذ المنبثقة */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| display: none; | |
| z-index: 1000; | |
| backdrop-filter: blur(3px); | |
| } | |
| .modal-overlay.active { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* شاشة التحويل */ | |
| .transfer-content { | |
| padding: 2rem 1rem 6rem; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .transfer-steps { | |
| margin-bottom: 2rem; | |
| } | |
| .step-indicator { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| .step-indicator .step { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--border); | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| } | |
| .step-indicator .step.active { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .step-indicator .step.completed { | |
| background: var(--success-color); | |
| color: white; | |
| } | |
| .step-line { | |
| flex: 1; | |
| height: 2px; | |
| background: var(--border); | |
| margin: 0 1rem; | |
| } | |
| .step-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .transfer-step-content { | |
| display: none; | |
| animation: fadeInUp 0.5s ease; | |
| } | |
| .transfer-step-content.active { | |
| display: block; | |
| } | |
| .transfer-step-content h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| /* اختيار المحفظة */ | |
| .wallet-selection { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .wallet-option { | |
| background: var(--surface); | |
| border: 2px solid var(--border); | |
| border-radius: var(--border-radius); | |
| padding: 1rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .wallet-option:hover { | |
| border-color: var(--primary-color); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| .wallet-option.selected { | |
| border-color: var(--primary-color); | |
| background: rgba(37, 99, 235, 0.05); | |
| } | |
| .wallet-option-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .wallet-option-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| } | |
| .wallet-option-icon img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .wallet-option-details h4 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| } | |
| .wallet-option-details p { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .wallet-option-balance { | |
| text-align: left; | |
| } | |
| .wallet-option-balance .amount { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--success-color); | |
| } | |
| /* عناصر النموذج */ | |
| .form-control { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--border); | |
| border-radius: var(--border-radius); | |
| font-family: inherit; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); | |
| } | |
| /* اقتراحات المبلغ */ | |
| .amount-suggestions { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .amount-btn { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 0.5rem 1rem; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .amount-btn:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| /* ملخص التحويل */ | |
| .transfer-summary { | |
| background: var(--background); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .summary-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.75rem 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .summary-item:last-child { | |
| border-bottom: none; | |
| } | |
| .summary-item.total { | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| color: var(--primary-color); | |
| border-top: 2px solid var(--border); | |
| margin-top: 0.5rem; | |
| padding-top: 1rem; | |
| } | |
| /* أزرار التنقل */ | |
| .transfer-navigation { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .transfer-navigation button { | |
| flex: 1; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| /* نظام الإشعارات والتنبيهات */ | |
| .toast-container { | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| z-index: 9999; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| max-width: 400px; | |
| width: 100%; | |
| } | |
| .toast { | |
| background: var(--surface); | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 1rem; | |
| transform: translateX(-100%); | |
| transition: var(--transition); | |
| border-right: 4px solid var(--primary-color); | |
| } | |
| .toast.toast-show { | |
| transform: translateX(0); | |
| } | |
| .toast.toast-hide { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| .toast.toast-success { | |
| border-right-color: var(--success-color); | |
| } | |
| .toast.toast-error { | |
| border-right-color: var(--error-color); | |
| } | |
| .toast.toast-warning { | |
| border-right-color: var(--warning-color); | |
| } | |
| .toast-icon { | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| .toast.toast-success .toast-icon { | |
| color: var(--success-color); | |
| } | |
| .toast.toast-error .toast-icon { | |
| color: var(--error-color); | |
| } | |
| .toast.toast-warning .toast-icon { | |
| color: var(--warning-color); | |
| } | |
| .toast-content { | |
| flex: 1; | |
| } | |
| .toast-message { | |
| font-weight: 500; | |
| line-height: 1.4; | |
| } | |
| .toast-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| padding: 0.25rem; | |
| border-radius: 50%; | |
| transition: var(--transition); | |
| } | |
| .toast-close:hover { | |
| background: var(--background); | |
| color: var(--text-primary); | |
| } | |
| /* المودال */ | |
| .modal-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 9998; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .modal-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(3px); | |
| -webkit-backdrop-filter: blur(3px); | |
| } | |
| .modal-content { | |
| background: var(--surface); | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow-lg); | |
| max-width: 500px; | |
| width: 100%; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| position: relative; | |
| z-index: 1; | |
| animation: modalSlideIn 0.3s ease; | |
| } | |
| @keyframes modalSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.9) translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1) translateY(0); | |
| } | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .modal-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| font-size: 1.25rem; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| border-radius: 50%; | |
| transition: var(--transition); | |
| } | |
| .modal-close:hover { | |
| background: var(--background); | |
| color: var(--text-primary); | |
| } | |
| .modal-body { | |
| padding: 1.5rem; | |
| } | |
| .modal-footer { | |
| padding: 1rem 1.5rem; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: flex-end; | |
| } | |
| .modal-footer .btn { | |
| min-width: 100px; | |
| } | |
| /* مودال التحميل */ | |
| .loading-modal .modal-content { | |
| max-width: 300px; | |
| text-align: center; | |
| } | |
| .loading-content { | |
| padding: 2rem; | |
| } | |
| .loading-content .loading-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 4px solid var(--border); | |
| border-top: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| .loading-content p { | |
| color: var(--text-secondary); | |
| margin: 0; | |
| } | |
| /* قائمة الإشعارات */ | |
| .notifications-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .notifications-list { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .notification-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| padding: 1rem; | |
| border-bottom: 1px solid var(--border); | |
| transition: var(--transition); | |
| } | |
| .notification-item:hover { | |
| background: var(--background); | |
| } | |
| .notification-item.unread { | |
| background: rgba(37, 99, 235, 0.05); | |
| border-right: 3px solid var(--primary-color); | |
| } | |
| .notification-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1rem; | |
| flex-shrink: 0; | |
| } | |
| .notification-icon.transaction { | |
| background: rgba(37, 99, 235, 0.1); | |
| color: var(--primary-color); | |
| } | |
| .notification-icon.security { | |
| background: rgba(220, 38, 38, 0.1); | |
| color: var(--error-color); | |
| } | |
| .notification-icon.system { | |
| background: rgba(107, 114, 128, 0.1); | |
| color: var(--text-secondary); | |
| } | |
| .notification-content { | |
| flex: 1; | |
| } | |
| .notification-content h4 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin: 0 0 0.25rem 0; | |
| } | |
| .notification-content p { | |
| color: var(--text-secondary); | |
| margin: 0 0 0.5rem 0; | |
| line-height: 1.4; | |
| } | |
| .notification-time { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .notification-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| flex-shrink: 0; | |
| } | |
| .notification-actions button { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| border-radius: 50%; | |
| transition: var(--transition); | |
| } | |
| .notification-actions button:hover { | |
| background: var(--background); | |
| color: var(--text-primary); | |
| } | |
| .no-notifications { | |
| text-align: center; | |
| color: var(--text-secondary); | |
| padding: 2rem; | |
| font-style: italic; | |
| } | |
| /* الاستجابة للشاشات الصغيرة */ | |
| @media (max-width: 768px) { | |
| .login-container { | |
| padding: 1rem; | |
| } | |
| .wallet-logos { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .actions-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .main-header { | |
| padding: 1.5rem 1rem; | |
| } | |
| .balance-amount { | |
| font-size: 2rem; | |
| } | |
| .wallet-card { | |
| padding: 1rem; | |
| } | |
| .transaction-item { | |
| padding: 0.75rem; | |
| } | |
| .transfer-content { | |
| padding: 1rem 1rem 6rem; | |
| } | |
| .step-labels { | |
| font-size: 0.75rem; | |
| } | |
| .wallet-option { | |
| padding: 0.75rem; | |
| } | |
| .amount-suggestions { | |
| justify-content: center; | |
| } | |
| .transfer-navigation { | |
| flex-direction: column; | |
| } | |
| } | |