machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4916 from mempool/natsoni/high-contrast-theme

Browse Source 
High contrast theme (duplicate)
This commit is contained in:
softsimon 2024-04-09 14:33:09 +09:00 committed by GitHub
commit ff86e55622
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
145 changed files with 851 additions and 468 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": [
"src/styles.scss",
{
"input": "src/theme-contrast.scss",
"bundleName": "contrast",
"inject": false
},
"node_modules/@fortawesome/fontawesome-svg-core/styles.css"
],
"vendorChunk": true,

43
frontend/src/app/app.constants.ts
View File

@ -1,4 +1,4 @@
export const mempoolFeeColors = [
export const defaultMempoolFeeColors = [
'557d00',
'5d7d01',
'637d02',
@ -39,6 +39,47 @@ export const mempoolFeeColors = [
'ae005b',
];
export const contrastMempoolFeeColors = [
'0082e6',
'0984df',
'1285d9',
'1a87d2',
'2388cb',
'2c8ac5',
'358bbe',
'3e8db7',
'468eb0',
'4f90aa',
'5892a3',
'61939c',
'6a9596',
'72968f',
'7b9888',
'849982',
'8d9b7b',
'959c74',
'9e9e6e',
'a79f67',
'b0a160',
'b9a35a',
'c1a453',
'caa64c',
'd3a745',
'dca93f',
'e5aa38',
'edac31',
'f6ad2b',
'ffaf24',
'ffb01e',
'ffb118',
'ffb212',
'ffb30c',
'ffb406',
'ffb500',
'ffb600',
'ffb700',
];
export const chartColors = [
"#D81B60",
"#8E24AA",

2
frontend/src/app/app.module.ts
View File

@ -19,6 +19,7 @@ import { SharedModule } from './shared/shared.module';
import { StorageService } from './services/storage.service';
import { HttpCacheInterceptor } from './services/http-cache.interceptor';
import { LanguageService } from './services/language.service';
import { ThemeService } from './services/theme.service';
import { FiatShortenerPipe } from './shared/pipes/fiat-shortener.pipe';
import { FiatCurrencyPipe } from './shared/pipes/fiat-currency.pipe';
import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
@ -38,6 +39,7 @@ const providers = [
StorageService,
EnterpriseService,
LanguageService,
ThemeService,
ShortenStringPipe,
FiatShortenerPipe,
FiatCurrencyPipe,

2
frontend/src/app/components/about/about-sponsors.component.scss
View File

@ -14,7 +14,7 @@
}
.become-sponsor {
background-color: #1d1f31;
background-color: var(--bg);
border-radius: 16px;
padding: 12px 20px;
width: 400px;

4
frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
View File

@ -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 {

4
frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
View File

@ -216,10 +216,10 @@
<ng-container>
<tr class="group-first">
<td class="item">
<b style="background-color: #105fb0;" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
<b style="background-color: var(--primary);" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
</td>
<td class="amt">
<span style="background-color: #105fb0" class="p-1 pl-0">
<span style="background-color: var(--primary)" class="p-1 pl-0">
{{ maxCost | number }}
</span>
</td>

4
frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
View File

@ -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;
}

2
frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
View File

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

2
frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
View File

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

4
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
View File

@ -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;

4
frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
View File

@ -40,7 +40,7 @@
<a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
<h5 class="card-title d-inline">Mempool Goggles&trade; : <ng-container i18n="accelerator.accelerations">Accelerations</ng-container></h5>
<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>
<div class="mempool-block-wrapper" *ngIf="webGlEnabled">
<app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
@ -85,7 +85,7 @@
<a class="title-link" href="" [routerLink]="['/acceleration/list' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Recent Accelerations</h5>
<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>
<app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="minedAccelerations$"></app-accelerations-list>
</div>

6
frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
View File

@ -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 {

9
frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
View File

@ -8,13 +8,15 @@ 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, contrastMempoolFeeColors } from '../../../app.constants';
import { ServicesApiServices } from '../../../services/services-api.service';
import { detectWebGL } from '../../../shared/graphs.utils';
import { AudioService } from '../../../services/audio.service';
import { ThemeService } from '../../../services/theme.service';
const acceleratedColor: Color = hexToColor('8F5FF6');
const normalColors = mempoolFeeColors.map(hex => hexToColor(hex.slice(0,6) + '5F'));
const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
const contrastColors = contrastMempoolFeeColors.map(hex => hexToColor(hex.slice(0,6) + '5F'));
interface AccelerationBlock extends BlockExtended {
accelerationCount: number,
@ -37,6 +39,7 @@ export class AcceleratorDashboardComponent implements OnInit {
firstLoad = true;
graphHeight: number = 300;
theme: ThemeService;
constructor(
private seoService: SeoService,
@ -141,7 +144,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 this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
}
}

2
frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
View File

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

2
frontend/src/app/components/address/address-preview.component.scss
View File

@ -3,7 +3,7 @@
}
.qr-wrapper {
background-color: #FFF;
background-color: var(--fg);
padding: 10px;
padding-bottom: 5px;
display: inline-block;

2
frontend/src/app/components/address/address.component.scss
View File

@ -1,5 +1,5 @@
.qr-wrapper {
background-color: #FFF;
background-color: var(--fg);
padding: 10px;
padding-bottom: 5px;
display: inline-block;

2
frontend/src/app/components/amount/amount.component.scss
View File

@ -1,3 +1,3 @@
.green-color {
color: #3bcc49;
color: var(--green);
}

2
frontend/src/app/components/asset/asset.component.scss
View File

@ -1,5 +1,5 @@
.qr-wrapper {
background-color: #FFF;
background-color: var(--fg);
padding: 10px;
padding-bottom: 5px;
display: inline-block;

2
frontend/src/app/components/assets/asset-group/asset-group.component.scss
View File

@ -19,7 +19,7 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
width: 200px;
height: 200px;
align-items: center;

2
frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
View File

@ -7,7 +7,7 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
width: 200px;
height: 200px;
align-items: center;

2
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
View File

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

6
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,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
color: 'var(--tooltip-grey)',
align: 'left',
},
borderColor: '#000',
@ -309,7 +309,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@ -376,7 +376,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 40;
this.chartOptions.backgroundColor = '#11131f';
this.chartOptions.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,

6
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,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
color: 'var(--tooltip-grey)',
align: 'left',
},
borderColor: '#000',
@ -214,7 +214,7 @@ export class BlockFeesGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@ -305,7 +305,7 @@ export class BlockFeesGraphComponent implements OnInit {
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 40;
this.chartOptions.backgroundColor = '#11131f';
this.chartOptions.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,

16
frontend/src/app/components/block-filters/block-filters.component.scss
View File

@ -71,7 +71,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;
@ -80,15 +80,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);
}
}
}
@ -114,15 +114,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);
}
}
&.yellow {

6
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,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
color: 'var(--tooltip-grey)',
align: 'left',
},
borderColor: '#000',
@ -178,7 +178,7 @@ export class BlockHealthGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@ -290,7 +290,7 @@ export class BlockHealthGraphComponent implements OnInit {
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 40;
this.chartOptions.backgroundColor = '#11131f';
this.chartOptions.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,

2
frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
View File

@ -2,7 +2,7 @@
position: relative;
width: 100%;
padding-bottom: 100%;
background: #181b2d;
background: var(--stat-box-bg);
display: flex;
justify-content: center;
align-items: center;

45
frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
View File

@ -7,8 +7,9 @@ import TxView from './tx-view';
import { Color, Position } from './sprite-types';
import { Price } from '../../services/price.service';
import { StateService } from '../../services/state.service';
import { ThemeService } from '../../services/theme.service';
import { Subscription } from 'rxjs';
import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction } from './utils';
import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from './utils';
import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
import { detectWebGL } from '../../shared/graphs.utils';
@ -20,6 +21,13 @@ const unmatchedAuditColors = {
prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity),
accelerated: setOpacity(defaultAuditColors.accelerated, 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',
@ -53,6 +61,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
@ViewChild('blockCanvas')
canvas: ElementRef<HTMLCanvasElement>;
themeChangedSubscription: Subscription;
gl: WebGLRenderingContext;
animationFrameRequest: number;
@ -84,6 +93,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
readonly ngZone: NgZone,
readonly elRef: ElementRef,
public stateService: StateService,
private themeService: ThemeService,
) {
this.webGlEnabled = this.stateService.isBrowser && detectWebGL();
this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
@ -102,6 +112,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
if (this.gl) {
this.initCanvas();
this.resizeCanvas();
this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => {
this.scene.setColorFunction(this.getColorFunction());
});
}
}
}
@ -148,6 +161,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
if (this.canvas) {
this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
this.themeChangedSubscription?.unsubscribe();
}
}
@ -293,7 +307,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
this.start();
} else {
this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution,
blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray,
blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, theme: this.themeService,
highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset,
colorFunction: this.getColorFunction() });
this.start();
@ -563,14 +577,27 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
return (tx: TxView) => {
if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
if (this.themeService.theme !== 'contrast') {
return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
} else {
return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
}
} else {
return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
tx,
defaultColors.unmatchedfee,
unmatchedAuditColors,
this.relativeTime || (Date.now() / 1000)
);
if (this.themeService.theme !== 'contrast') {
return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
tx,
defaultColors.unmatchedfee,
unmatchedAuditColors,
this.relativeTime || (Date.now() / 1000)
);
} else {
return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : contrastColorFunction(
tx,
contrastColors.unmatchedfee,
unmatchedContrastAuditColors,
this.relativeTime || (Date.now() / 1000)
);
}
}
};
}

