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 { .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;

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;

2
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);

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)",
}; };
} }

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

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;

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 {

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;

65
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,9 +71,11 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary}; --tertiary: #{$tertiary};
--success: #{$success}; --success: #{$success};
--info: #{$info}; --info: #{$info};
--link-color: #{$info}; --link-color: #{$link-color};
--link-hover-color: #{$link-hover-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;
@ -83,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;
@ -100,7 +102,7 @@ $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;
@ -173,13 +175,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);
} }
@ -208,7 +210,7 @@ main {
} }
.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);
} }
@ -231,11 +233,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%;
@ -273,14 +275,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;
} }
} }
@ -420,18 +422,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;
} }
} }
} }
@ -479,7 +481,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 {
@ -730,19 +732,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 {
@ -754,11 +756,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;
} }
@ -771,7 +773,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%;
@ -1139,7 +1141,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;
@ -1223,7 +1225,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);
@ -1246,7 +1248,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;
} }
@ -1270,8 +1272,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);
} }
} }
@ -1285,4 +1289,13 @@ a {
&:hover { &:hover {
color: var(--link-hover-color); 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}; --active-bg: #{$active-bg};
--hover-bg: #{$hover-bg}; --hover-bg: #{$hover-bg};
--fg: #{$fg}; --fg: #{$fg};
--color-fg: #fff;
--title-fg: #{$title-fg}; --title-fg: #{$title-fg};
--primary: #{$primary}; --primary: #{$primary};
@ -69,17 +68,20 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary}; --tertiary: #{$tertiary};
--success: #{$success}; --success: #{$success};
--info: #{$info}; --info: #{$info};
--link-color: #{$info}; --link-color: #{$link-color};
--link-hover-color: #{$link-hover-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; --navbar-bg: #121212;
--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;
@ -97,7 +99,7 @@ $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;

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

@ -61,7 +61,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: #fff;
--title-fg: #{$title-fg}; --title-fg: #{$title-fg};
--primary: #{$primary}; --primary: #{$primary};
@ -69,17 +68,20 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary}; --tertiary: #{$tertiary};
--success: #{$success}; --success: #{$success};
--info: #{$info}; --info: #{$info};
--link-color: #{$info}; --link-color: #{$link-color};
--link-hover-color: #{$link-hover-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; --navbar-bg: #121212;
--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;
@ -97,7 +99,7 @@ $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;