mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 06:47:52 +01:00
Code Issues Projects Releases Wiki Activity

add high contrast theme

Browse source
This commit is contained in:
Mononaut 2023-01-03 05:24:14 -06:00 • committed by natsoni
parent 1ca05a029a
commit 79dd263fb1
No known key found for this signature in database
GPG key ID: C65917583181743B
54 changed files with 446 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/angular.json
View file

@ -170,6 +170,11 @@
], ],
"styles": [ "styles": [
"src/styles.scss", "src/styles.scss",
{
"input": "src/theme-contrast.scss",
"bundleName": "contrast",
"inject": false
},
"node_modules/@fortawesome/fontawesome-svg-core/styles.css" "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
], ],
"vendorChunk": true, "vendorChunk": true,

78
frontend/src/app/app.constants.ts
View file

@ -40,45 +40,45 @@ export const defaultMempoolFeeColors = [
]; ];
export const contrastMempoolFeeColors = [ export const contrastMempoolFeeColors = [
'83fd00', '0082e6',
'83f609', '0984df',
'83ef12', '1285d9',
'83e71a', '1a87d2',
'83e023', '2388cb',
'83d92c', '2c8ac5',
'83d235', '358bbe',
'83cb3e', '3e8db7',
'83c446', '468eb0',
'83bc4f', '4f90aa',
'83b558', '5892a3',
'83ae61', '61939c',
'83a76a', '6a9596',
'83a072', '72968f',
'83997b', '7b9888',
'839184', '849982',
'838a8d', '8d9b7b',
'838395', '959c74',
'837c9e', '9e9e6e',
'8375a7', 'a79f67',
'836eb0', 'b0a160',
'8366b9', 'b9a35a',
'835fc1', 'c1a453',
'8358ca', 'caa64c',
'8351d3', 'd3a745',
'834adc', 'dca93f',
'8343e5', 'e5aa38',
'833bed', 'edac31',
'8334f6', 'f6ad2b',
'832dff', 'ffaf24',
'832dff', 'ffaf24',
'832dff', 'ffaf24',
'832dff', 'ffaf24',
'832dff', 'ffaf24',
'832dff', 'ffaf24',
'832dff', 'ffaf24',
'832dff', 'ffaf24',
'832dff', 'ffaf24',
]; ];
export const chartColors = [ export const chartColors = [
"#D81B60", "#D81B60",

2
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
View file

@ -233,7 +233,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
View file

@ -151,7 +151,7 @@ export class BlockFeesGraphComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/components/block-health-graph/block-health-graph.component.ts
View file

@ -131,7 +131,7 @@ export class BlockHealthGraphComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
View file

@ -3,7 +3,7 @@
background: rgba(#11131f, 0.95); background: rgba(#11131f, 0.95);
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5); box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: #b1b1b1; color: var(--tooltip-grey);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;

2
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
View file

@ -150,7 +150,7 @@ export class BlockRewardsGraphComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
View file

@ -146,7 +146,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/components/block/block.component.scss
View file

@ -175,9 +175,7 @@ h1 {
} }
a { a {
color: #1ad8f4;
&:hover, &:focus { &:hover, &:focus {
color: #09a3ba;
display: inline-block; display: inline-block;
} }
} }

2
frontend/src/app/components/difficulty/difficulty.component.scss
View file

@ -96,7 +96,7 @@
} }
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 1rem; font-size: 1rem;
} }

3
frontend/src/app/components/fees-box/fees-box.component.scss
View file

