From 81c569174011e99ef5698c7f8928ca9483797d61 Mon Sep 17 00:00:00 2001 From: Randall Naar Date: Tue, 14 Jul 2026 15:57:54 -0400 Subject: [PATCH] Extract reusable Tooltip component and improve mobile responsiveness. --- client/src/app.js | 10 +- client/src/components/info-card.js | 9 +- client/src/components/status-badge.js | 14 + client/src/components/tooltip.js | 10 + client/src/lib/elements.js | 3 +- client/src/views/asset.js | 8 +- client/src/views/block-details-card.js | 5 +- client/src/views/block.js | 4 +- client/src/views/blocks.js | 11 +- client/src/views/difficulty-adjustment.js | 15 +- client/src/views/transactions.js | 43 +- client/src/views/tx.js | 21 +- client/src/views/util.js | 3 +- www/style.css | 632 ++++++++++++++-------- 14 files changed, 506 insertions(+), 282 deletions(-) create mode 100644 client/src/components/status-badge.js create mode 100644 client/src/components/tooltip.js diff --git a/client/src/app.js b/client/src/app.js index 66ea08e7..a6d6f89e 100644 --- a/client/src/app.js +++ b/client/src/app.js @@ -547,6 +547,7 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search }) on('.table-copy-button', 'click', { preventDefault: true }).subscribe(e => e.stopPropagation()) + on('.tooltip', 'click', { preventDefault: true }).subscribe(e => e.stopPropagation()) on('.toggle-container', 'click').subscribe(({ ownerTarget: burgerMenu }) => { burgerMenu.classList.toggle('open-menu'); @@ -569,12 +570,19 @@ export default function main({ DOM, HTTP, route, storage, scanner: scan$, search }) document.addEventListener('click', e => { + const activeTooltip = document.activeElement + if (activeTooltip && activeTooltip.classList.contains('tooltip') && !e.target.closest('.tooltip')) { + activeTooltip.blur() + } if (e.target.closest('.main-nav-container')) return closeNetworkMenus() }) document.addEventListener('keydown', e => { - if (e.key == 'Escape') closeNetworkMenus() + if (e.key == 'Escape') { + closeNetworkMenus() + document.activeElement && document.activeElement.classList.contains('tooltip') && document.activeElement.blur() + } const hasModifier = e.metaKey || e.ctrlKey , noExtraModifiers = !e.altKey && !e.shiftKey diff --git a/client/src/components/info-card.js b/client/src/components/info-card.js index 9b655ea1..993d0538 100644 --- a/client/src/components/info-card.js +++ b/client/src/components/info-card.js @@ -1,3 +1,5 @@ +import { Tooltip } from "./tooltip"; + export const InfoCard = ({ title, tooltip, @@ -16,12 +18,7 @@ export const InfoCard = ({
{iconSrc ? : null}

{title}

- {tooltip ? ( -
- -
{tooltip.text}
-
- ) : null} + {tooltip ? : null} {headerValue !== undefined ? (

{headerValue}

) : null} diff --git a/client/src/components/status-badge.js b/client/src/components/status-badge.js new file mode 100644 index 00000000..ea4b23e1 --- /dev/null +++ b/client/src/components/status-badge.js @@ -0,0 +1,14 @@ +export const StatusBadge = ( + { variant, className } = {}, + children, +) => ( + + {children} + +); + +export const ConfidentialBadge = ({ t }) => ( + {t`Confidential`} +); diff --git a/client/src/components/tooltip.js b/client/src/components/tooltip.js new file mode 100644 index 00000000..8e36464e --- /dev/null +++ b/client/src/components/tooltip.js @@ -0,0 +1,10 @@ +export const Tooltip = ({ iconSrc, text }) => ( + +); diff --git a/client/src/lib/elements.js b/client/src/lib/elements.js index 5a8585d5..84a46f32 100644 --- a/client/src/lib/elements.js +++ b/client/src/lib/elements.js @@ -1,4 +1,5 @@ import {formatAssetAmount} from "../views/util"; +import { ConfidentialBadge } from "../components/status-badge"; export const getSupply = (asset, t) => { let { chain_stats = {}, mempool_stats = {} } = asset @@ -19,7 +20,7 @@ export const getSupply = (asset, t) => { chain_stats.burned_amount - mempool_stats.burned_amount; - let totalSupply = circulating == null ? t`Confidential` + let totalSupply = circulating == null ? : formatAssetAmount(circulating, asset.precision, t) return totalSupply } diff --git a/client/src/views/asset.js b/client/src/views/asset.js index 614dec19..bcf6ebfa 100644 --- a/client/src/views/asset.js +++ b/client/src/views/asset.js @@ -5,6 +5,7 @@ import search from './search' import { txBox } from './tx' import { maxMempoolTxs, assetTxsPerPage as perPage, nativeAssetLabel, nativeAssetName } from '../const' import loader from '../components/loading' +import { ConfidentialBadge } from '../components/status-badge' const staticRoot = process.env.STATIC_ROOT || '' @@ -172,7 +173,7 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin ,
{t`Issued amount`}
-
{chain_stats.has_blinded_issuances ? t`Confidential` +
{chain_stats.has_blinded_issuances ? : formatAssetAmount(chain_stats.issued_amount, asset.precision, t) }
@@ -193,7 +194,7 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin ,
{t`Reissuance tokens created`}
-
{chain_stats.reissuance_tokens == null ? t`Confidential` +
{chain_stats.reissuance_tokens == null ? : chain_stats.reissuance_tokens === 0 ? t`None` : formatNumber(chain_stats.reissuance_tokens) }
@@ -210,7 +211,7 @@ export default ({ t, asset, assetTxs, goAsset, openTx, spends, tipHeight, loadin ,
{t`Circulating amount`}
-
{ circulating == null ? t`Confidential` +
{ circulating == null ? : formatAssetAmount(circulating, asset.precision, t) }
@@ -284,4 +285,3 @@ const pagingNav = (asset, last_seen_txid, est_curr_chain_seen_count, prev_paging
] - diff --git a/client/src/views/block-details-card.js b/client/src/views/block-details-card.js index ca2d87ca..34f1a4a1 100644 --- a/client/src/views/block-details-card.js +++ b/client/src/views/block-details-card.js @@ -1,5 +1,6 @@ import { BlockGrid } from "../components/block-grid"; import { InfoStat } from "../components/info-stat"; +import { StatusBadge } from "../components/status-badge"; import { ElapsedTime } from "../components/elapsed-time"; import { formatTime, @@ -46,9 +47,7 @@ const BlockDetailsCard = ({ className, block, confirmed }) => {

{confirmed ? ( -
-

Confirmed

-
+ Confirmed ) : null}
diff --git a/client/src/views/block.js b/client/src/views/block.js index 9533ecd4..e9292cb1 100644 --- a/client/src/views/block.js +++ b/client/src/views/block.js @@ -138,7 +138,7 @@ export default ({ t, block: b, blockStatus: status, blockTxs, openTx, spends, op
- { loading ?
{t`Loading...`}
{loader("small")}
+ { loading ?
{t`Loading...`}
{loader("small")}
: pagingNav(b, { ...S, t }) }
@@ -176,5 +176,5 @@ const btnDetails = (blockhash, isOpen, query, t) => process.browser const btnDetailsContent = (isOpen, t) =>

{t`Details`}

-
{isOpen ? : }
+ {isOpen ? : }
diff --git a/client/src/views/blocks.js b/client/src/views/blocks.js index 51e2b233..42f7f2e6 100644 --- a/client/src/views/blocks.js +++ b/client/src/views/blocks.js @@ -7,6 +7,7 @@ import { import loader from "../components/loading"; import { BlockIcon, ClockIcon, CopyIcon } from "../components/icons"; import { InfoStat } from "../components/info-stat"; +import { Tooltip } from "../components/tooltip"; const staticRoot = process.env.STATIC_ROOT || ""; @@ -80,12 +81,10 @@ export const blks = (blocks, viewMore, { t, ...S }) => (

{getBlockPercentageUsed(b.weight)}%

-
- -
- How full this block is. -
-
+
(
); -const statDivider = () => ( -
+const statDivider = (className) => ( +
); export default ({ @@ -236,10 +237,10 @@ export default ({

Difficulty Adjustment

-
- -
How hard it is to mine new blocks. Bitcoin retargets mining difficulty every 2,016 blocks to keep blocks near 10 minutes. Current is the projected next change; Previous was the last change.
-
+
{adjustmentStat("AVERAGE BLOCK TIME", averageBlockTime)} @@ -251,7 +252,7 @@ export default ({ adjustmentClass(expected), )} - {statDivider()} + {statDivider("difficulty-adjustment-stat-divider-middle")} {adjustmentStat( "PREVIOUS ADJ", formatAdjustment(previous), diff --git a/client/src/views/transactions.js b/client/src/views/transactions.js index dfba6d5a..bc661c50 100644 --- a/client/src/views/transactions.js +++ b/client/src/views/transactions.js @@ -1,6 +1,7 @@ import { formatSat, formatNumber, truncateTxid } from "./util"; import loader from "../components/loading"; import { CopyIcon, TxArrowsIcon } from "../components/icons"; +import { ConfidentialBadge } from "../components/status-badge"; const staticRoot = process.env.STATIC_ROOT || ""; @@ -45,24 +46,36 @@ export const transactions = (txs, viewMore, { t, ...S }) => ( return (
-
-

{truncateTxid(txOverview.txid)}

-
- +
+
{t`TX ID`}
+
+

{truncateTxid(txOverview.txid)}

+
+ +
-
- {txOverview.value ? - formatSat(txOverview.value) : "Confidential"} +
+
{t`VALUE`}
+
+ {txOverview.value != null ? + formatSat(txOverview.value) : } +
+
+
+
{t`SIZE`}
+
{`${formatNumber(txOverview.vsize)} vB`}
+
+
+
{t`FEE`}
+
{`${feerate.toFixed(2)} sat/vB`}
-
{`${formatNumber(txOverview.vsize)} vB`}
-
{`${feerate.toFixed(2)} sat/vB`}
 ); diff --git a/client/src/views/tx.js b/client/src/views/tx.js index 403deca7..c597d230 100644 --- a/client/src/views/tx.js +++ b/client/src/views/tx.js @@ -20,6 +20,7 @@ import { TxArrowsIcon, } from "../components/icons"; import { InfoStat } from "../components/info-stat"; +import { StatusBadge } from "../components/status-badge"; import BlockDetailsCard from "./block-details-card"; // Require behind env conditional so it gets removed by `envify` on non-elements builds @@ -208,7 +209,7 @@ const btnDetails = (txid, isOpen, query, t) => const btnDetailsContent = (isOpen, t) => (

{t`Details`}

-
{isOpen ? : }
+ {isOpen ? : }
); @@ -263,18 +264,16 @@ const txHeader = ( >
-
+ {!isConfirmed ? ( - + ) : null} -

{confirmationText(tx.status, tipHeight, t)}

-
+ {confirmationText(tx.status, tipHeight, t)} +
diff --git a/client/src/views/util.js b/client/src/views/util.js index de80c704..7fc993b8 100644 --- a/client/src/views/util.js +++ b/client/src/views/util.js @@ -2,6 +2,7 @@ import moveDec from 'move-decimal-point' import { sat2btc } from 'fmtbtc' import { maxBlockWeight, nativeAssetLabel } from '../const' import { isNativeOut } from '../util' +import { ConfidentialBadge } from '../components/status-badge' const DEFAULT_ISSUED_PRECISION = 0 , NATIVE_PRECISION = 8 @@ -29,7 +30,7 @@ export const formatAssetAmount = (value, precision=0, t) => export const formatOutAmount = (vout, { t, assetMap }, shortDisplay=false) => { - if (vout.value == null) return t`Confidential` + if (vout.value == null) return if (isNativeOut(vout)) { return diff --git a/www/style.css b/www/style.css index ffb7d685..a5950ecc 100644 --- a/www/style.css +++ b/www/style.css @@ -1216,10 +1216,13 @@ table th { } .transaction-box { + display: flex; + flex-direction: column; background-color: var(--surface-primary-color); padding: 24px; - border-radius: var(--radius-rounded-xl); + border-radius: 5px; margin-top: 24px; + gap: 24px; } .transaction-box.loading-transaction { @@ -1250,7 +1253,6 @@ table th { width: fit-content; display: flex; align-items: center; - height: 44px; margin-left: auto; } @@ -1276,11 +1278,6 @@ table th { font-size: 16px; } -.details-btn > div > * { - display: table-cell; - vertical-align: middle; -} - .details-btn > div:focus { outline: none; } @@ -1289,10 +1286,6 @@ table th { text-align: center; } -.details-btn > div > div:nth-child(2) { - width: 30px; -} - .block-details-btn { margin: 20px; } @@ -1301,7 +1294,6 @@ table th { display: table; table-layout: fixed; width: 100%; - margin-top: 12px; } .transaction-box > .ins-and-outs > * { @@ -1649,6 +1641,28 @@ img.footer_container_content_onion-links_icon { gap: 10px; } +.load-more-loading { + align-items: center; +} + +.load-more-loading .loading-container { + flex: none; + height: 22px; + margin-top: 0; +} + +.load-more-loading .spinner { + visibility: visible; + animation: none; +} + +.load-more-loading .spinner .small { + box-sizing: border-box; + width: 22px; + height: 22px; + border-width: 3px; +} + .load-more > * { display: table-cell; @@ -1878,6 +1892,13 @@ body::after{ color: #475562; margin-left: -19px; } + +.amount { + display: flex; + align-items: center; + justify-content: right; +} + .unblinded .vout-header, .unblinded .vin-header { background: #04240d; } @@ -1915,13 +1936,13 @@ body::after{ .transaction-box .header { display: flex; flex-direction: column-reverse; - height: 150px; justify-content: space-evenly; } .transaction-box .ins-and-outs { display: flex; flex-direction: column; + gap: 20px; } .transaction-box .ins-and-outs .direction-arrow-container { @@ -1932,10 +1953,6 @@ body::after{ transform: rotate(90deg); } - .transaction-box .ins-and-outs > * { - padding: 20px 0; - } - .transaction-box > .footer > * { display: block; width: 100%; @@ -2097,11 +2114,6 @@ body::after{ } @media only screen and (max-width: 500px) { - - .footer { - height: auto !important; - } - .footer_container_content_row_onion_container { margin-top: 10px; } @@ -2848,137 +2860,6 @@ a.back-link img{ width: 18px; } -@media only screen and (max-width: 1100px) { - .explorer-container { - box-sizing: border-box; - } - - .nav-container { - flex-wrap: wrap; - } - - .main-nav-container { - flex-basis: 48px; - order: 1; - width: 48px; - } - - .sub-nav { - order: 2; - margin-top: 32px; - } - - .sub-navbar { - margin-top: 32px; - } - - .toggle-container{ - z-index: 100; - } - - .toggle-menu .section2 .link-list{ - margin-right: 20px; - } - - .toggle-menu .section1, .toggle-menu .section2{ - padding: 0 20px; - } - -/**** - * Burger Menu for Mobile - * A javascript function (toggleIcon) adds a className (open-menu) to toggle the menu -*****/ - .toggle-container .toggle-menu{ - width: 95vw; - position: absolute; - top: 0px; - z-index: 1; - transition: none; - } - - .toggle-container.open-menu .toggle-menu{ - visibility: visible; - height: auto; - padding: 20px 0; - } - - .toggle-container.open-menu .burger-icon span{ - opacity: 0; - top: 50%; - } - - .toggle-container.open-menu .burger-icon span:first-child { - opacity: 1; - transform: rotate(45deg); - } - - .toggle-container.open-menu .burger-icon span:last-child { - opacity: 1; - transform: rotate(-45deg); - } - - .toggle-container .toggle-menu .toggle-menu-header { - justify-content: flex-start; - } - - .toggle-menu .section1 .wallets-link{ - flex-direction: column; - } - - .toggle-menu .section1 .wallets-link .wallets-logo{ - width: auto; - } - - .toggle-menu .section1 .wallets-link .store-icons{ - width: 100%; - margin-top: 30px; - } - - .navbar-brand{ - margin-right: 0; - } - - .main-nav li{ - margin-right: 15px; - } - - .sub-nav-container{ - height: auto; - flex-direction: column; - gap: 24px; - align-items: initial; - } - - .sub-nav{ - gap: initial; - width: 100%; - padding: 0px; - justify-content: space-between; - } - - .sub-nav a{ - margin-right: 0; - } - - .search-bar{ - margin: 0; - max-width: 100%; - } - - .assets-table .assets-table-row{ - padding:20px; - } - - .stats-table{ - padding: 20px; - } - - .search { - width: 100%; - min-width: auto; - } -} - @media only screen and (max-width: 500px) { .toggle-container{ padding: 30px 0 30px 10px; @@ -2990,7 +2871,6 @@ a.back-link img{ .sub-nav{ flex-wrap: wrap; - padding-top: auto; } } @@ -3551,8 +3431,14 @@ a.back-link img{ } .tooltip { + display: flex; position: relative; margin-left: 6px; + padding: 0; + border: 0; + color: inherit; + background: transparent; + font: inherit; cursor: pointer; } @@ -3560,10 +3446,17 @@ a.back-link img{ width: 13px; } -.tooltip:hover .tooltip-dialogue { +.tooltip:hover .tooltip-dialogue, +.tooltip:focus .tooltip-dialogue { display: initial; } +.tooltip:focus-visible { + border-radius: 2px; + outline: 2px solid var(--accent-color); + outline-offset: 3px; +} + .tooltip-dialogue { display: none; position: absolute; @@ -3577,9 +3470,23 @@ a.back-link img{ top: 10px; left: 15px; text-align: left; + white-space: normal; + overflow-wrap: anywhere; z-index: 999; } +@keyframes tooltip-mobile-enter { + from { + opacity: 0; + transform: translateY(12px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + .table-header-icon-container { display: flex; justify-content: center; @@ -3813,6 +3720,16 @@ a.back-link img{ transition: background-color .3s; } +.transaction-table-field-label { + display: none; +} + +.transaction-table-row .transaction-table-transaction-id .transaction-table-field-value { + display: flex; + align-items: center; + gap: 6px; +} + .transaction-table-row:hover { border: 1px solid var(--accent-color); } @@ -3839,7 +3756,7 @@ a.back-link img{ } .transaction-table-row .transaction-table-transaction-fee.warning { - color: #00C3FF; + color: white; } .transaction-table-row .transaction-table-transaction-fee.danger { @@ -3870,6 +3787,7 @@ a.back-link img{ .table-header { display: flex; align-items: center; + white-space: nowrap; } .table-header-title { @@ -3919,68 +3837,6 @@ a.back-link img{ margin-top: var(--page-gap); } -@media only screen and (max-width: 1100px) { - - .block-details { - flex-direction: column; - gap: 12px; - } - - .block-card-header { - flex-direction: row; - align-items: center; - justify-content: space-between; - height: fit-content; - width: 100%; - } - - .block-usage { - width: 100%; - } - - .usage-bar, .usage-number { - margin-left: initial; - } - - .usage-bar { - width: initial; - } - - .block-card-body { - margin-top: 0px; - width: initial; - } - - .block-icon-container { - display: none; - } - - .mobile-block-icon-container { - display: flex; - justify-content: center; - align-items: center; - width: 32px; - color: var(--accent-color); - } - - .mobile-block-icon-container svg { - width: 14px; - } - - .tx-details-txid { - flex-wrap: wrap; - line-break: anywhere; - } - - .transaction-details-row { - flex-direction: column; - } - - .info-stats-row { - flex-wrap: wrap; - } -} - .overview { margin-top: var(--page-gap); display: flex; @@ -3993,17 +3849,20 @@ a.back-link img{ gap: 12px; } -.confirmation-status-badge { +.status-badge { display: inline-flex; align-items: center; height: fit-content; - border-radius: 4px; box-sizing: initial; padding: 2px 8px; font-size: 11px; + border-radius: 9999px; + white-space: nowrap; +} + +.status-badge.warning { background-color: rgb(from var(--warning-color) r g b / 20%); color: var(--warning-color); - border-radius: 9999px; } .confirmation-status-dot { @@ -4042,9 +3901,9 @@ a.back-link img{ opacity: .2; } -.confirmation-status-badge.success { - background-color: rgba(23, 201, 100, .2); - color: #17C964; +.status-badge.success { + background-color: rgb(from var(--success-color) r g b / 20%); + color: var(--success-color); } .eta-label { @@ -4252,6 +4111,10 @@ a.back-link img{ color: #B5BDC2; } +.difficulty-adjustment-stat-value { + font-size: 14px; +} + .difficulty-adjustment-stat-value.success { color: #17C964; } @@ -4368,7 +4231,7 @@ a.back-link img{ --block-grid-filled-color: var(--accent-color); flex: 0 0 auto; padding: 10px; - border: 2px solid #FA8A0033; + border: 2px solid rgb(from var(--accent-color) r g b / 0.2); border-radius: 4px; background-color: var(--surface-primary-color); width: fit-content; @@ -4461,3 +4324,322 @@ a.back-link img{ margin-top: 16px; } } + +@media only screen and (max-width: 1100px) { + .explorer-container { + box-sizing: border-box; + } + + .nav-container { + flex-wrap: wrap; + } + + .main-nav-container { + flex-basis: 48px; + order: 1; + width: 48px; + } + + .sub-nav { + order: 2; + margin-top: 32px; + gap: 30px; + flex-wrap: wrap; + justify-content: center; + width: 100%; + } + + .sub-navbar { + margin-top: 32px; + } + + .toggle-container{ + z-index: 100; + } + + .toggle-menu .section2 .link-list{ + margin-right: 20px; + } + + .toggle-menu .section1, .toggle-menu .section2{ + padding: 0 20px; + } + +/**** + * Burger Menu for Mobile + * A javascript function (toggleIcon) adds a className (open-menu) to toggle the menu +*****/ + .toggle-container .toggle-menu{ + width: 95vw; + position: absolute; + top: 0px; + z-index: 1; + transition: none; + } + + .toggle-container.open-menu .toggle-menu{ + visibility: visible; + height: auto; + padding: 20px 0; + } + + .toggle-container.open-menu .burger-icon span{ + opacity: 0; + top: 50%; + } + + .toggle-container.open-menu .burger-icon span:first-child { + opacity: 1; + transform: rotate(45deg); + } + + .toggle-container.open-menu .burger-icon span:last-child { + opacity: 1; + transform: rotate(-45deg); + } + + .toggle-container .toggle-menu .toggle-menu-header { + justify-content: flex-start; + } + + .toggle-menu .section1 .wallets-link{ + flex-direction: column; + } + + .toggle-menu .section1 .wallets-link .wallets-logo{ + width: auto; + } + + .toggle-menu .section1 .wallets-link .store-icons{ + width: 100%; + margin-top: 30px; + } + + .navbar-brand{ + margin-right: 0; + } + + .main-nav li{ + margin-right: 15px; + } + + .sub-nav-container{ + height: auto; + flex-direction: column; + gap: 24px; + align-items: initial; + } + + .sub-nav a{ + margin-right: 0; + } + + .search-bar{ + margin: 0; + max-width: 100%; + } + + .assets-table .assets-table-row{ + padding:20px; + } + + .stats-table{ + padding: 20px; + } + + .search { + width: 100%; + min-width: auto; + } + + .tooltip-dialogue { + position: fixed; + top: auto; + right: 24px; + bottom: 24px; + left: 24px; + width: auto; + max-width: none; + padding: 12px; + border: 1px solid var(--accent-color); + animation: tooltip-mobile-enter .2s ease-out; + } + + .transaction-table .table-title-row { + display: none; + } + + .transaction-table-row { + flex-direction: column; + gap: 6px; + } + + .transaction-table-row .transaction-table-field { + display: flex; + flex: none; + align-items: center; + justify-content: space-between; + width: 100%; + text-align: right; + } + + .transaction-table-field-label { + display: block; + color: #B5BDC2; + font-size: 10px; + font-weight: 400; + text-align: left; + } + + .transaction-table-field-value { + min-width: 0; + text-align: right; + font-size: 14px; + } + + .transaction-table-transaction-id p { + font-size: 14px; + } + + .transaction-table-field-value .table-copy-button { + display: none; + } + + .transaction-table-field .status-badge.success { + font-weight: normal; + } + + .block-number { + font-size: 16px; + } + + .block-card-top-header .table-copy-button, + .block-card-top-header .latest-block-badge { + display: none; + } + + .block-details { + flex-direction: column; + gap: 12px; + } + + .block-card-header { + flex-direction: row; + align-items: center; + justify-content: space-between; + height: fit-content; + width: 100%; + } + + .block-usage { + width: 100%; + } + + .usage-bar, .usage-number { + margin-left: initial; + } + + .usage-bar { + width: initial; + } + + .block-card-body { + margin-top: 0px; + width: initial; + } + + .block-icon-container { + display: none; + } + + .mobile-block-icon-container { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + color: var(--accent-color); + } + + .mobile-block-icon-container svg { + width: 14px; + } + + .difficulty-adjustment-stats { + flex-wrap: wrap; + row-gap: 20px; + } + + .difficulty-adjustment-stat { + flex: initial; + width: 49%; + } + + .difficulty-adjustment-stat-divider-middle { + display: none; + } + + .block-details { + flex-direction: column; + gap: 12px; + } + + .block-card-header { + flex-direction: row; + align-items: center; + justify-content: space-between; + height: fit-content; + width: 100%; + } + + .block-usage { + width: 100%; + } + + .usage-bar, .usage-number { + margin-left: initial; + } + + .usage-bar { + width: initial; + } + + .block-card-body { + margin-top: 0px; + width: initial; + } + + .block-icon-container { + display: none; + } + + .mobile-block-icon-container { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + color: var(--accent-color); + } + + .mobile-block-icon-container svg { + width: 14px; + } + + .tx-details-txid { + flex-wrap: wrap; + line-break: anywhere; + } + + .transaction-details-row { + flex-direction: column; + } + + .info-stats-row { + flex-wrap: wrap; + } +} + +@media only screen and (max-width: 1100px) and (prefers-reduced-motion: reduce) { + .tooltip-dialogue { + animation: none; + } +}