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

convert to CSS variables

Browse Source
This commit is contained in:
Mononaut
2023-01-02 12:21:52 -06:00
parent 26a92cda45
commit f9f8bd25f8
91 changed files with 290 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,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 { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
@@ -30,6 +31,7 @@ const providers = [
StorageService,
EnterpriseService,
LanguageService,
ThemeService,
ShortenStringPipe,
FiatShortenerPipe,
CapAddressPipe,

6
frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss
View File

@@ -61,13 +61,13 @@
}
.big-fiat {
color: #3bcc49;
color: var(--green);
font-size: 26px;
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
height: 100%;
}
@@ -85,7 +85,7 @@
.progress {
display: inline-flex;
width: 100%;
background-color: #2d3348;
background-color: var(--secondary);
height: 1.1rem;
}

2
frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss
View File

@@ -3,7 +3,7 @@
width: 150px;
}
.mobile-even tr:nth-of-type(even) {
background-color: #181b2d;
background-color: var(--stat-box-bg);
}
.mobile-even tr:nth-of-type(odd) {
background-color: inherit;

2
frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss
View File

@@ -16,7 +16,7 @@
}
.red {
color:#dc3545;
color:var(--red);
}
.grey {

2
frontend/src/app/bisq/bsq-amount/bsq-amount.component.scss
View File

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

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/app/app.component.ts
View File

@@ -4,6 +4,7 @@ import { Router, NavigationEnd } from '@angular/router';
import { StateService } from '../../services/state.service';
import { OpenGraphService } from '../../services/opengraph.service';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
import { ThemeService } from 'src/app/services/theme.service';
@Component({
selector: 'app-root',
@@ -19,6 +20,7 @@ export class AppComponent implements OnInit {
private stateService: StateService,
private openGraphService: OpenGraphService,
private location: Location,
private theme: ThemeService,
tooltipConfig: NgbTooltipConfig,
@Inject(LOCALE_ID) private locale: string,
) {

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;

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

@@ -1,5 +1,5 @@
li.nav-item.active {
background-color: #653b9c;
background-color: var(--tertiary);
}
fa-icon {
@@ -95,23 +95,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 {

4
frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
View File

@@ -238,7 +238,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -305,7 +305,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,

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

@@ -205,7 +205,7 @@ export class BlockFeesGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -296,7 +296,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,

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;

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

@@ -177,7 +177,7 @@ export class BlockPredictionGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -289,7 +289,7 @@ export class BlockPredictionGraphComponent 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,

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

@@ -211,7 +211,7 @@ export class BlockRewardsGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -307,7 +307,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,

6
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
View File

@@ -214,7 +214,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -236,7 +236,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
symbol: 'none',
lineStyle: {
type: 'solid',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 1,
width: 1,
},
@@ -314,7 +314,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,

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

@@ -196,7 +196,7 @@ h1 {
cursor: pointer;
&.active {
background: #24273e;
background: var(--box-bg);
}
&.active, &:hover {

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

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

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

@@ -37,12 +37,12 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
timeLtr: boolean;
gradientColors = {
'': ['#9339f4', '#105fb0'],
bisq: ['#9339f4', '#105fb0'],
liquid: ['#116761', '#183550'],
'liquidtestnet': ['#494a4a', '#272e46'],
testnet: ['#1d486f', '#183550'],
signet: ['#6f1d5d', '#471850'],
'': ['var(--mainnet-alt)', 'var(--primary)'],
bisq: ['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(
@@ -181,7 +181,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
left: addLeft + 155 * this.blocks.indexOf(block) + '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%
)`,
@@ -198,7 +198,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
return {
left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
background: "#2d3348",
background: "var(--secondary)",
};
}

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

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

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

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

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

@@ -43,7 +43,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/difficulty.component.scss
View File

@@ -4,7 +4,7 @@
justify-content: space-around;
height: 76px;
.shared-block {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
.item {
@@ -77,7 +77,7 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
height: 100%;
}
@@ -89,7 +89,7 @@
.progress {
display: inline-flex;
width: 100%;
background-color: #2d3348;
background-color: var(--secondary);
height: 1.1rem;
max-width: 180px;
}

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

@@ -43,24 +43,24 @@ export class DifficultyComponent implements OnInit {
])
.pipe(
map(([block, da]) => {
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 - (block.height % 210000);

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

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

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

@@ -36,7 +36,7 @@
margin-bottom: 0;
}
.card-text span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}

4
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;
}
@@ -55,7 +55,7 @@
.progress {
display: inline-flex;
width: 160px;
background-color: #2d3348;
background-color: var(--secondary);
height: 1.1rem;
}

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

@@ -120,7 +120,7 @@
.card-text {
font-size: 18px;
span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
}

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

@@ -325,7 +325,7 @@ export class HashrateChartComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -436,7 +436,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,

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

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

@@ -151,7 +151,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
}
@@ -239,7 +239,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
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,

8
frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
View File

@@ -99,7 +99,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
type: 'line',
},
formatter: (params: any) => {
const colorSpan = (color: string) => `<span class="indicator" style="background-color: #116761;"></span>`;
const colorSpan = (color: string) => `<span class="indicator" style="background-color: var(--liquid);"></span>`;
let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
params.map((item: any, index: number) => {
if (index < 26) {
@@ -131,7 +131,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
}
@@ -145,11 +145,11 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
showSymbol: false,
areaStyle: {
opacity: 0.2,
color: '#116761',
color: 'var(--liquid)',
},
lineStyle: {
width: 3,
color: '#116761',
color: 'var(--liquid)',
},
},
],

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

@@ -1,5 +1,5 @@
li.nav-item.active {
background-color: #653b9c;
background-color: var(--tertiary);
}
fa-icon {
@@ -95,23 +95,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/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;
}

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

@@ -1,5 +1,5 @@
li.nav-item.active {
background-color: #653b9c;
background-color: var(--tertiary);
}
fa-icon {
@@ -110,23 +110,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

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

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

@@ -347,7 +347,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
}
@@ -396,7 +396,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,

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

@@ -11,7 +11,7 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
}
.graph-card {

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

@@ -126,7 +126,7 @@
.card-text {
font-size: 18px;
span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
}

2
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View File

@@ -301,7 +301,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;

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

@@ -82,7 +82,7 @@ div.scrollable {
}
.progress {
background-color: #2d3348;
background-color: var(--secondary);
}
.coinbase {

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

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

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

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

@@ -55,11 +55,11 @@
}
.arrow-green {
color: #1a9436;
color: var(--success);
}
.arrow-red {
color: #dc3545;
color: var(--red);
}
.container-xl {
@@ -85,7 +85,7 @@
.graph-container {
position: relative;
width: 100%;
background: #181b2d;
background: var(--stat-box-bg);
padding: 10px 0;
padding-bottom: 0;
}

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

@@ -17,7 +17,7 @@
}
.red {
color:#dc3545;
color:var(--red);
}
.grey {
@@ -56,7 +56,7 @@
text-align: right;
}
.sats {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 11px;
}
}
@@ -95,7 +95,7 @@
padding: 0.75rem;
font-size: 12px;
&:first-child {
color: #ffffff66;
color: var(--transparent-fg);
white-space: pre-wrap;
@media (min-width: 476px) {
white-space: nowrap;
@@ -123,7 +123,7 @@ h2 {
}
.highlight {
background-color: #181b2d;
background-color: var(--stat-box-bg);
}
.summary {

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

@@ -69,12 +69,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.scss
View File

@@ -11,7 +11,7 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
height: 100%;
}
@@ -29,7 +29,7 @@
.progress {
display: inline-flex;
width: 100%;
background-color: #2d3348;
background-color: var(--secondary);
height: 1.1rem;
max-width: 180px;
}
@@ -98,7 +98,7 @@
.card-text {
font-size: 18px;
span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
}

26
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;
}
@@ -47,7 +47,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);
}
}
@@ -65,7 +65,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;
@@ -110,17 +110,17 @@ li.nav-item {
top: 20px;
overflow-y: auto;
height: calc(100vh - 50px);
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;
}
@@ -148,8 +148,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;
@@ -163,7 +163,7 @@ h3 {
.endpoint-container .section-header span {
color: #fff;
background-color: #653b9c;
background-color: var(--tertiary);
font-size: 12px;
text-transform: uppercase;
font-weight: 400;
@@ -195,7 +195,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;
@@ -204,9 +204,9 @@ h3 {
#doc-nav-mobile button {
width: 100%;
background-color: #105fb0;
background-color: var(--primary);
color: #fff;
border-color: #105fb0;
border-color: var(--primary);
border-radius: 0.5rem 0.5rem 0 0;
}
@@ -221,7 +221,7 @@ h3 {
}
#disclaimer {
background-color: #1d1f31;
background-color: var(--bg);
padding: 24px;
margin: 24px 0;
}

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/fiat/fiat.component.scss
View File

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

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

4
frontend/src/app/lightning/channel/channel-preview.component.scss
View File

@@ -29,7 +29,7 @@
}
.row.nodes {
background: #181b2d;
background: var(--stat-box-bg);
margin: 15px 0 0;
}
@@ -48,7 +48,7 @@
width: 470px;
min-width: 470px;
padding: 0;
background: #181b2d;
background: var(--stat-box-bg);
max-height: 350px;
overflow: hidden;
}

4
frontend/src/app/lightning/channel/channel.component.html
View File

@@ -1,5 +1,5 @@
<div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
<h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.channel">Lightning channel</h5>
<div class="title-container">
<h1 class="mb-0">{{ channel.short_id }}</h1>
<span class="tx-link">
@@ -114,7 +114,7 @@
<ng-template #skeletonLoader>
<div class="container-xl">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
<h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.channel">Lightning channel</h5>
<div class="title-container">
<h1 class="mb-0"><span class="skeleton-loader" style="width: 275px; height: 25px;"></span></h1>
<span class="tx-link">

2
frontend/src/app/lightning/channels-list/channels-list.component.scss
View File

@@ -3,7 +3,7 @@
}
.sats {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}

2
frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
View File

@@ -1,7 +1,7 @@
<div class="widget-toggler">
<a href="" (click)="switchMode('avg')" class="toggler-option"
[ngClass]="{'inactive': mode === 'avg'}"><small>avg</small></a>
<span style="color: #ffffff66; font-size: 8px"> | </span>
<span style="color: var(--transparent-fg); font-size: 8px"> | </span>
<a href="" (click)="switchMode('med')" class="toggler-option"
[ngClass]="{'inactive': mode === 'med'}"><small>med</small></a>
</div>

4
frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
View File

@@ -54,7 +54,7 @@
margin-bottom: 0;
}
.card-text span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}
@@ -107,5 +107,5 @@
}
.inactive {
color: #ffffff66;
color: var(--transparent-fg);
}

4
frontend/src/app/lightning/group/group-preview.component.scss
View File

@@ -20,7 +20,7 @@
width: 100%;
margin: 16px 0 0;
padding: 20px 12px;
background: #181b2d;
background: var(--stat-box-bg);
font-size: 32px;
}
@@ -46,7 +46,7 @@
min-height: 272px;
max-height: 272px;
padding: 0;
background: #181b2d;
background: var(--stat-box-bg);
overflow: hidden;
margin-top: 16px;
}

4
frontend/src/app/lightning/group/group.component.html
View File

@@ -1,5 +1,5 @@
<div class="container-xl full-height" style="min-height: 335px">
<h5 class="mb-1" style="color: #ffffff66" i18n="lightning.node-group">Lightning node group</h5>
<h5 class="mb-1" style="color: var(--transparent-fg)" i18n="lightning.node-group">Lightning node group</h5>
<div class="header">
<div class="logo-container">
@@ -44,7 +44,7 @@
</table>
</div>
<div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
<div style="background-color: #181b2d">
<div style="background-color: var(--stat-box-bg)">
<app-nodes-map [widget]="true" [nodes]="nodes.nodes" type="isp"></app-nodes-map>
</div>
</div>

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

@@ -11,7 +11,7 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
}
.graph-card {

4
frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
View File

@@ -196,7 +196,7 @@ export class NodeFeeChartComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -252,7 +252,7 @@ export class NodeFeeChartComponent implements OnInit {
const prevBottom = this.chartOptions.grid.bottom;
// @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/lightning/node-statistics-chart/node-statistics-chart.component.ts
View File

@@ -179,7 +179,7 @@ export class NodeStatisticsChartComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -215,7 +215,7 @@ export class NodeStatisticsChartComponent implements OnInit {
symbol: 'none',
lineStyle: {
type: 'solid',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 1,
width: 1,
},
@@ -259,7 +259,7 @@ export class NodeStatisticsChartComponent 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/lightning/node-statistics/node-statistics.component.scss
View File

@@ -52,7 +52,7 @@
}
}
.card-text span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}

2
frontend/src/app/lightning/node/node-preview.component.scss
View File

@@ -27,7 +27,7 @@
min-height: 408px;
max-height: 408px;
padding: 0;
background: #181b2d;
background: var(--stat-box-bg);
overflow: hidden;
margin-top: 6px;
}

4
frontend/src/app/lightning/node/node.component.html
View File

@@ -1,5 +1,5 @@
<div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.node">Lightning node</h5>
<div class="title-container mb-2" *ngIf="!error">
<h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
<span class="tx-link">
@@ -255,7 +255,7 @@
<ng-template #skeletonLoader>
<div class="container-xl">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.node">Lightning node</h5>
<div class="title-container mb-2">
<h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 36px; margin-top: 5px; margin-bottom: 5px;"></span></h1>
<span class="tx-link">

2
frontend/src/app/lightning/node/node.component.scss
View File

@@ -84,7 +84,7 @@ app-fiat {
.tlv-type {
font-size: 12px;
color: #ffffff66;
color: var(--transparent-fg);
}
.tlv-payload {

2
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
View File

@@ -5,7 +5,7 @@
<div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
<span i18n="lightning.nodes-channels-world-map">Lightning Nodes Channels World Map</span>
</div>
<small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
<small style="color: var(--transparent-fg)" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
</div>
<div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions"

2
frontend/src/app/lightning/nodes-map/nodes-map.component.html
View File

@@ -4,7 +4,7 @@
<div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
<span i18n="lightning.nodes-world-map">Lightning Nodes World Map</span>
</div>
<small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
<small style="color: var(--transparent-fg)" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
</div>
<div *ngIf="observable$ | async" class="chart" [class]="widget ? 'widget' : ''" echarts [initOpts]="chartInitOptions" [options]="chartOptions"

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

@@ -119,7 +119,7 @@
.card-text {
font-size: 18px;
span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
}

6
frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
View File

@@ -340,7 +340,7 @@ export class NodesNetworksChartComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
},
},
@@ -363,7 +363,7 @@ export class NodesNetworksChartComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
},
},
@@ -437,7 +437,7 @@ export class NodesNetworksChartComponent 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/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
View File

@@ -7,7 +7,7 @@
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
<small style="color: var(--transparent-fg)" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
</div>
<div class="container pb-lg-0 bottom-padding">

2
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
View File

@@ -1,5 +1,5 @@
.sats {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}

2
frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
View File

@@ -218,7 +218,7 @@ export class NodesPerCountryChartComponent 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,

2
frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
View File

@@ -46,7 +46,7 @@
</table>
</div>
<div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
<div style="background-color: #181b2d">
<div style="background-color: var(--stat-box-bg)">
<app-nodes-map [widget]="true" [nodes]="countryNodes.nodes" type="country"></app-nodes-map>
</div>
</div>

2
frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss
View File

@@ -4,7 +4,7 @@
}
.sats {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}

2
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
View File

@@ -33,7 +33,7 @@
<fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
</button>
</div>
<small class="d-block" style="color: #ffffff66; min-height: 25px" >
<small class="d-block" style="color: var(--transparent-fg); min-height: 25px" >
<span i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</span>
</small>
</div>

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

@@ -127,7 +127,7 @@
.card-text {
font-size: 18px;
span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
}

2
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
View File

@@ -268,7 +268,7 @@ export class NodesPerISPChartComponent implements OnInit {
onSaveChart(): void {
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,

2
frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss
View File

@@ -12,7 +12,7 @@
min-height: 360px;
max-height: 360px;
padding: 0;
background: #181b2d;
background: var(--stat-box-bg);
overflow: hidden;
margin-top: 0;
}

2
frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
View File

@@ -43,7 +43,7 @@
</table>
</div>
<div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
<div style="background-color: #181b2d">
<div style="background-color: var(--stat-box-bg)">
<app-nodes-map [widget]="true" [nodes]="ispNodes.nodes" type="isp"></app-nodes-map>
</div>
</div>

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

@@ -4,7 +4,7 @@
}
.sats {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
top: 0px;
}

2
frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
View File

@@ -9,7 +9,7 @@
}
.card {
background-color: #1d1f31;
background-color: var(--bg);
}
.card-title {

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

@@ -119,7 +119,7 @@
.card-text {
font-size: 18px;
span {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
}

6
frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
View File

@@ -228,7 +228,7 @@ export class LightningStatisticsChartComponent implements OnInit {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 0.25,
}
},
@@ -269,7 +269,7 @@ export class LightningStatisticsChartComponent implements OnInit {
symbol: 'none',
lineStyle: {
type: 'solid',
color: '#ffffff66',
color: 'var(--transparent-fg)',
opacity: 1,
width: 1,
},
@@ -337,7 +337,7 @@ export class LightningStatisticsChartComponent 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/index.bisq.html
View File

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

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

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

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

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

181
frontend/src/styles.scss
View File

@@ -1,14 +1,25 @@
/* Theme */
$bg: #1d1f31;
$active-bg: #11131f;
$hover-bg: #12131e;
$fg: #fff;
$taproot: #eba814;
$taproot-light: #d5a90a;
$taproot-dark: #9d7c05;
/* Bootstrap */
$body-bg: #1d1f31;
$body-color: #fff;
$gray-800: #1d1f31;
$gray-700: #fff;
$body-bg: $bg;
$body-color: $fg;
$gray-800: $bg;
$gray-700: $fg;
$nav-tabs-link-active-bg: #11131f;
$nav-tabs-link-active-bg: $active-bg;
$primary: #105fb0;
$secondary: #2d3348;
$tertiary: #653b9c;
$success: #1a9436;
$info: #1bd8f4;
@@ -16,44 +27,80 @@ $h5-font-size: 1.15rem !default;
$pagination-bg: $body-bg;
$pagination-border-color: $gray-800;
$pagination-disabled-bg: #FFF;
$pagination-disabled-border-color: #1d1f31;
$pagination-active-color: #fff;
$pagination-active-bg: #653b9c;
$pagination-hover-bg: #12131e;
$pagination-hover-border-color: #1d1f31;
$pagination-disabled-bg: #1d1f31;
$pagination-disabled-bg: $fg;
$pagination-disabled-border-color: $bg;
$pagination-active-color: $fg;
$pagination-active-bg: $tertiary;
$pagination-hover-bg: $hover-bg;
$pagination-hover-border-color: $bg;
$pagination-disabled-bg: $bg;
$custom-select-indicator-color: #FFF;
$custom-select-indicator-color: $fg;
.input-group-text {
background-color: #1c2031 !important;
border: 1px solid #20263e !important;
}
$link-color: #1bd8f4;
$link-color: $info;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
$dropdown-bg: #1d1f31;
$dropdown-link-color: #fff;
$dropdown-bg: $bg;
$dropdown-link-color: $fg;
$dropdown-link-hover-color: #fff;
$dropdown-link-hover-bg: #11131f;
$dropdown-link-hover-color: $fg;
$dropdown-link-hover-bg: $active-bg;
$dropdown-link-active-color: #fff;
$dropdown-link-active-bg: #11131f;
$dropdown-link-active-color: $fg;
$dropdown-link-active-bg: $active-bg;
@import "~bootstrap/scss/bootstrap";
@import '~tlite/tlite.css';
:root {
--bg: #{$bg};
--active-bg: #{$active-bg};
--hover-bg: #{$hover-bg};
--fg: #{$fg};
--primary: #{$primary};
--secondary: #{$secondary};
--tertiary: #{$tertiary};
--success: #{$success};
--info: #{$info};
--box-bg: #24273e;
--stat-box-bg: #181b2d;
--alert-bg: #3a1c61;
--transparent-fg: #ffffff66;
--testnet: #1d486f;
--signet: #6f1d5d;
--liquid: #116761;
--liquidtestnet: #494a4a;
--mainnet-alt: #9339f4;
--testnet-alt: #183550;
--signet-alt: #471850;
--liquidtestnet-alt: #272e46;
--taproot: #eba814;
--taproot-light: #d5a90a;
--taproot-dark: #9d7c05;
--green: #3bcc49;
--red: #dc3545;
--yellow: #ffd800;
}
html, body {
height: 100%;
}
body {
background-color: #11131f;
background-color: var(--active-bg);
min-width: 375px;
padding-bottom: 60px;
}
@@ -81,7 +128,7 @@ body {
position: relative;
min-width: 0;
word-wrap: break-word;
background-color: #24273e;
background-color: var(--box-bg);
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
@@ -99,19 +146,19 @@ body {
}
.navbar-nav.liquid > .active {
background-color: #116761 !important;
background-color: var(--liquid) !important;
}
.navbar-nav.testnet > .active {
background-color: #1d486f !important;
background-color: var(--testnet) !important;
}
.navbar-nav.signet > .active {
background-color: #6f1d5d !important;
background-color: var(--signet) !important;
}
.navbar-nav.liquidtestnet > .active {
background-color: #494a4a !important;
background-color: var(--liquidtestnet) !important;
}
.form-control {
@@ -122,12 +169,12 @@ body {
}
.form-control.form-control-secondary {
color: #fff;
background-color: #2d3348;
border: 1px solid #2d3348;
color: var(--fg);
background-color: var(--secondary);
border: 1px solid var(--secondary);
}
.form-control.form-control-secondary:focus {
color: #fff;
color: var(--fg);
}
.h2-match-table {
@@ -181,20 +228,20 @@ body {
}
.symbol {
color: #ffffff66;
color: var(--transparent-fg);
font-size: 12px;
}
.progress-text {
span {
color: #fff !important;
color: var(--fg) !important;
}
}
.block-size, .blocks-container {
span {
font-size: 16px;
color: #fff !important;
color: var(--fg) !important;
}
}
@@ -204,17 +251,17 @@ body {
}
.title-block {
color: #FFF;
color: var(--fg);
padding-top: 20px;
padding-bottom: 10px;
border-top: 3px solid #FFF;
border-top: 3px solid var(--fg);
display: flex;
flex-direction: row;
justify-content: space-between;
}
.title-address, .title-asset {
color: #FFF;
color: var(--fg);
padding-bottom: 10px;
display: flex;
flex-direction: column;
@@ -253,27 +300,27 @@ body {
}
.close {
color: #fff;
color: var(--fg);
}
.close:hover {
color: #fff;
color: var(--fg);
}
.green-color {
color: #3bcc49;
color: var(--green);
}
.red-color {
color: #dc3545;
color: var(--red);
}
.yellow-color {
color: #ffd800;
color: var(--yellow);
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: #181b2d;
background-color: var(--stat-box-bg);
}
.bordertop {
@@ -301,7 +348,7 @@ html:lang(ru) .card-title {
.tx-wrapper-tooltip-chart,
.fees-wrapper-tooltip-chart {
background: rgba(#11131f, 0.95);
background: rgba($active-bg, 0.95);
border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: #b1b1b1;
@@ -330,7 +377,7 @@ html:lang(ru) .card-title {
font-size: 12px;
font-weight: 700;
margin-bottom: 2px;
color: #fff;
color: var(--fg);
.total-value {
float: right;
}
@@ -389,7 +436,7 @@ html:lang(ru) .card-title {
.total-label {
width: 100%;
text-align: left;
color: #fff;
color: var(--fg);
margin-top: 5px;
font-size: 14px;
span {
@@ -485,7 +532,7 @@ html:lang(ru) .card-title {
.fees-wrapper-tooltip-chart-advanced,
.tx-wrapper-tooltip-chart-advanced {
background: rgba(#1d1f31, 0.98);
background: rgba($bg, 0.98);
width: 275px;
thead {
@@ -641,27 +688,27 @@ h1, h2, h3 {
}
.progress-mempool {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
}
.progress-mempool.testnet {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #1d486f 0%, #183550 100%);
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, #2d3348, #2d3348 0%, #6f1d5d 0%, #471850 100%);
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, #2d3348, #2d3348 0%, #116761 0%, #183550 100%);
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
}
.progress-dark {
background-color: #181b2d;
background-color: var(--stat-box-bg);
}
.progress-darklight {
background-color: #24273e;
background-color: var(--box-bg);
}
.progress-light {
@@ -669,12 +716,12 @@ h1, h2, h3 {
}
.progress.progress-health {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #1a9436 100%);
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
justify-content: flex-end;
}
.progress-bar.progress-bar-health {
background: #2d3348;
background: var(--secondary);
}
.mt-2-5, .my-2-5 {
@@ -682,9 +729,9 @@ h1, h2, h3 {
}
.alert-mempool {
color: #ffffff;
background-color: #653b9c;
border-color: #3a1c61;
color: var(--fg);
background-color: var(--tertiary);
border-color: var(--alert-bg);
width: 100%;
display: inline-flex;
flex-direction: column;
@@ -989,7 +1036,7 @@ th {
display: block;
width: 100%;
padding: 1rem 2rem;
color: #fff;
color: var(--fg);
font-weight: bold;
&:focus, &:hover, &:active {
text-decoration: none;
@@ -1003,8 +1050,8 @@ th {
}
.collapsed {
background-color: #2d3348;
color: #1bd8f4;
background-color: var(--secondary);
color: var(--info);
}
}
@@ -1022,7 +1069,7 @@ th {
display: inline-block;
width: 100%;
justify-content: space-between;
background: #1d1f31;
background: var(--bg);
margin: 0;
@media (min-width: 550px) {
width: auto;
@@ -1048,21 +1095,21 @@ th {
// Blinking block
@keyframes shadowyBackground {
0% {
box-shadow: -10px -15px 75px rgba(#eba814, 1);
box-shadow: -10px -15px 75px rgba($taproot, 1);
}
50% {
box-shadow: -10px -15px 75px rgba(#eba814, .3);
box-shadow: -10px -15px 75px rgba($taproot, .3);
}
100% {
box-shadow: -10px -15px 75px rgba(#eba814, 1);
box-shadow: -10px -15px 75px rgba($taproot, 1);
}
}
.blink-bg {
color: #fff;
background: repeating-linear-gradient(#9d7c05, #9d7c05 0.163525%, #d5a90a 100%) !important;
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(#eba814, 1);
box-shadow: -10px -15px 75px rgba($taproot, 1);
transition: 100ms all ease-in;
}