mirror of
https://github.com/mempool/mempool.git
synced 2025-02-23 22:46:54 +01:00
add high contrast theme
This commit is contained in:
Mononaut
natsoni
parent
1ca05a029a
commit
79dd263fb1
54 changed files with 446 additions and 149 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -40,45 +40,45 @@ export const defaultMempoolFeeColors = [
|
|||
];
|
||||
|
||||
export const contrastMempoolFeeColors = [
|
||||
'83fd00',
|
||||
'83f609',
|
||||
'83ef12',
|
||||
'83e71a',
|
||||
'83e023',
|
||||
'83d92c',
|
||||
'83d235',
|
||||
'83cb3e',
|
||||
'83c446',
|
||||
'83bc4f',
|
||||
'83b558',
|
||||
'83ae61',
|
||||
'83a76a',
|
||||
'83a072',
|
||||
'83997b',
|
||||
'839184',
|
||||
'838a8d',
|
||||
'838395',
|
||||
'837c9e',
|
||||
'8375a7',
|
||||
'836eb0',
|
||||
'8366b9',
|
||||
'835fc1',
|
||||
'8358ca',
|
||||
'8351d3',
|
||||
'834adc',
|
||||
'8343e5',
|
||||
'833bed',
|
||||
'8334f6',
|
||||
'832dff',
|
||||
'832dff',
|
||||
'832dff',
|
||||
'832dff',
|
||||
'832dff',
|
||||
'832dff',
|
||||
'832dff',
|
||||
'832dff',
|
||||
'832dff',
|
||||
];
|
||||
'0082e6',
|
||||
'0984df',
|
||||
'1285d9',
|
||||
'1a87d2',
|
||||
'2388cb',
|
||||
'2c8ac5',
|
||||
'358bbe',
|
||||
'3e8db7',
|
||||
'468eb0',
|
||||
'4f90aa',
|
||||
'5892a3',
|
||||
'61939c',
|
||||
'6a9596',
|
||||
'72968f',
|
||||
'7b9888',
|
||||
'849982',
|
||||
'8d9b7b',
|
||||
'959c74',
|
||||
'9e9e6e',
|
||||
'a79f67',
|
||||
'b0a160',
|
||||
'b9a35a',
|
||||
'c1a453',
|
||||
'caa64c',
|
||||
'd3a745',
|
||||
'dca93f',
|
||||
'e5aa38',
|
||||
'edac31',
|
||||
'f6ad2b',
|
||||
'ffaf24',
|
||||
'ffaf24',
|
||||
'ffaf24',
|
||||
'ffaf24',
|
||||
'ffaf24',
|
||||
'ffaf24',
|
||||
'ffaf24',
|
||||
'ffaf24',
|
||||
'ffaf24',
|
||||
];
|
||||
|
||||
export const chartColors = [
|
||||
"#D81B60",
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -175,9 +175,7 @@ h1 {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #1ad8f4;
|
||||
&:hover, &:focus {
|
||||
color: #09a3ba;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
}
|
||||
|
||||
.card-title {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.card-title {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 1rem;
|
||||
|
|
@ -79,6 +79,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
transition: background-color 1s;
|
||||
color: var(--color-fg);
|
||||
&.priority {
|
||||
@media (767px < width < 992px), (width < 576px) {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { Observable, combineLatest } from 'rxjs';
|
||||
import { Observable, combineLatest, Subscription } from 'rxjs';
|
||||
import { Recommendedfees } from '../../interfaces/websocket.interface';
|
||||
import { feeLevels } from '../../app.constants';
|
||||
import { map, startWith, tap } from 'rxjs/operators';
|
||||
|
|
@ -12,15 +12,18 @@ import { ThemeService } from 'src/app/services/theme.service';
|
|||
styleUrls: ['./fees-box.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class FeesBoxComponent implements OnInit {
|
||||
export class FeesBoxComponent implements OnInit, OnDestroy {
|
||||
isLoading$: Observable<boolean>;
|
||||
recommendedFees$: Observable<Recommendedfees>;
|
||||
themeSubscription: Subscription;
|
||||
gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
|
||||
noPriority = '#2e324e';
|
||||
fees: Recommendedfees;
|
||||
|
||||
constructor(
|
||||
private stateService: StateService,
|
||||
private themeService: ThemeService,
|
||||
private cd: ChangeDetectorRef,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
|
|
@ -33,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 = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
|
||||
|
||||
feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl);
|
||||
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
|
||||
const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
|
||||
|
||||
this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
|
||||
this.noPriority = startColor;
|
||||
this.fees = fees;
|
||||
this.setFeeGradient();
|
||||
}
|
||||
)
|
||||
);
|
||||
this.themeSubscription = this.themeService.themeChanged$.subscribe(() => {
|
||||
this.setFeeGradient();
|
||||
})
|
||||
}
|
||||
|
||||
setFeeGradient() {
|
||||
let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.minimumFee >= feeLvl);
|
||||
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
|
||||
const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
|
||||
|
||||
feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.fastestFee >= feeLvl);
|
||||
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
|
||||
const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
|
||||
|
||||
this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
|
||||
this.noPriority = startColor;
|
||||
|
||||
this.cd.markForCheck();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,16 +40,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.txPerSecond {
|
||||
color: #4a9ff4;
|
||||
}
|
||||
|
||||
.mempoolSize {
|
||||
color: #4a68b9;
|
||||
}
|
||||
|
||||
.unconfirmedTx {
|
||||
color: #f14d80;
|
||||
color: var(--title-fg);
|
||||
}
|
||||
|
||||
.info-block {
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
}
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
}
|
||||
.card-text {
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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> </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> </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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
}
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ export class PoolRankingComponent implements OnInit {
|
|||
name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
|
||||
label: {
|
||||
overflow: 'none',
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
alignTo: 'edge',
|
||||
edgeDistance: edgeDistance,
|
||||
},
|
||||
|
|
@ -156,7 +156,7 @@ export class PoolRankingComponent implements OnInit {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: () => {
|
||||
|
|
@ -184,7 +184,7 @@ export class PoolRankingComponent implements OnInit {
|
|||
name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
|
||||
label: {
|
||||
overflow: 'none',
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
alignTo: 'edge',
|
||||
edgeDistance: edgeDistance
|
||||
},
|
||||
|
|
@ -193,7 +193,7 @@ export class PoolRankingComponent implements OnInit {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: () => {
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@ div.scrollable {
|
|||
}
|
||||
|
||||
.data-title {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.card-title {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.card-title {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@
|
|||
}
|
||||
}
|
||||
.green {
|
||||
color:#28a745;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.red {
|
||||
color:var(--red);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.grey {
|
||||
color:#6c757d;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.mobile-bottomcol {
|
||||
|
|
@ -159,7 +159,7 @@ h2 {
|
|||
}
|
||||
|
||||
.grey-info-text {
|
||||
color:#6c757d;
|
||||
color: var(--grey);
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
|
||||
<h5 class="card-title d-inline" i18n="dashboard.recent-rbf-replacements">Recent Replacements</h5>
|
||||
<span> </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>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.card-title {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
p {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
font-weight: 700;
|
||||
margin: 10px 0;
|
||||
margin: 15px 0 10px 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.card-title {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
<a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/liquidity' | relativeUrl]">
|
||||
<h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
|
||||
<span> </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-top-nodes-per-capacity [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-capacity>
|
||||
</div>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
<a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]">
|
||||
<h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
|
||||
<span> </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-top-nodes-per-channels [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-channels>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,10 +35,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 {
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ export class NodeFeeChartComponent implements OnInit {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
align: 'left',
|
||||
},
|
||||
borderColor: '#000',
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ export class NodeStatisticsChartComponent implements OnInit {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
align: 'left',
|
||||
},
|
||||
borderColor: '#000',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.card-title {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
font-size: 10px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
|
|
@ -296,7 +296,7 @@ export class NodesChannelsMap implements OnInit {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
align: 'left',
|
||||
},
|
||||
borderColor: '#000',
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export class NodeChannels implements OnChanges {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: (value): string => {
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ export class NodesMap implements OnInit, OnChanges {
|
|||
borderRadius: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
align: 'left',
|
||||
},
|
||||
borderColor: '#000',
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
}
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
}
|
||||
.card-text {
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -255,7 +255,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
align: 'left',
|
||||
},
|
||||
borderColor: '#000',
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export class NodesPerCountryChartComponent implements OnInit {
|
|||
name: country.name.en + (this.isMobile() ? `` : ` (${country.share}%)`),
|
||||
label: {
|
||||
overflow: 'truncate',
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
alignTo: 'edge',
|
||||
edgeDistance: edgeDistance,
|
||||
},
|
||||
|
|
@ -95,7 +95,7 @@ export class NodesPerCountryChartComponent implements OnInit {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: () => {
|
||||
|
|
@ -119,7 +119,7 @@ export class NodesPerCountryChartComponent implements OnInit {
|
|||
name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
|
||||
label: {
|
||||
overflow: 'truncate',
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
alignTo: 'edge',
|
||||
edgeDistance: edgeDistance
|
||||
},
|
||||
|
|
@ -128,7 +128,7 @@ export class NodesPerCountryChartComponent implements OnInit {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: () => {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
}
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ export class NodesPerISPChartComponent implements OnInit {
|
|||
label: {
|
||||
overflow: 'truncate',
|
||||
width: isMobile() ? 75 : this.widget ? 125 : 250,
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
alignTo: 'edge',
|
||||
edgeDistance: edgeDistance,
|
||||
},
|
||||
|
|
@ -154,7 +154,7 @@ export class NodesPerISPChartComponent implements OnInit {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: () => {
|
||||
|
|
@ -178,7 +178,7 @@ export class NodesPerISPChartComponent implements OnInit {
|
|||
name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
|
||||
label: {
|
||||
overflow: 'truncate',
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
alignTo: 'edge',
|
||||
edgeDistance: edgeDistance
|
||||
},
|
||||
|
|
@ -187,7 +187,7 @@ export class NodesPerISPChartComponent implements OnInit {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
},
|
||||
borderColor: '#000',
|
||||
formatter: () => {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
|
||||
<span> </span>
|
||||
<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>
|
||||
<app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
|
||||
</div>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
|
||||
<span> </span>
|
||||
<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>
|
||||
<app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<h5 class="card-title d-inline" i18n="lightning.top-channels-age">Oldest nodes</h5>
|
||||
<span> </span>
|
||||
<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>
|
||||
<app-oldest-nodes [widget]="true"></app-oldest-nodes>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
}
|
||||
.card-title > a {
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
}
|
||||
|
||||
.card-text {
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
}
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
color: #4a68b9;
|
||||
color: var(--title-fg);
|
||||
}
|
||||
.card-text {
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
|
|||
borderRadius: 4,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textStyle: {
|
||||
color: '#b1b1b1',
|
||||
color: 'var(--tooltip-grey)',
|
||||
align: 'left',
|
||||
},
|
||||
borderColor: '#000',
|
||||
|
|
|
|||
|
|
@ -46,13 +46,17 @@ export class ThemeService {
|
|||
this.mempoolFeeColors = contrastMempoolFeeColors;
|
||||
this.auditColors = contrastAuditColors;
|
||||
}
|
||||
if (!this.style) {
|
||||
this.style = document.createElement('link');
|
||||
this.style.rel = 'stylesheet';
|
||||
this.style.href = `theme-${theme}.css`;
|
||||
document.head.appendChild(this.style);
|
||||
} else {
|
||||
this.style.href = `theme-${theme}.css`;
|
||||
try {
|
||||
if (!this.style) {
|
||||
this.style = document.createElement('link');
|
||||
this.style.rel = 'stylesheet';
|
||||
this.style.href = `${theme}.css`;
|
||||
document.head.appendChild(this.style);
|
||||
} else {
|
||||
this.style.href = `${theme}.css`;
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('failed to apply theme stylesheet: ', err);
|
||||
}
|
||||
} else {
|
||||
this.mempoolFeeColors = defaultMempoolFeeColors;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="msapplication-TileColor" content="#000000">
|
||||
<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">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="msapplication-TileColor" content="#000000">
|
||||
<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">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ $bg: #1d1f31;
|
|||
$active-bg: #11131f;
|
||||
$hover-bg: #12131e;
|
||||
$fg: #fff;
|
||||
$title-fg: #4a68b9;
|
||||
|
||||
$taproot: #eba814;
|
||||
$taproot-light: #d5a90a;
|
||||
$taproot-dark: #9d7c05;
|
||||
|
||||
/* Bootstrap */
|
||||
|
||||
$body-bg: $bg;
|
||||
$body-color: $fg;
|
||||
$gray-800: $bg;
|
||||
|
|
@ -64,6 +64,8 @@ $dropdown-link-active-bg: $active-bg;
|
|||
--active-bg: #{$active-bg};
|
||||
--hover-bg: #{$hover-bg};
|
||||
--fg: #{$fg};
|
||||
--color-fg: #ffffff;
|
||||
--title-fg: #{$title-fg};
|
||||
|
||||
--primary: #{$primary};
|
||||
--secondary: #{$secondary};
|
||||
|
|
@ -93,6 +95,8 @@ $dropdown-link-active-bg: $active-bg;
|
|||
--green: #3bcc49;
|
||||
--red: #dc3545;
|
||||
--yellow: #ffd800;
|
||||
--grey: #6c757d;
|
||||
--tooltip-grey: #b1b1b1;
|
||||
}
|
||||
|
||||
html, body {
|
||||
|
|
@ -384,7 +388,7 @@ html:lang(ru) .card-title {
|
|||
background: rgba($active-bg, 0.95);
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
|
||||
color: #b1b1b1;
|
||||
color: var(--tooltip-grey);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
|
@ -394,7 +398,7 @@ html:lang(ru) .card-title {
|
|||
thead {
|
||||
th {
|
||||
font-size: 9px;
|
||||
color: #b1b1b1;
|
||||
color: var(--tooltip-grey);
|
||||
text-align: right;
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
|
|
@ -485,7 +489,7 @@ html:lang(ru) .card-title {
|
|||
thead {
|
||||
th {
|
||||
font-size: 9px;
|
||||
color: #b1b1b1;
|
||||
color: var(--tooltip-grey);
|
||||
text-align: right;
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
/* Theme */
|
||||
$bg: #ff1f31;
|
||||
$active-bg: #ff131f;
|
||||
$hover-bg: #ff131e;
|
||||
$fg: #ff0;
|
||||
$bg: #11131f;
|
||||
$active-bg: #000000;
|
||||
$hover-bg: #12131e;
|
||||
$fg: #fff;
|
||||
$title-fg: #2055e3;
|
||||
|
||||
$taproot: #eba814;
|
||||
$taproot-light: #d5a90a;
|
||||
$taproot-dark: #9d7c05;
|
||||
|
||||
/* Bootstrap */
|
||||
|
||||
|
|
@ -13,11 +18,11 @@ $gray-700: $fg;
|
|||
|
||||
$nav-tabs-link-active-bg: $active-bg;
|
||||
|
||||
$primary: #105fb0;
|
||||
$secondary: #2d3348;
|
||||
$tertiary: #653b9c;
|
||||
$success: #1a9436;
|
||||
$info: #1bd8f4;
|
||||
$primary: #007cfa;
|
||||
$secondary: #272f4e;
|
||||
$tertiary: #6225b2;
|
||||
$success: #0aab2f;
|
||||
$info: #10e0ff;
|
||||
|
||||
$h5-font-size: 1.15rem !default;
|
||||
|
||||
|
|
@ -59,6 +64,8 @@ $dropdown-link-active-bg: $active-bg;
|
|||
--active-bg: #{$active-bg};
|
||||
--hover-bg: #{$hover-bg};
|
||||
--fg: #{$fg};
|
||||
--color-fg: #fff;
|
||||
--title-fg: #{$title-fg};
|
||||
|
||||
--primary: #{$primary};
|
||||
--secondary: #{$secondary};
|
||||
|
|
@ -66,5 +73,274 @@ $dropdown-link-active-bg: $active-bg;
|
|||
--success: #{$success};
|
||||
--info: #{$info};
|
||||
|
||||
--box-bg: var(--box-bg);
|
||||
--transparent-fg: #ffffffbb;
|
||||
|
||||
--box-bg: #171c2a;
|
||||
--stat-box-bg: #0b1018;
|
||||
--green: #83fd00;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--active-bg);
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: var(--box-bg);
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
|
||||
}
|
||||
|
||||
.navbar-nav.liquid > .active {
|
||||
background-color: var(--liquid) !important;
|
||||
}
|
||||
|
||||
.navbar-nav.testnet > .active {
|
||||
background-color: var(--testnet) !important;
|
||||
}
|
||||
|
||||
.navbar-nav.signet > .active {
|
||||
background-color: var(--signet) !important;
|
||||
}
|
||||
|
||||
.navbar-nav.liquidtestnet > .active {
|
||||
background-color: var(--liquidtestnet) !important;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: #495057;
|
||||
}
|
||||
.form-control:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.form-control.form-control-secondary {
|
||||
color: var(--fg);
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--secondary);
|
||||
}
|
||||
.form-control.form-control-secondary:focus {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.skeleton-loader {
|
||||
background: #2e324e no-repeat;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0),
|
||||
#5d6182,
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.symbol {
|
||||
color: var(--transparent-fg);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
span {
|
||||
color: var(--fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.block-size, .blocks-container {
|
||||
span {
|
||||
color: var(--fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.title-block {
|
||||
color: var(--fg);
|
||||
border-top: 3px solid var(--fg);
|
||||
}
|
||||
|
||||
.title-address, .title-asset {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.close {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.green-color {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.red-color {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.yellow-color {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: var(--stat-box-bg);
|
||||
}
|
||||
|
||||
.bordertop {
|
||||
border-top: 1px solid #4c4c4c;
|
||||
}
|
||||
|
||||
.tx-wrapper-tooltip-chart,
|
||||
.fees-wrapper-tooltip-chart {
|
||||
background: rgba($active-bg, 0.95);
|
||||
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
|
||||
color: var(--tooltip-grey);
|
||||
thead {
|
||||
th {
|
||||
color: var(--tooltip-grey);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: var(--fg);
|
||||
}
|
||||
.active {
|
||||
color: yellow !important;
|
||||
.value,
|
||||
.total-partial {
|
||||
color: yellow !important;
|
||||
.symbol {
|
||||
color: yellow !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
.value {
|
||||
.symbol {
|
||||
color: #7e7e7e;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-label {
|
||||
color: var(--fg);
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
color: var(--tooltip-grey);
|
||||
}
|
||||
}
|
||||
.total-percentage-bar {
|
||||
span {
|
||||
background: #282d47;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fees-wrapper-tooltip-chart-advanced,
|
||||
.tx-wrapper-tooltip-chart-advanced {
|
||||
background: rgba($bg, 0.98);
|
||||
thead {
|
||||
.total-progress-percentage-bar,
|
||||
.total-progress-sum-bar {
|
||||
div {
|
||||
background: #29324c94;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-percentage-bar-background {
|
||||
background-color: #282d47;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.progress-mempool {
|
||||
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
|
||||
}
|
||||
|
||||
.progress-mempool.testnet {
|
||||
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
|
||||
}
|
||||
|
||||
.progress-mempool.signet {
|
||||
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%);
|
||||
}
|
||||
|
||||
.progress-mempool.liquid {
|
||||
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
|
||||
}
|
||||
|
||||
.progress-dark {
|
||||
background-color: var(--stat-box-bg);
|
||||
}
|
||||
|
||||
.progress-darklight {
|
||||
background-color: var(--box-bg);
|
||||
}
|
||||
|
||||
.progress-light {
|
||||
background-color: #2e324e;
|
||||
}
|
||||
|
||||
.progress.progress-health {
|
||||
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
|
||||
}
|
||||
|
||||
.progress-bar.progress-bar-health {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.alert-mempool {
|
||||
color: var(--fg);
|
||||
background-color: var(--tertiary);
|
||||
border-color: var(--alert-bg);
|
||||
}
|
||||
|
||||
// ASM opcode colors
|
||||
|
||||
.constants { color: #ff8c00 }
|
||||
.control { color: #87ceeb }
|
||||
.stack { color: #ffa500 }
|
||||
.splice { color: #46b5e2 }
|
||||
.logic { color: #46b5e2 }
|
||||
.arithmetic { color: #cae8d0 }
|
||||
.crypto { color: #fa3d3d }
|
||||
.locktime { color: #ff8c00 }
|
||||
.reserved { color: #ff8c00 }
|
||||
|
||||
.tab-pane {
|
||||
.card {
|
||||
button {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
background-color: var(--secondary);
|
||||
color: var(--info);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pagination-container {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
|
||||
// Blinking block
|
||||
@keyframes shadowyBackground {
|
||||
0% {
|
||||
box-shadow: -10px -15px 75px rgba($taproot, 1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: -10px -15px 75px rgba($taproot, .3);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -10px -15px 75px rgba($taproot, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.blink-bg {
|
||||
color: var(--fg);
|
||||
background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
|
||||
animation: shadowyBackground 1s infinite;
|
||||
box-shadow: -10px -15px 75px rgba($taproot, 1);
|
||||
transition: 100ms all ease-in;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue