RanchiMall/bitflo
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Converting UI to work with BTC

Browse Source
This commit is contained in:
sairaj mote 2023-07-14 02:10:04 +05:30
parent 01cf723a96
commit 92a5c6b29f
4 changed files with 135 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
docs/css/main.css
View File

@ -1216,72 +1216,36 @@ sm-checkbox {
#portfolio_cards_wrapper { #portfolio_cards_wrapper {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
} }
.personal-asset-balance { .personal-asset-balance {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 0.5rem;
align-content: flex-start; align-content: flex-start;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
color: rgba(0, 0, 0, 0.8);
width: 100%; width: 100%;
background-color: rgba(var(--text-color), 0.03);
} }
.personal-asset-balance:not(:last-of-type) { .personal-asset-balance:not(:last-of-type) {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.personal-asset-balance:nth-of-type(1) { .personal-asset-balance .icon {
background: url("bg-art2.svg") no-repeat bottom right, hsl(141deg, 100%, 88%); height: 3rem;
background-size: contain; width: 3rem;
} padding: 0.8rem;
.personal-asset-balance:nth-of-type(1) .icon { border-radius: 3rem;
background-color: hsla(141deg, 100%, 70%, 0.5);
}
.personal-asset-balance:nth-of-type(1) .button {
border: solid thin hsla(141deg, 100%, 70%, 0.5);
}
.personal-asset-balance:nth-of-type(2) {
background: url("back.svg") no-repeat top right, hsl(62deg, 100%, 83%);
background-size: contain;
}
.personal-asset-balance:nth-of-type(2) .icon {
background-color: hsla(55deg, 100%, 50%, 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; 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); background-color: rgba(var(--foreground-color), 1);
color: rgba(var(--text-color), 1); flex-shrink: 0;
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_btc_balance span:first-of-type,
#personal_flo_balance span:first-of-type { #personal_flo_balance span:first-of-type {
font-size: 1.5rem; font-size: 1.5rem;
} }
#personal_rupee_balance span:last-of-type, #personal_btc_balance span:last-of-type,
#personal_flo_balance span:last-of-type { #personal_flo_balance span:last-of-type {
font-size: 0.9rem; font-size: 0.9rem;
} }

2
docs/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

68
docs/css/main.scss
View File

@ -625,17 +625,17 @@ sm-checkbox {
width: 100%; width: 100%;
align-items: center; align-items: center;
} }
.app-brand{ .app-brand {
display: flex; display: flex;
gap: 0.3rem; gap: 0.3rem;
align-items: center; align-items: center;
.icon{ .icon {
height: 1.7rem; height: 1.7rem;
width: 1.7rem; width: 1.7rem;
} }
} }
.app-name{ .app-name {
&__company{ &__company {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
@ -1130,66 +1130,30 @@ sm-checkbox {
#portfolio_cards_wrapper { #portfolio_cards_wrapper {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
} }
.personal-asset-balance { .personal-asset-balance {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 0.5rem;
align-content: flex-start; align-content: flex-start;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
color: rgba(0, 0, 0, 0.8);
width: 100%; width: 100%;
background-color: rgba(var(--text-color), 0.03);
&:not(:last-of-type) { &:not(:last-of-type) {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
&:nth-of-type(1) { .icon {
background: url("bg-art2.svg") no-repeat bottom right, hsl(141, 100%, 88%); height: 3rem;
background-size: contain; width: 3rem;
.icon { padding: 0.8rem;
background-color: hsla(141, 100%, 70%, 0.5); border-radius: 3rem;
} margin-right: 0.5rem;
.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); background-color: rgba(var(--foreground-color), 1);
color: rgba(var(--text-color), 1); flex-shrink: 0;
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_btc_balance,
#personal_flo_balance { #personal_flo_balance {
span:first-of-type { span:first-of-type {
font-size: 1.5rem; font-size: 1.5rem;

190
docs/index.html
View File

File diff suppressed because one or more lines are too long