diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss
index 3b591dc2d..ecd63a684 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@@ -10,7 +10,7 @@
justify-content: space-around;
height: 50.5px;
.shared-block {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 12px;
}
.item {
@@ -91,7 +91,7 @@
}
.card {
- background-color: #1d1f31;
+ background-color: var(--bg);
height: 100%;
}
@@ -103,7 +103,7 @@
.progress {
display: inline-flex;
width: 100%;
- background-color: #2d3348;
+ background-color: var(--secondary);
height: 1.1rem;
max-width: 180px;
}
diff --git a/frontend/src/app/components/difficulty/difficulty.component.ts b/frontend/src/app/components/difficulty/difficulty.component.ts
index a58250653..579b49fc3 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty.component.ts
@@ -82,24 +82,24 @@ export class DifficultyComponent implements OnInit {
.pipe(
map(([blocks, da]) => {
const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0);
- let colorAdjustments = '#ffffff66';
+ let colorAdjustments = 'var(--transparent-fg)';
if (da.difficultyChange > 0) {
- colorAdjustments = '#3bcc49';
+ colorAdjustments = 'var(--green)';
}
if (da.difficultyChange < 0) {
- colorAdjustments = '#dc3545';
+ colorAdjustments = 'var(--red)';
}
- let colorPreviousAdjustments = '#dc3545';
+ let colorPreviousAdjustments = 'var(--red)';
if (da.previousRetarget) {
if (da.previousRetarget >= 0) {
- colorPreviousAdjustments = '#3bcc49';
+ colorPreviousAdjustments = 'var(--green)';
}
if (da.previousRetarget === 0) {
- colorPreviousAdjustments = '#ffffff66';
+ colorPreviousAdjustments = 'var(--transparent-fg)';
}
} else {
- colorPreviousAdjustments = '#ffffff66';
+ colorPreviousAdjustments = 'var(--transparent-fg)';
}
const blocksUntilHalving = 210000 - (maxHeight % 210000);
diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
index ca5b3f452..c26aae31a 100644
--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
@@ -128,7 +128,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
splitLine: {
lineStyle: {
type: 'dotted',
- color: '#ffffff66',
+ color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
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 ba68e2086..dee87f7f2 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -36,7 +36,7 @@
margin-bottom: 0;
}
.card-text span {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}
diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss
index cc0146345..a7c0f2c2b 100644
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
@@ -3,7 +3,7 @@
bottom: 0;
width: 100%;
height: 60px;
- background-color: #1d1f31;
+ background-color: var(--bg);
box-shadow: 15px 15px 15px 15px #000;
z-index: 10;
@@ -61,7 +61,7 @@
.progress {
display: inline-flex;
width: 160px;
- background-color: #2d3348;
+ background-color: var(--secondary);
height: 1.1rem;
}
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 32885d5de..df5795b90 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -99,7 +99,7 @@
.card-text {
font-size: 18px;
span {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 12px;
}
}
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 f4924f255..04c2721d2 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -354,7 +354,7 @@ export class HashrateChartComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
- color: '#ffffff66',
+ color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -472,7 +472,7 @@ export class HashrateChartComponent implements OnInit {
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 30;
- this.chartOptions.backgroundColor = '#11131f';
+ this.chartOptions.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
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 d938baf15..c6498b25d 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
@@ -308,7 +308,7 @@ export class HashrateChartPoolsComponent implements OnInit {
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 30;
- this.chartOptions.backgroundColor = '#11131f';
+ this.chartOptions.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
index 5c102eadf..c456053ea 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -272,7 +272,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
splitLine: {
lineStyle: {
type: 'dotted',
- color: '#ffffff66',
+ color: 'var(--transparent-fg)',
opacity: 0.25,
}
}
@@ -332,7 +332,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
const now = new Date();
// @ts-ignore
this.mempoolStatsChartOption.grid.height = prevHeight + 20;
- this.mempoolStatsChartOption.backgroundColor = '#11131f';
+ this.mempoolStatsChartOption.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.mempoolStatsChartOption);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
index 4359d8fa3..f6ecb950e 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -104,7 +104,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
type: 'line',
},
formatter: (params: any) => {
- const colorSpan = (color: string) => `
`;
+ const colorSpan = (color: string) => `
`;
let itemFormatted = '
' + params[0].axisValue + '
';
for (let index = params.length - 1; index >= 0; index--) {
const item = params[index];
@@ -137,7 +137,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
splitLine: {
lineStyle: {
type: 'dotted',
- color: '#ffffff66',
+ color: 'var(--transparent-fg)',
opacity: 0.25,
}
}
@@ -153,11 +153,11 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
showSymbol: false,
areaStyle: {
opacity: 0.2,
- color: '#116761',
+ color: 'var(--liquid)',
},
lineStyle: {
width: 2,
- color: '#116761',
+ color: 'var(--liquid)',
},
},
{
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 d6aaccff1..ce3127042 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
@@ -7,7 +7,7 @@
}
li.nav-item.active {
- background-color: #653b9c;
+ background-color: var(--tertiary);
}
fa-icon {
@@ -108,23 +108,23 @@ nav {
}
.mainnet.active {
- background-color: #653b9c;
+ background-color: var(--tertiary);
}
.liquid.active {
- background-color: #116761;
+ background-color: var(--liquid);
}
.liquidtestnet.active {
- background-color: #494a4a;
+ background-color: var(--liquidtestnet);
}
.testnet.active {
- background-color: #1d486f;
+ background-color: var(--testnet);
}
.signet.active {
- background-color: #6f1d5d;
+ background-color: var(--signet);
}
.dropdown-divider {
diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
index f901f31a3..486922dfa 100644
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
@@ -18,7 +18,7 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
- background: #11131f;
+ background: var(--active-bg);
text-align: start;
font-size: 1.8em;
}
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 9320e2b38..1bead6f52 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -7,7 +7,7 @@
}
li.nav-item.active {
- background-color: #653b9c;
+ background-color: var(--tertiary);
}
fa-icon {
@@ -139,23 +139,23 @@ nav {
}
.mainnet.active {
- background-color: #653b9c;
+ background-color: var(--tertiary);
}
.liquid.active {
- background-color: #116761;
+ background-color: var(--liquid);
}
.liquidtestnet.active {
- background-color: #494a4a;
+ background-color: var(--liquidtestnet);
}
.testnet.active {
- background-color: #1d486f;
+ background-color: var(--testnet);
}
.signet.active {
- background-color: #6f1d5d;
+ background-color: var(--signet);
}
.dropdown-divider {
diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.scss b/frontend/src/app/components/mempool-block/mempool-block.component.scss
index e74689a9a..b2f9419b8 100644
--- a/frontend/src/app/components/mempool-block/mempool-block.component.scss
+++ b/frontend/src/app/components/mempool-block/mempool-block.component.scss
@@ -1,5 +1,5 @@
.progress {
- background-color: #2d3348;
+ background-color: var(--secondary);
position: relative;
top: 5px;
}
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 606699d93..dada75603 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -106,7 +106,7 @@
}
.black-background {
- background-color: #11131f;
+ background-color: var(--active-bg);
z-index: 100;
position: relative;
}
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index 58d1764ab..4700332a3 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -432,7 +432,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
splitLine: {
lineStyle: {
type: 'dotted',
- color: '#ffffff66',
+ color: 'var(--transparent-fg)',
opacity: 0.25,
}
}
@@ -500,7 +500,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
const now = new Date();
// @ts-ignore
this.mempoolVsizeFeesOptions.grid.height = prevHeight + 20;
- this.mempoolVsizeFeesOptions.backgroundColor = '#11131f';
+ this.mempoolVsizeFeesOptions.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.mempoolVsizeFeesOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
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 ce68c97ae..87a773ab2 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -7,7 +7,7 @@
}
.card {
- background-color: #1d1f31;
+ background-color: var(--bg);
}
.graph-card {
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 f5a49678b..ce5813da1 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -107,7 +107,7 @@
.card-text {
font-size: 18px;
span {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 12px;
}
}
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 11ee6e506..43088329a 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -305,7 +305,7 @@ export class PoolRankingComponent implements OnInit {
onSaveChart() {
const now = new Date();
- this.chartOptions.backgroundColor = '#11131f';
+ this.chartOptions.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,
diff --git a/frontend/src/app/components/pool/pool-preview.component.scss b/frontend/src/app/components/pool/pool-preview.component.scss
index bd0c19859..24a38c9c5 100644
--- a/frontend/src/app/components/pool/pool-preview.component.scss
+++ b/frontend/src/app/components/pool/pool-preview.component.scss
@@ -17,7 +17,7 @@
justify-content: space-between;
width: 100%;
margin-left: 15px;
- background: #181b2d;
+ background: var(--stat-box-bg);
padding: 0.75rem;
width: 0;
flex-grow: 1;
@@ -43,7 +43,7 @@
.chart {
width: 100%;
height: 315px;
- background: #181b2d;
+ background: var(--stat-box-bg);
}
.row {
@@ -65,7 +65,7 @@
position: absolute;
right: 0;
top: 0;
- background: #24273e;
+ background: var(--box-bg);
&.noimg {
opacity: 0;
diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss
index 8bd6763e5..b2975639e 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -88,7 +88,7 @@ div.scrollable {
}
.progress {
- background-color: #2d3348;
+ background-color: var(--secondary);
}
.coinbase {
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 e02b3a311..e541e30ef 100644
--- a/frontend/src/app/components/reward-stats/reward-stats.component.scss
+++ b/frontend/src/app/components/reward-stats/reward-stats.component.scss
@@ -50,7 +50,7 @@
margin-bottom: 0;
}
.card-text span {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index 3d4813fb5..835a170cc 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -117,7 +117,7 @@
}
.inactive {
.square {
- background-color: #ffffff66 !important;
+ background-color: var(--transparent-fg) !important;
}
.fee-text {
text-decoration: line-through;
diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss
index 4fa8b661a..0b26e539a 100644
--- a/frontend/src/app/components/transaction/transaction-preview.component.scss
+++ b/frontend/src/app/components/transaction/transaction-preview.component.scss
@@ -54,7 +54,7 @@
}
.label {
- color: #ffffff66;
+ color: var(--transparent-fg);
}
&.pair > *:first-child {
@@ -79,7 +79,7 @@
.graph-wrapper {
position: relative;
- background: #181b2d;
+ background: var(--stat-box-bg);
padding: 10px 0;
padding-bottom: 0;
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index bfdd4cc03..a30454225 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -70,11 +70,11 @@
}
.arrow-green {
- color: #1a9436;
+ color: var(--success);
}
.arrow-red {
- color: #dc3545;
+ color: var(--red);
}
.container-xl {
@@ -100,7 +100,7 @@
.graph-container {
position: relative;
width: 100%;
- background: #181b2d;
+ background: var(--stat-box-bg);
padding: 10px 0;
padding-bottom: 0;
}
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 b80c4da4c..f4e58f1af 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -17,7 +17,7 @@
}
.red {
- color:#dc3545;
+ color:var(--red);
}
.grey {
@@ -69,7 +69,7 @@ td.amount.large {
text-align: right;
}
.sats {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 11px;
}
}
@@ -112,7 +112,7 @@ td.amount.large {
padding: 0.75rem;
font-size: 12px;
&:first-child {
- color: #ffffff66;
+ color: var(--transparent-fg);
white-space: pre-wrap;
width: 150px;
}
@@ -138,7 +138,7 @@ h2 {
}
.highlight {
- background-color: #181b2d;
+ background-color: var(--stat-box-bg);
}
.summary {
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
index 9f491affc..3b044f28d 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
@@ -77,12 +77,12 @@
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
index 454d92bbf..e39d54e59 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
@@ -30,7 +30,7 @@
stroke: url(#output-highlight-gradient);
}
&.zerovalue {
- stroke: #1bd8f4;
+ stroke: var(--info);
}
}
}
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 01eb7f73d..ffc9449f7 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -7,7 +7,7 @@
}
.card {
- background-color: #1d1f31;
+ background-color: var(--bg);
height: 100%;
}
@@ -25,7 +25,7 @@
.progress {
display: inline-flex;
width: 100%;
- background-color: #2d3348;
+ background-color: var(--secondary);
height: 1.1rem;
max-width: 180px;
}
@@ -101,7 +101,7 @@
.card-text {
font-size: 18px;
span {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 12px;
}
.bitcoin-color {
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss
index a139288e7..9a4ec8dc9 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs.component.scss
@@ -17,7 +17,7 @@
}
code {
- background-color: #1d1f31;
+ background-color: var(--bg);
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
}
@@ -95,7 +95,7 @@ ul.no-bull.block-audit code{
.nav-tabs .nav-link.active {
border-bottom: 1px solid #fff;
@media (min-width: 676px){
- border-bottom: 1px solid #11131f;
+ border-bottom: 1px solid var(--active-bg);
}
}
@@ -113,7 +113,7 @@ ul.no-bull.block-audit code{
padding: 0px;
}
.nav-tabs .nav-link.active {
- border-bottom: 1px solid #11131f;
+ border-bottom: 1px solid var(--active-bg);
}
.subtitle {
display: flex;
@@ -158,17 +158,17 @@ ul.no-bull.block-audit code{
top: 80px;
overflow-y: auto;
height: calc(100vh - 75px);
- scrollbar-color: #2d3348 #11131f;
+ scrollbar-color: var(--secondary) var(--active-bg);
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-track {
- background: #11131f;
+ background: var(--active-bg);
}
::-webkit-scrollbar-thumb {
- background-color: #2d3348;
+ background-color: var(--secondary);
border-radius: 5px;
border: none;
}
@@ -196,8 +196,8 @@ h3 {
.endpoint-container .section-header {
display: block;
- background-color: #2d3348;
- color: #1bd8f4;
+ background-color: var(--secondary);
+ color: var(--info);
padding: 1rem 1.3rem 1rem 1.3rem;
font-weight: bold;
border-radius: 0.25rem;
@@ -212,7 +212,7 @@ h3 {
.endpoint-container .section-header span {
color: #fff;
- background-color: #653b9c;
+ background-color: var(--tertiary);
font-size: 12px;
text-transform: uppercase;
font-weight: 400;
@@ -244,7 +244,7 @@ h3 {
}
#doc-nav-mobile > div {
- background-color: #2d3348;
+ background-color: var(--secondary);
z-index: 100;
border-radius: 0 0 0.5rem 0.5rem;
height: 55vh;
@@ -253,9 +253,9 @@ h3 {
#doc-nav-mobile button {
width: 100%;
- background-color: #105fb0;
+ background-color: var(--primary);
color: #fff;
- border-color: #105fb0;
+ border-color: var(--primary);
border-radius: 0.5rem 0.5rem 0 0;
}
@@ -303,7 +303,7 @@ h3 {
}
#disclaimer {
- background-color: #1d1f31;
+ background-color: var(--bg);
padding: 24px;
margin: 24px 0;
}
diff --git a/frontend/src/app/docs/code-template/code-template.component.scss b/frontend/src/app/docs/code-template/code-template.component.scss
index 4d3288dfd..960787af0 100644
--- a/frontend/src/app/docs/code-template/code-template.component.scss
+++ b/frontend/src/app/docs/code-template/code-template.component.scss
@@ -3,7 +3,7 @@
}
code {
- background-color: #1d1f31;
+ background-color: var(--bg);
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
}
@@ -25,7 +25,7 @@ li.nav-item {
.nav-tabs .nav-link.active {
border-bottom: 1px solid #fff;
@media (min-width: 676px){
- border-bottom: 1px solid #11131f;
+ border-bottom: 1px solid var(--active-bg);
}
}
@@ -43,7 +43,7 @@ li.nav-item {
padding: 0px;
}
.nav-tabs .nav-link.active {
- border-bottom: 1px solid #11131f;
+ border-bottom: 1px solid var(--active-bg);
}
.subtitle {
display: flex;
@@ -87,7 +87,7 @@ pre {
display: block;
font-size: 87.5%;
color: #f18920;
- background-color: #1d1f31;
+ background-color: var(--bg);
padding: 30px;
code{
background-color: transparent;
diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
index f157f380a..2306dd261 100644
--- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
+++ b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
@@ -13,7 +13,7 @@
}
.shared-block {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 12px;
}
diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss
index 6b6ac5152..cdd30204c 100644
--- a/frontend/src/app/lightning/channel/channel-preview.component.scss
+++ b/frontend/src/app/lightning/channel/channel-preview.component.scss
@@ -34,7 +34,7 @@
}
.row.nodes {
- background: #181b2d;
+ background: var(--stat-box-bg);
margin: 15px 0 0;
}
@@ -53,7 +53,7 @@
width: 470px;
min-width: 470px;
padding: 0;
- background: #181b2d;
+ background: var(--stat-box-bg);
max-height: 350px;
overflow: hidden;
}
diff --git a/frontend/src/app/lightning/channel/channel.component.html b/frontend/src/app/lightning/channel/channel.component.html
index b9d9e09a4..290199210 100644
--- a/frontend/src/app/lightning/channel/channel.component.html
+++ b/frontend/src/app/lightning/channel/channel.component.html
@@ -1,7 +1,7 @@
- Lightning channel
+ Lightning channel
{{ channel.short_id }}
@@ -113,7 +113,7 @@
-
Lightning channel
+
Lightning channel
diff --git a/frontend/src/app/lightning/channels-list/channels-list.component.scss b/frontend/src/app/lightning/channels-list/channels-list.component.scss
index 80797b550..f45f162c6 100644
--- a/frontend/src/app/lightning/channels-list/channels-list.component.scss
+++ b/frontend/src/app/lightning/channels-list/channels-list.component.scss
@@ -3,7 +3,7 @@
}
.sats {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}
diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
index 31b4c33af..a84def86c 100644
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
@@ -1,7 +1,7 @@
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 30f88f136..0b144ae2b 100644
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
@@ -57,7 +57,7 @@
margin-bottom: 0;
}
.card-text span {
- color: #ffffff66;
+ color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}
@@ -110,5 +110,5 @@
}
.inactive {
- color: #ffffff66;
+ color: var(--transparent-fg);
}
\ No newline at end of file
diff --git a/frontend/src/app/lightning/group/group-preview.component.scss b/frontend/src/app/lightning/group/group-preview.component.scss
index 712112f5a..f31c33f47 100644
--- a/frontend/src/app/lightning/group/group-preview.component.scss
+++ b/frontend/src/app/lightning/group/group-preview.component.scss
@@ -20,7 +20,7 @@
width: 100%;
margin: 16px 0 0;
padding: 20px 12px;
- background: #181b2d;
+ background: var(--stat-box-bg);
font-size: 32px;
}
@@ -46,7 +46,7 @@
min-height: 272px;
max-height: 272px;
padding: 0;
- background: #181b2d;
+ background: var(--stat-box-bg);
overflow: hidden;
margin-top: 16px;
}
diff --git a/frontend/src/app/lightning/group/group.component.html b/frontend/src/app/lightning/group/group.component.html
index c1ffe7f6d..c5999da5c 100644
--- a/frontend/src/app/lightning/group/group.component.html
+++ b/frontend/src/app/lightning/group/group.component.html
@@ -1,5 +1,5 @@
-
Lightning node group
+
Lightning node group
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
-
Connectivity Ranking
-
Liquidity Ranking
Connectivity Ranking
Oldest nodes
Date: Thu, 4 Apr 2024 16:33:50 +0900
Subject: [PATCH 06/50] Fix remaining bugs from rebase
---
.../accelerator-dashboard.component.ts | 6 +--
.../components/block-overview-graph/utils.ts | 12 +++---
.../difficulty/difficulty.component.html | 41 -------------------
frontend/src/theme-contrast.scss | 2 +-
4 files changed, 10 insertions(+), 51 deletions(-)
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
index 1d3603739..dda2b036b 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -8,12 +8,12 @@ import { Observable, catchError, combineLatest, distinctUntilChanged, interval,
import { Color } from '../../block-overview-graph/sprite-types';
import { hexToColor } from '../../block-overview-graph/utils';
import TxView from '../../block-overview-graph/tx-view';
-import { feeLevels, mempoolFeeColors } from '../../../app.constants';
+import { feeLevels, defaultMempoolFeeColors } from '../../../app.constants';
import { ServicesApiServices } from '../../../services/services-api.service';
import { detectWebGL } from '../../../shared/graphs.utils';
const acceleratedColor: Color = hexToColor('8F5FF6');
-const normalColors = mempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
interface AccelerationBlock extends BlockExtended {
accelerationCount: number,
@@ -128,7 +128,7 @@ export class AcceleratorDashboardComponent implements OnInit {
} else {
const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
- return normalColors[feeLevelIndex] || normalColors[mempoolFeeColors.length - 1];
+ return normalColors[feeLevelIndex] || normalColors[defaultMempoolFeeColors.length - 1];
}
}
diff --git a/frontend/src/app/components/block-overview-graph/utils.ts b/frontend/src/app/components/block-overview-graph/utils.ts
index b6c8ccf5e..2f23d4cb9 100644
--- a/frontend/src/app/components/block-overview-graph/utils.ts
+++ b/frontend/src/app/components/block-overview-graph/utils.ts
@@ -1,4 +1,4 @@
-import { feeLevels, mempoolFeeColors } from '../../app.constants';
+import { feeLevels, defaultMempoolFeeColors } from '../../app.constants';
import { Color } from './sprite-types';
import TxView from './tx-view';
@@ -38,7 +38,7 @@ export function setOpacity(color: Color, opacity: number): Color {
}
// precomputed colors
-export const defaultFeeColors = mempoolFeeColors.map(hexToColor);
+export const defaultFeeColors = defaultMempoolFeeColors.map(hexToColor);
export const defaultAuditFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
export const defaultMarginalFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.8), 1.1));
export const defaultAuditColors = {
@@ -58,7 +58,7 @@ export function defaultColorFunction(
): Color {
const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
- const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
+ const feeLevelColor = feeColors[feeLevelIndex] || feeColors[defaultMempoolFeeColors.length - 1];
// Normal mode
if (!tx.scene?.highlightingEnabled) {
if (tx.acc) {
@@ -75,7 +75,7 @@ export function defaultColorFunction(
case 'missing':
case 'sigop':
case 'rbf':
- return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+ return marginalFeeColors[feeLevelIndex] || marginalFeeColors[defaultMempoolFeeColors.length - 1];
case 'fresh':
case 'freshcpfp':
return auditColors.missing;
@@ -84,12 +84,12 @@ export function defaultColorFunction(
case 'prioritized':
return auditColors.prioritized;
case 'selected':
- return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+ return marginalFeeColors[feeLevelIndex] || marginalFeeColors[defaultMempoolFeeColors.length - 1];
case 'accelerated':
return auditColors.accelerated;
case 'found':
if (tx.context === 'projected') {
- return auditFeeColors[feeLevelIndex] || auditFeeColors[mempoolFeeColors.length - 1];
+ return auditFeeColors[feeLevelIndex] || auditFeeColors[defaultMempoolFeeColors.length - 1];
} else {
return feeLevelColor;
}
diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html
index c4983b8dd..ff31d4f57 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@@ -101,47 +101,6 @@
New subsidy
-
-
Remaining
-
- {{ i }} blocks
- {{ i }} block
-
-
-
-
-
Estimate
-
-
-
-
-
- {{ epochData.change | absolute | number: '1.2-2' }}
- %
-
-
- —
-
-
- Previous :
-
-
-
-
-
- {{ epochData.previousRetarget | absolute | number: '1.2-2' }} %
-
-
-
-
Current Period
-
{{ epochData.progress | number: '1.2-2' }} %
-
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index a3d0bb9ca..57c8d2988 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -57,7 +57,7 @@ $dropdown-link-hover-bg: $active-bg;
$dropdown-link-active-color: $fg;
$dropdown-link-active-bg: $active-bg;
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
:root {
--bg: #{$bg};
From 2f8d0d90cd697488d1694ca8f234ec7e46cba46f Mon Sep 17 00:00:00 2001
From: natsoni
Date: Thu, 4 Apr 2024 18:17:51 +0900
Subject: [PATCH 07/50] Update theme-contrast.css
---
frontend/src/theme-contrast.scss | 916 ++++++++++++++++++++++++++++++-
1 file changed, 909 insertions(+), 7 deletions(-)
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index 57c8d2988..e4aacdd83 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -10,7 +10,6 @@ $taproot-light: #d5a90a;
$taproot-dark: #9d7c05;
/* Bootstrap */
-
$body-bg: $bg;
$body-color: $fg;
$gray-800: $bg;
@@ -73,23 +72,83 @@ $dropdown-link-active-bg: $active-bg;
--success: #{$success};
--info: #{$info};
- --transparent-fg: #ffffffbb;
-
--box-bg: #171c2a;
--stat-box-bg: #0b1018;
+ --alert-bg: #3a1c61;
+ --transparent-fg: #ffffffbb;
+
+ --testnet: #1d486f;
+ --signet: #6f1d5d;
+ --liquid: #116761;
+ --liquidtestnet: #494a4a;
+
+ --mainnet-alt: #9339f4;
+ --testnet-alt: #183550;
+ --signet-alt: #471850;
+ --liquidtestnet-alt: #272e46;
+
+ --taproot: #eba814;
+ --taproot-light: #d5a90a;
+ --taproot-dark: #9d7c05;
+
--green: #83fd00;
+ --red: #ff3d00;
+ --yellow: #ffcc00;
+ --grey: #7e7e7e;
+ --tooltip-grey: #b1b1b1;
+}
+
+html, body {
+ height: 100%;
}
body {
background-color: var(--active-bg);
+ min-width: 375px;
+ padding-bottom: 60px;
+}
+
+.container {
+ position: relative;
+}
+
+main {
+ margin-top: 24px;
+}
+
+.full-height {
+ @media (max-width: 767.98px) {
+ min-height: 100vh;
+ }
+}
+
+:focus {
+ outline: none !important;
}
.box {
+ min-height: 1px;
+ padding: 1.25rem;
+ position: relative;
+ min-width: 0;
+ word-wrap: break-word;
background-color: var(--box-bg);
+ background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
}
+.preview-box {
+ min-height: 520px;
+ padding: 1rem 3rem 1.5rem;
+}
+
+@media (max-width: 767.98px) {
+ .box {
+ padding: 0.75rem;
+ }
+}
+
.navbar-nav.liquid > .active {
background-color: var(--liquid) !important;
}
@@ -107,10 +166,38 @@ body {
}
.form-control {
- color: #495057;
+ color: #fff;
+ background-color: var(--secondary);
+ border: 1px solid rgba(17, 19, 31, 0.2);
}
+
.form-control:focus {
- color: #000;
+ color: #fff;
+ background-color: var(--secondary);
+}
+
+.btn-purple {
+ background-color: var(--tertiary);
+ border-color: var(--tertiary);
+}
+
+.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
+ color: #fff;
+ background-color: #4d2d77;
+ border-color: #472a6e;
+}
+
+.btn-purple:focus, .btn-purple.focus {
+ color: #fff;
+ background-color: #533180;
+ border-color: #4d2d77;
+ box-shadow: 0 0 0 0.2rem rgb(124 88 171 / 50%);
+}
+
+.btn-purple:hover {
+ color: #fff;
+ background-color: #533180;
+ border-color: #4d2d77;
}
.form-control.form-control-secondary {
@@ -122,7 +209,21 @@ body {
color: var(--fg);
}
+.h2-match-table {
+ padding-left: .65rem;
+}
+
.skeleton-loader {
+ box-sizing: border-box;
+ /**
+ * `overflow` and `position` are required steps to make sure
+ * the component respects the specified dimensions
+ * given via `theme` object @Input attribute
+ */
+ overflow: hidden;
+ position: relative;
+
+ animation: progress 2s ease-in-out infinite;
background: #2e324e no-repeat;
background-image: linear-gradient(
90deg,
@@ -130,10 +231,37 @@ body {
#5d6182,
rgba(255, 255, 255, 0)
);
+ background-size: 200px 100%;
+ border-radius: 4px;
+ width: 100%;
+ height: 14px;
+ display: inline-block;
+
+ &:after,
+ &:before {
+ box-sizing: border-box;
+ }
+
+ &.circle {
+ width: 40px;
+ height: 40px;
+ margin: 5px;
+ border-radius: 50%;
+ }
+}
+
+@keyframes progress {
+ 0% {
+ background-position: -200px 0;
+ }
+ 100% {
+ background-position: calc(200px + 100%) 0;
+ }
}
.symbol {
color: var(--transparent-fg);
+ font-size: 12px;
}
.progress-text {
@@ -143,18 +271,64 @@ body {
}
.block-size, .blocks-container {
- span {
+ .symbol {
+ font-size: 16px;
color: var(--fg) !important;
}
}
+.break-all {
+ white-space: normal;
+ word-break: break-all;
+}
+
.title-block {
color: var(--fg);
+ padding-top: 20px;
+ padding-bottom: 10px;
border-top: 3px solid var(--fg);
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
}
.title-address, .title-asset {
color: var(--fg);
+ padding-bottom: 10px;
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 7px;
+ @media (min-width: 576px) {
+ flex-direction: row;
+ margin-bottom: 0px;
+ }
+ h1 {
+ line-height: 1;
+ }
+}
+
+.smaller-text {
+ font-size: 14px;
+}
+
+.nowrap {
+ white-space: nowrap;
+}
+
+.table-xs th, .table-xs td {
+ padding: 0.1rem;
+}
+
+.table {
+ margin-bottom: 0;
+ font-size: 0.9rem;
+ @media (min-width: 576px) {
+ font-size: 1rem;
+ }
+}
+
+.table-fixed {
+ table-layout: fixed;
}
.close {
@@ -165,6 +339,10 @@ body {
color: var(--fg);
}
+.white-color {
+ color: white;
+}
+
.green-color {
color: var(--green);
}
@@ -185,18 +363,60 @@ body {
border-top: 1px solid #4c4c4c;
}
+.smaller-text {
+ font-size: 14px;
+}
+
+html:lang(ru) .card-title {
+ font-size: 0.9rem;
+}
+
+/* MEMPOOL CHARTS - start */
+
+.mempool-wrapper-tooltip-chart {
+ height: 250px;
+}
+
+.echarts {
+ height: 100%;
+ min-height: 180px;
+}
+
.tx-wrapper-tooltip-chart,
.fees-wrapper-tooltip-chart {
background: rgba($active-bg, 0.95);
+ border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: var(--tooltip-grey);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 10px 15px;
+ text-align: left;
+ width: 200px;
thead {
th {
+ font-size: 9px;
color: var(--tooltip-grey);
+ text-align: right;
+ &:first-child {
+ text-align: left;
+ left: -1px;
+ position: relative;
+ }
+ &:nth-child(4) {
+ display: none;
+ }
}
}
.title {
+ font-size: 12px;
+ font-weight: 700;
+ margin-bottom: 2px;
color: var(--fg);
+ .total-value {
+ float: right;
+ }
}
.active {
color: yellow !important;
@@ -209,37 +429,225 @@ body {
}
}
.item {
+ line-height: 0.8;
+ .indicator-container {
+ .indicator {
+ display: inline-block;
+ margin-right: 5px;
+ border-radius: 2px;
+ margin-top: 5px;
+ width: 9px;
+ height: 9px;
+ }
+ }
.value {
+ text-align: right;
.symbol {
color: #7e7e7e;
+ font-size: 9px !important;
}
}
+ .symbol {
+ font-size: 9px;
+ }
+ .total-partial {
+ font-size: 10px;
+ width: 58px;
+ text-align: right;
+ }
+ .total-percentage-bar {
+ padding-left: 8px;
+ }
+ .total-progress-percentage {
+ width: 45px;
+ height: 5px;
+ text-align: right;
+ display: none;
+ }
+ .total-progress-sum {
+ width: 58px;
+ text-align: right;
+ }
}
.total-label {
+ width: 100%;
+ text-align: left;
color: var(--fg);
+ margin-top: 5px;
+ font-size: 14px;
+ span {
+ float: right;
+ }
+ .symbol {
+ margin-left: 3px;
+ font-size: 9px;
+ position: relative;
+ top: 2px;
+ }
}
thead {
th {
+ font-size: 9px;
color: var(--tooltip-grey);
+ text-align: right;
+ &:first-child {
+ text-align: left;
+ left: -1px;
+ position: relative;
+ }
+ &:nth-child(4) {
+ display: none;
+ }
+ &:nth-child(5) {
+ display: none;
+ }
}
}
.total-percentage-bar {
+ margin: auto;
+ width: 35px;
+ position: relative;
span {
+ display: block;
background: #282d47;
+ height: 5px;
+ border-radius: 2px;
+ }
+ }
+ .total-parcial-active {
+ text-align: right;
+ margin: 5px auto 5px;
+ padding-left: 0px;
+ span {
+ font-size: 10px;
+ }
+ .symbol {
+ font-size: 9px;
+ }
+ .total-percentage-bar {
+ width: 100%;
+ span {
+ transition: 1000 all ease-in-out;
+ }
+ }
+ .progress-percentage {
+ float: left;
}
}
}
+.tx-wrapper-tooltip-chart {
+ width: 115px;
+ .item {
+ display: flex;
+ }
+ .value {
+ margin-top: 5px;
+ }
+ .indicator-container {
+ border-radius: 2px;
+ }
+}
+
+.fee-distribution-chart {
+ height: 265px;
+}
+
+.fees-wrapper-tooltip-chart {
+ .item {
+ font-size: 9px;
+ line-height: 0.8;
+ margin: 0px;
+ }
+ .indicator {
+ margin-right: 5px !important;
+ border-radius: 1px !important;
+ margin-top: 0px !important;
+ }
+}
.fees-wrapper-tooltip-chart-advanced,
.tx-wrapper-tooltip-chart-advanced {
+ width: 300px;
background: rgba($bg, 0.98);
+
thead {
+ th {
+ &:nth-child(4) {
+ display: table-cell;
+ }
+ &:nth-child(5) {
+ display: table-cell;
+ }
+ }
+ }
+ .title {
+ font-size: 15px;
+ margin-bottom: 5px;
+ }
+ .item {
+ line-height: 1.25;
+ font-size: 11px;
+ .value {
+ width: 60px;
+ .symbol {
+ font-size: 9px !important;
+ }
+ }
+ .total-partial {
+ font-size: 10px;
+ width: 58px;
+ text-align: right;
+ }
+ .total-progress-percentage {
+ width: 65px;
+ height: 4px;
+ padding: 0px 5px;
+ display: table-cell !important;
+ border-radius: 4px;
+ }
+ .total-progress-sum {
+ width: 65px;
+ height: 4px;
+ padding: 0px 5px;
+ border-radius: 4px;
+ }
.total-progress-percentage-bar,
.total-progress-sum-bar {
+ width: 35px;
+ height: 4px;
div {
+ width: 100%;
+ border-radius: 4px;
+ display: block;
background: #29324c94;
}
+ span {
+ height: 4px;
+ border-radius: 4px;
+ display: block;
+ }
+ }
+ }
+ .total-label {
+ margin-top: 5px;
+ font-size: 14px;
+ span {
+ float: right;
+ }
+ }
+ .total-parcial-active {
+ text-align: right;
+ margin: 5px auto 5px;
+ span {
+ font-size: 10px;
+ }
+ .total-percentage-bar {
+ width: 100%;
+ left: 0;
+ span {
+ transition: 1000 all ease-in-out;
+ }
}
}
.total-percentage-bar-background {
@@ -247,10 +655,73 @@ body {
}
}
+.tx-wrapper-tooltip-chart-advanced {
+ .indicator-container {
+ .indicator {
+ margin-right: 5px;
+ border-radius: 0px;
+ margin-top: 5px;
+ width: 9px;
+ height: 9px;
+ }
+ }
+}
+
+
+/* MEMPOOL CHARTS - end */
+
+.grow {
+ flex-grow: 1;
+}
+
hr {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
+tr {
+ white-space: nowrap;
+}
+
+h1, h2, h3 {
+ margin-bottom: 1rem;
+}
+
+@media (max-width: 767.98px) {
+ h1 {
+ font-size: 2rem;
+ }
+ h2 {
+ font-size: 1.50rem;
+ }
+}
+
+@media (min-width: 992px) {
+ .lg-inline {
+ display: inline-block;
+ }
+}
+
+@media (min-width: 768px) {
+ .d-md-inline {
+ display: inline-block;
+ }
+}
+
+.header-bg {
+ font-size: 14px;
+}
+
+.progress {
+ position: relative;
+}
+
+.progress-text {
+ position: absolute;
+ top: 8.5px;
+ width: 100%;
+ text-align: center;
+}
+
.progress-mempool {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
}
@@ -281,16 +752,36 @@ hr {
.progress.progress-health {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
+ justify-content: flex-end;
}
.progress-bar.progress-bar-health {
background: var(--secondary);
}
+.mt-2-5, .my-2-5 {
+ margin-top: 0.75rem !important;
+}
+
.alert-mempool {
color: var(--fg);
background-color: var(--tertiary);
border-color: var(--alert-bg);
+ width: 100%;
+ display: inline-flex;
+ flex-direction: column;
+ justify-content: space-between;
+ @media (min-width: 676px){
+ flex-direction: row;
+ }
+}
+
+.flex {
+ display: flex;
+}
+
+th {
+ white-space: nowrap;
}
// ASM opcode colors
@@ -305,10 +796,353 @@ hr {
.locktime { color: #ff8c00 }
.reserved { color: #ff8c00 }
+.shortable-address {
+ font-family: monospace;
+}
+
+.full-container .card-header .formRadioGroup {
+ margin-top: 6px;
+ display: flex;
+ flex-direction: column;
+ @media (min-width: 991px) {
+ position: relative;
+ top: -100px;
+ }
+ @media (min-width: 830px) and (max-width: 991px) {
+ position: relative;
+ top: 0px;
+ }
+ @media (min-width: 830px) {
+ flex-direction: row;
+ float: right;
+ margin-top: 0px;
+ }
+ .btn-sm {
+ font-size: 9px;
+ @media (min-width: 830px) {
+ font-size: 14px;
+ }
+ }
+}
+
+.direction-ltr {
+ direction: ltr;
+}
+
+.rtl-layout {
+ text-align: start;
+
+ .navbar-brand {
+ margin-right: 0px;
+ text-align: right;
+ }
+
+ .nav-pills {
+ @extend .nav-pills;
+ display: inline-block;
+ }
+
+ .description {
+ direction: rtl;
+ }
+
+ .dropdown {
+ margin-right: 1rem;
+ margin-left: 0;
+ @media (min-width: 576px) {
+ margin-left: 1rem;
+ }
+ @media (min-width: 768px) {
+ margin-left: 0;
+ }
+ }
+ .dropdown-menu-right {
+ left: 0px;
+ right: auto;
+ }
+ .fa-circle-right {
+ @extend .fa-circle-right;
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ }
+
+ .btn.ml-2 {
+ margin-right: 0.5rem !important;
+ }
+
+ .pool-name {
+ @extend .pool-name;
+ padding-right: 10px;
+ }
+
+ .endpoint-container {
+ @extend .endpoint-container;
+ .section-header {
+ @extend .section-header;
+ text-align: left;
+ }
+ }
+
+ .table td {
+ text-align: right;
+ .fiat {
+ @extend .fiat;
+ margin-left: 0px !important;
+ margin-right: 15px;
+ }
+ }
+
+ .table th {
+ text-align: right;
+ }
+
+ .title-block {
+ text-align: right;
+ }
+
+ .mr-3 {
+ @extend .ml-3;
+ margin-right: 0 !important;
+ }
+
+ .mr-1 {
+ @extend .ml-1;
+ }
+
+ .float-left {
+ float: right !important;
+ }
+
+ .float-right {
+ float: left !important;
+ }
+
+ .text-left {
+ text-align: right !important;
+ }
+
+ .text-right {
+ text-align: left !important;
+ }
+
+ .bitcoin-block {
+ direction: rtl;
+ }
+
+ .next-previous-blocks {
+ @extend .next-previous-blocks;
+ direction: ltr;
+ }
+
+ .tx-link {
+ @extend .tx-link;
+ margin-left: 0px;
+ margin-right: 10px;
+ }
+
+ .pagination-container {
+ @extend .pagination-container;
+ ul {
+ @extend ul;
+ padding-left: 0px;
+ padding-right: 5px;
+ }
+ }
+
+ .search-box-container {
+ @extend .search-box-container;
+ margin-right: 0 !important;
+ margin-left: 0.5rem !important;
+ }
+
+ .code {
+ @extend .code;
+ text-align: left !important;
+ direction: ltr;
+ .subtitle {
+ @extend .subtitle;
+ direction: rtl;
+ text-align: right !important;
+ }
+ }
+
+ .chart {
+ direction: ltr;
+ }
+
+ .formRadioGroup {
+ @media (min-width: 830px) {
+ float: left;
+ }
+ }
+
+ .container-graph, .full-container, .toggle-holder {
+ @extend .container-graph;
+ .formRadioGroup {
+ @extend .formRadioGroup;
+ direction: ltr;
+ }
+
+ .card-header, h1, h2, h3 {
+ direction: rtl;
+ }
+ }
+
+ .fee-progress-bar {
+ @extend .fee-progress-bar;
+ &.priority {
+ @media (767px < width < 992px), (width < 576px) {
+ width: 100%;
+ }
+ width: 75%;
+ border-radius: 10px 0px 0px 10px !important;
+ }
+ }
+
+ .fees-wrapper-tooltip-chart {
+ @extend .fees-wrapper-tooltip-chart;
+ .title {
+ direction: rtl;
+ }
+ }
+
+ .btn-link {
+ padding: 0.1rem 0.5rem 0.25rem 0 !important;
+ }
+
+ .shortable-address {
+ direction: ltr;
+ font-family: monospace;
+ }
+
+ .lastest-blocks-table {
+ @extend .lastest-blocks-table;
+ .table-cell-mined {
+ @extend .table-cell-mined;
+ text-align: right !important;
+ }
+ }
+
+ .mempool-graph {
+ @extend .mempool-graph;
+ direction: ltr;
+ }
+ .title-block {
+ .title {
+ float: right;
+ }
+ }
+ .container-buttons {
+ float: left !important;
+ width: auto !important;
+ }
+ .tx-link {
+ margin-right: 0px;
+ @media (min-width: 768px) {
+ margin-right: 10px;
+ }
+ }
+
+ .btn-audit {
+ margin-left: .5em;
+ }
+
+ .sidenav {
+ @extend .sidenav;
+ margin-left: 0px !important;
+ margin-right: -250px;
+ }
+
+ .sidenav.open {
+ margin-right: 0px;
+ }
+
+ .profile_image_container {
+ @extend .profile_image_container;
+ margin-right: 0px !important;
+ margin-left: 15px;
+ }
+
+ #blockchain-container.with-menu {
+ width: calc(100% + 120px);
+ left: 120px;
+ }
+}
+
+.scriptmessage {
+ overflow: hidden;
+ display: inline-block;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ max-width: 50px;
+ width: auto;
+ text-align: left;
+ @media (min-width: 376px) {
+ max-width: 90px;
+ }
+ @media (min-width: 476px) {
+ max-width: 180px;
+ }
+ @media (min-width: 576px) {
+ max-width: 260px;
+ }
+ @media (min-width: 768px) {
+ max-width: 400px;
+ }
+ @media (min-width: 850px) {
+ max-width: 522px;
+ }
+ @media (min-width: 992px) {
+ max-width: 190px;
+ }
+ @media (min-width: 1200px) {
+ max-width: 250px;
+ }
+}
+
+.scriptmessage.longer {
+ max-width: 230px;
+ @media (min-width: 376px) {
+ max-width: 290px;
+ }
+ @media (min-width: 476px) {
+ max-width: 380px;
+ }
+ @media (min-width: 576px) {
+ max-width: 470px;
+ }
+ @media (min-width: 768px) {
+ max-width: 850px;
+ }
+ @media (min-width: 992px) {
+ max-width: 410px;
+ }
+ @media (min-width: 1200px) {
+ max-width: 480px;
+ }
+}
+
.tab-pane {
.card {
+ background-color: transparent;
+ padding: 0;
+
button {
+ text-align: left;
+ display: block;
+ width: 100%;
+ padding: 1rem 2rem;
color: var(--fg);
+ font-weight: bold;
+ &:focus, &:hover, &:active {
+ text-decoration: none;
+ outline: none;
+ box-shadow: none;
+ }
+ }
+
+ .card-header {
+ padding: 0;
}
.collapsed {
@@ -316,13 +1150,43 @@ hr {
color: var(--info);
}
}
+
+ .subtitle {
+ font-weight: bold;
+ margin-bottom: 3px;
+ button {
+ padding: 0px !important;
+ }
+ }
}
.pagination-container {
+ display: inline-block;
+ width: 100%;
+ justify-content: space-between;
background: var(--bg);
+ margin: 0;
+ @media (min-width: 550px) {
+ width: auto;
+ }
+ ul {
+ justify-content: space-evenly !important;
+ margin: 0;
+ @media (min-width: 400px) {
+ width: auto;
+ padding-left: 5px;
+ }
+ }
}
+.fee-estimation-wrapper {
+ .tooltip.show {
+ width: 220px;
+ }
+}
+
+
// Blinking block
@keyframes shadowyBackground {
@@ -343,4 +1207,42 @@ hr {
animation: shadowyBackground 1s infinite;
box-shadow: -10px -15px 75px rgba($taproot, 1);
transition: 100ms all ease-in;
-}
\ No newline at end of file
+}
+
+.page-item {
+ font-family: monospace;
+}
+
+#divider {
+ background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='104%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='10%2c17' stroke-dashoffset='18' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+
+.visually-hidden {
+ display: none;
+}
+
+app-master-page, app-liquid-master-page {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ padding-bottom: 60px;
+ @media (min-width: 992px) {
+ padding-bottom: 0px;
+ }
+}
+
+app-global-footer {
+ margin-top: auto;
+}
+
+.btn-xs {
+ padding: 0.25rem 0.5rem;
+ font-size: 0.875rem;
+ line-height: 0.5;
+ border-radius: 0.2rem;
+}
+
+.info-link fa-icon {
+ color: rgba(255, 255, 255, 0.4);
+ margin-left: 5px;
+}
From cfc3615e640cc139f696340a315dc90065b59f91 Mon Sep 17 00:00:00 2001
From: natsoni
Date: Thu, 4 Apr 2024 18:38:08 +0900
Subject: [PATCH 08/50] Fix global footer selector css
---
.../components/theme-selector/theme-selector.component.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.html b/frontend/src/app/components/theme-selector/theme-selector.component.html
index 994ade99c..2ba7435ec 100644
--- a/frontend/src/app/components/theme-selector/theme-selector.component.html
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.html
@@ -1,5 +1,5 @@
-
-
+
+
Mempool Theme
High Contrast
From 621a6ea42dd3782ad82f6a1722baac04cbc53f36 Mon Sep 17 00:00:00 2001
From: natsoni
Date: Fri, 5 Apr 2024 16:07:25 +0900
Subject: [PATCH 09/50] Fix rbf tree fade out
---
.../app/components/rbf-timeline/rbf-timeline.component.scss | 6 +++---
frontend/src/styles.scss | 2 ++
frontend/src/theme-contrast.scss | 2 ++
3 files changed, 7 insertions(+), 3 deletions(-)
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 8962be63c..23c252190 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -15,12 +15,12 @@
&::before {
left: 0;
- background: linear-gradient(to right, #24273e, #24273e, transparent);
+ background: linear-gradient(to right, var(--box-bg), var(--box-bg), transparent);
}
&::after {
right: 0;
- background: linear-gradient(to left, #24273e, #24273e, transparent);
+ background: linear-gradient(to left, var(--box-bg), var(--box-bg), transparent);
}
.timeline-wrapper {
@@ -45,7 +45,7 @@
width: 100%;
height: 70px;
top: -70px;
- background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
+ background: linear-gradient(to bottom, var(--fade-out-box-bg-start), var(--fade-out-box-bg-end));
z-index: 1;
}
}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index fa680ed60..88f664982 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -77,6 +77,8 @@ $dropdown-link-active-bg: $active-bg;
--stat-box-bg: #181b2d;
--alert-bg: #3a1c61;
--transparent-fg: #ffffff66;
+ --fade-out-box-bg-start: rgba(36, 39, 62, 0);
+ --fade-out-box-bg-end: rgba(36, 39, 62, 1);
--testnet: #1d486f;
--signet: #6f1d5d;
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index e4aacdd83..3e85adf2a 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -76,6 +76,8 @@ $dropdown-link-active-bg: $active-bg;
--stat-box-bg: #0b1018;
--alert-bg: #3a1c61;
--transparent-fg: #ffffffbb;
+ --fade-out-box-bg-start: rgba(23, 28, 42, 0);
+ --fade-out-box-bg-end: rgba(23, 28, 42, 1);
--testnet: #1d486f;
--signet: #6f1d5d;
From cde3d878b15043fb67964a11c2ed4ed0860d7615 Mon Sep 17 00:00:00 2001
From: natsoni
Date: Fri, 5 Apr 2024 18:36:32 +0900
Subject: [PATCH 10/50] Fix block overview graph on contrast theme
---
.../block-overview-graph.component.ts | 25 ++++++--
.../block-overview-graph/block-scene.ts | 6 +-
.../block-overview-graph/tx-view.ts | 28 +--------
.../components/block-overview-graph/utils.ts | 25 +++++++-
frontend/src/app/services/theme.service.ts | 59 +------------------
5 files changed, 48 insertions(+), 95 deletions(-)
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index 7ab147345..15e084dec 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -9,7 +9,7 @@ import { Price } from '../../services/price.service';
import { StateService } from '../../services/state.service';
import { ThemeService } from 'src/app/services/theme.service';
import { Subscription } from 'rxjs';
-import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } from './utils';
+import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors, contrastFeeColors, contrastAuditFeeColors, contrastMarginalFeeColors, contrastAuditColors, contrastColorFunction } from './utils';
import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
import { detectWebGL } from '../../shared/graphs.utils';
@@ -24,6 +24,16 @@ const unmatchedAuditColors = {
prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity),
accelerated: setOpacity(defaultAuditColors.accelerated, unmatchedOpacity),
};
+const unmatchedContrastFeeColors = contrastFeeColors.map(c => setOpacity(c, unmatchedOpacity));
+const unmatchedContrastAuditFeeColors = contrastAuditFeeColors.map(c => setOpacity(c, unmatchedOpacity));
+const unmatchedContrastMarginalFeeColors = contrastMarginalFeeColors.map(c => setOpacity(c, unmatchedOpacity));
+const unmatchedContrastAuditColors = {
+ censored: setOpacity(contrastAuditColors.censored, unmatchedOpacity),
+ missing: setOpacity(contrastAuditColors.missing, unmatchedOpacity),
+ added: setOpacity(contrastAuditColors.added, unmatchedOpacity),
+ prioritized: setOpacity(contrastAuditColors.prioritized, unmatchedOpacity),
+ accelerated: setOpacity(contrastAuditColors.accelerated, unmatchedOpacity),
+};
@Component({
selector: 'app-block-overview-graph',
@@ -108,8 +118,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
this.initCanvas();
this.resizeCanvas();
this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => {
- // force full re-render
- this.resizeCanvas();
+ this.scene.setColorFunction(this.getColorFunction());
});
}
}
@@ -567,9 +576,15 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
return (tx: TxView) => {
if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
- return defaultColorFunction(tx);
+ return this.themeService.theme !== 'default' ? contrastColorFunction(tx) : defaultColorFunction(tx);
} else {
- return defaultColorFunction(
+ return this.themeService.theme !== 'default' ? contrastColorFunction(
+ tx,
+ unmatchedContrastFeeColors,
+ unmatchedContrastAuditFeeColors,
+ unmatchedContrastMarginalFeeColors,
+ unmatchedContrastAuditColors
+ ) : defaultColorFunction(
tx,
unmatchedFeeColors,
unmatchedAuditFeeColors,
diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts
index 853301ee7..840a8b662 100644
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -2,7 +2,7 @@ import { FastVertexArray } from './fast-vertex-array';
import TxView from './tx-view';
import { TransactionStripped } from '../../interfaces/node-api.interface';
import { Color, Position, Square, ViewUpdateParams } from './sprite-types';
-import { defaultColorFunction } from './utils';
+import { defaultColorFunction, contrastColorFunction } from './utils';
import { ThemeService } from 'src/app/services/theme.service';
export default class BlockScene {
@@ -69,7 +69,7 @@ export default class BlockScene {
}
setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void {
- this.getColor = colorFunction || defaultColorFunction;
+ this.theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
this.dirty = true;
if (this.initialised && this.scene) {
this.updateColors(performance.now(), 50);
@@ -241,7 +241,7 @@ export default class BlockScene {
this.flip = flip;
this.vertexArray = vertexArray;
this.highlightingEnabled = highlighting;
- this.getColor = colorFunction || defaultColorFunction;
+ theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
this.theme = theme;
this.scene = {
diff --git a/frontend/src/app/components/block-overview-graph/tx-view.ts b/frontend/src/app/components/block-overview-graph/tx-view.ts
index 13de08aa6..0317d7cbf 100644
--- a/frontend/src/app/components/block-overview-graph/tx-view.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-view.ts
@@ -145,7 +145,7 @@ export default class TxView implements TransactionStripped {
setHover(hoverOn: boolean, color: Color | void): number {
if (hoverOn) {
this.hover = true;
- this.hoverColor = color || this.theme.defaultHoverColor;
+ this.hoverColor = color || defaultHoverColor;
this.sprite.update({
...this.hoverColor,
@@ -195,30 +195,4 @@ export default class TxView implements TransactionStripped {
this.dirty = false;
return performance.now() + hoverTransitionTime;
}
-
- getColor(): Color {
- const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, this.feerate) < feeLvl) - 1;
- const feeLevelColor = this.theme.feeColors[feeLevelIndex] || this.theme.feeColors[this.theme.mempoolFeeColors.length - 1];
- // Block audit
- switch(this.status) {
- case 'censored':
- return this.theme.auditColors.censored;
- case 'missing':
- return this.theme.auditColors.missing;
- case 'fresh':
- return this.theme.auditColors.missing;
- case 'added':
- return this.theme.auditColors.added;
- case 'selected':
- return this.theme.auditColors.selected;
- case 'found':
- if (this.context === 'projected') {
- return this.theme.auditFeeColors[feeLevelIndex] || this.theme.auditFeeColors[this.theme.mempoolFeeColors.length - 1];
- } else {
- return feeLevelColor;
- }
- default:
- return feeLevelColor;
- }
- }
}
diff --git a/frontend/src/app/components/block-overview-graph/utils.ts b/frontend/src/app/components/block-overview-graph/utils.ts
index 2f23d4cb9..ba4415e1c 100644
--- a/frontend/src/app/components/block-overview-graph/utils.ts
+++ b/frontend/src/app/components/block-overview-graph/utils.ts
@@ -1,4 +1,4 @@
-import { feeLevels, defaultMempoolFeeColors } from '../../app.constants';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../app.constants';
import { Color } from './sprite-types';
import TxView from './tx-view';
@@ -46,7 +46,18 @@ export const defaultAuditColors = {
missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
added: hexToColor('0099ff'),
prioritized: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
- accelerated: hexToColor('8F5FF6'),
+ accelerated: hexToColor('8f5ff6'),
+};
+
+export const contrastFeeColors = contrastMempoolFeeColors.map(hexToColor);
+export const contrastAuditFeeColors = contrastFeeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
+export const contrastMarginalFeeColors = contrastFeeColors.map((color) => darken(desaturate(color, 0.8), 1.1));
+export const contrastAuditColors = {
+ censored: hexToColor('ffa8ff'),
+ missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7),
+ added: hexToColor('00bb98'),
+ prioritized: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7),
+ accelerated: hexToColor('8f5ff6'),
};
export function defaultColorFunction(
@@ -100,4 +111,14 @@ export function defaultColorFunction(
return feeLevelColor;
}
}
+}
+
+export function contrastColorFunction(
+ tx: TxView,
+ feeColors: Color[] = contrastFeeColors,
+ auditFeeColors: Color[] = contrastAuditFeeColors,
+ marginalFeeColors: Color[] = contrastMarginalFeeColors,
+ auditColors: { [status: string]: Color } = contrastAuditColors
+): Color {
+ return defaultColorFunction(tx, feeColors, auditFeeColors, marginalFeeColors, auditColors);
}
\ No newline at end of file
diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts
index 58fdc6575..da374bf13 100644
--- a/frontend/src/app/services/theme.service.ts
+++ b/frontend/src/app/services/theme.service.ts
@@ -1,22 +1,8 @@
import { Injectable } from '@angular/core';
-import { audit, Subject } from 'rxjs';
-import { Color } from '../components/block-overview-graph/sprite-types';
+import { Subject } from 'rxjs';
import { defaultMempoolFeeColors, contrastMempoolFeeColors } from '../app.constants';
import { StorageService } from './storage.service';
-const defaultAuditColors = {
- censored: hexToColor('f344df'),
- missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
- added: hexToColor('0099ff'),
- selected: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
-};
-const contrastAuditColors = {
- censored: hexToColor('ffa8ff'),
- missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7),
- added: hexToColor('00bb98'),
- selected: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7),
-};
-
@Injectable({
providedIn: 'root'
})
@@ -26,12 +12,6 @@ export class ThemeService {
themeChanged$: Subject = new Subject();
mempoolFeeColors: string[] = defaultMempoolFeeColors;
- /* block visualization colors */
- defaultHoverColor: Color;
- feeColors: Color[];
- auditFeeColors: Color[];
- auditColors: { [category: string]: Color } = defaultAuditColors;
-
constructor(
private storageService: StorageService,
) {
@@ -44,7 +24,6 @@ export class ThemeService {
if (theme !== 'default') {
if (theme === 'contrast') {
this.mempoolFeeColors = contrastMempoolFeeColors;
- this.auditColors = contrastAuditColors;
}
try {
if (!this.style) {
@@ -60,48 +39,12 @@ export class ThemeService {
}
} else {
this.mempoolFeeColors = defaultMempoolFeeColors;
- this.auditColors = defaultAuditColors;
if (this.style) {
this.style.remove();
this.style = null;
}
}
- this.updateFeeColors();
this.storageService.setValue('theme-preference', theme);
this.themeChanged$.next(this.theme);
}
-
- updateFeeColors() {
- this.defaultHoverColor = hexToColor('1bd8f4');
- this.feeColors = this.mempoolFeeColors.map(hexToColor);
- this.auditFeeColors = this.feeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
- }
-}
-
-export function hexToColor(hex: string): Color {
- return {
- r: parseInt(hex.slice(0, 2), 16) / 255,
- g: parseInt(hex.slice(2, 4), 16) / 255,
- b: parseInt(hex.slice(4, 6), 16) / 255,
- a: 1
- };
-}
-
-export function desaturate(color: Color, amount: number): Color {
- const gray = (color.r + color.g + color.b) / 6;
- return {
- r: color.r + ((gray - color.r) * amount),
- g: color.g + ((gray - color.g) * amount),
- b: color.b + ((gray - color.b) * amount),
- a: color.a,
- };
-}
-
-export function darken(color: Color, amount: number): Color {
- return {
- r: color.r * amount,
- g: color.g * amount,
- b: color.b * amount,
- a: color.a,
- }
}
From 7e920f4baed59b8f89fa93cb40a058b9b6a67c07 Mon Sep 17 00:00:00 2001
From: natsoni
Date: Sat, 6 Apr 2024 15:48:35 +0900
Subject: [PATCH 11/50] Replace more hardcoded css
---
.../about/about-sponsors.component.scss | 2 +-
.../accelerate-fee-graph.component.scss | 4 ++--
.../accelerate-preview.component.html | 4 ++--
.../accelerate-preview.component.scss | 4 ++--
.../acceleration-fees-graph.component.scss | 2 +-
.../acceleration-stats.component.scss | 2 +-
.../accelerations-list.component.scss | 4 ++--
.../accelerator-dashboard.component.html | 4 ++--
.../accelerator-dashboard.component.scss | 6 +++---
.../accelerator-dashboard.component.ts | 7 +++++--
.../pending-stats.component.scss | 2 +-
.../address/address-preview.component.scss | 2 +-
.../components/address/address.component.scss | 2 +-
.../src/app/components/app/app.component.ts | 2 --
.../app/components/asset/asset.component.scss | 2 +-
.../block-fee-rates-graph.component.scss | 2 +-
.../block-filters.component.scss | 16 +++++++--------
.../block-overview-tooltip.component.scss | 14 ++++++-------
.../app/components/block/block.component.scss | 2 +-
.../blockchain-blocks.component.scss | 2 +-
.../blocks-list/blocks-list.component.scss | 2 +-
.../clock-face/clock-face.component.scss | 4 ++--
.../app/components/clock/clock.component.scss | 2 +-
.../difficulty-mining.component.html | 2 +-
.../difficulty-mining.component.scss | 6 +++---
.../difficulty/difficulty.component.scss | 10 +++++-----
.../expired-utxos-stats.component.html | 2 +-
.../expired-utxos-stats.component.scss | 2 +-
.../federation-addresses-list.component.scss | 2 +-
.../federation-addresses-stats.component.html | 4 ++--
.../federation-addresses-stats.component.scss | 2 +-
.../federation-utxos-list.component.scss | 2 +-
.../recent-pegs-list.component.scss | 2 +-
.../recent-pegs-stats.component.html | 4 ++--
.../recent-pegs-stats.component.scss | 2 +-
.../reserves-ratio-stats.component.html | 2 +-
.../reserves-ratio-stats.component.scss | 2 +-
.../reserves-ratio.component.ts | 2 +-
.../reserves-supply-stats.component.scss | 2 +-
.../app/components/menu/menu.component.scss | 10 +++++-----
.../rbf-list/rbf-list.component.scss | 2 +-
.../rbf-timeline/rbf-timeline.component.scss | 20 +++++++++----------
.../app/components/start/start.component.scss | 2 +-
.../transaction-preview.component.scss | 2 +-
.../transaction/transaction.component.scss | 8 ++++----
.../app/dashboard/dashboard.component.html | 4 ++--
.../app/dashboard/dashboard.component.scss | 6 +++---
.../docs/api-docs/api-docs-nav.component.scss | 6 +++---
.../app/docs/api-docs/api-docs.component.scss | 14 ++++++-------
.../channel-close-box.component.scss | 20 +++++++++----------
.../app/lightning/group/group.component.scss | 2 +-
.../app/lightning/node/node.component.scss | 2 +-
.../global-footer.component.html | 2 +-
.../global-footer.component.scss | 10 +++++-----
frontend/src/styles.scss | 1 +
frontend/src/theme-contrast.scss | 1 +
56 files changed, 128 insertions(+), 125 deletions(-)
diff --git a/frontend/src/app/components/about/about-sponsors.component.scss b/frontend/src/app/components/about/about-sponsors.component.scss
index 7c01bb9a3..0ee27d1f5 100644
--- a/frontend/src/app/components/about/about-sponsors.component.scss
+++ b/frontend/src/app/components/about/about-sponsors.component.scss
@@ -14,7 +14,7 @@
}
.become-sponsor {
- background-color: #1d1f31;
+ background-color: var(--bg);
border-radius: 16px;
padding: 12px 20px;
width: 400px;
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
index 8d36387f3..88d9f75ed 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
+++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
@@ -92,7 +92,7 @@
&.target {
.fill {
- background: #653b9c;
+ background: var(--tertiary);
}
.fee {
position: absolute;
@@ -114,7 +114,7 @@
}
&.active, &:hover {
.fill {
- background: #105fb0;
+ background: var(--primary);
}
.line {
.fee-rate .label {
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
index a848a645b..622da3744 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
@@ -179,10 +179,10 @@
- Maximum acceleration cost
+ Maximum acceleration cost
-
+
{{ maxCost | number }}
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
index 2e2b19ee8..5275bec64 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
@@ -1,6 +1,6 @@
.fee-card {
padding: 15px;
- background-color: #1d1f31;
+ background-color: var(--bg);
.feerate {
display: flex;
@@ -23,7 +23,7 @@
}
.feerate.active {
- background-color: #105fb0 !important;
+ background-color: var(--primary) !important;
opacity: 1;
border: 1px solid #007fff !important;
}
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 11b468a24..96273dead 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
@@ -62,7 +62,7 @@ h5 {
.card-title {
font-size: 1rem;
- color: #4a68b9;
+ color: var(--title-fg);
}
.disabled {
diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
index fcc5564a8..e685d98af 100644
--- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
+++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-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/acceleration/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
index 85e655b25..d4579bcf6 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
@@ -59,7 +59,7 @@ tr, td, th {
}
.progress {
- background-color: #2d3348;
+ background-color: var(--secondary);
}
.txid {
@@ -148,7 +148,7 @@ tr, td, th {
.tooltip-custom .tooltiptext {
visibility: hidden;
- color: #fff;
+ color: var(--fg);
text-align: center;
padding: 5px 0;
border-radius: 6px;
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
index 147e07e69..0e1c65382 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
@@ -40,7 +40,7 @@
Mempool Goggles: Accelerations
-
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 c8755c94e..e14f53dfb 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
@@ -7,7 +7,7 @@
}
.card {
- background-color: #1d1f31;
+ background-color: var(--bg);
}
.graph-card {
@@ -29,10 +29,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/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
index dda2b036b..44335f4b8 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -8,12 +8,14 @@ import { Observable, catchError, combineLatest, distinctUntilChanged, interval,
import { Color } from '../../block-overview-graph/sprite-types';
import { hexToColor } from '../../block-overview-graph/utils';
import TxView from '../../block-overview-graph/tx-view';
-import { feeLevels, defaultMempoolFeeColors } from '../../../app.constants';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants';
import { ServicesApiServices } from '../../../services/services-api.service';
import { detectWebGL } from '../../../shared/graphs.utils';
+import { ThemeService } from '../../../services/theme.service';
const acceleratedColor: Color = hexToColor('8F5FF6');
const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const contrastColors = contrastMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
interface AccelerationBlock extends BlockExtended {
accelerationCount: number,
@@ -34,6 +36,7 @@ export class AcceleratorDashboardComponent implements OnInit {
webGlEnabled = true;
graphHeight: number = 300;
+ theme: ThemeService;
constructor(
private seoService: SeoService,
@@ -128,7 +131,7 @@ export class AcceleratorDashboardComponent implements OnInit {
} else {
const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
- return normalColors[feeLevelIndex] || normalColors[defaultMempoolFeeColors.length - 1];
+ return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
}
}
diff --git a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
index fcc5564a8..e685d98af 100644
--- a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
+++ b/frontend/src/app/components/acceleration/pending-stats/pending-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/address/address-preview.component.scss b/frontend/src/app/components/address/address-preview.component.scss
index 21e7faab5..623d72db2 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: #FFF;
+ background-color: var(--fg);
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 fe0729b94..7107c73f2 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: #FFF;
+ background-color: var(--fg);
padding: 10px;
padding-bottom: 5px;
display: inline-block;
diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts
index 49eb691c7..ace0122f0 100644
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@@ -4,7 +4,6 @@ import { Router, NavigationEnd } from '@angular/router';
import { StateService } from '../../services/state.service';
import { OpenGraphService } from '../../services/opengraph.service';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
-import { ThemeService } from 'src/app/services/theme.service';
@Component({
selector: 'app-root',
@@ -20,7 +19,6 @@ export class AppComponent implements OnInit {
private stateService: StateService,
private openGraphService: OpenGraphService,
private location: Location,
- private theme: ThemeService,
tooltipConfig: NgbTooltipConfig,
@Inject(LOCALE_ID) private locale: string,
) {
diff --git a/frontend/src/app/components/asset/asset.component.scss b/frontend/src/app/components/asset/asset.component.scss
index 45e68042d..6f8bc0915 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: #FFF;
+ background-color: var(--fg);
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 21dd458b5..d38bb4843 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
@@ -95,7 +95,7 @@
}
.card-title {
font-size: 1rem;
- color: #4a68b9;
+ color: var(--title-fg);
}
.card-text {
font-size: 18px;
diff --git a/frontend/src/app/components/block-filters/block-filters.component.scss b/frontend/src/app/components/block-filters/block-filters.component.scss
index 1009efd72..d5f1d5968 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.scss
+++ b/frontend/src/app/components/block-filters/block-filters.component.scss
@@ -64,7 +64,7 @@
.filter-tag {
font-size: 0.9em;
background: #181b2daf;
- border: solid 1px #105fb0;
+ border: solid 1px var(--primary);
color: white;
border-radius: 0.2rem;
padding: 0.2em 0.5em;
@@ -73,15 +73,15 @@
pointer-events: all;
&.selected {
- background-color: #105fb0;
+ background-color: var(--primary);
}
}
&.any-mode {
.filter-tag {
- border: solid 1px #1a9436;
+ border: solid 1px var(--success);
&.selected {
- background-color: #1a9436;
+ background-color: var(--success);
}
}
}
@@ -107,15 +107,15 @@
}
&.blue {
- border: solid 1px #105fb0;
+ border: solid 1px var(--primary);
&.active {
- background: #105fb0;
+ background: var(--primary);
}
}
&.green {
- border: solid 1px #1a9436;
+ border: solid 1px var(--success);
&.active {
- background: #1a9436;
+ background: var(--success);
}
}
}
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 135f1cfe6..df34ce346 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
@@ -30,7 +30,7 @@ th, td {
}
.badge.badge-accelerated {
- background-color: #653b9c;
+ background-color: var(--tertiary);
box-shadow: #ad7de57f 0px 0px 12px -2px;
color: white;
animation: acceleratePulse 1s infinite;
@@ -51,27 +51,27 @@ th, td {
.filter-tag {
background: #181b2daf;
- border: solid 1px #105fb0;
+ border: solid 1px var(--primary);
color: white;
transition: background-color 300ms;
&.matching {
- background-color: #105fb0;
+ background-color: var(--primary);
}
}
&.any-mode {
.filter-tag {
- border: solid 1px #1a9436;
+ border: solid 1px var(--success);
&.matching {
- background-color: #1a9436;
+ background-color: var(--success);
}
}
}
}
@keyframes acceleratePulse {
- 0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
+ 0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
- 100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
+ 100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
}
\ No newline at end of file
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index a7ebafbe5..70f388e73 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -22,7 +22,7 @@
}
.qr-wrapper {
- background-color: #FFF;
+ background-color: var(--fg);
padding: 10px;
padding-bottom: 5px;
display: inline-block;
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 0cbadf01b..59082d5c5 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -144,7 +144,7 @@
}
.loading .bitcoin-block.mined-block {
- background: #2d3348;
+ background: var(--secondary);
}
@keyframes opacityPulse {
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss
index 6dba7441f..2315844ae 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -266,7 +266,7 @@ tr, td, th {
.tooltip-custom .tooltiptext {
visibility: hidden;
- color: #fff;
+ color: var(--fg);
text-align: center;
padding: 5px 0;
border-radius: 6px;
diff --git a/frontend/src/app/components/clock-face/clock-face.component.scss b/frontend/src/app/components/clock-face/clock-face.component.scss
index 1ca2ce914..904de9d96 100644
--- a/frontend/src/app/components/clock-face/clock-face.component.scss
+++ b/frontend/src/app/components/clock-face/clock-face.component.scss
@@ -29,8 +29,8 @@
}
&.hour {
- fill: #105fb0;
- stroke: #105fb0;
+ fill: var(--primary);
+ stroke: var(--primary);
stroke-width: 6px;
}
}
diff --git a/frontend/src/app/components/clock/clock.component.scss b/frontend/src/app/components/clock/clock.component.scss
index 34aadcd74..7423c1d8f 100644
--- a/frontend/src/app/components/clock/clock.component.scss
+++ b/frontend/src/app/components/clock/clock.component.scss
@@ -161,7 +161,7 @@
}
.side.bottom {
- background: #105fb0;
+ background: var(--primary);
transform: rotateX(-90deg);
margin-top: var(--half-side);
}
diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
index 0865708af..4d135dfbe 100644
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
@@ -40,7 +40,7 @@
Current Period
{{ epochData.progress | number: '1.2-2' }} %
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 69e2892ee..7965ff5d6 100644
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
@@ -79,12 +79,12 @@
}
.card {
- background-color: #1d1f31;
+ background-color: var(--bg);
height: 100%;
}
.card-title {
- color: #4a68b9;
+ color: var(--title-fg);
font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
@@ -94,7 +94,7 @@
.progress {
display: inline-flex;
width: 100%;
- background-color: #2d3348;
+ background-color: var(--secondary);
height: 1.1rem;
max-width: 180px;
}
diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss
index eda486966..697a6f534 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@@ -177,10 +177,10 @@
.epoch-blocks {
display: block;
width: 100%;
- background: #2d3348;
+ background: var(--secondary);
.rect {
- fill: #2d3348;
+ fill: var(--secondary);
&.behind {
fill: #D81B60;
@@ -189,7 +189,7 @@
fill: url(#diff-gradient);
}
&.ahead {
- fill: #1a9436;
+ fill: var(--success);
}
&.hover {
@@ -223,12 +223,12 @@
height: 100%;
}
.background {
- background: linear-gradient(to right, #105fb0, #9339f4);
+ background: linear-gradient(to right, var(--primary), #9339f4);
left: 0;
right: 0;
}
.remaining {
- background: #2d3348;
+ background: var(--secondary);
right: 0;
}
.label {
diff --git a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
index 44dfedd26..fb68a530d 100644
--- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
@@ -9,7 +9,7 @@
- Total Expired Total Expired
{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} BTC
diff --git a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
index d2044f6de..1a2fd6864 100644
--- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
@@ -14,7 +14,7 @@
}
.card-title {
- color: #4a68b9;
+ color: var(--title-fg);
font-size: 10px;
margin-bottom: 4px;
font-size: 1rem;
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
index b711f659b..5fbab9cc5 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
@@ -33,7 +33,7 @@ tr, td, th {
}
.progress {
- background-color: #2d3348;
+ background-color: var(--secondary);
}
.address {
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
index 9240cf228..5017ad4b2 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
@@ -2,7 +2,7 @@
- Liquid Federation Wallet Liquid Federation Wallet
{{ federationWalletStats.address_count }} addresses
@@ -16,7 +16,7 @@
- Liquid Federation Wallet Liquid Federation Wallet
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
index 4ddce6501..aa345fbfd 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
@@ -15,7 +15,7 @@
.card-title {
margin: 0;
- color: #4a68b9;
+ color: var(--title-fg);
font-size: 10px;
font-size: 1rem;
white-space: nowrap;
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
index 6a2353f0c..cdd5a5ed9 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
@@ -24,7 +24,7 @@ tr, td, th {
}
.progress {
- background-color: #2d3348;
+ background-color: var(--secondary);
}
.txid {
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
index 7a3d9e49f..3af119fad 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@@ -27,7 +27,7 @@ tr, td, th {
}
.progress {
- background-color: #2d3348;
+ background-color: var(--secondary);
}
.transaction {
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
index 6f012e84e..44b801a30 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
@@ -2,7 +2,7 @@
@@ -26,7 +26,7 @@
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
index 4cfef8e7a..9a7e6f0ea 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
@@ -15,7 +15,7 @@
.card-title {
margin: 0;
- color: #4a68b9;
+ color: var(--title-fg);
font-size: 10px;
font-size: 1rem;
white-space: nowrap;
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
index dede76b3f..49ba80d0c 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
@@ -23,7 +23,7 @@
Emergency Keys
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
index 13123431e..fd7197a88 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
@@ -22,7 +22,7 @@
.card-title {
margin-bottom: 4px;
- color: #4a68b9;
+ color: var(--title-fg);
font-size: 10px;
font-size: 1rem;
white-space: nowrap;
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
index 13f948fcd..04429d2ac 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
@@ -141,7 +141,7 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
show: true,
offsetCenter: [0, '-127%'],
fontSize: 18,
- color: '#4a68b9',
+ color: 'var(--title-fg)',
fontFamily: 'inherit',
fontWeight: 500,
},
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
index 6ffb900ed..47d29eb45 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
@@ -13,7 +13,7 @@
}
.card-title {
- color: #4a68b9;
+ color: var(--title-fg);
font-size: 10px;
margin-bottom: 4px;
font-size: 1rem;
diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss
index 8a2e55c20..ec7e7250f 100644
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/frontend/src/app/components/menu/menu.component.scss
@@ -28,7 +28,7 @@
.sidenav.open {
left: 0px;
display: block;
- background-color: #1d1f31;
+ background-color: var(--bg);
}
.sidenav a, button{
@@ -42,7 +42,7 @@
.sidenav nav {
width: 100%;
height: calc(100vh - 65px);
- background-color: #1d1f31;
+ background-color: var(--bg);
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
@@ -61,7 +61,7 @@
}
.badge-og {
- background-color: #4a68b9;
+ background-color: var(--title-fg);
}
.badge-pleb {
@@ -73,7 +73,7 @@
}
.badge-whale {
- background-color: #653b9c;
+ background-color: var(--tertiary);
}
.badge-silver {
@@ -85,5 +85,5 @@
}
.badge-platinum {
- background-color: #653b9c;
+ background-color: var(--tertiary);
}
\ No newline at end of file
diff --git a/frontend/src/app/components/rbf-list/rbf-list.component.scss b/frontend/src/app/components/rbf-list/rbf-list.component.scss
index 792bb8836..ff4dcf9b7 100644
--- a/frontend/src/app/components/rbf-list/rbf-list.component.scss
+++ b/frontend/src/app/components/rbf-list/rbf-list.component.scss
@@ -25,7 +25,7 @@
}
.timeline-wrapper.mined {
- border: solid 4px #1a9436;
+ border: solid 4px var(--success);
}
.no-replacements {
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 23c252190..6803e82ae 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -101,7 +101,7 @@
right: -5px;
top: 0;
transform: translateY(-50%);
- background: #105fb0;
+ background: var(--primary);
border-radius: 5px;
&.left {
@@ -112,7 +112,7 @@
}
&.fullrbf {
- background: #1bd8f4;
+ background: var(--info);
}
}
&.first-node {
@@ -165,20 +165,20 @@
&.mined {
.shape-border {
- background: #1a9436;
+ background: var(--success);
}
}
.shape-border:hover {
padding: 0px;
.shape {
- background: #1bd8f4;
+ background: var(--info);
}
}
&.selected.mined {
.shape-border {
- background: #1a9436;
+ background: var(--success);
height: calc(1em + 16px);
width: calc(1em + 16px);
@@ -190,7 +190,7 @@
padding: 4px;
.shape {
border-width: 1px;
- border-color: #1bd8f4
+ border-color: var(--info)
}
}
}
@@ -207,9 +207,9 @@
width: 20px;
height: 108px;
bottom: 50%;
- border-right: solid 10px #105fb0;
+ border-right: solid 10px var(--primary);
&.fullrbf {
- border-right: solid 10px #1bd8f4;
+ border-right: solid 10px var(--info);
}
&.last-pipe {
height: 150px;
@@ -218,10 +218,10 @@
}
.corner {
- border-bottom: solid 10px #105fb0;
+ border-bottom: solid 10px var(--primary);
border-bottom-right-radius: 10px;
&.fullrbf {
- border-bottom: solid 10px #1bd8f4;
+ border-bottom: solid 10px var(--info);
}
}
}
diff --git a/frontend/src/app/components/start/start.component.scss b/frontend/src/app/components/start/start.component.scss
index e321b8d6f..50e520cc5 100644
--- a/frontend/src/app/components/start/start.component.scss
+++ b/frontend/src/app/components/start/start.component.scss
@@ -32,7 +32,7 @@
cursor: pointer;
opacity: 0.8;
transition: opacity 500ms;
- background: radial-gradient(#1d1f31 0%, transparent 50%);
+ background: radial-gradient(var(--bg) 0%, transparent 50%);
&:hover {
opacity: 1;
diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss
index 0b26e539a..986ee7d8e 100644
--- a/frontend/src/app/components/transaction/transaction-preview.component.scss
+++ b/frontend/src/app/components/transaction/transaction-preview.component.scss
@@ -113,7 +113,7 @@
max-width: 100%;
margin: auto;
table-layout: auto;
- background: #2d3348af;
+ background: var(--secondary)af;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index a30454225..80caa6003 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -61,7 +61,7 @@
}
.badge.badge-accelerated {
- background-color: #653b9c;
+ background-color: var(--tertiary);
color: white;
}
@@ -256,7 +256,7 @@
}
.blink-bg {
- color: #fff;
+ color: var(--fg);
background: repeating-linear-gradient(#daad0a 0%, #daad0a 5%, #987805 100%) !important;
animation: shadowyBackground 1s infinite;
box-shadow: 0px 0px 20px rgba(#eba814, 1);
@@ -279,7 +279,7 @@
display: flex !important;
align-self: auto;
margin-left: auto;
- background-color: #653b9c;
+ background-color: var(--tertiary);
@media (max-width: 849px) {
margin-left: 5px;
}
@@ -302,7 +302,7 @@
align-self: auto;
margin-top: 3px;
margin-left: auto;
- background-color: #653b9c;
+ background-color: var(--tertiary);
@media (max-width: 995px) {
margin-left: 0px;
}
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index a6b67384b..4ffae4dc4 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -20,7 +20,7 @@
Mempool Goggles : {{ goggleCycle[goggleIndex].name }}
-
@@ -97,7 +97,7 @@
Recent Blocks
-
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 08d77beeb..3acfbf9bb 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -399,11 +399,11 @@
.goggle-badge {
margin: 6px 5px 8px;
background: none;
- border: solid 2px #105fb0;
+ border: solid 2px var(--primary);
cursor: pointer;
&.active {
- background: #105fb0;
+ background: var(--primary);
}
}
@@ -418,7 +418,7 @@
}
.card-liquid {
- background-color: #1d1f31;
+ background-color: var(--bg);
height: 418px;
@media (min-width: 992px) {
height: 512px;
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 c22d95ed2..4609ed2fd 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
@@ -6,7 +6,7 @@ p {
}
a {
- color: #fff;
+ color: var(--fg);
text-decoration: none;
display: block;
margin: 5px 0;
@@ -17,13 +17,13 @@ a {
text-align: center;
padding: 20px;
margin: 20px 20px 20px 0;
- background-color: #1d1f31;
+ background-color: var(--bg);
border-radius: 12px;
}
#enterprise-cta-desktop p {
margin: 0 auto 16px auto;
- color: #fff;
+ color: var(--fg);
font-weight: 400;
}
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss
index 9a4ec8dc9..ce8c37121 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs.component.scss
@@ -211,7 +211,7 @@ h3 {
}
.endpoint-container .section-header span {
- color: #fff;
+ color: var(--fg);
background-color: var(--tertiary);
font-size: 12px;
text-transform: uppercase;
@@ -254,7 +254,7 @@ h3 {
#doc-nav-mobile button {
width: 100%;
background-color: var(--primary);
- color: #fff;
+ color: var(--fg);
border-color: var(--primary);
border-radius: 0.5rem 0.5rem 0 0;
}
@@ -318,7 +318,7 @@ h3 {
#enterprise-cta-mobile {
padding: 20px;
- background-color: #1d1f31;
+ background-color: var(--bg);
border-radius: 0.25rem;
text-align: center;
position: fixed;
@@ -343,8 +343,8 @@ h3 {
}
#enterprise-cta-mobile .btn-secondary:hover {
- background-color: #2d3348;
- border-color: #2d3348;
+ background-color: var(--secondary);
+ border-color: var(--secondary);
}
#enterprise-cta-mobile .no-line-break {
@@ -438,7 +438,7 @@ dl {
dt {
font-weight: bold;
- color: #4a68b9;
+ color: var(--title-fg);
padding: 5px 0;
}
@@ -447,7 +447,7 @@ dd {
& > dl {
padding-left: 1em;
- border-left: 2px solid #4a68b9;
+ border-left: 2px solid var(--title-fg);
margin-left: 1em;
margin-top: 5px;
}
diff --git a/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss b/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
index f55550eb3..12a8cb53c 100644
--- a/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
+++ b/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
@@ -60,19 +60,19 @@
justify-content: center;
&.left {
- background: #105fb0;
+ background: var(--primary);
}
&.center {
background: repeating-linear-gradient(
60deg,
- #105fb0 0,
- #105fb0 12px,
- #1a9436 12px,
- #1a9436 24px
+ var(--primary) 0,
+ var(--primary) 12px,
+ var(--success) 12px,
+ var(--success) 24px
);
}
&.right {
- background: #1a9436;
+ background: var(--success);
}
.value {
@@ -93,10 +93,10 @@
.bar.center {
background: repeating-linear-gradient(
60deg,
- #105fb0 0,
- #105fb0 8px,
- #1a9436 8px,
- #1a9436 16px
+ var(--primary) 0,
+ var(--primary) 8px,
+ var(--success) 8px,
+ var(--success) 16px
)
}
}
diff --git a/frontend/src/app/lightning/group/group.component.scss b/frontend/src/app/lightning/group/group.component.scss
index 6deb4ca14..61bc87ca8 100644
--- a/frontend/src/app/lightning/group/group.component.scss
+++ b/frontend/src/app/lightning/group/group.component.scss
@@ -12,7 +12,7 @@ h1 {
}
.qr-wrapper {
- background-color: #FFF;
+ background-color: var(--fg);
padding: 10px;
padding-bottom: 5px;
display: inline-block;
diff --git a/frontend/src/app/lightning/node/node.component.scss b/frontend/src/app/lightning/node/node.component.scss
index dcbac7fa7..9d70bae30 100644
--- a/frontend/src/app/lightning/node/node.component.scss
+++ b/frontend/src/app/lightning/node/node.component.scss
@@ -14,7 +14,7 @@
}
.qr-wrapper {
- background-color: #FFF;
+ background-color: var(--fg);
padding: 10px;
padding-bottom: 5px;
display: inline-block;
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index eee4756a9..635cf8d42 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -93,7 +93,7 @@
Matrix
+
{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }} ]
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.scss b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
index 5467f09c1..2db64e976 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
@@ -1,5 +1,5 @@
footer {
- background-color: #1d1f31;
+ background-color: var(--bg);
margin-top: 30px;
&.services {
@media (min-width: 768px) {
@@ -34,11 +34,11 @@ footer .row.main .branding > p {
footer .row.main .branding .btn {
display: inline-block;
- color: #fff !important;
+ color: var(--fg) !important;
}
footer .row.main .branding button.account {
- background-color: #2d3348;
+ background-color: var(--secondary);
}
footer .row.main .branding .cta {
@@ -59,7 +59,7 @@ footer .row.main .links > div:first-child {
}
footer .links .category {
- color: #4a68b9;
+ color: var(--title-fg);
font-weight: 700;
}
@@ -114,7 +114,7 @@ footer .row.social-links svg {
footer .row.version {
padding-top: 20px !important;
padding-bottom: 20px !important;
- background-color: #1d1f31;
+ background-color: var(--bg);
}
footer .row.version p {
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 88f664982..93cdda7fe 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -76,6 +76,7 @@ $dropdown-link-active-bg: $active-bg;
--box-bg: #24273e;
--stat-box-bg: #181b2d;
--alert-bg: #3a1c61;
+ --navbar-bg: #212121;
--transparent-fg: #ffffff66;
--fade-out-box-bg-start: rgba(36, 39, 62, 0);
--fade-out-box-bg-end: rgba(36, 39, 62, 1);
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index 3e85adf2a..24d365789 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -75,6 +75,7 @@ $dropdown-link-active-bg: $active-bg;
--box-bg: #171c2a;
--stat-box-bg: #0b1018;
--alert-bg: #3a1c61;
+ --navbar-bg: #212121;
--transparent-fg: #ffffffbb;
--fade-out-box-bg-start: rgba(23, 28, 42, 0);
--fade-out-box-bg-end: rgba(23, 28, 42, 1);
From fd073a70434a492e6cef2b4543ef55a53c87a2ea Mon Sep 17 00:00:00 2001
From: Metadavid <7405300+daweilv@users.noreply.github.com>
Date: Sun, 7 Apr 2024 21:03:20 +0800
Subject: [PATCH 12/50] Add files via upload
---
contributors/daweilv.txt | 3 +++
1 file changed, 3 insertions(+)
create mode 100644 contributors/daweilv.txt
diff --git a/contributors/daweilv.txt b/contributors/daweilv.txt
new file mode 100644
index 000000000..2abb9f73b
--- /dev/null
+++ b/contributors/daweilv.txt
@@ -0,0 +1,3 @@
+I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of April 7, 2024.
+
+Signed: daweilv
From c3acfb8781fcbfa8c6fc7aba9dd60d8a22dfae5b Mon Sep 17 00:00:00 2001
From: Metadavid <7405300+daweilv@users.noreply.github.com>
Date: Sun, 7 Apr 2024 21:04:23 +0800
Subject: [PATCH 13/50] Update address-graph.component.ts
fix(address): Clicking on the Balance History chart within the /testnet/address/:id page under testnet now navigates to /testnet/tx/:tx instead of /tx/:tx.
---
.../app/components/address-graph/address-graph.component.ts | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/frontend/src/app/components/address-graph/address-graph.component.ts b/frontend/src/app/components/address-graph/address-graph.component.ts
index a73229495..fc3cf24dd 100644
--- a/frontend/src/app/components/address-graph/address-graph.component.ts
+++ b/frontend/src/app/components/address-graph/address-graph.component.ts
@@ -6,6 +6,7 @@ import { ChainStats } from '../../interfaces/electrs.interface';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe';
import { Router } from '@angular/router';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
@Component({
selector: 'app-address-graph',
@@ -46,6 +47,7 @@ export class AddressGraphComponent implements OnChanges {
private router: Router,
private amountShortenerPipe: AmountShortenerPipe,
private cd: ChangeDetectorRef,
+ private relativeUrlPipe: RelativeUrlPipe,
) {}
ngOnChanges(changes: SimpleChanges): void {
@@ -122,7 +124,7 @@ export class AddressGraphComponent implements OnChanges {
${date}
- `;
+ `;
}.bind(this)
},
xAxis: {
@@ -178,7 +180,7 @@ export class AddressGraphComponent implements OnChanges {
onChartClick(e) {
if (this.hoverData?.length && this.hoverData[0]?.[2]?.txid) {
- this.router.navigate(['/tx/', this.hoverData[0][2].txid]);
+ this.router.navigate([this.relativeUrlPipe.transform('/tx/'), this.hoverData[0][2].txid]);
}
}
From c637055859840b86a117e6445040365da3403dcb Mon Sep 17 00:00:00 2001
From: Metadavid <7405300+daweilv@users.noreply.github.com>
Date: Sun, 7 Apr 2024 21:20:42 +0800
Subject: [PATCH 14/50] Update daweilv.txt
---
contributors/daweilv.txt | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/contributors/daweilv.txt b/contributors/daweilv.txt
index 2abb9f73b..eb70cade1 100644
--- a/contributors/daweilv.txt
+++ b/contributors/daweilv.txt
@@ -1,3 +1,3 @@
-I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of April 7, 2024.
+I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of April 6, 2024.
Signed: daweilv
From 5583befbba7274a2504cac7fb34a2e6f81f11a1b Mon Sep 17 00:00:00 2001
From: Metadavid <7405300+daweilv@users.noreply.github.com>
Date: Sun, 7 Apr 2024 21:42:36 +0800
Subject: [PATCH 15/50] Update daweilv.txt
---
contributors/daweilv.txt | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/contributors/daweilv.txt b/contributors/daweilv.txt
index eb70cade1..2abb9f73b 100644
--- a/contributors/daweilv.txt
+++ b/contributors/daweilv.txt
@@ -1,3 +1,3 @@
-I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of April 6, 2024.
+I hereby accept the terms of the Contributor License Agreement in the CONTRIBUTING.md file of the mempool/mempool git repository as of April 7, 2024.
Signed: daweilv
From 99e189079575d4b3829c901ad45950260ba69038 Mon Sep 17 00:00:00 2001
From: natsoni
Date: Sat, 6 Apr 2024 18:31:31 +0900
Subject: [PATCH 16/50] Fix footer to fit with theme selector
---
.../components/global-footer/global-footer.component.html | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index 635cf8d42..1a93729d7 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -21,7 +21,7 @@
-
+