Merge pull request #4944 from mempool/natsoni/more-css-fix

More css fixes
This commit is contained in:
softsimon 2024-04-10 15:15:47 +09:00 committed by GitHub
commit 165340324c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
30 changed files with 54 additions and 51 deletions

View File

@ -76,7 +76,7 @@
&.tx { &.tx {
.fill { .fill {
background: #3bcc49; background: var(--green);
} }
.line { .line {
.fee-rate { .fee-rate {

View File

@ -218,7 +218,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dotted', type: 'dotted',
color: '#ffffff66', color: 'var(--transparent-fg)',
opacity: 0.25, opacity: 0.25,
} }
}, },

View File

@ -50,7 +50,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
.card-text span { .card-text span {
color: #ffffff66; color: var(--transparent-fg);
font-size: 12px; font-size: 12px;
top: 0px; top: 0px;
} }

View File

@ -50,7 +50,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
.card-text span { .card-text span {
color: #ffffff66; color: var(--transparent-fg);
font-size: 12px; font-size: 12px;
top: 0px; top: 0px;
} }

View File

@ -113,7 +113,7 @@ export class AddressGraphComponent implements OnChanges {
: `${data.length} transactions`; : `${data.length} transactions`;
const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' }); const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' });
const val = data.reduce((total, d) => total + d.data[2].value, 0); const val = data.reduce((total, d) => total + d.data[2].value, 0);
const color = val === 0 ? '' : (val > 0 ? '#1a9436' : '#dc3545'); const color = val === 0 ? '' : (val > 0 ? 'var(--green)' : 'var(--red)');
const symbol = val > 0 ? '+' : ''; const symbol = val > 0 ? '+' : '';
return ` return `
<div> <div>

View File

@ -100,7 +100,7 @@
.card-text { .card-text {
font-size: 18px; font-size: 18px;
span { span {
color: #ffffff66; color: var(--transparent-fg);
font-size: 12px; font-size: 12px;
} }
} }

View File

@ -4,7 +4,7 @@
justify-content: space-around; justify-content: space-around;
height: 76px; height: 76px;
.shared-block { .shared-block {
color: #ffffff66; color: var(--transparent-fg);
font-size: 12px; font-size: 12px;
} }
.item { .item {

View File

@ -49,24 +49,24 @@ export class DifficultyMiningComponent implements OnInit {
.pipe( .pipe(
map(([blocks, da]) => { map(([blocks, da]) => {
const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0); const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0);
let colorAdjustments = '#ffffff66'; let colorAdjustments = 'var(--transparent-fg)';
if (da.difficultyChange > 0) { if (da.difficultyChange > 0) {
colorAdjustments = '#3bcc49'; colorAdjustments = 'var(--green)';
} }
if (da.difficultyChange < 0) { if (da.difficultyChange < 0) {
colorAdjustments = '#dc3545'; colorAdjustments = 'var(--red)';
} }
let colorPreviousAdjustments = '#dc3545'; let colorPreviousAdjustments = 'var(--red)';
if (da.previousRetarget) { if (da.previousRetarget) {
if (da.previousRetarget >= 0) { if (da.previousRetarget >= 0) {
colorPreviousAdjustments = '#3bcc49'; colorPreviousAdjustments = 'var(--green)';
} }
if (da.previousRetarget === 0) { if (da.previousRetarget === 0) {
colorPreviousAdjustments = '#ffffff66'; colorPreviousAdjustments = 'var(--transparent-fg)';
} }
} else { } else {
colorPreviousAdjustments = '#ffffff66'; colorPreviousAdjustments = 'var(--transparent-fg)';
} }
this.blocksUntilHalving = 210000 - (maxHeight % 210000); this.blocksUntilHalving = 210000 - (maxHeight % 210000);

View File

@ -5,7 +5,7 @@
<div class="widget-toggler"> <div class="widget-toggler">
<a href="" (click)="setMode('difficulty')" class="toggler-option" <a href="" (click)="setMode('difficulty')" class="toggler-option"
[ngClass]="{'inactive': mode === 'difficulty'}"><small i18n="statistics.average-small">difficulty</small></a> [ngClass]="{'inactive': mode === 'difficulty'}"><small i18n="statistics.average-small">difficulty</small></a>
<span style="color: #ffffff66; font-size: 8px"> | </span> <span style="color: var(--transparent-fg); font-size: 8px"> | </span>
<a href="" (click)="setMode('halving')" class="toggler-option" <a href="" (click)="setMode('halving')" class="toggler-option"
[ngClass]="{'inactive': mode === 'halving'}"><small i18n="statistics.median-small">halving</small></a> [ngClass]="{'inactive': mode === 'halving'}"><small i18n="statistics.median-small">halving</small></a>
</div> </div>

View File

@ -183,7 +183,7 @@
fill: var(--secondary); fill: var(--secondary);
&.behind { &.behind {
fill: #D81B60; fill: var(--red);
} }
&.mined { &.mined {
fill: url(#diff-gradient); fill: url(#diff-gradient);
@ -208,10 +208,10 @@
} }
.blocks-ahead { .blocks-ahead {
color: #3bcc49; color: var(--green);
} }
.blocks-behind { .blocks-behind {
color: #D81B60; color: var(--red);
} }
.halving-progress { .halving-progress {
@ -250,5 +250,5 @@
} }
.inactive { .inactive {
color: #ffffff66; color: var(--transparent-fg);
} }

View File

@ -137,7 +137,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dotted', type: 'dotted',
color: '#ffffff66', color: 'var(--transparent-fg)',
opacity: 0.25, opacity: 0.25,
} }
} }

View File

@ -2,7 +2,7 @@
<div class="item"> <div class="item">
<h5 class="card-title" i18n="liquid.non-dust-expired">Non-Dust Expired</h5> <h5 class="card-title" i18n="liquid.non-dust-expired">Non-Dust Expired</h5>
<div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text"> <div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text">
<div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos-non-dust" ngbTooltip="Total amount of BTC held in non-dust Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.nonDust.total) / 100000000 | number: '1.5-5' }} <span style="color: #b86d12;">BTC</span></div> <div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos-non-dust" ngbTooltip="Total amount of BTC held in non-dust Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.nonDust.total) / 100000000 | number: '1.5-5' }} <span style="color: var(--orange);">BTC</span></div>
<div class="fiat">{{ expiredStats.nonDust.count }} <span i18n="shared.utxos">UTXOs</span></div> <div class="fiat">{{ expiredStats.nonDust.count }} <span i18n="shared.utxos">UTXOs</span></div>
</div> </div>
</div> </div>
@ -12,7 +12,7 @@
<h5 class="card-title"><ng-container i18n="liquid.total-expired">Total Expired</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5> <h5 class="card-title"><ng-container i18n="liquid.total-expired">Total Expired</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a> </a>
<div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text"> <div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text">
<div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos" ngbTooltip="Total amount of BTC held in Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} <span style="color: #b86d12;">BTC</span></div> <div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos" ngbTooltip="Total amount of BTC held in Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} <span style="color: var(--orange);">BTC</span></div>
<div class="fiat">{{ expiredStats.all.count }} <span i18n="shared.utxos">UTXOs</span></div> <div class="fiat">{{ expiredStats.all.count }} <span i18n="shared.utxos">UTXOs</span></div>
</div> </div>
</div> </div>