@ -1,5 +1,5 @@
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;
@ -79,6 +79,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
transition: background-color 1s; transition: background-color 1s;
color: var(--color-fg);
&.priority { &.priority {
@media (767px < width < 992px), (width < 576px) { @media (767px < width < 992px), (width < 576px) {
width: 100%; width: 100%;

43
frontend/src/app/components/fees-box/fees-box.component.ts
View file

@ -1,6 +1,6 @@
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
import { Observable, combineLatest } from 'rxjs'; import { Observable, combineLatest, Subscription } from 'rxjs';
import { Recommendedfees } from '../../interfaces/websocket.interface'; import { Recommendedfees } from '../../interfaces/websocket.interface';
import { feeLevels } from '../../app.constants'; import { feeLevels } from '../../app.constants';
import { map, startWith, tap } from 'rxjs/operators'; import { map, startWith, tap } from 'rxjs/operators';
@ -12,15 +12,18 @@ import { ThemeService } from 'src/app/services/theme.service';
styleUrls: ['./fees-box.component.scss'], styleUrls: ['./fees-box.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FeesBoxComponent implements OnInit { export class FeesBoxComponent implements OnInit, OnDestroy {
isLoading$: Observable<boolean>; isLoading$: Observable<boolean>;
recommendedFees$: Observable<Recommendedfees>; recommendedFees$: Observable<Recommendedfees>;
themeSubscription: Subscription;
gradient = 'linear-gradient(to right, #2e324e, #2e324e)'; gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
noPriority = '#2e324e'; noPriority = '#2e324e';
fees: Recommendedfees;
constructor( constructor(
private stateService: StateService, private stateService: StateService,
private themeService: ThemeService, private themeService: ThemeService,
private cd: ChangeDetectorRef,
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
@ -33,18 +36,32 @@ export class FeesBoxComponent implements OnInit {
this.recommendedFees$ = this.stateService.recommendedFees$ this.recommendedFees$ = this.stateService.recommendedFees$
.pipe( .pipe(
tap((fees) => { tap((fees) => {
let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.minimumFee >= feeLvl); this.fees = fees;
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; this.setFeeGradient();
const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl);
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
this.noPriority = startColor;
} }
) )
); );
this.themeSubscription = this.themeService.themeChanged$.subscribe(() => {
this.setFeeGradient();
})
}
setFeeGradient() {
let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.minimumFee >= feeLvl);
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.fastestFee >= feeLvl);
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
this.noPriority = startColor;
this.cd.markForCheck();
}
ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
} }
} }

10
frontend/src/app/components/footer/footer.component.scss
View file

@ -40,16 +40,8 @@
} }
} }
.txPerSecond {
color: #4a9ff4;
}
.mempoolSize { .mempoolSize {
color: #4a68b9; color: var(--title-fg);
}
.unconfirmedTx {
color: #f14d80;
} }
.info-block { .info-block {

2
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View file

@ -94,7 +94,7 @@
} }
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
} }
.card-text { .card-text {
font-size: 18px; font-size: 18px;

2
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View file

@ -242,7 +242,7 @@ export class HashrateChartComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
View file

@ -225,7 +225,7 @@ export class HashrateChartPoolsComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
View file

@ -47,7 +47,7 @@ li.nav-item {
} }
.navbar-nav { .navbar-nav {
background: #212121; background: var(--navbar-bg);
bottom: 0; bottom: 0;
box-shadow: 0px 0px 15px 0px #000; box-shadow: 0px 0px 15px 0px #000;
flex-direction: row; flex-direction: row;

2
frontend/src/app/components/master-page/master-page.component.scss
View file

@ -58,7 +58,7 @@ li.nav-item {
} }
.navbar-nav { .navbar-nav {
background: #212121; background: var(--navbar-bg);
bottom: 0; bottom: 0;
box-shadow: 0px 0px 15px 0px #000; box-shadow: 0px 0px 15px 0px #000;
flex-direction: row; flex-direction: row;

4
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View file

@ -55,7 +55,7 @@
<a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]"> <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5> <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<app-blocks-list [attr.data-cy]="'latest-blocks'" [widget]=true></app-blocks-list> <app-blocks-list [attr.data-cy]="'latest-blocks'" [widget]=true></app-blocks-list>
</div> </div>
@ -69,7 +69,7 @@
<a class="title-link" href="" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]"> <a class="title-link" href="" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.adjustments">Adjustments</h5> <h5 class="card-title d-inline" i18n="dashboard.adjustments">Adjustments</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<app-difficulty-adjustments-table [attr.data-cy]="'difficulty-adjustments-table'"></app-difficulty-adjustments-table> <app-difficulty-adjustments-table [attr.data-cy]="'difficulty-adjustments-table'"></app-difficulty-adjustments-table>
</div> </div>

4
frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
View file

@ -32,10 +32,10 @@
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
} }
.card-title > a { .card-title > a {
color: #4a68b9; color: var(--title-fg);
} }
.card-body.pool-ranking { .card-body.pool-ranking {

2
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View file

@ -99,7 +99,7 @@
} }
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

