content, css: general tooltip/icon css cleanup

5 files changed, 62 insertions, 66 deletions

diff --git a/src/content/dependencies/generateContributionTooltip.js b/src/content/dependencies/generateContributionTooltip.js
index 67d6166e..5df88121 100644
--- a/src/content/dependencies/generateContributionTooltip.js
+++ b/src/content/dependencies/generateContributionTooltip.js
@@ -26,7 +26,7 @@ export default {
   generate: (relations, slots, {html}) =>
     relations.tooltip.slots({
       attributes:
-        {class: ['icons', 'icons-tooltip']},
+        {class: 'contribution-tooltip'},
 
       contentAttributes: {
         [html.joinChildren]:
diff --git a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
index a9d17457..d4342098 100644
--- a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
+++ b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
@@ -41,20 +41,19 @@ export default {
             }
 
             return [
-              html.tag('a', {class: 'icon'},
+              html.tag('a', {class: 'external-link'},
                 {href: url},
-                {class: 'has-text'},
 
                 [
                   icon,
 
-                  html.tag('span', {class: 'icon-text'},
+                  html.tag('span', {class: 'external-handle'},
                     (html.isBlank(handle)
                       ? platform
                       : handle)),
                 ]),
 
-              html.tag('span', {class: 'icon-platform'},
+              html.tag('span', {class: 'external-platform'},
                 // This is a pretty ridiculous hack, but we currently
                 // don't have a way of telling formatExternalLink to *not*
                 // use the fallback string, which just formats the URL as
diff --git a/src/content/dependencies/generateExternalIcon.js b/src/content/dependencies/generateExternalIcon.js
index 9f65a275..637af658 100644
--- a/src/content/dependencies/generateExternalIcon.js
+++ b/src/content/dependencies/generateExternalIcon.js
@@ -13,13 +13,14 @@ export default {
   },
 
   generate: (data, slots, {html, language, to}) =>
-    html.tag('svg',
-      html.tag('use', {
-        href:
-          to('staticMisc.icon',
-            language.formatExternalLink(data.url, {
-              style: 'icon-id',
-              context: slots.context,
-            })),
-      })),
+    html.tag('span', {class: 'external-icon'},
+      html.tag('svg',
+        html.tag('use', {
+          href:
+            to('staticMisc.icon',
+              language.formatExternalLink(data.url, {
+                style: 'icon-id',
+                context: slots.context,
+              })),
+        }))),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 321746ca..d226b281 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -910,7 +910,7 @@ li:not(:first-child:last-child) .tooltip,
     0 -2px 4px -2px var(--primary-color) inset;
 }
 
-.icons-tooltip {
+.contribution-tooltip {
   padding: 3px 6px 6px 6px;
   left: -34px;
 }
@@ -931,7 +931,7 @@ li:not(:first-child:last-child) .tooltip,
   margin-right: -120px;
 }
 
-.icons-tooltip .tooltip-content {
+.contribution-tooltip .tooltip-content {
   padding: 6px 2px 2px 2px;
 
   -webkit-user-select: none;
@@ -942,59 +942,84 @@ li:not(:first-child:last-child) .tooltip,
   display: grid;
 
   grid-template-columns:
-    [icon-start] auto [icon-end domain-start] auto [domain-end];
+    [icon-start] auto [icon-end handle-start] auto [handle-end platform-start] auto [platform-end];
 }
 
-.icons-tooltip .icon {
+.contribution-tooltip .external-link {
   grid-column-start: icon-start;
-  grid-column-end: icon-end;
+  grid-column-end: handle-end;
+
+  height: 1.4em;
+}
+
+.contribution-tooltip .external-icon {
+  width: 18px;
+}
+
+.contribution-tooltip .external-icon svg {
+  width: 18px;
+  height: 18px;
+  top: -0.1em;
+}
+
+.contribution-tooltip .external-handle {
+  padding-right: 8px;
 }
 
-.icons-tooltip .chronology-link {
+.contribution-tooltip .chronology-link {
   grid-column-start: icon-start;
-  grid-column-end: domain-end;
+  grid-column-end: handle-end;
   padding-left: 5px;
   padding-right: 3px;
   font-size: 0.85em;
 }
 
-.icons-tooltip .tooltip-divider {
+.contribution-tooltip .tooltip-divider {
   grid-column-start: icon-start;
-  grid-column-end: domain-end;
+  grid-column-end: platform-end;
 
   border-top: 1px dotted var(--primary-color);
   margin-top: 3px;
   margin-bottom: 4px;
 }
 
-.icons-tooltip .icon-platform {
+.contribution-tooltip .external-platform {
   display: none;
 
-  grid-column-start: domain-start;
-  grid-column-end: domain-end;
+  grid-column-start: platform-start;
+  grid-column-end: platform-end;
 
-  --icon-platform-opacity: 0.8;
+  --external-platform-opacity: 0.8;
   padding-right: 4px;
   opacity: 0.8;
 }
 
-.icons-tooltip.show-info .icon-platform {
+.contribution-tooltip.show-info .external-platform {
   display: inline;
-  animation: icon-platform 0.2s forwards linear;
+  animation: external-platform 0.2s forwards linear;
 }
 
-@keyframes icon-platform {
+@keyframes external-platform {
   from {
     opacity: 0;
   }
 
   to {
-    opacity: var(--icon-platform-opacity);
+    opacity: var(--external-platform-opacity);
   }
 }
 
-.icons-tooltip .icon:hover + .icon-platform {
-  --icon-platform-opacity: 1;
+.contribution-tooltip .external-link:hover {
+  filter: brightness(1.4);
+  text-decoration: none;
+}
+
+.contribution-tooltip .external-link:hover .external-handle {
+  text-decoration: underline;
+}
+
+.contribution-tooltip .external-link:hover + .external-platform {
+  --external-platform-opacity: 1;
   text-decoration: underline;
   text-decoration-color: #ffffffaa;
 }
@@ -1010,27 +1035,15 @@ li:not(:first-child:last-child) .tooltip,
   padding: 3px 4.5px;
 }
 
-.icons {
-  font-style: normal;
-  white-space: nowrap;
-}
-
-.icons a:hover {
-  filter: brightness(1.4);
-}
-
-.icons a {
-  padding: 0 3px;
-}
-
-.icon {
+.external-icon {
   display: inline-block;
+  padding: 0 3px;
   width: 24px;
   height: 1em;
   position: relative;
 }
 
-.icon > svg {
+.external-icon svg {
   width: 24px;
   height: 24px;
   top: -0.25em;
@@ -1038,23 +1051,6 @@ li:not(:first-child:last-child) .tooltip,
   fill: var(--primary-color);
 }
 
-.icon.has-text {
-  display: block;
-  width: unset;
-  height: 1.4em;
-}
-
-.icon.has-text > svg {
-  width: 18px;
-  height: 18px;
-  top: -0.1em;
-}
-
-.icon.has-text > .icon-text {
-  margin-left: 24px;
-  padding-right: 8px;
-}
-
 .rerelease,
 .other-group-accent {
   opacity: 0.7;
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 8299b63e..38060999 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -3465,7 +3465,7 @@ function getArtistExternalLinkTooltipPageReferences() {
   const info = artistExternalLinkTooltipInfo;
 
   info.tooltips =
-    Array.from(document.getElementsByClassName('icons-tooltip'));
+    Array.from(document.getElementsByClassName('contribution-tooltip'));
 
   info.tooltipRows =
     info.tooltips.map(tooltip =>