.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: 9999; } .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; } /* 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); } .blur>.overlay-widget { -webkit-filter: blur(0.8px) saturate(0.3); filter: blur(0.8px) saturate(0.3); } .blur>.overlay-widget:last-child { -webkit-filter: none; filter: none; }