From 420cac42aa4de29e3bc2de77e81e8bdc6068fed4 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Tue, 3 Jan 2023 05:24:14 -0600 Subject: [PATCH] add high contrast theme --- frontend/angular.json | 5 + frontend/src/app/app.constants.ts | 62 ++-- .../bisq-main-dashboard.component.scss | 2 +- .../bisq-transfers.component.scss | 6 +- .../block-fee-rates-graph.component.ts | 2 +- .../block-fees-graph.component.ts | 2 +- .../block-overview-tooltip.component.scss | 2 +- .../block-prediction-graph.component.ts | 2 +- .../block-rewards-graph.component.ts | 2 +- .../block-sizes-weights-graph.component.ts | 2 +- .../app/components/block/block.component.scss | 2 - .../difficulty/difficulty.component.scss | 2 +- .../fees-box/fees-box.component.scss | 3 +- .../components/fees-box/fees-box.component.ts | 43 ++- .../components/footer/footer.component.scss | 10 +- .../hashrate-chart.component.scss | 2 +- .../hashrate-chart.component.ts | 2 +- .../hashrate-chart-pools.component.ts | 2 +- .../liquid-master-page.component.scss | 2 +- .../master-page/master-page.component.scss | 2 +- .../mining-dashboard.component.html | 4 +- .../mining-dashboard.component.scss | 4 +- .../pool-ranking/pool-ranking.component.scss | 2 +- .../pool-ranking/pool-ranking.component.ts | 8 +- .../app/components/pool/pool.component.scss | 2 +- .../src/app/components/pool/pool.component.ts | 2 +- .../reward-stats/reward-stats.component.scss | 2 +- .../search-results.component.scss | 2 +- .../transactions-list.component.scss | 8 +- .../tx-bowtie-graph-tooltip.component.scss | 2 +- .../app/dashboard/dashboard.component.html | 2 +- .../app/dashboard/dashboard.component.scss | 2 +- .../docs/api-docs/api-docs-nav.component.scss | 2 +- .../channels-statistics.component.scss | 2 +- .../lightning-dashboard.component.html | 4 +- .../lightning-dashboard.component.scss | 4 +- .../node-fee-chart.component.ts | 2 +- .../node-statistics-chart.component.ts | 2 +- .../node-statistics.component.scss | 2 +- .../nodes-channels-map.component.ts | 2 +- .../nodes-channels/node-channels.component.ts | 2 +- .../nodes-map/nodes-map.component.ts | 2 +- .../nodes-networks-chart.component.scss | 2 +- .../nodes-networks-chart.component.ts | 2 +- .../nodes-per-country-chart.component.ts | 8 +- .../nodes-per-isp-chart.component.scss | 2 +- .../nodes-per-isp-chart.component.ts | 8 +- .../nodes-rankings-dashboard.component.html | 6 +- .../nodes-rankings-dashboard.component.scss | 4 +- .../lightning-statistics-chart.component.scss | 2 +- .../lightning-statistics-chart.component.ts | 2 +- frontend/src/app/services/theme.service.ts | 18 +- frontend/src/index.bisq.html | 2 +- frontend/src/index.liquid.html | 2 +- frontend/src/index.mempool.html | 2 +- frontend/src/styles.scss | 12 +- frontend/src/theme-contrast.scss | 296 +++++++++++++++++- 57 files changed, 443 insertions(+), 146 deletions(-) diff --git a/frontend/angular.json b/frontend/angular.json index 25d2a302c..385a63707 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -162,6 +162,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 19518c121..f4ea498e6 100644 --- a/frontend/src/app/app.constants.ts +++ b/frontend/src/app/app.constants.ts @@ -32,37 +32,37 @@ 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', -]; + '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', + ]; export const chartColors = [ "#D81B60", diff --git a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss index a7714ed49..ec09a30be 100644 --- a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss +++ b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss @@ -72,7 +72,7 @@ } .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 1rem; } diff --git a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss index 499c1b179..7f5524ba2 100644 --- a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss +++ b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss @@ -12,15 +12,15 @@ } .green { - color:#28a745; + color: var(--green); } .red { - color:var(--red); + color: var(--red); } .grey { - color:#6c757d; + color: var(--grey); } @media (max-width: 767.98px) { 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 4499a69fc..478dc7ee8 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 @@ -170,7 +170,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 d3fc3f915..8e0ab57d1 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 @@ -142,7 +142,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-overview-tooltip/block-overview-tooltip.component.scss b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss index 00f6d94f7..388e456e6 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-prediction-graph/block-prediction-graph.component.ts b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts index 97756b2fe..45220c32d 100644 --- a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts +++ b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts @@ -130,7 +130,7 @@ export class BlockPredictionGraphComponent 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-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts index b8f36950b..67670279a 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 @@ -142,7 +142,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 c846317cd..955baefe5 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 @@ -141,7 +141,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 a3634de87..de8286c7c 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -118,9 +118,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 088276d06..0ce13cd37 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.scss +++ b/frontend/src/app/components/difficulty/difficulty.component.scss @@ -82,7 +82,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 c8cde1f17..09e75f6d9 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 } from 'rxjs'; +import { Observable, Subscription } from 'rxjs'; import { Recommendedfees } from '../../interfaces/websocket.interface'; import { feeLevels } from '../../app.constants'; import { 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 { isLoadingWebSocket$: 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 { @@ -28,18 +31,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 c7d1f703d..402cf8c35 100644 --- a/frontend/src/app/components/footer/footer.component.scss +++ b/frontend/src/app/components/footer/footer.component.scss @@ -34,16 +34,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 cfbbd0b22..cbf34df09 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss @@ -115,7 +115,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 87f85a543..970f4f08d 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -210,7 +210,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 3b4002196..6a91aa52b 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 @@ -189,7 +189,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 bd4ef1546..1e33f4cc6 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 @@ -34,7 +34,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 c16c3649b..8dfe480c2 100644 --- a/frontend/src/app/components/master-page/master-page.component.scss +++ b/frontend/src/app/components/master-page/master-page.component.scss @@ -40,7 +40,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 36aec8906..822d2bd2b 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html @@ -52,7 +52,7 @@
Latest blocks
  - + @@ -66,7 +66,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 09c9d7b66..961787aae 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss @@ -23,10 +23,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 0aad4df35..8665cb18c 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss @@ -118,7 +118,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 1223a2663..ab3046197 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -144,7 +144,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, }, @@ -154,7 +154,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: () => { @@ -182,7 +182,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 }, @@ -191,7 +191,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 071582358..540779615 100644 --- a/frontend/src/app/components/pool/pool.component.scss +++ b/frontend/src/app/components/pool/pool.component.scss @@ -184,7 +184,7 @@ div.scrollable { } .block-count-title { - color: #4a68b9; + color: var(--title-fg); font-size: 14px; text-align: left; @media (max-width: 767.98px) { diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts index 56b8bd392..dd6ee8d52 100644 --- a/frontend/src/app/components/pool/pool.component.ts +++ b/frontend/src/app/components/pool/pool.component.ts @@ -145,7 +145,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 7cf9fe3c2..8d7f4c254 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 807216be1..e45c099c8 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 { @@ -142,7 +142,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 d0551f2c8..4cf677308 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 6db3af855..84a099a25 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -80,7 +80,7 @@
Latest blocks
  - + diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 5246b8a13..d0be8f9da 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -16,7 +16,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 3d1b17324..c1374232c 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 d9a04a5b6..e9b09a866 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 16d02807c..1d2f1dd66 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html @@ -61,7 +61,7 @@
Liquidity Ranking
  - + @@ -75,7 +75,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 09c9d7b66..961787aae 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss @@ -23,10 +23,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 44d7cf43f..a436fd6c5 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 @@ -133,7 +133,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 430ffbb64..aeb97d886 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 @@ -110,7 +110,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 4da4e3cb4..67e1e5bb2 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 @@ -263,7 +263,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 91d43f6ab..453651b73 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 db13ca6fe..938c13ebf 100644 --- a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts +++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts @@ -194,7 +194,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 8b3153fe6..d87a9572b 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 @@ -114,7 +114,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 8e7a36904..505573cd4 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 @@ -243,7 +243,7 @@ export class NodesNetworksChartComponent 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-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 3ec5c2635..4165efad1 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: () => { @@ -118,7 +118,7 @@ export class NodesPerCountryChartComponent implements OnInit { name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`), label: { overflow: 'truncate', - color: '#b1b1b1', + color: 'var(--tooltip-grey)', alignTo: 'edge', edgeDistance: edgeDistance }, @@ -127,7 +127,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 b801c3e97..fe957d648 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 @@ -119,7 +119,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 3889cc269..123743756 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 @@ -139,7 +139,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, }, @@ -149,7 +149,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: () => { @@ -172,7 +172,7 @@ export class NodesPerISPChartComponent implements OnInit { name: 'Other' + (isMobile() || this.widget ? `` : ` (${totalShareOther.toFixed(2)}%)`), label: { overflow: 'truncate', - color: '#b1b1b1', + color: 'var(--tooltip-grey)', alignTo: 'edge', edgeDistance: edgeDistance }, @@ -181,7 +181,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 1623d917e..4655ab795 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 f0313321c..517ca381a 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 @@ -114,7 +114,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 6fca05b36..e9da1e5d9 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 @@ -153,7 +153,7 @@ export class LightningStatisticsChartComponent 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/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.bisq.html b/frontend/src/index.bisq.html index 3ca418d94..43c85b404 100644 --- a/frontend/src/index.bisq.html +++ b/frontend/src/index.bisq.html @@ -23,7 +23,7 @@ - + diff --git a/frontend/src/index.liquid.html b/frontend/src/index.liquid.html index 97ef201e4..630f6a2ab 100644 --- a/frontend/src/index.liquid.html +++ b/frontend/src/index.liquid.html @@ -31,7 +31,7 @@ - + diff --git a/frontend/src/index.mempool.html b/frontend/src/index.mempool.html index 2dca09712..60f1b4421 100644 --- a/frontend/src/index.mempool.html +++ b/frontend/src/index.mempool.html @@ -30,7 +30,7 @@ - + diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 68aa00a42..206355806 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 { @@ -351,7 +355,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; @@ -361,7 +365,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; @@ -452,7 +456,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