Styling of home

components/home/EntitySpan/EntitySpan.module.css

@@ -1,35 +1,39 @@
 .span {
-    background: lightgray;
-    font-size: 1em;
-    border: 1px solid white;
-    display: inline-block;
     position: relative;
-    padding-inline: 0.2em;
+    display: inline-block;
+    border: 1px solid var(--md-sys-color-outline);
+    background: var(--md-sys-color-surface-variant);
     border-radius: 4px;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 1em;
+    padding-inline: 0.2em;
 }
 
 .spanSimple {
-    padding-inline-start: 0.2em;
     position: relative;
     display: inline-block;
+    padding-inline-start: 0.2em;
 }
 
 .tooltip {
-    --background: lightsalmon;
-    --arrow-width: 0.6em;
-    --arrow-height: 0.4em;
-    display: none;
+    --background: var(--md-sys-color-primary-container);
+
     position: absolute;
-    left: calc(100% + var(--arrow-width));
-    top: -5000%;
-    bottom: -5000%;
-    margin: auto 0;
+    z-index: 1;
+    display: none;
     width: max-content;
     height: max-content;
-    background: var(--background);
     padding: 0.5em;
+    margin: auto 0;
+    background: var(--background);
     border-radius: 0.7em;
-    z-index: 1;
+    box-shadow: 0 0 6px 1px var(--md-sys-color-shadow);
+    color: var(--md-sys-color-on-primary-container);
+    inset-block: -5000%;
+    inset-inline-start: calc(100% + var(--arrow-width));
+
+    --arrow-width: 0.6em;
+    --arrow-height: 0.4em;
 }
 
 .span:is(:focus, :hover) > .tooltip {
@@ -37,16 +41,15 @@
 }
 
 .tooltip::before {
-    content: "";
-    border-style: solid;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
+    position: absolute;
     height: max-content;
     border-width: var(--arrow-height) var(--arrow-width) var(--arrow-height) 0;
+    border-style: solid;
     border-color: transparent var(--background) transparent transparent;
-    position: absolute;
-    left: calc(var(--arrow-width) * -1 + 1px);
+    margin: auto 0;
+    content: "";
+    inset-block: 0;
+    inset-inline-start: calc(var(--arrow-width) * -1 + 1px);
 }
 
 .img {
@@ -58,11 +61,11 @@
 }
 
 .base {
-    color: darkgreen;
+    color: var(--md-sys-color-tertiary);
 }
 
 .produced {
-    color: darkgoldenrod;
+    color: var(--md-ref-palette-primary70);
 }
 
 .unknown {
@@ -89,32 +92,9 @@
 
 .rightClick {
     height: 1em;
-    transform: scaleX(-1) translateY(0.1em);
+    transform: scaleX(-1) translateY(0.1em) !important;
 }
 
 .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;
-    }
-}