machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions 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 { } 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];
} }
} }

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 {

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

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

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

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

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="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">🇸🇻</option> <option value="bukele">Bukele</option>
</select> </select>
</div> </div>

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

@ -24,7 +24,7 @@ export class ThemeService {
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');

25
frontend/src/styles.scss
View File

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

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

@ -103,4 +103,9 @@ $dropdown-link-active-bg: $active-bg;
--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;
} }