After working on the following code snippet, I've managed to keep the spotlight centered horizontally, except when the zoom factor is too high. This means that when I zoom in, the spot light no longer remains centered in the horizontal view port.
It's important to note the use of .spotlight-2:before to fill the left portion of the shadow on the viewport. This was necessary to avoid any non-shaded regions from appearing.
Any suggestions on how I can ensure the spotlight stays centered horizontally and doesn't shift to the right when zooming in closely on the browser?
Fiddle:
https://jsfiddle.net/u0onf23y/
Resulting Output:
https://jsfiddle.net/u0onf23y/embedded/result/
CSS:
td .div{
height: 400px;
}
.extend-full {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px; }
.spotlight-2{
top: 0px;
margin-left:-80px;
float: left;
display: block;
background: radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
background: -moz-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
background: -webkit-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
background: -o-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
margin-left: 0px;
height: 100%;
position: fixed;
width: 100%;
min-width: 100vw;
min-height: 100vh;
z-index: 10;
};
position: absolute;
width: 100%;
z-index: 10; }
.account-settings-confirm-container-overlay {
z-index: 10;
background-color: white !important;
height: 99px;
position: absolute;
margin-top: 10px;
width: 250px;
font-size: 12px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); }
.spotlight-2:before {
content: "";
position: absolute;
display: block;
left: -100%;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.5);
}