692 lines
11 KiB
CSS
692 lines
11 KiB
CSS
:root {
|
|
--page-bg: #f6f7f7;
|
|
--card-bg: rgba(255, 255, 255, 0.96);
|
|
--text: #25282e;
|
|
--muted: #8f9196;
|
|
--soft: #f1f3f3;
|
|
--line: #eef0f2;
|
|
--mint: #43e7d8;
|
|
--mint-dark: #16b9ac;
|
|
--gold: #e3b55b;
|
|
--shadow: 0 8px 22px rgba(36, 46, 60, 0.055);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
margin: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-text-size-adjust: 100%;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
background: #111;
|
|
color: var(--text);
|
|
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
width: 100%;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: var(--text);
|
|
}
|
|
|
|
.wallet-page {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 430px;
|
|
min-height: 100vh;
|
|
overflow: hidden auto;
|
|
background: var(--page-bg);
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
inset: 0 0 auto;
|
|
height: 215px;
|
|
background:
|
|
radial-gradient(circle at 72% 4%, rgba(209, 255, 248, 0.98) 0, rgba(209, 255, 248, 0.88) 23%, rgba(209, 255, 248, 0) 48%),
|
|
radial-gradient(circle at 14% 20%, rgba(185, 250, 244, 0.78) 0, rgba(185, 250, 244, 0) 35%),
|
|
linear-gradient(151deg, #ccf7ef 0%, #ebfffa 58%, rgba(242, 255, 252, 0.7) 100%);
|
|
clip-path: polygon(0 0, 100% 0, 100% 76%, 70% 47%, 40% 58%, 0 78%);
|
|
}
|
|
|
|
.title-bar,
|
|
.content,
|
|
.home-indicator,
|
|
.toast {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.title-bar {
|
|
display: grid;
|
|
grid-template-columns: 52px 1fr 52px;
|
|
align-items: center;
|
|
z-index: 12;
|
|
height: 60px;
|
|
padding: 0 14px;
|
|
direction: ltr;
|
|
}
|
|
|
|
.title-bar h1 {
|
|
margin: 0;
|
|
color: #24282e;
|
|
font-size: 21px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.back-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.back-button svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.back-button path {
|
|
fill: none;
|
|
stroke: #24282e;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 3;
|
|
}
|
|
|
|
.language-switcher {
|
|
position: relative;
|
|
justify-self: end;
|
|
}
|
|
|
|
.language-button {
|
|
justify-self: end;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 42px;
|
|
height: 30px;
|
|
border: 1px solid rgba(35, 40, 46, 0.12);
|
|
border-radius: 15px;
|
|
background: rgba(255, 255, 255, 0.68);
|
|
color: #25282e;
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
box-shadow: 0 4px 12px rgba(43, 118, 107, 0.08);
|
|
}
|
|
|
|
.language-menu {
|
|
position: absolute;
|
|
top: calc(100% + 7px);
|
|
right: 0;
|
|
z-index: 30;
|
|
display: grid;
|
|
gap: 2px;
|
|
min-width: 58px;
|
|
padding: 5px;
|
|
border: 1px solid rgba(35, 40, 46, 0.1);
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 10px 26px rgba(36, 46, 60, 0.14);
|
|
}
|
|
|
|
.language-menu button {
|
|
min-height: 28px;
|
|
border-radius: 6px;
|
|
color: #25282e;
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.language-menu button.is-active {
|
|
background: #e6fbf8;
|
|
color: #0e8f82;
|
|
}
|
|
|
|
.language-menu[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
padding: 8px 14px 92px;
|
|
}
|
|
|
|
.balance-card,
|
|
.salary-selector-card,
|
|
.mode-card,
|
|
.card-section,
|
|
.bind-panel {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
background: var(--card-bg);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.balance-card {
|
|
padding: 20px 24px 19px;
|
|
}
|
|
|
|
.balance-label {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.balance-value {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
color: #23272d;
|
|
font-size: 34px;
|
|
font-weight: 950;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.balance-currency {
|
|
flex: 0 0 auto;
|
|
margin-right: 6px;
|
|
color: var(--gold);
|
|
font-size: 28px;
|
|
font-weight: 950;
|
|
line-height: 1;
|
|
}
|
|
|
|
.salary-selector-card {
|
|
padding: 10px;
|
|
}
|
|
|
|
.salary-selector-tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
.salary-selector-tab {
|
|
min-height: 40px;
|
|
padding: 0 8px;
|
|
border-radius: 8px;
|
|
background: #eef1f1;
|
|
color: #777a80;
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.salary-selector-tab.active {
|
|
background: #e7fbf8;
|
|
color: #0e8f82;
|
|
box-shadow: inset 0 0 0 1px rgba(22, 185, 172, 0.22);
|
|
}
|
|
|
|
.mode-card {
|
|
padding: 16px;
|
|
}
|
|
|
|
.mode-tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 4px;
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
background: #eef1f1;
|
|
}
|
|
|
|
.mode-tab {
|
|
min-height: 40px;
|
|
border-radius: 7px;
|
|
color: #777a80;
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.mode-tab.active {
|
|
background: #fff;
|
|
color: var(--text);
|
|
box-shadow: 0 5px 14px rgba(38, 51, 62, 0.08);
|
|
}
|
|
|
|
.mode-panel {
|
|
display: none;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.mode-panel.active {
|
|
display: block;
|
|
}
|
|
|
|
.field {
|
|
display: block;
|
|
}
|
|
|
|
.field > span {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #4a4d53;
|
|
font-size: 14px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.field-control,
|
|
.field input,
|
|
.field select {
|
|
min-height: 48px;
|
|
border-radius: 8px;
|
|
background: #f4f6f6;
|
|
}
|
|
|
|
.field input,
|
|
.field select {
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.amount-control {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.amount-control span {
|
|
flex: 0 0 auto;
|
|
margin-right: 9px;
|
|
color: var(--gold);
|
|
font-size: 21px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.amount-control input {
|
|
min-height: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 23px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.hint-row,
|
|
.exchange-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.text-action {
|
|
color: var(--mint-dark);
|
|
font-weight: 950;
|
|
}
|
|
|
|
.exchange-preview strong {
|
|
color: #24282e;
|
|
}
|
|
|
|
.transfer-search {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.transfer-search input {
|
|
min-height: 48px;
|
|
padding: 0 14px;
|
|
border-radius: 8px;
|
|
background: #f4f6f6;
|
|
}
|
|
|
|
.search-payee-button {
|
|
min-width: 82px;
|
|
min-height: 48px;
|
|
padding: 0 14px;
|
|
border-radius: 8px;
|
|
background: var(--mint-dark);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.search-payee-button:disabled {
|
|
opacity: 0.58;
|
|
}
|
|
|
|
.payee-result {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-height: 68px;
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
background: #f9fbfb;
|
|
border: 1px solid #edf0f0;
|
|
}
|
|
|
|
.payee-avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
flex: 0 0 44px;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
background: #ddfbf8;
|
|
color: #0d8077;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.payee-avatar img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.payee-copy {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.payee-name {
|
|
overflow: hidden;
|
|
color: #25282e;
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.payee-id {
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.transfer-amount-field {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.card-section,
|
|
.bind-panel {
|
|
padding: 18px 16px;
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.section-title {
|
|
color: #24282e;
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.section-subtitle {
|
|
margin-top: 4px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.empty-address-state {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
min-height: 76px;
|
|
margin-top: 16px;
|
|
padding: 13px;
|
|
border: 1px dashed #d9dddd;
|
|
border-radius: 8px;
|
|
background: #fbfcfc;
|
|
}
|
|
|
|
.empty-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
flex: 0 0 42px;
|
|
border-radius: 50%;
|
|
background: #edf8f7;
|
|
}
|
|
|
|
.empty-icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.empty-icon path {
|
|
fill: none;
|
|
stroke: var(--mint-dark);
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
.empty-title {
|
|
color: #292d33;
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.empty-copy {
|
|
margin-top: 3px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.bound-address-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
min-height: 88px;
|
|
margin-top: 16px;
|
|
padding: 14px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #1e252d 0%, #354858 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.network-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 56px;
|
|
height: 32px;
|
|
flex: 0 0 56px;
|
|
border-radius: 7px;
|
|
background: linear-gradient(135deg, #ffe58b 0%, #c8942e 100%);
|
|
color: #1f252c;
|
|
font-size: 12px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.bound-copy {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.bound-network {
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.bound-address {
|
|
margin-top: 5px;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
font-size: 14px;
|
|
font-weight: 850;
|
|
letter-spacing: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.bound-meta {
|
|
margin-top: 4px;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.bind-panel {
|
|
display: block;
|
|
}
|
|
|
|
.address-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.address-form input {
|
|
min-height: 48px;
|
|
padding: 0 14px;
|
|
border-radius: 8px;
|
|
background: #f4f6f6;
|
|
}
|
|
|
|
.primary-button,
|
|
.submit-button {
|
|
min-height: 48px;
|
|
border-radius: 24px;
|
|
font-size: 16px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.primary-button,
|
|
.submit-button {
|
|
background: linear-gradient(135deg, #67f4e8 0%, #27d3c4 100%);
|
|
color: #11302d;
|
|
}
|
|
|
|
.primary-button {
|
|
width: 100%;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.primary-button:disabled {
|
|
opacity: 0.58;
|
|
}
|
|
|
|
.submit-button {
|
|
width: 100%;
|
|
box-shadow: 0 8px 20px rgba(29, 206, 193, 0.22);
|
|
}
|
|
|
|
.submit-button:disabled {
|
|
background: #d7dada;
|
|
color: #8b8e94;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 34px;
|
|
transform: translateX(-50%);
|
|
padding: 10px 14px;
|
|
border-radius: 999px;
|
|
background: rgba(24, 29, 34, 0.92);
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.home-indicator {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 8px;
|
|
width: 154px;
|
|
height: 5px;
|
|
border-radius: 999px;
|
|
background: #050506;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
[dir="rtl"] .content {
|
|
direction: rtl;
|
|
}
|
|
|
|
[dir="rtl"] .balance-currency,
|
|
[dir="rtl"] .amount-control span {
|
|
margin-right: 0;
|
|
margin-left: 9px;
|
|
}
|
|
|
|
[dir="rtl"] .toast,
|
|
[dir="rtl"] .home-indicator {
|
|
direction: ltr;
|
|
}
|
|
|
|
@media (max-width: 360px) {
|
|
.content {
|
|
padding-right: 12px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.balance-card {
|
|
padding-right: 18px;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.balance-value {
|
|
font-size: 29px;
|
|
}
|
|
|
|
.title-bar h1 {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.mode-tab {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.transfer-search {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|