From 4a76cb083aa3514d55fb21783c10fa1397720210 Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 23 Apr 2024 18:59:26 +0200 Subject: [PATCH] More css included in color themes --- .../acceleration-fees-graph.component.scss | 3 +- .../accelerator-dashboard.component.scss | 3 +- .../address-graph.component.scss | 3 +- .../address/address-preview.component.scss | 2 +- .../components/address/address.component.scss | 2 +- .../app/components/asset/asset.component.scss | 2 +- .../block-fee-rates-graph.component.scss | 3 +- .../block-fees-graph.component.scss | 3 +- .../block-health-graph.component.scss | 3 +- .../block-overview-tooltip.component.scss | 2 +- .../block-rewards-graph.component.scss | 3 +- .../block-sizes-weights-graph.component.scss | 3 +- .../blockchain-blocks.component.scss | 4 +- .../blockchain-blocks.component.ts | 6 +- .../blockchain/blockchain.component.scss | 2 +- .../app/components/clock/clock.component.ts | 16 ++--- .../difficulty-mining.component.scss | 3 +- .../difficulty-tooltip.component.scss | 4 +- .../difficulty/difficulty.component.html | 4 +- .../difficulty/difficulty.component.scss | 5 +- .../fees-box/fees-box.component.scss | 2 +- .../components/fees-box/fees-box.component.ts | 4 +- .../hashrate-chart.component.scss | 3 +- .../hashrate-chart-pools.component.scss | 3 +- .../mempool-blocks.component.scss | 4 +- .../mining-dashboard.component.scss | 3 +- .../rbf-timeline-tooltip.component.scss | 4 +- .../rbf-timeline/rbf-timeline.component.scss | 4 +- .../transactions-list.component.scss | 3 +- .../tx-bowtie-graph-tooltip.component.scss | 2 +- .../tx-bowtie-graph.component.ts | 4 +- .../app/dashboard/dashboard.component.scss | 6 +- .../lightning-dashboard.component.scss | 3 +- .../nodes-networks-chart.component.scss | 3 +- .../lightning-statistics-chart.component.scss | 3 +- frontend/src/styles.scss | 65 +++++++++++-------- frontend/src/theme-contrast.scss | 10 +-- frontend/src/theme-wiz.scss | 10 +-- 38 files changed, 124 insertions(+), 88 deletions(-) diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss index 96273dead..984bc2b4c 100644 --- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss +++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss index 563e189cf..e6763f60a 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss @@ -60,7 +60,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/address-graph/address-graph.component.scss b/frontend/src/app/components/address-graph/address-graph.component.scss index 3752203c1..62393644b 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.scss +++ b/frontend/src/app/components/address-graph/address-graph.component.scss @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/address/address-preview.component.scss b/frontend/src/app/components/address/address-preview.component.scss index 623d72db2..f03e13541 100644 --- a/frontend/src/app/components/address/address-preview.component.scss +++ b/frontend/src/app/components/address/address-preview.component.scss @@ -3,7 +3,7 @@ } .qr-wrapper { - background-color: var(--fg); + background-color: #fff; padding: 10px; padding-bottom: 5px; display: inline-block; diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss index 78ca0e80d..da615376c 100644 --- a/frontend/src/app/components/address/address.component.scss +++ b/frontend/src/app/components/address/address.component.scss @@ -1,5 +1,5 @@ .qr-wrapper { - background-color: var(--fg); + background-color: #fff; padding: 10px; padding-bottom: 5px; display: inline-block; diff --git a/frontend/src/app/components/asset/asset.component.scss b/frontend/src/app/components/asset/asset.component.scss index 6f8bc0915..56b1d6258 100644 --- a/frontend/src/app/components/asset/asset.component.scss +++ b/frontend/src/app/components/asset/asset.component.scss @@ -1,5 +1,5 @@ .qr-wrapper { - background-color: var(--fg); + background-color: #fff; padding: 10px; padding-bottom: 5px; display: inline-block; diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss index ed531e63d..5d8c286d3 100644 --- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss index b73d55685..ec3aeadc8 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/block-health-graph/block-health-graph.component.scss b/frontend/src/app/components/block-health-graph/block-health-graph.component.scss index 7b8154bae..992906e5c 100644 --- a/frontend/src/app/components/block-health-graph/block-health-graph.component.scss +++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.scss @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; 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 507d4c18d..2125c3128 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 @@ -1,6 +1,6 @@ .block-overview-tooltip { position: absolute; - background: rgba(#11131f, 0.95); + background: color-mix(in srgb, var(--active-bg) 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss index 7b8154bae..992906e5c 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss index 7b8154bae..992906e5c 100644 --- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss +++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index 269fdab42..b11a35513 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -63,7 +63,7 @@ .fee-span { font-size: 11px; margin-bottom: 5px; - color: #fff000; + color: var(--yellow); } .transaction-count { @@ -130,7 +130,7 @@ height: 0; border-left: calc(var(--block-size) * 0.3) solid transparent; border-right: calc(var(--block-size) * 0.3) solid transparent; - border-bottom: calc(var(--block-size) * 0.3) solid #FFF; + border-bottom: calc(var(--block-size) * 0.3) solid var(--fg); } .flashing { diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index 1d0e284f8..1a7598079 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -350,7 +350,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { return { left: addLeft + this.blockOffset * index + 'px', background: `repeating-linear-gradient( - #2d3348, + var(--secondary), var(--secondary) ${greenBackgroundHeight}%, ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%, ${this.gradientColors[this.network][1]} 100% @@ -362,7 +362,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { convertStyleForLoadingBlock(style) { return { ...style, - background: "#2d3348", + background: "var(--secondary)", }; } @@ -371,7 +371,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { return { left: addLeft + (this.blockOffset * index) + 'px', - background: "#2d3348", + background: "var(--secondary)", }; } diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index b0a589a04..4da3746e4 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.scss +++ b/frontend/src/app/components/blockchain/blockchain.component.scss @@ -54,7 +54,7 @@ } .time-toggle { - color: white; + color: var(--fg); font-size: 0.8rem; position: absolute; bottom: -1.8em; diff --git a/frontend/src/app/components/clock/clock.component.ts b/frontend/src/app/components/clock/clock.component.ts index 90f24a753..4a9b19e78 100644 --- a/frontend/src/app/components/clock/clock.component.ts +++ b/frontend/src/app/components/clock/clock.component.ts @@ -32,12 +32,12 @@ export class ClockComponent implements OnInit { limitHeight: number; gradientColors = { - '': ['#9339f4', '#105fb0'], - liquid: ['#116761', '#183550'], - 'liquidtestnet': ['#494a4a', '#272e46'], - testnet: ['#1d486f', '#183550'], - testnet4: ['#1d486f', '#183550'], - signet: ['#6f1d5d', '#471850'], + '': ['var(--mainnet-alt)', 'var(--primary)'], + liquid: ['var(--liquid)', 'var(--testnet-alt)'], + 'liquidtestnet': ['var(--liquidtestnet)', 'var(--liquidtestnet-alt)'], + testnet: ['var(--testnet)', 'var(--testnet-alt)'], + testnet4: ['var(--testnet)', 'var(--testnet-alt)'], + signet: ['var(--signet)', 'var(--signet-alt)'], }; constructor( @@ -100,8 +100,8 @@ export class ClockComponent implements OnInit { return { background: `repeating-linear-gradient( - #2d3348, - #2d3348 ${greenBackgroundHeight}%, + var(--secondary), + var(--secondary) ${greenBackgroundHeight}%, ${this.gradientColors[''][0]} ${Math.max(greenBackgroundHeight, 0)}%, ${this.gradientColors[''][1]} 100% )`, diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss index 77f54f267..bd396928f 100644 --- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss +++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss @@ -119,7 +119,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss index 5b4a8a02f..e4fd989af 100644 --- a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss +++ b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss @@ -1,9 +1,9 @@ .difficulty-tooltip { position: fixed; - background: rgba(#11131f, 0.95); + background: color-mix(in srgb, var(--active-bg) 95%, transparent); 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/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html index c9b3d183b..e9bf36515 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.html +++ b/frontend/src/app/components/difficulty/difficulty.component.html @@ -15,8 +15,8 @@ - - + + diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss index d10b800a8..8de7fae2c 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.scss +++ b/frontend/src/app/components/difficulty/difficulty.component.scss @@ -128,7 +128,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; @@ -223,7 +224,7 @@ height: 100%; } .background { - background: linear-gradient(to right, var(--primary), #9339f4); + background: linear-gradient(to right, var(--primary), var(--mainnet-alt)); left: 0; right: 0; } 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 0272936ee..c5843f58b 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.scss +++ b/frontend/src/app/components/fees-box/fees-box.component.scss @@ -79,7 +79,7 @@ display: flex; flex-direction: row; transition: background-color 1s; - color: var(--color-fg); + color: #fff; &.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 e923b26e9..78fd102ca 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.ts +++ b/frontend/src/app/components/fees-box/fees-box.component.ts @@ -16,8 +16,8 @@ export class FeesBoxComponent implements OnInit, OnDestroy { isLoading$: Observable; recommendedFees$: Observable; themeSubscription: Subscription; - gradient = 'linear-gradient(to right, #2e324e, #2e324e)'; - noPriority = '#2e324e'; + gradient = 'linear-gradient(to right, var(--skeleton-bg), var(--skeleton-bg))'; + noPriority = 'var(--skeleton-bg)'; fees: Recommendedfees; constructor( 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 dc19dc9d1..b6b49eed2 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss index 64a4dcb3d..a2e3b8866 100644 --- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss +++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss index 660ad6f54..5f7b15092 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss @@ -56,7 +56,7 @@ .fee-span { font-size: 11px; margin-bottom: 5px; - color: #fff000; + color: var(--yellow); } .transaction-count { @@ -119,7 +119,7 @@ height: 0; border-left: calc(var(--block-size) * 0.3) solid transparent; border-right: calc(var(--block-size) * 0.3) solid transparent; - border-bottom: calc(var(--block-size) * 0.3) solid #FFF; + border-bottom: calc(var(--block-size) * 0.3) solid var(--fg); } .blockLink { 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 a7948b40e..f1c49c9e7 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss @@ -63,7 +63,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss index cd31aa562..eeb40a52d 100644 --- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss +++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss @@ -1,10 +1,10 @@ .rbf-tooltip { position: fixed; z-index: 3; - background: rgba(#11131f, 0.95); + background: color-mix(in srgb, var(--active-bg) 95%, transparent); 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/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss index 6803e82ae..1026d6ea9 100644 --- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss +++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss @@ -159,7 +159,7 @@ &.selected { .shape-border { - background: #9339f4; + background: var(--mainnet-alt); } } @@ -183,7 +183,7 @@ width: calc(1em + 16px); .shape { - border: solid 4px #9339f4; + border: solid 4px var(--mainnet-alt); } &:hover { 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 2bae3de2c..7efe0ef11 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.scss +++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss @@ -103,7 +103,8 @@ td.amount.large { margin-top: 10px; } .assetBox { - background-color: #653b9c90; + background: color-mix(in srgb, var(--tertiary) 56%, transparent); + } .details-container { 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 0c973ad00..dfb429096 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 @@ -1,6 +1,6 @@ .bowtie-graph-tooltip { position: absolute; - background: rgba(#11131f, 0.95); + background: color-mix(in srgb, var(--active-bg) 95%, transparent); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); color: var(--tooltip-grey); diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts index 30e85a6e7..f371fdf0a 100644 --- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts +++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts @@ -84,7 +84,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { refreshOutspends$: ReplaySubject = new ReplaySubject(); gradientColors = { - '': ['#9339f4', '#105fb0', '#9339f400'], + '': ['var(--mainnet-alt)', 'var(--primary)', 'color-mix(in srgb, var(--mainnet-alt) 1%, transparent)'], // liquid: ['#116761', '#183550'], liquid: ['#09a197', '#0f62af', '#09a19700'], // 'liquidtestnet': ['#494a4a', '#272e46'], @@ -96,7 +96,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges { signet: ['#d24fc8', '#a84fd2', '#d24fc800'], }; - gradient: string[] = ['#105fb0', '#105fb0']; + gradient: string[] = ['var(--primary)', 'var(--primary)']; constructor( private router: Router, diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 84eabead2..9ad09981f 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -301,7 +301,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; @@ -435,7 +436,8 @@ .in-progress-message { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: 20px; text-align: center; padding-bottom: 3px; 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 7fb011146..f125b30c1 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss @@ -66,7 +66,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; 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 ab8cb92da..a747586ad 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 @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; 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 1779394c9..165c513e5 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 @@ -11,7 +11,8 @@ .main-title { position: relative; - color: #ffffff91; + color: var(--fg); + opacity: var(--opacity); margin-top: -13px; font-size: 10px; text-transform: uppercase; diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 1825bbe6a..12783a332 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -64,7 +64,6 @@ $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}; @@ -72,9 +71,11 @@ $dropdown-link-active-bg: $active-bg; --tertiary: #{$tertiary}; --success: #{$success}; --info: #{$info}; - --link-color: #{$info}; + --link-color: #{$link-color}; --link-hover-color: #{$link-hover-color}; --icon: #f1f1f1; + --skeleton-bg: #2e324e; + --skeleton-bg-light: #5d6182; --box-bg: #24273e; --stat-box-bg: #181b2d; @@ -83,6 +84,7 @@ $dropdown-link-active-bg: $active-bg; --transparent-fg: #ffffff66; --fade-out-box-bg-start: rgba(36, 39, 62, 0); --fade-out-box-bg-end: rgba(36, 39, 62, 1); + --opacity: 0.57; --testnet: #1d486f; --signet: #6f1d5d; @@ -100,7 +102,7 @@ $dropdown-link-active-bg: $active-bg; --green: #3bcc49; --red: #dc3545; - --yellow: #ffd800; + --yellow: #fff000; --grey: #6c757d; --tooltip-grey: #b1b1b1; --orange: #b86d12; @@ -173,13 +175,13 @@ main { } .form-control { - color: #fff; + color: var(--fg); background-color: var(--secondary); border: 1px solid rgba(17, 19, 31, 0.2); } .form-control:focus { - color: #fff; + color: var(--fg); background-color: var(--secondary); } @@ -208,7 +210,7 @@ main { } .form-control.form-control-secondary { - color: var(--fg); + color: #fff; background-color: var(--secondary); border: 1px solid var(--secondary); } @@ -231,11 +233,11 @@ main { position: relative; animation: progress 2s ease-in-out infinite; - background: #2e324e no-repeat; + background: var(--skeleton-bg) no-repeat; background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0), - #5d6182, + var(--skeleton-bg-light), rgba(255, 255, 255, 0) ); background-size: 200px 100%; @@ -273,14 +275,14 @@ main { .progress-text { span { - color: var(--fg) !important; + color: #fff !important; } } .block-size, .blocks-container { .symbol { font-size: 16px; - color: var(--fg) !important; + color: #fff !important; } } @@ -420,18 +422,18 @@ html:lang(ru) .card-title { font-size: 12px; font-weight: 700; margin-bottom: 2px; - color: var(--fg); + color: #fff; .total-value { float: right; } } .active { - color: yellow !important; + color: var(--yellow) !important; .value, .total-partial { - color: yellow !important; + color: var(--yellow) !important; .symbol { - color: yellow !important; + color: var(--yellow) !important; } } } @@ -479,7 +481,7 @@ html:lang(ru) .card-title { .total-label { width: 100%; text-align: left; - color: var(--fg); + color: #fff; margin-top: 5px; font-size: 14px; span { @@ -730,19 +732,19 @@ h1, h2, h3 { } .progress-mempool { - background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%); + background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--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%); + background: repeating-linear-gradient(to right, var(--secondary), var(--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%); + background: repeating-linear-gradient(to right, var(--secondary), var(--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%); + background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--liquid) 0%, var(--testnet-alt) 100%); } .progress-dark { @@ -754,11 +756,11 @@ h1, h2, h3 { } .progress-light { - background-color: #2e324e; + background-color: var(--skeleton-bg); } .progress.progress-health { - background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%); + background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--primary) 0%, $success 100%); justify-content: flex-end; } @@ -771,7 +773,7 @@ h1, h2, h3 { } .alert-mempool { - color: var(--fg); + color: #fff; background-color: var(--tertiary); border-color: var(--alert-bg); width: 100%; @@ -1139,7 +1141,7 @@ th { display: block; width: 100%; padding: 1rem 2rem; - color: var(--fg); + color: #fff; font-weight: bold; &:focus, &:hover, &:active { text-decoration: none; @@ -1223,7 +1225,7 @@ th { } .blink-bg { - color: var(--fg); + color: #fff; 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); @@ -1246,7 +1248,7 @@ app-master-page, app-liquid-master-page { display: flex; flex-direction: column; min-height: 100vh; - padding-bottom: 60px; + padding-bottom: 56px; @media (min-width: 992px) { padding-bottom: 0px; } @@ -1270,8 +1272,10 @@ app-global-footer { .dropdown-menu { background-color: var(--bg); + color: var(--fg); .dropdown-item:hover, .dropdown-item:focus { background-color: var(--active-bg); + color: var(--fg); } } @@ -1285,4 +1289,13 @@ a { &:hover { color: var(--link-hover-color); } -} \ No newline at end of file +} + +.badge-primary { + color: var(--fg); + background-color: var(--primary); +} + +.badge-info { + background-color: var(--info); +} diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss index 9b8af4528..a3faddaef 100644 --- a/frontend/src/theme-contrast.scss +++ b/frontend/src/theme-contrast.scss @@ -61,7 +61,6 @@ $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}; @@ -69,17 +68,20 @@ $dropdown-link-active-bg: $active-bg; --tertiary: #{$tertiary}; --success: #{$success}; --info: #{$info}; - --link-color: #{$info}; + --link-color: #{$link-color}; --link-hover-color: #{$link-hover-color}; --icon: #f1f1f1; + --skeleton-bg: #2e324e; + --skeleton-bg-light: #5d6182; --box-bg: #171c2a; --stat-box-bg: #0b1018; --alert-bg: #3a1c61; - --navbar-bg: #212121; + --navbar-bg: #121212; --transparent-fg: #ffffffbb; --fade-out-box-bg-start: rgba(23, 28, 42, 0); --fade-out-box-bg-end: rgba(23, 28, 42, 1); + --opacity: 0.9; --testnet: #1d486f; --signet: #6f1d5d; @@ -97,7 +99,7 @@ $dropdown-link-active-bg: $active-bg; --green: #83fd00; --red: #ff3d00; - --yellow: #ffcc00; + --yellow: #fff000; --grey: #7e7e7e; --tooltip-grey: #b1b1b1; --orange: #ff9f00; diff --git a/frontend/src/theme-wiz.scss b/frontend/src/theme-wiz.scss index 9b8af4528..f46576c11 100644 --- a/frontend/src/theme-wiz.scss +++ b/frontend/src/theme-wiz.scss @@ -61,7 +61,6 @@ $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}; @@ -69,17 +68,20 @@ $dropdown-link-active-bg: $active-bg; --tertiary: #{$tertiary}; --success: #{$success}; --info: #{$info}; - --link-color: #{$info}; + --link-color: #{$link-color}; --link-hover-color: #{$link-hover-color}; --icon: #f1f1f1; + --skeleton-bg: #2e324e; + --skeleton-bg-light: #5d6182; --box-bg: #171c2a; --stat-box-bg: #0b1018; --alert-bg: #3a1c61; - --navbar-bg: #212121; + --navbar-bg: #121212; --transparent-fg: #ffffffbb; --fade-out-box-bg-start: rgba(23, 28, 42, 0); --fade-out-box-bg-end: rgba(23, 28, 42, 1); + --opacity: 0.57; --testnet: #1d486f; --signet: #6f1d5d; @@ -97,7 +99,7 @@ $dropdown-link-active-bg: $active-bg; --green: #83fd00; --red: #ff3d00; - --yellow: #ffcc00; + --yellow: #fff000; --grey: #7e7e7e; --tooltip-grey: #b1b1b1; --orange: #ff9f00;