product-table: prepare (not activated) tooltips; changed header wordi…

…ng; minor css
Nitrokey · Dec 14, 2024 · 142cb1a · 142cb1a
1 parent 31e31b4
commit 142cb1a
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 6 deletions.
diff --git a/source/_ext/nk_product_table.py b/source/_ext/nk_product_table.py
@@ -56,7 +56,7 @@ def run(self) -> list[nodes.Node]:
         row0 = nodes.row()
         # title header
         entry = nodes.entry(morecols=len(self.KEYS) - 1)
-        entry += nodes.paragraph(text="Supported Nitrokeys")
+        entry += nodes.paragraph(text="Compatible Nitrokeys")
         entry["classes"] += ["products-table-head"]
 
         row0 += entry
@@ -107,8 +107,22 @@ def run(self) -> list[nodes.Node]:
             else:
                 val = yes if key in used_products else no
             entry = nodes.entry()
-            entry += nodes.paragraph(text=val)
-            entry["classes"] += ["active" if val == yes else "inactive"]
+            icon = nodes.paragraph(text=val)
+            entry += icon
+            entry["classes"] += ["tooltip"]
+
+            if val == yes:
+                entry["classes"] += ["active"]
+                tooltip = nodes.paragraph(text="active")
+                tooltip["classes"] += ["tooltiptext"]
+            else:
+                entry["classes"] += ["inactive"]
+                tooltip = nodes.paragraph(text="inactive")
+                tooltip["classes"] += ["tooltiptext"]
+
+            # entry += tooltip
+            icon += tooltip
+
             row2 += entry
 
         tbody = nodes.tbody()

diff --git a/source/_static/css/custom.css b/source/_static/css/custom.css
@@ -724,9 +724,20 @@ article ul li {
     horizontal-alignment: center;
 }
 
-.products-table-head {
-    font-weight: normal;
-    font-size: 0.8em !important;
+.products-table .products-table-head p {
+    font-size: 1.2em !important;
+    font-family: Teko, Helvetica, Arial, sans-serif;
+    font-weight: 500;
+    line-height: 1.1em;
+    font-variant: all-small-caps;
+    color: var(--color-brand-content);
+}
+
+.products-table th {
+    /*font-weight: 700;
+    line-height: 1.1em;
+    font-variant: all-small-caps;
+    font-family: Teko, Helvetica, Arial, sans-serif;*/
 }
 
 .products-table td p {
@@ -736,6 +747,7 @@ article ul li {
 }
 .products-table td {
     padding: 0 !important;
+    cursor: default;
 }
 
 .products-table .inactive {
@@ -746,3 +758,36 @@ article ul li {
     font-weight: bold;
 }
 
+/* tooltips */
+
+/* use class to show tooltip for element */
+.tooltip {
+  /*position: relative;
+  display: inline-block;
+  border-bottom: 0px dotted black; */
+
+}
+
+/* use this class to denote tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  /*background-color: var(--color-background-primary);*/
+  /*background-color: #18191d;*/
+  background-color: #999999;
+  color: var(--color-content-foreground);
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  border-radius: 4px;
+  border-width: 0px;
+  position: absolute;
+  z-index: 100;
+
+}
+
+/* trigger visibility on hover */
+.tooltip:hover .tooltiptext {
+  /*visibility: visible;*/
+}
+