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

Replace more hardcoded css

Browse Source
This commit is contained in:
natsoni 2024-04-06 15:48:35 +09:00
parent cde3d878b1
commit 7e920f4bae
No known key found for this signature in database
GPG Key ID: C65917583181743B
56 changed files with 128 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/about/about-sponsors.component.scss
View File

@ -14,7 +14,7 @@
} }
.become-sponsor { .become-sponsor {
background-color: #1d1f31; background-color: var(--bg);
border-radius: 16px; border-radius: 16px;
padding: 12px 20px; padding: 12px 20px;
width: 400px; width: 400px;

4
frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
View File

@ -92,7 +92,7 @@
&.target { &.target {
.fill { .fill {
background: #653b9c; background: var(--tertiary);
} }
.fee { .fee {
position: absolute; position: absolute;
@ -114,7 +114,7 @@
} }
&.active, &:hover { &.active, &:hover {
.fill { .fill {
background: #105fb0; background: var(--primary);
} }
.line { .line {
.fee-rate .label { .fee-rate .label {

4
frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
View File

@ -179,10 +179,10 @@
<ng-container> <ng-container>
<tr class="group-first"> <tr class="group-first">
<td class="item"> <td class="item">
<b style="background-color: #105fb0;" class="p-1 pl-0">Maximum acceleration cost</b> <b style="background-color: var(--primary);" class="p-1 pl-0">Maximum acceleration cost</b>
</td> </td>
<td class="amt"> <td class="amt">
<span style="background-color: #105fb0" class="p-1 pl-0"> <span style="background-color: var(--primary)" class="p-1 pl-0">
{{ maxCost | number }} {{ maxCost | number }}
</span> </span>
</td> </td>

4
frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
View File

@ -1,6 +1,6 @@
.fee-card { .fee-card {
padding: 15px; padding: 15px;
background-color: #1d1f31; background-color: var(--bg);
.feerate { .feerate {
display: flex; display: flex;
@ -23,7 +23,7 @@
} }
.feerate.active { .feerate.active {
background-color: #105fb0 !important; background-color: var(--primary) !important;
opacity: 1; opacity: 1;
border: 1px solid #007fff !important; border: 1px solid #007fff !important;
} }

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

@ -62,7 +62,7 @@ h5 {
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
} }
.disabled { .disabled {

2
frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
View File

@ -1,5 +1,5 @@
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;

4
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
View File

@ -59,7 +59,7 @@ tr, td, th {
} }
.progress { .progress {
background-color: #2d3348; background-color: var(--secondary);
} }
.txid { .txid {
@ -148,7 +148,7 @@ tr, td, th {
.tooltip-custom .tooltiptext { .tooltip-custom .tooltiptext {
visibility: hidden; visibility: hidden;
color: #fff; color: var(--fg);
text-align: center; text-align: center;
padding: 5px 0; padding: 5px 0;
border-radius: 6px; border-radius: 6px;

4
frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
View File

@ -40,7 +40,7 @@
<a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]"> <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-accelerations">Mempool Goggles: Accelerations</h5> <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-accelerations">Mempool Goggles: Accelerations</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<div class="mempool-block-wrapper" *ngIf="webGlEnabled"> <div class="mempool-block-wrapper" *ngIf="webGlEnabled">
<app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview> <app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
@ -85,7 +85,7 @@
<a class="title-link" href="" [routerLink]="['/acceleration/list' | relativeUrl]"> <a class="title-link" href="" [routerLink]="['/acceleration/list' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Recent Accelerations</h5> <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Recent Accelerations</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="minedAccelerations$"></app-accelerations-list> <app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="minedAccelerations$"></app-accelerations-list>
</div> </div>

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

@ -7,7 +7,7 @@
} }
.card { .card {
background-color: #1d1f31; background-color: var(--bg);
} }
.graph-card { .graph-card {
@ -29,10 +29,10 @@
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
} }
.card-title > a { .card-title > a {
color: #4a68b9; color: var(--title-fg);
} }
.card-body.pool-ranking { .card-body.pool-ranking {

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

@ -8,12 +8,14 @@ import { Observable, catchError, combineLatest, distinctUntilChanged, interval,
import { Color } from '../../block-overview-graph/sprite-types'; import { Color } from '../../block-overview-graph/sprite-types';
import { hexToColor } from '../../block-overview-graph/utils'; import { hexToColor } from '../../block-overview-graph/utils';
import TxView from '../../block-overview-graph/tx-view'; import TxView from '../../block-overview-graph/tx-view';
import { feeLevels, defaultMempoolFeeColors } from '../../../app.constants'; import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants';
import { ServicesApiServices } from '../../../services/services-api.service'; import { ServicesApiServices } from '../../../services/services-api.service';
import { detectWebGL } from '../../../shared/graphs.utils'; import { detectWebGL } from '../../../shared/graphs.utils';
import { ThemeService } from '../../../services/theme.service';
const acceleratedColor: Color = hexToColor('8F5FF6'); const acceleratedColor: Color = hexToColor('8F5FF6');
const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F')); const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
const contrastColors = contrastMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
interface AccelerationBlock extends BlockExtended { interface AccelerationBlock extends BlockExtended {
accelerationCount: number, accelerationCount: number,
@ -34,6 +36,7 @@ export class AcceleratorDashboardComponent implements OnInit {
webGlEnabled = true; webGlEnabled = true;
graphHeight: number = 300; graphHeight: number = 300;
theme: ThemeService;
constructor( constructor(
private seoService: SeoService, private seoService: SeoService,
@ -128,7 +131,7 @@ export class AcceleratorDashboardComponent implements OnInit {
} 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 normalColors[feeLevelIndex] || normalColors[defaultMempoolFeeColors.length - 1]; return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
} }
} }

2
frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
View File

@ -1,5 +1,5 @@
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;

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

@ -3,7 +3,7 @@
} }
.qr-wrapper { .qr-wrapper {
background-color: #FFF; background-color: var(--fg);
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: #FFF; background-color: var(--fg);
padding: 10px; padding: 10px;
padding-bottom: 5px; padding-bottom: 5px;
display: inline-block; display: inline-block;

2
frontend/src/app/components/app/app.component.ts
View File

@ -4,7 +4,6 @@ import { Router, NavigationEnd } from '@angular/router';
import { StateService } from '../../services/state.service'; import { StateService } from '../../services/state.service';
import { OpenGraphService } from '../../services/opengraph.service'; import { OpenGraphService } from '../../services/opengraph.service';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap'; import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
import { ThemeService } from 'src/app/services/theme.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -20,7 +19,6 @@ export class AppComponent implements OnInit {
private stateService: StateService, private stateService: StateService,
private openGraphService: OpenGraphService, private openGraphService: OpenGraphService,
private location: Location, private location: Location,
private theme: ThemeService,
tooltipConfig: NgbTooltipConfig, tooltipConfig: NgbTooltipConfig,
@Inject(LOCALE_ID) private locale: string, @Inject(LOCALE_ID) private locale: string,
) { ) {

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

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

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

@ -95,7 +95,7 @@
} }
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: var(--title-fg);
} }
.card-text { .card-text {
font-size: 18px; font-size: 18px;

16
frontend/src/app/components/block-filters/block-filters.component.scss
View File

@ -64,7 +64,7 @@
.filter-tag { .filter-tag {
font-size: 0.9em; font-size: 0.9em;
background: #181b2daf; background: #181b2daf;
border: solid 1px #105fb0; border: solid 1px var(--primary);
color: white; color: white;
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
@ -73,15 +73,15 @@
pointer-events: all; pointer-events: all;
&.selected { &.selected {
background-color: #105fb0; background-color: var(--primary);
} }
} }
&.any-mode { &.any-mode {
.filter-tag { .filter-tag {
border: solid 1px #1a9436; border: solid 1px var(--success);
&.selected { &.selected {
background-color: #1a9436; background-color: var(--success);
} }
} }
} }
@ -107,15 +107,15 @@
} }
&.blue { &.blue {
border: solid 1px #105fb0; border: solid 1px var(--primary);
&.active { &.active {
background: #105fb0; background: var(--primary);
} }
} }
&.green { &.green {
border: solid 1px #1a9436; border: solid 1px var(--success);
&.active { &.active {
background: #1a9436; background: var(--success);
} }
} }
} }

14
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: #653b9c; background-color: var(--tertiary);
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;
@ -51,27 +51,27 @@ th, td {
.filter-tag { .filter-tag {
background: #181b2daf; background: #181b2daf;
border: solid 1px #105fb0; border: solid 1px var(--primary);
color: white; color: white;
transition: background-color 300ms; transition: background-color 300ms;
&.matching { &.matching {
background-color: #105fb0; background-color: var(--primary);
} }
} }
&.any-mode { &.any-mode {
.filter-tag { .filter-tag {
border: solid 1px #1a9436; border: solid 1px var(--success);
&.matching { &.matching {
background-color: #1a9436; background-color: var(--success);
} }
} }
} }
} }
@keyframes acceleratePulse { @keyframes acceleratePulse {
0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; } 0% { background-color: var(--tertiary); 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: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; } 100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
} }

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

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

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

@ -144,7 +144,7 @@
} }
.loading .bitcoin-block.mined-block { .loading .bitcoin-block.mined-block {
background: #2d3348; background: var(--secondary);
} }
@keyframes opacityPulse { @keyframes opacityPulse {

2
frontend/src/app/components/blocks-list/blocks-list.component.scss
View File

@ -266,7 +266,7 @@ tr, td, th {
.tooltip-custom .tooltiptext { .tooltip-custom .tooltiptext {
visibility: hidden; visibility: hidden;
color: #fff; color: var(--fg);
text-align: center; text-align: center;
padding: 5px 0; padding: 5px 0;
border-radius: 6px; border-radius: 6px;

4
frontend/src/app/components/clock-face/clock-face.component.scss
View File

@ -29,8 +29,8 @@
} }
&.hour { &.hour {
fill: #105fb0; fill: var(--primary);
stroke: #105fb0; stroke: var(--primary);
stroke-width: 6px; stroke-width: 6px;
} }
} }

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

@ -161,7 +161,7 @@
} }
.side.bottom { .side.bottom {
background: #105fb0; background: var(--primary);
transform: rotateX(-90deg); transform: rotateX(-90deg);
margin-top: var(--half-side); margin-top: var(--half-side);
} }

2
frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
View File

@ -40,7 +40,7 @@
<h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5> <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
<div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div> <div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
<div class="progress small-bar"> <div class="progress small-bar">
<div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div> <div class="progress-bar" role="progressbar" style="width: 15%; background-color: var(--primary)" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
</div> </div>
</div> </div>
<div class="item" *ngIf="showHalving"> <div class="item" *ngIf="showHalving">

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

@ -79,12 +79,12 @@
} }
.card { .card {
background-color: #1d1f31; background-color: var(--bg);
height: 100%; height: 100%;
} }
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 1rem; font-size: 1rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -94,7 +94,7 @@
.progress { .progress {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
background-color: #2d3348; background-color: var(--secondary);
height: 1.1rem; height: 1.1rem;
max-width: 180px; max-width: 180px;
} }

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

@ -177,10 +177,10 @@
.epoch-blocks { .epoch-blocks {
display: block; display: block;
width: 100%; width: 100%;
background: #2d3348; background: var(--secondary);
.rect { .rect {
fill: #2d3348; fill: var(--secondary);
&.behind { &.behind {
fill: #D81B60; fill: #D81B60;
@ -189,7 +189,7 @@
fill: url(#diff-gradient); fill: url(#diff-gradient);
} }
&.ahead { &.ahead {
fill: #1a9436; fill: var(--success);
} }
&.hover { &.hover {
@ -223,12 +223,12 @@
height: 100%; height: 100%;
} }
.background { .background {
background: linear-gradient(to right, #105fb0, #9339f4); background: linear-gradient(to right, var(--primary), #9339f4);
left: 0; left: 0;
right: 0; right: 0;
} }
.remaining { .remaining {
background: #2d3348; background: var(--secondary);
right: 0; right: 0;
} }
.label { .label {

2
frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
View File

@ -9,7 +9,7 @@
<div class="item"> <div class="item">
<a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]" [fragment]="'expired'"> <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]" [fragment]="'expired'">
<h5 class="card-title"><ng-container i18n="liquid.total-expired">Total Expired</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5> <h5 class="card-title"><ng-container i18n="liquid.total-expired">Total Expired</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a> </a>
<div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text"> <div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text">
<div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos" ngbTooltip="Total amount of BTC held in Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} <span style="color: #b86d12;">BTC</span></div> <div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos" ngbTooltip="Total amount of BTC held in Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} <span style="color: #b86d12;">BTC</span></div>

2
frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
View File

@ -14,7 +14,7 @@
} }
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;

2
frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
View File

@ -33,7 +33,7 @@ tr, td, th {
} }
.progress { .progress {
background-color: #2d3348; background-color: var(--secondary);
} }
.address { .address {

4
frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
View File

@ -2,7 +2,7 @@
<div class="fee-estimation-container"> <div class="fee-estimation-container">
<div class="item"> <div class="item">
<a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]"> <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5> <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a> </a>
<div class="card-text"> <div class="card-text">
<div class="fee-text">{{ federationWalletStats.address_count }} <span i18n="shared.addresses">addresses</span></div> <div class="fee-text">{{ federationWalletStats.address_count }} <span i18n="shared.addresses">addresses</span></div>
@ -16,7 +16,7 @@
<div class="fee-estimation-container loading-container"> <div class="fee-estimation-container loading-container">
<div class="item"> <div class="item">
<a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]"> <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5> <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a> </a>
<div class="card-text"> <div class="card-text">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>

2
frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
View File

@ -15,7 +15,7 @@
.card-title { .card-title {
margin: 0; margin: 0;
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
font-size: 1rem; font-size: 1rem;
white-space: nowrap; white-space: nowrap;

2
frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
View File

@ -24,7 +24,7 @@ tr, td, th {
} }
.progress { .progress {
background-color: #2d3348; background-color: var(--secondary);
} }
.txid { .txid {

2
frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
View File

@ -27,7 +27,7 @@ tr, td, th {
} }
.progress { .progress {
background-color: #2d3348; background-color: var(--secondary);
} }
.transaction { .transaction {

4
frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
View File

@ -2,7 +2,7 @@
<div class="fee-estimation-container"> <div class="fee-estimation-container">
<div class="item"> <div class="item">
<a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]"> <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5> <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a> </a>
</div> </div>
</div> </div>
@ -26,7 +26,7 @@
<div class="fee-estimation-container loading-container"> <div class="fee-estimation-container loading-container">
<div class="item"> <div class="item">
<a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]"> <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5> <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a> </a>
</div> </div>
</div> </div>

2
frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
View File

@ -15,7 +15,7 @@
.card-title { .card-title {
margin: 0; margin: 0;
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
font-size: 1rem; font-size: 1rem;
white-space: nowrap; white-space: nowrap;

2
frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
View File

@ -23,7 +23,7 @@
<div class="item"> <div class="item">
<!-- <a class="title-link" [routerLink]="['/audit/emergency-spends' | relativeUrl]"> <!-- <a class="title-link" [routerLink]="['/audit/emergency-spends' | relativeUrl]">
<h5 class="card-title"><ng-container i18n="liquid.forfeited-utxos">Forfeited UTXOs</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5> <h5 class="card-title"><ng-container i18n="liquid.forfeited-utxos">Forfeited UTXOs</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
</a> --> </a> -->
<h5 class="card-title" i18n="liquid.emergency-keys">Emergency Keys</h5> <h5 class="card-title" i18n="liquid.emergency-keys">Emergency Keys</h5>
<div *ngIf="(emergencyUtxosStats$ | async) as emergencyUtxosStats; else loadingData" class="card-text"> <div *ngIf="(emergencyUtxosStats$ | async) as emergencyUtxosStats; else loadingData" class="card-text">

2
frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
View File

@ -22,7 +22,7 @@
.card-title { .card-title {
margin-bottom: 4px; margin-bottom: 4px;
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
font-size: 1rem; font-size: 1rem;
white-space: nowrap; white-space: nowrap;

2
frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
View File

@ -141,7 +141,7 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
show: true, show: true,
offsetCenter: [0, '-127%'], offsetCenter: [0, '-127%'],
fontSize: 18, fontSize: 18,
color: '#4a68b9', color: 'var(--title-fg)',
fontFamily: 'inherit', fontFamily: 'inherit',
fontWeight: 500, fontWeight: 500,
}, },

2
frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
View File

@ -13,7 +13,7 @@
} }
.card-title { .card-title {
color: #4a68b9; color: var(--title-fg);
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;

10
frontend/src/app/components/menu/menu.component.scss
View File

@ -28,7 +28,7 @@
.sidenav.open { .sidenav.open {
left: 0px; left: 0px;
display: block; display: block;
background-color: #1d1f31; background-color: var(--bg);
} }
.sidenav a, button{ .sidenav a, button{
@ -42,7 +42,7 @@
.sidenav nav { .sidenav nav {
width: 100%; width: 100%;
height: calc(100vh - 65px); height: calc(100vh - 65px);
background-color: #1d1f31; background-color: var(--bg);
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-top: 20px; padding-top: 20px;
@ -61,7 +61,7 @@
} }
.badge-og { .badge-og {
background-color: #4a68b9; background-color: var(--title-fg);
} }
.badge-pleb { .badge-pleb {
@ -73,7 +73,7 @@
} }
.badge-whale { .badge-whale {
background-color: #653b9c; background-color: var(--tertiary);
} }
.badge-silver { .badge-silver {
@ -85,5 +85,5 @@
} }
.badge-platinum { .badge-platinum {
background-color: #653b9c; background-color: var(--tertiary);
} }

2
frontend/src/app/components/rbf-list/rbf-list.component.scss
View File

@ -25,7 +25,7 @@
} }
.timeline-wrapper.mined { .timeline-wrapper.mined {
border: solid 4px #1a9436; border: solid 4px var(--success);
} }
.no-replacements { .no-replacements {

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

@ -101,7 +101,7 @@
right: -5px; right: -5px;
top: 0; top: 0;
transform: translateY(-50%); transform: translateY(-50%);
background: #105fb0; background: var(--primary);
border-radius: 5px; border-radius: 5px;
&.left { &.left {
@ -112,7 +112,7 @@
} }
&.fullrbf { &.fullrbf {
background: #1bd8f4; background: var(--info);
} }
} }
&.first-node { &.first-node {
@ -165,20 +165,20 @@
&.mined { &.mined {
.shape-border { .shape-border {
background: #1a9436; background: var(--success);
} }
} }
.shape-border:hover { .shape-border:hover {
padding: 0px; padding: 0px;
.shape { .shape {
background: #1bd8f4; background: var(--info);
} }
} }
&.selected.mined { &.selected.mined {
.shape-border { .shape-border {
background: #1a9436; background: var(--success);
height: calc(1em + 16px); height: calc(1em + 16px);
width: calc(1em + 16px); width: calc(1em + 16px);
@ -190,7 +190,7 @@
padding: 4px; padding: 4px;
.shape { .shape {
border-width: 1px; border-width: 1px;
border-color: #1bd8f4 border-color: var(--info)
} }
} }
} }
@ -207,9 +207,9 @@
width: 20px; width: 20px;
height: 108px; height: 108px;
bottom: 50%; bottom: 50%;
border-right: solid 10px #105fb0; border-right: solid 10px var(--primary);
&.fullrbf { &.fullrbf {
border-right: solid 10px #1bd8f4; border-right: solid 10px var(--info);
} }
&.last-pipe { &.last-pipe {
height: 150px; height: 150px;
@ -218,10 +218,10 @@
} }
.corner { .corner {
border-bottom: solid 10px #105fb0; border-bottom: solid 10px var(--primary);
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
&.fullrbf { &.fullrbf {
border-bottom: solid 10px #1bd8f4; border-bottom: solid 10px var(--info);
} }
} }
} }

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

@ -32,7 +32,7 @@
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
transition: opacity 500ms; transition: opacity 500ms;
background: radial-gradient(#1d1f31 0%, transparent 50%); background: radial-gradient(var(--bg) 0%, transparent 50%);
&:hover { &:hover {
opacity: 1; opacity: 1;

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

@ -113,7 +113,7 @@
max-width: 100%; max-width: 100%;
margin: auto; margin: auto;
table-layout: auto; table-layout: auto;
background: #2d3348af; background: var(--secondary)af;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;

8
frontend/src/app/components/transaction/transaction.component.scss
View File

@ -61,7 +61,7 @@
} }
.badge.badge-accelerated { .badge.badge-accelerated {
background-color: #653b9c; background-color: var(--tertiary);
color: white; color: white;
} }
@ -256,7 +256,7 @@
} }
.blink-bg { .blink-bg {
color: #fff; color: var(--fg);
background: repeating-linear-gradient(#daad0a 0%, #daad0a 5%, #987805 100%) !important; background: repeating-linear-gradient(#daad0a 0%, #daad0a 5%, #987805 100%) !important;
animation: shadowyBackground 1s infinite; animation: shadowyBackground 1s infinite;
box-shadow: 0px 0px 20px rgba(#eba814, 1); box-shadow: 0px 0px 20px rgba(#eba814, 1);
@ -279,7 +279,7 @@
display: flex !important; display: flex !important;
align-self: auto; align-self: auto;
margin-left: auto; margin-left: auto;
background-color: #653b9c; background-color: var(--tertiary);
@media (max-width: 849px) { @media (max-width: 849px) {
margin-left: 5px; margin-left: 5px;
} }
@ -302,7 +302,7 @@
align-self: auto; align-self: auto;
margin-top: 3px; margin-top: 3px;
margin-left: auto; margin-left: auto;
background-color: #653b9c; background-color: var(--tertiary);
@media (max-width: 995px) { @media (max-width: 995px) {
margin-left: 0px; margin-left: 0px;
} }

4
frontend/src/app/dashboard/dashboard.component.html
View File

@ -20,7 +20,7 @@
<a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/mempool-block/0' | relativeUrl]"> <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
<h5 class="card-title d-inline"><span i18n="dashboard.mempool-goggles">Mempool Goggles</span>: {{ goggleCycle[goggleIndex].name }}</h5> <h5 class="card-title d-inline"><span i18n="dashboard.mempool-goggles">Mempool Goggles</span>: {{ goggleCycle[goggleIndex].name }}</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<div class="quick-filter"> <div class="quick-filter">
<div class="btn-group btn-group-toggle"> <div class="btn-group btn-group-toggle">
@ -97,7 +97,7 @@
<a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]"> <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5> <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
<span>&nbsp;</span> <span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon> <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
</a> </a>
<table class="table lastest-blocks-table"> <table class="table lastest-blocks-table">
<thead> <thead>

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

@ -399,11 +399,11 @@
.goggle-badge { .goggle-badge {
margin: 6px 5px 8px; margin: 6px 5px 8px;
background: none; background: none;
border: solid 2px #105fb0; border: solid 2px var(--primary);
cursor: pointer; cursor: pointer;
&.active { &.active {
background: #105fb0; background: var(--primary);
} }
} }
@ -418,7 +418,7 @@
} }
.card-liquid { .card-liquid {
background-color: #1d1f31; background-color: var(--bg);
height: 418px; height: 418px;
@media (min-width: 992px) { @media (min-width: 992px) {
height: 512px; height: 512px;

6
frontend/src/app/docs/api-docs/api-docs-nav.component.scss
View File

@ -6,7 +6,7 @@ p {
} }
a { a {
color: #fff; color: var(--fg);
text-decoration: none; text-decoration: none;
display: block; display: block;
margin: 5px 0; margin: 5px 0;
@ -17,13 +17,13 @@ a {
text-align: center; text-align: center;
padding: 20px; padding: 20px;
margin: 20px 20px 20px 0; margin: 20px 20px 20px 0;
background-color: #1d1f31; background-color: var(--bg);
border-radius: 12px; border-radius: 12px;
} }
#enterprise-cta-desktop p { #enterprise-cta-desktop p {
margin: 0 auto 16px auto; margin: 0 auto 16px auto;
color: #fff; color: var(--fg);
font-weight: 400; font-weight: 400;
} }

14
frontend/src/app/docs/api-docs/api-docs.component.scss
View File

@ -211,7 +211,7 @@ h3 {
} }
.endpoint-container .section-header span { .endpoint-container .section-header span {
color: #fff; color: var(--fg);
background-color: var(--tertiary); background-color: var(--tertiary);
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
@ -254,7 +254,7 @@ h3 {
#doc-nav-mobile button { #doc-nav-mobile button {
width: 100%; width: 100%;
background-color: var(--primary); background-color: var(--primary);
color: #fff; color: var(--fg);
border-color: var(--primary); border-color: var(--primary);
border-radius: 0.5rem 0.5rem 0 0; border-radius: 0.5rem 0.5rem 0 0;
} }
@ -318,7 +318,7 @@ h3 {
#enterprise-cta-mobile { #enterprise-cta-mobile {
padding: 20px; padding: 20px;
background-color: #1d1f31; background-color: var(--bg);
border-radius: 0.25rem; border-radius: 0.25rem;
text-align: center; text-align: center;
position: fixed; position: fixed;
@ -343,8 +343,8 @@ h3 {
} }
#enterprise-cta-mobile .btn-secondary:hover { #enterprise-cta-mobile .btn-secondary:hover {
background-color: #2d3348; background-color: var(--secondary);
border-color: #2d3348; border-color: var(--secondary);
} }
#enterprise-cta-mobile .no-line-break { #enterprise-cta-mobile .no-line-break {
@ -438,7 +438,7 @@ dl {
dt { dt {
font-weight: bold; font-weight: bold;
color: #4a68b9; color: var(--title-fg);
padding: 5px 0; padding: 5px 0;
} }
@ -447,7 +447,7 @@ dd {
& > dl { & > dl {
padding-left: 1em; padding-left: 1em;
border-left: 2px solid #4a68b9; border-left: 2px solid var(--title-fg);
margin-left: 1em; margin-left: 1em;
margin-top: 5px; margin-top: 5px;
} }

20
frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
View File

@ -60,19 +60,19 @@
justify-content: center; justify-content: center;
&.left { &.left {
background: #105fb0; background: var(--primary);
} }
&.center { &.center {
background: repeating-linear-gradient( background: repeating-linear-gradient(
60deg, 60deg,
#105fb0 0, var(--primary) 0,
#105fb0 12px, var(--primary) 12px,
#1a9436 12px, var(--success) 12px,
#1a9436 24px var(--success) 24px
); );
} }
&.right { &.right {
background: #1a9436; background: var(--success);
} }
.value { .value {
@ -93,10 +93,10 @@
.bar.center { .bar.center {
background: repeating-linear-gradient( background: repeating-linear-gradient(
60deg, 60deg,
#105fb0 0, var(--primary) 0,
#105fb0 8px, var(--primary) 8px,
#1a9436 8px, var(--success) 8px,
#1a9436 16px var(--success) 16px
) )
} }
} }

2
frontend/src/app/lightning/group/group.component.scss
View File

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

2
frontend/src/app/lightning/node/node.component.scss
View File

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

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

@ -93,7 +93,7 @@
<a href="https://mempool.chat" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg></a> <a href="https://mempool.chat" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg></a>
</div> </div>
</div> </div>
<div class="row version" [style]="{'background-color': isServicesPage ? '#1d1f31' : ''}"> <div class="row version" [style]="{'background-color': isServicesPage ? 'var(--bg)' : ''}">
<div class="col-sm-12"> <div class="col-sm-12">
<p *ngIf="officialMempoolSpace"> <p *ngIf="officialMempoolSpace">
<span>{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}">{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}</a>]</span> <span>{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}">{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}</a>]</span>

10
frontend/src/app/shared/components/global-footer/global-footer.component.scss
View File

@ -1,5 +1,5 @@
footer { footer {
background-color: #1d1f31; background-color: var(--bg);
margin-top: 30px; margin-top: 30px;
&.services { &.services {
@media (min-width: 768px) { @media (min-width: 768px) {
@ -34,11 +34,11 @@ footer .row.main .branding > p {
footer .row.main .branding .btn { footer .row.main .branding .btn {
display: inline-block; display: inline-block;
color: #fff !important; color: var(--fg) !important;
} }
footer .row.main .branding button.account { footer .row.main .branding button.account {
background-color: #2d3348; background-color: var(--secondary);
} }
footer .row.main .branding .cta { footer .row.main .branding .cta {
@ -59,7 +59,7 @@ footer .row.main .links > div:first-child {
} }
footer .links .category { footer .links .category {
color: #4a68b9; color: var(--title-fg);
font-weight: 700; font-weight: 700;
} }
@ -114,7 +114,7 @@ footer .row.social-links svg {
footer .row.version { footer .row.version {
padding-top: 20px !important; padding-top: 20px !important;
padding-bottom: 20px !important; padding-bottom: 20px !important;
background-color: #1d1f31; background-color: var(--bg);
} }
footer .row.version p { footer .row.version p {

1
frontend/src/styles.scss
View File

@ -76,6 +76,7 @@ $dropdown-link-active-bg: $active-bg;
--box-bg: #24273e; --box-bg: #24273e;
--stat-box-bg: #181b2d; --stat-box-bg: #181b2d;
--alert-bg: #3a1c61; --alert-bg: #3a1c61;
--navbar-bg: #212121;
--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);

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

@ -75,6 +75,7 @@ $dropdown-link-active-bg: $active-bg;
--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);