GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Keep dark background for tooltips on light mode

Browse source
This commit is contained in:
natsoni 2026-03-30 12:16:31 +09:00
parent 298421455d
commit aed810e17e
No known key found for this signature in database
GPG key ID: 5554443C889C720E
13 changed files with 39 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html
View file

@ -21,26 +21,26 @@
</tr>
<tr *ngIf="accelerationInfo.fee">
<td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
<td class="value">{{ accelerationInfo.fee | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
<td class="value">{{ accelerationInfo.fee | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
</tr>
<tr *ngIf="accelerationInfo.bidBoost >= 0 || accelerationInfo.feeDelta">
<td class="label" i18n="transaction.out-of-band-fees">Out-of-band fees</td>
@if (accelerationInfo.status === 'accelerated') {
<td class="value oobFees">{{ accelerationInfo.feeDelta | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
<td class="value oobFees">{{ accelerationInfo.feeDelta | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
} @else {
<td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
<td class="value oobFees">{{ accelerationInfo.bidBoost | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
}
</tr>
<tr *ngIf="accelerationInfo.fee && accelerationInfo.weight">
@if (accelerationInfo.status === 'seen') {
<td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
<td class="value"><app-fee-rate [fee]="accelerationInfo.fee" [weight]="accelerationInfo.weight"></app-fee-rate></td>
<td class="value"><app-fee-rate [fee]="accelerationInfo.fee" [weight]="accelerationInfo.weight" [unitStyle]="'color: #ffffff66'"></app-fee-rate></td>
} @else if (accelerationInfo.status === 'accelerated' || accelerationInfo.status === 'mined') {
<td class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
@if (accelerationInfo.status === 'accelerated') {
<td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.feeDelta || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
<td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.feeDelta || 0)" [weight]="accelerationInfo.weight" [unitStyle]="'color: #ffffff66'"></app-fee-rate></td>
} @else {
<td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.bidBoost || 0)" [weight]="accelerationInfo.weight"></app-fee-rate></td>
<td class="value oobFees"><app-fee-rate [fee]="accelerationInfo.fee + (accelerationInfo.bidBoost || 0)" [weight]="accelerationInfo.weight" [unitStyle]="'color: #ffffff66'"></app-fee-rate></td>
}
}
</tr>

2
frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss
View file

@ -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);

4
frontend/src/app/components/amount/amount.component.html
View file

@ -23,7 +23,7 @@
<ng-template #default>
@if ((viewAmountMode$ | async) === 'btc' || (viewAmountMode$ | async) === 'fiat' || ignoreViewMode === true) {
&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
<span class="symbol">
<span class="symbol" [style]="unitStyle">
<ng-container *ngTemplateOutlet="prefix"></ng-container>BTC
</span>
} @else {
@ -32,7 +32,7 @@
} @else {
&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis | amountShortener : (satoshis < 1000 && satoshis > -1000 ? 0 : 1) : undefined : true }}
}
<span class="symbol">
<span class="symbol" [style]="unitStyle">
<ng-container *ngTemplateOutlet="prefix"></ng-container>sats
</span>
}

1
frontend/src/app/components/amount/amount.component.ts
View file

@ -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,

12
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
View file

@ -36,32 +36,32 @@
</tr>
<tr>
<td class="label" i18n="dashboard.latest-transactions.amount">Amount</td>
<td class="value"><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true"></app-amount></td>
<td class="value"><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true" [unitStyle]="{color: '#ffffff66'}"></app-amount></td>
</tr>
<tr>
<td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
<td class="value">{{ fee | number }} <span class="symbol" i18n="shared.sats">sats</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
<td class="value">{{ fee | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
</tr>
<tr>
<td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
<td class="value">
<app-fee-rate [fee]="feeRate"></app-fee-rate>
<app-fee-rate [fee]="feeRate" [unitStyle]="'color: #ffffff66'"></app-fee-rate>
</td>
</tr>
<tr *ngIf="hasEffectiveRate && effectiveRate != null">
<td *ngIf="!this.acceleration" class="label" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td *ngIf="this.acceleration" class="label" i18n="transaction.accelerated-fee-rate|Accelerated transaction fee rate">Accelerated fee rate</td>
<td class="value" [class.oobFees]="this.acceleration">
<app-fee-rate [fee]="effectiveRate"></app-fee-rate>
<app-fee-rate [fee]="effectiveRate" [unitStyle]="'color: #ffffff66'"></app-fee-rate>
</td>
</tr>
<tr *only-vsize>
<td class="label" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td class="value" [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
<td class="value fixed-unit-color" [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
</tr>
<tr *only-weight>
<td class="label" i18n="transaction.weight|Transaction Weight">Weight</td>
<td class="value" [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
<td class="value fixed-unit-color" [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
</tr>
<tr *ngIf="auditEnabled && tx && tx.status && tx.status.length">
<td class="label" i18n="transaction.audit-status">Audit status</td>

8
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
View file

@ -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%;

2
frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
View file

@ -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);

6
frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html
View file

@ -19,15 +19,15 @@
</tr>
<tr>
<td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
<td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sats">sats</span></td>
<td>{{ rbfInfo.tx.fee | number }} <span class="symbol" [style.color]="'#ffffff66'" i18n="shared.sats">sats</span></td>
</tr>
<tr *only-vsize>
<td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
<td class="fixed-unit-color" [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
</tr>
<tr *only-weight>
<td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
<td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize * 4 | vbytes: 2)"></td>
<td class="fixed-unit-color" [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize * 4 | vbytes: 2)"></td>
</tr>
<tr>
<td class="td-width" i18n="transaction.status|Transaction Status">Status</td>

8
frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
View file

@ -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;
}

2
frontend/src/app/components/treasuries/supply/treasuries-supply.component.scss
View file

@ -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);

2
frontend/src/app/components/treasuries/verify/treasuries-verify.component.scss
View file

@ -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);

4
frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html
View file

@ -29,7 +29,7 @@
<ng-template #pegout>
<ng-container *ngIf="line.pegout; else normal">
<p *ngIf="!isConnector">Peg Out</p>
<p *ngIf="line.displayValue != null"><app-amount [satoshis]="line.displayValue"></app-amount></p>
<p *ngIf="line.displayValue != null"><app-amount [satoshis]="line.displayValue" [unitStyle]="'color: #ffffff66'"></app-amount></p>
<p class="address">
<app-truncate [text]="line.pegout"></app-truncate>
</p>
@ -106,7 +106,7 @@
</ng-template>
</ng-template>
<ng-template #defaultOutput>
<app-amount [blockConversion]="isConnector ? blockConversions[line?.status?.block_time] : blockConversions[line?.timestamp]" [satoshis]="line.displayValue" [forceBlockConversion]="isConnector && line?.status?.block_time"></app-amount>
<app-amount [blockConversion]="isConnector ? blockConversions[line?.status?.block_time] : blockConversions[line?.timestamp]" [satoshis]="line.displayValue" [forceBlockConversion]="isConnector && line?.status?.block_time" [unitStyle]="'color: #ffffff66'"></app-amount>
</ng-template>
</p>
<p *ngIf="line.type !== 'fee' && line.address" class="address">

2
frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
View file

@ -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);