feat(rewards): add toast and captcha flow

This commit is contained in:
2026-10-05 03:51:18 +08:00
parent 356f7fe5bd
commit 979639342a
6 changed files with 192 additions and 32 deletions
+66 -11
View File
@@ -42,14 +42,25 @@
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.aksrt-reward__amount:hover {
border-color: var(--focus-color, var(--color-primary, #f04494));
background: var(--color-primary-soft, rgba(240, 68, 148, 0.1));
color: var(--focus-color, var(--color-primary, #f04494));
}
.aksrt-reward__amount:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(240, 68, 148, 0.2));
}
.aksrt-reward__amount:hover,
.aksrt-reward__amount.is-active {
border-color: var(--focus-color, var(--color-primary, #f04494));
background: var(--focus-color, var(--color-primary, #f04494));
color: #fff;
box-shadow: 0 3px 10px var(--color-primary-soft, rgba(240, 68, 148, 0.2));
}
.aksrt-reward__currency {
@@ -71,13 +82,43 @@
font-size: 13px;
}
.aksrt-reward__input {
.aksrt-reward__custom-label {
flex: 0 0 auto;
}
.aksrt-reward__input-wrap {
display: flex;
width: min(180px, 58%);
min-height: 40px;
align-items: center;
padding: 0 12px;
border: 1px solid var(--muted-border-color, var(--color-line-stronger, rgba(50, 50, 50, 0.12)));
border-radius: var(--main-radius, 8px);
background: var(--main-bg-color, #fff);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.aksrt-reward__input-wrap:focus-within {
border-color: var(--focus-color, var(--color-primary, #f04494));
box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(240, 68, 148, 0.1));
}
.aksrt-reward__input-currency {
flex: 0 0 auto;
margin-right: 6px;
color: var(--muted-color, var(--color-ink-3, #777));
font-size: 14px;
font-weight: 600;
}
.aksrt-reward__input {
width: 100%;
min-width: 0;
min-height: 38px;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--main-color, var(--color-ink, #333));
text-align: right;
-moz-appearance: textfield;
@@ -89,9 +130,15 @@
-webkit-appearance: none;
}
.aksrt-reward__input:focus {
border-color: var(--focus-color, var(--color-primary, #f04494));
outline: 0;
.aksrt-reward__input::placeholder {
color: var(--muted-color, var(--color-ink-4, #999));
opacity: 1;
}
.aksrt-reward__input:disabled,
.aksrt-reward__amount:disabled {
cursor: wait;
opacity: 0.6;
}
.aksrt-reward__submit {
@@ -104,11 +151,19 @@
}
.aksrt-reward__message {
min-height: 20px;
margin-top: 8px;
color: var(--focus-color, var(--color-primary, #f04494));
font-size: 12px;
text-align: center;
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.aksrt-reward__captcha {
margin: 0 0 14px;
}
.aksrt-modal-runtime--bottom.aksrt-reward-modal .aksrt-modal-runtime__dialog {