mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-03 21:00:14 +00:00
102 lines
1.9 KiB
CSS
Executable File
102 lines
1.9 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);
|
|
|
|
-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.4;
|
|
}
|
|
.content>*:focus:before {
|
|
opacity: 0.6
|
|
}
|
|
|
|
|
|
/* NOTE: this does not include text...
|
|
...need a way to go around this...
|
|
|
|
*/
|
|
.blur>* {
|
|
/*-webkit-filter: blur(2px) saturate(0.3);
|
|
filter: blur(2px) saturate(0.3);*/
|
|
-webkit-filter: saturate(0.5) brightness(0.8);
|
|
filter: saturate(0.5) brightness(0.8);
|
|
}
|
|
.blur>.overlay-widget {
|
|
/*-webkit-filter: blur(0.8px) saturate(0.3);
|
|
filter: blur(0.8px) saturate(0.3);*/
|
|
-webkit-filter: saturate(0.5) brightness(0.8);
|
|
filter: saturate(0.5) brightness(0.8);
|
|
}
|
|
.overlay-blur-enabled.blur>* {
|
|
-webkit-filter: blur(2px) saturate(0.5) brightness(0.8);
|
|
filter: blur(2px) saturate(0.5) brightness(0.8);
|
|
}
|
|
.overlay-blur-enabled.blur>.overlay-widget {
|
|
-webkit-filter: blur(0.8px) saturate(0.5) brightness(0.8);
|
|
filter: blur(0.8px) saturate(0.5) brightness(0.8);
|
|
}
|
|
|
|
.blur>.overlay-widget:last-child {
|
|
-webkit-filter: none;
|
|
filter: none;
|
|
}
|
|
|
|
|