content, css: generateContentEntryDate: relative date

3 files changed, 40 insertions, 8 deletions

diff --git a/src/static/css/features.css b/src/static/css/features.css
index c626aeda..44b7727e 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -407,10 +407,6 @@
   .content-entry-heading {
     border-bottom: 1px solid var(--dim-color);
   }
-
-  .content-entry-heading .hoverable {
-    box-shadow: 1px 2px 6px 5px #04040460;
-  }
 }
 
 @layer print {
@@ -450,6 +446,12 @@
   }
 }
 
+@layer interaction {
+  .content-entry-heading .commentary-date .hoverable {
+    box-shadow: 1px 2px 6px 5px #04040460;
+  }
+}
+
 /* Content headings */
 
 @layer layout {
diff --git a/src/static/css/tooltips.css b/src/static/css/tooltips.css
index f4f9416e..3666dfce 100644
--- a/src/static/css/tooltips.css
+++ b/src/static/css/tooltips.css
@@ -53,7 +53,8 @@
       brightness(1.5) saturate(1.4) blur(4px);
 
     box-shadow:
-      0 3px 4px 4px #000000aa,
+      0 3px 6px 7px #0007,
+      0 3px 4px 2px #0006,
       0 -2px 4px -2px var(--primary-color) inset;
 
     text-indent: 0;
@@ -91,7 +92,6 @@
 @layer layout {
   .datetimestamp-tooltip,
   .missing-duration-tooltip,
-  .commentary-date-tooltip,
   .rerelease-tooltip,
   .first-release-tooltip,
   .other-release-tooltip,
@@ -101,8 +101,7 @@
   }
 
   .datetimestamp-tooltip .tooltip-content,
-  .missing-duration-tooltip .tooltip-content,
-  .commentary-date-tooltip .tooltip-content {
+  .missing-duration-tooltip .tooltip-content {
     padding: 5px 6px;
     white-space: nowrap;
     font-size: 0.9em;
@@ -120,6 +119,33 @@
   }
 }
 
+/* Commentary date tooltip */
+
+@layer layout {
+  .commentary-date-tooltip {
+    right: -10px;
+    padding: 3px 4px 2px 2px;
+    left: unset;
+  }
+
+  .commentary-date-tooltip .tooltip-content {
+    padding: 2px 6px;
+    white-space: nowrap;
+    font-size: 0.9em;
+  }
+
+  .commentary-date-tooltip span.cute-break {
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
+}
+
+@layer print {
+  .commentary-date-tooltip .relative-to {
+    opacity: 0.8;
+  }
+}
+
 /* Contribution tooltip */
 
 @layer interactivity {
diff --git a/src/static/js/client/hoverable-tooltip.js b/src/static/js/client/hoverable-tooltip.js
index 22b9471c..cdf37ee1 100644
--- a/src/static/js/client/hoverable-tooltip.js
+++ b/src/static/js/client/hoverable-tooltip.js
@@ -714,6 +714,8 @@ export function positionTooltip(tooltip, x, y) {
   cssProp(tooltip, {
     left: `${x - tooltipRect.x}px`,
     top: `${y - tooltipRect.y}px`,
+    right: 'unset',
+    bottom: 'unset',
   });
 }
 
@@ -721,6 +723,8 @@ export function resetDynamicTooltipPositioning(tooltip) {
   cssProp(tooltip, {
     left: null,
     top: null,
+    right: null,
+    bottom: null,
   });
 }