View File

@ -36,7 +36,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
.card-text span { .card-text span {
color: #ffffff66; color: var(--transparent-fg);
font-size: 12px; font-size: 12px;
top: 0px; top: 0px;
} }

View File

@ -12,7 +12,7 @@
<ng-container *ngIf="widget; else regularRows"> <ng-container *ngIf="widget; else regularRows">
<tr *ngFor="let address of addresses | slice:0:5"> <tr *ngFor="let address of addresses | slice:0:5">
<td class="address text-left widget"> <td class="address text-left widget">
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:#b86d12"> <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:var(--orange)">
<app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate> <app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate>
</a> </a>
</td> </td>
@ -24,7 +24,7 @@
<ng-template #regularRows> <ng-template #regularRows>
<tr *ngFor="let address of addresses | slice:(page - 1) * pageSize:page * pageSize"> <tr *ngFor="let address of addresses | slice:(page - 1) * pageSize:page * pageSize">
<td class="address text-left"> <td class="address text-left">
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:#b86d12"> <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:var(--orange)">
<app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate> <app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate>
</a> </a>
</td> </td>

View File

@ -32,7 +32,7 @@
} }
.card-text span { .card-text span {
color: #ffffff66; color: var(--transparent-fg);
font-size: 12px; font-size: 12px;
top: 0px; top: 0px;
} }

View File

