rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Rename popup css classes

Browse Source
This commit is contained in:
Wolfsblvt
2024-05-31 21:59:26 +02:00
parent d3327f7829
commit c939c544e2
8 changed files with 101 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/css/popup.css
View File

@ -3,7 +3,7 @@ dialog {
} }
/* Closed state of the dialog */ /* Closed state of the dialog */
.dialogue_popup { .popup {
width: 500px; width: 500px;
text-align: center; text-align: center;
box-shadow: 0px 0px 14px var(--black70a); box-shadow: 0px 0px 14px var(--black70a);
@ -23,58 +23,58 @@ dialog {
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
} }
.dialogue_popup .popup_content { .popup .popup_content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
.dialogue_popup .dialogue_popup_text { .popup .popup_text {
padding: 0 8px; padding: 0 8px;
overflow: hidden; overflow: hidden;
} }
.dialogue_popup.vertical_scrolling_dialogue_popup .dialogue_popup_text { .popup.vertical_scrolling_dialogue_popup .popup_text {
overflow-y: auto; overflow-y: auto;
} }
.dialogue_popup.horizontal_scrolling_dialogue_popup .dialogue_popup_text { .popup.horizontal_scrolling_dialogue_popup .popup_text {
overflow-x: auto; overflow-x: auto;
} }
/* Open state of the dialog */ /* Open state of the dialog */
.dialogue_popup[open] { .popup[open] {
animation: pop-in var(--animation-duration-slow) ease-in-out; 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; 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; animation: fade-in var(--animation-duration-slow) ease-in-out;
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
-webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
background-color: var(--black30a); background-color: var(--black30a);
} }
.dialogue_popup[closing]::backdrop { .popup[closing]::backdrop {
animation: fade-out var(--animation-duration-slow) ease-in-out; 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 */ /* 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; height: 100svh;
top: calc(50% + var(--topBarBlockSize)); top: calc(50% + var(--topBarBlockSize));
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.dialogue_popup_input { .popup_input {
margin-top: 10px; margin-top: 10px;
} }
.dialogue_popup_controls { .popup_controls {
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
align-self: center; align-self: center;
@ -85,7 +85,7 @@ dialog {
box-shadow: 0 0 5px var(--white20a); box-shadow: 0 0 5px var(--white20a);
} }
.menu_button.dialogue_popup_ok { .menu_button.popup_ok {
background-color: var(--crimson70a); background-color: var(--crimson70a);
cursor: pointer; cursor: pointer;
} }
@ -94,3 +94,9 @@ dialog {
/** Custom buttons should not scale to smallest size, otherwise they will always break to multiline */ /** Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
width: unset; 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;
}

14
public/index.html
View File

@ -4849,16 +4849,16 @@
</div> </div>
</div> </div>
<!-- various fullscreen popups --> <!-- 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 --> <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="dialogue_popup shadow_popup"> <dialog class="popup">
<div class="popup_content"> <div class="popup_content">
<div class="dialogue_popup_text"> <div class="popup_text">
<h3 class="margin0">text</h3> <h3 class="margin0">text</h3>
</div> </div>
<textarea class="dialogue_popup_input text_pole result_control" rows="1" data-result="1"></textarea> <textarea class="popup_input text_pole result_control" rows="1" data-result="1"></textarea>
<div class="dialogue_popup_controls"> <div class="popup_controls">
<div class="dialogue_popup_ok menu_button result_control" data-i18n="Delete" data-result="1" tabindex="0">Delete</div> <div class="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> <div class="popup_cancel menu_button result_control" data-i18n="Cancel" data-result="0" tabindex="0">Cancel</div>
</div> </div>
</div> </div>
</dialog> </dialog>

4
public/script.js
View File

@ -10214,7 +10214,7 @@ jQuery(async function () {
'#character_cross', '#character_cross',
'#avatar-and-name-block', '#avatar-and-name-block',
'#shadow_popup', '#shadow_popup',
'.shadow_popup', '.popup',
'#world_popup', '#world_popup',
'.ui-widget', '.ui-widget',
'.text_pole', '.text_pole',
@ -10517,7 +10517,7 @@ jQuery(async function () {
$(document).on('click', '.external_import_button, #external_import_button', async () => { $(document).on('click', '.external_import_button, #external_import_button', async () => {
const html = await renderTemplateAsync('importCharacters'); 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) { if (!input) {
console.debug('Custom content import cancelled'); console.debug('Custom content import cancelled');

18
public/scripts/chats.js
View File

@ -963,22 +963,22 @@ async function openAttachmentManager() {
} }
function addDragAndDrop() { function addDragAndDrop() {
$(document.body).on('dragover', '.dialogue_popup', (event) => { $(document.body).on('dragover', '.popup', (event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); 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.preventDefault();
event.stopPropagation(); 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.preventDefault();
event.stopPropagation(); event.stopPropagation();
$(event.target).closest('.dialogue_popup').removeClass('dragover'); $(event.target).closest('.popup').removeClass('dragover');
const files = Array.from(event.originalEvent.dataTransfer.files); const files = Array.from(event.originalEvent.dataTransfer.files);
let selectedTarget = ATTACHMENT_SOURCE.GLOBAL; let selectedTarget = ATTACHMENT_SOURCE.GLOBAL;
@ -1001,9 +1001,9 @@ async function openAttachmentManager() {
} }
function removeDragAndDrop() { function removeDragAndDrop() {
$(document.body).off('dragover', '.shadow_popup'); $(document.body).off('dragover', '.popup');
$(document.body).off('dragleave', '.shadow_popup'); $(document.body).off('dragleave', '.popup');
$(document.body).off('drop', '.shadow_popup'); $(document.body).off('drop', '.popup');
} }
let sortField = localStorage.getItem('DataBank_sortField') || 'created'; let sortField = localStorage.getItem('DataBank_sortField') || 'created';

98
public/scripts/extensions/quick-reply/style.css
View File

@ -220,68 +220,68 @@
align-items: baseline; align-items: baseline;
} }
@media screen and (max-width: 750px) { @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; flex-direction: column;
overflow: auto; 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; 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; 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; min-height: 50svh;
height: 50svh; height: 50svh;
} }
} }
.dialogue_popup:has(#qr--modalEditor) { .popup:has(#qr--modalEditor) {
aspect-ratio: unset; aspect-ratio: unset;
} }
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text { .popup:has(#qr--modalEditor) .popup_text {
display: flex; display: flex;
flex-direction: column; 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; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1em; gap: 1em;
overflow: hidden; 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; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; 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; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 0.5em; 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; flex: 1 1 1px;
display: flex; display: flex;
flex-direction: column; 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; 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; 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; 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; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; 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; display: flex;
flex-direction: row; flex-direction: row;
gap: 1em; gap: 1em;
@ -289,19 +289,19 @@
font-size: smaller; font-size: smaller;
align-items: baseline; 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; 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; 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; flex: 1 1 auto;
display: grid; display: grid;
text-align: left; text-align: left;
overflow: hidden; 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-column: 1;
grid-row: 1; grid-row: 1;
padding: 0; padding: 0;
@ -311,22 +311,22 @@
min-width: 100%; min-width: 100%;
width: 0; 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%; 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-column: 1;
grid-row: 1; grid-row: 1;
caret-color: white; caret-color: white;
mix-blend-mode: difference; 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, .popup:has(#qr--modalEditor) .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-thumb {
visibility: hidden; visibility: hidden;
cursor: default; cursor: default;
} }
.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,
.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-messageSyntaxInner {
padding: 0.75em; padding: 0.75em;
margin: 0; margin: 0;
border: none; border: none;
@ -335,11 +335,11 @@
border: 1px solid var(--SmartThemeBorderColor); border: 1px solid var(--SmartThemeBorderColor);
border-radius: 5px; 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; display: flex;
gap: 1em; 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-width: 2px;
border-style: solid; border-style: solid;
display: flex; display: flex;
@ -347,42 +347,42 @@
gap: 0.5em; gap: 0.5em;
padding: 0.5em 0.75em; 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; 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; transition: 200ms;
filter: grayscale(0); 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; cursor: wait;
opacity: 0.5; opacity: 0.5;
filter: grayscale(1); 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; border-color: #51a351;
} }
.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,
.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 {
cursor: default; cursor: default;
opacity: 0.5; opacity: 0.5;
filter: grayscale(1); filter: grayscale(1);
pointer-events: none; pointer-events: none;
} }
.dialogue_popup:has(#qr--modalEditor) .dialogue_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-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-stop {
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
filter: grayscale(0); filter: grayscale(0);
pointer-events: all; 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; 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; 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; --prog: 0;
--progColor: #92befc; --progColor: #92befc;
--progFlashColor: #d78872; --progFlashColor: #d78872;
@ -393,7 +393,7 @@
background-color: var(--black50a); background-color: var(--black50a);
position: relative; 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: ''; content: '';
background-color: var(--progColor); background-color: var(--progColor);
position: absolute; position: absolute;
@ -401,23 +401,23 @@
right: calc(100% - var(--prog) * 1%); right: calc(100% - var(--prog) * 1%);
transition: 200ms; 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-name: qr--progressPulse;
animation-duration: 1500ms; animation-duration: 1500ms;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
animation-delay: 0s; animation-delay: 0s;
animation-iteration-count: infinite; 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); 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); 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); 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; display: none;
text-align: left; text-align: left;
font-size: smaller; font-size: smaller;
@ -428,10 +428,10 @@
min-width: 100%; min-width: 100%;
width: 0; 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; 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; display: none;
text-align: left; text-align: left;
font-size: smaller; font-size: smaller;
@ -442,10 +442,10 @@
min-width: 100%; min-width: 100%;
width: 0; 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; 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: '; content: 'Result: ';
} }
@keyframes qr--progressPulse { @keyframes qr--progressPulse {
@ -457,6 +457,6 @@
background-color: var(--progFlashColor); background-color: var(--progFlashColor);
} }
} }
.shadow_popup.qr--hide { .popup.qr--hide {
opacity: 0 !important; opacity: 0 !important;
} }

8
public/scripts/extensions/quick-reply/style.less
View File

@ -244,7 +244,7 @@
@media screen and (max-width: 750px) { @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; flex-direction: column;
overflow: auto; overflow: auto;
> #qr--main { > #qr--main {
@ -259,10 +259,10 @@
} }
} }
} }
.dialogue_popup:has(#qr--modalEditor) { .popup:has(#qr--modalEditor) {
aspect-ratio: unset; aspect-ratio: unset;
.dialogue_popup_text { .popup_text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -481,6 +481,6 @@
} }
} }
.shadow_popup.qr--hide { .popup.qr--hide {
opacity: 0 !important; opacity: 0 !important;
} }

20
public/scripts/popup.js
View File

@ -82,15 +82,15 @@ export class Popup {
this.type = type; this.type = type;
/**@type {HTMLTemplateElement}*/ /**@type {HTMLTemplateElement}*/
const template = document.querySelector('#shadow_popup_template'); const template = document.querySelector('#popup_template');
// @ts-ignore // @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.content = this.dlg.querySelector('.popup_content');
this.text = this.dlg.querySelector('.dialogue_popup_text'); this.text = this.dlg.querySelector('.popup_text');
this.input = this.dlg.querySelector('.dialogue_popup_input'); this.input = this.dlg.querySelector('.popup_input');
this.controls = this.dlg.querySelector('.dialogue_popup_controls'); this.controls = this.dlg.querySelector('.popup_controls');
this.ok = this.dlg.querySelector('.dialogue_popup_ok'); this.ok = this.dlg.querySelector('.popup_ok');
this.cancel = this.dlg.querySelector('.dialogue_popup_cancel'); this.cancel = this.dlg.querySelector('.popup_cancel');
this.dlg.setAttribute('data-id', this.id); this.dlg.setAttribute('data-id', this.id);
if (wide) this.dlg.classList.add('wide_dialogue_popup'); if (wide) this.dlg.classList.add('wide_dialogue_popup');
@ -179,7 +179,7 @@ export class Popup {
switch (evt.key) { switch (evt.key) {
case 'Escape': { case 'Escape': {
// Check if we are the currently active popup // Check if we are the currently active popup
if (this.dlg != document.activeElement?.closest('.dialogue_popup')) if (this.dlg != document.activeElement?.closest('.popup'))
return; return;
this.complete(POPUP_RESULT.CANCELLED); this.complete(POPUP_RESULT.CANCELLED);
@ -194,7 +194,7 @@ export class Popup {
return; return;
// Check if we are the currently active popup // Check if we are the currently active popup
if (this.dlg != document.activeElement?.closest('.dialogue_popup')) if (this.dlg != document.activeElement?.closest('.popup'))
return; return;
// Check if the current focus is a result control. Only should we apply the compelete action // 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 there is any popup below this one, see if we can set the focus
if (popups.length > 0) { if (popups.length > 0) {
const activeDialog = document.activeElement?.closest('.dialogue_popup'); const activeDialog = document.activeElement?.closest('.popup');
const id = activeDialog?.getAttribute('data-id'); const id = activeDialog?.getAttribute('data-id');
const popup = popups.find(x => x.id == id); const popup = popups.find(x => x.id == id);
if (popup) { if (popup) {

8
public/style.css
View File

@ -776,7 +776,7 @@ body .panelControlBar {
#options, #options,
#extensionsMenu, #extensionsMenu,
.shadow_popup .popper-modal { .popup .popper-modal {
display: flex; display: flex;
z-index: 29999; z-index: 29999;
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeBlurTintColor);
@ -3156,12 +3156,6 @@ grammarly-extension {
background-color: var(--white30a); 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 { #dialogue_del_mes .menu_button {
margin-left: 25px; margin-left: 25px;
margin-right: 25px; margin-right: 25px;