convert to CSS variables

2024-04-04 15:36:24 +09:00
parent b74fbee069
commit ee92f6639a
84 changed files with 317 additions and 225 deletions
--- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
+++ b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
@@ -13,7 +13,7 @@
 }

 .shared-block {
-  color: #ffffff66;
+  color: var(--transparent-fg);
  font-size: 12px;
 }

--- a/frontend/src/app/lightning/channel/channel-preview.component.scss
+++ b/frontend/src/app/lightning/channel/channel-preview.component.scss
@@ -34,7 +34,7 @@
 }

 .row.nodes {
-  background: #181b2d;
+  background: var(--stat-box-bg);
  margin: 15px 0 0;
 }

@@ -53,7 +53,7 @@
  width: 470px;
  min-width: 470px;
  padding: 0;
-  background: #181b2d;
+  background: var(--stat-box-bg);
  max-height: 350px;
  overflow: hidden;
 }
--- a/frontend/src/app/lightning/channel/channel.component.html
+++ b/frontend/src/app/lightning/channel/channel.component.html
@@ -1,7 +1,7 @@
 <div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">

  <ng-container *ngIf="!error">
-    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
+    <h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.channel">Lightning channel</h5>
    <div class="title-container">
      <h1 class="mb-0">{{ channel.short_id }}</h1>
      <span class="tx-link">
@@ -113,7 +113,7 @@

 <ng-template #skeletonLoader>
  <div class="container-xl">
-    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
+    <h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.channel">Lightning channel</h5>
    <div class="title-container">
      <h1 class="mb-0"><span class="skeleton-loader" style="width: 275px; height: 25px;"></span></h1>
      <span class="tx-link">
--- a/frontend/src/app/lightning/channels-list/channels-list.component.scss
+++ b/frontend/src/app/lightning/channels-list/channels-list.component.scss
@@ -3,7 +3,7 @@
 }

 .sats {
-  color: #ffffff66;
+  color: var(--transparent-fg);
  font-size: 12px;
  top: 0px;
 }
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
@@ -1,7 +1,7 @@
 <div class="widget-toggler">
  <a href="" (click)="switchMode('avg')" class="toggler-option"
    [ngClass]="{'inactive': mode === 'avg'}"><small i18n="statistics.average-small">avg</small></a>
-  <span style="color: #ffffff66; font-size: 8px"> | </span>
+  <span style="color: var(--transparent-fg); font-size: 8px"> | </span>
  <a href="" (click)="switchMode('med')" class="toggler-option"
    [ngClass]="{'inactive': mode === 'med'}"><small i18n="statistics.median-small">med</small></a>
 </div>
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
@@ -57,7 +57,7 @@
      margin-bottom: 0;
    }
    .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
      font-size: 12px;
      top: 0px;
    }
@@ -110,5 +110,5 @@
 }

 .inactive {
-  color: #ffffff66;
+  color: var(--transparent-fg);
 }
--- a/frontend/src/app/lightning/group/group-preview.component.scss
+++ b/frontend/src/app/lightning/group/group-preview.component.scss
@@ -20,7 +20,7 @@
  width: 100%;
  margin: 16px 0 0;
  padding: 20px 12px;
-  background: #181b2d;
+  background: var(--stat-box-bg);
  font-size: 32px;
 }

@@ -46,7 +46,7 @@
  min-height: 272px;
  max-height: 272px;
  padding: 0;
-  background: #181b2d;
+  background: var(--stat-box-bg);
  overflow: hidden;
  margin-top: 16px;
 }
--- a/frontend/src/app/lightning/group/group.component.html
+++ b/frontend/src/app/lightning/group/group.component.html
@@ -1,5 +1,5 @@
 <div class="container-xl full-height" style="min-height: 335px">
-  <h5 class="mb-1" style="color: #ffffff66" i18n="lightning.node-group">Lightning node group</h5>
+  <h5 class="mb-1" style="color: var(--transparent-fg)" i18n="lightning.node-group">Lightning node group</h5>

  <div class="header">
    <div class="logo-container">
@@ -44,7 +44,7 @@
        </table>
      </div>
      <div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
-        <div style="background-color: #181b2d">
+        <div style="background-color: var(--stat-box-bg)">
          <app-nodes-map [widget]="true" [nodes]="nodes.nodes" type="isp"></app-nodes-map>
        </div>
      </div>
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@@ -10,7 +10,7 @@
 }

 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }

 .graph-card {
--- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
+++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
@@ -205,7 +205,7 @@ export class NodeFeeChartComponent implements OnInit {
          splitLine: {
            lineStyle: {
              type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
              opacity: 0.25,
            }
          },
--- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
@@ -181,7 +181,7 @@ export class NodeStatisticsChartComponent implements OnInit {
          splitLine: {
            lineStyle: {
              type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
              opacity: 0.25,
            }
          },
@@ -217,7 +217,7 @@ export class NodeStatisticsChartComponent implements OnInit {
            symbol: 'none',
            lineStyle: {
              type: 'solid',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
              opacity: 1,
              width: 1,
            },
--- a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
+++ b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
@@ -52,7 +52,7 @@
      }  
    }
    .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
      font-size: 12px;
      top: 0px;
    }
--- a/frontend/src/app/lightning/node/node-preview.component.scss
+++ b/frontend/src/app/lightning/node/node-preview.component.scss
@@ -32,7 +32,7 @@
  min-height: 408px;
  max-height: 408px;
  padding: 0;
-  background: #181b2d;
+  background: var(--stat-box-bg);
  overflow: hidden;
  margin-top: 6px;
 }
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -1,7 +1,7 @@
 <div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">

  <ng-container *ngIf="!error">
-    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
+    <h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.node">Lightning node</h5>
    <div class="title-container mb-2">
      <div class="d-flex justify-content-between align-items-center">
        <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
@@ -303,7 +303,7 @@

 <ng-template #skeletonLoader>
  <div class="container-xl">
-    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
+    <h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.node">Lightning node</h5>
    <div class="title-container mb-2">
      <h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 36px; margin-top: 5px; margin-bottom: 5px;"></span></h1>
      <span class="tx-link">
--- a/frontend/src/app/lightning/node/node.component.scss
+++ b/frontend/src/app/lightning/node/node.component.scss
@@ -89,7 +89,7 @@ app-fiat {

  .tlv-type {
    font-size: 12px;
-    color: #ffffff66;
+    color: var(--transparent-fg);
  }

  .tlv-payload {
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
@@ -19,7 +19,7 @@
    <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
      <span i18n="lightning.nodes-channels-world-map">Lightning Nodes Channels World Map</span>
    </div>
-    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+    <small style="color: var(--transparent-fg)" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
  </div>

  <ng-container *ngIf="channelsObservable | async">
--- a/frontend/src/app/lightning/nodes-map/nodes-map.component.html
+++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.html
@@ -4,7 +4,7 @@
    <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
      <span i18n="lightning.nodes-world-map">Lightning Nodes World Map</span>
    </div>
-    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+    <small style="color: var(--transparent-fg)" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
  </div>

  <ng-container *ngIf="observable$ | async">
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@@ -98,7 +98,7 @@
    .card-text {
      font-size: 18px;
      span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
        font-size: 12px;
      }
    }
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
@@ -352,7 +352,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
          splitLine: {
            lineStyle: {
              type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
              opacity: 0.25,
            },
          },
@@ -375,7 +375,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
          splitLine: {
            lineStyle: {
              type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
              opacity: 0.25,
            },
          },
@@ -449,7 +449,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
    const now = new Date();
    // @ts-ignore
    this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
    this.chartInstance.setOption(this.chartOptions);
    download(this.chartInstance.getDataURL({
      pixelRatio: 2,
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
@@ -7,7 +7,7 @@
        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
      </button>
    </div>
-    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+    <small style="color: var(--transparent-fg)" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
  </div>

  <div class="container pb-lg-0">
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
@@ -1,5 +1,5 @@
 .sats {
-  color: #ffffff66;
+  color: var(--transparent-fg);
  font-size: 12px;
  top: 0px;
 }
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
@@ -220,7 +220,7 @@ export class NodesPerCountryChartComponent implements OnInit {

  onSaveChart() {
    const now = new Date();
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
    this.chartInstance.setOption(this.chartOptions);
    download(this.chartInstance.getDataURL({
      pixelRatio: 2,
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
@@ -46,7 +46,7 @@
        </table>
      </div>
      <div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
-        <div style="background-color: #181b2d">
+        <div style="background-color: var(--stat-box-bg)">
          <app-nodes-map [widget]="true" [nodes]="countryNodes.nodes" type="country"></app-nodes-map>
        </div>
      </div>
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss
@@ -4,7 +4,7 @@
 }

 .sats {
-  color: #ffffff66;
+  color: var(--transparent-fg);
  font-size: 12px;
  top: 0px;
 }
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
@@ -33,7 +33,7 @@
        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
      </button>
    </div>
-    <small class="d-block" style="color: #ffffff66; min-height: 25px" >
+    <small class="d-block" style="color: var(--transparent-fg); min-height: 25px" >
      <span i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</span>
    </small>
  </div>
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
@@ -97,7 +97,7 @@
    .card-text {
      font-size: 18px;
      span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
        font-size: 12px;
      }
    }
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
@@ -275,7 +275,7 @@ export class NodesPerISPChartComponent implements OnInit {

  onSaveChart(): void {
    const now = new Date();
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
    this.chartInstance.setOption(this.chartOptions);
    download(this.chartInstance.getDataURL({
      pixelRatio: 2,
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss
@@ -12,7 +12,7 @@
  min-height: 360px;
  max-height: 360px;
  padding: 0;
-  background: #181b2d;
+  background: var(--stat-box-bg);
  overflow: hidden;
  margin-top: 0;
 }
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
@@ -43,7 +43,7 @@
        </table>
      </div>
      <div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
-        <div style="background-color: #181b2d">
+        <div style="background-color: var(--stat-box-bg)">
          <app-nodes-map [widget]="true" [nodes]="ispNodes.nodes" type="isp"></app-nodes-map>
        </div>
      </div>
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss
@@ -4,7 +4,7 @@
 }

 .sats {
-  color: #ffffff66;
+  color: var(--transparent-fg);
  font-size: 12px;
  top: 0px;
 }
--- a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
+++ b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
@@ -9,7 +9,7 @@
 }

 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }

 .card-title {
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@@ -98,7 +98,7 @@
    .card-text {
      font-size: 18px;
      span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
        font-size: 12px;
      }
    }
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
@@ -239,7 +239,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
          splitLine: {
            lineStyle: {
              type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
              opacity: 0.25,
            }
          },
@@ -280,7 +280,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
            symbol: 'none',
            lineStyle: {
              type: 'solid',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
              opacity: 1,
              width: 1,
            },
@@ -348,7 +348,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
    const now = new Date();
    // @ts-ignore
    this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
    this.chartInstance.setOption(this.chartOptions);
    download(this.chartInstance.getDataURL({
      pixelRatio: 2,