Merge branch 'main' of https://github.com/ranchimall/exchange-market
This commit is contained in:
sairajzero
commit
6287e8f945
1
docs/css/back.svg
Normal file
1
docs/css/back.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a{fill:#ffcdab;}.b{fill:#fff4c5;}</style></defs><title>back</title><path class="a" d="M1343.5-.5c33.54,48.75,50.34,166,277.18,193.18C1808.39,215.21,1899.21,313.38,1920,364c-.33-146.23-.17-218.31-.5-364.54Z"/><path class="b" d="M1343.5-.5a288.26,288.26,0,0,0,159,88.78c48.38,9.32,76.65,13.77,132.58,22.68,93.5,14.9,141.37,56.9,170.42,80.54a466.36,466.36,0,0,1,115,139q-.49-165.49-1-331Z"/></svg>
|
||||
|
After Width: | Height: | Size: 499 B |
33
docs/css/bg-art2.svg
Normal file
33
docs/css/bg-art2.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<g filter="url(#filter0_d)">
|
||||
<rect x="312" y="323" width="240" height="140" rx="18" transform="rotate(30 312 323)" fill="#1C783B"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d)">
|
||||
<rect x="431.283" y="302" width="240" height="140" rx="18" transform="rotate(50.0235 431.283 302)" fill="#2DBD5E"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="225" y="320" width="301.846" height="265.244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dx="-5" dy="9"/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d" x="307" y="299" width="285.477" height="297.86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dx="-5" dy="9"/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0">
|
||||
<rect width="512" height="512" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -77,6 +77,10 @@ a.button {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
@ -143,6 +147,10 @@ a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
input {
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
|
||||
sm-input {
|
||||
font-size: 0.9rem;
|
||||
--border-radius: 0.3rem;
|
||||
@ -487,7 +495,7 @@ strip-select {
|
||||
|
||||
strip-option {
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
--border-radius: 0;
|
||||
--active-option-color: rgba(var(--background-color), 1);
|
||||
--active-option-background-color: var(--accent-color);
|
||||
@ -531,7 +539,7 @@ sm-checkbox {
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tooltip .banner {
|
||||
@ -682,9 +690,9 @@ sm-checkbox {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#pages_container > * {
|
||||
padding: 0 1.5rem;
|
||||
min-width: min(26rem, 100%);
|
||||
}
|
||||
|
||||
@ -763,7 +771,7 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
#quantity_type,
|
||||
#wallet_quantity_type {
|
||||
#portfolio_quantity_type {
|
||||
font-size: 0.8rem;
|
||||
padding-right: 0.5rem;
|
||||
border-right: thin solid rgba(var(--text-color), 0.3);
|
||||
@ -781,21 +789,12 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
#asset_page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#asset_page__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
#asset_page__nav .icon-only {
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
|
||||
#trade_form {
|
||||
height: 100%;
|
||||
}
|
||||
@ -838,9 +837,16 @@ sm-checkbox {
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: -webkit-min-content repeat(3, 1fr) -webkit-min-content;
|
||||
grid-template-columns: min-content repeat(3, 1fr) min-content;
|
||||
grid-template-columns: -webkit-min-content 1fr auto;
|
||||
grid-template-columns: min-content 1fr auto;
|
||||
border-radius: 0.5rem;
|
||||
grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
|
||||
}
|
||||
.order-card > .grid:nth-of-type(2) {
|
||||
grid-area: price;
|
||||
}
|
||||
.order-card > .grid:nth-of-type(3) {
|
||||
grid-area: amount;
|
||||
}
|
||||
.order-card__type {
|
||||
font-size: 0.9rem;
|
||||
@ -861,6 +867,7 @@ sm-checkbox {
|
||||
pointer-events: none;
|
||||
}
|
||||
.order-card sm-checkbox {
|
||||
grid-area: checkbox;
|
||||
cursor: pointer;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
@ -869,9 +876,17 @@ sm-checkbox {
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
.order-card__time {
|
||||
grid-area: time;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.order-card .cancel-order {
|
||||
grid-area: cancel;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
.order-card .cancel-order .icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
|
||||
.cancel-order {
|
||||
align-items: center;
|
||||
@ -1013,21 +1028,24 @@ sm-checkbox {
|
||||
background-color: #e2135110;
|
||||
}
|
||||
|
||||
#wallet {
|
||||
#portfolio {
|
||||
display: grid;
|
||||
width: auto;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-content: flex-start;
|
||||
width: min(32rem, 100%);
|
||||
}
|
||||
|
||||
.wallet_actions__wrapper {
|
||||
grid-column: span 3;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
.portfolio_actions__wrapper {
|
||||
grid-column: 1/-1;
|
||||
justify-content: flex-end;
|
||||
gap: 0.3rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.wallet_actions__wrapper .button {
|
||||
flex: 1;
|
||||
.portfolio_actions__wrapper .button {
|
||||
color: var(--accent-color);
|
||||
padding: 0.5rem 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -1039,33 +1057,37 @@ sm-checkbox {
|
||||
#my_assets {
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 0 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
padding: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
}
|
||||
.balance-card.is-locked {
|
||||
padding: 1rem 0.5rem;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
}
|
||||
.balance-card.is-locked .balance-card__icon {
|
||||
grid-row: span 2;
|
||||
}
|
||||
.balance-card:not(.is-locked) {
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
grid-template-columns: auto auto 1fr auto auto;
|
||||
}
|
||||
.balance-card input {
|
||||
align-self: center;
|
||||
}
|
||||
.balance-card__icon {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding: 0.6rem;
|
||||
margin: 0 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
align-self: flex-start;
|
||||
background-color: var(--accent-color--light);
|
||||
}
|
||||
.balance-card__icon .icon {
|
||||
@ -1078,7 +1100,8 @@ sm-checkbox {
|
||||
font-weight: 500;
|
||||
}
|
||||
.balance-card__amount-wrapper {
|
||||
grid-column: 2/3;
|
||||
margin-top: 0.5rem;
|
||||
grid-column: 3/-1;
|
||||
gap: 0.3rem 1rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@ -1086,11 +1109,84 @@ sm-checkbox {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#wallet_result {
|
||||
#portfolio_cards_wrapper {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
||||
}
|
||||
|
||||
.personal-asset-balance {
|
||||
align-content: flex-start;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
width: 100%;
|
||||
}
|
||||
.personal-asset-balance:not(:last-of-type) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(1) {
|
||||
background: url("bg-art2.svg") no-repeat bottom right, #c2ffd7;
|
||||
background-size: contain;
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(1) .icon {
|
||||
background-color: rgba(102, 255, 156, 0.5);
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(1) .button {
|
||||
border: solid thin rgba(102, 255, 156, 0.5);
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(2) {
|
||||
background: url("back.svg") no-repeat top right, #fcffa8;
|
||||
background-size: contain;
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(2) .icon {
|
||||
background-color: rgba(255, 234, 0, 0.5);
|
||||
}
|
||||
.personal-asset-balance > .flex {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.personal-asset-balance > .flex .icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
fill: rgba(0, 0, 0, 0.8);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.personal-asset-balance .button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
padding-right: 0.8rem;
|
||||
justify-self: flex-start;
|
||||
border-radius: 1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
.personal-asset-balance .button .icon {
|
||||
height: 1rem;
|
||||
background-color: transparent;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.personal-asset-balance .button:hover {
|
||||
box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
#personal_rupee_balance span:first-of-type,
|
||||
#personal_flo_balance span:first-of-type {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#personal_rupee_balance span:last-of-type,
|
||||
#personal_flo_balance span:last-of-type {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#portfolio_result {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
#wallet_result__icon {
|
||||
#portfolio_result__icon {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
@ -1099,7 +1195,7 @@ sm-checkbox {
|
||||
-webkit-animation: pop-up 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
animation: pop-up 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
#wallet_result__icon .icon {
|
||||
#portfolio_result__icon .icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
@ -1134,7 +1230,7 @@ sm-checkbox {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#wallet_result__cta {
|
||||
#portfolio_result__cta {
|
||||
padding: 1.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
@ -1249,6 +1345,16 @@ sm-checkbox {
|
||||
margin-bottom: 3rem;
|
||||
align-content: flex-start;
|
||||
}
|
||||
#help ul {
|
||||
list-style: initial;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
#help ul li {
|
||||
margin-left: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40rem) and (any-hover: none) {
|
||||
.cancel-order span {
|
||||
@ -1280,11 +1386,66 @@ sm-checkbox {
|
||||
transform: translateY(50%) scale(1.2);
|
||||
}
|
||||
|
||||
#asset_list_wrapper {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.listed-asset {
|
||||
border-radius: 0;
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
#exchange {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#login_form {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#chart_header {
|
||||
padding: 1rem 1.5rem 0.5rem 1.5rem;
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
|
||||
#trade_panel_backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
-webkit-backdrop-filter: blur(0.5rem);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#show_trade_panel {
|
||||
position: absolute;
|
||||
border-radius: 2rem;
|
||||
bottom: 0;
|
||||
align-self: center;
|
||||
margin-bottom: 1rem;
|
||||
z-index: 5;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#trade_form {
|
||||
position: fixed;
|
||||
height: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: auto;
|
||||
width: auto;
|
||||
z-index: 10;
|
||||
padding: 1.5rem 1.5rem 0 1.5rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#price_chart_container {
|
||||
flex: 1;
|
||||
}
|
||||
@ -1365,6 +1526,10 @@ sm-checkbox {
|
||||
#pages_container {
|
||||
grid-area: pages;
|
||||
}
|
||||
#pages_container > * {
|
||||
margin: 0 1.5rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.is-signed-in #exchange {
|
||||
display: flex;
|
||||
@ -1399,9 +1564,14 @@ sm-checkbox {
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
border-radius: 0 0.2rem 0.2rem 0;
|
||||
height: 50%;
|
||||
height: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.order-card {
|
||||
grid-template-columns: auto 1fr 1fr 1fr auto;
|
||||
grid-template-areas: "checkbox quantity price amount time cancel";
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 80rem) and (min-width: 40rem) {
|
||||
.main_navbar__item {
|
||||
@ -1448,22 +1618,6 @@ sm-checkbox {
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 20rem;
|
||||
}
|
||||
|
||||
#asset_page__nav {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
#wallet {
|
||||
gap: 1rem 2rem;
|
||||
grid-template-columns: 20rem 24rem;
|
||||
}
|
||||
#wallet__header {
|
||||
grid-column: 1/3;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
#wallet .balance-card {
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 72rem) {
|
||||
.page-layout {
|
||||
|
||||
2
docs/css/main.min.css
vendored
2
docs/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -76,7 +76,9 @@ a.button {
|
||||
font-weight: 500;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
button {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
@ -130,6 +132,9 @@ button {
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
input {
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
sm-input {
|
||||
font-size: 0.9rem;
|
||||
--border-radius: 0.3rem;
|
||||
@ -462,7 +467,7 @@ strip-select {
|
||||
}
|
||||
strip-option {
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
--border-radius: 0;
|
||||
--active-option-color: rgba(var(--background-color), 1);
|
||||
--active-option-background-color: var(--accent-color);
|
||||
@ -501,7 +506,7 @@ sm-checkbox {
|
||||
}
|
||||
.tooltip {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 8;
|
||||
cursor: pointer;
|
||||
.banner {
|
||||
position: absolute;
|
||||
@ -643,8 +648,8 @@ sm-checkbox {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
padding: 0 1.5rem;
|
||||
& > * {
|
||||
padding: 0 1.5rem;
|
||||
min-width: min(26rem, 100%);
|
||||
}
|
||||
}
|
||||
@ -722,7 +727,7 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
#quantity_type,
|
||||
#wallet_quantity_type {
|
||||
#portfolio_quantity_type {
|
||||
font-size: 0.8rem;
|
||||
padding-right: 0.5rem;
|
||||
border-right: thin solid rgba(var(--text-color), 0.3);
|
||||
@ -738,19 +743,11 @@ sm-checkbox {
|
||||
height: 100%;
|
||||
}
|
||||
#asset_page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
#asset_page__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
.icon-only {
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
}
|
||||
#trade_form {
|
||||
height: 100%;
|
||||
&::part(form) {
|
||||
@ -765,7 +762,6 @@ sm-checkbox {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#my_orders,
|
||||
#market {
|
||||
width: min(46rem, 100%);
|
||||
@ -787,8 +783,17 @@ sm-checkbox {
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: min-content repeat(3, 1fr) min-content;
|
||||
grid-template-columns: min-content 1fr auto;
|
||||
border-radius: 0.5rem;
|
||||
grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
|
||||
& > .grid {
|
||||
&:nth-of-type(2) {
|
||||
grid-area: price;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
grid-area: amount;
|
||||
}
|
||||
}
|
||||
&__type {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
@ -810,6 +815,7 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
sm-checkbox {
|
||||
grid-area: checkbox;
|
||||
cursor: pointer;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
@ -820,9 +826,17 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
&__time {
|
||||
grid-area: time;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.cancel-order {
|
||||
grid-area: cancel;
|
||||
color: var(--danger-color);
|
||||
.icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.cancel-order {
|
||||
align-items: center;
|
||||
@ -918,19 +932,22 @@ sm-checkbox {
|
||||
background-color: #e2135110;
|
||||
}
|
||||
}
|
||||
#wallet {
|
||||
#portfolio {
|
||||
display: grid;
|
||||
width: auto;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-content: flex-start;
|
||||
width: min(32rem, 100%);
|
||||
}
|
||||
.wallet_actions__wrapper {
|
||||
grid-column: span 3;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
.portfolio_actions__wrapper {
|
||||
grid-column: 1/-1;
|
||||
justify-content: flex-end;
|
||||
gap: 0.3rem;
|
||||
padding-top: 1rem;
|
||||
.button {
|
||||
flex: 1;
|
||||
color: var(--accent-color);
|
||||
padding: 0.5rem 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
@ -941,31 +958,35 @@ sm-checkbox {
|
||||
#my_assets {
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border: none;
|
||||
}
|
||||
.balance-card {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 0 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
padding: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
&.is-locked {
|
||||
padding: 1rem 0.5rem;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
.balance-card__icon {
|
||||
grid-row: span 2;
|
||||
}
|
||||
}
|
||||
&:not(.is-locked) {
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
grid-template-columns: auto auto 1fr auto auto;
|
||||
}
|
||||
input {
|
||||
align-self: center;
|
||||
}
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding: 0.6rem;
|
||||
margin: 0 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
align-self: flex-start;
|
||||
background-color: var(--accent-color--light);
|
||||
.icon {
|
||||
height: 1.3rem;
|
||||
@ -978,7 +999,8 @@ sm-checkbox {
|
||||
font-weight: 500;
|
||||
}
|
||||
&__amount-wrapper {
|
||||
grid-column: 2/3;
|
||||
margin-top: 0.5rem;
|
||||
grid-column: 3/ -1;
|
||||
gap: 0.3rem 1rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
& > :nth-child(even) {
|
||||
@ -986,7 +1008,78 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
}
|
||||
#wallet_result {
|
||||
#portfolio_cards_wrapper {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
||||
}
|
||||
.personal-asset-balance {
|
||||
align-content: flex-start;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
width: 100%;
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
&:nth-of-type(1) {
|
||||
background: url("bg-art2.svg") no-repeat bottom right, hsl(141, 100%, 88%);
|
||||
background-size: contain;
|
||||
.icon {
|
||||
background-color: hsla(141, 100%, 70%, 0.5);
|
||||
}
|
||||
.button {
|
||||
border: solid thin hsla(141, 100%, 70%, 0.5);
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
background: url("back.svg") no-repeat top right, hsl(62, 100%, 83%);
|
||||
background-size: contain;
|
||||
.icon {
|
||||
background-color: hsla(55, 100%, 50%, 0.5);
|
||||
}
|
||||
}
|
||||
& > .flex {
|
||||
margin-bottom: 0.3rem;
|
||||
.icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
fill: rgba(0, 0, 0, 0.8);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
padding-right: 0.8rem;
|
||||
justify-self: flex-start;
|
||||
border-radius: 1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
transition: box-shadow 0.3s;
|
||||
.icon {
|
||||
height: 1rem;
|
||||
background-color: transparent;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 0.3rem 0.5rem rgba(0 0 0/ 0.16);
|
||||
}
|
||||
}
|
||||
}
|
||||
#personal_rupee_balance,
|
||||
#personal_flo_balance {
|
||||
span:first-of-type {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
span:last-of-type {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
#portfolio_result {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
&__icon {
|
||||
@ -1019,7 +1112,7 @@ sm-checkbox {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#wallet_result__cta {
|
||||
#portfolio_result__cta {
|
||||
padding: 1.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
@ -1108,6 +1201,16 @@ sm-checkbox {
|
||||
width: min(60ch, 100%);
|
||||
margin-bottom: 3rem;
|
||||
align-content: flex-start;
|
||||
ul {
|
||||
list-style: initial;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
li {
|
||||
margin-left: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40rem) and (any-hover: none) {
|
||||
@ -1139,10 +1242,57 @@ sm-checkbox {
|
||||
transform: translateY(50%) scale(1.2);
|
||||
}
|
||||
}
|
||||
#asset_list_wrapper {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.listed-asset {
|
||||
border-radius: 0;
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.1);
|
||||
}
|
||||
#exchange {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#login_form {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#chart_header {
|
||||
padding: 1rem 1.5rem 0.5rem 1.5rem;
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
#trade_panel_backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background-color: rgba(0 0 0/ 0.3);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
z-index: 3;
|
||||
}
|
||||
#show_trade_panel {
|
||||
position: absolute;
|
||||
border-radius: 2rem;
|
||||
bottom: 0;
|
||||
align-self: center;
|
||||
margin-bottom: 1rem;
|
||||
z-index: 5;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#trade_form {
|
||||
position: fixed;
|
||||
height: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: auto;
|
||||
width: auto;
|
||||
z-index: 10;
|
||||
padding: 1.5rem 1.5rem 0 1.5rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
#price_chart_container {
|
||||
flex: 1;
|
||||
}
|
||||
@ -1210,6 +1360,10 @@ sm-checkbox {
|
||||
}
|
||||
#pages_container {
|
||||
grid-area: pages;
|
||||
& > * {
|
||||
margin: 0 1.5rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
.is-signed-in {
|
||||
#exchange {
|
||||
@ -1241,11 +1395,15 @@ sm-checkbox {
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
border-radius: 0 0.2rem 0.2rem 0;
|
||||
height: 50%;
|
||||
height: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-card {
|
||||
grid-template-columns: auto 1fr 1fr 1fr auto;
|
||||
grid-template-areas: "checkbox quantity price amount time cancel";
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 80rem) and (min-width: 40rem) {
|
||||
.main_navbar__item {
|
||||
@ -1292,20 +1450,6 @@ sm-checkbox {
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 20rem;
|
||||
}
|
||||
#asset_page__nav {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
#wallet {
|
||||
gap: 1rem 2rem;
|
||||
grid-template-columns: 20rem 24rem;
|
||||
&__header {
|
||||
grid-column: 1/3;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.balance-card {
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 72rem) {
|
||||
.page-layout {
|
||||
|
||||
523
docs/index.html
523
docs/index.html
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user