css: Adjust scope for main overlay CSS and click handlers.

KaTeX makes use of a "span.overlay" element for the little vector
arrow symbol on top of a `\vec` object. This conflicts with Zulip's
CSS for our overlays, which are divs with the `overlay` CSS class.

While KaTeX may rename their class
(https://github.com/KaTeX/KaTeX/issues/1456), we can work around this
issue by scoping our own overlay CSS and click handlers to
"div.overlay" rather than ".overlay".

Fixes #18068.

static/js/overlays.js

@@ -44,20 +44,20 @@ export function drafts_open() {
 
 // To address bugs where mouse might apply to the streams/settings
 // overlays underneath an open modal within those settings UI, we add
-// this inline style to '.overlay.show', overriding the
+// this inline style to 'div.overlay.show', overriding the
 // "pointer-events: all" style in app_components.css.
 //
 // This is kinda hacky; it only works for modals within overlays, and
 // we need to make sure it gets re-enabled when the modal closes.
 export function disable_background_mouse_events() {
-    $(".overlay.show").attr("style", "pointer-events: none");
+    $("div.overlay.show").attr("style", "pointer-events: none");
 }
 
 // This removes only the inline-style of the element that
 // was added in disable_background_mouse_events and
 // enables the background mouse events.
 export function enable_background_mouse_events() {
-    $(".overlay.show").attr("style", null);
+    $("div.overlay.show").attr("style", null);
 }
 
 export function active_modal() {
@@ -211,7 +211,7 @@ export function close_active_modal() {
 }
 
 export function close_for_hash_change() {
-    $(".overlay.show").removeClass("show");
+    $("div.overlay.show").removeClass("show");
     if (active_overlay) {
         close_handler();
     }
@@ -228,14 +228,14 @@ export function open_settings() {
 }
 
 export function initialize() {
-    $("body").on("click", ".overlay, .overlay .exit", (e) => {
+    $("body").on("click", "div.overlay, div.overlay .exit", (e) => {
         let $target = $(e.target);
 
-        // if the target is not the .overlay element, search up the node tree
+        // if the target is not the div.overlay element, search up the node tree
         // until it is found.
         if ($target.is(".exit, .exit-sign, .overlay-content, .exit span")) {
             $target = $target.closest("[data-overlay]");
-        } else if (!$target.is(".overlay")) {
+        } else if (!$target.is("div.overlay")) {
             // not a valid click target then.
             return;
         }

static/styles/app_components.css

@@ -271,7 +271,7 @@
 }
 
 /* -- unified overlay design component -- */
-.overlay {
+div.overlay {
     position: fixed;
     top: 0;
     left: 0;

static/styles/night_mode.css

@@ -272,7 +272,7 @@ on a dark background, and don't change the dark labels dark either. */
         color: hsla(0, 0%, 90%, 1);
     }
 
-    .overlay,
+    div.overlay,
     #subscription_overlay
         #stream-creation
         #stream_creation_form
@@ -283,7 +283,7 @@ on a dark background, and don't change the dark labels dark either. */
         background-color: hsla(212, 28%, 8%, 0.75);
     }
 
-    .overlay .flex.overlay-content > div,
+    div.overlay .flex.overlay-content > div,
     .dropdown-menu.typeahead,
     #settings_page,
     .informational-overlays .overlay-content {