19
frontend/src/app/components/block-overview-graph/block-scene.ts
View File

@ -2,13 +2,15 @@ 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 '../../services/theme.service';
export default class BlockScene {
scene: { count: number, offset: { x: number, y: number}};
vertexArray: FastVertexArray;
txs: { [key: string]: TxView };
getColor: ((tx: TxView) => Color) = defaultColorFunction;
theme: ThemeService;
orientation: string;
flip: boolean;
animationDuration: number = 900;
@ -29,11 +31,11 @@ export default class BlockScene {
animateUntil = 0;
dirty: boolean;
constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction }:
constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
{ width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
) {
this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction });
this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction });
}
resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void {
@ -67,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.updateAllColors();
}
@ -233,9 +235,9 @@ export default class BlockScene {
this.animateUntil = Math.max(this.animateUntil, tx.setHighlight(value));
}
private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction }:
private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
{ width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
): void {
this.animationDuration = animationDuration || 1000;
this.configAnimationOffset = animationOffset;
@ -244,7 +246,8 @@ 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 = {
count: 0,

58
frontend/src/app/components/block-overview-graph/utils.ts
View File

@ -1,4 +1,4 @@
import { feeLevels, mempoolFeeColors } from '../../app.constants';
import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../app.constants';
import { Color } from './sprite-types';
import TxView from './tx-view';
@ -47,7 +47,7 @@ interface ColorPalette {
// precomputed colors
const defaultColors: { [key: string]: ColorPalette } = {
fee: {
base: mempoolFeeColors.map(hexToColor),
base: defaultMempoolFeeColors.map(hexToColor),
audit: [],
marginal: [],
baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
@ -72,7 +72,37 @@ 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'),
};
const contrastColors: { [key: string]: ColorPalette } = {
fee: {
base: contrastMempoolFeeColors.map(hexToColor),
audit: [],
marginal: [],
baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
},
}
for (const key in contrastColors) {
const base = contrastColors[key].base;
contrastColors[key].audit = base.map((color) => darken(desaturate(color, 0.3), 0.9));
contrastColors[key].marginal = base.map((color) => darken(desaturate(color, 0.8), 1.1));
contrastColors['unmatched' + key] = {
base: contrastColors[key].base.map(c => setOpacity(c, 0.2)),
audit: contrastColors[key].audit.map(c => setOpacity(c, 0.2)),
marginal: contrastColors[key].marginal.map(c => setOpacity(c, 0.2)),
baseLevel: contrastColors[key].baseLevel,
};
}
export { contrastColors as contrastColors };
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(
@ -83,7 +113,7 @@ export function defaultColorFunction(
): Color {
const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
const levelIndex = colors.baseLevel(tx, rate, relativeTime || (Date.now() / 1000));
const levelColor = colors.base[levelIndex] || colors.base[mempoolFeeColors.length - 1];
const levelColor = colors.base[levelIndex] || colors.base[defaultMempoolFeeColors.length - 1];
// Normal mode
if (!tx.scene?.highlightingEnabled) {
if (tx.acc) {
@ -100,7 +130,7 @@ export function defaultColorFunction(
case 'missing':
case 'sigop':
case 'rbf':
return colors.marginal[levelIndex] || colors.marginal[mempoolFeeColors.length - 1];
return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1];
case 'fresh':
case 'freshcpfp':
return auditColors.missing;
@ -109,12 +139,12 @@ export function defaultColorFunction(
case 'prioritized':
return auditColors.prioritized;
case 'selected':
return colors.marginal[levelIndex] || colors.marginal[mempoolFeeColors.length - 1];
return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1];
case 'accelerated':
return auditColors.accelerated;
case 'found':
if (tx.context === 'projected') {
return colors.audit[levelIndex] || colors.audit[mempoolFeeColors.length - 1];
return colors.audit[levelIndex] || colors.audit[defaultMempoolFeeColors.length - 1];
} else {
return levelColor;
}
@ -127,17 +157,27 @@ export function defaultColorFunction(
}
}
export function contrastColorFunction(
tx: TxView,
colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = contrastColors.fee,
auditColors: { [status: string]: Color } = contrastAuditColors,
relativeTime?: number,
): Color {
return defaultColorFunction(tx, colors, auditColors, relativeTime);
}
export function ageColorFunction(
tx: TxView,
colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = defaultColors.fee,
auditColors: { [status: string]: Color } = defaultAuditColors,
relativeTime?: number,
theme?: string,
): Color {
if (tx.acc || tx.status === 'accelerated') {
return auditColors.accelerated;
}
const color = defaultColorFunction(tx, colors, auditColors, relativeTime);
const color = theme !== 'contrast' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime);
const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
return {
@ -146,4 +186,4 @@ export function ageColorFunction(
b: color.b,
a: color.a * (1 - ageLevel)
};
}
}

16
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
View File

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

6
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,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
color: 'var(--tooltip-grey)',
align: 'left',
},
borderColor: '#000',
@ -219,7 +219,7 @@ export class BlockRewardsGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@ -315,7 +315,7 @@ export class BlockRewardsGraphComponent implements OnInit {
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 40;
this.chartOptions.backgroundColor = '#11131f';
this.chartOptions.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,

8
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,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
color: 'var(--tooltip-grey)',
align: 'left',
},
borderColor: '#000',
@ -230,7 +230,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@ -252,7 +252,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
symbol: 'none',
lineStyle: {
type: 'solid',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 1,
width: 1,
},
@ -342,7 +342,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
const now = new Date();
// @ts-ignore
this.chartOptions.grid.bottom = 40;
this.chartOptions.backgroundColor = '#11131f';
this.chartOptions.backgroundColor = 'var(--active-bg)';
this.chartInstance.setOption(this.chartOptions);
download(this.chartInstance.getDataURL({
pixelRatio: 2,

6
frontend/src/app/components/block/block.component.scss
View File

@ -22,7 +22,7 @@
}
.qr-wrapper {
background-color: #FFF;
background-color: var(--fg);
padding: 10px;
padding-bottom: 5px;
display: inline-block;
@ -175,9 +175,7 @@ h1 {
}
a {
color: #1ad8f4;
&:hover, &:focus {
color: #09a3ba;
display: inline-block;
}
}
@ -254,7 +252,7 @@ h1 {
cursor: pointer;
&.active {
background: #24273e;
background: var(--box-bg);
}
&.active, &:hover {

4
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@ -117,7 +117,7 @@
}
.black-background {
background-color: #11131f;
background-color: var(--active-bg);
z-index: 100;
position: relative;
}
@ -144,7 +144,7 @@
}
.loading .bitcoin-block.mined-block {
background: #2d3348;
background: var(--secondary);
}
@keyframes opacityPulse {

14
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@ -63,11 +63,11 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
blockPadding: number = 30;
gradientColors = {
'': ['#9339f4', '#105fb0'],
liquid: ['#116761', '#183550'],
'liquidtestnet': ['#494a4a', '#272e46'],
testnet: ['#1d486f', '#183550'],
signet: ['#6f1d5d', '#471850'],
'': ['var(--mainnet-alt)', 'var(--primary)'],
liquid: ['var(--liquid)', 'var(--testnet-alt)'],
'liquidtestnet': ['var(--liquidtestnet)', 'var(--liquidtestnet-alt)'],
testnet: ['var(--testnet)', 'var(--testnet-alt)'],
signet: ['var(--signet)', 'var(--signet-alt)'],
};
constructor(
@ -330,7 +330,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
left: addLeft + this.blockOffset * index + 'px',
background: `repeating-linear-gradient(
#2d3348,
#2d3348 ${greenBackgroundHeight}%,
var(--secondary) ${greenBackgroundHeight}%,
${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
${this.gradientColors[this.network][1]} 100%
)`,
@ -366,7 +366,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
return {
left: addLeft + this.blockOffset * this.emptyBlocks.indexOf(block) + 'px',
background: "#2d3348",
background: "var(--secondary)",
};
}

2
frontend/src/app/components/blockchain/blockchain.component.scss
View File

@ -30,7 +30,7 @@
}
.black-background {
background-color: #11131f;
background-color: var(--active-bg);
z-index: 100;
position: relative;
}

4
frontend/src/app/components/blocks-list/blocks-list.component.scss
View File

@ -46,7 +46,7 @@ tr, td, th {
}
.progress {
background-color: #2d3348;
background-color: var(--secondary);
}
.pool {
@ -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;

6
frontend/src/app/components/clock-face/clock-face.component.scss
View File

@ -14,7 +14,7 @@
height: 100%;
.face {
fill: #11131f;
fill: var(--active-bg);
}
}
@ -29,8 +29,8 @@
}
&.hour {
fill: #105fb0;
stroke: #105fb0;
fill: var(--primary);
stroke: var(--primary);
stroke-width: 6px;
}
}

2
frontend/src/app/components/clock/clock.component.scss
View File

@ -161,7 +161,7 @@
}
.side.bottom {
background: #105fb0;
background: var(--primary);
transform: rotateX(-90deg);
margin-top: var(--half-side);
}

2
frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
View File

@ -40,7 +40,7 @@
<h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
<div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
<div class="progress small-bar">
<div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
<div class="progress-bar" role="progressbar" style="width: 15%; background-color: var(--primary)" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
</div>
</div>
<div class="item" *ngIf="showHalving">

6
frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
View File

@ -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;
}

18
frontend/src/app/components/difficulty/difficulty.component.scss
View File

@ -10,7 +10,7 @@
justify-content: space-around;
height: 50.5px;
.shared-block {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
.item {
@ -91,19 +91,19 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
height: 100%;
}
.card-title {
color: #4a68b9;
color: var(--title-fg);
font-size: 1rem;
}
.progress {
display: inline-flex;
width: 100%;
background-color: #2d3348;
background-color: var(--secondary);
height: 1.1rem;
max-width: 180px;
}
@ -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 {

14
frontend/src/app/components/difficulty/difficulty.component.ts
View File

@ -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);

2
frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
View File

@ -128,7 +128,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},

5
frontend/src/app/components/fees-box/fees-box.component.scss
View File

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

49
frontend/src/app/components/fees-box/fees-box.component.ts
View File

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

14
frontend/src/app/components/footer/footer.component.scss
View File

@ -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;
@ -40,16 +40,8 @@
}
}
.txPerSecond {
color: #4a9ff4;
}
.mempoolSize {
color: #4a68b9;
}
.unconfirmedTx {
color: #f14d80;
color: var(--title-fg);
}
.info-block {
@ -61,7 +53,7 @@
.progress {
display: inline-flex;
width: 160px;
background-color: #2d3348;
background-color: var(--secondary);
height: 1.1rem;
}

4
frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
View File

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

6
frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
View File

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

4
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,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
color: 'var(--tooltip-grey)',
align: 'left',
},
borderColor: '#000',
@ -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,

4
frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
View File

@ -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,

14
frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
View File

@ -7,7 +7,7 @@
}
li.nav-item.active {
background-color: #653b9c;
background-color: var(--tertiary);
}
fa-icon {
@ -47,7 +47,7 @@ li.nav-item {
}
.navbar-nav {
background: #212121;
background: var(--navbar-bg);
bottom: 0;
box-shadow: 0px 0px 15px 0px #000;
flex-direction: row;
@ -112,23 +112,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 {

2
frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
View File

@ -9,7 +9,7 @@
<div class="item">
<a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]" [fragment]="'expired'">
<h5 class="card-title"><ng-container i18n="liquid.total-expired">Total Expired</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
<h5 class="card-title"><ng-container i18n="liquid.total-expired">Total Expired</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a>
<div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text">
<div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos" ngbTooltip="Total amount of BTC held in Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} <span style="color: #b86d12;">BTC</span></div>

2
frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
View File

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

2
frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
View File

@ -33,7 +33,7 @@ tr, td, th {
}
.progress {
background-color: #2d3348;
background-color: var(--secondary);
}
.address {

4
frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
View File

@ -2,7 +2,7 @@
<div class="fee-estimation-container">
<div class="item">
<a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
<h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a>
<div class="card-text">
<div class="fee-text">{{ federationWalletStats.address_count }} <span i18n="shared.addresses">addresses</span></div>
@ -16,7 +16,7 @@
<div class="fee-estimation-container loading-container">
<div class="item">
<a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
<h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a>
<div class="card-text">
<div class="skeleton-loader"></div>

2
frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
View File

@ -15,7 +15,7 @@
.card-title {
margin: 0;
color: #4a68b9;
color: var(--title-fg);
font-size: 10px;
font-size: 1rem;
white-space: nowrap;

2
frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
View File

@ -24,7 +24,7 @@ tr, td, th {
}
.progress {
background-color: #2d3348;
background-color: var(--secondary);
}
.txid {

2
frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
View File

@ -27,7 +27,7 @@ tr, td, th {
}
.progress {
background-color: #2d3348;
background-color: var(--secondary);
}
.transaction {

4
frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
View File

@ -2,7 +2,7 @@
<div class="fee-estimation-container">
<div class="item">
<a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
<h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a>
</div>
</div>
@ -26,7 +26,7 @@
<div class="fee-estimation-container loading-container">
<div class="item">
<a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
<h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a>
</div>
</div>

2
frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
View File

@ -15,7 +15,7 @@
.card-title {
margin: 0;
color: #4a68b9;
color: var(--title-fg);
font-size: 10px;
font-size: 1rem;
white-space: nowrap;

2
frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
View File

@ -23,7 +23,7 @@
<div class="item">
<!-- <a class="title-link" [routerLink]="['/audit/emergency-spends' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.forfeited-utxos">Forfeited UTXOs</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
<h5 class="card-title"><ng-container i18n="liquid.forfeited-utxos">Forfeited UTXOs</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a> -->
<h5 class="card-title" i18n="liquid.emergency-keys">Emergency Keys</h5>
<div *ngIf="(emergencyUtxosStats$ | async) as emergencyUtxosStats; else loadingData" class="card-text">

2
frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
View File

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

2
frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
View File

@ -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,
},

2
frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
View File

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

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

@ -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;
}

14
frontend/src/app/components/master-page/master-page.component.scss
View File

@ -7,7 +7,7 @@
}
li.nav-item.active {
background-color: #653b9c;
background-color: var(--tertiary);
}
fa-icon {
@ -58,7 +58,7 @@ li.nav-item {
}
.navbar-nav {
background: #212121;
background: var(--navbar-bg);
bottom: 0;
box-shadow: 0px 0px 15px 0px #000;
flex-direction: row;
@ -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 {

2
frontend/src/app/components/mempool-block/mempool-block.component.scss
View File

@ -1,5 +1,5 @@
.progress {
background-color: #2d3348;
background-color: var(--secondary);
position: relative;
top: 5px;
}

2
frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
View File

@ -106,7 +106,7 @@
}
.black-background {
background-color: #11131f;
background-color: var(--active-bg);
z-index: 100;
position: relative;
}

6
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -4,12 +4,13 @@ import { MempoolBlock } from '../../interfaces/websocket.interface';
import { StateService } from '../../services/state.service';
import { Router } from '@angular/router';
import { map, switchMap, tap } from 'rxjs/operators';
import { feeLevels, mempoolFeeColors } from '../../app.constants';
import { feeLevels } from '../../app.constants';
import { specialBlocks } from '../../app.constants';
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
import { Location } from '@angular/common';
import { DifficultyAdjustment, MempoolPosition } from '../../interfaces/node-api.interface';
import { animate, style, transition, trigger } from '@angular/animations';
import { ThemeService } from '../../services/theme.service';
@Component({
selector: 'app-mempool-blocks',
@ -84,6 +85,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
constructor(
private router: Router,
public stateService: StateService,
private themeService: ThemeService,
private cd: ChangeDetectorRef,
private relativeUrlPipe: RelativeUrlPipe,
private location: Location,
@ -354,7 +356,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
trimmedFeeRange.forEach((fee: number) => {
let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fee >= feeLvl);
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
gradientColors.push(mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
gradientColors.push(this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
});
gradientColors.forEach((color, i, gc) => {

4
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@ -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,

10
frontend/src/app/components/menu/menu.component.scss
View File

@ -34,7 +34,7 @@
.sidenav.open {
display: block;
background-color: #1d1f31;
background-color: var(--bg);
}
:host-context(.ltr-layout) .sidenav.open {
@ -56,7 +56,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;
@ -75,7 +75,7 @@
}
.badge-og {
background-color: #4a68b9;
background-color: var(--title-fg);
}
.badge-pleb {
@ -87,7 +87,7 @@
}
.badge-whale {
background-color: #653b9c;
background-color: var(--tertiary);
}
.badge-silver {
@ -99,5 +99,5 @@
}
.badge-platinum {
background-color: #653b9c;
background-color: var(--tertiary);
}

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]">
<h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
<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>
<app-blocks-list [attr.data-cy]="'latest-blocks'" [widget]=true></app-blocks-list>
</div>
@ -69,7 +69,7 @@
<a class="title-link" href="" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.adjustments">Adjustments</h5>
<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>
<app-difficulty-adjustments-table [attr.data-cy]="'difficulty-adjustments-table'"></app-difficulty-adjustments-table>
</div>

6
frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
View File

@ -7,7 +7,7 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
}
.graph-card {
@ -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 {

4
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

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

10
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}%)`),
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: () => {
@ -186,7 +186,7 @@ export class PoolRankingComponent implements OnInit {
name: $localize`Other (${percentage})`,
label: {
overflow: 'none',
color: '#b1b1b1',
color: 'var(--tooltip-grey)',
alignTo: 'edge',
edgeDistance: edgeDistance
},
@ -195,7 +195,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: () => {
@ -306,7 +306,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,

6
frontend/src/app/components/pool/pool-preview.component.scss
View File

@ -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;

4
frontend/src/app/components/pool/pool.component.scss
View File

@ -88,7 +88,7 @@ div.scrollable {
}
.progress {
background-color: #2d3348;
background-color: var(--secondary);
}
.coinbase {
@ -190,7 +190,7 @@ div.scrollable {
}
.data-title {
color: #4a68b9;
color: var(--title-fg);
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,
shadowColor: 'rgba(0, 0, 0, 0.5)',
textStyle: {
color: '#b1b1b1',
color: 'var(--tooltip-grey)',
align: 'left',
},
borderColor: '#000',

2
frontend/src/app/components/rbf-list/rbf-list.component.scss
View File

@ -25,7 +25,7 @@
}
.timeline-wrapper.mined {
border: solid 4px #1a9436;
border: solid 4px var(--success);
}
.no-replacements {

26
frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
View File

@ -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;
}
}
@ -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);
}
}
}

4
frontend/src/app/components/reward-stats/reward-stats.component.scss
View File

@ -1,5 +1,5 @@
.card-title {
color: #4a68b9;
color: var(--title-fg);
font-size: 10px;
margin-bottom: 4px;
font-size: 1rem;
@ -50,7 +50,7 @@
margin-bottom: 0;
}
.card-text span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}

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

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

2
frontend/src/app/components/start/start.component.scss
View File

@ -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;

2
frontend/src/app/components/statistics/statistics.component.scss
View File

@ -117,7 +117,7 @@
}
.inactive {
.square {
background-color: #ffffff66 !important;
background-color: var(--transparent-fg) !important;
}
.fee-text {
text-decoration: line-through;

6
frontend/src/app/components/theme-selector/theme-selector.component.html Normal file
View File

@ -0,0 +1,6 @@
<div [formGroup]="themeForm" class="text-small text-center">
<select formControlName="theme" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 150px;" (change)="changeTheme()">
<option value="default" i18n="theme.mempool-theme">Mempool Theme</option>
<option value="contrast" i18n="theme.high-contrast">High Contrast</option>
</select>
</div>

0
frontend/src/app/components/theme-selector/theme-selector.component.scss Normal file
View File

31
frontend/src/app/components/theme-selector/theme-selector.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { ThemeService } from '../../services/theme.service';
@Component({
selector: 'app-theme-selector',
templateUrl: './theme-selector.component.html',
styleUrls: ['./theme-selector.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ThemeSelectorComponent implements OnInit {
themeForm: UntypedFormGroup;
themes = ['default', 'contrast'];
constructor(
private formBuilder: UntypedFormBuilder,
private themeService: ThemeService,
) { }
ngOnInit() {
this.themeForm = this.formBuilder.group({
theme: ['default']
});
this.themeForm.get('theme')?.setValue(this.themeService.theme);
}
changeTheme() {
const newTheme = this.themeForm.get('theme')?.value;
this.themeService.apply(newTheme);
}
}

6
frontend/src/app/components/transaction/transaction-preview.component.scss
View File

@ -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;
@ -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;

14
frontend/src/app/components/transaction/transaction.component.scss
View File

@ -61,7 +61,7 @@
}
.badge.badge-accelerated {
background-color: #653b9c;
background-color: var(--tertiary);
color: white;
}
@ -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;
}
@ -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;
}

14
frontend/src/app/components/transactions-list/transactions-list.component.scss
View File

@ -13,15 +13,15 @@
}
}
.green {
color:#28a745;
color: var(--green);
}
.red {
color:#dc3545;
color: var(--red);
}
.grey {
color:#6c757d;
color: var(--grey);
}
.mobile-bottomcol {
@ -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 {
@ -159,7 +159,7 @@ h2 {
}
.grey-info-text {
color:#6c757d;
color: var(--grey);
font-style: italic;
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);
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;

4
frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
View File

@ -77,12 +77,12 @@
<linearGradient id="input-highlight-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" [attr.stop-color]="gradient[0]" />
<stop offset="2%" [attr.stop-color]="gradient[0]" />
<stop offset="30%" stop-color="#1bd8f4" />
<stop offset="30%" stop-color="var(--info)" />
<stop offset="100%" [attr.stop-color]="gradient[1]" />
</linearGradient>
<linearGradient id="output-highlight-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" [attr.stop-color]="gradient[1]" />
<stop offset="70%" stop-color="#1bd8f4" />
<stop offset="70%" stop-color="var(--info)" />
<stop offset="98%" [attr.stop-color]="gradient[0]" />
<stop offset="100%" [attr.stop-color]="gradient[0]" />
</linearGradient>

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

@ -30,7 +30,7 @@
stroke: url(#output-highlight-gradient);
}
&.zerovalue {
stroke: #1bd8f4;
stroke: var(--info);
}
}
}

6
frontend/src/app/dashboard/dashboard.component.html
View File

@ -20,7 +20,7 @@
<a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
<h5 class="card-title d-inline"><span>Mempool Goggles&trade;</span> : {{ goggleCycle[goggleIndex].name }}</h5>
<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>
<div class="quick-filter">
<div class="btn-group btn-group-toggle">
@ -64,7 +64,7 @@
<a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.recent-rbf-replacements">Recent Replacements</h5>
<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>
<table class="table lastest-replacements-table">
<thead>
@ -98,7 +98,7 @@
<a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
<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>
<table class="table lastest-blocks-table">
<thead>

14
frontend/src/app/dashboard/dashboard.component.scss
View File

@ -7,12 +7,12 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
height: 100%;
}
.card-title {
color: #4a68b9;
color: var(--title-fg);
font-size: 1rem;
}
@ -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 {
@ -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;

8
frontend/src/app/docs/api-docs/api-docs-nav.component.scss
View File

@ -1,12 +1,12 @@
p {
color: #4a68b9;
color: var(--title-fg);
font-weight: 700;
margin: 10px 0;
margin: 15px 0 10px 0;
}
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;
}

40
frontend/src/app/docs/api-docs/api-docs.component.scss
View File

@ -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;
@ -211,8 +211,8 @@ h3 {
}
.endpoint-container .section-header span {
color: #fff;
background-color: #653b9c;
color: var(--fg);
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;
color: #fff;
border-color: #105fb0;
background-color: var(--primary);
color: var(--fg);
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;
}
@ -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;
}

8
frontend/src/app/docs/code-template/code-template.component.scss
View File

@ -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;

2
frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
View File

@ -13,7 +13,7 @@
}
.shared-block {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}

Some files were not shown because too many files have changed in this diff Show More