add blurring behind legend using opacity since backdrop-filter is not supported by firefox

src/app/components/network-legend/network-legend.component.html

+
+
 <div class="legend" [class.right]="this.config.legendPos === 'right'" [ngClass]="{ 'legend-small': smallStyle }">
+  <div class="legend-background">
 
+  </div>
   <!-- default legend in html -->
-  <table *ngIf="!this.config.legendUrl.length">
+  <table *ngIf="!this.config.legendUrl.length" class="legend-table">
     <ng-container *ngIf="this.config.showLegendNodes">
       <tr *ngFor="let nodeGroup of this.config.nodeGroups | keyvalue" class="list-item">
 

src/app/components/network-legend/network-legend.component.scss

 @import "src/stylesheets/variables";
 
+div.legend-background {
+  /* Fit to the legend size */
+  width: 100%;
+  height: 100%;
+  position: absolute;
+
+  /* Add the blur effect */
+  opacity: 0.8;
+  background-color: var(--drgstn-panel);
+
+  border-radius: 1rem;
+}
+
 div.legend {
   position: absolute;
   bottom: 0;
@@ -7,6 +20,8 @@ div.legend {
   width: auto;
   max-width: 11rem;
   z-index: $explorer-networklegend-z;
+  // border size below legend
+  margin-bottom: 2px;
   &.right {
     right: 0;
   }
@@ -15,10 +30,14 @@ div.legend {
     zoom: 0.8;
     -moz-transform: scale(0.8);
   }
-  table tr:first-child {
-    // no border line on top of first element
-    border-top: none;
-  }
+  table {
+    z-index: $explorer-networklegend-foreground-z;
+    position: relative;
+    tr:first-child {
+      // no border line on top of first element
+      border-top: none;
+    }
+  }  
   img {
     max-width: 20vw;
     // margin-bottom: 1rem;

src/stylesheets/variables.scss

@@ -9,6 +9,7 @@ $network-footer-space-button-to-border: 0.5rem;
 
 $explorer-network-z: 10;
 $explorer-networklegend-z: 20;
+$explorer-networklegend-foreground-z: 21;
 $explorer-network-toolbar-dropdown-z: 20;
 
 $analysis-view-z: 30;