From 9edbf2deb022b0b2b3699bf0ffa3b8c6aa6e1c98 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 18 Jun 2024 10:46:44 -0300 Subject: content, css: general tooltip/icon css cleanup --- .../dependencies/generateContributionTooltip.js | 2 +- ...nerateContributionTooltipExternalLinkSection.js | 7 +- src/content/dependencies/generateExternalIcon.js | 19 +++-- src/static/css/site.css | 98 +++++++++++----------- src/static/js/client.js | 2 +- 5 files changed, 62 insertions(+), 66 deletions(-) (limited to 'src') 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 => -- cgit 1.3.0-6-gf8a5