feat: better markdown style

src/events.ts

@@ -34,7 +34,7 @@ export function removeAllObservers() {
 export async function initSiteEvents() {
   try {
     //#SECTION queue
-    // the queue container always exists so it doesn't need the extra init function
+    // the queue container always exists so it doesn't need an extra init function
     const queueObs = new MutationObserver(([ { addedNodes, removedNodes, target } ]) => {
       if(addedNodes.length > 0 || removedNodes.length > 0) {
         info(`Detected queue change - added nodes: ${[...addedNodes.values()].length} - removed nodes: ${[...removedNodes.values()].length}`);

src/features/lyrics.ts

@@ -41,7 +41,7 @@ export function addLyricsCacheEntry(artists: string, song: string, lyricsUrl: st
 
 //#MARKER media control bar
 
-let mcCurrentSongTitle = "";
+let currentSongTitle = "";
 
 /** Adds a lyrics button to the media controls bar */
 export function addMediaCtrlLyricsBtn(): void {
@@ -65,7 +65,7 @@ async function addActualMediaCtrlLyricsBtn(likeContainer: HTMLElement) {
     insertAfter(likeContainer, linkElem);
   })();
 
-  mcCurrentSongTitle = songTitleElem.title;
+  currentSongTitle = songTitleElem.title;
 
   const spinnerIconUrl = await getResourceUrl("spinner");
   const lyricsIconUrl = await getResourceUrl("lyrics");
@@ -75,13 +75,13 @@ async function addActualMediaCtrlLyricsBtn(likeContainer: HTMLElement) {
     for await(const mut of mutations) {
       const newTitle = (mut.target as HTMLElement).title;
 
-      if(newTitle !== mcCurrentSongTitle && newTitle.length > 0) {
+      if(newTitle !== currentSongTitle && newTitle.length > 0) {
         const lyricsBtn = document.querySelector("#betterytm-lyrics-button") as HTMLAnchorElement;
 
         if(!lyricsBtn)
           return;
 
-        info(`Song title changed from '${mcCurrentSongTitle}' to '${newTitle}'`);
+        info(`Song title changed from '${currentSongTitle}' to '${newTitle}'`);
 
         lyricsBtn.style.cursor = "wait";
         lyricsBtn.style.pointerEvents = "none";
@@ -90,7 +90,7 @@ async function addActualMediaCtrlLyricsBtn(likeContainer: HTMLElement) {
         imgElem.src = spinnerIconUrl;
         imgElem.classList.add("bytm-spinner");
 
-        mcCurrentSongTitle = newTitle;
+        currentSongTitle = newTitle;
 
         const url = await getCurrentLyricsUrl(); // can take a second or two
 

src/menu/menu_old.css

@@ -205,30 +205,51 @@
   font-size: 1.5em;
 }
 
-#bytm-changelog-menu-text a, #bytm-menu-version {
+/* Markdown stuff */
+
+.bytm-markdown-container a, #bytm-menu-version {
   color: #369bff;
   text-decoration: none;
   cursor: pointer;
 }
 
-#bytm-changelog-menu-text a:hover, #bytm-menu-version:hover {
+.bytm-markdown-container a:hover, #bytm-menu-version:hover {
   text-decoration: underline;
 }
 
-#bytm-changelog-menu-text h2 {
+.bytm-markdown-container kbd {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px;
+  padding-top: 2px;
+  font-size: 0.95em;
+  line-height: 9px;
+  background-color: #222;
+  border: 1px solid #777;
+  border-radius: 5px;
+  box-shadow: inset 0 -2px 0 #515559;
+}
+
+.bytm-markdown-container code {
+  background-color: #222;
+  border-radius: 3px;
+  padding: 1px 5px;
+}
+
+.bytm-markdown-container h2 {
   margin-bottom: 5px;
 }
 
-#bytm-changelog-menu-text h2:not(:first-of-type) {
+.bytm-markdown-container h2:not(:first-of-type) {
   margin-top: 20px;
 }
 
-#bytm-changelog-menu-text ul li::before {
+.bytm-markdown-container ul li::before {
   content: "• ";
   font-weight: bolder;
 }
 
-#bytm-changelog-menu-text ul li > ul li::before {
+.bytm-markdown-container ul li > ul li::before {
   white-space: pre;
   content: "    • ";
   font-weight: bolder;

src/menu/menu_old.ts

@@ -395,7 +395,7 @@ export async function addMenu() {
   const versionElem = document.createElement("a");
   versionElem.id = "bytm-menu-version";
   versionElem.role = "button";
-  versionElem.title = `Version ${scriptInfo.version} - Build ${scriptInfo.lastCommit}`;
+  versionElem.title = `Version ${scriptInfo.version} (build ${scriptInfo.lastCommit}) - click to open the changelog`;
   versionElem.innerText = `v${scriptInfo.version} (${scriptInfo.lastCommit})`;
 
   versionElem.addEventListener("click", (e) => {
@@ -881,6 +881,7 @@ async function addChangelogMenu() {
 
   const textElem = document.createElement("div");
   textElem.id = "bytm-changelog-menu-text";
+  textElem.classList.add("bytm-markdown-container");
   textElem.innerHTML = changelogContent;
 
   //#SECTION finalize