Improvements in performance

components/home/EntitySpan/EntitySpan.module.css

@@ -1,9 +1,15 @@
 .span {
-    background: #DDD;
+    background: lightgray;
     font-size: 1em;
     border: 1px solid white;
     display: inline-block;
     position: relative;
+    padding-inline: 0.2em;
+    border-radius: 4px;
+}
+
+.spanSimple {
+    padding-inline-start: 0.2em;
 }
 
 .tooltip {
@@ -24,7 +30,7 @@
     z-index: 1;
 }
 
-.span:hover > .tooltip {
+.span:is(:focus, :hover) > .tooltip {
     display: initial;
 }
 
@@ -49,6 +55,18 @@
     transform: translateY(0.1em);
 }
 
+.base {
+    color: darkgreen;
+}
+
+.produced {
+    color: darkgoldenrod;
+}
+
+.unknown {
+    color: inherit;
+}
+
 .strong {
     font-weight: 600;
     margin-block: 1em 0.4em;
@@ -71,3 +89,26 @@
 .clickBtn {
     fill: red;
 }
+
+@media (prefers-color-scheme: dark) {
+    .span {
+        border-color: #111111;
+        background-color: #444;
+    }
+
+    .base {
+        color: lightgreen;
+    }
+
+    .produced {
+        color: lightsalmon;
+    }
+
+    .unknown {
+        color: lightgray;
+    }
+
+    .tooltip {
+        --background: darkred;
+    }
+}