@ -18,7 +18,7 @@
<ng-container *ngIf="widget; else regularRows"> <ng-container *ngIf="widget; else regularRows">
<tr *ngFor="let utxo of utxos | slice:0:6"> <tr *ngFor="let utxo of utxos | slice:0:6">
<td class="txid text-left widget"> <td class="txid text-left widget">
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12"> <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:var(--orange)">
<app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate> <app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>
</a> </a>
</td> </td>
@ -33,12 +33,12 @@
<ng-template #regularRows> <ng-template #regularRows>
<tr *ngFor="let utxo of utxos | slice:(page - 1) * pageSize:page * pageSize"> <tr *ngFor="let utxo of utxos | slice:(page - 1) * pageSize:page * pageSize">
<td class="txid text-left"> <td class="txid text-left">
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12"> <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:var(--orange)">
<app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate> <app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>
</a> </a>
</td> </td>
<td class="address text-left"> <td class="address text-left">
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + utxo.bitcoinaddress }}" target="_blank" style="color:#b86d12"> <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + utxo.bitcoinaddress }}" target="_blank" style="color:var(--orange)">
<app-truncate [text]="utxo.bitcoinaddress" [lastChars]="6"></app-truncate> <app-truncate [text]="utxo.bitcoinaddress" [lastChars]="6"></app-truncate>
</a> </a>
</td> </td>
@ -62,7 +62,7 @@
<td class="expires-in text-left" [ngStyle]="{ 'color': getGradientColor(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) }"> <td class="expires-in text-left" [ngStyle]="{ 'color': getGradientColor(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) }">
{{ utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate < 0 ? -(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) : utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate }} <span i18n="shared.blocks" class="symbol">blocks</span> {{ utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate < 0 ? -(utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate) : utxo.blocknumber + utxo.timelock - lastReservesBlockUpdate }} <span i18n="shared.blocks" class="symbol">blocks</span>
</td> </td>
<td *ngIf="!widget && showExpiredUtxos === true" class="is-dust text-right" [ngStyle]="{ 'color': !utxo.isDust ? '#D81B60' : '' }"> <td *ngIf="!widget && showExpiredUtxos === true" class="is-dust text-right" [ngStyle]="{ 'color': !utxo.isDust ? 'var(--red)' : '' }">
@if (utxo.isDust) { @if (utxo.isDust) {
} @else { } @else {

View File

@ -122,8 +122,8 @@ export class FederationUtxosListComponent implements OnInit {
getGradientColor(value: number): string { getGradientColor(value: number): string {
const distanceToGreen = Math.abs(4032 - value); const distanceToGreen = Math.abs(4032 - value);
const green = '#7CB342'; const green = 'var(--green)';
const red = '#D81B60'; const red = 'var(--red)';
if (value < 0) { if (value < 0) {
return red; return red;

View File

@ -61,7 +61,7 @@
</td> </td>
<td class="output text-left"> <td class="output text-left">
<ng-container *ngIf="peg.bitcointxid; else redeemInProgress"> <ng-container *ngIf="peg.bitcointxid; else redeemInProgress">
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + peg.bitcointxid + ':' + peg.bitcoinindex }}" target="_blank" style="color:#b86d12"> <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + peg.bitcointxid + ':' + peg.bitcoinindex }}" target="_blank" style="color:var(--orange)">
<app-truncate [text]="peg.bitcointxid + ':' + peg.bitcoinindex" [lastChars]="6"></app-truncate> <app-truncate [text]="peg.bitcointxid + ':' + peg.bitcoinindex" [lastChars]="6"></app-truncate>
</a> </a>
</ng-container> </ng-container>
@ -73,7 +73,7 @@
</td> </td>
<td class="address text-left"> <td class="address text-left">
<ng-container *ngIf="peg.bitcoinaddress; else noRedeem"> <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + peg.bitcoinaddress }}" target="_blank" style="color:#b86d12"> <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + peg.bitcoinaddress }}" target="_blank" style="color:var(--orange)">
<app-truncate [text]="peg.bitcoinaddress" [lastChars]="6"></app-truncate> <app-truncate [text]="peg.bitcoinaddress" [lastChars]="6"></app-truncate>
</a> </a>
</ng-container> </ng-container>

View File

@ -102,11 +102,11 @@ tr, td, th {
} }
.credit { .credit {
color: #7CB342; color: var(--green);
} }
.debit { .debit {
color: #D81B60; color: var(--red);
} }
.glow-effect { .glow-effect {
@ -118,6 +118,6 @@ tr, td, th {
color: #777983; color: #777983;
} }
100% { 100% {
color: #D81B60; color: var(--red);
} }
} }

View File

@ -31,7 +31,7 @@
} }
.card-text span { .card-text span {
color: #ffffff66; color: var(--transparent-fg);
font-size: 12px; font-size: 12px;
top: 0px; top: 0px;
} }
@ -72,9 +72,9 @@
} }
.credit { .credit {
color: #7CB342; color: var(--green);
} }
.debit { .debit {
color: #D81B60; color: var(--red);
} }

View File

