diff --git a/client/index.pug b/client/index.pug index 15fa85af..3d42213e 100644 --- a/client/index.pug +++ b/client/index.pug @@ -25,7 +25,6 @@ head meta(name='viewport', content='width=device-width, initial-scale=1') link(rel='shortcut icon', type='image/png', href=staticRoot+'img/favicon.png') - link(rel='stylesheet', href=staticRoot+'bootstrap.min.css') link(rel='stylesheet', href=staticRoot+cssPath) if process.env.CANONICAL_URL diff --git a/client/npm-shrinkwrap.json b/client/npm-shrinkwrap.json index 705f1dbd..e7a0c5ab 100644 --- a/client/npm-shrinkwrap.json +++ b/client/npm-shrinkwrap.json @@ -20,7 +20,6 @@ "@cycle/storage": "^5.1.2", "babelify": "^10.0.0", "basic-l10n": "^2.0.0", - "bootstrap": "^4.4.1", "browserify-package-json": "^1.0.1", "bs58check": "^2.1.2", "bundle-collapser": "^1.4.0", @@ -755,22 +754,6 @@ "resolved": "https://registry.npmjs.org/basic-l10n/-/basic-l10n-2.0.0.tgz", "integrity": "sha512-6JVIFNEj1cmuCZ5dTiDNAsLS4P68ynIPI7sg1q1h4etZU1ETJ2obhSY7OJyFn9KMbuNHMynh0r5r/v1I6w/YKw==" }, - "node_modules/bootstrap": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz", - "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==", - "engines": { - "node": ">=6" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - }, - "peerDependencies": { - "jquery": "1.9.1 - 3", - "popper.js": "^1.16.0" - } - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1701,18 +1684,6 @@ "node": ">=4.0.0" } }, - "node_modules/popper.js": { - "version": "1.16.1", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", - "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", - "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", - "license": "MIT", - "peer": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/process-nextick-args": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", diff --git a/client/package.json b/client/package.json index ed4186d9..f62a06e1 100644 --- a/client/package.json +++ b/client/package.json @@ -18,7 +18,6 @@ "@cycle/storage": "^5.1.2", "babelify": "^10.0.0", "basic-l10n": "^2.0.0", - "bootstrap": "^4.4.1", "browserify-package-json": "^1.0.1", "bs58check": "^2.1.2", "bundle-collapser": "^1.4.0", diff --git a/client/src/app.js b/client/src/app.js index d3dc0d9d..d602ae7c 100644 --- a/client/src/app.js +++ b/client/src/app.js @@ -26,10 +26,6 @@ import { import l10n, { defaultLang } from './l10n' import * as views from './views' -if (process.browser) { - require('bootstrap/js/dist/collapse') -} - const apiBase = (process.env.API_URL || '/api').replace(/\/+$/, '') , setBase = ({ path, ...r }) => ({ ...r, url: path.includes('://') || path.startsWith('./') ? path : apiBase + path }) @@ -70,7 +66,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search , last_txids: parseHashes(loc.query.txids) , est_chain_seen_count: +loc.query.c || 0 })) - , goAssetList$ = !process.env.IS_ELEMENTS ? O.empty() : route('/assets').map(loc => ({ + , goAssetList$ = !process.env.IS_ELEMENTS ? O.empty() : route('/assets').map(loc => ({ start_index: +loc.query.start_index || 0 , sort_field: loc.query.sort_field != null ? loc.query.sort_field : 'name' , sort_dir: loc.query.sort_dir != null ? loc.query.sort_dir : 'asc' @@ -150,7 +146,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search , prevBlocks$ = process.browser ? O.empty() : goBlocks$.combineLatest(tipHeight$, (d, tipHeight) => d.start_height != null && d.start_height < tipHeight ? Math.min(tipHeight, d.start_height+blocksPerPage) : null) - + // Single block and associated txs , block$ = reply('block').merge(goBlock$.mapTo(null)) , blockStatus$ = reply('block-stat').merge(goBlock$.mapTo(null)) @@ -200,7 +196,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search , mempoolRecent$ = reply('recent') // dashboard - , dashboardState$ = O.combineLatest(blocks$, mempoolRecent$, (blks, txs) => + , dashboardState$ = O.combineLatest(blocks$, mempoolRecent$, (blks, txs) => ({ dashblocks: blks.slice(0, 5), dashTxs: txs.slice(0, 5)})) // Fee estimates diff --git a/client/src/driver/instascan.js b/client/src/driver/instascan.js index 8ed3a2bb..e946696e 100644 --- a/client/src/driver/instascan.js +++ b/client/src/driver/instascan.js @@ -15,7 +15,7 @@ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { document.body.appendChild(script) } - const Instascan$ = O.fromEvent(document.body, 'load', true).filter(e => e.target.src?.endsWith('/instascan.min.js')).map(_ => window.Instascan).share() + const Instascan$ = O.fromEvent(document.body, 'load', true).filter(e => e.target?.src?.endsWith('/instascan.min.js')).map(_ => window.Instascan).share() , Scanner$ = Instascan$.map(Instascan => Instascan.Scanner) , Camera$ = Instascan$.map(Instascan => Instascan.Camera) diff --git a/client/src/views/addr.js b/client/src/views/addr.js index a8ea417f..79bebc17 100644 --- a/client/src/views/addr.js +++ b/client/src/views/addr.js @@ -41,8 +41,8 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
-
-
+
+

{t`Address`}

{display_addr} @@ -51,8 +51,8 @@ export default ({ t, addr, addrQR, addrTxs, goAddr, openTx, spends, tipHeight, l
}
- {show_qr &&
- + {show_qr &&
+
}
@@ -161,4 +161,3 @@ const pagingNav = (addr, last_seen_txid, est_curr_chain_seen_count, prev_paging_ ] - diff --git a/client/src/views/block.js b/client/src/views/block.js index 31c504c6..54dbd872 100644 --- a/client/src/views/block.js +++ b/client/src/views/block.js @@ -166,9 +166,9 @@ const pagingNav = (block, { nextBlockTxs, prevBlockTxs, t }) => const btnDetails = (blockhash, isOpen, query, t) => process.browser // dynamic button in browser env - ?
{btnDetailsContent(isOpen, t)}
+ ?
{btnDetailsContent(isOpen, t)}
// or a plain link in server-side rendered env - : {btnDetailsContent(isOpen, t)} + : {btnDetailsContent(isOpen, t)} const btnDetailsContent = (isOpen, t) =>
diff --git a/client/src/views/error.js b/client/src/views/error.js index b252ebcf..be4826d4 100644 --- a/client/src/views/error.js +++ b/client/src/views/error.js @@ -8,9 +8,10 @@ const formatError = err => ? 'Esplora is currently unavailable, please try again later.' : (err.message || err.toString()) -export const error = ({ t, error, ...S }) => layout(
-

{ t(formatError(error)) }

-
+export const error = ({ t, error, ...S }) => layout( +
+

{ t(formatError(error)) }

+
, { t, ...S }) export const notFound = S => error({ ...S, error: 'Page Not Found' }) diff --git a/client/src/views/home.js b/client/src/views/home.js index 6f664c46..e3bdd11a 100644 --- a/client/src/views/home.js +++ b/client/src/views/home.js @@ -6,19 +6,16 @@ import { transactions } from './transactions' const isTouch = process.browser && ('ontouchstart' in window) const homeLayout = (body, { t, activeTab, ...S }) => layout( -
- { body } -
+ body , { t, isTouch, activeTab, ...S }) export const dashBoard = ({ t, blocks, dashboardState, loading, ...S }) => { const { dashblocks, dashTxs } = dashboardState || {} return (homeLayout( -
- { blks( dashblocks, true, false, { t, ...S }) } - {transactions( dashTxs, true, { t } )} - -
+ [ + blks( dashblocks, true, false, { t, ...S }), + transactions( dashTxs, true, { t } ) + ] , { ...S, t, activeTab: 'dashBoard' }) )} diff --git a/client/src/views/lander.js b/client/src/views/lander.js index 0be96afc..9533f117 100644 --- a/client/src/views/lander.js +++ b/client/src/views/lander.js @@ -27,8 +27,8 @@ const logoSources = { const LandingPage = ({ t, theme, ...S }) => { const logos = logoSources[theme || 'dark'] return layout( -
- +
+
@@ -80,8 +80,8 @@ Faster, always available, and easy to integrate
into wallets, exchanges, an
WHY EXPLORER API
-

High performance service - optimized for scaling and uptime

-

Proven in production, and trusted by some of the biggest names in the industry,
our API is built to handle demanding workloads so your team can focus on growth.

+

High performance service - optimized for scaling and uptime

+

Proven in production, and trusted by some of the biggest names in the industry,
our API is built to handle demanding workloads so your team can focus on growth.

@@ -103,7 +103,7 @@ Faster, always available, and easy to integrate
into wallets, exchanges, an
FEATURES
-

Explorer handles millions of requests on globally distributed infrastructure so your services are always online

+

Explorer handles millions of requests on globally distributed infrastructure so your services are always online

icon @@ -134,6 +134,7 @@ Faster, always available, and easy to integrate
into wallets, exchanges, an
+
@@ -150,9 +151,10 @@ Faster, always available, and easy to integrate
into wallets, exchanges, an
+
OUR OFFER
-

Pricing

+

Pricing

@@ -212,4 +214,4 @@ Faster, always available, and easy to integrate
into wallets, exchanges, an , { t, activeTab: 'apiLanding', ...S }) } -export default LandingPage \ No newline at end of file +export default LandingPage diff --git a/client/src/views/layout.js b/client/src/views/layout.js index bca0a18d..4adec039 100644 --- a/client/src/views/layout.js +++ b/client/src/views/layout.js @@ -5,10 +5,10 @@ import subnav from './sub-navbar' export default (body, opt) =>
-
- { navbar(opt) } - {subnav(opt.t, opt.isTouch, opt.activeTab, opt.theme, opt.page)} + { navbar(opt) } + {subnav(opt.t, opt.isTouch, opt.activeTab, opt.theme, opt.page)} +
{ body } -
+ { footer(opt) }
diff --git a/client/src/views/mempool.js b/client/src/views/mempool.js index 62a338b3..4b972281 100644 --- a/client/src/views/mempool.js +++ b/client/src/views/mempool.js @@ -30,10 +30,10 @@ export default ({ t, mempool, feeEst, ...S }) => mempool && feeEst && layout(
-
+
{ mempool.fee_histogram.length > 0 && -
-

Fee rate distribution

+
+

Fee rate distribution

{ squashed = squashFeeHistogram(mempool.fee_histogram), squashed.map(([ rangeStart, binSize ], i) => binSize > 0 &&
{`${rangeStart.toFixed(1)}${i == 0 ? '+' : ' - '+squashed[i-1][0].toFixed(1)}`} @@ -45,9 +45,9 @@ export default ({ t, mempool, feeEst, ...S }) => mempool && feeEst && layout( } { !!Object.keys(feeEst).length && -
+

Fee rate estimates

- +
{ sortEst(feeEst).map(([ target, feerate ]) => diff --git a/client/src/views/pushtx.js b/client/src/views/pushtx.js index a302a9ad..a3a09763 100644 --- a/client/src/views/pushtx.js +++ b/client/src/views/pushtx.js @@ -7,7 +7,7 @@ export default ({ t, ...S }) => layout(
- +
diff --git a/client/src/views/sub-navbar.js b/client/src/views/sub-navbar.js index df117b63..99c103d6 100644 --- a/client/src/views/sub-navbar.js +++ b/client/src/views/sub-navbar.js @@ -4,17 +4,15 @@ import menu from './navbar-menu' import networkSelection from './network-selection' export default ( t, isTouch, activeTab, theme, page) => -
-
- { networkSelection({t, theme, page}) } -
- Dashboard - Blocks - Transactions - { process.env.IS_ELEMENTS ? Assets : "" } - Explorer API -
- - { search({ t, autofocus: !isTouch }) } +
+ { networkSelection({t, theme, page}) } +
+ Dashboard + Blocks + Transactions + { process.env.IS_ELEMENTS ? Assets : "" } + Explorer API
+ + { search({ t, autofocus: !isTouch }) }
\ No newline at end of file diff --git a/client/src/views/transactions-all.js b/client/src/views/transactions-all.js index ff1adfbb..900a5e81 100644 --- a/client/src/views/transactions-all.js +++ b/client/src/views/transactions-all.js @@ -11,8 +11,5 @@ const homeLayout = (body, { t, activeTab, ...S }) => layout( , { t, isTouch, activeTab, ...S }) export const recentTxs = ({ mempoolRecent, t, ...S }) => homeLayout( -
- {transactions( mempoolRecent, false, { t, ...S })} -
+ transactions( mempoolRecent, false, { t, ...S }) , { ...S, t, activeTab: 'recentTxs' }) - \ No newline at end of file diff --git a/client/src/views/tx.js b/client/src/views/tx.js index 9560146e..9e29df03 100644 --- a/client/src/views/tx.js +++ b/client/src/views/tx.js @@ -43,7 +43,7 @@ export default ({ t, tx, tipHeight, spends, openTx, page, unblinded, ...S }) =>
{txHeader(tx, { t, tipHeight, ...S })} - {(unblinded && unblinded.error) ?
{t`Warning:`} {unblinded.error.toString()}
:
} + {(unblinded && unblinded.error) ?
{t`Warning:`} {unblinded.error.toString()}
:
} {txBox(tx, { openTx, tipHeight, t, spends, query: page.query, ...S })}
diff --git a/flavors/blockstream/extras.css b/flavors/blockstream/extras.css index 4d6c699c..f52d3a29 100644 --- a/flavors/blockstream/extras.css +++ b/flavors/blockstream/extras.css @@ -1,17 +1,16 @@ .navbar-brand::before { - background: url(img/icons/explorer_logo.svg); + background-image: url(img/icons/explorer_logo.svg); background-size: contain; width: 245px; + height: 54px; margin: 0; background-repeat: no-repeat; } .theme-light .navbar-brand::before { - background: url(img/icons/explorer_dark_logo.svg); + background-image: url(img/icons/explorer_dark_logo.svg); background-repeat: no-repeat; background-size: contain; - width: 245px; - margin: 0; } .footer-logo::before { @@ -44,27 +43,24 @@ margin-top: 30px; } - .theme-light .navbar-brand::before, .navbar-brand::before { - - background-size: 54px 54px; - width: 54px; + .navbar-brand::before { + width: 45px; + background-repeat: no-repeat; } .theme-light .navbar-brand::before { - background: url(img/icons/dark-logo-icon.svg); - background-repeat: no-repeat; + background-image: url(img/icons/dark-logo-icon.svg); } .navbar-brand::before { - background: url(img/icons/light-logo-icon.svg); - background-repeat: no-repeat; + background-image: url(img/icons/light-logo-icon.svg); } } -.theme-light .primary-btn, -.theme-light .primary-btn:link, -.theme-light .primary-btn:visited, -.theme-light .primary-btn:hover, +.theme-light .primary-btn, +.theme-light .primary-btn:link, +.theme-light .primary-btn:visited, +.theme-light .primary-btn:hover, .theme-light .primary-btn:focus { color: #0C0C0F; } diff --git a/www/bootstrap.min.css b/www/bootstrap.min.css deleted file mode 120000 index 7c467309..00000000 --- a/www/bootstrap.min.css +++ /dev/null @@ -1 +0,0 @@ -../client/node_modules/bootstrap/dist/css/bootstrap.min.css \ No newline at end of file diff --git a/www/light-theme_style.css b/www/light-theme_style.css index fd4cd11c..4f284dc8 100644 --- a/www/light-theme_style.css +++ b/www/light-theme_style.css @@ -204,7 +204,7 @@ body.theme-light { color: #22242c; } -.theme-light .dash-container .view-more img{ +.theme-light .view-more img{ filter: brightness(0) saturate(100%) invert(40%) sepia(89%) saturate(604%) hue-rotate(159deg) brightness(91%) contrast(96%); } diff --git a/www/style.css b/www/style.css index 0ddcf9bc..3da4530b 100644 --- a/www/style.css +++ b/www/style.css @@ -15,11 +15,19 @@ display: none !important; } +html { + overflow: auto; +} + body { direction: ltr; text-align: left; font-family: "Inter", sans-serif; color: #fff; + margin: 0px; + padding: 0px; + line-height: 1.5; + overflow-x: hidden; } body.theme-dark { @@ -30,6 +38,27 @@ body[lang=he] { font-family: "Open Sans Hebrew","Helvetica Neue",Helvetica,Arial,sans-serif; } +input { + font-family: Inter; + outline: none; +} + +div { + box-sizing: border-box; +} + +h1, h2, h3, p { + margin: 0px; +} + +img { + vertical-align: middle; +} + +ul { + margin: 0px; +} + .text-white { color: #FFF; } .text-gray { color: #B5BDC2; } @@ -380,7 +409,7 @@ body[lang=he] { .pl-7 { padding-left: 100px; } -.g-btn { font-family: "Chakra Petch", sans-serif; font-style: normal; font-weight: 700; line-height: 22px; letter-spacing: normal; cursor: pointer; width: 100%; max-width: max-content; padding: 10px 30px; display: inline-block; outline: none; transition: 0.3s ease-out; text-decoration: none; text-align: center; border: none; background: none; } +.g-btn { font-family: "Chakra Petch", sans-serif; font-style: normal; font-weight: 700; line-height: 22px; letter-spacing: normal; cursor: pointer; width: 100%; max-width: max-content; padding: 10px 30px; display: inline-block; outline: none; transition: 0.3s ease-out; text-decoration: none; text-align: center; border: none; background: none; font-size: 16px;} .g-btn:hover, .g-btn:active { box-shadow: 149 157 165/20% 0px 8px 24px; transition: 0.3s ease-out; text-decoration: none; } @@ -405,12 +434,6 @@ a, a:link, a:visited, a:hover, a:focus { text-decoration: none; } -.content-wrap { - min-height: calc(100vh - 60px - 24px); - margin-bottom: 24px; - overflow: hidden; -} - .table { color: inherit } @@ -418,18 +441,32 @@ a, a:link, a:visited, a:hover, a:focus { /*New Design CSS Flexbox */ /* Main Navigation */ -.container{ +.form-group { + margin-bottom: 16px; +} + +.explorer-container { + display: flex; + flex-direction: column; width: 100%; - max-width: 1200px !important; - padding-left: 20px !important; - padding-right: 20px !important; + min-height: 100vh; + max-width: 1200px; + padding: 0px 20px; + padding-top: 10px; + box-sizing: border-box; + margin-left: auto; + margin-right: auto; +} + +.explorer-main { + flex: 1 0 auto; + padding-bottom: 100px; } .nav-container{ display: flex; justify-content: space-between; align-items: center; - padding: 10px 0; } .main-nav-container{ @@ -504,7 +541,10 @@ a, a:link, a:visited, a:hover, a:focus { visibility: hidden; position: absolute; top: 70px; - right: 0; + + /* offset padding on 'explorer-container'*/ + right: -20px; + z-index: 10; transition: .1s; border-radius: 8px; @@ -554,11 +594,12 @@ a, a:link, a:visited, a:hover, a:focus { font-size: 0px; margin-right: 0; } + .navbar-brand::before { - width: 54px; - height: 54px; - background: url(img/icons/menu-logo.svg); - background-size: 54px 54px; + width: 45px; + height: 45px; + background-image: url(img/icons/menu-logo.svg); + background-size: 45px 45px; display: inline-block; vertical-align: top; content: ' '; @@ -570,6 +611,8 @@ a, a:link, a:visited, a:hover, a:focus { color: #fff; border-radius: 5px; border: 0; + cursor: pointer; + line-height: 1.5; } .btn-primary:hover { background: #292e35; @@ -590,6 +633,9 @@ table th { text-transform: uppercase; } +.block-header-title, .transaction-header-title { + margin-bottom: .5rem; +} .block-header-title::before { content: ""; @@ -923,10 +969,6 @@ table th { /* HEADER END */ -body > .container, .navbar > .container, body > .container, .content-wrap > div > .container, footer > .container { - max-width: 1000px; -} - .loading-page, .not-found-page { margin-top: 100px; } @@ -935,6 +977,39 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div text-align: center; } +.error-text-center { + margin-top: 40px; + display: flex; + justify-content: center; +} + +.error-text-center h1 { + font-family: Inter; + font-weight: 500; + font-size: 40px; +} + +.list-unstyled { + list-style: none; +} + +.text-warning { + color: #ffc107 !important; + text-decoration: none; +} + +.text-danger { + color: #DC3544 !important; +} + +.text-success { + color: #28a745 !important; +} + +.text-info { + color: #17a2b8 !important; +} + /* recent table */ .blocks-table .blocks-table-row { display: table; @@ -983,6 +1058,7 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div .blocks-table-row { color: #FFF !important; + box-sizing: border-box; } @@ -1052,6 +1128,7 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div .transactions-table-row { color: #FFF !important; + box-sizing: border-box; } .highlighted-text { @@ -1191,7 +1268,7 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div vertical-align: top; } -.transaction-box:not(:first-of-type) { +.transaction-box { margin-top: 24px; } @@ -1232,9 +1309,12 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div font-weight: 600; } +.float-right { + float: right; +} + .details-btn { - width: 200px; - margin: 20px 30px; + width: 140px; } .details-btn > div { @@ -1251,12 +1331,8 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div height: 50px; background-color: #FA8A00; color: #0C0C0F; -} - -.details-btn > div { display: table; table-layout: fixed; - width: 80%; float: right; } @@ -1293,6 +1369,10 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div background-image: url(img/icons/minus.png); } +.block-details-btn { + margin: 20px; +} + .transaction-box > .ins-and-outs { display: table; table-layout: fixed; @@ -1454,6 +1534,7 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div text-align: right; text-transform: uppercase; color: rgba(255, 187, 0, 1); + font-size: 16px; } .transaction-box > .footer > div:nth-child(3) > span:nth-child(2) { @@ -1461,6 +1542,33 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div text-transform: none; } +.addr-header-layout { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + margin-left: -15px; + margin-right: -15px; +} + +.addr-header-main { + box-sizing: border-box; + flex: 0 0 66.666667%; + max-width: 66.666667%; + min-width: 0; + padding-left: 15px; + padding-right: 15px; +} + +.addr-header-qr { + box-sizing: border-box; + display: flex; + flex: 0 0 33.333333%; + justify-content: flex-end; + max-width: 33.333333%; + padding-left: 15px; + padding-right: 15px; +} + .address-qr-code { width: 182px; } @@ -1469,7 +1577,7 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div width: 100%; height: 216px; line-height: 1.5; - margin-top: 100px; + margin-top: auto; display: flex; justify-content: center; @@ -1570,6 +1678,7 @@ body > .container, .navbar > .container, body > .container, .content-wrap > div align-items: center; justify-content: center; padding: 10px; + box-sizing: border-box; } @@ -2137,6 +2246,14 @@ body::after{ .jumbotron-fluid{ height: auto; } + .addr-header-main, + .addr-header-qr { + flex-basis: 100%; + max-width: 100%; + } + .addr-header-qr { + justify-content: center; + } .address-qr-code { display: block; margin: 0 auto; @@ -2437,9 +2554,26 @@ body.qr-scanning .qr-scanner { /* Mempool histogram */ +.mempool-layout { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + margin-left: -15px; + margin-right: -15px; +} + +.mempool-section-heading { + text-align: center; +} + dl.mempool-histogram { + box-sizing: border-box; display: flex; flex-direction: column; + flex: 0 0 66.666667%; + max-width: 66.666667%; + padding-left: 15px; + padding-right: 15px; position: relative; } dl.mempool-histogram .text { @@ -2492,12 +2626,42 @@ dl.mempool-histogram .bar:before { } /* Fee estimates */ .fee-estimates { + box-sizing: border-box; + flex: 0 0 33.333333%; font-size: 0.9em; + max-width: 33.333333%; + padding-left: 15px; + padding-right: 15px; + text-align: center; +} +.fee-estimates table { + border-collapse: collapse; + width: 100%; } .fee-estimates th, .fee-estimates td { padding: 0.6rem 0.2rem; } +.transaction-warning { + text-align: center; +} + +@media only screen and (max-width: 767.98px) { + dl.mempool-histogram, + .fee-estimates { + flex-basis: 50%; + max-width: 50%; + } +} + +@media only screen and (max-width: 575.98px) { + dl.mempool-histogram, + .fee-estimates { + flex-basis: 100%; + max-width: 100%; + } +} + /**** * Burger Menu Hover works on Bigscreen only @@ -2671,6 +2835,7 @@ dl.mempool-histogram .bar:before { justify-content: space-between; align-items: center; height: 79px; + margin-top: 10px; } .sub-nav { @@ -2799,6 +2964,38 @@ dl.mempool-histogram .bar:before { width: 100%; } +#rawtx { + display: block; + width: 100%; + padding: .375rem .75rem; + box-sizing: border-box; + font-size: 1rem; + font-family: Inter; + line-height: 1.5; + border-radius: .25rem; + border: 1px solid #ced4da; +} + +#rawtx:focus { + outline: 0; + box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); +} + +.rawtx-label { + padding-top: calc(.5rem + 1px); + padding-bottom: calc(.5rem + 1px); + font-size: 1.25rem; + line-height: 1.5; + display: block; +} + +.rawtx-label h1 { + font-weight: 500; + margin-bottom: .5rem; + font-size: 2.5rem; + line-height: 1.2; +} + .search { width: 35%; } @@ -2825,6 +3022,14 @@ dl.mempool-histogram .bar:before { padding: 0px; } +.search-bar-input::placeholder { + color: #6c757d; +} + +.qrcode-link img { + vertical-align: middle; +} + .search-bar-submit { align-items: center; background: none; @@ -2877,6 +3082,7 @@ a.back-link img{ } .assets-table .assets-table-row{ + box-sizing: border-box; padding:20px 40px; } @@ -2888,11 +3094,11 @@ h3.table-title{ margin: 10px 40px 30px; } -.dash-container .tx-container{ - margin-top: 50px; +.tx-container, .block-container { + margin-top: 40px; } -.dash-container .view-more { +.view-more { display: flex; width: 100%; justify-content: center; @@ -2900,7 +3106,7 @@ h3.table-title{ margin-top: 20px; } -.dash-container .view-more img{ +.view-more img{ margin-left: 5px; width: 25px; } @@ -2928,7 +3134,6 @@ h3.table-title{ width: 95vw; position: absolute; top: 0px; - right: -15px; z-index: 1; transition: none; } @@ -2984,7 +3189,6 @@ h3.table-title{ flex-direction: column; gap: 24px; align-items: initial; - padding: 30px 10px 10px 10px; } .sub-nav{ @@ -3243,6 +3447,13 @@ h3.table-title{ max-width: max-content; color: #0C0C0F; margin: 0 auto; + font-size: 75%; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .info-section { @@ -3259,6 +3470,10 @@ h3.table-title{ margin: 0 auto 50px; } +.info-section, .features-section { + text-align: center; +} + @media only screen and (max-width: 475px) { .info-section p { margin-bottom: 25px; @@ -3297,6 +3512,10 @@ h3.table-title{ flex-wrap: wrap; } +.feature p { + margin-bottom: 1rem; +} + .feature { flex: 0 1 calc(33.333% - 20px); box-sizing: border-box; @@ -3317,16 +3536,34 @@ h3.table-title{ } } - .feature img { margin-bottom: 20px; } +.landing-section-background { + position: absolute; + width: 100vw; + height: 100%; + top: 0px; + z-index: 0; + left: 50%; + margin-left: -50vw; +} + .cta-section { - background: #1E2024; + position: relative; padding: 80px 0; } +.cta-section .landing-section-background { + background: #1E2024; +} + +.cta-section .container { + position: relative; + z-index: 1; +} + .cta-card { display: flex; justify-content: space-between; @@ -3353,8 +3590,17 @@ h3.table-title{ } .pricing-section { + position: relative; padding: 80px 0; - background: linear-gradient(121deg, #E08920 11.38%, #244652 84.19%); +} + +.pricing-section .landing-section-background { + background: linear-gradient(121deg, #E08920 11.38%, #244652 84.19%); +} + +.pricing-section .container { + position: relative; + z-index: 1; } .pricing-section h2 { @@ -3368,6 +3614,10 @@ h3.table-title{ align-items: stretch; } +.pricing-section .title { + text-align: center; +} + @media only screen and (max-width: 1080px) { .pricing { flex-direction: column; @@ -3386,6 +3636,12 @@ h3.table-title{ flex-direction: column; } +.pricing-card .primary-btn { + max-width: initial; + width: initial; + font-size: 14px; +} + @media only screen and (max-width: 1080px) { .pricing-card { min-height: auto; @@ -3488,12 +3744,6 @@ h3.table-title{ color: #22E1C9; } -.pricing-card .g-btn { - font-size: 14px; - margin-top: auto; - max-width: none; -} - @media only screen and (max-width: 1080px) { .pricing-card .g-btn { margin-top: 16px;
Targetsat/vBMempool depth
{t`${target} blocks`}{feerate.toFixed(2)}{t`${formatVMB(getMempoolDepth(mempool.fee_histogram, feerate))} from tip`}