Add generic tooltip css

2021-06-16 16:41:35 +02:00
parent 48f37f0e60
commit c4549877ee
2 changed files with 32 additions and 1 deletions
--- a/system/styles/l5r5e.css
+++ b/system/styles/l5r5e.css
--- a/system/styles/scss/sheets.scss
+++ b/system/styles/scss/sheets.scss
@@ -875,3 +875,34 @@
        }
    }
 }
+// tooltip
+.l5r5e-tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted #963c41;
+    overflow: initial !important;
+    .l5r5e-tooltip-ct,
+    &.l5r5e-tooltip-ct {
+        visibility: hidden;
+        width: 100%;
+        background: #fffae6 url("../assets/imgs/bg-l5r.webp") no-repeat;
+        color: $white;
+        text-align: center;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: 0.25rem;
+        padding: 0.25rem;
+
+        /* Position */
+        position: absolute;
+        z-index: 1;
+        * {
+            color: $white;
+        }
+    }
+    &:hover {
+        .l5r5e-tooltip-ct,
+        &.l5r5e-tooltip-ct {
+            visibility: visible;
+        }
+    }
+}