From c939c544e2ef5859714876f9f8c84ecea7215a36 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmx.de>
Date: Fri, 31 May 2024 21:59:26 +0200
Subject: [PATCH] Rename popup css classes

---
 public/css/popup.css                          | 32 +++---
 public/index.html                             | 14 +--
 public/script.js                              |  4 +-
 public/scripts/chats.js                       | 18 ++--
 .../scripts/extensions/quick-reply/style.css  | 98 +++++++++----------
 .../scripts/extensions/quick-reply/style.less |  8 +-
 public/scripts/popup.js                       | 20 ++--
 public/style.css                              |  8 +-
 8 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/public/css/popup.css b/public/css/popup.css
index 2f1e28136..7f8f8e335 100644
--- a/public/css/popup.css
+++ b/public/css/popup.css
@@ -3,7 +3,7 @@ dialog {
 }
 
 /* Closed state of the dialog */
-.dialogue_popup {
+.popup {
     width: 500px;
     text-align: center;
     box-shadow: 0px 0px 14px var(--black70a);
@@ -23,58 +23,58 @@ dialog {
     -webkit-font-smoothing: subpixel-antialiased;
 }
 
-.dialogue_popup .popup_content {
+.popup .popup_content {
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
 
-.dialogue_popup .dialogue_popup_text {
+.popup .popup_text {
     padding: 0 8px;
     overflow: hidden;
 }
 
-.dialogue_popup.vertical_scrolling_dialogue_popup .dialogue_popup_text {
+.popup.vertical_scrolling_dialogue_popup .popup_text {
     overflow-y: auto;
 }
 
-.dialogue_popup.horizontal_scrolling_dialogue_popup .dialogue_popup_text {
+.popup.horizontal_scrolling_dialogue_popup .popup_text {
     overflow-x: auto;
 }
 
 /* Open state of the dialog */
-.dialogue_popup[open] {
+.popup[open] {
     animation: pop-in var(--animation-duration-slow) ease-in-out;
 }
 
-.dialogue_popup[closing] {
+.popup[closing] {
     animation: pop-out var(--animation-duration-slow) ease-in-out;
 }
 
-.dialogue_popup[open]::backdrop {
+.popup[open]::backdrop {
     animation: fade-in var(--animation-duration-slow) ease-in-out;
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
     -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
     background-color: var(--black30a);
 }
 
-.dialogue_popup[closing]::backdrop {
+.popup[closing]::backdrop {
     animation: fade-out var(--animation-duration-slow) ease-in-out;
 }
 
 /* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
-.dialogue_popup #toast-container {
+.popup #toast-container {
     height: 100svh;
     top: calc(50% + var(--topBarBlockSize));
     left: 50%;
     transform: translate(-50%, -50%);
 }
 
-.dialogue_popup_input {
+.popup_input {
     margin-top: 10px;
 }
 
-.dialogue_popup_controls {
+.popup_controls {
     margin-top: 10px;
     display: flex;
     align-self: center;
@@ -85,7 +85,7 @@ dialog {
     box-shadow: 0 0 5px var(--white20a);
 }
 
-.menu_button.dialogue_popup_ok {
+.menu_button.popup_ok {
     background-color: var(--crimson70a);
     cursor: pointer;
 }
@@ -94,3 +94,9 @@ dialog {
     /** Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
     width: unset;
 }
+
+dialog.popup .menu_button:focus,
+dialog input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):focus {
+    /** For dialogs, mimic the outline of keyboard navigation for all button focus */
+    outline: 1px solid white;
+}
diff --git a/public/index.html b/public/index.html
index fe30492dc..83a81a4b1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4849,16 +4849,16 @@
         </div>
     </div>
     <!-- various fullscreen popups -->
-    <template id="shadow_popup_template" data-i18n="[popup_text_save]popup_text_save;[popup_text_yes]popup_text_yes;[popup_text_no]popup_text_no;[popup_text_cancel]popup_text_cancel;[popup_text_import]popup_text_import" popup_text_save="Save" popup_text_yes="Yes" popup_text_no="No" popup_text_cancel="Cancel" popup_text_import="Import"> <!-- localization data holder for popups -->
-        <dialog class="dialogue_popup shadow_popup">
+    <template id="popup_template" data-i18n="[popup_text_save]popup_text_save;[popup_text_yes]popup_text_yes;[popup_text_no]popup_text_no;[popup_text_cancel]popup_text_cancel;[popup_text_import]popup_text_import" popup_text_save="Save" popup_text_yes="Yes" popup_text_no="No" popup_text_cancel="Cancel" popup_text_import="Import"> <!-- localization data holder for popups -->
+        <dialog class="popup">
             <div class="popup_content">
-                <div class="dialogue_popup_text">
+                <div class="popup_text">
                     <h3 class="margin0">text</h3>
                 </div>
-                <textarea class="dialogue_popup_input text_pole result_control" rows="1" data-result="1"></textarea>
-                <div class="dialogue_popup_controls">
-                    <div class="dialogue_popup_ok menu_button result_control" data-i18n="Delete" data-result="1" tabindex="0">Delete</div>
-                    <div class="dialogue_popup_cancel menu_button result_control" data-i18n="Cancel" data-result="0" tabindex="0">Cancel</div>
+                <textarea class="popup_input text_pole result_control" rows="1" data-result="1"></textarea>
+                <div class="popup_controls">
+                    <div class="popup_ok menu_button result_control" data-i18n="Delete" data-result="1" tabindex="0">Delete</div>
+                    <div class="popup_cancel menu_button result_control" data-i18n="Cancel" data-result="0" tabindex="0">Cancel</div>
                 </div>
             </div>
         </dialog>
diff --git a/public/script.js b/public/script.js
index b94195ee7..8233a1323 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10214,7 +10214,7 @@ jQuery(async function () {
             '#character_cross',
             '#avatar-and-name-block',
             '#shadow_popup',
-            '.shadow_popup',
+            '.popup',
             '#world_popup',
             '.ui-widget',
             '.text_pole',
@@ -10517,7 +10517,7 @@ jQuery(async function () {
 
     $(document).on('click', '.external_import_button, #external_import_button', async () => {
         const html = await renderTemplateAsync('importCharacters');
-        const input = await callGenericPopup(html, POPUP_TYPE.INPUT, '', { okButton: $('#shadow_popup_template').attr('popup_text_import'), rows: 4 });
+        const input = await callGenericPopup(html, POPUP_TYPE.INPUT, '', { okButton: $('#popup_template').attr('popup_text_import'), rows: 4 });
 
         if (!input) {
             console.debug('Custom content import cancelled');
diff --git a/public/scripts/chats.js b/public/scripts/chats.js
index 3187276d7..f4b65c4ed 100644
--- a/public/scripts/chats.js
+++ b/public/scripts/chats.js
@@ -963,22 +963,22 @@ async function openAttachmentManager() {
     }
 
     function addDragAndDrop() {
-        $(document.body).on('dragover', '.dialogue_popup', (event) => {
+        $(document.body).on('dragover', '.popup', (event) => {
             event.preventDefault();
             event.stopPropagation();
-            $(event.target).closest('.dialogue_popup').addClass('dragover');
+            $(event.target).closest('.popup').addClass('dragover');
         });
 
-        $(document.body).on('dragleave', '.dialogue_popup', (event) => {
+        $(document.body).on('dragleave', '.popup', (event) => {
             event.preventDefault();
             event.stopPropagation();
-            $(event.target).closest('.dialogue_popup').removeClass('dragover');
+            $(event.target).closest('.popup').removeClass('dragover');
         });
 
-        $(document.body).on('drop', '.dialogue_popup', async (event) => {
+        $(document.body).on('drop', '.popup', async (event) => {
             event.preventDefault();
             event.stopPropagation();
-            $(event.target).closest('.dialogue_popup').removeClass('dragover');
+            $(event.target).closest('.popup').removeClass('dragover');
 
             const files = Array.from(event.originalEvent.dataTransfer.files);
             let selectedTarget = ATTACHMENT_SOURCE.GLOBAL;
@@ -1001,9 +1001,9 @@ async function openAttachmentManager() {
     }
 
     function removeDragAndDrop() {
-        $(document.body).off('dragover', '.shadow_popup');
-        $(document.body).off('dragleave', '.shadow_popup');
-        $(document.body).off('drop', '.shadow_popup');
+        $(document.body).off('dragover', '.popup');
+        $(document.body).off('dragleave', '.popup');
+        $(document.body).off('drop', '.popup');
     }
 
     let sortField = localStorage.getItem('DataBank_sortField') || 'created';
diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index dda003ea7..021fac40d 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/public/scripts/extensions/quick-reply/style.css
@@ -220,68 +220,68 @@
   align-items: baseline;
 }
 @media screen and (max-width: 750px) {
-  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
+  body .popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor {
     flex-direction: column;
     overflow: auto;
   }
-  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main {
+  body .popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main {
     flex: 0 0 auto;
   }
-  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels {
+  body .popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--labels {
     flex-direction: column;
   }
-  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
+  body .popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
     min-height: 50svh;
     height: 50svh;
   }
 }
-.dialogue_popup:has(#qr--modalEditor) {
+.popup:has(#qr--modalEditor) {
   aspect-ratio: unset;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text {
+.popup:has(#qr--modalEditor) .popup_text {
   display: flex;
   flex-direction: column;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor {
   flex: 1 1 auto;
   display: flex;
   flex-direction: row;
   gap: 1em;
   overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--labels {
   flex: 0 0 auto;
   display: flex;
   flex-direction: row;
   gap: 0.5em;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--labels > label {
   flex: 1 1 1px;
   display: flex;
   flex-direction: column;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelText {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelText {
   flex: 1 1 auto;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelHint {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelHint {
   flex: 1 1 auto;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > input {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > input {
   flex: 0 0 auto;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings {
   display: flex;
   flex-direction: row;
   gap: 1em;
@@ -289,19 +289,19 @@
   font-size: smaller;
   align-items: baseline;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label {
   white-space: nowrap;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input {
   font-size: inherit;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
   flex: 1 1 auto;
   display: grid;
   text-align: left;
   overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax {
   grid-column: 1;
   grid-row: 1;
   padding: 0;
@@ -311,22 +311,22 @@
   min-width: 100%;
   width: 0;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax > #qr--modal-messageSyntaxInner {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax > #qr--modal-messageSyntaxInner {
   height: 100%;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {
   grid-column: 1;
   grid-row: 1;
   caret-color: white;
   mix-blend-mode: difference;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar,
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar-thumb {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar,
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar-thumb {
   visibility: hidden;
   cursor: default;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-message,
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-messageSyntaxInner {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-message,
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-messageSyntaxInner {
   padding: 0.75em;
   margin: 0;
   border: none;
@@ -335,11 +335,11 @@
   border: 1px solid var(--SmartThemeBorderColor);
   border-radius: 5px;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons {
   display: flex;
   gap: 1em;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton {
   border-width: 2px;
   border-style: solid;
   display: flex;
@@ -347,42 +347,42 @@
   gap: 0.5em;
   padding: 0.5em 0.75em;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton .qr--modal-executeComboIcon {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton .qr--modal-executeComboIcon {
   display: flex;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
   transition: 200ms;
   filter: grayscale(0);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
   cursor: wait;
   opacity: 0.5;
   filter: grayscale(1);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
   border-color: #51a351;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause,
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause,
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
   cursor: default;
   opacity: 0.5;
   filter: grayscale(1);
   pointer-events: none;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-pause,
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-stop {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-pause,
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-stop {
   cursor: pointer;
   opacity: 1;
   filter: grayscale(0);
   pointer-events: all;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause {
   border-color: #92befc;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
   border-color: #d78872;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeProgress {
   --prog: 0;
   --progColor: #92befc;
   --progFlashColor: #d78872;
@@ -393,7 +393,7 @@
   background-color: var(--black50a);
   position: relative;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress:after {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeProgress:after {
   content: '';
   background-color: var(--progColor);
   position: absolute;
@@ -401,23 +401,23 @@
   right: calc(100% - var(--prog) * 1%);
   transition: 200ms;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
   animation-name: qr--progressPulse;
   animation-duration: 1500ms;
   animation-timing-function: ease-in-out;
   animation-delay: 0s;
   animation-iteration-count: infinite;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--aborted:after {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--aborted:after {
   background-color: var(--progAbortedColor);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--success:after {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--success:after {
   background-color: var(--progSuccessColor);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--error:after {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--error:after {
   background-color: var(--progErrorColor);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeErrors {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeErrors {
   display: none;
   text-align: left;
   font-size: smaller;
@@ -428,10 +428,10 @@
   min-width: 100%;
   width: 0;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeErrors.qr--hasErrors {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeErrors.qr--hasErrors {
   display: block;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeResult {
   display: none;
   text-align: left;
   font-size: smaller;
@@ -442,10 +442,10 @@
   min-width: 100%;
   width: 0;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult.qr--hasResult {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeResult.qr--hasResult {
   display: block;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult:before {
+.popup:has(#qr--modalEditor) .popup_text > #qr--modalEditor #qr--modal-executeResult:before {
   content: 'Result: ';
 }
 @keyframes qr--progressPulse {
@@ -457,6 +457,6 @@
     background-color: var(--progFlashColor);
   }
 }
-.shadow_popup.qr--hide {
+.popup.qr--hide {
   opacity: 0 !important;
 }
diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less
index 378c19a43..2c9fa358c 100644
--- a/public/scripts/extensions/quick-reply/style.less
+++ b/public/scripts/extensions/quick-reply/style.less
@@ -244,7 +244,7 @@
 
 
 @media screen and (max-width: 750px) {
-	body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
+	body .popup:has(#qr--modalEditor) .popup_text>#qr--modalEditor {
 		flex-direction: column;
 		overflow: auto;
 		> #qr--main {
@@ -259,10 +259,10 @@
 		}
 	}
 }
-.dialogue_popup:has(#qr--modalEditor) {
+.popup:has(#qr--modalEditor) {
 	aspect-ratio: unset;
 
-	.dialogue_popup_text {
+	.popup_text {
 		display: flex;
 		flex-direction: column;
 
@@ -481,6 +481,6 @@
     }
 }
 
-.shadow_popup.qr--hide {
+.popup.qr--hide {
 	opacity: 0 !important;
 }
diff --git a/public/scripts/popup.js b/public/scripts/popup.js
index fdb5dc383..bfa4a8591 100644
--- a/public/scripts/popup.js
+++ b/public/scripts/popup.js
@@ -82,15 +82,15 @@ export class Popup {
         this.type = type;
 
         /**@type {HTMLTemplateElement}*/
-        const template = document.querySelector('#shadow_popup_template');
+        const template = document.querySelector('#popup_template');
         // @ts-ignore
-        this.dlg = template.content.cloneNode(true).querySelector('.dialogue_popup');
+        this.dlg = template.content.cloneNode(true).querySelector('.popup');
         this.content = this.dlg.querySelector('.popup_content');
-        this.text = this.dlg.querySelector('.dialogue_popup_text');
-        this.input = this.dlg.querySelector('.dialogue_popup_input');
-        this.controls = this.dlg.querySelector('.dialogue_popup_controls');
-        this.ok = this.dlg.querySelector('.dialogue_popup_ok');
-        this.cancel = this.dlg.querySelector('.dialogue_popup_cancel');
+        this.text = this.dlg.querySelector('.popup_text');
+        this.input = this.dlg.querySelector('.popup_input');
+        this.controls = this.dlg.querySelector('.popup_controls');
+        this.ok = this.dlg.querySelector('.popup_ok');
+        this.cancel = this.dlg.querySelector('.popup_cancel');
 
         this.dlg.setAttribute('data-id', this.id);
         if (wide) this.dlg.classList.add('wide_dialogue_popup');
@@ -179,7 +179,7 @@ export class Popup {
             switch (evt.key) {
                 case 'Escape': {
                     // Check if we are the currently active popup
-                    if (this.dlg != document.activeElement?.closest('.dialogue_popup'))
+                    if (this.dlg != document.activeElement?.closest('.popup'))
                         return;
 
                     this.complete(POPUP_RESULT.CANCELLED);
@@ -194,7 +194,7 @@ export class Popup {
                         return;
 
                     // Check if we are the currently active popup
-                    if (this.dlg != document.activeElement?.closest('.dialogue_popup'))
+                    if (this.dlg != document.activeElement?.closest('.popup'))
                         return;
 
                     // Check if the current focus is a result control. Only should we apply the compelete action
@@ -317,7 +317,7 @@ export class Popup {
 
             // If there is any popup below this one, see if we can set the focus
             if (popups.length > 0) {
-                const activeDialog = document.activeElement?.closest('.dialogue_popup');
+                const activeDialog = document.activeElement?.closest('.popup');
                 const id = activeDialog?.getAttribute('data-id');
                 const popup = popups.find(x => x.id == id);
                 if (popup) {
diff --git a/public/style.css b/public/style.css
index b4b6882a6..b16ef36dd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -776,7 +776,7 @@ body .panelControlBar {
 
 #options,
 #extensionsMenu,
-.shadow_popup .popper-modal {
+.popup .popper-modal {
     display: flex;
     z-index: 29999;
     background-color: var(--SmartThemeBlurTintColor);
@@ -3156,12 +3156,6 @@ grammarly-extension {
     background-color: var(--white30a);
 }
 
-dialog.dialogue_popup .menu_button:focus,
-dialog input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button_panel_pin):not(#WI_panel_pin):focus {
-    /** For dialogs, mimic the outline of keyboard navigation for all button focus */
-    outline: 1px solid white;
-}
-
 #dialogue_del_mes .menu_button {
     margin-left: 25px;
     margin-right: 25px;