8
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View file

@ -146,7 +146,7 @@ export class PoolRankingComponent implements OnInit {
name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`), name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
label: { label: {
overflow: 'none', overflow: 'none',
color: '#b1b1b1', color: 'var(--tooltip-grey)',
alignTo: 'edge', alignTo: 'edge',
edgeDistance: edgeDistance, edgeDistance: edgeDistance,
}, },
@ -156,7 +156,7 @@ export class PoolRankingComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
}, },
borderColor: '#000', borderColor: '#000',
formatter: () => { formatter: () => {
@ -184,7 +184,7 @@ export class PoolRankingComponent implements OnInit {
name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`), name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
label: { label: {
overflow: 'none', overflow: 'none',
color: '#b1b1b1', color: 'var(--tooltip-grey)',
alignTo: 'edge', alignTo: 'edge',
edgeDistance: edgeDistance edgeDistance: edgeDistance
}, },
@ -193,7 +193,7 @@ export class PoolRankingComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
}, },
borderColor: '#000', borderColor: '#000',
formatter: () => { formatter: () => {

2
frontend/src/app/components/pool/pool.component.scss
View file

@ -190,7 +190,7 @@ div.scrollable {
} }
.data-title { .data-title {
color: #4a68b9; color: var(--title-fg);
font-size: 14px; font-size: 14px;
} }

2
frontend/src/app/components/pool/pool.component.ts
View file

@ -175,7 +175,7 @@ export class PoolComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/components/reward-stats/reward-stats.component.scss
View file

@ -1,5 +1,5 @@
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;

2
frontend/src/app/components/search-form/search-results/search-results.component.scss
View file

@ -1,5 +1,5 @@
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;

8
frontend/src/app/components/transactions-list/transactions-list.component.scss
View file

@ -13,15 +13,15 @@
} }
} }
.green { .green {
color:#28a745; color: var(--green);
} }
.red { .red {
color:var(--red); color: var(--red);
} }
.grey { .grey {
color:#6c757d; color: var(--grey);
} }
.mobile-bottomcol { .mobile-bottomcol {
@ -159,7 +159,7 @@ h2 {
} }
.grey-info-text { .grey-info-text {
color:#6c757d; color: var(--grey);
font-style: italic; font-style: italic;
font-size: 12px; font-size: 12px;
} }

2
frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
View file

@ -3,7 +3,7 @@
background: rgba(#11131f, 0.95); background: rgba(#11131f, 0.95);
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5); box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: #b1b1b1; color: var(--tooltip-grey);
padding: 10px 15px; padding: 10px 15px;
text-align: left; text-align: left;
pointer-events: none; pointer-events: none;

2
frontend/src/app/dashboard/dashboard.component.html
View file

@ -63,7 +63,7 @@
<a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]"> <a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.recent-rbf-replacements">Recent Replacements</h5> <h5 class="card-title d-inline" i18n="dashboard.recent-rbf-replacements">Recent Replacements</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<table class="table lastest-replacements-table"> <table class="table lastest-replacements-table">
<thead> <thead>

2
frontend/src/app/dashboard/dashboard.component.scss
View file

@ -12,7 +12,7 @@
} }
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 1rem; font-size: 1rem;
} }

2
frontend/src/app/docs/api-docs/api-docs-nav.component.scss
View file

