Skip to content

Instantly share code, notes, and snippets.

@kizzx2
Created June 9, 2023 06:45
Show Gist options
  • Save kizzx2/ccde6fac832a800420c3aa839f20181c to your computer and use it in GitHub Desktop.
Save kizzx2/ccde6fac832a800420c3aa839f20181c to your computer and use it in GitHub Desktop.
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
.logo-heading {
color: rgb(53, 132, 25);
}
.logo-heading img {
width: 32px;
height: 32px;
margin-right: 0.5em;
}
.swap-panel h3 {
font-size: 20px;
padding-top: 3px;
}
.swap-panel {
background: white;
box-shadow: rgb(53 132 25 / 1%) 0px 0px 1px, rgb(53 132 25 / 10%) 0px 4px 8px, rgb(53 132 25 / 10%) 0px 16px 24px, rgb(53 132 25 / 1%) 0px 24px 32px;
border-radius: 24px;
max-width: 480px;
margin: 0 auto;
padding: 16px;
padding-bottom: 8px;
margin-top: 24px;
margin-bottom: 64px;
}
.swap-panel .balance-row {
display: flex;
color: gray;
}
.swap-panel .balance-row .balance {
font-size: 12px;
text-align: left;
padding-left: 8px;
display: flex;
align-items: center;
}
.swap-panel .balance-row .get-wrapped-near a {
color: #358419;
text-decoration: none;
font-size: 12px;
display: flex;
align-items: center;
padding-left: 4px;
}
.swap-panel .balance-row .half-max-buttons {
flex: 1;
text-align: right;
margin-right: 8px;
}
.swap-panel .balance-row .half-max-buttons a {
font-size: 12px;
cursor: pointer;
}
.swap-panel .pi.pi-arrow-down {
font-size: 12px;
color: #4d90ee;
}
.swap-panel .flip-swap {
border-radius: 64px;
cursor: pointer;
box-shadow: rgb(53 132 25 / 1%) 0px 0px 1px, rgb(53 132 25 / 10%) 0px 4px 8px, rgb(53 132 25 / 10%) 0px 16px 24px, rgb(53 132 25 / 1%) 0px 24px 32px;
position: relative;
width: 32px;
height: 32px;
margin: 0 auto;
background-color: white;
top: -12px;
display: flex;
align-items: center;
justify-content: center;
}
.swap-panel .flip-swap .material-icons {
padding-left: 96px;
color: rgb(100, 181, 246);
}
.swap-panel h4 {
font-weight: normal;
margin-bottom: 16px;
margin-left: 8px;
margin-top: 0;
text-align: left;
}
.swap-panel .trade-price-info {
display: flex;
text-align: left;
background: #f7f8fa;
border-radius: 16px;
padding: 8px;
padding-left: 24px;
font-size: 12px;
margin-bottom: 16px;
}
.swap-panel .trade-price-info i.pi {
margin-right: 8px;
}
.swap-panel .trade-routes-container {
margin-top: 16px;
margin-bottom: 16px;
}
.swap-panel .trade-routes-container:after {
content: '';
width: 100%;
position: relative;
bottom: 0;
background: linear-gradient(transparent, red);
}
.swap-panel .trade-routes {
padding-top: 16px;
text-align: center;
max-height: 300px;
overflow-y: scroll;
margin-bottom: 8px;
}
.swap-panel .trade-routes .trade-routes-num-routes-found {
margin-top: 16px;
margin-bottom: 16px;
}
.swap-panel .trade-routes .trade-route-row {
text-align: left;
border: 2px solid #b5c1db;
border-radius: 12px;
padding: 16px;
transition: all 0.1s ease-out;
padding-top: 0;
color: gray;
margin-bottom: 12px;
cursor: pointer;
}
.swap-panel .trade-routes .trade-route-row.trade-route-row-selected {
border-color: #39877b;
color: black;
}
.swap-panel .trade-routes .trade-route-row .trade-route-row-exchange-name {
flex: 1;
font-weight: bold;
}
.swap-panel .trade-routes .trade-route-row .trade-route-row-exchange-logo {
width: 24px;
height: 24px;
margin-left: -4px;
margin-right: 8px;
border-radius: 24px;
background-color: black;
}
.swap-panel .trade-routes .trade-route-row .trade-route-row-exchange-logo.trade-route-row-exchange-logo-Tonic {
padding: 3px;
}
.swap-panel .trade-routes .trade-route-row .trade-route-row-selected-badge {
background-color: #39877b;
color: white;
border-radius: 32px 32px 32px 0;
padding: 2px 10px;
display: inline;
position: relative;
font-size: 12px;
top: -10px;
left: -18px;
font-weight: 500;
}
.swap-panel .trade-routes .trade-route-row .trade-route-row-trade-info {
text-align: right;
}
.swap-panel .trade-routes .trade-route-row .trade-route-row-trade-info .trade-route-row-output-amount {
font-size: 20px;
}
.swap-panel .trade-routes .trade-route-row .trade-route-row-trade-info .trade-route-row-usdc-amount {
display: none;
color: #6e727d;
}
.main-action-button {
width: 100%;
background-color: #e1ecfd;
color: #4d90ee;
font-size: 16px;
font-weight: 700;
border: none;
border-radius: 24px;
padding: 16px;
transition: all 0.2s ease-out;
}
.main-action-button:disabled {
opacity: 0.5;
}
.main-action-button:not(:disabled) {
cursor: pointer;
}
.main-action-button:hover:not(:disabled) {
background-color: #d3e3fc;
}
.main-action-button:disabled {
opacity: 0.5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment