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

Merge pull request #5044 from mempool/mononaut/onbtc-imgs-themed

Browse Source 
onbtc theme
This commit is contained in:
softsimon 2024-05-08 10:06:13 +07:00 committed by GitHub
commit 7f5b5f487e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
61 changed files with 1115 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/angular.json
View File

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

8
frontend/custom-sv-config.json
View File

@ -1,12 +1,12 @@
{ {
"theme": "contrast", "theme": "bukele",
"enterprise": "onbtc", "enterprise": "onbtc",
"branding": { "branding": {
"name": "onbtc", "name": "onbtc",
"title": "Oficina Nacional del Bitcoin", "title": "Bitcoin Office",
"site_id": 19, "site_id": 19,
"header_img": "/resources/onbtc.svg", "header_img": "/resources/onbtclogo.svg",
"img": "/resources/elsalvador.svg", "footer_img": "/resources/onbtclogo.svg",
"rounded_corner": true "rounded_corner": true
}, },
"dashboard": { "dashboard": {

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

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

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

@ -60,7 +60,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

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

@ -148,7 +148,7 @@ export class AcceleratorDashboardComponent implements OnInit, OnDestroy {
} else { } else {
const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1; const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1]; return this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
} }
} }

3
frontend/src/app/components/address-graph/address-graph.component.scss
View File

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

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

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

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

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

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

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

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

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

3
frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
View File

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

3
frontend/src/app/components/block-health-graph/block-health-graph.component.scss
View File

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

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

