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

More css included in color themes

Browse Source
This commit is contained in:
natsoni 2024-04-23 18:59:26 +02:00 committed by Mononaut
parent 6a767ce5c4
commit 4a76cb083a
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
38 changed files with 124 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
.qr-wrapper {
background-color: var(--fg);
background-color: #fff;
padding: 10px;
padding-bottom: 5px;
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 {
position: relative;
color: #ffffff91;
color: var(--fg);
opacity: var(--opacity);
margin-top: -13px;
font-size: 10px;
text-transform: uppercase;

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

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

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

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

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

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

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

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

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

@ -63,7 +63,7 @@
.fee-span {
font-size: 11px;
margin-bottom: 5px;
color: #fff000;
color: var(--yellow);
}
.transaction-count {
@ -130,7 +130,7 @@
height: 0;
border-left: 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 {

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

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

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

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

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

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

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

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

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

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">
<defs>
<linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#105fb0" />
<stop offset="100%" stop-color="#9339f4" />
<stop offset="0%" stop-color="var(--primary)" />
<stop offset="100%" stop-color="var(--mainnet-alt)" />
</linearGradient>
<linearGradient id="diff-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#2486eb" />

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

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

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

@ -79,7 +79,7 @@
display: flex;
flex-direction: row;
transition: background-color 1s;
color: var(--color-fg);
color: #fff;
&.priority {
@media (767px < width < 992px), (width < 576px) {
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>;
recommendedFees$: Observable<Recommendedfees>;
themeSubscription: Subscription;
gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
noPriority = '#2e324e';
gradient = 'linear-gradient(to right, var(--skeleton-bg), var(--skeleton-bg))';
noPriority = 'var(--skeleton-bg)';
fees: Recommendedfees;
constructor(

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

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

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

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

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

@ -56,7 +56,7 @@
.fee-span {
font-size: 11px;
margin-bottom: 5px;
color: #fff000;
color: var(--yellow);
}
.transaction-count {
@ -119,7 +119,7 @@
height: 0;
border-left: 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 {

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

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

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

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

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

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

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

@ -103,7 +103,8 @@ td.amount.large {
margin-top: 10px;
}
.assetBox {
background-color: #653b9c90;
background: color-mix(in srgb, var(--tertiary) 56%, transparent);
}
.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 {
position: absolute;
background: rgba(#11131f, 0.95);
background: color-mix(in srgb, var(--active-bg) 95%, transparent);
border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
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();
gradientColors = {
'': ['#9339f4', '#105fb0', '#9339f400'],
'': ['var(--mainnet-alt)', 'var(--primary)', 'color-mix(in srgb, var(--mainnet-alt) 1%, transparent)'],
// liquid: ['#116761', '#183550'],
liquid: ['#09a197', '#0f62af', '#09a19700'],
// 'liquidtestnet': ['#494a4a', '#272e46'],
@ -96,7 +96,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
signet: ['#d24fc8', '#a84fd2', '#d24fc800'],
};
gradient: string[] = ['#105fb0', '#105fb0'];
gradient: string[] = ['var(--primary)', 'var(--primary)'];
constructor(
private router: Router,

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

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

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

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

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

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

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

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

65
frontend/src/styles.scss
View File

@ -64,7 +64,6 @@ $dropdown-link-active-bg: $active-bg;
--active-bg: #{$active-bg};
--hover-bg: #{$hover-bg};
--fg: #{$fg};
--color-fg: #ffffff;
--title-fg: #{$title-fg};
--primary: #{$primary};
@ -72,9 +71,11 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary};
--success: #{$success};
--info: #{$info};
--link-color: #{$info};
--link-color: #{$link-color};
--link-hover-color: #{$link-hover-color};
--icon: #f1f1f1;
--skeleton-bg: #2e324e;
--skeleton-bg-light: #5d6182;
--box-bg: #24273e;
--stat-box-bg: #181b2d;
@ -83,6 +84,7 @@ $dropdown-link-active-bg: $active-bg;
--transparent-fg: #ffffff66;
--fade-out-box-bg-start: rgba(36, 39, 62, 0);
--fade-out-box-bg-end: rgba(36, 39, 62, 1);
--opacity: 0.57;
--testnet: #1d486f;
--signet: #6f1d5d;
@ -100,7 +102,7 @@ $dropdown-link-active-bg: $active-bg;
--green: #3bcc49;
--red: #dc3545;
--yellow: #ffd800;
--yellow: #fff000;
--grey: #6c757d;
--tooltip-grey: #b1b1b1;
--orange: #b86d12;
@ -173,13 +175,13 @@ main {
}
.form-control {
color: #fff;
color: var(--fg);
background-color: var(--secondary);
border: 1px solid rgba(17, 19, 31, 0.2);
}
.form-control:focus {
color: #fff;
color: var(--fg);
background-color: var(--secondary);
}
@ -208,7 +210,7 @@ main {
}
.form-control.form-control-secondary {
color: var(--fg);
color: #fff;
background-color: var(--secondary);
border: 1px solid var(--secondary);
}
@ -231,11 +233,11 @@ main {
position: relative;
animation: progress 2s ease-in-out infinite;
background: #2e324e no-repeat;
background: var(--skeleton-bg) no-repeat;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#5d6182,
var(--skeleton-bg-light),
rgba(255, 255, 255, 0)
);
background-size: 200px 100%;
@ -273,14 +275,14 @@ main {
.progress-text {
span {
color: var(--fg) !important;
color: #fff !important;
}
}
.block-size, .blocks-container {
.symbol {
font-size: 16px;
color: var(--fg) !important;
color: #fff !important;
}
}
@ -420,18 +422,18 @@ html:lang(ru) .card-title {
font-size: 12px;
font-weight: 700;
margin-bottom: 2px;
color: var(--fg);
color: #fff;
.total-value {
float: right;
}
}
.active {
color: yellow !important;
color: var(--yellow) !important;
.value,
.total-partial {
color: yellow !important;
color: var(--yellow) !important;
.symbol {
color: yellow !important;
color: var(--yellow) !important;
}
}
}
@ -479,7 +481,7 @@ html:lang(ru) .card-title {
.total-label {
width: 100%;
text-align: left;
color: var(--fg);
color: #fff;
margin-top: 5px;
font-size: 14px;
span {
@ -730,19 +732,19 @@ h1, h2, h3 {
}
.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 {
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 {
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 {
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 {
@ -754,11 +756,11 @@ h1, h2, h3 {
}
.progress-light {
background-color: #2e324e;
background-color: var(--skeleton-bg);
}
.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;
}
@ -771,7 +773,7 @@ h1, h2, h3 {
}
.alert-mempool {
color: var(--fg);
color: #fff;
background-color: var(--tertiary);
border-color: var(--alert-bg);
width: 100%;
@ -1139,7 +1141,7 @@ th {
display: block;
width: 100%;
padding: 1rem 2rem;
color: var(--fg);
color: #fff;
font-weight: bold;
&:focus, &:hover, &:active {
text-decoration: none;
@ -1223,7 +1225,7 @@ th {
}
.blink-bg {
color: var(--fg);
color: #fff;
background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
animation: shadowyBackground 1s infinite;
box-shadow: -10px -15px 75px rgba($taproot, 1);
@ -1246,7 +1248,7 @@ app-master-page, app-liquid-master-page {
display: flex;
flex-direction: column;
min-height: 100vh;
padding-bottom: 60px;
padding-bottom: 56px;
@media (min-width: 992px) {
padding-bottom: 0px;
}
@ -1270,8 +1272,10 @@ app-global-footer {
.dropdown-menu {
background-color: var(--bg);
color: var(--fg);
.dropdown-item:hover, .dropdown-item:focus {
background-color: var(--active-bg);
color: var(--fg);
}
}
@ -1285,4 +1289,13 @@ a {
&:hover {
color: var(--link-hover-color);
}
}
}
.badge-primary {
color: var(--fg);
background-color: var(--primary);
}
.badge-info {
background-color: var(--info);
}

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

@ -61,7 +61,6 @@ $dropdown-link-active-bg: $active-bg;
--active-bg: #{$active-bg};
--hover-bg: #{$hover-bg};
--fg: #{$fg};
--color-fg: #fff;
--title-fg: #{$title-fg};
--primary: #{$primary};
@ -69,17 +68,20 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary};
--success: #{$success};
--info: #{$info};
--link-color: #{$info};
--link-color: #{$link-color};
--link-hover-color: #{$link-hover-color};
--icon: #f1f1f1;
--skeleton-bg: #2e324e;
--skeleton-bg-light: #5d6182;
--box-bg: #171c2a;
--stat-box-bg: #0b1018;
--alert-bg: #3a1c61;
--navbar-bg: #212121;
--navbar-bg: #121212;
--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;
@ -97,7 +99,7 @@ $dropdown-link-active-bg: $active-bg;
--green: #83fd00;
--red: #ff3d00;
--yellow: #ffcc00;
--yellow: #fff000;
--grey: #7e7e7e;
--tooltip-grey: #b1b1b1;
--orange: #ff9f00;

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

@ -61,7 +61,6 @@ $dropdown-link-active-bg: $active-bg;
--active-bg: #{$active-bg};
--hover-bg: #{$hover-bg};
--fg: #{$fg};
--color-fg: #fff;
--title-fg: #{$title-fg};
--primary: #{$primary};
@ -69,17 +68,20 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary};
--success: #{$success};
--info: #{$info};
--link-color: #{$info};
--link-color: #{$link-color};
--link-hover-color: #{$link-hover-color};
--icon: #f1f1f1;
--skeleton-bg: #2e324e;
--skeleton-bg-light: #5d6182;
--box-bg: #171c2a;
--stat-box-bg: #0b1018;
--alert-bg: #3a1c61;
--navbar-bg: #212121;
--navbar-bg: #121212;
--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.57;
--testnet: #1d486f;
--signet: #6f1d5d;
@ -97,7 +99,7 @@ $dropdown-link-active-bg: $active-bg;
--green: #83fd00;
--red: #ff3d00;
--yellow: #ffcc00;
--yellow: #fff000;
--grey: #7e7e7e;
--tooltip-grey: #b1b1b1;
--orange: #ff9f00;