Created
April 19, 2023 21:36
-
-
Save zavodil/5786d09502b0fbd042a920d804259130 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
font-family: 'Inter custom',sans-serif; | |
} | |
.swap-root{ | |
min-height: 100%; | |
} | |
.swap-main-container { | |
display: flex; | |
flex-direction: column; | |
width: 100%; | |
min-height: 100vh; | |
/*padding: 72px 0px 5rem;*/ | |
-webkit-box-align: center; | |
align-items: center; | |
} | |
.swap-main-column{ | |
padding: 68px 8px 0px; | |
max-width: 480px; | |
width: 100%; | |
} | |
.swap-page{ | |
position: relative; | |
background: rgb(255, 255, 255); | |
border-radius: 16px; | |
border: 1px solid rgb(210, 217, 238); | |
padding: 8px; | |
z-index: 0; | |
transition: transform 250ms ease 0s; | |
-webkit-mask-image: -webkit-radial-gradient(white, black); | |
} | |
.asset-container-bottom { | |
border-bottom: 1px solid rgb(255, 255, 255); | |
border-bottom-left-radius: 0px; | |
border-bottom-right-radius: 0px; | |
border-top-left-radius: 12px; | |
border-top-right-radius: 12px; | |
} | |
.asset-container-top { | |
border-radius: 12px; | |
} | |
.asset-container{ | |
position: relative; | |
background-color: rgb(245, 246, 252); | |
padding: 16px; | |
color: rgb(119, 128, 160); | |
font-size: 14px; | |
line-height: 20px; | |
font-weight: 500; | |
} | |
.asset-container::before { | |
box-sizing: border-box; | |
background-size: 100%; | |
border-radius: inherit; | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
pointer-events: none; | |
content: ""; | |
border: 1px solid rgb(245, 246, 252); | |
color: rgb(119, 128, 160); | |
font-size: 14px; | |
line-height: 20px; | |
font-weight: 500; | |
} | |
.swap-currency-input { | |
display: flex; | |
flex-flow: column nowrap; | |
position: relative; | |
border-radius: 20px; | |
z-index: 1; | |
width: initial; | |
transition: height 1s ease 0s; | |
will-change: height; | |
} | |
.swap-currency-input-block { | |
min-height: 44px; | |
border-radius: 20px; | |
width: initial; | |
} | |
.swap-currency-input-top{ | |
display: flex; | |
flex-flow: row nowrap; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-pack: justify; | |
justify-content: space-between; | |
} | |
.swap-currency-input-bottom{ | |
-webkit-box-pack: end; | |
justify-content: flex-end; | |
min-height: 20px; | |
padding: 8px 0px 0px; | |
display: flex; | |
flex-flow: row nowrap; | |
-webkit-box-align: center; | |
align-items: center; | |
color: rgb(119, 128, 160); | |
font-size: 0.75rem; | |
line-height: 1rem; | |
} | |
.input-asset-amount { | |
filter: none; | |
opacity: 1; | |
transition: opacity 0.2s ease-in-out 0s; | |
text-align: left; | |
font-size: 36px; | |
line-height: 44px; | |
font-variant: small-caps; | |
color: rgb(13, 17, 28); | |
width: 0px; | |
position: relative; | |
font-weight: 400; | |
outline: none; | |
border: none; | |
flex: 1 1 auto; | |
background-color: transparent; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
padding: 0px; | |
appearance: textfield; | |
} | |
.input-asset-token{ | |
-webkit-box-align: center; | |
align-items: center; | |
background-color: rgb(232, 236, 251); | |
opacity: 1; | |
box-shadow: none; | |
color: rgb(13, 17, 28); | |
cursor: pointer; | |
height: unset; | |
border-radius: 16px; | |
outline: none; | |
user-select: none; | |
border: none; | |
font-size: 24px; | |
font-weight: 400; | |
width: initial; | |
padding: 4px 8px 4px 4px; | |
gap: 8px; | |
-webkit-box-pack: justify; | |
justify-content: space-between; | |
margin-left: 12px; | |
visibility: visible; | |
transform: perspective(1px) translateZ(0px); | |
text-decoration: none; | |
display: flex; | |
position: relative; | |
z-index: 1; | |
will-change: transform; | |
transition: transform 450ms ease 0s; | |
flex-wrap: nowrap; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
appearance: none; | |
} | |
.input-asset-token::before{ | |
background-size: 100%; | |
border-radius: inherit; | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
content: ""; | |
} | |
.input-asset-token-menu{ | |
display: flex; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-pack: justify; | |
justify-content: space-between; | |
width: 100%; | |
user-select: none; | |
} | |
.input-asset-token-name{ | |
width: fit-content; | |
display: flex; | |
padding: 0px; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-pack: start; | |
justify-content: flex-start; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
} | |
.input-asset-token-icon { | |
margin-right: 2px; | |
position: relative; | |
display: flex; | |
} | |
.input-asset-token-icon-img{ | |
width: 24px; | |
height: 24px; | |
border-radius: 50%; | |
background: radial-gradient(white 60%, rgba(255, 255, 255, 0) calc(70% + 1px)); | |
box-shadow: white 0px 0px 1px; | |
} | |
.input-asset-token-ticker { | |
margin: 0px 0.25rem; | |
font-size: 20px; | |
font-weight: 600; | |
} | |
.input-asset-token-expand { | |
margin: 0px 0.25rem 0px 8px; | |
height: 35%; | |
} | |
.input-asset-details-container{ | |
-webkit-box-pack: end; | |
justify-content: flex-end; | |
min-height: 20px; | |
padding: 8px 0px 0px; | |
display: flex; | |
flex-flow: row nowrap; | |
-webkit-box-align: center; | |
align-items: center; | |
color: rgb(119, 128, 160); | |
font-size: 0.75rem; | |
line-height: 1rem; | |
} | |
.input-asset-details-row{ | |
-webkit-box-pack: justify; | |
justify-content: space-between; | |
width: 100%; | |
display: flex; | |
padding: 0px; | |
-webkit-box-align: center; | |
align-items: center; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
} | |
.input-asset-details-price-container{ | |
filter: none; | |
opacity: 1; | |
transition: opacity 0.2s ease-in-out 0s; | |
} | |
.input-asset-details-price{ | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
font-weight: 400; | |
font-size: 14px; | |
} | |
.input-asset-details-balance-container{ | |
height: 17px; | |
width: fit-content; | |
display: flex; | |
padding: 0px; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-pack: start; | |
justify-content: flex-start; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
} | |
.input-asset-details-balance-text{ | |
display: inline; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
font-weight: 400; | |
font-size: 14px; | |
} | |
.input-asset-details-balance-button{ | |
background-color: transparent; | |
border: none; | |
color: rgb(251, 17, 142); | |
cursor: pointer; | |
font-size: 14px; | |
font-weight: 600; | |
opacity: 1; | |
padding: 4px 6px; | |
pointer-events: initial; | |
user-select: none; | |
} | |
.spacer-container{ | |
border-radius: 12px; | |
height: 40px; | |
width: 40px; | |
position: relative; | |
margin: -18px auto; | |
background-color: rgb(232, 236, 251); | |
border: 4px solid rgb(255, 255, 255); | |
z-index: 2; | |
} | |
.spacer-block{ | |
display: inline-flex; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-pack: center; | |
justify-content: center; | |
width: 100%; | |
height: 100%; | |
cursor: pointer; | |
} | |
.bottom-container{ | |
display: grid; | |
grid-auto-rows: auto; | |
/*row-gap: 12px;*/ | |
} | |
.swap-price-container{ | |
padding: 0px; | |
border-top-left-radius: 0px; | |
border-top-right-radius: 0px; | |
border-bottom-left-radius: 12px; | |
border-bottom-right-radius: 12px; | |
background-color: rgb(245, 246, 252); | |
color: rgb(119, 128, 160); | |
font-size: 14px; | |
line-height: 20px; | |
font-weight: 500; | |
} | |
.swap-price-container::before{ | |
box-sizing: border-box; | |
background-size: 100%; | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
pointer-events: none; | |
content: ""; | |
border-radius: inherit; | |
border-width: 1px; | |
border-style: solid; | |
border-color: rgb(245, 246, 252); | |
border-image: initial; | |
} | |
.swap-price-block{ | |
margin-top: 0px !important; | |
width: 100%; | |
-webkit-box-pack: center; | |
justify-content: center; | |
border-radius: inherit; | |
padding: 8px 12px; | |
min-height: 32px; | |
display: flex; | |
-webkit-box-align: center; | |
align-items: center; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
min-height: 52px; | |
} | |
.swap-price-grid{ | |
width: 100%; | |
/*margin-bottom: -8px;*/ | |
display: grid; | |
grid-auto-rows: auto; | |
row-gap: 8px; | |
} | |
.swap-price-row{ | |
padding: 0px; | |
-webkit-box-align: center; | |
align-items: center; | |
cursor: pointer; | |
-webkit-box-pack: justify; | |
justify-content: space-between; | |
width: 100%; | |
display: flex; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
} | |
.swap-price-details-container{ | |
position: relative; | |
width: fit-content; | |
display: flex; | |
padding: 0px; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-pack: start; | |
justify-content: flex-start; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
} | |
.swap-price-details-icon{ | |
display: inline-block; | |
height: inherit; | |
} | |
.swap-price-details-svg{ | |
margin-right: 4px; | |
color: rgb(152, 161, 192); | |
} | |
.swap-price-details-text{ | |
filter: none; | |
opacity: 1; | |
transition: opacity 0.2s ease-in-out 0s; | |
} | |
.swap-price-details-text-button{ | |
background-color: transparent; | |
border: none; | |
cursor: pointer; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-pack: start; | |
justify-content: flex-start; | |
grid-template-columns: 1fr auto; | |
gap: 0.25rem; | |
display: flex; | |
flex-flow: row wrap; | |
text-align: left; | |
padding: 8px 0px; | |
user-select: text; | |
} | |
.swap-price-details-rate{ | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
font-weight: 400; | |
font-size: 14px; | |
color: rgb(13, 17, 28); | |
} | |
.swap-price-details-price{ | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
font-weight: 500; | |
color: rgb(152, 161, 192); | |
} | |
.swap-gas-details-container{ | |
width: fit-content; | |
display: flex; | |
padding: 0px; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-pack: start; | |
justify-content: flex-start; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
} | |
.swap-gas-rate-container{ | |
display: inline-block; | |
height: inherit; | |
} | |
.swap-gas-rate-wrapper | |
filter: none; | |
opacity: 1; | |
transition: opacity 0.2s ease-in-out 0s; | |
} | |
.swap-gas-rate-block{ | |
border-radius: 8px; | |
padding: 4px 6px; | |
height: 24px; | |
color: rgb(152, 161, 192); | |
background-color: rgb(245, 246, 252); | |
font-size: 14px; | |
font-weight: 500; | |
user-select: none; | |
width: fit-content; | |
display: flex; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-pack: start; | |
justify-content: flex-start; | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
} | |
.swap-gas-rate-svg{ | |
margin-right: 4px; | |
height: 14px; | |
} | |
.swap-gas-rate-svg > * { | |
stroke: rgb(152, 161, 192); | |
} | |
.swap-gas-rate-spacer{ | |
/*width: 24px;*/ | |
height: 24px; | |
transform: none; | |
transition: transform 0.1s linear 0s; | |
} | |
.swap-button-container{ | |
margin-top: 12px; | |
} | |
.swap-button{ | |
background-color: rgb(232, 236, 251); | |
color: rgb(119, 128, 160); | |
box-shadow: none; | |
border: 1px solid transparent; | |
outline: none; | |
pointer-events: none; | |
font-size: 20px; | |
font-weight: 600; | |
padding: 16px; | |
width: 100%; | |
text-align: center; | |
border-radius: 20px; | |
text-decoration: none; | |
display: flex; | |
-webkit-box-pack: center; | |
justify-content: center; | |
flex-wrap: nowrap; | |
-webkit-box-align: center; | |
align-items: center; | |
position: relative; | |
z-index: 1; | |
will-change: transform; | |
transition: transform 450ms ease 0s; | |
transform: perspective(1px) translateZ(0pxpx); | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
line-height: inherit; | |
/* | |
cursor: auto; | |
appearance: none; | |
user-select: none; | |
opacity: 0.5;*/ | |
} | |
.swap-button-enabled { | |
background-color: rgb(251, 17, 142); | |
font-size: 20px; | |
padding: 16px; | |
color: rgb(245, 246, 252); | |
width: 100%; | |
font-weight: 500; | |
text-align: center; | |
border-radius: 20px; | |
outline: none; | |
border: 1px solid transparent; | |
text-decoration: none; | |
display: flex; | |
-webkit-box-pack: center; | |
justify-content: center; | |
flex-wrap: nowrap; | |
-webkit-box-align: center; | |
align-items: center; | |
cursor: pointer; | |
position: relative; | |
z-index: 1; | |
will-change: transform; | |
transition: transform 450ms ease 0s; | |
transform: perspective(1px) translateZ(0px); | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
appearance: none; | |
line-height: inherit; | |
user-select: none; | |
} | |
.swap-button-text{ | |
box-sizing: border-box; | |
margin: 0px; | |
min-width: 0px; | |
font-size: 20px; | |
font-weight: 600; | |
user-select: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment