Convert more css to variables

frontend/src/app/components/difficulty/difficulty.component.html

@@ -5,7 +5,7 @@
     <div class="widget-toggler">
       <a href="" (click)="setMode('difficulty')" class="toggler-option"
         [ngClass]="{'inactive': mode === 'difficulty'}"><small i18n="statistics.average-small">difficulty</small></a>
-      <span style="color: #ffffff66; font-size: 8px"> | </span>
+      <span style="color: var(--transparent-fg); font-size: 8px"> | </span>
       <a href="" (click)="setMode('halving')" class="toggler-option"
         [ngClass]="{'inactive': mode === 'halving'}"><small i18n="statistics.median-small">halving</small></a>
     </div>

frontend/src/app/components/difficulty/difficulty.component.scss

@@ -183,7 +183,7 @@
     fill: var(--secondary);
 
     &.behind {
-      fill: #D81B60;
+      fill: var(--red);
     }
     &.mined {
       fill: url(#diff-gradient);
@@ -208,10 +208,10 @@
 }
 
 .blocks-ahead {
-  color: #3bcc49;
+  color: var(--green);
 }
 .blocks-behind {
-  color: #D81B60;
+  color: var(--red);
 }
 
 .halving-progress {
@@ -250,5 +250,5 @@
 }
 
 .inactive {
-  color: #ffffff66;
+  color: var(--transparent-fg);
 }