4 files changed, 58 insertions, 80 deletions
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 25d9ce47..8c53f877 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -931,7 +931,11 @@ a .normal-content {
 
   background-color: var(--primary-color);
 
-  mask-image: url(/static-4p1/misc/image.svg);
+  /* mask-image is set in content JavaScript,
+   * because we can't identify the correct nor
+   * absolute path to the file from CSS.
+   */
+
   mask-repeat: no-repeat;
   mask-position: calc(100% - 2px);
   vertical-align: text-bottom;
@@ -1119,7 +1123,7 @@ a .normal-content {
   font-size: 0.9rem;
 }
 
-li:not(:first-child:last-child) .tooltip,
+li:not(:first-child:last-child) .tooltip:where(:not(.cover-artwork .tooltip)),
 .offset-tooltips > :not(:first-child:last-child) .tooltip {
   left: 14px;
 }
@@ -1161,7 +1165,7 @@ li:not(:first-child:last-child) .tooltip,
 .thing-name-tooltip,
 .wiki-edits-tooltip {
   padding: 3px 4px 2px 2px;
-  left: -6px !important;
+  left: -6px;
 }
 
 .thing-name-tooltip .tooltip-content,
@@ -1169,11 +1173,15 @@ li:not(:first-child:last-child) .tooltip,
   font-size: 0.85em;
 }
 
-/* Terrifying?
- * https://stackoverflow.com/a/64424759/4633828
- */
-.thing-name-tooltip { margin-right: -120px; }
-.wiki-edits-tooltip { margin-right: -200px; }
+.thing-name-tooltip .tooltip-content {
+  width: max-content;
+  max-width: 120px;
+}
+
+.wiki-edits-tooltip .tooltip-content {
+  width: max-content;
+  max-width: 200px;
+}
 
 .contribution-tooltip .tooltip-content {
   padding: 6px 2px 2px 2px;
diff --git a/src/static/js/client/index.js b/src/static/js/client/index.js
index b2343f07..81ea3415 100644
--- a/src/static/js/client/index.js
+++ b/src/static/js/client/index.js
@@ -15,7 +15,6 @@ import * as hoverableTooltipModule from './hoverable-tooltip.js';
 import * as imageOverlayModule from './image-overlay.js';
 import * as intrapageDotSwitcherModule from './intrapage-dot-switcher.js';
 import * as liveMousePositionModule from './live-mouse-position.js';
-import * as lyricsSwitcherModule from './lyrics-switcher.js';
 import * as quickDescriptionModule from './quick-description.js';
 import * as scriptedLinkModule from './scripted-link.js';
 import * as sidebarSearchModule from './sidebar-search.js';
@@ -38,7 +37,6 @@ export const modules = [
   imageOverlayModule,
   intrapageDotSwitcherModule,
   liveMousePositionModule,
-  lyricsSwitcherModule,
   quickDescriptionModule,
   scriptedLinkModule,
   sidebarSearchModule,
diff --git a/src/static/js/client/lyrics-switcher.js b/src/static/js/client/lyrics-switcher.js
deleted file mode 100644
index b350ea50..00000000
--- a/src/static/js/client/lyrics-switcher.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/* eslint-env browser */
-
-import {stitchArrays} from '../../shared-util/sugar.js';
-
-import {cssProp} from '../client-util.js';
-
-export const info = {
-  id: 'lyricsSwitcherInfo',
-
-  entries: null,
-  switchLinks: null,
-  currentLinks: null,
-};
-
-export function getPageReferences() {
-  const content = document.getElementById('content');
-
-  if (!content) return;
-
-  const switcher = content.querySelector('.lyrics-switcher');
-
-  if (!switcher) return;
-
-  info.entries =
-    Array.from(content.querySelectorAll('.lyrics-entry'));
-
-  info.currentLinks =
-    Array.from(switcher.querySelectorAll('a.current'));
-
-  info.switchLinks =
-    Array.from(switcher.querySelectorAll('a:not(.current)'));
-}
-
-export function addPageListeners() {
-  if (!info.switchLinks) return;
-
-  for (const {switchLink, entry} of stitchArrays({
-    switchLink: info.switchLinks,
-    entry: info.entries,
-  })) {
-    switchLink.addEventListener('click', domEvent => {
-      domEvent.preventDefault();
-      showLyricsEntry(entry);
-    });
-  }
-}
-
-function showLyricsEntry(entry) {
-  const entryToShow = entry;
-
-  stitchArrays({
-    entry: info.entries,
-    currentLink: info.currentLinks,
-    switchLink: info.switchLinks,
-  }).forEach(({
-      entry,
-      currentLink,
-      switchLink,
-    }) => {
-      if (entry === entryToShow) {
-        cssProp(entry, 'display', null);
-        cssProp(currentLink, 'display', null);
-        cssProp(switchLink, 'display', 'none');
-      } else {
-        cssProp(entry, 'display', 'none');
-        cssProp(currentLink, 'display', 'none');
-        cssProp(switchLink, 'display', null);
-      }
-    });
-}
diff --git a/src/static/js/rectangles.js b/src/static/js/rectangles.js
index cdab2cb8..b00ed98e 100644
--- a/src/static/js/rectangles.js
+++ b/src/static/js/rectangles.js
@@ -510,4 +510,46 @@ export class WikiRect extends DOMRect {
       height: this.height,
     });
   }
+
+  // Other utilities
+
+  #display = null;
+
+  display() {
+    if (!this.#display) {
+      this.#display = document.createElement('div');
+      document.body.appendChild(this.#display);
+    }
+
+    Object.assign(this.#display.style, {
+      position: 'fixed',
+      background: '#000c',
+      border: '3px solid var(--primary-color)',
+      borderRadius: '4px',
+      top: this.top + 'px',
+      left: this.left + 'px',
+      width: this.width + 'px',
+      height: this.height + 'px',
+      pointerEvents: 'none',
+    });
+
+    let i = 0;
+    const int = setInterval(() => {
+      i++;
+      if (i >= 3) clearInterval(int);
+      if (!this.#display) return;
+
+      this.#display.style.display = 'none';
+      setTimeout(() => {
+        this.#display.style.display = '';
+      }, 200);
+    }, 600);
+  }
+
+  hide() {
+    if (this.#display) {
+      this.#display.remove();
+      this.#display = null;
+    }
+  }
 }