From aed810e17e2a05d310fb5cedf79a1fba7c1b4e05 Mon Sep 17 00:00:00 2001 From: natsoni Date: Mon, 30 Mar 2026 12:16:31 +0900 Subject: [PATCH] Keep dark background for tooltips on light mode --- .../acceleration-timeline-tooltip.component.html | 12 ++++++------ .../acceleration-timeline-tooltip.component.scss | 2 +- .../src/app/components/amount/amount.component.html | 4 ++-- .../src/app/components/amount/amount.component.ts | 1 + .../block-overview-tooltip.component.html | 12 ++++++------ .../block-overview-tooltip.component.scss | 8 +++++++- .../difficulty/difficulty-tooltip.component.scss | 2 +- .../rbf-timeline/rbf-timeline-tooltip.component.html | 6 +++--- .../rbf-timeline/rbf-timeline-tooltip.component.scss | 8 +++++++- .../supply/treasuries-supply.component.scss | 2 +- .../verify/treasuries-verify.component.scss | 2 +- .../tx-bowtie-graph-tooltip.component.html | 4 ++-- .../tx-bowtie-graph-tooltip.component.scss | 2 +- 13 files changed, 39 insertions(+), 26 deletions(-) diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html index ed2beff80..522359607 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html @@ -21,26 +21,26 @@ Fee - {{ accelerationInfo.fee | number }} sats + {{ accelerationInfo.fee | number }} sats Out-of-band fees @if (accelerationInfo.status === 'accelerated') { - {{ accelerationInfo.feeDelta | number }} sats + {{ accelerationInfo.feeDelta | number }} sats } @else { - {{ accelerationInfo.bidBoost | number }} sats + {{ accelerationInfo.bidBoost | number }} sats } @if (accelerationInfo.status === 'seen') { Fee rate - + } @else if (accelerationInfo.status === 'accelerated' || accelerationInfo.status === 'mined') { Accelerated fee rate @if (accelerationInfo.status === 'accelerated') { - + } @else { - + } } diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss index 9dcaa65b4..1ad826621 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss @@ -1,7 +1,7 @@ .acceleration-tooltip { position: fixed; z-index: 3; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); diff --git a/frontend/src/app/components/amount/amount.component.html b/frontend/src/app/components/amount/amount.component.html index ac469939f..56a8d46b1 100644 --- a/frontend/src/app/components/amount/amount.component.html +++ b/frontend/src/app/components/amount/amount.component.html @@ -23,7 +23,7 @@ @if ((viewAmountMode$ | async) === 'btc' || (viewAmountMode$ | async) === 'fiat' || ignoreViewMode === true) { ‎{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }} - + BTC } @else { @@ -32,7 +32,7 @@ } @else { ‎{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis | amountShortener : (satoshis < 1000 && satoshis > -1000 ? 0 : 1) : undefined : true }} } - + sats } diff --git a/frontend/src/app/components/amount/amount.component.ts b/frontend/src/app/components/amount/amount.component.ts index 2ad0c0fc5..817f5741a 100644 --- a/frontend/src/app/components/amount/amount.component.ts +++ b/frontend/src/app/components/amount/amount.component.ts @@ -27,6 +27,7 @@ export class AmountComponent implements OnInit, OnDestroy { @Input() forceBtc: boolean = false; @Input() ignoreViewMode: boolean = false; @Input() forceBlockConversion: boolean = false; // true = displays fiat price as 0 if blockConversion is undefined instead of falling back to conversions + @Input() unitStyle: any; constructor( private stateService: StateService, diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html index ac919c1cd..9443c7fe6 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html @@ -36,32 +36,32 @@ Amount - + Fee - {{ fee | number }} sats   + {{ fee | number }} sats   Fee rate - + Effective fee rate Accelerated fee rate - + Virtual size - + Weight - + Audit status diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss index 0b2c05948..ac362fb75 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss @@ -1,6 +1,6 @@ .block-overview-tooltip { position: absolute; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); @@ -13,12 +13,18 @@ max-width: 400px; pointer-events: none; z-index: 11; + --link-color: #1bd8f4; + --link-hover-color: #09a3ba; &.clickable { pointer-events: all; } } +.block-overview-tooltip ::ng-deep .fixed-unit-color .symbol { + color: #ffffff66; +} + th, td { &.label { width: 30%; diff --git a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss index e4fd989af..972a46420 100644 --- a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss +++ b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss @@ -1,6 +1,6 @@ .difficulty-tooltip { position: fixed; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html index d5119201c..d1e321b9f 100644 --- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html +++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html @@ -19,15 +19,15 @@ Fee - {{ rbfInfo.tx.fee | number }} sats + {{ rbfInfo.tx.fee | number }} sats Virtual size - + Weight - + Status diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss index eeb40a52d..733e03e24 100644 --- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss +++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss @@ -1,7 +1,7 @@ .rbf-tooltip { position: fixed; z-index: 3; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); @@ -11,6 +11,8 @@ padding: 10px 15px; text-align: left; pointer-events: none; + --link-color: #1bd8f4; + --link-hover-color: #09a3ba; .badge { margin-right: 1em; @@ -20,6 +22,10 @@ } } +.rbf-tooltip ::ng-deep .symbol { + color: #ffffff66; +} + .td-width { padding-right: 10px; } \ No newline at end of file diff --git a/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss b/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss index 18d212b6e..1835a4ac4 100644 --- a/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss +++ b/frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss @@ -222,7 +222,7 @@ .supply-tooltip { position: fixed; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); diff --git a/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss b/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss index 0d1972ca6..ecf5a7661 100644 --- a/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss +++ b/frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss @@ -215,7 +215,7 @@ .verify-tooltip { position: fixed; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html index b75fe9319..0996fa4b4 100644 --- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html +++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html @@ -29,7 +29,7 @@

Peg Out

-

+

@@ -106,7 +106,7 @@ - +

diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss index dfb429096..9875e57a4 100644 --- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss +++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss @@ -1,6 +1,6 @@ .bowtie-graph-tooltip { position: absolute; - background: color-mix(in srgb, var(--active-bg) 95%, transparent); + background: color-mix(in srgb, #11131f 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey);