ImageGrid/Viewer/css/widget/overlay.css
Alex A. Naanou f65eb0c3c3 fixed overlay background blur...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2023-08-18 19:34:15 +03:00

72 lines
1.1 KiB
CSS
Executable File

.overlay-widget {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow: hidden;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px) saturate(0.3);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
/* XXX try to avoid this... */
z-index: 5000;
}
.overlay-widget~.overlay-widget {
background: rgba(0, 0, 0, 0.3);
}
.overlay-widget .content {
position: relative;
display: inline-block;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 200px;
max-width: 80vw;
max-height: 90vh;
/*overflow: hidden;*/
transform: translateY(-50%) translateX(-50%);
box-shadow: rgba(0, 0, 0, 0.1) 0.3em 0.3em 5em;
}
.overlay-widget~.overlay-widget .content {
box-shadow: rgba(0, 0, 0, 0.05) 0.1em 0.1em 3em;
}
/* title */
.content>*:before {
position: absolute;
content: attr(dialog-title);
bottom: 100%;
color: silver;
font-weight: 900;
font-style: italic;
font-size: x-large;
line-height: 85%;
opacity: 0.6;
}