html.dialog body {
background: transparent;
overflow: auto;
}
html.dialog {
height: auto;
background: rgb(var(--gBgColor));
}
html.dialog main {
background: rgb(var(--gBgColor));
padding: .5em;
margin: 0;
}
/** Dialogs pop-ins */
#dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent url("data:image/svg+xml;base64,PCEtLSBCeSBTYW0gSGVyYmVydCAoQHNoZXJiKSwgZm9yIGV2ZXJ5b25lLiBNb3JlIEAgaHR0cDovL2dvby5nbC83QUp6YkwgLS0+Cjxzdmcgd2lkdGg9IjM4IiBoZWlnaHQ9IjM4IiB2aWV3Qm94PSIwIDAgMzggMzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPGNpcmNsZSBzdHJva2Utb3BhY2l0eT0iLjUiIGN4PSIxOCIgY3k9IjE4IiByPSIxOCIvPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYgMThjMC05Ljk0LTguMDYtMTgtMTgtMTgiPgogICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMTggMTgiIHRvPSIzNjAgMTggMTgiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgICAgICAgICAgIDwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
opacity: 1;
transition: opacity .5s;
z-index: 100000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: none;
}
#dialog.loaded {
background-image: none;
}
#dialog > iframe, #dialog > img, #dialog > audio, #dialog > video {
max-width: 90%;
max-height: 90%;
min-height: 3em;
height: 90%;
transition: opacity .2s, height .2s;
border: none;
opacity: 0;
}
#dialog.loaded > img, #dialog.loaded > audio, #dialog.loaded > video {
opacity: 1;
height: initial;
}
#dialog > iframe, #dialog > div {
border-radius: .5em;
box-shadow: 0px 0px 5px #000;
background: #fff;
}
#dialog > div {
padding: 1em;
}
#dialog.loaded > iframe {
width: 90%;
opacity: 1;
}
#dialog.fullscreen iframe {
width: 100%;
max-width: unset;
max-height: unset;
height: calc(100% - 2em);
border-radius: 0;
}
#dialog > button.closeBtn {
background: unset;
border: unset;
box-shadow: unset;
color: var(--gLightBorderColor);
font-size: 1.3em;
display: block;
width: 100%;
}
#dialog > button.closeBtn:hover {
color: var(--gLightBackgroundColor) !important;
}
.loader {
width: 100%;
min-height: 32px;
display: block;
position: relative;
}
.loader.install {
margin-top: -40px;
}
.loader b {
text-shadow: 2px 2px 5px #999;
background: rgba(255, 255, 255, 0.5);
border-radius: .5em;
font-size: 16px;
line-height: 16px;
height: 16px;
z-index: 9999;
position: absolute;
display: block;
left: 10px;
top: 10px;
padding: .2em;
}
.loader img {
position: absolute;
opacity: 0;
transition: all 0.5s ease;
z-index: 2;
}