feat(rewards): add toast and captcha flow
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user