@ -36,15 +36,15 @@
top: -2px; top: -2px;
} }
.danger { .danger {
color: #D81B60; color: var(--red);
} }
.correct { .correct {
color: #7CB342; color: var(--green);
} }
} }
.card-text span { .card-text span {
color: #ffffff66; color: var(--transparent-fg);
font-size: 12px; font-size: 12px;
top: 0px; top: 0px;
} }

View File

@ -95,8 +95,8 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
lineStyle: { lineStyle: {
width: 6, width: 6,
color: [ color: [
[0.49, '#D81B60'], [0.49, 'var(--red)'],
[1, '#7CB342'] [1, 'var(--green)']
] ]
} }
}, },

View File

@ -11,9 +11,9 @@
<div class="item"> <div class="item">
<h5 class="card-title" i18n="dashboard.btc-holdings">BTC Holdings</h5> <h5 class="card-title" i18n="dashboard.btc-holdings">BTC Holdings</h5>
<div *ngIf="(currentReserves$ | async) as currentReserves; else loadingData" class="card-text"> <div *ngIf="(currentReserves$ | async) as currentReserves; else loadingData" class="card-text">
<div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: #b86d12;">BTC</span></div> <div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: var(--orange);">BTC</span></div>
<span class="fiat"> <span class="fiat">
<span><ng-container i18n="shared.as-of-block">As of block</ng-container>&nbsp;<a href="{{ env.MEMPOOL_WEBSITE_URL + '/block/' + currentReserves.hash }}" target="_blank" style="color:#b86d12">{{ currentReserves.lastBlockUpdate }}</a></span> <span><ng-container i18n="shared.as-of-block">As of block</ng-container>&nbsp;<a href="{{ env.MEMPOOL_WEBSITE_URL + '/block/' + currentReserves.hash }}" target="_blank" style="color:var(--orange)">{{ currentReserves.lastBlockUpdate }}</a></span>
</span> </span>
</div> </div>
</div> </div>

View File

@ -35,7 +35,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
.card-text span { .card-text span {
color: #ffffff66; color: var(--transparent-fg);
font-size: 12px; font-size: 12px;
top: 0px; top: 0px;
} }

View File

@ -8,7 +8,7 @@
} }
.danger { .danger {
color: #dc3545; color: var(--red);
} }
.dropdown-menu { .dropdown-menu {

View File

@ -204,7 +204,7 @@
<ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type"> <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
<ng-container i18n="transactions-list.peg-out-to">Peg-out to <ng-container *ngTemplateOutlet="pegOutLink"></ng-container></ng-container> <ng-container i18n="transactions-list.peg-out-to">Peg-out to <ng-container *ngTemplateOutlet="pegOutLink"></ng-container></ng-container>
<ng-template #pegOutLink> <ng-template #pegOutLink>
<a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegoutLink" target="_blank" style="color:#b86d12" [attr.href]="'https://mempool.space/address/' + vout.pegout.scriptpubkey_address" title="{{ vout.pegout.scriptpubkey_address }}"> <a *ngIf="stateService.env.BASE_MODULE === 'liquid'; else localPegoutLink" target="_blank" style="color:var(--orange)" [attr.href]="'https://mempool.space/address/' + vout.pegout.scriptpubkey_address" title="{{ vout.pegout.scriptpubkey_address }}">
<app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate> <app-truncate [text]="vout.pegout.scriptpubkey_address"></app-truncate>
</a> </a>
<ng-template #localPegoutLink> <ng-template #localPegoutLink>

View File

@ -105,7 +105,7 @@
font-size: 12px; font-size: 12px;
} }
.bitcoin-color { .bitcoin-color {
color: #b86d12; color: var(--orange);
} }
} }
.progress { .progress {

View File

@ -101,6 +101,7 @@ $dropdown-link-active-bg: $active-bg;
--yellow: #ffd800; --yellow: #ffd800;
--grey: #6c757d; --grey: #6c757d;
--tooltip-grey: #b1b1b1; --tooltip-grey: #b1b1b1;
--orange: #b86d12;
} }
html, body { html, body {

View File

@ -98,4 +98,5 @@ $dropdown-link-active-bg: $active-bg;
--yellow: #ffcc00; --yellow: #ffcc00;
--grey: #7e7e7e; --grey: #7e7e7e;
--tooltip-grey: #b1b1b1; --tooltip-grey: #b1b1b1;
--orange: #ff9f00;
} }

View File

@ -98,4 +98,5 @@ $dropdown-link-active-bg: $active-bg;
--yellow: #ffcc00; --yellow: #ffcc00;
--grey: #7e7e7e; --grey: #7e7e7e;
--tooltip-grey: #b1b1b1; --tooltip-grey: #b1b1b1;
--orange: #ff9f00;
} }