@ -651,13 +651,13 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) { getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
return (tx: TxView) => { return (tx: TxView) => {
if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) { if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
if (this.themeService.theme !== 'contrast') { if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)); return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
} else { } else {
return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)); return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
} }
} else { } else {
if (this.themeService.theme !== 'contrast') { if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction( return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
tx, tx,
defaultColors.unmatchedfee, defaultColors.unmatchedfee,

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

@ -69,7 +69,7 @@ export default class BlockScene {
} }
setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void { setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void {
this.theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
this.updateAllColors(); this.updateAllColors();
} }
@ -246,7 +246,7 @@ export default class BlockScene {
this.flip = flip; this.flip = flip;
this.vertexArray = vertexArray; this.vertexArray = vertexArray;
this.highlightingEnabled = highlighting; this.highlightingEnabled = highlighting;
theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; theme.theme === 'contrast' || theme.theme === 'bukele' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
this.theme = theme; this.theme = theme;
this.scene = { this.scene = {

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

@ -177,7 +177,7 @@ export function ageColorFunction(
return auditColors.accelerated; return auditColors.accelerated;
} }
const color = theme !== 'contrast' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime); const color = theme !== 'contrast' && theme !== 'bukele' ? 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))))))); const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
return { return {

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

@ -1,6 +1,6 @@
.block-overview-tooltip { .block-overview-tooltip {
position: absolute; position: absolute;
background: rgba(#11131f, 0.95); background: color-mix(in srgb, var(--active-bg) 95%, transparent);
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5); box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: var(--tooltip-grey); color: var(--tooltip-grey);
@ -30,7 +30,7 @@ th, td {
} }
.badge.badge-accelerated { .badge.badge-accelerated {
background-color: var(--tertiary); background-color: #653b9c;
box-shadow: #ad7de57f 0px 0px 12px -2px; box-shadow: #ad7de57f 0px 0px 12px -2px;
color: white; color: white;
animation: acceleratePulse 1s infinite; animation: acceleratePulse 1s infinite;
@ -71,7 +71,7 @@ th, td {
} }
@keyframes acceleratePulse { @keyframes acceleratePulse {
0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; } 0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;} 50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; } 100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
} }

3
frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
View File

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

3
frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
View File

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

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

@ -63,7 +63,7 @@
.fee-span { .fee-span {
font-size: 11px; font-size: 11px;
margin-bottom: 5px; margin-bottom: 5px;
color: #fff000; color: var(--yellow);
} }
.transaction-count { .transaction-count {
@ -130,7 +130,7 @@
height: 0; height: 0;
border-left: calc(var(--block-size) * 0.3) solid transparent; border-left: calc(var(--block-size) * 0.3) solid transparent;
border-right: calc(var(--block-size) * 0.3) solid transparent; border-right: calc(var(--block-size) * 0.3) solid transparent;
border-bottom: calc(var(--block-size) * 0.3) solid #FFF; border-bottom: calc(var(--block-size) * 0.3) solid var(--fg);
} }
.flashing { .flashing {

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

@ -350,7 +350,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
return { return {
left: addLeft + this.blockOffset * index + 'px', left: addLeft + this.blockOffset * index + 'px',
background: `repeating-linear-gradient( background: `repeating-linear-gradient(
#2d3348, var(--secondary),
var(--secondary) ${greenBackgroundHeight}%, var(--secondary) ${greenBackgroundHeight}%,
${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%, ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
${this.gradientColors[this.network][1]} 100% ${this.gradientColors[this.network][1]} 100%
@ -362,7 +362,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
convertStyleForLoadingBlock(style) { convertStyleForLoadingBlock(style) {
return { return {
...style, ...style,
background: "#2d3348", background: "var(--secondary)",
}; };
} }
@ -371,7 +371,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
return { return {
left: addLeft + (this.blockOffset * index) + 'px', left: addLeft + (this.blockOffset * index) + 'px',
background: "#2d3348", background: "var(--secondary)",
}; };
} }

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

@ -54,7 +54,7 @@
} }
.time-toggle { .time-toggle {
color: white; color: var(--fg);
font-size: 0.8rem; font-size: 0.8rem;
position: absolute; position: absolute;
bottom: -1.8em; bottom: -1.8em;
@ -68,7 +68,7 @@
} }
.block-display-toggle { .block-display-toggle {
color: white; color: var(--fg);
font-size: 0.8rem; font-size: 0.8rem;
position: absolute; position: absolute;
bottom: 15.8em; bottom: 15.8em;

16
frontend/src/app/components/clock/clock.component.ts
View File

@ -32,12 +32,12 @@ export class ClockComponent implements OnInit {
limitHeight: number; limitHeight: number;
gradientColors = { gradientColors = {
'': ['#9339f4', '#105fb0'], '': ['var(--mainnet-alt)', 'var(--primary)'],
liquid: ['#116761', '#183550'], liquid: ['var(--liquid)', 'var(--testnet-alt)'],
'liquidtestnet': ['#494a4a', '#272e46'], 'liquidtestnet': ['var(--liquidtestnet)', 'var(--liquidtestnet-alt)'],
testnet: ['#1d486f', '#183550'], testnet: ['var(--testnet)', 'var(--testnet-alt)'],
testnet4: ['#1d486f', '#183550'], testnet4: ['var(--testnet)', 'var(--testnet-alt)'],
signet: ['#6f1d5d', '#471850'], signet: ['var(--signet)', 'var(--signet-alt)'],
}; };
constructor( constructor(
@ -100,8 +100,8 @@ export class ClockComponent implements OnInit {
return { return {
background: `repeating-linear-gradient( background: `repeating-linear-gradient(
#2d3348, var(--secondary),
#2d3348 ${greenBackgroundHeight}%, var(--secondary) ${greenBackgroundHeight}%,
${this.gradientColors[''][0]} ${Math.max(greenBackgroundHeight, 0)}%, ${this.gradientColors[''][0]} ${Math.max(greenBackgroundHeight, 0)}%,
${this.gradientColors[''][1]} 100% ${this.gradientColors[''][1]} 100%
)`, )`,

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

@ -119,7 +119,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

4
frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
View File

@ -1,9 +1,9 @@
.difficulty-tooltip { .difficulty-tooltip {
position: fixed; position: fixed;
background: rgba(#11131f, 0.95); background: color-mix(in srgb, var(--active-bg) 95%, transparent);
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5); box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: #b1b1b1; color: var(--tooltip-grey);
padding: 10px 15px; padding: 10px 15px;
text-align: left; text-align: left;
pointer-events: none; pointer-events: none;

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

@ -15,8 +15,8 @@
<svg #epochSvg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none"> <svg #epochSvg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none">
<defs> <defs>
<linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"> <linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#105fb0" /> <stop offset="0%" stop-color="var(--primary)" />
<stop offset="100%" stop-color="#9339f4" /> <stop offset="100%" stop-color="var(--mainnet-alt)" />
</linearGradient> </linearGradient>
<linearGradient id="diff-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"> <linearGradient id="diff-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#2486eb" /> <stop offset="0%" stop-color="#2486eb" />

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

@ -128,7 +128,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;
@ -223,7 +224,7 @@
height: 100%; height: 100%;
} }
.background { .background {
background: linear-gradient(to right, var(--primary), #9339f4); background: linear-gradient(to right, var(--primary), var(--mainnet-alt));
left: 0; left: 0;
right: 0; right: 0;
} }

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

@ -79,7 +79,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
transition: background-color 1s; transition: background-color 1s;
color: var(--color-fg); color: #fff;
&.priority { &.priority {
@media (767px < width < 992px), (width < 576px) { @media (767px < width < 992px), (width < 576px) {
width: 100%; width: 100%;

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

@ -16,8 +16,8 @@ export class FeesBoxComponent implements OnInit, OnDestroy {
isLoading$: Observable<boolean>; isLoading$: Observable<boolean>;
recommendedFees$: Observable<Recommendedfees>; recommendedFees$: Observable<Recommendedfees>;
themeSubscription: Subscription; themeSubscription: Subscription;
gradient = 'linear-gradient(to right, #2e324e, #2e324e)'; gradient = 'linear-gradient(to right, var(--skeleton-bg), var(--skeleton-bg))';
noPriority = '#2e324e'; noPriority = 'var(--skeleton-bg)';
fees: Recommendedfees; fees: Recommendedfees;
constructor( constructor(

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

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

3
frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
View File

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

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

@ -4,6 +4,7 @@
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 100; z-index: 100;
background-color: var(--bg);
} }
li.nav-item.active { li.nav-item.active {
@ -17,7 +18,7 @@ fa-icon {
.navbar { .navbar {
z-index: 100; z-index: 100;
min-height: 64px; min-height: 64px;
background-color: var(--bg); background-color: var(--nav-bg);
} }
li.nav-item { li.nav-item {
@ -48,7 +49,7 @@ li.nav-item {
} }
.navbar-nav { .navbar-nav {
background: var(--navbar-bg); background: var(--nav-bg);
bottom: 0; bottom: 0;
box-shadow: 0px 0px 15px 0px #000; box-shadow: 0px 0px 15px 0px #000;
flex-direction: row; flex-direction: row;

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

@ -6,7 +6,7 @@
<img [src]="enterpriseInfo.img" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}"> <img [src]="enterpriseInfo.img" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
} }
@if (enterpriseInfo?.header_img) { @if (enterpriseInfo?.header_img) {
<img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px"> <img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="60px" class="mr-3">
} @else { } @else {
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo" style="width: 200px; height: 50px"></app-svg-images> <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo" style="width: 200px; height: 50px"></app-svg-images>
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images> <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>

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

@ -5,6 +5,7 @@
max-width: 1200px; max-width: 1200px;
max-height: 600px; max-height: 600px;
padding-top: 80px; padding-top: 80px;
background: var(--nav-bg);
header { header {
position: absolute; position: absolute;
@ -18,7 +19,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: var(--stat-box-bg); background: var(--nav-bg);
text-align: start; text-align: start;
font-size: 1.8em; font-size: 1.8em;
} }

54
frontend/src/app/components/master-page/master-page.component.html
View File

@ -17,16 +17,16 @@
<!-- Large screen --> <!-- Large screen -->
<a class="navbar-brand d-none d-md-flex" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)"> <a class="navbar-brand d-none d-md-flex" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
<ng-template [ngIf]="subdomain && enterpriseInfo">
<div class="subdomain_container">
<img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
</div>
<div class="vertical-line"></div>
</ng-template>
<ng-container *ngIf="{ val: connectionState$ | async } as connectionState"> <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
@if (enterpriseInfo?.header_img) { @if (enterpriseInfo?.header_img) {
<img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px"> <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="48px" class="mr-3">
} @else { } @else {
<ng-template [ngIf]="subdomain && enterpriseInfo">
<div class="subdomain_container">
<img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
</div>
<div class="vertical-line"></div>
</ng-template>
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images> <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images> <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
} }
@ -38,24 +38,28 @@
</a> </a>
<!-- Mobile --> <!-- Mobile -->
<a class="navbar-brand d-flex d-md-none justify-content-center" [ngClass]="{'dual-logos': subdomain, 'mr-0': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)"> <a class="navbar-brand d-flex d-md-none justify-content-center" [ngClass]="{'dual-logos': subdomain, 'mr-0': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
<ng-template [ngIf]="subdomain && enterpriseInfo"> @if (enterpriseInfo?.header_img) {
<div class="subdomain_container"> <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="42px">
<img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}"> } @else {
</div> <ng-template [ngIf]="subdomain && enterpriseInfo">
<div class="vertical-line"></div> <div class="subdomain_container">
</ng-template> <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
<ng-container *ngIf="{ val: connectionState$ | async } as connectionState"> </div>
@if (enterpriseInfo?.header_img) { <div class="vertical-line"></div>
<img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px"> </ng-template>
} @else { <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images> @if (enterpriseInfo?.header_img) {
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images> <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
} } @else {
<div class="connection-badge"> <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
<div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div> <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
<div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div> }
</div> <div class="connection-badge">
</ng-container> <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
<div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
</div>
</ng-container>
}
</a> </a>
<div (window:resize)="onResize()" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.TESTNET4_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.LIQUID_TESTNET_ENABLED"> <div (window:resize)="onResize()" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.TESTNET4_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.LIQUID_TESTNET_ENABLED">

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

@ -3,6 +3,7 @@
position: -webkit-sticky; position: -webkit-sticky;
top: 0; top: 0;
width: 100%; width: 100%;
background-color: var(--bg);
z-index: 100; z-index: 100;
} }
@ -18,7 +19,7 @@ fa-icon {
z-index: 100; z-index: 100;
min-height: 64px; min-height: 64px;
width: 100%; width: 100%;
background-color: var(--bg); background-color: var(--nav-bg);
} }
li.nav-item { li.nav-item {
@ -59,7 +60,7 @@ li.nav-item {
} }
.navbar-nav { .navbar-nav {
background: var(--navbar-bg); background: var(--nav-bg);
bottom: 0; bottom: 0;
box-shadow: 0px 0px 15px 0px #000; box-shadow: 0px 0px 15px 0px #000;
flex-direction: row; flex-direction: row;

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

@ -56,7 +56,7 @@
.fee-span { .fee-span {
font-size: 11px; font-size: 11px;
margin-bottom: 5px; margin-bottom: 5px;
color: #fff000; color: var(--yellow);
} }
.transaction-count { .transaction-count {
@ -119,7 +119,7 @@
height: 0; height: 0;
border-left: calc(var(--block-size) * 0.3) solid transparent; border-left: calc(var(--block-size) * 0.3) solid transparent;
border-right: calc(var(--block-size) * 0.3) solid transparent; border-right: calc(var(--block-size) * 0.3) solid transparent;
border-bottom: calc(var(--block-size) * 0.3) solid #FFF; border-bottom: calc(var(--block-size) * 0.3) solid var(--fg);
} }
.blockLink { .blockLink {

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

@ -63,7 +63,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

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

@ -1,10 +1,10 @@
.rbf-tooltip { .rbf-tooltip {
position: fixed; position: fixed;
z-index: 3; z-index: 3;
background: rgba(#11131f, 0.95); background: color-mix(in srgb, var(--active-bg) 95%, transparent);
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5); box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: #b1b1b1; color: var(--tooltip-grey);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;

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

@ -159,7 +159,7 @@
&.selected { &.selected {
.shape-border { .shape-border {
background: #9339f4; background: var(--mainnet-alt);
} }
} }
@ -183,7 +183,7 @@
width: calc(1em + 16px); width: calc(1em + 16px);
.shape { .shape {
border: solid 4px #9339f4; border: solid 4px var(--mainnet-alt);
} }
&:hover { &:hover {

1
frontend/src/app/components/theme-selector/theme-selector.component.html
View File

@ -3,5 +3,6 @@
<option value="default" i18n="mempool-goggles.classic">Classic</option> <option value="default" i18n="mempool-goggles.classic">Classic</option>
<option value="contrast">BlueMatt</option> <option value="contrast">BlueMatt</option>
<option value="wiz">wiz</option> <option value="wiz">wiz</option>
<option value="bukele">Bukele</option>
</select> </select>
</div> </div>

2
frontend/src/app/components/theme-selector/theme-selector.component.ts
View File

@ -11,7 +11,7 @@ import { Subscription } from 'rxjs';
}) })
export class ThemeSelectorComponent implements OnInit { export class ThemeSelectorComponent implements OnInit {
themeForm: UntypedFormGroup; themeForm: UntypedFormGroup;
themes = ['default', 'contrast', 'wiz']; themes = ['default', 'contrast', 'wiz', 'bukele'];
themeSubscription: Subscription; themeSubscription: Subscription;
constructor( constructor(

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

@ -103,7 +103,8 @@ td.amount.large {
margin-top: 10px; margin-top: 10px;
} }
.assetBox { .assetBox {
background-color: #653b9c90; background: color-mix(in srgb, var(--tertiary) 56%, transparent);
} }
.details-container { .details-container {

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

@ -1,6 +1,6 @@
.bowtie-graph-tooltip { .bowtie-graph-tooltip {
position: absolute; position: absolute;
background: rgba(#11131f, 0.95); background: color-mix(in srgb, var(--active-bg) 95%, transparent);
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5); box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: var(--tooltip-grey); color: var(--tooltip-grey);

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

@ -84,7 +84,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
refreshOutspends$: ReplaySubject<string> = new ReplaySubject(); refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
gradientColors = { gradientColors = {
'': ['#9339f4', '#105fb0', '#9339f400'], '': ['var(--mainnet-alt)', 'var(--primary)', 'color-mix(in srgb, var(--mainnet-alt) 1%, transparent)'],
// liquid: ['#116761', '#183550'], // liquid: ['#116761', '#183550'],
liquid: ['#09a197', '#0f62af', '#09a19700'], liquid: ['#09a197', '#0f62af', '#09a19700'],
// 'liquidtestnet': ['#494a4a', '#272e46'], // 'liquidtestnet': ['#494a4a', '#272e46'],
@ -96,7 +96,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
signet: ['#d24fc8', '#a84fd2', '#d24fc800'], signet: ['#d24fc8', '#a84fd2', '#d24fc800'],
}; };
gradient: string[] = ['#105fb0', '#105fb0']; gradient: string[] = ['var(--primary)', 'var(--primary)'];
constructor( constructor(
private router: Router, private router: Router,

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

@ -301,7 +301,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;
@ -435,7 +436,8 @@
.in-progress-message { .in-progress-message {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
padding-bottom: 3px; padding-bottom: 3px;

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

@ -66,7 +66,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

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

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

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

@ -11,7 +11,8 @@
.main-title { .main-title {
position: relative; position: relative;
color: #ffffff91; color: var(--fg);
opacity: var(--opacity);
margin-top: -13px; margin-top: -13px;
font-size: 10px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;

4
frontend/src/app/services/state.service.ts
View File

@ -27,7 +27,9 @@ export interface Customization {
name: string; name: string;
site_id?: number; site_id?: number;
title: string; title: string;
img: string; img?: string;
header_img?: string;
footer_img?: string;
rounded_corner: boolean; rounded_corner: boolean;
}, },
dashboard: { dashboard: {

8
frontend/src/app/services/theme.service.ts
View File

@ -17,14 +17,14 @@ export class ThemeService {
private storageService: StorageService, private storageService: StorageService,
private stateService: StateService, private stateService: StateService,
) { ) {
const theme = this.storageService.getValue('theme-preference') || this.stateService.env.customize?.theme || 'default'; const theme = this.stateService.env.customize?.theme || this.storageService.getValue('theme-preference') || 'default';
this.apply(theme); this.apply(theme);
} }
apply(theme) { apply(theme) {
this.theme = theme; this.theme = theme;
if (theme !== 'default') { if (theme !== 'default') {
theme === 'contrast' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors; theme === 'contrast' || theme === 'bukele' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors;
try { try {
if (!this.style) { if (!this.style) {
this.style = document.createElement('link'); this.style = document.createElement('link');
@ -44,7 +44,9 @@ export class ThemeService {
this.style = null; this.style = null;
} }
} }
this.storageService.setValue('theme-preference', theme); if (!this.stateService.env.customize?.theme) {
this.storageService.setValue('theme-preference', theme);
}
this.themeChanged$.next(this.theme); this.themeChanged$.next(this.theme);
} }
} }

52
frontend/src/app/shared/components/global-footer/global-footer.component.html
View File

@ -4,13 +4,19 @@
<div class="row main" [class]="{'services': isServicesPage}"> <div class="row main" [class]="{'services': isServicesPage}">
<div class="col-md-12 branding mt-2"> <div class="col-md-12 branding mt-2">
<div class="main-logo" [class]="{'services': isServicesPage}"> <div class="main-logo" [class]="{'services': isServicesPage}">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images> @if (enterpriseInfo?.footer_img) {
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126"></app-svg-images> <img [src]="enterpriseInfo?.footer_img" alt="enterpriseInfo.title" height="60px" class="mr-3">
} @else {
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126"></app-svg-images>
}
</div> </div>
<p class="explore-tagline-mobile"> @if (!enterpriseInfo?.footer_img) {
<ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container> <p class="explore-tagline-mobile">
<ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template> <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
</p> <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
</p>
}
<div class="site-options language-selector d-flex justify-content-center align-items-center" [class]="{'services': isServicesPage}"> <div class="site-options language-selector d-flex justify-content-center align-items-center" [class]="{'services': isServicesPage}">
<div class="selector"> <div class="selector">
<app-language-selector></app-language-selector> <app-language-selector></app-language-selector>
@ -21,25 +27,31 @@
<div class="selector"> <div class="selector">
<app-rate-unit-selector></app-rate-unit-selector> <app-rate-unit-selector></app-rate-unit-selector>
</div> </div>
<div class="selector d-none d-sm-flex"> @if (!env.customize?.theme) {
<app-theme-selector></app-theme-selector> <div class="selector d-none d-sm-flex">
</div> <app-theme-selector></app-theme-selector>
</div>
}
<a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]"> <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]">
<span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span> <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
<span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span> <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
</a> </a>
</div> </div>
<div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0"> @if (!env.customize?.theme) {
<app-theme-selector></app-theme-selector> <div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
</div> <app-theme-selector></app-theme-selector>
<a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login' | relativeUrl]"> </div>
<span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span> }
<span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span> @if (!enterpriseInfo?.footer_img) {
</a> <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login' | relativeUrl]">
<p class="explore-tagline-desktop"> <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
<ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container> <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
<ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template> </a>
</p> <p class="explore-tagline-desktop">
<ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
<ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
</p>
}
</div> </div>
</div> </div>
<div class="row col-md-12 link-tree" [class]="{'services': isServicesPage}"> <div class="row col-md-12 link-tree" [class]="{'services': isServicesPage}">

15
frontend/src/app/shared/components/global-footer/global-footer.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { Observable, merge, of, Subject, Subscription } from 'rxjs'; import { Observable, merge, of, Subject, Subscription } from 'rxjs';
import { tap, takeUntil } from 'rxjs/operators'; import { tap, takeUntil } from 'rxjs/operators';
@ -8,6 +8,7 @@ import { LanguageService } from '../../../services/language.service';
import { NavigationService } from '../../../services/navigation.service'; import { NavigationService } from '../../../services/navigation.service';
import { StorageService } from '../../../services/storage.service'; import { StorageService } from '../../../services/storage.service';
import { WebsocketService } from '../../../services/websocket.service'; import { WebsocketService } from '../../../services/websocket.service';
import { EnterpriseService } from '../../../services/enterprise.service';
@Component({ @Component({
selector: 'app-global-footer', selector: 'app-global-footer',
@ -15,7 +16,7 @@ import { WebsocketService } from '../../../services/websocket.service';
styleUrls: ['./global-footer.component.scss'], styleUrls: ['./global-footer.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class GlobalFooterComponent implements OnInit { export class GlobalFooterComponent implements OnInit, OnDestroy {
private destroy$: Subject<any> = new Subject<any>(); private destroy$: Subject<any> = new Subject<any>();
env: Env; env: Env;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
@ -32,10 +33,14 @@ export class GlobalFooterComponent implements OnInit {
urlSubscription: Subscription; urlSubscription: Subscription;
isServicesPage = false; isServicesPage = false;
enterpriseInfo: any;
enterpriseInfo$: Subscription;
constructor( constructor(
public stateService: StateService, public stateService: StateService,
private languageService: LanguageService, private languageService: LanguageService,
private navigationService: NavigationService, private navigationService: NavigationService,
private enterpriseService: EnterpriseService,
@Inject(LOCALE_ID) public locale: string, @Inject(LOCALE_ID) public locale: string,
private storageService: StorageService, private storageService: StorageService,
private route: ActivatedRoute, private route: ActivatedRoute,
@ -54,6 +59,9 @@ export class GlobalFooterComponent implements OnInit {
this.navigationService.subnetPaths.subscribe((paths) => { this.navigationService.subnetPaths.subscribe((paths) => {
this.networkPaths = paths; this.networkPaths = paths;
}); });
this.enterpriseInfo$ = this.enterpriseService.info$.subscribe(info => {
this.enterpriseInfo = info;
});
this.network$ = merge(of(''), this.stateService.networkChanged$).pipe( this.network$ = merge(of(''), this.stateService.networkChanged$).pipe(
tap((network: string) => { tap((network: string) => {
return network; return network;
@ -73,6 +81,9 @@ export class GlobalFooterComponent implements OnInit {
this.destroy$.next(true); this.destroy$.next(true);
this.destroy$.complete(); this.destroy$.complete();
this.urlSubscription.unsubscribe(); this.urlSubscription.unsubscribe();
if (this.enterpriseInfo$) {
this.enterpriseInfo$.unsubscribe();
}
} }
networkLink(network) { networkLink(network) {

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

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Oficina Nacional del Bitcoin - Bitcoin Explorer</title> <title>Bitcoin Office - Explorer</title>
<script src="/resources/config.js"></script> <script src="/resources/config.js"></script>
<script src="/resources/customize.js"></script> <script src="/resources/customize.js"></script>
<base href="/"> <base href="/">

27
frontend/src/resources/elsalvador.svg
View File

@ -1,37 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
width="159.7426" width="159.7426"
height="162.47015" height="162.47015"
viewBox="0 0 42.26523 42.986894" viewBox="0 0 42.26523 42.986894"
version="1.1" version="1.1"
id="svg5" id="elsalvador"
sodipodi:docname="elsalvador.svg"
inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview469"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="2.8463012"
inkscape:cx="21.606989"
inkscape:cy="67.982966"
inkscape:window-width="1728"
inkscape:window-height="1051"
inkscape:window-x="0"
inkscape:window-y="38"
inkscape:window-maximized="1"
inkscape:current-layer="svg5" />
<defs <defs
id="defs2"> id="defs2">
<clipPath <clipPath

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 80 KiB

112
frontend/src/resources/onbtc.svg
View File

@ -1,118 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
width="166.66856mm" width="73.044792mm"
height="27.910412mm" height="27.902231mm"
viewBox="0 0 166.66856 27.910412" viewBox="0 0 73.04479 27.902231"
version="1.1" version="1.1"
id="svg5" id="onbtc"
sodipodi:docname="onbtc.svg"
inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview188"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.9192657"
inkscape:cx="243.84326"
inkscape:cy="52.88481"
inkscape:window-width="1728"
inkscape:window-height="1051"
inkscape:window-x="0"
inkscape:window-y="38"
inkscape:window-maximized="1"
inkscape:current-layer="text1855" />
<defs <defs
id="defs2" /> id="defs2" />
<g <g
aria-label="OFICINA NACIONAL DEL BITCOIN" aria-label="BITCOIN OFFICE"
id="text1855" id="text1855"
style="fill:#d2d2d2;stroke-width:3.37609;stroke-linecap:square" style="fill:#d2d2d2;stroke-width:3.37609;stroke-linecap:square"
transform="translate(-15.744428,-40.187266)"> transform="translate(-15.744428,-40.187135)">
<path <path
d="m 28.492368,45.40464 c 0,-3.039246 -2.735322,-5.217373 -5.92653,-5.217373 -3.596442,0 -6.179801,2.380743 -6.179801,5.740798 0,3.157439 2.785976,5.284912 6.095377,5.284912 3.275632,0 6.010954,-2.397628 6.010954,-5.808337 z m -1.587162,0.557195 c 0,2.397627 -1.317007,4.829024 -4.069213,4.829024 -2.718437,0 -4.862794,-2.22878 -4.862794,-5.386219 0,-2.026164 1.181929,-4.795255 4.153636,-4.795255 2.785976,0 4.778371,2.211895 4.778371,5.35245 z" d="m 17.787525,49.237549 c 0,1.063761 -0.270162,1.384578 -1.65474,1.384578 h -0.388357 v 0.320817 h 6.179946 c 2.718501,0 3.647182,-1.874246 3.647182,-3.208169 0,-1.317038 -0.928681,-2.347029 -2.51588,-2.819812 v -0.03377 c 1.131301,-0.202621 1.924901,-1.097532 1.924901,-2.059982 0,-0.810485 -0.337702,-1.384578 -1.029991,-1.874246 -0.607864,-0.439013 -1.908016,-0.658519 -3.393905,-0.658519 -0.320817,0 -1.604084,0.01689 -2.532765,0.05065 -0.489668,0.01689 -1.65474,0.08443 -2.127522,0.101311 v 0.320817 h 0.590978 c 1.181957,0 1.300153,0.506553 1.300153,1.469003 z m 1.401463,-8.577631 c 0.422127,-0.01688 1.114417,-0.05065 1.485889,-0.05065 2.076867,0 2.786041,1.080646 2.786041,2.262603 0,1.317038 -0.810485,1.958672 -2.431454,1.958672 h -1.840476 z m 0,4.491436 h 1.823591 c 1.975556,0 2.971777,1.333923 2.971777,2.634076 0,1.317038 -0.641634,2.701616 -2.870467,2.701616 -1.418348,0 -1.924901,-0.455898 -1.924901,-1.739165 z" />
id="path415" />
<path <path
d="m 37.390604,43.935671 h -0.28704 c -0.05065,0.726042 -0.354579,1.080621 -0.979313,1.080621 h -3.34317 v -3.967905 h 3.208093 c 1.046851,0 1.384545,0.405233 1.40143,1.384545 h 0.28704 v -1.992394 h -7.564346 v 0.320809 c 1.181929,0.01689 1.266352,0.506541 1.266352,1.587162 v 6.618803 c 0,1.36766 -0.185731,1.587161 -1.232583,1.6547 v 0.32081 h 4.102982 v -0.32081 c -1.266352,0 -1.468968,-0.354579 -1.468968,-1.300122 v -3.697749 h 3.123669 c 0.810466,0 1.165045,0.303924 1.198814,1.283237 h 0.28704 z" d="m 31.329346,50.622127 c -1.165072,0 -1.435233,-0.337702 -1.435233,-1.333923 v -7.159282 c 0,-1.131302 0.371472,-1.367693 1.435233,-1.367693 v -0.320817 h -4.103079 v 0.320817 c 0.945565,0.05065 1.266382,0.303931 1.266382,1.215727 v 7.193052 c 0,1.131302 -0.219506,1.401463 -1.266382,1.452119 v 0.320817 h 4.103079 z" />
id="path417" />
<path <path
d="m 43.215796,50.622012 c -1.165044,0 -1.435199,-0.337694 -1.435199,-1.333891 v -7.159113 c 0,-1.131275 0.371463,-1.367661 1.435199,-1.367661 v -0.320809 h -4.102982 v 0.320809 c 0.945543,0.05065 1.266353,0.303925 1.266353,1.215698 v 7.192883 c 0,1.131275 -0.219501,1.40143 -1.266353,1.452084 v 0.32081 h 4.102982 z" d="m 38.505484,41.048275 h 2.938008 c 0.675404,0 0.979335,0.388358 1.232612,1.874246 h 0.303932 l -0.270162,-2.735386 h -0.320817 c -0.03377,0.202621 -0.287046,0.253277 -0.523438,0.253277 h -8.121733 c -0.118195,0 -0.236391,-0.01689 -0.337702,-0.05066 -0.10131,-0.03377 -0.168851,-0.10131 -0.185736,-0.202621 h -0.320817 l -0.270161,2.735386 h 0.303932 c 0.253276,-1.485888 0.557208,-1.874246 1.232612,-1.874246 h 2.938007 v 8.341239 c 0,0.911796 -0.303932,1.232613 -1.333923,1.232613 H 35.14535 v 0.320817 h 5.318806 v -0.320817 h -0.624749 c -1.029991,0 -1.333923,-0.320817 -1.333923,-1.232613 z" />
id="path419" />
<path <path
d="m 55.18702,43.209629 -0.151963,-2.448282 h -0.25327 c -0.03377,0.05065 -0.118193,0.101308 -0.303925,0.101308 -0.523426,0 -1.435199,-0.675388 -3.562672,-0.675388 -3.528902,0 -6.061607,2.363858 -6.061607,5.63949 0,3.12367 2.465166,5.38622 5.89276,5.38622 1.992395,0 2.735322,-0.60785 3.815943,-0.455887 0.405233,-0.658504 0.861119,-1.705355 1.080621,-2.465167 h -0.32081 c -1.148159,2.043049 -2.785975,2.498936 -4.119867,2.498936 -2.566474,0 -4.761485,-2.245665 -4.761485,-5.301796 0,-2.83663 1.756009,-4.879678 4.575754,-4.879678 1.840432,0 3.292516,1.029966 3.849711,2.600244 z" d="m 54.732034,43.209568 -0.151966,-2.448339 h -0.253277 c -0.03377,0.05065 -0.118196,0.10131 -0.303932,0.10131 -0.523438,0 -1.435233,-0.675404 -3.562756,-0.675404 -3.528985,0 -6.06175,2.363914 -6.06175,5.639623 0,3.123744 2.465224,5.386347 5.892899,5.386347 1.992442,0 2.735387,-0.607863 3.816033,-0.455898 0.405242,-0.658518 0.86114,-1.705395 1.080646,-2.465224 h -0.320817 c -1.148186,2.043097 -2.786041,2.498995 -4.119964,2.498995 -2.566535,0 -4.761598,-2.245719 -4.761598,-5.301922 0,-2.836696 1.75605,-4.879793 4.575862,-4.879793 1.840476,0 3.292594,1.029991 3.849803,2.600305 z" />
id="path421" />
<path <path
d="m 61.147288,50.622012 c -1.165044,0 -1.435199,-0.337694 -1.435199,-1.333891 v -7.159113 c 0,-1.131275 0.371463,-1.367661 1.435199,-1.367661 v -0.320809 h -4.102982 v 0.320809 c 0.945543,0.05065 1.266352,0.303925 1.266352,1.215698 v 7.192883 c 0,1.131275 -0.219501,1.40143 -1.266352,1.452084 v 0.32081 h 4.102982 z" d="m 68.83106,45.404631 c 0,-3.039318 -2.735386,-5.217496 -5.92667,-5.217496 -3.596526,0 -6.179946,2.380799 -6.179946,5.740934 0,3.157514 2.786041,5.285036 6.095521,5.285036 3.275709,0 6.011095,-2.397684 6.011095,-5.808474 z m -1.587199,0.557208 c 0,2.397684 -1.317038,4.829139 -4.069309,4.829139 -2.718501,0 -4.862909,-2.228833 -4.862909,-5.386347 0,-2.026212 1.181957,-4.795368 4.153735,-4.795368 2.786041,0 4.778483,2.211948 4.778483,5.352576 z" />
id="path423" />
<path <path
d="m 73.810786,51.061014 v -9.421663 c 0,-0.658503 0.270155,-0.878004 1.536508,-0.878004 v -0.320809 h -3.95102 v 0.320809 c 1.350776,0.03377 1.654701,0.219501 1.654701,1.249468 v 6.720111 l -7.952694,-8.290388 h -2.650899 v 0.320809 c 0.590965,0.01689 1.029967,0.151962 1.418315,0.422117 v 8.307273 c 0,0.776696 -0.337694,1.131275 -1.384545,1.131275 h -0.06754 v 0.32081 h 3.917251 v -0.32081 c -1.4352,0 -1.705355,-0.25327 -1.705355,-1.468969 v -7.243536 l 8.746275,9.151507 z" d="m 74.588877,50.622127 c -1.165072,0 -1.435233,-0.337702 -1.435233,-1.333923 v -7.159282 c 0,-1.131302 0.371472,-1.367693 1.435233,-1.367693 v -0.320817 h -4.103079 v 0.320817 c 0.945565,0.05065 1.266382,0.303931 1.266382,1.215727 v 7.193052 c 0,1.131302 -0.219506,1.401463 -1.266382,1.452119 v 0.320817 h 4.103079 z" />
id="path425" />
<path <path
d="m 82.776557,46.282644 1.131275,3.073016 c 0.06754,0.168847 0.185732,0.422117 0.185732,0.692272 0,0.472772 -0.354579,0.57408 -1.317007,0.57408 h -0.439002 v 0.32081 h 4.643293 v -0.32081 c -0.844235,0 -1.198814,-0.168847 -1.536508,-1.063736 l -3.528902,-9.371009 h -1.468969 l 0.151962,0.371464 -3.073016,8.391696 c -0.54031,1.468969 -0.726042,1.6547 -1.823547,1.671585 v 0.32081 h 3.900366 v -0.32081 h -0.270156 c -0.928658,0 -1.36766,-0.168847 -1.36766,-0.624734 0,-0.236386 0.219501,-0.742927 0.337694,-1.063736 l 0.979312,-2.650898 z m -0.28704,-0.742927 h -2.921053 l 1.4352,-3.934135 z" d="m 87.252675,51.061139 v -9.421885 c 0,-0.658519 0.270161,-0.878025 1.536544,-0.878025 v -0.320817 h -3.951114 v 0.320817 c 1.350808,0.03377 1.65474,0.219506 1.65474,1.249497 v 6.72027 l -7.952882,-8.290584 h -2.65096 v 0.320817 c 0.590978,0.01689 1.029991,0.151966 1.418348,0.422127 v 8.307469 c 0,0.776715 -0.337702,1.131302 -1.384578,1.131302 h -0.06754 v 0.320817 h 3.917343 v -0.320817 c -1.435234,0 -1.705395,-0.253277 -1.705395,-1.469004 v -7.243708 l 8.746481,9.151724 z" />
id="path427" />
<path <path
d="m 103.6629,51.061014 v -9.421663 c 0,-0.658503 0.27015,-0.878004 1.53651,-0.878004 v -0.320809 h -3.95102 v 0.320809 c 1.35077,0.03377 1.6547,0.219501 1.6547,1.249468 v 6.720111 l -7.952698,-8.290388 h -2.650898 v 0.320809 c 0.590965,0.01689 1.029967,0.151962 1.418315,0.422117 v 8.307273 c 0,0.776696 -0.337694,1.131275 -1.384545,1.131275 h -0.06754 v 0.32081 h 3.91725 v -0.32081 c -1.435199,0 -1.705354,-0.25327 -1.705354,-1.468969 v -7.243536 l 8.74628,9.151507 z" d="m 27.851044,62.280894 c 0,-3.039318 -2.735386,-5.217496 -5.92667,-5.217496 -3.596526,0 -6.179946,2.380799 -6.179946,5.740934 0,3.157513 2.786041,5.285036 6.095521,5.285036 3.275709,0 6.011095,-2.397684 6.011095,-5.808474 z m -1.587199,0.557208 c 0,2.397684 -1.317038,4.829138 -4.069309,4.829138 -2.718501,0 -4.862909,-2.228833 -4.862909,-5.386346 0,-2.026212 1.181957,-4.795369 4.153735,-4.795369 2.786041,0 4.778483,2.211948 4.778483,5.352577 z" />
id="path429" />
<path <path
d="m 112.62867,46.282644 1.13127,3.073016 c 0.0675,0.168847 0.18574,0.422117 0.18574,0.692272 0,0.472772 -0.35458,0.57408 -1.31701,0.57408 h -0.439 v 0.32081 h 4.64329 v -0.32081 c -0.84424,0 -1.19881,-0.168847 -1.53651,-1.063736 l -3.5289,-9.371009 h -1.46897 l 0.15196,0.371464 -3.07301,8.391696 c -0.54031,1.468969 -0.72604,1.6547 -1.82355,1.671585 v 0.32081 h 3.90037 v -0.32081 h -0.27016 c -0.92866,0 -1.36766,-0.168847 -1.36766,-0.624734 0,-0.236386 0.2195,-0.742927 0.33769,-1.063736 l 0.97932,-2.650898 z m -0.28704,-0.742927 h -2.92105 l 1.4352,-3.934135 z" d="m 36.749491,60.81189 h -0.287047 c -0.05065,0.726059 -0.354587,1.080646 -0.979336,1.080646 h -3.343249 v -3.967998 h 3.208168 c 1.046877,0 1.384579,0.405242 1.401464,1.384578 h 0.287046 v -1.992442 h -7.564524 v 0.320817 c 1.181957,0.01689 1.266382,0.506553 1.266382,1.5872 v 6.618959 c 0,1.367693 -0.185736,1.587199 -1.232612,1.654739 v 0.320817 h 4.103079 v -0.320817 c -1.266382,0 -1.469003,-0.354587 -1.469003,-1.300152 V 62.5004 h 3.123743 c 0.810485,0 1.165072,0.303932 1.198842,1.283267 h 0.287047 z" />
id="path431" />
<path <path
d="m 127.45339,43.209629 -0.15196,-2.448282 h -0.25327 c -0.0338,0.05065 -0.1182,0.101308 -0.30393,0.101308 -0.52342,0 -1.4352,-0.675388 -3.56267,-0.675388 -3.5289,0 -6.06161,2.363858 -6.06161,5.63949 0,3.12367 2.46517,5.38622 5.89276,5.38622 1.9924,0 2.73533,-0.60785 3.81595,-0.455887 0.40523,-0.658504 0.86112,-1.705355 1.08062,-2.465167 h -0.32081 c -1.14816,2.043049 -2.78598,2.498936 -4.11987,2.498936 -2.56647,0 -4.76148,-2.245665 -4.76148,-5.301796 0,-2.83663 1.756,-4.879678 4.57575,-4.879678 1.84043,0 3.29252,1.029966 3.84971,2.600244 z" d="m 45.715447,60.81189 h -0.287046 c -0.05066,0.726059 -0.354587,1.080646 -0.979336,1.080646 h -3.34325 v -3.967998 h 3.208169 c 1.046876,0 1.384578,0.405242 1.401463,1.384578 h 0.287047 V 57.316674 H 38.43797 v 0.320817 c 1.181956,0.01689 1.266382,0.506553 1.266382,1.5872 v 6.618959 c 0,1.367693 -0.185736,1.587199 -1.232612,1.654739 v 0.320817 h 4.103079 v -0.320817 c -1.266383,0 -1.469004,-0.354587 -1.469004,-1.300152 V 62.5004 h 3.123744 c 0.810484,0 1.165071,0.303932 1.198842,1.283267 h 0.287046 z" />
id="path433" />
<path <path
d="m 133.41366,50.622012 c -1.16505,0 -1.4352,-0.337694 -1.4352,-1.333891 v -7.159113 c 0,-1.131275 0.37146,-1.367661 1.4352,-1.367661 v -0.320809 h -4.10299 v 0.320809 c 0.94555,0.05065 1.26636,0.303925 1.26636,1.215698 v 7.192883 c 0,1.131275 -0.2195,1.40143 -1.26636,1.452084 v 0.32081 h 4.10299 z" d="m 51.540777,67.498389 c -1.165072,0 -1.435234,-0.337702 -1.435234,-1.333923 v -7.159282 c 0,-1.131301 0.371472,-1.367693 1.435234,-1.367693 v -0.320817 h -4.10308 v 0.320817 c 0.945566,0.05066 1.266383,0.303932 1.266383,1.215727 v 7.193053 c 0,1.131301 -0.219506,1.401463 -1.266383,1.452118 v 0.320817 h 4.10308 z" />
id="path435" />
<path <path
d="m 147.17466,45.40464 c 0,-3.039246 -2.73532,-5.217373 -5.92653,-5.217373 -3.59644,0 -6.1798,2.380743 -6.1798,5.740798 0,3.157439 2.78597,5.284912 6.09537,5.284912 3.27564,0 6.01096,-2.397628 6.01096,-5.808337 z m -1.58717,0.557195 c 0,2.397627 -1.317,4.829024 -4.06921,4.829024 -2.71843,0 -4.86279,-2.22878 -4.86279,-5.386219 0,-2.026164 1.18193,-4.795255 4.15363,-4.795255 2.78598,0 4.77837,2.211895 4.77837,5.35245 z" d="m 63.512285,60.085831 -0.151966,-2.44834 h -0.253276 c -0.03377,0.05066 -0.118196,0.101311 -0.303932,0.101311 -0.523438,0 -1.435234,-0.675404 -3.562756,-0.675404 -3.528986,0 -6.061751,2.363914 -6.061751,5.639623 0,3.123744 2.465225,5.386347 5.8929,5.386347 1.992442,0 2.735386,-0.607864 3.816032,-0.455898 0.405243,-0.658519 0.86114,-1.705395 1.080647,-2.465224 h -0.320817 c -1.148187,2.043097 -2.786042,2.498994 -4.119964,2.498994 -2.566535,0 -4.761598,-2.245718 -4.761598,-5.301921 0,-2.836697 1.75605,-4.879794 4.575862,-4.879794 1.840475,0 3.292594,1.029991 3.849802,2.600306 z" />
id="path437" />
<path <path
d="m 159.97326,51.061014 v -9.421663 c 0,-0.658503 0.27016,-0.878004 1.53651,-0.878004 v -0.320809 h -3.95102 v 0.320809 c 1.35078,0.03377 1.6547,0.219501 1.6547,1.249468 v 6.720111 l -7.95269,-8.290388 h -2.6509 v 0.320809 c 0.59096,0.01689 1.02996,0.151962 1.41831,0.422117 v 8.307273 c 0,0.776696 -0.33769,1.131275 -1.38454,1.131275 h -0.0675 v 0.32081 h 3.91725 v -0.32081 c -1.4352,0 -1.70536,-0.25327 -1.70536,-1.468969 v -7.243536 l 8.74628,9.151507 z" d="m 72.444469,60.81189 h -0.320817 c -0.08443,0.979336 -0.371472,1.266382 -0.979335,1.266382 h -3.022433 v -4.153734 h 3.562756 c 0.607863,0 1.029991,0.303932 1.249497,1.739165 h 0.303932 L 73.102988,57.316674 H 64.99814 v 0.320817 h 0.371473 c 1.131301,0 1.350808,0.405243 1.350808,1.350808 v 7.125512 c 0,1.013106 -0.236392,1.384578 -1.5872,1.384578 h -0.472783 v 0.320817 h 8.965988 l 0.270162,-2.51588 h -0.303932 c -0.422127,1.452119 -0.776715,1.908017 -1.958671,1.908017 h -2.600306 c -0.624748,0 -0.911795,-0.151966 -0.911795,-0.928681 v -3.596526 h 2.853582 c 0.692289,0 1.013106,0.135081 1.148186,1.333923 h 0.320817 z" />
id="path439" />
<path
d="m 168.93903,46.282644 1.13127,3.073016 c 0.0675,0.168847 0.18573,0.422117 0.18573,0.692272 0,0.472772 -0.35458,0.57408 -1.317,0.57408 h -0.43901 v 0.32081 h 4.6433 v -0.32081 c -0.84424,0 -1.19882,-0.168847 -1.53651,-1.063736 l -3.5289,-9.371009 h -1.46897 l 0.15196,0.371464 -3.07302,8.391696 c -0.54031,1.468969 -0.72604,1.6547 -1.82354,1.671585 v 0.32081 h 3.90036 v -0.32081 h -0.27015 c -0.92866,0 -1.36766,-0.168847 -1.36766,-0.624734 0,-0.236386 0.2195,-0.742927 0.33769,-1.063736 l 0.97931,-2.650898 z m -0.28704,-0.742927 h -2.92106 l 1.4352,-3.934135 z"
id="path441" />
<path
d="m 182.413,48.477655 h -0.30393 c -1.06373,1.468969 -1.36766,1.857317 -2.36386,1.857317 h -2.48205 c -0.48965,0 -0.67538,-0.168847 -0.67538,-0.624734 v -7.783847 c 0,-1.046851 0.28704,-1.165044 1.38454,-1.165044 h 0.62474 v -0.320809 h -4.98099 v 0.320809 h 0.23638 c 1.06374,0 1.3339,0.371463 1.3339,1.266352 v 7.479923 c 0,0.86112 -0.28704,1.11439 -1.06374,1.11439 h -0.5572 v 0.32081 h 7.54747 z"
id="path443" />
<path
d="m 17.36535,66.27413 c 0,0.979312 -0.422118,1.232583 -1.333892,1.232583 h -0.287039 v 0.320809 h 5.403104 c 4.271829,0 6.247339,-3.056131 6.247339,-5.60572 0,-2.785976 -1.97551,-5.048526 -6.433071,-5.048526 -0.878004,0 -1.907971,0.01689 -2.83663,0.05065 -0.928658,0.03377 -1.756009,0.06754 -2.380742,0.101308 v 0.32081 h 0.337694 c 0.996197,0 1.283237,0.270155 1.283237,1.36766 z m 1.40143,-8.712506 c 0.202616,-0.01688 0.658503,-0.06754 1.350776,-0.06754 2.363858,0 3.562672,0.590965 4.339368,1.367661 0.996197,0.996198 1.350776,2.380743 1.350776,3.630211 0,1.739124 -0.776696,3.039246 -1.40143,3.647095 -1.046851,1.046852 -1.992395,1.367661 -4.254945,1.367661 -1.333891,0 -1.384545,-0.236386 -1.384545,-0.928659 z"
id="path445" />
<path
d="m 36.157993,60.820371 h -0.320809 c -0.08442,0.979313 -0.371464,1.266353 -0.979313,1.266353 H 31.83551 v -4.153636 h 3.562672 c 0.607849,0 1.029966,0.303924 1.249468,1.739124 h 0.303924 L 36.816497,57.325238 H 28.71184 v 0.32081 h 0.371464 c 1.131275,0 1.350776,0.405233 1.350776,1.350776 v 7.125343 c 0,1.013083 -0.236386,1.384546 -1.587162,1.384546 h -0.472772 v 0.320809 h 8.965776 l 0.270155,-2.51582 h -0.303924 c -0.422118,1.452084 -0.776696,1.907971 -1.958625,1.907971 h -2.600244 c -0.624734,0 -0.911774,-0.151962 -0.911774,-0.928658 v -3.596442 h 2.853514 c 0.692273,0 1.013082,0.135078 1.14816,1.333892 h 0.320809 z"
id="path447" />
<path
d="m 47.53828,65.362356 h -0.303925 c -1.063736,1.468969 -1.367661,1.857317 -2.363858,1.857317 h -2.482051 c -0.489656,0 -0.675388,-0.168847 -0.675388,-0.624734 v -7.783847 c 0,-1.046851 0.28704,-1.165044 1.384545,-1.165044 h 0.624734 v -0.32081 h -4.980986 v 0.32081 h 0.236385 c 1.063737,0 1.333892,0.371463 1.333892,1.266352 v 7.479923 c 0,0.861119 -0.28704,1.11439 -1.063736,1.11439 h -0.557195 v 0.320809 h 7.547461 z"
id="path449" />
<path
d="m 54.410318,66.122167 c 0,1.063737 -0.270155,1.384546 -1.6547,1.384546 H 52.36727 v 0.320809 h 6.1798 c 2.718437,0 3.647095,-1.874202 3.647095,-3.208093 0,-1.317007 -0.928658,-2.346973 -2.51582,-2.819745 v -0.03377 c 1.131275,-0.202617 1.924856,-1.097506 1.924856,-2.059934 0,-0.810465 -0.337694,-1.384545 -1.029967,-1.874202 -0.607849,-0.439002 -1.907971,-0.658503 -3.393825,-0.658503 -0.320809,0 -1.604046,0.01689 -2.532705,0.05065 -0.489656,0.01688 -1.654701,0.08442 -2.127472,0.101308 v 0.32081 h 0.590964 c 1.181929,0 1.300122,0.506541 1.300122,1.468969 z m 1.40143,-8.577427 c 0.422118,-0.01688 1.114391,-0.05065 1.485854,-0.05065 2.076818,0 2.785976,1.080621 2.785976,2.26255 0,1.317007 -0.810466,1.958626 -2.431397,1.958626 h -1.840433 z m 0,4.49133 h 1.823548 c 1.97551,0 2.971707,1.333891 2.971707,2.634013 0,1.317007 -0.641618,2.701552 -2.870399,2.701552 -1.418315,0 -1.924856,-0.455887 -1.924856,-1.739124 z"
id="path451" />
<path
d="m 67.951819,67.506713 c -1.165044,0 -1.435199,-0.337694 -1.435199,-1.333891 v -7.159114 c 0,-1.131274 0.371463,-1.36766 1.435199,-1.36766 v -0.32081 h -4.102982 v 0.32081 c 0.945543,0.05065 1.266353,0.303924 1.266353,1.215698 v 7.192883 c 0,1.131275 -0.219502,1.40143 -1.266353,1.452084 v 0.320809 h 4.102982 z"
id="path453" />
<path
d="m 75.127789,57.933088 h 2.937938 c 0.675388,0 0.979313,0.388348 1.232584,1.874201 h 0.303924 L 79.33208,57.071968 h -0.320809 c -0.03377,0.202616 -0.28704,0.25327 -0.523426,0.25327 h -8.121541 c -0.118193,0 -0.236386,-0.01688 -0.337694,-0.05065 -0.101308,-0.03377 -0.168847,-0.101308 -0.185732,-0.202616 h -0.320809 l -0.270155,2.735321 h 0.303924 c 0.253271,-1.485853 0.557195,-1.874201 1.232583,-1.874201 h 2.937938 v 8.341042 c 0,0.911774 -0.303924,1.232583 -1.333891,1.232583 h -0.624734 v 0.320809 h 5.318681 v -0.320809 h -0.624734 c -1.029967,0 -1.333892,-0.320809 -1.333892,-1.232583 z"
id="path455" />
<path
d="m 91.353956,60.094329 -0.151962,-2.448281 h -0.25327 c -0.03377,0.05065 -0.118193,0.101308 -0.303925,0.101308 -0.523426,0 -1.4352,-0.675388 -3.562672,-0.675388 -3.528902,0 -6.061607,2.363858 -6.061607,5.63949 0,3.12367 2.465166,5.386219 5.89276,5.386219 1.992395,0 2.735322,-0.607849 3.815943,-0.455886 0.405232,-0.658504 0.861119,-1.705355 1.08062,-2.465167 h -0.320809 c -1.14816,2.043049 -2.785976,2.498936 -4.119867,2.498936 -2.566474,0 -4.761486,-2.245665 -4.761486,-5.301796 0,-2.83663 1.756009,-4.879679 4.575754,-4.879679 1.840433,0 3.292517,1.029967 3.849712,2.600244 z"
id="path457" />
<path
d="m 105.45265,62.28934 c 0,-3.039246 -2.73532,-5.217372 -5.926531,-5.217372 -3.596441,0 -6.1798,2.380743 -6.1798,5.740798 0,3.157439 2.785975,5.284911 6.095376,5.284911 3.275635,0 6.010955,-2.397627 6.010955,-5.808337 z m -1.58716,0.557196 c 0,2.397627 -1.31701,4.829024 -4.069216,4.829024 -2.718437,0 -4.862794,-2.228781 -4.862794,-5.38622 0,-2.026164 1.181929,-4.795255 4.153637,-4.795255 2.785973,0 4.778373,2.211896 4.778373,5.352451 z"
id="path459" />
<path
d="m 111.21033,67.506713 c -1.16504,0 -1.4352,-0.337694 -1.4352,-1.333891 v -7.159114 c 0,-1.131274 0.37147,-1.36766 1.4352,-1.36766 v -0.32081 h -4.10298 v 0.32081 c 0.94554,0.05065 1.26635,0.303924 1.26635,1.215698 v 7.192883 c 0,1.131275 -0.2195,1.40143 -1.26635,1.452084 v 0.320809 h 4.10298 z"
id="path461" />
<path
d="m 123.87383,67.945715 v -9.421663 c 0,-0.658503 0.27015,-0.878004 1.53651,-0.878004 v -0.32081 h -3.95102 v 0.32081 c 1.35077,0.03377 1.6547,0.219501 1.6547,1.249468 v 6.72011 l -7.9527,-8.290388 h -2.6509 v 0.32081 c 0.59097,0.01688 1.02997,0.151962 1.41832,0.422117 v 8.307273 c 0,0.776696 -0.33769,1.131275 -1.38455,1.131275 h -0.0675 v 0.320809 h 3.91726 v -0.320809 c -1.4352,0 -1.70536,-0.253271 -1.70536,-1.468969 v -7.243537 l 8.74628,9.151508 z"
id="path463" />
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

678
frontend/src/resources/onbtclogo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
frontend/src/resources/sv/onbtc-preview.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 340 KiB

95
frontend/src/styles.scss
View File

@ -64,7 +64,6 @@ $dropdown-link-active-bg: $active-bg;
--active-bg: #{$active-bg}; --active-bg: #{$active-bg};
--hover-bg: #{$hover-bg}; --hover-bg: #{$hover-bg};
--fg: #{$fg}; --fg: #{$fg};
--color-fg: #ffffff;
--title-fg: #{$title-fg}; --title-fg: #{$title-fg};
--primary: #{$primary}; --primary: #{$primary};
@ -72,7 +71,11 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary}; --tertiary: #{$tertiary};
--success: #{$success}; --success: #{$success};
--info: #{$info}; --info: #{$info};
--link-color: #{$link-color};
--link-hover-color: #{$link-hover-color};
--icon: #f1f1f1; --icon: #f1f1f1;
--skeleton-bg: #2e324e;
--skeleton-bg-light: #5d6182;
--box-bg: #24273e; --box-bg: #24273e;
--stat-box-bg: #181b2d; --stat-box-bg: #181b2d;
@ -81,6 +84,7 @@ $dropdown-link-active-bg: $active-bg;
--transparent-fg: #ffffff66; --transparent-fg: #ffffff66;
--fade-out-box-bg-start: rgba(36, 39, 62, 0); --fade-out-box-bg-start: rgba(36, 39, 62, 0);
--fade-out-box-bg-end: rgba(36, 39, 62, 1); --fade-out-box-bg-end: rgba(36, 39, 62, 1);
--opacity: 0.57;
--testnet: #1d486f; --testnet: #1d486f;
--signet: #6f1d5d; --signet: #6f1d5d;
@ -98,10 +102,15 @@ $dropdown-link-active-bg: $active-bg;
--green: #3bcc49; --green: #3bcc49;
--red: #dc3545; --red: #dc3545;
--yellow: #ffd800; --yellow: #fff000;
--grey: #6c757d; --grey: #6c757d;
--tooltip-grey: #b1b1b1; --tooltip-grey: #b1b1b1;
--orange: #b86d12; --orange: #b86d12;
--search-button: #4d2d77;
--search-button-border: #472a6e;
--search-button-focus: #533180;
--search-button-shadow: #7c58ab80;
} }
html, body { html, body {
@ -171,13 +180,13 @@ main {
} }
.form-control { .form-control {
color: #fff; color: var(--fg);
background-color: var(--secondary); background-color: var(--secondary);
border: 1px solid rgba(17, 19, 31, 0.2); border: 1px solid rgba(17, 19, 31, 0.2);
} }
.form-control:focus { .form-control:focus {
color: #fff; color: var(--fg);
background-color: var(--secondary); background-color: var(--secondary);
} }
@ -188,25 +197,25 @@ main {
.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle { .btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
color: #fff; color: #fff;
background-color: #4d2d77; background-color: var(--search-button);
border-color: #472a6e; border-color: var(--search-button-border);
} }
.btn-purple:focus, .btn-purple.focus { .btn-purple:focus, .btn-purple.focus {
color: #fff; color: #fff;
background-color: #533180; background-color: var(--search-button-focus);
border-color: #4d2d77; border-color: var(--search-button);
box-shadow: 0 0 0 0.2rem rgb(124 88 171 / 50%); box-shadow: 0 0 0 0.2rem var(--search-button-shadow);
} }
.btn-purple:hover { .btn-purple:hover {
color: #fff; color: #fff;
background-color: #533180; background-color: var(--search-button-focus);
border-color: #4d2d77; border-color: var(--search-button);
} }
.form-control.form-control-secondary { .form-control.form-control-secondary {
color: var(--fg); color: #fff;
background-color: var(--secondary); background-color: var(--secondary);
border: 1px solid var(--secondary); border: 1px solid var(--secondary);
} }
@ -229,11 +238,11 @@ main {
position: relative; position: relative;
animation: progress 2s ease-in-out infinite; animation: progress 2s ease-in-out infinite;
background: #2e324e no-repeat; background: var(--skeleton-bg) no-repeat;
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
rgba(255, 255, 255, 0), rgba(255, 255, 255, 0),
#5d6182, var(--skeleton-bg-light),
rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
); );
background-size: 200px 100%; background-size: 200px 100%;
@ -271,14 +280,14 @@ main {
.progress-text { .progress-text {
span { span {
color: var(--fg) !important; color: #fff !important;
} }
} }
.block-size, .blocks-container { .block-size, .blocks-container {
.symbol { .symbol {
font-size: 16px; font-size: 16px;
color: var(--fg) !important; color: #fff !important;
} }
} }
@ -418,18 +427,18 @@ html:lang(ru) .card-title {
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
margin-bottom: 2px; margin-bottom: 2px;
color: var(--fg); color: #fff;
.total-value { .total-value {
float: right; float: right;
} }
} }
.active { .active {
color: yellow !important; color: var(--yellow) !important;
.value, .value,
.total-partial { .total-partial {
color: yellow !important; color: var(--yellow) !important;
.symbol { .symbol {
color: yellow !important; color: var(--yellow) !important;
} }
} }
} }
@ -477,7 +486,7 @@ html:lang(ru) .card-title {
.total-label { .total-label {
width: 100%; width: 100%;
text-align: left; text-align: left;
color: var(--fg); color: #fff;
margin-top: 5px; margin-top: 5px;
font-size: 14px; font-size: 14px;
span { span {
@ -728,19 +737,19 @@ h1, h2, h3 {
} }
.progress-mempool { .progress-mempool {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%); background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--primary) 0%, var(--mainnet-alt) 100%);
} }
.progress-mempool.testnet { .progress-mempool.testnet {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%); background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
} }
.progress-mempool.signet { .progress-mempool.signet {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%); background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--signet) 0%, var(--signet-alt) 100%);
} }
.progress-mempool.liquid { .progress-mempool.liquid {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%); background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
} }
.progress-dark { .progress-dark {
@ -752,11 +761,11 @@ h1, h2, h3 {
} }
.progress-light { .progress-light {
background-color: #2e324e; background-color: var(--skeleton-bg);
} }
.progress.progress-health { .progress.progress-health {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%); background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--primary) 0%, $success 100%);
justify-content: flex-end; justify-content: flex-end;
} }
@ -769,7 +778,7 @@ h1, h2, h3 {
} }
.alert-mempool { .alert-mempool {
color: var(--fg); color: #fff;
background-color: var(--tertiary); background-color: var(--tertiary);
border-color: var(--alert-bg); border-color: var(--alert-bg);
width: 100%; width: 100%;
@ -1137,7 +1146,7 @@ th {
display: block; display: block;
width: 100%; width: 100%;
padding: 1rem 2rem; padding: 1rem 2rem;
color: var(--fg); color: #fff;
font-weight: bold; font-weight: bold;
&:focus, &:hover, &:active { &:focus, &:hover, &:active {
text-decoration: none; text-decoration: none;
@ -1221,7 +1230,7 @@ th {
} }
.blink-bg { .blink-bg {
color: var(--fg); color: #fff;
background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important; background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
animation: shadowyBackground 1s infinite; animation: shadowyBackground 1s infinite;
box-shadow: -10px -15px 75px rgba($taproot, 1); box-shadow: -10px -15px 75px rgba($taproot, 1);
@ -1244,7 +1253,7 @@ app-master-page, app-liquid-master-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
padding-bottom: 60px; padding-bottom: 56px;
@media (min-width: 992px) { @media (min-width: 992px) {
padding-bottom: 0px; padding-bottom: 0px;
} }
@ -1268,8 +1277,10 @@ app-global-footer {
.dropdown-menu { .dropdown-menu {
background-color: var(--bg); background-color: var(--bg);
color: var(--fg);
.dropdown-item:hover, .dropdown-item:focus { .dropdown-item:hover, .dropdown-item:focus {
background-color: var(--active-bg); background-color: var(--active-bg);
color: var(--fg);
} }
} }
@ -1277,3 +1288,25 @@ app-global-footer {
background-color: var(--secondary); background-color: var(--secondary);
border-color: var(--secondary); border-color: var(--secondary);
} }
a {
color: var(--link-color);
&:hover {
color: var(--link-hover-color);
}
}
.badge-primary {
color: var(--fg);
background-color: var(--primary);
}
.badge-info {
background-color: var(--info);
}
.btn-primary {
color: var(--fg);
background-color: var(--primary);
border-color: var(--primary);
}

139
frontend/src/theme-bukele.scss Normal file
View File

@ -0,0 +1,139 @@
/* Theme */
$bg: #11131f;
$active-bg: #000000;
$hover-bg: #12131e;
$fg: #d2d2d2;
$nav-bg: #111e60;
$title-fg: #2055e3;
$taproot: #eba814;
$taproot-light: #d5a90a;
$taproot-dark: #9d7c05;
/* Bootstrap */
$body-bg: $bg;
$body-color: $fg;
$gray-800: $bg;
$gray-700: $fg;
$nav-tabs-link-active-bg: $active-bg;
$primary: #007cfa;
$secondary: #272f4e;
$tertiary: #ff9900;
$success: #0aab2f;
$info: #00ddff;
$h5-font-size: 1.15rem !default;
$pagination-bg: $body-bg;
$pagination-border-color: $gray-800;
$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: $fg;
.input-group-text {
background-color: #1c2031 !important;
border: 1px solid #20263e !important;
}
$link-color: $info;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
$dropdown-bg: $bg;
$dropdown-link-color: $fg;
$dropdown-link-hover-color: $fg;
$dropdown-link-hover-bg: $active-bg;
$dropdown-link-active-color: $fg;
$dropdown-link-active-bg: $active-bg;
:root {
--bg: #{$bg};
--active-bg: #{$active-bg};
--hover-bg: #{$hover-bg};
--fg: #{$fg};
--nav-bg: #{$nav-bg};
--title-fg: #{$title-fg};
--primary: #{$primary};
--secondary: #{$secondary};
--tertiary: #{$tertiary};
--success: #{$success};
--info: #{$info};
--link-color: #{$link-color};
--link-hover-color: #{$link-hover-color};
--icon: #d2d2d2;
--skeleton-bg: #2e324e;
--skeleton-bg-light: #5d6182;
--box-bg: #171c2a;
--stat-box-bg: #0b1018;
--alert-bg: #3a1c61;
--transparent-fg: #ffffffbb;
--fade-out-box-bg-start: rgba(23, 28, 42, 0);
--fade-out-box-bg-end: rgba(23, 28, 42, 1);
--opacity: 0.9;
--testnet: #1d486f;
--signet: #6f1d5d;
--liquid: #116761;
--liquidtestnet: #494a4a;
--mainnet-alt: #9339f4;
--testnet-alt: #183550;
--signet-alt: #471850;
--liquidtestnet-alt: #272e46;
--taproot: #eba814;
--taproot-light: #d5a90a;
--taproot-dark: #9d7c05;
--green: #83fd00;
--red: #ff3d00;
--yellow: #fff000;
--grey: #7e7e7e;
--tooltip-grey: #b1b1b1;
--orange: #ff9f00;
--search-button: #d5a90a;
--search-button-border: #d5a90a;
--search-button-focus: #eba814;
--search-button-shadow: #eba814;
}
.navbar {
--secondary: #041437;
}
.nav-item.active, .btn-purple {
--icon: white;
}
.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
color: #fff;
background-color: var(--search-button);
border-color: var(--search-button-border);
}
.btn-purple:focus, .btn-purple.focus {
color: #fff;
background-color: var(--search-button-focus);
border-color: var(--search-button);
box-shadow: 0 0 0 0.2rem var(--search-button-shadow);
}
.btn-purple:hover {
color: #fff;
background-color: var(--search-button-focus);
border-color: var(--search-button);
}

18
frontend/src/theme-contrast.scss
View File

@ -3,6 +3,7 @@ $bg: #11131f;
$active-bg: #000000; $active-bg: #000000;
$hover-bg: #12131e; $hover-bg: #12131e;
$fg: #fff; $fg: #fff;
$nav-bg: $bg;
$title-fg: #2055e3; $title-fg: #2055e3;
$taproot: #eba814; $taproot: #eba814;
@ -21,7 +22,7 @@ $primary: #007cfa;
$secondary: #272f4e; $secondary: #272f4e;
$tertiary: #6225b2; $tertiary: #6225b2;
$success: #0aab2f; $success: #0aab2f;
$info: #10e0ff; $info: #00ddff;
$h5-font-size: 1.15rem !default; $h5-font-size: 1.15rem !default;
@ -61,7 +62,7 @@ $dropdown-link-active-bg: $active-bg;
--active-bg: #{$active-bg}; --active-bg: #{$active-bg};
--hover-bg: #{$hover-bg}; --hover-bg: #{$hover-bg};
--fg: #{$fg}; --fg: #{$fg};
--color-fg: #fff; --nav-bg: #{$nav-bg};
--title-fg: #{$title-fg}; --title-fg: #{$title-fg};
--primary: #{$primary}; --primary: #{$primary};
@ -69,15 +70,19 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary}; --tertiary: #{$tertiary};
--success: #{$success}; --success: #{$success};
--info: #{$info}; --info: #{$info};
--link-color: #{$link-color};
--link-hover-color: #{$link-hover-color};
--icon: #f1f1f1; --icon: #f1f1f1;
--skeleton-bg: #2e324e;
--skeleton-bg-light: #5d6182;
--box-bg: #171c2a; --box-bg: #171c2a;
--stat-box-bg: #0b1018; --stat-box-bg: #0b1018;
--alert-bg: #3a1c61; --alert-bg: #3a1c61;
--navbar-bg: #212121;
--transparent-fg: #ffffffbb; --transparent-fg: #ffffffbb;
--fade-out-box-bg-start: rgba(23, 28, 42, 0); --fade-out-box-bg-start: rgba(23, 28, 42, 0);
--fade-out-box-bg-end: rgba(23, 28, 42, 1); --fade-out-box-bg-end: rgba(23, 28, 42, 1);
--opacity: 0.9;
--testnet: #1d486f; --testnet: #1d486f;
--signet: #6f1d5d; --signet: #6f1d5d;
@ -95,8 +100,13 @@ $dropdown-link-active-bg: $active-bg;
--green: #83fd00; --green: #83fd00;
--red: #ff3d00; --red: #ff3d00;
--yellow: #ffcc00; --yellow: #fff000;
--grey: #7e7e7e; --grey: #7e7e7e;
--tooltip-grey: #b1b1b1; --tooltip-grey: #b1b1b1;
--orange: #ff9f00; --orange: #ff9f00;
--search-button: #4d2d77;
--search-button-border: #472a6e;
--search-button-focus: #533180;
--search-button-shadow: #7c58ab80;
} }

18
frontend/src/theme-wiz.scss
View File

@ -3,6 +3,7 @@ $bg: #11131f;
$active-bg: #000000; $active-bg: #000000;
$hover-bg: #12131e; $hover-bg: #12131e;
$fg: #fff; $fg: #fff;
$nav-bg: $bg;
$title-fg: #2055e3; $title-fg: #2055e3;
$taproot: #eba814; $taproot: #eba814;
@ -21,7 +22,7 @@ $primary: #007cfa;
$secondary: #272f4e; $secondary: #272f4e;
$tertiary: #6225b2; $tertiary: #6225b2;
$success: #0aab2f; $success: #0aab2f;
$info: #10e0ff; $info: #00ddff;
$h5-font-size: 1.15rem !default; $h5-font-size: 1.15rem !default;
@ -61,7 +62,7 @@ $dropdown-link-active-bg: $active-bg;
--active-bg: #{$active-bg}; --active-bg: #{$active-bg};
--hover-bg: #{$hover-bg}; --hover-bg: #{$hover-bg};
--fg: #{$fg}; --fg: #{$fg};
--color-fg: #fff; --nav-bg: #{$nav-bg};
--title-fg: #{$title-fg}; --title-fg: #{$title-fg};
--primary: #{$primary}; --primary: #{$primary};
@ -69,15 +70,19 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary}; --tertiary: #{$tertiary};
--success: #{$success}; --success: #{$success};
--info: #{$info}; --info: #{$info};
--link-color: #{$link-color};
--link-hover-color: #{$link-hover-color};
--icon: #f1f1f1; --icon: #f1f1f1;
--skeleton-bg: #2e324e;
--skeleton-bg-light: #5d6182;
--box-bg: #171c2a; --box-bg: #171c2a;
--stat-box-bg: #0b1018; --stat-box-bg: #0b1018;
--alert-bg: #3a1c61; --alert-bg: #3a1c61;
--navbar-bg: #212121;
--transparent-fg: #ffffffbb; --transparent-fg: #ffffffbb;
--fade-out-box-bg-start: rgba(23, 28, 42, 0); --fade-out-box-bg-start: rgba(23, 28, 42, 0);
--fade-out-box-bg-end: rgba(23, 28, 42, 1); --fade-out-box-bg-end: rgba(23, 28, 42, 1);
--opacity: 0.57;
--testnet: #1d486f; --testnet: #1d486f;
--signet: #6f1d5d; --signet: #6f1d5d;
@ -95,8 +100,13 @@ $dropdown-link-active-bg: $active-bg;
--green: #83fd00; --green: #83fd00;
--red: #ff3d00; --red: #ff3d00;
--yellow: #ffcc00; --yellow: #fff000;
--grey: #7e7e7e; --grey: #7e7e7e;
--tooltip-grey: #b1b1b1; --tooltip-grey: #b1b1b1;
--orange: #ff9f00; --orange: #ff9f00;
--search-button: #4d2d77;
--search-button-border: #472a6e;
--search-button-focus: #533180;
--search-button-shadow: #7c58ab80;
} }