UI tweaks
This commit is contained in:
sairaj mote
parent
a68191de3a
commit
6b7644ada4
24
css/main.css
24
css/main.css
@ -16,6 +16,7 @@ body {
|
||||
|
||||
body {
|
||||
--accent-color: #4d77ff;
|
||||
--accent-color-rgb: 77, 119, 255;
|
||||
--text-color: 20, 20, 20;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
@ -34,6 +35,7 @@ body {
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color: #a0b6ff;
|
||||
--accent-color-rgb: 160, 182, 255;
|
||||
--text-color: 220, 220, 220;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
@ -305,7 +307,7 @@ ol li::before {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.breakable {
|
||||
.wrap-around {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
@ -784,11 +786,17 @@ ol li::before {
|
||||
}
|
||||
|
||||
#address_balance_card {
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: rgba(var(--accent-color-rgb), 0.2);
|
||||
}
|
||||
|
||||
#address_balance {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -829,7 +837,10 @@ ol li::before {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem 1rem;
|
||||
align-items: center;
|
||||
grid-template-areas: "icon receiver receiver" "icon time amount";
|
||||
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid";
|
||||
}
|
||||
.transaction:not(:last-of-type) {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.transaction__amount {
|
||||
white-space: nowrap;
|
||||
@ -876,6 +887,11 @@ ol li::before {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.transaction__id {
|
||||
grid-area: txid;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: absolute;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -15,6 +15,7 @@ body {
|
||||
|
||||
body {
|
||||
--accent-color: #4d77ff;
|
||||
--accent-color-rgb: 77, 119, 255;
|
||||
--text-color: 20, 20, 20;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
@ -33,6 +34,7 @@ body {
|
||||
|
||||
body[data-theme="dark"] {
|
||||
--accent-color: #a0b6ff;
|
||||
--accent-color-rgb: 160, 182, 255;
|
||||
--text-color: 220, 220, 220;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
@ -281,7 +283,7 @@ ol {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.breakable {
|
||||
.wrap-around {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
@ -730,11 +732,16 @@ ol {
|
||||
}
|
||||
}
|
||||
#address_balance_card {
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: rgba(var(--accent-color-rgb), 0.2);
|
||||
}
|
||||
#address_balance {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.card {
|
||||
padding: 0.5rem 0;
|
||||
@ -769,7 +776,10 @@ ol {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem 1rem;
|
||||
align-items: center;
|
||||
grid-template-areas: "icon receiver receiver" "icon time amount";
|
||||
grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid";
|
||||
&:not(:last-of-type) {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
&__amount {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -819,6 +829,11 @@ ol {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
&__id {
|
||||
grid-area: txid;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
}
|
||||
.fab {
|
||||
position: absolute;
|
||||
|
||||
10
index.html
10
index.html
@ -86,7 +86,7 @@
|
||||
</button>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="margin-bottom-1">Check address Details</h4>
|
||||
<h4 class="margin-bottom-1">Check balance and transactions</h4>
|
||||
<sm-form class="flex" style="--gap: 0.5rem;">
|
||||
<sm-input type="search" id="check_address_input" placeholder="BTC Address" data-btc-address
|
||||
error-text="Invalid BTC address" required>
|
||||
@ -100,7 +100,7 @@
|
||||
<button id="check_address_button" class="button button--primary cta" style="height: 3.2rem;"
|
||||
type="submit" disabled>GO</button>
|
||||
</sm-form>
|
||||
<div id="address_balance_card" class="flex align-center space-between hidden">
|
||||
<div id="address_balance_card" class="grid gap-1 hidden">
|
||||
<div class="flex">
|
||||
<svg class="icon margin-right-0-3" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
@ -113,7 +113,8 @@
|
||||
</div>
|
||||
<output id="address_balance" class="amount-shown"></output>
|
||||
</div>
|
||||
<div class="flex align-center space-between hidden margin-bottom-1">
|
||||
<div class="flex align-center space-between hidden margin-bottom-1 sticky top-0"
|
||||
style="background-color: rgba(var(--foreground-color), 1);">
|
||||
<h5>Transactions</h5>
|
||||
<strip-select id="filter_selector">
|
||||
<strip-option value="sent" selected>Sent</strip-option>
|
||||
@ -1089,9 +1090,10 @@
|
||||
return html.node`
|
||||
<li class="${className}" data-txid="${txid}">
|
||||
<div class="transaction__icon">${icon}</div>
|
||||
<div class="transaction__receiver breakable">${transactionReceiver}</div>
|
||||
<time class="transaction__time">${getFormattedTime(time)}</time>
|
||||
<div class="transaction__amount amount-shown" data-btc-amount="${amount}">${formatAmount(amount * globalExchangeRate[getRef('currency_selector').value])}</div>
|
||||
<div class="transaction__receiver wrap-around">${transactionReceiver}</div>
|
||||
<div class="transaction__id wrap-around">TXID: ${txid}</div>
|
||||
</li>
|
||||
`;
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user