@ -1,5 +1,5 @@
p { p {
color: #4a68b9; color: var(--title-fg);
font-weight: 700; font-weight: 700;
margin: 10px 0; margin: 10px 0;
margin: 15px 0 10px 0; margin: 15px 0 10px 0;

2
frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
View file

@ -1,5 +1,5 @@
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;

4
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
View file

@ -65,7 +65,7 @@
<a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/liquidity' | relativeUrl]"> <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/liquidity' | relativeUrl]">
<h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5> <h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<app-top-nodes-per-capacity [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-capacity> <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-capacity>
</div> </div>
@ -79,7 +79,7 @@
<a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]"> <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]">
<h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5> <h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<app-top-nodes-per-channels [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-channels> <app-top-nodes-per-channels [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-channels>
</div> </div>

4
frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
View file

@ -35,10 +35,10 @@
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
} }
.card-title > a { .card-title > a {
color: #4a68b9; color: var(--title-fg);
} }
.card-body.pool-ranking { .card-body.pool-ranking {

2
frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
View file

@ -142,7 +142,7 @@ export class NodeFeeChartComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
View file

@ -112,7 +112,7 @@ export class NodeStatisticsChartComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/lightning/node-statistics/node-statistics.component.scss
View file

@ -1,5 +1,5 @@
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;

2
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
View file

@ -296,7 +296,7 @@ export class NodesChannelsMap implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/lightning/nodes-channels/node-channels.component.ts
View file

@ -96,7 +96,7 @@ export class NodeChannels implements OnChanges {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
}, },
borderColor: '#000', borderColor: '#000',
formatter: (value): string => { formatter: (value): string => {

2
frontend/src/app/lightning/nodes-map/nodes-map.component.ts
View file

@ -196,7 +196,7 @@ export class NodesMap implements OnInit, OnChanges {
borderRadius: 0, borderRadius: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

2
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
View file

@ -93,7 +93,7 @@
} }
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
} }
.card-text { .card-text {
font-size: 18px; font-size: 18px;

2
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
View file

@ -255,7 +255,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

8
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
View file

@ -85,7 +85,7 @@ export class NodesPerCountryChartComponent implements OnInit {
name: country.name.en + (this.isMobile() ? `` : ` (${country.share}%)`), name: country.name.en + (this.isMobile() ? `` : ` (${country.share}%)`),
label: { label: {
overflow: 'truncate', overflow: 'truncate',
color: '#b1b1b1', color: 'var(--tooltip-grey)',
alignTo: 'edge', alignTo: 'edge',
edgeDistance: edgeDistance, edgeDistance: edgeDistance,
}, },
@ -95,7 +95,7 @@ export class NodesPerCountryChartComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
}, },
borderColor: '#000', borderColor: '#000',
formatter: () => { formatter: () => {
@ -119,7 +119,7 @@ export class NodesPerCountryChartComponent implements OnInit {
name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`, name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
label: { label: {
overflow: 'truncate', overflow: 'truncate',
color: '#b1b1b1', color: 'var(--tooltip-grey)',
alignTo: 'edge', alignTo: 'edge',
edgeDistance: edgeDistance edgeDistance: edgeDistance
}, },
@ -128,7 +128,7 @@ export class NodesPerCountryChartComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
}, },
borderColor: '#000', borderColor: '#000',
formatter: () => { formatter: () => {

2
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
View file

@ -89,7 +89,7 @@
} }
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

8
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
View file

@ -144,7 +144,7 @@ export class NodesPerISPChartComponent implements OnInit {
label: { label: {
overflow: 'truncate', overflow: 'truncate',
width: isMobile() ? 75 : this.widget ? 125 : 250, width: isMobile() ? 75 : this.widget ? 125 : 250,
color: '#b1b1b1', color: 'var(--tooltip-grey)',
alignTo: 'edge', alignTo: 'edge',
edgeDistance: edgeDistance, edgeDistance: edgeDistance,
}, },
@ -154,7 +154,7 @@ export class NodesPerISPChartComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
}, },
borderColor: '#000', borderColor: '#000',
formatter: () => { formatter: () => {
@ -178,7 +178,7 @@ export class NodesPerISPChartComponent implements OnInit {
name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`, name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
label: { label: {
overflow: 'truncate', overflow: 'truncate',
color: '#b1b1b1', color: 'var(--tooltip-grey)',
alignTo: 'edge', alignTo: 'edge',
edgeDistance: edgeDistance edgeDistance: edgeDistance
}, },
@ -187,7 +187,7 @@ export class NodesPerISPChartComponent implements OnInit {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
}, },
borderColor: '#000', borderColor: '#000',
formatter: () => { formatter: () => {

6
frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html
View file

@ -8,7 +8,7 @@
<h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5> <h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity> <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
</div> </div>
@ -22,7 +22,7 @@
<h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5> <h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels> <app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
</div> </div>
@ -36,7 +36,7 @@
<h5 class="card-title d-inline" i18n="lightning.top-channels-age">Oldest nodes</h5> <h5 class="card-title d-inline" i18n="lightning.top-channels-age">Oldest nodes</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<app-oldest-nodes [widget]="true"></app-oldest-nodes> <app-oldest-nodes [widget]="true"></app-oldest-nodes>
</div> </div>

4
frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
View file

@ -14,10 +14,10 @@
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
} }
.card-title > a { .card-title > a {
color: #4a68b9; color: var(--title-fg);
} }
.card-text { .card-text {

2
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
View file

@ -93,7 +93,7 @@
} }
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
} }
.card-text { .card-text {
font-size: 18px; font-size: 18px;

2
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
View file

@ -164,7 +164,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
borderRadius: 4, borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: { textStyle: {
color: '#b1b1b1', color: 'var(--tooltip-grey)',
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',

18
frontend/src/app/services/theme.service.ts
View file

@ -46,13 +46,17 @@ export class ThemeService {
this.mempoolFeeColors = contrastMempoolFeeColors; this.mempoolFeeColors = contrastMempoolFeeColors;
this.auditColors = contrastAuditColors; this.auditColors = contrastAuditColors;
} }
if (!this.style) { try {
this.style = document.createElement('link'); if (!this.style) {
this.style.rel = 'stylesheet'; this.style = document.createElement('link');
this.style.href = `theme-${theme}.css`; this.style.rel = 'stylesheet';
document.head.appendChild(this.style); this.style.href = `${theme}.css`;
} else { document.head.appendChild(this.style);
this.style.href = `theme-${theme}.css`; } else {
this.style.href = `${theme}.css`;
}
} catch (err) {
console.log('failed to apply theme stylesheet: ', err);
} }
} else { } else {
this.mempoolFeeColors = defaultMempoolFeeColors; this.mempoolFeeColors = defaultMempoolFeeColors;

2
frontend/src/index.liquid.html
View file

@ -33,7 +33,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-TileColor" content="#000000"> <meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-config" content="/resources/liquid/favicons/browserconfig.xml"> <meta name="msapplication-config" content="/resources/liquid/favicons/browserconfig.xml">
<meta name="theme-color" content="var(--bg)"> <meta name="theme-color" content="#1d1f31">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>

2
frontend/src/index.mempool.html
View file

@ -32,7 +32,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-TileColor" content="#000000"> <meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-config" content="/resources/favicons/browserconfig.xml"> <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
<meta name="theme-color" content="var(--bg)"> <meta name="theme-color" content="#1d1f31">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>

12
frontend/src/styles.scss
View file

@ -3,13 +3,13 @@ $bg: #1d1f31;
$active-bg: #11131f; $active-bg: #11131f;
$hover-bg: #12131e; $hover-bg: #12131e;
$fg: #fff; $fg: #fff;
$title-fg: #4a68b9;
$taproot: #eba814; $taproot: #eba814;
$taproot-light: #d5a90a; $taproot-light: #d5a90a;
$taproot-dark: #9d7c05; $taproot-dark: #9d7c05;
/* Bootstrap */ /* Bootstrap */
$body-bg: $bg; $body-bg: $bg;
$body-color: $fg; $body-color: $fg;
$gray-800: $bg; $gray-800: $bg;
@ -64,6 +64,8 @@ $dropdown-link-active-bg: $active-bg;
--active-bg: #{$active-bg}; --active-bg: #{$active-bg};
--hover-bg: #{$hover-bg}; --hover-bg: #{$hover-bg};
--fg: #{$fg}; --fg: #{$fg};
--color-fg: #ffffff;
--title-fg: #{$title-fg};
--primary: #{$primary}; --primary: #{$primary};
--secondary: #{$secondary}; --secondary: #{$secondary};
@ -93,6 +95,8 @@ $dropdown-link-active-bg: $active-bg;
--green: #3bcc49; --green: #3bcc49;
--red: #dc3545; --red: #dc3545;
--yellow: #ffd800; --yellow: #ffd800;
--grey: #6c757d;
--tooltip-grey: #b1b1b1;
} }
html, body { html, body {
@ -384,7 +388,7 @@ html:lang(ru) .card-title {
background: rgba($active-bg, 0.95); background: rgba($active-bg, 0.95);
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5); box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: #b1b1b1; color: var(--tooltip-grey);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -394,7 +398,7 @@ html:lang(ru) .card-title {
thead { thead {
th { th {
font-size: 9px; font-size: 9px;
color: #b1b1b1; color: var(--tooltip-grey);
text-align: right; text-align: right;
&:first-child { &:first-child {
text-align: left; text-align: left;
@ -485,7 +489,7 @@ html:lang(ru) .card-title {
thead { thead {
th { th {
font-size: 9px; font-size: 9px;
color: #b1b1b1; color: var(--tooltip-grey);
text-align: right; text-align: right;
&:first-child { &:first-child {
text-align: left; text-align: left;

296
frontend/src/theme-contrast.scss
View file

@ -1,8 +1,13 @@
/* Theme */ /* Theme */
$bg: #ff1f31; $bg: #11131f;
$active-bg: #ff131f; $active-bg: #000000;
$hover-bg: #ff131e; $hover-bg: #12131e;
$fg: #ff0; $fg: #fff;
$title-fg: #2055e3;
$taproot: #eba814;
$taproot-light: #d5a90a;
$taproot-dark: #9d7c05;
/* Bootstrap */ /* Bootstrap */
@ -13,11 +18,11 @@ $gray-700: $fg;
$nav-tabs-link-active-bg: $active-bg; $nav-tabs-link-active-bg: $active-bg;
$primary: #105fb0; $primary: #007cfa;
$secondary: #2d3348; $secondary: #272f4e;
$tertiary: #653b9c; $tertiary: #6225b2;
$success: #1a9436; $success: #0aab2f;
$info: #1bd8f4; $info: #10e0ff;
$h5-font-size: 1.15rem !default; $h5-font-size: 1.15rem !default;
@ -59,6 +64,8 @@ $dropdown-link-active-bg: $active-bg;
--active-bg: #{$active-bg}; --active-bg: #{$active-bg};
--hover-bg: #{$hover-bg}; --hover-bg: #{$hover-bg};
--fg: #{$fg}; --fg: #{$fg};
--color-fg: #fff;
--title-fg: #{$title-fg};
--primary: #{$primary}; --primary: #{$primary};
--secondary: #{$secondary}; --secondary: #{$secondary};
@ -66,5 +73,274 @@ $dropdown-link-active-bg: $active-bg;
--success: #{$success}; --success: #{$success};
--info: #{$info}; --info: #{$info};
--box-bg: var(--box-bg); --transparent-fg: #ffffffbb;
--box-bg: #171c2a;
--stat-box-bg: #0b1018;
--green: #83fd00;
}
body {
background-color: var(--active-bg);
}
.box {
background-color: var(--box-bg);
border: 1px solid rgba(0,0,0,.125);
box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
}
.navbar-nav.liquid > .active {
background-color: var(--liquid) !important;
}
.navbar-nav.testnet > .active {
background-color: var(--testnet) !important;
}
.navbar-nav.signet > .active {
background-color: var(--signet) !important;
}
.navbar-nav.liquidtestnet > .active {
background-color: var(--liquidtestnet) !important;
}
.form-control {
color: #495057;
}
.form-control:focus {
color: #000;
}
.form-control.form-control-secondary {
color: var(--fg);
background-color: var(--secondary);
border: 1px solid var(--secondary);
}
.form-control.form-control-secondary:focus {
color: var(--fg);
}
.skeleton-loader {
background: #2e324e no-repeat;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#5d6182,
rgba(255, 255, 255, 0)
);
}
.symbol {
color: var(--transparent-fg);
}
.progress-text {
span {
color: var(--fg) !important;
}
}
.block-size, .blocks-container {
span {
color: var(--fg) !important;
}
}
.title-block {
color: var(--fg);
border-top: 3px solid var(--fg);
}
.title-address, .title-asset {
color: var(--fg);
}
.close {
color: var(--fg);
}
.close:hover {
color: var(--fg);
}
.green-color {
color: var(--green);
}
.red-color {
color: var(--red);
}
.yellow-color {
color: var(--yellow);
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: var(--stat-box-bg);
}
.bordertop {
border-top: 1px solid #4c4c4c;
}
.tx-wrapper-tooltip-chart,
.fees-wrapper-tooltip-chart {
background: rgba($active-bg, 0.95);
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: var(--tooltip-grey);
thead {
th {
color: var(--tooltip-grey);
}
}
.title {
color: var(--fg);
}
.active {
color: yellow !important;
.value,
.total-partial {
color: yellow !important;
.symbol {
color: yellow !important;
}
}
}
.item {
.value {
.symbol {
color: #7e7e7e;
}
}
}
.total-label {
color: var(--fg);
}
thead {
th {
color: var(--tooltip-grey);
}
}
.total-percentage-bar {
span {
background: #282d47;
}
}
}
.fees-wrapper-tooltip-chart-advanced,
.tx-wrapper-tooltip-chart-advanced {
background: rgba($bg, 0.98);
thead {
.total-progress-percentage-bar,
.total-progress-sum-bar {
div {
background: #29324c94;
}
}
}
.total-percentage-bar-background {
background-color: #282d47;
}
}
hr {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.progress-mempool {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
}
.progress-mempool.testnet {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
}
.progress-mempool.signet {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%);
}
.progress-mempool.liquid {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
}
.progress-dark {
background-color: var(--stat-box-bg);
}
.progress-darklight {
background-color: var(--box-bg);
}
.progress-light {
background-color: #2e324e;
}
.progress.progress-health {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
}
.progress-bar.progress-bar-health {
background: var(--secondary);
}
.alert-mempool {
color: var(--fg);
background-color: var(--tertiary);
border-color: var(--alert-bg);
}
// ASM opcode colors
.constants { color: #ff8c00 }
.control { color: #87ceeb }
.stack { color: #ffa500 }
.splice { color: #46b5e2 }
.logic { color: #46b5e2 }
.arithmetic { color: #cae8d0 }
.crypto { color: #fa3d3d }
.locktime { color: #ff8c00 }
.reserved { color: #ff8c00 }
.tab-pane {
.card {
button {
color: var(--fg);
}
.collapsed {
background-color: var(--secondary);
color: var(--info);
}
}
}
.pagination-container {
background: var(--bg);
}
// Blinking block
@keyframes shadowyBackground {
0% {
box-shadow: -10px -15px 75px rgba($taproot, 1);
}
50% {
box-shadow: -10px -15px 75px rgba($taproot, .3);
}
100% {
box-shadow: -10px -15px 75px rgba($taproot, 1);
}
}
.blink-bg {
color: var(--fg);
background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
animation: shadowyBackground 1s infinite;
box-shadow: -10px -15px 75px rgba($taproot, 1);
transition: 100ms all ease-in;
} }