highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-07 19:38:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

CSS theme changes

Browse Source
This commit is contained in:
natsoni 2024-04-26 16:59:25 +02:00 committed by Mononaut
parent a7e501570c
commit 463e66081c
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
12 changed files with 56 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 {
const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
return 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];
}
}

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) {
return (tx: TxView) => {
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));
} else {
return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
}
} else {
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(
tx,
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 {
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();
}
@ -246,7 +246,7 @@ export default class BlockScene {
this.flip = flip;
this.vertexArray = vertexArray;
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.scene = {

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

@ -177,7 +177,7 @@ export function ageColorFunction(
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)))))));
return {

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

@ -30,7 +30,7 @@ th, td {
}
.badge.badge-accelerated {
background-color: var(--tertiary);
background-color: #653b9c;
box-shadow: #ad7de57f 0px 0px 12px -2px;
color: white;
animation: acceleratePulse 1s infinite;
@ -71,7 +71,7 @@ th, td {
}
@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;}
100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
}

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

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

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

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

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

@ -24,7 +24,7 @@ export class ThemeService {
apply(theme) {
this.theme = theme;
if (theme !== 'default') {
theme === 'contrast' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors;
theme === 'contrast' || theme === 'bukele' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors;
try {
if (!this.style) {
this.style = document.createElement('link');

25
frontend/src/styles.scss
View File

@ -106,6 +106,11 @@ $dropdown-link-active-bg: $active-bg;
--grey: #6c757d;
--tooltip-grey: #b1b1b1;
--orange: #b86d12;
--search-button: #4d2d77;
--search-button-border: #472a6e;
--search-button-focus: #533180;
--search-button-shadow: #7c58ab80;
}
html, body {
@ -192,21 +197,21 @@ main {
.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
color: #fff;
background-color: #4d2d77;
border-color: #472a6e;
background-color: var(--search-button);
border-color: var(--search-button-border);
}
.btn-purple:focus, .btn-purple.focus {
color: #fff;
background-color: #533180;
border-color: #4d2d77;
box-shadow: 0 0 0 0.2rem rgb(124 88 171 / 50%);
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: #533180;
border-color: #4d2d77;
background-color: var(--search-button-focus);
border-color: var(--search-button);
}
.form-control.form-control-secondary {
@ -1299,3 +1304,9 @@ a {
.badge-info {
background-color: var(--info);
}
.btn-primary {
color: var(--fg);
background-color: var(--primary);
border-color: var(--primary);
}

27
frontend/src/theme-bukele.scss
View File

@ -1,9 +1,9 @@
/* Theme */
$bg: #1c1e4d;
$active-bg: #313945;
$bg: #313945;
$active-bg: #000000;
$hover-bg: #E5E5E5;
$fg: #FFFFFF;
$title-fg: #c9a892;
$fg: #ffffff;
$title-fg: #c19a81;
$taproot: #eba814;
$taproot-light: #d5a90a;
@ -17,11 +17,11 @@ $gray-700: $fg;
$nav-tabs-link-active-bg: $active-bg;
$primary: #343992;
$secondary: #32345e;
$tertiary: #a08674;
$primary: #007cfa;
$secondary: #1c1e4d;
$tertiary: #8c7566;
$success: #009900;
$info: #e4d3c8;
$info: #dac3b4;
$h5-font-size: 1.15rem !default;
@ -74,14 +74,14 @@ $dropdown-link-active-bg: $active-bg;
--skeleton-bg: #2e324e;
--skeleton-bg-light: #5d6182;
--box-bg: #15173a;
--stat-box-bg: #0e0f28;
--box-bg: #272d37;
--stat-box-bg: #1c2027;
--alert-bg: #3a1c61;
--navbar-bg: #212121;
--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.7;
--opacity: 0.57;
--testnet: #1d486f;
--signet: #6f1d5d;
@ -103,4 +103,9 @@ $dropdown-link-active-bg: $active-bg;
--grey: #7e7e7e;
--tooltip-grey: #b1b1b1;
--orange: #ff9f00;
--search-button: #645449;
--search-button-border: #605046;
--search-button-focus: #786457;
--search-button-shadow: #a0867480;
}

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

@ -103,4 +103,9 @@ $dropdown-link-active-bg: $active-bg;
--grey: #7e7e7e;
--tooltip-grey: #b1b1b1;
--orange: #ff9f00;
--search-button: #4d2d77;
--search-button-border: #472a6e;
--search-button-focus: #533180;
--search-button-shadow: #7c58ab80;
}

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

@ -103,4 +103,9 @@ $dropdown-link-active-bg: $active-bg;
--grey: #7e7e7e;
--tooltip-grey: #b1b1b1;
--orange: #ff9f00;
--search-button: #4d2d77;
--search-button-border: #472a6e;
--search-button-focus: #533180;
--search-button-shadow: #7c58ab80;
}