Diagram css fix

Author: BarkingBad

scaladoc/resources/dotty_res/scripts/ux.js

@@ -20,7 +20,7 @@ window.addEventListener("DOMContentLoaded", () => {
     $(this).parent().toggleClass("expanded")
   });
 
-  $('.names .tab').on('click', function(){
+  $('.names .tab').on('click', function() {
     parent = $(this).parents(".tabs").first()
     shown = $(this).hasClass('selected')
     single = parent.hasClass("single")
@@ -32,7 +32,7 @@ window.addEventListener("DOMContentLoaded", () => {
     if (!shown) { myTab.addClass('selected') }
     if (shown && !single) myTab.removeClass('selected')
 
-    if(!shown && $(this).find(".showGraph")){
+    if(!shown && $(this).filter(".showGraph").length > 0) {
       showGraph()
       $(this).find(".showGraph").removeClass("showGraph")
     }
@@ -84,8 +84,8 @@ function showGraph() {
     if (dotNode){
       var svg = d3.select("#graph");
       var radialGradient = svg.append("defs").append("radialGradient").attr("id", "Gradient");
-      radialGradient.append("stop").attr("stop-color", "#ffd47f").attr("offset", "20%");
-      radialGradient.append("stop").attr("stop-color", "white").attr("offset", "100%");
+      radialGradient.append("stop").attr("stop-color", "var(--aureole)").attr("offset", "20%");
+      radialGradient.append("stop").attr("stop-color", "var(--code-bg)").attr("offset", "100%");
 
       var inner = svg.append("g");
 

scaladoc/resources/dotty_res/styles/colors.css

@@ -38,6 +38,9 @@
   --red800: hsl(1 , 72% , 24%);
   --red900: hsl(1 , 75% , 12%);
 
+  /* Diagram central node aureole */
+
+  --aureole: hsl(40, 100%, 75%);
 
   /* Light Mode */
   --border-light: var(--grey200);

scaladoc/resources/dotty_res/styles/diagram.css

@@ -1,17 +1,17 @@
 .node {
-  stroke: #333;
+  stroke: var(--inactive-bg);
   stroke-width: 2.5px;
-  fill: white;
+  fill: var(--inactive-bg);
 }
 
 .edgeLabel {
-  fill: white;
+  fill: var(--inactive-fg);
 }
 
 .edgePath {
-  stroke: #333;
+  stroke: var(--inactive-fg);
   stroke-width: 1.5px;
-  fill: #333;
+  fill: var(--inactive-fg);
 }
 
 #graph {
@@ -44,16 +44,16 @@
   margin: 4px 2px;
   transition-duration: 0.4s;
   cursor: pointer;
-  background-color: white;
-  color: black;
-  border: 2px solid #003048;
+  background-color: var(--body-bg);
+  color: var(--body-fg);
+  border: 2px solid var(--body-fg);
   position: absolute;
   top: 0;
   left: 0;
   z-index:2;
 }
 
 .btn:hover {
-  background-color: #003048;
-  color: white;
+  background-color: var(--active-bg);
+  color: var(--active-fg);
 }