rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make dialog css edits dependant on polyfil

This commit is contained in:
QuantumEntangledAndy 2024-10-04 16:57:59 +07:00
parent 3e465d155c
commit bd48c2445a
No known key found for this signature in database
GPG Key ID: 3EB4B66F30C609B6
3 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/lib/dialog-polyfill.css
View File

@ -1,4 +1,4 @@
dialog { .poly_dialog {
position: absolute; position: absolute;
left: 0; right: 0; left: 0; right: 0;
width: -moz-fit-content; width: -moz-fit-content;
@ -15,22 +15,22 @@ dialog {
display: block; display: block;
} }
dialog:not([open]) { .poly_dialog:not([open]) {
display: none; display: none;
} }
dialog + .backdrop { .poly_dialog + .backdrop {
position: fixed; position: fixed;
top: 0; right: 0; bottom: 0; left: 0; top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
} }
._dialog_overlay { ._poly_dialog_overlay {
position: fixed; position: fixed;
top: 0; right: 0; bottom: 0; left: 0; top: 0; right: 0; bottom: 0; left: 0;
} }
dialog.fixed { .poly_dialog.fixed {
position: fixed; position: fixed;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);

2
public/lib/dialog-polyfill.esm.js
View File

@ -562,7 +562,7 @@ dialogPolyfill.DialogManager = function() {
// actual implementation, the modal dialog stacking is controlled by the // actual implementation, the modal dialog stacking is controlled by the
// top layer, where z-index has no effect. // top layer, where z-index has no effect.
this.overlay = document.createElement('div'); this.overlay = document.createElement('div');
this.overlay.className = '_dialog_overlay'; this.overlay.className = '_poly_dialog_overlay';
this.overlay.addEventListener('click', function(e) { this.overlay.addEventListener('click', function(e) {
this.forwardTab_ = undefined; this.forwardTab_ = undefined;
e.stopPropagation(); e.stopPropagation();

5
public/scripts/popup.js
View File

@ -179,7 +179,10 @@ export class Popup {
const template = document.querySelector('#popup_template'); const template = document.querySelector('#popup_template');
// @ts-ignore // @ts-ignore
this.dlg = template.content.cloneNode(true).querySelector('.popup'); this.dlg = template.content.cloneNode(true).querySelector('.popup');
dialogPolyfill.registerDialog(this.dlg); if (!this.dlg.showModal) {
this.dlg.classList.add("poly_dialog");
dialogPolyfill.registerDialog(this.dlg);
}
this.body = this.dlg.querySelector('.popup-body'); this.body = this.dlg.querySelector('.popup-body');
this.content = this.dlg.querySelector('.popup-content'); this.content = this.dlg.querySelector('.popup-content');
this.mainInput = this.dlg.querySelector('.popup-input'); this.mainInput = this.dlg.querySelector('.popup-input');