Merge branch 'master' into dev
This commit is contained in:
Sai Raj
GitHub
commit
5c2ce4f03e
238
css/main.css
238
css/main.css
@ -112,7 +112,6 @@ button,
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
justify-content: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
button:focus-visible,
|
||||
.button:focus-visible {
|
||||
@ -497,7 +496,7 @@ h3 {
|
||||
}
|
||||
|
||||
.observe-empty-state:empty {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.observe-empty-state:not(:empty) + .empty-state {
|
||||
@ -709,13 +708,10 @@ h3 {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
#home {
|
||||
padding: 0;
|
||||
}
|
||||
#home > :first-child {
|
||||
#contacts > :first-child {
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
padding: 0.5rem 1.5rem 4rem 1.5rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
#primary_actions_wrapper {
|
||||
@ -738,6 +734,67 @@ h3 {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
#search {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#queried_flo_address h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
#queried_flo_address > sm-copy {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#token_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.token-item {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.transaction {
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.transaction:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.transaction .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.transaction__time, .transaction__link, .transaction__receiver {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.transaction__receiver {
|
||||
margin-left: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.transaction p {
|
||||
font-size: 0.9rem;
|
||||
max-width: unset;
|
||||
}
|
||||
.transaction__time {
|
||||
justify-self: flex-end;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#search_wrapper {
|
||||
width: min(100%, 36rem);
|
||||
}
|
||||
|
||||
#search_query_input {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#saved_ids_list {
|
||||
position: relative;
|
||||
align-content: flex-start;
|
||||
@ -803,79 +860,10 @@ h3 {
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 1rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
#transactions {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
#transactions header {
|
||||
padding: 1rem 0.7rem;
|
||||
}
|
||||
#transactions header .grid {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
#queried_flo_address {
|
||||
margin: 0.5rem 0;
|
||||
margin-left: 0.7rem;
|
||||
}
|
||||
#queried_flo_address h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
#queried_flo_address > sm-copy {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#token_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.token-item {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
#transactions_list {
|
||||
flex-direction: column;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.transaction {
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.transaction:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.transaction .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.transaction__time, .transaction__link, .transaction__receiver {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.transaction__receiver {
|
||||
margin-left: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.transaction p {
|
||||
font-size: 0.9rem;
|
||||
max-width: unset;
|
||||
}
|
||||
.transaction__time {
|
||||
justify-self: flex-end;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -885,11 +873,6 @@ h3 {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#scroll_to_top {
|
||||
border-radius: 3rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
#add_address_button {
|
||||
border-radius: 0.5rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
@ -912,6 +895,9 @@ h3 {
|
||||
#balance_card form {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#balance_card fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.token-balance {
|
||||
display: flex;
|
||||
@ -932,6 +918,25 @@ h3 {
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.token-receiver-combo {
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
.token-receiver-combo--removable {
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: "receiver receiver" "amount remove";
|
||||
}
|
||||
.token-receiver-combo--removable .token-receiver {
|
||||
grid-area: receiver;
|
||||
}
|
||||
.token-receiver-combo--removable .token-amount {
|
||||
grid-area: amount;
|
||||
}
|
||||
.token-receiver-combo--removable .remove-token-receiver {
|
||||
grid-area: remove;
|
||||
}
|
||||
|
||||
#transaction_result {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -1009,6 +1014,41 @@ h3 {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
#queried_address_transactions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#pagination_wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
z-index: 5;
|
||||
border-radius: 0.7rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.pagination__item {
|
||||
display: flex;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.pagination__item--active {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
legend,
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#smartcontracts {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
@ -1025,11 +1065,6 @@ h3 {
|
||||
#smartcontracts fieldset legend {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
#smartcontracts legend,
|
||||
#smartcontracts .label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
#smartcontracts label {
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
@ -1174,6 +1209,13 @@ h3 {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
#pagination_wrapper {
|
||||
margin: 0;
|
||||
margin-bottom: 4.8rem;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
sm-popup {
|
||||
@ -1200,6 +1242,9 @@ h3 {
|
||||
#pages_container {
|
||||
grid-area: main;
|
||||
}
|
||||
.page {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#main_navbar {
|
||||
grid-area: nav;
|
||||
border-top: none;
|
||||
@ -1235,9 +1280,12 @@ h3 {
|
||||
#retrieve_flo_id_popup {
|
||||
--width: 26rem;
|
||||
}
|
||||
#send sm-form::part(form) {
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 45% 1fr;
|
||||
#send {
|
||||
padding: 0 6vw;
|
||||
}
|
||||
#send sm-form {
|
||||
width: min(56rem, 100%);
|
||||
margin: auto;
|
||||
}
|
||||
#smart_contract_creation_templates {
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
@ -1271,9 +1319,15 @@ h3 {
|
||||
grid-template-areas: "address share button";
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 56rem) {
|
||||
#send sm-form::part(form) {
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 64rem) {
|
||||
#transactions_scroller {
|
||||
grid-template-columns: 22rem 1fr;
|
||||
#address_details_wrapper {
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#transactions_hero_section {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
224
css/main.scss
224
css/main.scss
@ -111,7 +111,6 @@ button,
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
justify-content: center;
|
||||
text-transform: capitalize;
|
||||
&:focus-visible {
|
||||
outline: var(--accent-color) solid medium;
|
||||
}
|
||||
@ -472,7 +471,7 @@ h3 {
|
||||
}
|
||||
|
||||
.observe-empty-state:empty {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.observe-empty-state:not(:empty) + .empty-state {
|
||||
@ -677,12 +676,11 @@ h3 {
|
||||
}
|
||||
}
|
||||
|
||||
#home {
|
||||
padding: 0;
|
||||
#contacts {
|
||||
& > :first-child {
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
padding: 0.5rem 1.5rem 4rem 1.5rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
#primary_actions_wrapper {
|
||||
@ -703,6 +701,64 @@ h3 {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
#search {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
#queried_flo_address {
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
& > sm-copy {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
#token_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.token-item {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.transaction {
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 0.3rem;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
&__time,
|
||||
&__link,
|
||||
&__receiver {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
&__receiver {
|
||||
margin-left: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
max-width: unset;
|
||||
}
|
||||
&__time {
|
||||
justify-self: flex-end;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
}
|
||||
#search_wrapper {
|
||||
width: min(100%, 36rem);
|
||||
}
|
||||
#search_query_input {
|
||||
justify-self: center;
|
||||
}
|
||||
#saved_ids_list {
|
||||
position: relative;
|
||||
align-content: flex-start;
|
||||
@ -765,75 +821,9 @@ h3 {
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 1rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
#transactions {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
header {
|
||||
padding: 1rem 0.7rem;
|
||||
.grid {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
#queried_flo_address {
|
||||
margin: 0.5rem 0;
|
||||
margin-left: 0.7rem;
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
& > sm-copy {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
#token_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.token-item {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
#transactions_list {
|
||||
flex-direction: column;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
.transaction {
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 0.3rem;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
&__time,
|
||||
&__link,
|
||||
&__receiver {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
&__receiver {
|
||||
margin-left: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
max-width: unset;
|
||||
}
|
||||
&__time {
|
||||
justify-self: flex-end;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
}
|
||||
.fab {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -842,10 +832,6 @@ h3 {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
|
||||
z-index: 2;
|
||||
}
|
||||
#scroll_to_top {
|
||||
border-radius: 3rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#add_address_button {
|
||||
border-radius: 0.5rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
@ -866,6 +852,9 @@ h3 {
|
||||
form {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.token-balance {
|
||||
display: flex;
|
||||
@ -887,6 +876,24 @@ h3 {
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.token-receiver-combo {
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
&--removable {
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: "receiver receiver" "amount remove";
|
||||
.token-receiver {
|
||||
grid-area: receiver;
|
||||
}
|
||||
.token-amount {
|
||||
grid-area: amount;
|
||||
}
|
||||
.remove-token-receiver {
|
||||
grid-area: remove;
|
||||
}
|
||||
}
|
||||
}
|
||||
#transaction_result {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -942,7 +949,38 @@ h3 {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
#queried_address_transactions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
#pagination_wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
z-index: 5;
|
||||
border-radius: 0.7rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
|
||||
margin: 0.5rem;
|
||||
}
|
||||
.pagination__item {
|
||||
display: flex;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
&--active {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
legend,
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
#smartcontracts {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
@ -958,11 +996,6 @@ h3 {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
legend,
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
label {
|
||||
padding: 0.3rem 0.5rem;
|
||||
&:has(input:not(:disabled):not(:checked)) {
|
||||
@ -1110,6 +1143,13 @@ h3 {
|
||||
}
|
||||
}
|
||||
}
|
||||
#pagination_wrapper {
|
||||
margin: 0;
|
||||
margin-bottom: 4.8rem;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
sm-popup {
|
||||
@ -1138,6 +1178,9 @@ h3 {
|
||||
#pages_container {
|
||||
grid-area: main;
|
||||
}
|
||||
.page {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
grid-area: nav;
|
||||
@ -1175,9 +1218,10 @@ h3 {
|
||||
--width: 26rem;
|
||||
}
|
||||
#send {
|
||||
sm-form::part(form) {
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 45% 1fr;
|
||||
padding: 0 6vw;
|
||||
sm-form {
|
||||
width: min(56rem, 100%);
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
#smart_contract_creation_templates {
|
||||
@ -1213,9 +1257,17 @@ h3 {
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 56rem) {
|
||||
#send {
|
||||
sm-form::part(form) {
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 64rem) {
|
||||
#transactions_scroller {
|
||||
grid-template-columns: 22rem 1fr;
|
||||
#address_details_wrapper {
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#transactions_hero_section {
|
||||
|
||||
803
index.html
803
index.html
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user