diff --git a/frontend/angular.json b/frontend/angular.json index f55c59ae9..f631cce4d 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -170,6 +170,11 @@ ], "styles": [ "src/styles.scss", + { + "input": "src/theme-contrast.scss", + "bundleName": "contrast", + "inject": false + }, "node_modules/@fortawesome/fontawesome-svg-core/styles.css" ], "vendorChunk": true, diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts index 2af8117b8..a8ba96ed4 100644 --- a/frontend/src/app/app.constants.ts +++ b/frontend/src/app/app.constants.ts @@ -40,45 +40,45 @@ export const defaultMempoolFeeColors = [ ]; export const contrastMempoolFeeColors = [ - '83fd00', - '83f609', - '83ef12', - '83e71a', - '83e023', - '83d92c', - '83d235', - '83cb3e', - '83c446', - '83bc4f', - '83b558', - '83ae61', - '83a76a', - '83a072', - '83997b', - '839184', - '838a8d', - '838395', - '837c9e', - '8375a7', - '836eb0', - '8366b9', - '835fc1', - '8358ca', - '8351d3', - '834adc', - '8343e5', - '833bed', - '8334f6', - '832dff', - '832dff', - '832dff', - '832dff', - '832dff', - '832dff', - '832dff', - '832dff', - '832dff', -]; + '0082e6', + '0984df', + '1285d9', + '1a87d2', + '2388cb', + '2c8ac5', + '358bbe', + '3e8db7', + '468eb0', + '4f90aa', + '5892a3', + '61939c', + '6a9596', + '72968f', + '7b9888', + '849982', + '8d9b7b', + '959c74', + '9e9e6e', + 'a79f67', + 'b0a160', + 'b9a35a', + 'c1a453', + 'caa64c', + 'd3a745', + 'dca93f', + 'e5aa38', + 'edac31', + 'f6ad2b', + 'ffaf24', + 'ffaf24', + 'ffaf24', + 'ffaf24', + 'ffaf24', + 'ffaf24', + 'ffaf24', + 'ffaf24', + 'ffaf24', + ]; export const chartColors = [ "#D81B60", diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts index 13fa60364..ba3489e17 100644 --- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts @@ -233,7 +233,7 @@ export class BlockFeeRatesGraphComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts index 4a2fa9808..eb567c2a6 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts @@ -151,7 +151,7 @@ export class BlockFeesGraphComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts index efd490d1f..e48d5c091 100644 --- a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts +++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts @@ -131,7 +131,7 @@ export class BlockHealthGraphComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', 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 51edee1e8..135f1cfe6 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 @@ -3,7 +3,7 @@ background: rgba(#11131f, 0.95); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); - color: #b1b1b1; + color: var(--tooltip-grey); display: flex; flex-direction: column; justify-content: space-between; diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts index 46b614b78..d0c154420 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts @@ -150,7 +150,7 @@ export class BlockRewardsGraphComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts index 7db01bec9..bf591ad70 100644 --- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts +++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts @@ -146,7 +146,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index 32de75c1e..a7ebafbe5 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -175,9 +175,7 @@ h1 { } a { - color: #1ad8f4; &:hover, &:focus { - color: #09a3ba; display: inline-block; } } diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss index ecd63a684..eda486966 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.scss +++ b/frontend/src/app/components/difficulty/difficulty.component.scss @@ -96,7 +96,7 @@ } .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 1rem; } diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss index dee87f7f2..0272936ee 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.scss +++ b/frontend/src/app/components/fees-box/fees-box.component.scss @@ -1,5 +1,5 @@ .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 10px; margin-bottom: 4px; font-size: 1rem; @@ -79,6 +79,7 @@ display: flex; flex-direction: row; transition: background-color 1s; + color: var(--color-fg); &.priority { @media (767px < width < 992px), (width < 576px) { width: 100%; diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts index 2523822f4..d3a1f19b9 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.ts +++ b/frontend/src/app/components/fees-box/fees-box.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core'; import { StateService } from '../../services/state.service'; -import { Observable, combineLatest } from 'rxjs'; +import { Observable, combineLatest, Subscription } from 'rxjs'; import { Recommendedfees } from '../../interfaces/websocket.interface'; import { feeLevels } from '../../app.constants'; import { map, startWith, tap } from 'rxjs/operators'; @@ -12,15 +12,18 @@ import { ThemeService } from 'src/app/services/theme.service'; styleUrls: ['./fees-box.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FeesBoxComponent implements OnInit { +export class FeesBoxComponent implements OnInit, OnDestroy { isLoading$: Observable; recommendedFees$: Observable; + themeSubscription: Subscription; gradient = 'linear-gradient(to right, #2e324e, #2e324e)'; noPriority = '#2e324e'; + fees: Recommendedfees; constructor( private stateService: StateService, private themeService: ThemeService, + private cd: ChangeDetectorRef, ) { } ngOnInit(): void { @@ -33,18 +36,32 @@ export class FeesBoxComponent implements OnInit { this.recommendedFees$ = this.stateService.recommendedFees$ .pipe( tap((fees) => { - let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.minimumFee >= feeLvl); - feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; - const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]); - - feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl); - feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; - const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]); - - this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`; - this.noPriority = startColor; + this.fees = fees; + this.setFeeGradient(); } ) ); + this.themeSubscription = this.themeService.themeChanged$.subscribe(() => { + this.setFeeGradient(); + }) + } + + setFeeGradient() { + let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.minimumFee >= feeLvl); + feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; + const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]); + + feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.fastestFee >= feeLvl); + feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; + const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]); + + this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`; + this.noPriority = startColor; + + this.cd.markForCheck(); + } + + ngOnDestroy(): void { + this.themeSubscription.unsubscribe(); } } diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss index a7c0f2c2b..b21f39676 100644 --- a/frontend/src/app/components/footer/footer.component.scss +++ b/frontend/src/app/components/footer/footer.component.scss @@ -40,16 +40,8 @@ } } -.txPerSecond { - color: #4a9ff4; -} - .mempoolSize { - color: #4a68b9; -} - -.unconfirmedTx { - color: #f14d80; + color: var(--title-fg); } .info-block { diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss index df5795b90..dc19dc9d1 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss @@ -94,7 +94,7 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-text { font-size: 18px; diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts index 04c2721d2..b61f88521 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -242,7 +242,7 @@ export class HashrateChartComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts index c6498b25d..5ac2cc10d 100644 --- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts +++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts @@ -225,7 +225,7 @@ export class HashrateChartPoolsComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss index ce3127042..1577b5c88 100644 --- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss +++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss @@ -47,7 +47,7 @@ li.nav-item { } .navbar-nav { - background: #212121; + background: var(--navbar-bg); bottom: 0; box-shadow: 0px 0px 15px 0px #000; flex-direction: row; diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss index 1bead6f52..2f5bc536e 100644 --- a/frontend/src/app/components/master-page/master-page.component.scss +++ b/frontend/src/app/components/master-page/master-page.component.scss @@ -58,7 +58,7 @@ li.nav-item { } .navbar-nav { - background: #212121; + background: var(--navbar-bg); bottom: 0; box-shadow: 0px 0px 15px 0px #000; flex-direction: row; diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html index c4fca72eb..6b37d7dd9 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html @@ -55,7 +55,7 @@
Recent Blocks
  - + @@ -69,7 +69,7 @@
Adjustments
  - + diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss index 87a773ab2..a7948b40e 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss @@ -32,10 +32,10 @@ .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-title > a { - color: #4a68b9; + color: var(--title-fg); } .card-body.pool-ranking { diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss index ce5813da1..65f4f1f5c 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss @@ -99,7 +99,7 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index 43088329a..91422d2d4 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -146,7 +146,7 @@ export class PoolRankingComponent implements OnInit { name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`), label: { overflow: 'none', - color: '#b1b1b1', + color: 'var(--tooltip-grey)', alignTo: 'edge', edgeDistance: edgeDistance, }, @@ -156,7 +156,7 @@ export class PoolRankingComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', }, borderColor: '#000', formatter: () => { @@ -184,7 +184,7 @@ export class PoolRankingComponent implements OnInit { name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`), label: { overflow: 'none', - color: '#b1b1b1', + color: 'var(--tooltip-grey)', alignTo: 'edge', edgeDistance: edgeDistance }, @@ -193,7 +193,7 @@ export class PoolRankingComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', }, borderColor: '#000', formatter: () => { diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss index b2975639e..36bdc93e9 100644 --- a/frontend/src/app/components/pool/pool.component.scss +++ b/frontend/src/app/components/pool/pool.component.scss @@ -190,7 +190,7 @@ div.scrollable { } .data-title { - color: #4a68b9; + color: var(--title-fg); font-size: 14px; } diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts index 7c6b5de38..3d2d0ac81 100644 --- a/frontend/src/app/components/pool/pool.component.ts +++ b/frontend/src/app/components/pool/pool.component.ts @@ -175,7 +175,7 @@ export class PoolComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.scss b/frontend/src/app/components/reward-stats/reward-stats.component.scss index e541e30ef..2237d8716 100644 --- a/frontend/src/app/components/reward-stats/reward-stats.component.scss +++ b/frontend/src/app/components/reward-stats/reward-stats.component.scss @@ -1,5 +1,5 @@ .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 10px; margin-bottom: 4px; font-size: 1rem; diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.scss b/frontend/src/app/components/search-form/search-results/search-results.component.scss index 496e718d8..5540d7e7a 100644 --- a/frontend/src/app/components/search-form/search-results/search-results.component.scss +++ b/frontend/src/app/components/search-form/search-results/search-results.component.scss @@ -1,5 +1,5 @@ .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 10px; margin-bottom: 4px; font-size: 1rem; diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss index f4e58f1af..2bae3de2c 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.scss +++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss @@ -13,15 +13,15 @@ } } .green { - color:#28a745; + color: var(--green); } .red { - color:var(--red); + color: var(--red); } .grey { - color:#6c757d; + color: var(--grey); } .mobile-bottomcol { @@ -159,7 +159,7 @@ h2 { } .grey-info-text { - color:#6c757d; + color: var(--grey); font-style: italic; font-size: 12px; } 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 97cfcddb7..0c973ad00 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 @@ -3,7 +3,7 @@ background: rgba(#11131f, 0.95); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); - color: #b1b1b1; + color: var(--tooltip-grey); padding: 10px 15px; text-align: left; pointer-events: none; diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 5df8256ca..a6b67384b 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -63,7 +63,7 @@
Recent Replacements
  - + diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index ffc9449f7..08d77beeb 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -12,7 +12,7 @@ } .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 1rem; } diff --git a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss index 9db2f56e9..c22d95ed2 100644 --- a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss +++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss @@ -1,5 +1,5 @@ p { - color: #4a68b9; + color: var(--title-fg); font-weight: 700; margin: 10px 0; margin: 15px 0 10px 0; diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss index 0b144ae2b..614b9bd94 100644 --- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss +++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss @@ -1,5 +1,5 @@ .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 10px; margin-bottom: 4px; font-size: 1rem; diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html index ec59b7432..490a5d706 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html @@ -65,7 +65,7 @@
Liquidity Ranking
  - + @@ -79,7 +79,7 @@
Connectivity Ranking
  - + diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss index 435adc925..7fb011146 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss @@ -35,10 +35,10 @@ .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-title > a { - color: #4a68b9; + color: var(--title-fg); } .card-body.pool-ranking { diff --git a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts index ac53da255..7f329eaf2 100644 --- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts +++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts @@ -142,7 +142,7 @@ export class NodeFeeChartComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts index b2016b2cf..35cd8b236 100644 --- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts +++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts @@ -112,7 +112,7 @@ export class NodeStatisticsChartComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss index cb580a151..7b3f778b1 100644 --- a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss +++ b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss @@ -1,5 +1,5 @@ .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 10px; margin-bottom: 4px; font-size: 1rem; diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts index 18edc6ab1..3447348be 100644 --- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts +++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts @@ -296,7 +296,7 @@ export class NodesChannelsMap implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts index 1954e429a..fce014e77 100644 --- a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts +++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts @@ -96,7 +96,7 @@ export class NodeChannels implements OnChanges { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', }, borderColor: '#000', formatter: (value): string => { diff --git a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts index 054f1ab6f..50df2f986 100644 --- a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts +++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts @@ -196,7 +196,7 @@ export class NodesMap implements OnInit, OnChanges { borderRadius: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss index ca8ef711e..ab8cb92da 100644 --- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss +++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss @@ -93,7 +93,7 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-text { font-size: 18px; diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts index 3c2868794..9784e0a5b 100644 --- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts +++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts @@ -255,7 +255,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts index 89300e5eb..7eba4f9b7 100644 --- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts +++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts @@ -85,7 +85,7 @@ export class NodesPerCountryChartComponent implements OnInit { name: country.name.en + (this.isMobile() ? `` : ` (${country.share}%)`), label: { overflow: 'truncate', - color: '#b1b1b1', + color: 'var(--tooltip-grey)', alignTo: 'edge', edgeDistance: edgeDistance, }, @@ -95,7 +95,7 @@ export class NodesPerCountryChartComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', }, borderColor: '#000', formatter: () => { @@ -119,7 +119,7 @@ export class NodesPerCountryChartComponent implements OnInit { name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`, label: { overflow: 'truncate', - color: '#b1b1b1', + color: 'var(--tooltip-grey)', alignTo: 'edge', edgeDistance: edgeDistance }, @@ -128,7 +128,7 @@ export class NodesPerCountryChartComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', }, borderColor: '#000', formatter: () => { diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss index 056e9024b..b9490d579 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss @@ -89,7 +89,7 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts index c5928c7d9..429d7ee36 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts @@ -144,7 +144,7 @@ export class NodesPerISPChartComponent implements OnInit { label: { overflow: 'truncate', width: isMobile() ? 75 : this.widget ? 125 : 250, - color: '#b1b1b1', + color: 'var(--tooltip-grey)', alignTo: 'edge', edgeDistance: edgeDistance, }, @@ -154,7 +154,7 @@ export class NodesPerISPChartComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', }, borderColor: '#000', formatter: () => { @@ -178,7 +178,7 @@ export class NodesPerISPChartComponent implements OnInit { name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`, label: { overflow: 'truncate', - color: '#b1b1b1', + color: 'var(--tooltip-grey)', alignTo: 'edge', edgeDistance: edgeDistance }, @@ -187,7 +187,7 @@ export class NodesPerISPChartComponent implements OnInit { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', }, borderColor: '#000', formatter: () => { diff --git a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html index ef23bc104..11fb9227c 100644 --- a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html +++ b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html @@ -8,7 +8,7 @@
Liquidity Ranking
  + style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"> @@ -22,7 +22,7 @@
Connectivity Ranking
  + style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"> @@ -36,7 +36,7 @@
Oldest nodes
  + style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"> diff --git a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss index c9c322603..0f94397c6 100644 --- a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss +++ b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss @@ -14,10 +14,10 @@ .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-title > a { - color: #4a68b9; + color: var(--title-fg); } .card-text { diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss index 456ebdf38..1779394c9 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss @@ -93,7 +93,7 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-text { font-size: 18px; diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts index b008ce8e5..44f359ae8 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts @@ -164,7 +164,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges { borderRadius: 4, shadowColor: 'rgba(0, 0, 0, 0.5)', textStyle: { - color: '#b1b1b1', + color: 'var(--tooltip-grey)', align: 'left', }, borderColor: '#000', diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts index 2d4ba17a3..58fdc6575 100644 --- a/frontend/src/app/services/theme.service.ts +++ b/frontend/src/app/services/theme.service.ts @@ -46,13 +46,17 @@ export class ThemeService { this.mempoolFeeColors = contrastMempoolFeeColors; this.auditColors = contrastAuditColors; } - if (!this.style) { - this.style = document.createElement('link'); - this.style.rel = 'stylesheet'; - this.style.href = `theme-${theme}.css`; - document.head.appendChild(this.style); - } else { - this.style.href = `theme-${theme}.css`; + try { + if (!this.style) { + this.style = document.createElement('link'); + this.style.rel = 'stylesheet'; + this.style.href = `${theme}.css`; + document.head.appendChild(this.style); + } else { + this.style.href = `${theme}.css`; + } + } catch (err) { + console.log('failed to apply theme stylesheet: ', err); } } else { this.mempoolFeeColors = defaultMempoolFeeColors; diff --git a/frontend/src/index.liquid.html b/frontend/src/index.liquid.html index 7ec1ee0ee..5aa14cd2d 100644 --- a/frontend/src/index.liquid.html +++ b/frontend/src/index.liquid.html @@ -33,7 +33,7 @@ - + diff --git a/frontend/src/index.mempool.html b/frontend/src/index.mempool.html index 3edb144d1..838af21d0 100644 --- a/frontend/src/index.mempool.html +++ b/frontend/src/index.mempool.html @@ -32,7 +32,7 @@ - + diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 380a98ac5..fa680ed60 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -3,13 +3,13 @@ $bg: #1d1f31; $active-bg: #11131f; $hover-bg: #12131e; $fg: #fff; +$title-fg: #4a68b9; $taproot: #eba814; $taproot-light: #d5a90a; $taproot-dark: #9d7c05; /* Bootstrap */ - $body-bg: $bg; $body-color: $fg; $gray-800: $bg; @@ -64,6 +64,8 @@ $dropdown-link-active-bg: $active-bg; --active-bg: #{$active-bg}; --hover-bg: #{$hover-bg}; --fg: #{$fg}; + --color-fg: #ffffff; + --title-fg: #{$title-fg}; --primary: #{$primary}; --secondary: #{$secondary}; @@ -93,6 +95,8 @@ $dropdown-link-active-bg: $active-bg; --green: #3bcc49; --red: #dc3545; --yellow: #ffd800; + --grey: #6c757d; + --tooltip-grey: #b1b1b1; } html, body { @@ -384,7 +388,7 @@ html:lang(ru) .card-title { background: rgba($active-bg, 0.95); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); - color: #b1b1b1; + color: var(--tooltip-grey); display: flex; flex-direction: column; justify-content: space-between; @@ -394,7 +398,7 @@ html:lang(ru) .card-title { thead { th { font-size: 9px; - color: #b1b1b1; + color: var(--tooltip-grey); text-align: right; &:first-child { text-align: left; @@ -485,7 +489,7 @@ html:lang(ru) .card-title { thead { th { font-size: 9px; - color: #b1b1b1; + color: var(--tooltip-grey); text-align: right; &:first-child { text-align: left; diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss index 48d9a1034..a3d0bb9ca 100644 --- a/frontend/src/theme-contrast.scss +++ b/frontend/src/theme-contrast.scss @@ -1,8 +1,13 @@ /* Theme */ -$bg: #ff1f31; -$active-bg: #ff131f; -$hover-bg: #ff131e; -$fg: #ff0; +$bg: #11131f; +$active-bg: #000000; +$hover-bg: #12131e; +$fg: #fff; +$title-fg: #2055e3; + +$taproot: #eba814; +$taproot-light: #d5a90a; +$taproot-dark: #9d7c05; /* Bootstrap */ @@ -13,11 +18,11 @@ $gray-700: $fg; $nav-tabs-link-active-bg: $active-bg; -$primary: #105fb0; -$secondary: #2d3348; -$tertiary: #653b9c; -$success: #1a9436; -$info: #1bd8f4; +$primary: #007cfa; +$secondary: #272f4e; +$tertiary: #6225b2; +$success: #0aab2f; +$info: #10e0ff; $h5-font-size: 1.15rem !default; @@ -59,6 +64,8 @@ $dropdown-link-active-bg: $active-bg; --active-bg: #{$active-bg}; --hover-bg: #{$hover-bg}; --fg: #{$fg}; + --color-fg: #fff; + --title-fg: #{$title-fg}; --primary: #{$primary}; --secondary: #{$secondary}; @@ -66,5 +73,274 @@ $dropdown-link-active-bg: $active-bg; --success: #{$success}; --info: #{$info}; - --box-bg: var(--box-bg); + --transparent-fg: #ffffffbb; + + --box-bg: #171c2a; + --stat-box-bg: #0b1018; + --green: #83fd00; +} + +body { + background-color: var(--active-bg); +} + +.box { + background-color: var(--box-bg); + border: 1px solid rgba(0,0,0,.125); + box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075); +} + +.navbar-nav.liquid > .active { + background-color: var(--liquid) !important; +} + +.navbar-nav.testnet > .active { + background-color: var(--testnet) !important; +} + +.navbar-nav.signet > .active { + background-color: var(--signet) !important; +} + +.navbar-nav.liquidtestnet > .active { + background-color: var(--liquidtestnet) !important; +} + +.form-control { + color: #495057; +} +.form-control:focus { + color: #000; +} + +.form-control.form-control-secondary { + color: var(--fg); + background-color: var(--secondary); + border: 1px solid var(--secondary); +} +.form-control.form-control-secondary:focus { + color: var(--fg); +} + +.skeleton-loader { + background: #2e324e no-repeat; + background-image: linear-gradient( + 90deg, + rgba(255, 255, 255, 0), + #5d6182, + rgba(255, 255, 255, 0) + ); +} + +.symbol { + color: var(--transparent-fg); +} + +.progress-text { + span { + color: var(--fg) !important; + } +} + +.block-size, .blocks-container { + span { + color: var(--fg) !important; + } +} + +.title-block { + color: var(--fg); + border-top: 3px solid var(--fg); +} + +.title-address, .title-asset { + color: var(--fg); +} + +.close { + color: var(--fg); +} + +.close:hover { + color: var(--fg); +} + +.green-color { + color: var(--green); +} + +.red-color { + color: var(--red); +} + +.yellow-color { + color: var(--yellow); +} + +.table-striped tbody tr:nth-of-type(odd) { + background-color: var(--stat-box-bg); +} + +.bordertop { + border-top: 1px solid #4c4c4c; +} + +.tx-wrapper-tooltip-chart, +.fees-wrapper-tooltip-chart { + background: rgba($active-bg, 0.95); + box-shadow: 1px 1px 10px rgba(0,0,0,0.5); + color: var(--tooltip-grey); + thead { + th { + color: var(--tooltip-grey); + } + } + .title { + color: var(--fg); + } + .active { + color: yellow !important; + .value, + .total-partial { + color: yellow !important; + .symbol { + color: yellow !important; + } + } + } + .item { + .value { + .symbol { + color: #7e7e7e; + } + } + } + .total-label { + color: var(--fg); + } + thead { + th { + color: var(--tooltip-grey); + } + } + .total-percentage-bar { + span { + background: #282d47; + } + } +} + + +.fees-wrapper-tooltip-chart-advanced, +.tx-wrapper-tooltip-chart-advanced { + background: rgba($bg, 0.98); + thead { + .total-progress-percentage-bar, + .total-progress-sum-bar { + div { + background: #29324c94; + } + } + } + .total-percentage-bar-background { + background-color: #282d47; + } +} + +hr { + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.progress-mempool { + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%); +} + +.progress-mempool.testnet { + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%); +} + +.progress-mempool.signet { + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%); +} + +.progress-mempool.liquid { + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%); +} + +.progress-dark { + background-color: var(--stat-box-bg); +} + +.progress-darklight { + background-color: var(--box-bg); +} + +.progress-light { + background-color: #2e324e; +} + +.progress.progress-health { + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%); +} + +.progress-bar.progress-bar-health { + background: var(--secondary); +} + +.alert-mempool { + color: var(--fg); + background-color: var(--tertiary); + border-color: var(--alert-bg); +} + +// ASM opcode colors + +.constants { color: #ff8c00 } +.control { color: #87ceeb } +.stack { color: #ffa500 } +.splice { color: #46b5e2 } +.logic { color: #46b5e2 } +.arithmetic { color: #cae8d0 } +.crypto { color: #fa3d3d } +.locktime { color: #ff8c00 } +.reserved { color: #ff8c00 } + +.tab-pane { + .card { + button { + color: var(--fg); + } + + .collapsed { + background-color: var(--secondary); + color: var(--info); + } + } +} + + +.pagination-container { + background: var(--bg); +} + + +// Blinking block +@keyframes shadowyBackground { + 0% { + box-shadow: -10px -15px 75px rgba($taproot, 1); + } + 50% { + box-shadow: -10px -15px 75px rgba($taproot, .3); + } + 100% { + box-shadow: -10px -15px 75px rgba($taproot, 1); + } +} + +.blink-bg { + color: var(--fg); + background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important; + animation: shadowyBackground 1s infinite; + box-shadow: -10px -15px 75px rgba($taproot, 1); + transition: 100ms all ease-in; } \ No newline at end of file