Make dialog css edits dependant on polyfil

bd48c2445a70e5321fbcaf4fb5923efb1aef4b98

QuantumEntangledAndy <sheepchaan@gmail.com>

Signed
Parents: 3e465d155cb544d5d1d246a032bc0eafd84a9b0e
3 files changed, +10 -7Ignore whitespace
public/lib/dialog-polyfill.css+5 -5
@@ -1,4 +1,4 @@
1dialog {1.poly_dialog {
2 position: absolute;2 position: absolute;
3 left: 0; right: 0;3 left: 0; right: 0;
4 width: -moz-fit-content;4 width: -moz-fit-content;
@@ -15,22 +15,22 @@ dialog {
15 display: block;15 display: block;
16}16}
1717
18dialog:not([open]) {18.poly_dialog:not([open]) {
19 display: none;19 display: none;
20}20}
2121
22dialog + .backdrop {22.poly_dialog + .backdrop {
23 position: fixed;23 position: fixed;
24 top: 0; right: 0; bottom: 0; left: 0;24 top: 0; right: 0; bottom: 0; left: 0;
25 background: rgba(0,0,0,0.1);25 background: rgba(0,0,0,0.1);
26}26}
2727
28._dialog_overlay {28._poly_dialog_overlay {
29 position: fixed;29 position: fixed;
30 top: 0; right: 0; bottom: 0; left: 0;30 top: 0; right: 0; bottom: 0; left: 0;
31}31}
3232
33dialog.fixed {33.poly_dialog.fixed {
34 position: fixed;34 position: fixed;
35 top: 50%;35 top: 50%;
36 transform: translate(0, -50%);36 transform: translate(0, -50%);
public/lib/dialog-polyfill.esm.js+1 -1
@@ -562,7 +562,7 @@ dialogPolyfill.DialogManager = function() {
562 // actual implementation, the modal dialog stacking is controlled by the562 // actual implementation, the modal dialog stacking is controlled by the
563 // top layer, where z-index has no effect.563 // top layer, where z-index has no effect.
564 this.overlay = document.createElement('div');564 this.overlay = document.createElement('div');
565 this.overlay.className = '_dialog_overlay';565 this.overlay.className = '_poly_dialog_overlay';
566 this.overlay.addEventListener('click', function(e) {566 this.overlay.addEventListener('click', function(e) {
567 this.forwardTab_ = undefined;567 this.forwardTab_ = undefined;
568 e.stopPropagation();568 e.stopPropagation();
public/scripts/popup.js+4 -1
@@ -179,7 +179,10 @@ export class Popup {
179 const template = document.querySelector('#popup_template');179 const template = document.querySelector('#popup_template');
180 // @ts-ignore180 // @ts-ignore
181 this.dlg = template.content.cloneNode(true).querySelector('.popup');181 this.dlg = template.content.cloneNode(true).querySelector('.popup');
182 dialogPolyfill.registerDialog(this.dlg);182 if (!this.dlg.showModal) {
183 this.dlg.classList.add("poly_dialog");
184 dialogPolyfill.registerDialog(this.dlg);
185 }
183 this.body = this.dlg.querySelector('.popup-body');186 this.body = this.dlg.querySelector('.popup-body');
184 this.content = this.dlg.querySelector('.popup-content');187 this.content = this.dlg.querySelector('.popup-content');
185 this.mainInput = this.dlg.querySelector('.popup-input');188 this.mainInput = this.dlg.querySelector('.popup-input');