Better transaction pending state UI
This commit is contained in:
sairaj mote
parent
fb8184b41d
commit
8df66c737d
29
css/main.css
29
css/main.css
@ -969,6 +969,35 @@ aside h4 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.transaction__phase {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.transaction__phase:not(:last-of-type) {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.transaction__phase:not(:last-of-type)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
left: 0.3rem;
|
||||
border-right: dashed 0.1rem rgba(var(--text-color), 0.5);
|
||||
top: calc(100% + 0.4rem);
|
||||
}
|
||||
.transaction__phase .icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
.transaction__phase sm-spinner {
|
||||
--size: 1rem;
|
||||
}
|
||||
.transaction__phase .confirmed {
|
||||
fill: var(--green);
|
||||
}
|
||||
|
||||
.user-action-result__icon {
|
||||
justify-self: center;
|
||||
height: 4rem;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
213
css/main.scss
213
css/main.scss
@ -38,10 +38,12 @@ body[data-theme="dark"] {
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: rgb(255, 213, 5);
|
||||
|
||||
::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@ -52,6 +54,7 @@ h6 {
|
||||
font-weight: 700;
|
||||
// font-family: "Rubik", sans-serif;
|
||||
}
|
||||
|
||||
p,
|
||||
strong {
|
||||
line-height: 1.7;
|
||||
@ -72,6 +75,7 @@ a:where([class]) {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
@ -79,6 +83,7 @@ a {
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
input[type="datetime-local"] {
|
||||
width: 100%;
|
||||
padding: 0.8rem 0.6rem;
|
||||
@ -89,11 +94,13 @@ input[type="datetime-local"] {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.1rem var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
user-select: none;
|
||||
@ -112,6 +119,7 @@ button,
|
||||
border-radius: 0.5rem;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--accent-color) solid medium;
|
||||
}
|
||||
@ -124,6 +132,7 @@ button,
|
||||
.button {
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
|
||||
&--primary {
|
||||
padding: 0.8rem 1rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
@ -133,15 +142,19 @@ button,
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
&--colored {
|
||||
color: var(--accent-color);
|
||||
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background-color: #ff737310;
|
||||
color: var(--danger-color);
|
||||
|
||||
.icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
@ -155,14 +168,17 @@ button,
|
||||
border: solid var(--accent-color) 1px;
|
||||
background-color: transparent;
|
||||
color: var(--accent-color);
|
||||
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
@ -190,6 +206,7 @@ button:disabled {
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
.icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
@ -214,13 +231,15 @@ details[open] {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
& > summary .down-arrow {
|
||||
&>summary .down-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
sm-input {
|
||||
--border-radius: 0.5rem;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
@ -243,28 +262,34 @@ sm-chip {
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
|
||||
&[selected] {
|
||||
--background: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
sm-select {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
--padding: 0.6rem 0.3rem 0.6rem 0.6rem;
|
||||
}
|
||||
|
||||
sm-option {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.interact {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -309,6 +334,7 @@ ul {
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -348,6 +374,7 @@ ul {
|
||||
.text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
@ -355,9 +382,11 @@ ul {
|
||||
.align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.align-content-start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
@ -381,6 +410,7 @@ ul {
|
||||
.justify-start {
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.justify-content-start {
|
||||
justify-content: start;
|
||||
}
|
||||
@ -388,6 +418,7 @@ ul {
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-items-center {
|
||||
justify-items: center;
|
||||
}
|
||||
@ -395,9 +426,11 @@ ul {
|
||||
.justify-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.align-self-start {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
@ -425,6 +458,7 @@ ul {
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.space-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
@ -444,9 +478,11 @@ ul {
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-right-1 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@ -458,18 +494,23 @@ ul {
|
||||
.margin-left-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.margin-right-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.margin-top-1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.margin-bottom-0-5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-bottom-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.margin-bottom-2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@ -477,6 +518,7 @@ ul {
|
||||
.margin-block-0-5 {
|
||||
margin-block: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-block-1 {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
@ -524,6 +566,7 @@ ul {
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
@ -539,6 +582,7 @@ ul {
|
||||
.weight-500 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ws-pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
@ -555,13 +599,12 @@ ul {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(var(--text-color), 0.3) 0%,
|
||||
rgba(0, 0, 0, 0) 50%
|
||||
);
|
||||
background: radial-gradient(circle,
|
||||
rgba(var(--text-color), 0.3) 0%,
|
||||
rgba(0, 0, 0, 0) 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.interactive {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -573,30 +616,36 @@ ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.observe-empty-state:not(:empty) ~ .empty-state {
|
||||
.observe-empty-state:not(:empty)~.empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.password-field {
|
||||
label {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
input:checked ~ .visible {
|
||||
|
||||
input:checked~.visible {
|
||||
display: none;
|
||||
}
|
||||
input:not(:checked) ~ .invisible {
|
||||
|
||||
input:not(:checked)~.invisible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multi-state-button {
|
||||
display: grid;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
isolation: isolate;
|
||||
& > * {
|
||||
|
||||
&>* {
|
||||
grid-area: 1/1/2/2;
|
||||
}
|
||||
|
||||
button {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
@ -606,21 +655,26 @@ ul {
|
||||
#confirmation_popup,
|
||||
#prompt_popup {
|
||||
flex-direction: column;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
sm-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
|
||||
sm-button:first-of-type {
|
||||
margin-right: 0.6rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#prompt_message {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@ -632,37 +686,45 @@ ul {
|
||||
width: 100%;
|
||||
padding: 0 1.5rem;
|
||||
align-items: center;
|
||||
& > * {
|
||||
|
||||
&>* {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
grid-column: 1/-1;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&__close {
|
||||
grid-column: 1;
|
||||
margin-left: -1rem;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
menu {
|
||||
&[type="circle"] {
|
||||
padding: 1.5rem 2.5rem;
|
||||
list-style: circle;
|
||||
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
#main_header {
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
@ -673,19 +735,23 @@ menu {
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.3);
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
#logo {
|
||||
color: inherit;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.app-brand {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.app-name {
|
||||
&__company {
|
||||
font-size: 0.8rem;
|
||||
@ -693,16 +759,19 @@ menu {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#meta_mask_status_button {
|
||||
gap: 0.3rem;
|
||||
border-radius: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-weight: 500;
|
||||
|
||||
.icon-wrapper {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -712,24 +781,30 @@ menu {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
& > * {
|
||||
|
||||
&>* {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-status="connected"] {
|
||||
pointer-events: none;
|
||||
|
||||
.icon-wrapper::after {
|
||||
background-color: var(--green);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-status="disconnected"] .icon-wrapper::after {
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
theme-toggle {
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.8rem;
|
||||
@ -737,35 +812,43 @@ theme-toggle {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
margin-top: 1.5rem;
|
||||
font-weight: 500;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
& + :is(h1, h2, h3, h4, h5, h6, p, span, sm-copy, a) {
|
||||
|
||||
&+ :is(h1, h2, h3, h4, h5, h6, p, span, sm-copy, a) {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas: "header" "pages" "navbar";
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
grid-area: navbar;
|
||||
display: flex;
|
||||
background: rgba(var(--text-color), 0.03);
|
||||
|
||||
&.hide-away {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -780,20 +863,25 @@ main {
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
font-weight: 500;
|
||||
|
||||
.icon {
|
||||
width: 2rem;
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
&__title {
|
||||
transition: opacity 0.2s,
|
||||
transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: var(--accent-color);
|
||||
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -804,6 +892,7 @@ main {
|
||||
view-transition-name: indicator;
|
||||
}
|
||||
}
|
||||
|
||||
// body.loaded .nav-item {
|
||||
// &__indicator {
|
||||
// view-transition-name: indicator;
|
||||
@ -813,18 +902,22 @@ main {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
grid-area: pages;
|
||||
|
||||
&[data-page="home"] {
|
||||
& > :nth-child(2) {
|
||||
&> :nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-page="send"] {
|
||||
align-items: flex-start;
|
||||
& > * {
|
||||
|
||||
&>* {
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-page="create"] {
|
||||
margin: 0 auto;
|
||||
padding: 4vw 1rem;
|
||||
@ -833,16 +926,21 @@ main {
|
||||
width: min(100%, 42rem);
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
view-transition-name: search-history;
|
||||
& > * {
|
||||
|
||||
&>* {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -850,40 +948,48 @@ aside {
|
||||
border: solid thin rgba(var(--text-color), 0.3);
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
sm-chips {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.2rem 0.3rem;
|
||||
border-radius: 0.5rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
sm-chip {
|
||||
--padding: 0.3rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
--border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
sm-copy {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
#balance_section {
|
||||
margin-top: 3vw;
|
||||
align-content: start;
|
||||
padding: 1.5rem;
|
||||
& > * {
|
||||
|
||||
&>* {
|
||||
max-width: 36rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
#input_wrapper {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#eth_balance_wrapper {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: max(1rem, 1.5vw);
|
||||
border-radius: 0.5rem;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.3);
|
||||
@ -891,6 +997,7 @@ aside {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#error_section {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
@ -899,6 +1006,7 @@ aside {
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
grid-column: 1/-1;
|
||||
|
||||
.icon {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
@ -908,6 +1016,42 @@ aside {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.transaction__phase {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
left: 0.3rem;
|
||||
border-right: dashed 0.1rem rgba(var(--text-color), 0.5);
|
||||
top: calc(100% + 0.4rem);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
sm-spinner {
|
||||
--size: 1rem;
|
||||
}
|
||||
|
||||
.confirmed {
|
||||
fill: var(--green);
|
||||
}
|
||||
}
|
||||
|
||||
.user-action-result__icon {
|
||||
justify-self: center;
|
||||
height: 4rem;
|
||||
@ -915,38 +1059,47 @@ aside {
|
||||
border-radius: 5rem;
|
||||
animation: popup 1s;
|
||||
padding: 1rem;
|
||||
|
||||
&.pending {
|
||||
fill: var(--yellow);
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
}
|
||||
|
||||
&.confirmed {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
background-color: #0bbe56;
|
||||
}
|
||||
|
||||
&.failed {
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popup {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.2) translateY(600%);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: scale(0.2) translateY(5rem);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(0.2) translateY(0);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(1.1) translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
#generated_addresses {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: max(1rem, 1.5vw);
|
||||
@ -959,47 +1112,57 @@ aside {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#page_container {
|
||||
&[data-page="home"] {
|
||||
flex-direction: column;
|
||||
& > :first-child {
|
||||
|
||||
&> :first-child {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
}
|
||||
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-template-columns: 10rem 1fr;
|
||||
grid-template-areas: "header header" "navbar pages";
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
border-top: none;
|
||||
flex-direction: column;
|
||||
background-color: transparent;
|
||||
border-right: solid thin rgba(var(--text-color), 0.3);
|
||||
|
||||
ul {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
padding: 0.8rem 1rem 0.8rem 0.5rem;
|
||||
flex: 1;
|
||||
|
||||
&__indicator {
|
||||
width: 0.25rem;
|
||||
height: 50%;
|
||||
@ -1008,9 +1171,11 @@ aside {
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
border-right: solid thin rgba(var(--text-color), 0.3);
|
||||
overflow-y: auto;
|
||||
|
||||
h4 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@ -1018,19 +1183,23 @@ aside {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#input_wrapper {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page {
|
||||
margin: 0 8vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
@ -1044,23 +1213,29 @@ aside {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.interact:not([disabled], .button--primary) {
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.button:not([disabled]) {
|
||||
transition: background-color 0.3s, filter 0.3s;
|
||||
|
||||
&:hover {
|
||||
filter: contrast(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
|
||||
::view-transition-group(*),
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*) {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
index.html
15
index.html
@ -923,11 +923,16 @@
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
renderElem(getRef('transaction_result_popup__content'), html`
|
||||
<svg class="icon user-action-result__icon pending" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
|
||||
<div class="grid gap-0-5 justify-center text-center">
|
||||
<h4>Transaction sent</h4>
|
||||
<p>Waiting for confirmation from blockchain</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="transaction__phase">
|
||||
<svg class="icon confirmed" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg>
|
||||
<h4>Transaction sent</h4>
|
||||
</li>
|
||||
<li class="transaction__phase">
|
||||
<sm-spinner></sm-spinner>
|
||||
<p>Waiting for transaction to be confirmed</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="grid">
|
||||
<span class="label">Transaction ID</span>
|
||||
<sm-copy value=${txHash}></sm-copy>
|
||||
|
||||
232
index.min.html
Normal file
232
index.min.html
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user