Unify dialog infrastructure

2026-03-20 07:56:41 +01:00
parent 96cc82db9e
commit a3f021e5e1
6 changed files with 2047 additions and 1150 deletions
--- a/action.php
+++ b/action.php
--- a/dialog.css
+++ b/dialog.css
@@ -0,0 +1,62 @@
+/* ============================================================
+ * Dialog Infrastructure (shared overlay & popup)
+ * ============================================================ */
+.luxtools-dialog-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 10000;
+    justify-content: center;
+    align-items: center;
+}
+
+.luxtools-dialog {
+    background: @ini_background;
+    border: 1px solid @ini_border;
+    border-radius: 0.4em;
+    padding: 1.5em;
+    max-width: 500px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    position: relative;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.luxtools-dialog-close {
+    position: absolute;
+    top: 0.5em;
+    right: 0.75em;
+    background: none;
+    border: none;
+    font-size: 1.5em;
+    cursor: pointer;
+    color: @ini_text;
+    line-height: 1;
+}
+
+.luxtools-dialog-close:hover {
+    opacity: 0.7;
+}
+
+.luxtools-dialog-title {
+    margin: 0 0 0.75em 0;
+    padding-right: 1.5em;
+}
+
+.luxtools-dialog-field {
+    margin: 0.5em 0;
+}
+
+.luxtools-dialog-actions {
+    margin-top: 1em;
+    padding-top: 0.75em;
+    border-top: 1px solid @ini_border;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+}
--- a/js/dialog.js
+++ b/js/dialog.js
@@ -0,0 +1,95 @@
+/* global window, document */
+
+/**
+ * Unified Dialog Infrastructure
+ *
+ * Provides a shared modal overlay and dialog container that all other
+ * client-side modules (event popups, cache purge, etc.) can use.
+ *
+ * Usage:
+ *   Luxtools.Dialog.show(htmlString)   – render content and open
+ *   Luxtools.Dialog.close()            – close the dialog
+ *   Luxtools.Dialog.getContainer()     – return the dialog DOM element
+ */
+(function () {
+  'use strict';
+
+  var Luxtools = window.Luxtools || (window.Luxtools = {});
+
+  var Dialog = (function () {
+    var overlay = null;
+    var container = null;
+
+    /**
+     * Lazily create the overlay + dialog container and attach them to
+     * the document body.  Wires up click-outside-to-close and Escape.
+     */
+    function ensureElements() {
+      if (overlay) return;
+
+      overlay = document.createElement('div');
+      overlay.className = 'luxtools-dialog-overlay';
+      overlay.style.display = 'none';
+
+      container = document.createElement('div');
+      container.className = 'luxtools-dialog';
+      container.setAttribute('role', 'dialog');
+      container.setAttribute('aria-modal', 'true');
+
+      overlay.appendChild(container);
+      document.body.appendChild(overlay);
+
+      // Close when clicking the backdrop (but not the dialog itself)
+      overlay.addEventListener('click', function (e) {
+        if (e.target === overlay) close();
+      });
+
+      // Close on Escape
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && overlay && overlay.style.display !== 'none') {
+          close();
+        }
+      });
+    }
+
+    /**
+     * Show the dialog with the given HTML content.
+     *
+     * The HTML should include a close button with class
+     * `luxtools-dialog-close` – it will be wired up automatically.
+     *
+     * @param {string} html - innerHTML for the dialog container
+     */
+    function show(html) {
+      ensureElements();
+      container.innerHTML = html;
+      overlay.style.display = 'flex';
+
+      // Auto-wire the close button inside the rendered content
+      var closeBtn = container.querySelector('.luxtools-dialog-close');
+      if (closeBtn) closeBtn.addEventListener('click', close);
+    }
+
+    /**
+     * Close (hide) the dialog.
+     */
+    function close() {
+      if (overlay) overlay.style.display = 'none';
+    }
+
+    /**
+     * Return the dialog container element (creates it if necessary).
+     * Useful for querying form inputs after `show()`.
+     *
+     * @returns {HTMLElement}
+     */
+    function getContainer() {
+      ensureElements();
+      return container;
+    }
+
+    return { show: show, close: close, getContainer: getContainer };
+  })();
+
+  Luxtools.Dialog = Dialog;
+})();
--- a/js/event-popup.js
+++ b/js/event-popup.js
--- a/js/main.js
+++ b/js/main.js
@@ -1,7 +1,7 @@
 /* global window, document */

 (function () {
-  'use strict';
+  "use strict";

  var Luxtools = window.Luxtools || (window.Luxtools = {});
  var Lightbox = Luxtools.Lightbox;
@@ -16,7 +16,7 @@
  function findOpenElement(target) {
    var el = target;
    while (el && el !== document) {
-      if (el.classList && el.classList.contains('luxtools-open')) return el;
+      if (el.classList && el.classList.contains("luxtools-open")) return el;
      el = el.parentNode;
    }
    return null;
@@ -25,7 +25,8 @@
  function findGalleryItem(target) {
    var el = target;
    while (el && el !== document) {
-      if (el.classList && el.classList.contains('luxtools-gallery-item')) return el;
+      if (el.classList && el.classList.contains("luxtools-gallery-item"))
+        return el;
      el = el.parentNode;
    }
    return null;
@@ -35,7 +36,9 @@
    // Image gallery lightbox: intercept clicks so we don't navigate away.
    var galleryItem = findGalleryItem(event.target);
    if (galleryItem && Lightbox && Lightbox.open) {
-      var gallery = galleryItem.closest ? galleryItem.closest('div.luxtools-gallery[data-luxtools-gallery="1"]') : null;
+      var gallery = galleryItem.closest
+        ? galleryItem.closest('div.luxtools-gallery[data-luxtools-gallery="1"]')
+        : null;
      if (gallery) {
        event.preventDefault();
        Lightbox.open(gallery, galleryItem);
@@ -47,17 +50,16 @@
    if (!el) return;

    // {{open>...}} renders as a link; avoid jumping to '#'.
-    if (el.tagName && el.tagName.toLowerCase() === 'a') {
+    if (el.tagName && el.tagName.toLowerCase() === "a") {
      event.preventDefault();
    }

-    var raw = el.getAttribute('data-path') || '';
+    var raw = el.getAttribute("data-path") || "";
    if (!raw) return;
    if (!OpenService || !OpenService.openViaService) return;

    // Prefer local client service.
-    OpenService.openViaService(el, raw)
-      .catch(function (err) {
+    OpenService.openViaService(el, raw).catch(function (err) {
      // If the browser blocks the request before it reaches localhost (mixed-content,
      // extensions, stricter CORS handling), fall back to a no-CORS GET ping.
      if (OpenService && OpenService.pingOpenViaImage) {
@@ -65,31 +67,39 @@
      }

      // Fallback to old behavior (often blocked in modern browsers).
-        var url = OpenService && OpenService.normalizeToFileUrl ? OpenService.normalizeToFileUrl(raw) : '';
+      var url =
+        OpenService && OpenService.normalizeToFileUrl
+          ? OpenService.normalizeToFileUrl(raw)
+          : "";
      if (!url) return;
-        console.warn('Local client service failed, falling back to file:// navigation:', err);
+      console.warn(
+        "Local client service failed, falling back to file:// navigation:",
+        err,
+      );
      try {
-          window.open(url, '_blank', 'noopener');
+        window.open(url, "_blank", "noopener");
      } catch (e) {
        try {
          window.location.href = url;
        } catch (e2) {
-            console.error('Failed to open file URL:', e2);
+          console.error("Failed to open file URL:", e2);
        }
      }
    });
  }

  function initChronologicalEventTimes() {
-    var nodes = document.querySelectorAll('.luxtools-event-time[data-luxtools-start]');
+    var nodes = document.querySelectorAll(
+      ".luxtools-event-time[data-luxtools-start]",
+    );
    if (!nodes || nodes.length === 0) return;

    var formatter;
    try {
-      formatter = new Intl.DateTimeFormat('de-DE', {
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false
+      formatter = new Intl.DateTimeFormat("de-DE", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
      });
    } catch (e) {
      formatter = null;
@@ -97,7 +107,7 @@

    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
-      var raw = node.getAttribute('data-luxtools-start') || '';
+      var raw = node.getAttribute("data-luxtools-start") || "";
      if (!raw) continue;

      var date = new Date(raw);
@@ -107,9 +117,9 @@
      if (formatter) {
        label = formatter.format(date);
      } else {
-        var hh = String(date.getHours()).padStart(2, '0');
-        var mm = String(date.getMinutes()).padStart(2, '0');
-        label = hh + ':' + mm;
+        var hh = String(date.getHours()).padStart(2, "0");
+        var mm = String(date.getMinutes()).padStart(2, "0");
+        label = hh + ":" + mm;
      }

      node.textContent = label;
@@ -120,123 +130,185 @@
  // Purge Cache Dialog
  // ============================================================
  function initPurgeCacheDialog() {
-    var $link = jQuery('a.luxtools-invalidate-cache');
-    if ($link.length === 0) return;
+    document.addEventListener(
+      "click",
+      function (e) {
+        var link = e.target.closest
+          ? e.target.closest("a.luxtools-invalidate-cache")
+          : null;
+        if (!link) return;

-    $link.on('click.luxtools', function (e) {
        e.preventDefault();

-      var href = $link.attr('href') || '';
-      var lang = (window.LANG && window.LANG.plugins && window.LANG.plugins.luxtools)
+        var href = link.getAttribute("href") || "";
+        var lang =
+          window.LANG && window.LANG.plugins && window.LANG.plugins.luxtools
            ? window.LANG.plugins.luxtools
            : {};

-      var $dialog = jQuery(
-        '<div>' +
-        '<p>' + (lang.cache_purge_dialog_intro || 'The DokuWiki cache will always be purged. Optionally also purge the luxtools-specific caches:') + '</p>' +
-        '<p><label><input type="checkbox" id="luxtools-purge-pagelinks"> <strong>' + (lang.cache_purge_pagelinks_label || 'Pagelinks') + '</strong>' +
-        ' &ndash; ' + (lang.cache_purge_pagelinks_desc || 'Purges the pagelink mapping cache') + '</label></p>' +
-        '<p><label><input type="checkbox" id="luxtools-purge-thumbs"> <strong>' + (lang.cache_purge_thumbs_label || 'Thumbnails') + '</strong>' +
-        ' &ndash; ' + (lang.cache_purge_thumbs_desc || 'Purges all cached image thumbnails') + '</label></p>' +
-        '</div>'
-      );
+        var html = '<div class="luxtools-dialog-content">';
+        html +=
+          '<button type="button" class="luxtools-dialog-close" aria-label="Close">&times;</button>';
+        html +=
+          '<h3 class="luxtools-dialog-title">' +
+          (lang.cache_purge_dialog_title || "Purge Cache") +
+          "</h3>";
+        html +=
+          "<p>" +
+          (lang.cache_purge_dialog_intro ||
+            "The DokuWiki cache will always be purged. Optionally also purge the luxtools-specific caches:") +
+          "</p>";
+        html +=
+          '<p><label><input type="checkbox" id="luxtools-purge-pagelinks"> <strong>' +
+          (lang.cache_purge_pagelinks_label || "Pagelinks") +
+          "</strong>";
+        html +=
+          " &ndash; " +
+          (lang.cache_purge_pagelinks_desc ||
+            "Purges the pagelink mapping cache") +
+          "</label></p>";
+        html +=
+          '<p><label><input type="checkbox" id="luxtools-purge-thumbs"> <strong>' +
+          (lang.cache_purge_thumbs_label || "Thumbnails") +
+          "</strong>";
+        html +=
+          " &ndash; " +
+          (lang.cache_purge_thumbs_desc ||
+            "Purges all cached image thumbnails") +
+          "</label></p>";
+        html += '<div class="luxtools-dialog-actions">';
+        html +=
+          '<button type="button" class="button luxtools-purge-confirm">' +
+          (lang.cache_purge_confirm || "Purge Cache") +
+          "</button> ";
+        html +=
+          '<button type="button" class="button luxtools-purge-cancel">' +
+          (lang.cache_purge_cancel || "Cancel") +
+          "</button>";
+        html += "</div>";
+        html += "</div>";

-      $dialog.dialog({
-        title: lang.cache_purge_dialog_title || 'Purge Cache',
-        modal: true,
-        width: 420,
-        buttons: [
-          {
-            text: lang.cache_purge_cancel || 'Cancel',
-            click: function () { $dialog.dialog('close'); }
-          },
-          {
-            text: lang.cache_purge_confirm || 'Purge Cache',
-            click: function () {
+        Luxtools.Dialog.show(html);
+
+        var container = Luxtools.Dialog.getContainer();
+
+        var cancelBtn = container.querySelector(".luxtools-purge-cancel");
+        if (cancelBtn) {
+          cancelBtn.addEventListener("click", function () {
+            Luxtools.Dialog.close();
+          });
+        }
+
+        var confirmBtn = container.querySelector(".luxtools-purge-confirm");
+        if (confirmBtn) {
+          confirmBtn.addEventListener("click", function () {
            var url = href;
-              if ($dialog.find('#luxtools-purge-pagelinks').prop('checked')) {
-                url += '&luxtools_purge_pagelinks=1';
+            var plCheck = container.querySelector("#luxtools-purge-pagelinks");
+            var thCheck = container.querySelector("#luxtools-purge-thumbs");
+            if (plCheck && plCheck.checked) {
+              url += "&luxtools_purge_pagelinks=1";
            }
-              if ($dialog.find('#luxtools-purge-thumbs').prop('checked')) {
-                url += '&luxtools_purge_thumbs=1';
+            if (thCheck && thCheck.checked) {
+              url += "&luxtools_purge_thumbs=1";
            }
-              $dialog.dialog('close');
+            Luxtools.Dialog.close();
            window.location.href = url;
-            }
-          }
-        ],
-        close: function () {
-          jQuery(this).dialog('destroy').remove();
-        }
-      });
          });
        }
+      },
+      false,
+    );
+  }

  // ============================================================
  // Calendar Sync Button (syntax widget)
  // ============================================================
  function initCalendarSyncButtons() {
-    document.addEventListener('click', function (e) {
+    document.addEventListener(
+      "click",
+      function (e) {
        var btn = e.target;
-      if (!btn || !btn.classList || !btn.classList.contains('luxtools-calendar-sync-btn')) return;
+        if (
+          !btn ||
+          !btn.classList ||
+          !btn.classList.contains("luxtools-calendar-sync-btn")
+        )
+          return;

        e.preventDefault();

-      var ajaxUrl = btn.getAttribute('data-luxtools-ajax-url') || '';
-      var sectok = btn.getAttribute('data-luxtools-sectok') || '';
+        var ajaxUrl = btn.getAttribute("data-luxtools-ajax-url") || "";
+        var sectok = btn.getAttribute("data-luxtools-sectok") || "";
        if (!ajaxUrl) return;

-      var status = btn.parentNode ? btn.parentNode.querySelector('.luxtools-calendar-sync-status') : null;
+        var status = btn.parentNode
+          ? btn.parentNode.querySelector(".luxtools-calendar-sync-status")
+          : null;

        btn.disabled = true;
        if (status) {
-        status.textContent = 'Syncing...';
-        status.style.color = '';
+          status.textContent = "Syncing...";
+          status.style.color = "";
        }

        var xhr = new XMLHttpRequest();
-      xhr.open('POST', ajaxUrl, true);
-      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+        xhr.open("POST", ajaxUrl, true);
+        xhr.setRequestHeader(
+          "Content-Type",
+          "application/x-www-form-urlencoded",
+        );
        xhr.onload = function () {
          btn.disabled = false;
          try {
            var r = JSON.parse(xhr.responseText);
            if (status) {
-            status.textContent = r.message || (r.ok ? 'Done' : 'Failed');
-            status.style.color = r.ok ? 'green' : 'red';
+              status.textContent = r.message || (r.ok ? "Done" : "Failed");
+              status.style.color = r.ok ? "green" : "red";
            }
          } catch (ex) {
            if (status) {
-            status.textContent = 'Error';
-            status.style.color = 'red';
+              status.textContent = "Error";
+              status.style.color = "red";
            }
          }
        };
        xhr.onerror = function () {
          btn.disabled = false;
          if (status) {
-          status.textContent = 'Network error';
-          status.style.color = 'red';
+            status.textContent = "Network error";
+            status.style.color = "red";
          }
        };
-      xhr.send('call=luxtools_calendar_sync&sectok=' + encodeURIComponent(sectok));
-    }, false);
+        xhr.send(
+          "call=luxtools_calendar_sync&sectok=" + encodeURIComponent(sectok),
+        );
+      },
+      false,
+    );
  }

  // ============================================================
  // Initialize
  // ============================================================
-  document.addEventListener('click', onClick, false);
-  document.addEventListener('DOMContentLoaded', function () {
+  document.addEventListener("click", onClick, false);
+  document.addEventListener(
+    "DOMContentLoaded",
+    function () {
      if (GalleryThumbnails && GalleryThumbnails.init) GalleryThumbnails.init();
      initChronologicalEventTimes();
      if (CalendarWidget && CalendarWidget.init) CalendarWidget.init();
      initPurgeCacheDialog();
      initCalendarSyncButtons();
-  }, false);
-  document.addEventListener('DOMContentLoaded', function () {
+    },
+    false,
+  );
+  document.addEventListener(
+    "DOMContentLoaded",
+    function () {
      if (Scratchpads && Scratchpads.init) Scratchpads.init();
-  }, false);
+    },
+    false,
+  );

  Luxtools.initChronologicalEventTimes = initChronologicalEventTimes;
 })();
--- a/style.css
+++ b/style.css
@@ -1,3 +1,5 @@
+/* Dialog infrastructure styles are in dialog.css, loaded via CSS_STYLES_INCLUDED hook in action.php */
+
 /* luxtools plugin styles
 * Keep this minimal and scoped to the plugin container.
 */
@@ -7,7 +9,6 @@ div.luxtools-plugin table thead tr:hover > * {
    background-color: @ini_background_alt !important;
 }

-
 /* "Open Location" row above the header should be visually smaller. */
 div.luxtools-plugin table thead tr.luxtools-openlocation-row td {
    font-size: 80%;
@@ -229,8 +230,12 @@ div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > br {
 }

 div.plugin_luxtools_admin form.plugin_luxtools_admin_form textarea.edit,
-div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="text"].edit,
-div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="number"].edit,
+div.plugin_luxtools_admin
+    form.plugin_luxtools_admin_form
+    input[type="text"].edit,
+div.plugin_luxtools_admin
+    form.plugin_luxtools_admin_form
+    input[type="number"].edit,
 div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
    flex: 1 1 auto;
    margin-left: auto;
@@ -249,7 +254,10 @@ div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
 }

 /* Checkbox controls: keep them in the control column, left-aligned. */
-div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block input[type="checkbox"] {
+div.plugin_luxtools_admin
+    form.plugin_luxtools_admin_form
+    label.block
+    input[type="checkbox"] {
    margin-left: 0;
    align-self: center;
 }
@@ -265,8 +273,12 @@ div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block input[type
    }

    div.plugin_luxtools_admin form.plugin_luxtools_admin_form textarea.edit,
-    div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="text"].edit,
-    div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="number"].edit,
+    div.plugin_luxtools_admin
+        form.plugin_luxtools_admin_form
+        input[type="text"].edit,
+    div.plugin_luxtools_admin
+        form.plugin_luxtools_admin_form
+        input[type="number"].edit,
    div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
        width: 100%;
        max-width: 100%;
@@ -386,12 +398,12 @@ html.luxtools-noscroll body {
 }

 .luxtools-lightbox button.luxtools-lightbox-zone-prev::after {
-    content: '‹';
+    content: "‹";
    left: 0.35em;
 }

 .luxtools-lightbox button.luxtools-lightbox-zone-next::after {
-    content: '›';
+    content: "›";
    right: 0.35em;
 }

@@ -416,7 +428,7 @@ html.luxtools-noscroll body {

 .luxtools-lightbox button.luxtools-lightbox-close:hover,
 .luxtools-lightbox button.luxtools-lightbox-close:focus-visible {
-    background: rgba(0, 0, 0, 0.60);
+    background: rgba(0, 0, 0, 0.6);
    border-radius: 999px;
 }

@@ -432,7 +444,10 @@ html.luxtools-noscroll body {

 .luxtools-grouping {
    display: grid;
-    grid-template-columns: repeat(var(--luxtools-grouping-cols, 2), minmax(0, 1fr));
+    grid-template-columns: repeat(
+        var(--luxtools-grouping-cols, 2),
+        minmax(0, 1fr)
+    );
    gap: var(--luxtools-grouping-gap, 0);
    justify-content: var(--luxtools-grouping-justify, start);
    align-items: var(--luxtools-grouping-align, start);
@@ -604,7 +619,10 @@ div.luxtools-calendar td.luxtools-calendar-day-today {
 }

 div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > a,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a {
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a {
    display: flex;
    align-items: center;
    justify-content: center;
@@ -617,33 +635,77 @@ div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > sp
    padding: 0.1em 0;
 }

-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > a.wikilink2:link,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > a.wikilink2:visited,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a.wikilink2:link,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a.wikilink2:visited {
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > a.wikilink2:link,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > a.wikilink2:visited,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a.wikilink2:link,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a.wikilink2:visited {
    color: @ini_missing;
    border-bottom: 0;
 }

-
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > a:hover,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > a:focus,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > a:active,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > a:visited,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a:hover,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a:focus,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a:active,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a:visited {
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > a:hover,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > a:focus,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > a:active,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > a:visited,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a:hover,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a:focus,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a:active,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a:visited {
    text-decoration: none;
    border-bottom: 0;
    box-shadow: none;
 }

-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a:visited,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a:hover,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a:focus,
-div.luxtools-calendar.luxtools-calendar-size-small td.luxtools-calendar-day > span.curid > a:active {
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a:visited,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a:hover,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a:focus,
+div.luxtools-calendar.luxtools-calendar-size-small
+    td.luxtools-calendar-day
+    > span.curid
+    > a:active {
    font-weight: bold;
    text-decoration: underline;
    border-bottom: 0;
@@ -654,7 +716,8 @@ div.luxtools-calendar td.luxtools-calendar-day:hover {
    background-color: @ini_background_alt;
 }

-div.luxtools-calendar td.luxtools-calendar-day.luxtools-calendar-day-today:hover {
+div.luxtools-calendar
+    td.luxtools-calendar-day.luxtools-calendar-day-today:hover {
    background-color: @ini_highlight;
 }

@@ -668,7 +731,9 @@ div.luxtools-calendar td.luxtools-calendar-day {
    position: relative;
 }

-div.luxtools-calendar.luxtools-calendar-size-large table.luxtools-calendar-table td {
+div.luxtools-calendar.luxtools-calendar-size-large
+    table.luxtools-calendar-table
+    td {
    text-align: left;
    vertical-align: top;
 }
@@ -677,25 +742,36 @@ div.luxtools-calendar.luxtools-calendar-size-large td.luxtools-calendar-day {
    height: 8.25em;
 }

-div.luxtools-calendar.luxtools-calendar-size-large td.luxtools-calendar-day-empty {
+div.luxtools-calendar.luxtools-calendar-size-large
+    td.luxtools-calendar-day-empty {
    height: 8.25em;
 }

-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-frame {
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-frame {
    min-height: 8.25em;
    padding: 0.35em 0.4em 0.4em 0.4em;
    box-sizing: border-box;
 }

-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-number {
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-number {
    text-align: right;
    margin-bottom: 0.25em;
    line-height: 1.1;
 }

-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-number > a,
-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-number > span.curid > a,
-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-number span.curid > a {
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-number
+    > a,
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-number
+    > span.curid
+    > a,
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-number
+    span.curid
+    > a {
    display: inline;
    min-height: 0;
    padding: 0;
@@ -706,18 +782,30 @@ div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-number
    font-weight: bold;
 }

-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-number > a.wikilink2:link,
-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-number > a.wikilink2:visited,
-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-number span.curid > a.wikilink2:link,
-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-number span.curid > a.wikilink2:visited {
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-number
+    > a.wikilink2:link,
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-number
+    > a.wikilink2:visited,
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-number
+    span.curid
+    > a.wikilink2:link,
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-number
+    span.curid
+    > a.wikilink2:visited {
    color: @ini_missing;
 }

-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-events {
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-day-events {
    overflow: hidden;
 }

-div.luxtools-calendar.luxtools-calendar-size-large ul.luxtools-calendar-event-list {
+div.luxtools-calendar.luxtools-calendar-size-large
+    ul.luxtools-calendar-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
@@ -735,17 +823,20 @@ div.luxtools-calendar.luxtools-calendar-size-large li.luxtools-calendar-event {
    cursor: pointer;
 }

-div.luxtools-calendar.luxtools-calendar-size-large li.luxtools-calendar-event:hover {
+div.luxtools-calendar.luxtools-calendar-size-large
+    li.luxtools-calendar-event:hover {
    background-color: @ini_highlight;
 }

-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-event-time {
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-event-time {
    flex: 0 0 auto;
    font-weight: bold;
    white-space: nowrap;
 }

-div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-event-title {
+div.luxtools-calendar.luxtools-calendar-size-large
+    .luxtools-calendar-event-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
@@ -753,7 +844,8 @@ div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-event-titl
    text-overflow: ellipsis;
 }

-div.luxtools-calendar.luxtools-calendar-size-large li.luxtools-calendar-event-more {
+div.luxtools-calendar.luxtools-calendar-size-large
+    li.luxtools-calendar-event-more {
    border-left-color: @ini_border;
    justify-content: flex-end;
    font-style: italic;
@@ -761,8 +853,10 @@ div.luxtools-calendar.luxtools-calendar-size-large li.luxtools-calendar-event-mo

@media (max-width: 800px) {
    div.luxtools-calendar.luxtools-calendar-size-large td.luxtools-calendar-day,
-    div.luxtools-calendar.luxtools-calendar-size-large td.luxtools-calendar-day-empty,
-    div.luxtools-calendar.luxtools-calendar-size-large .luxtools-calendar-day-frame {
+    div.luxtools-calendar.luxtools-calendar-size-large
+        td.luxtools-calendar-day-empty,
+    div.luxtools-calendar.luxtools-calendar-size-large
+        .luxtools-calendar-day-frame {
        height: 7em;
        min-height: 7em;
    }
@@ -807,7 +901,6 @@ div.luxtools-calendar.luxtools-calendar-size-large li.luxtools-calendar-event-mo
    clip-path: polygon(0 0, 0 100%, 100% 100%);
 }

-
 /* ============================================================
 * Chronological Events on Day Pages
 * ============================================================ */
@@ -833,7 +926,6 @@ div.luxtools-chronological-events li[data-luxtools-event] .luxtools-event-time {
    margin-right: 0.25em;
 }

-
 /* ============================================================
 * Maintenance Tasks
 * ============================================================ */
@@ -868,7 +960,6 @@ button.luxtools-task-complete-btn:disabled {
    cursor: wait;
 }

-
 /* ============================================================
 * Maintenance Task List (syntax plugin)
 * ============================================================ */
@@ -907,61 +998,10 @@ li.luxtools-task-overdue .luxtools-task-date {
    text-decoration: line-through;
 }

-
 /* ============================================================
- * Event Popup
+ * Event Popup (content-specific styles – structural dialog
+ * styles live in dialog.css)
 * ============================================================ */
-.luxtools-event-popup-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 10000;
-    justify-content: center;
-    align-items: center;
-}
-
-.luxtools-event-popup {
-    background: @ini_background;
-    border: 1px solid @ini_border;
-    border-radius: 0.4em;
-    padding: 1.5em;
-    max-width: 500px;
-    width: 90%;
-    max-height: 80vh;
-    overflow-y: auto;
-    position: relative;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-}
-
-.luxtools-event-popup-close {
-    position: absolute;
-    top: 0.5em;
-    right: 0.75em;
-    background: none;
-    border: none;
-    font-size: 1.5em;
-    cursor: pointer;
-    color: @ini_text;
-    line-height: 1;
-}
-
-.luxtools-event-popup-close:hover {
-    opacity: 0.7;
-}
-
-.luxtools-event-popup-title {
-    margin: 0 0 0.75em 0;
-    padding-right: 1.5em;
-}
-
-.luxtools-event-popup-field {
-    margin: 0.5em 0;
-}
-
 .luxtools-event-popup-description {
    white-space: pre-wrap;
    word-break: break-word;
@@ -973,16 +1013,6 @@ li.luxtools-task-overdue .luxtools-task-date {
    font-size: 0.9em;
 }

-/* Event popup action buttons */
-.luxtools-event-popup-actions {
-    margin-top: 1em;
-    padding-top: 0.75em;
-    border-top: 1px solid @ini_border;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5em;
-}
-
 .luxtools-recurrence-actions {
    flex-direction: column;
 }
@@ -1051,7 +1081,6 @@ td.luxtools-calendar-day[data-luxtools-day] {
    cursor: pointer;
 }

-
 /* ============================================================
 * Notifications (fallback)
 * ============================================================ */