|
|
|
|
|
: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; |
|
|
} |
|
|
} |
|
|
|
