Make dialog css edits dependant on polyfil

bd48c2445a70e5321fbcaf4fb5923efb1aef4b98

QuantumEntangledAndy <sheepchaan@gmail.com>

Signed

public/lib/dialog-polyfill.css+5 -5 Viewed

 dialog.poly_dialog {
   position: absolute;
   left: 0; right: 0;
   width: -moz-fit-content;

@@ -15,22 +15,22 @@ dialog {
15	15	display: block;
16	16	}
17	17
18	18	dialog.poly_dialog:not([open]) {
19	19	display: none;
20	20	}
21	21
22	22	dialog.poly_dialog + .backdrop {
23	23	position: fixed;
24	24	top: 0; right: 0; bottom: 0; left: 0;
25	25	background: rgba(0,0,0,0.1);
26	26	}
27	27
28	28	._dialog_overlay_poly_dialog_overlay {
29	29	position: fixed;
30	30	top: 0; right: 0; bottom: 0; left: 0;
31	31	}
32	32
33	33	dialog.poly_dialog.fixed {
34	34	position: fixed;
35	35	top: 50%;
36	36	transform: translate(0, -50%);

public/lib/dialog-polyfill.esm.js+1 -1 Viewed

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

public/scripts/popup.js+3 -0 Viewed

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