Merge pull request #4944 from mempool/natsoni/more-css-fix
More css fixes
This commit is contained in:
		
						commit
						165340324c
					
				| @ -76,7 +76,7 @@ | |||||||
| 
 | 
 | ||||||
|       &.tx { |       &.tx { | ||||||
|         .fill { |         .fill { | ||||||
|           background: #3bcc49; |           background: var(--green); | ||||||
|         } |         } | ||||||
|         .line { |         .line { | ||||||
|           .fee-rate { |           .fee-rate { | ||||||
|  | |||||||
| @ -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, | ||||||
|             } |             } | ||||||
|           }, |           }, | ||||||
|  | |||||||
| @ -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; | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -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; | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -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> | ||||||
|  | |||||||
| @ -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; | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -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 { | ||||||
|  | |||||||
| @ -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); | ||||||
|  | |||||||
| @ -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> | ||||||
|  | |||||||
| @ -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); | ||||||
| } | } | ||||||
| @ -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, | ||||||
|           } |           } | ||||||
|         } |         } | ||||||
|  | |||||||
| @ -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> <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> <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> | ||||||
|  | |||||||
| @ -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; | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -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> | ||||||
|  | |||||||
| @ -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; | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -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 { | ||||||
|  | |||||||
| @ -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; | ||||||
|  | |||||||
| @ -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> | ||||||
|  | |||||||
| @ -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); | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  | |||||||
| @ -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); | ||||||
| } | } | ||||||
| @ -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; | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -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)'] | ||||||
|               ] |               ] | ||||||
|             } |             } | ||||||
|           }, |           }, | ||||||
|  | |||||||
| @ -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> <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> <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> | ||||||
|  | |||||||
| @ -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; | ||||||
|     } |     } | ||||||
|  | |||||||
| @ -8,7 +8,7 @@ | |||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .danger { | .danger { | ||||||
|   color: #dc3545; |   color: var(--red); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .dropdown-menu { | .dropdown-menu { | ||||||
|  | |||||||
| @ -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> | ||||||
|  | |||||||
| @ -105,7 +105,7 @@ | |||||||
|         font-size: 12px; |         font-size: 12px; | ||||||
|       } |       } | ||||||
|       .bitcoin-color { |       .bitcoin-color { | ||||||
|         color: #b86d12; |         color: var(--orange); | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|     .progress { |     .progress { | ||||||
|  | |||||||
| @ -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 { | ||||||
|  | |||||||
| @ -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; | ||||||
| } | } | ||||||
|  | |||||||
| @ -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; | ||||||
| } | } | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user