| |
| :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 !important; |
| } |
|
|
| |
| .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; |
| } |
| } |
|
|
