.nextgen_pro_lightbox_open { overflow: hidden !important; -webkit-text-size-adjust: none; padding: 0 !important; margin: 0 !important; } #npl_overlay { display: none; position: fixed; top: -100px; left: -100px; right: -100px; bottom: -100px; z-index: 1000000; background: #000000; opacity: 0; } #npl_overlay.npl_ios_no_opacity { opacity: 1; } #npl_wrapper { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1000001; border: 0 none transparent; padding: 0; margin: 0; overflow: hidden; } /* Prevent iOS from highlighting everything touched */ body.nextgen_pro_lightbox_open { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; } body.nextgen_pro_lightbox_open #npl_wrapper { display: flex; } body.nextgen_pro_lightbox_open #npl_wrapper.npl_ie9_flex_hack { display: block; } /* Without this the main image will disappear when dismissing the iOS keyboard */ /* because galleria.js will read the entire height for some weird reason */ #npl_wrapper.npl_ios_hack { max-height: 100vh !important; max-width: 100vw !important; width: 100%; height: 100%; } #npl_wrapper.npl_open_with_padding { -webkit-box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.6); box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.6); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #npl_button_close { background: #fff; border-radius: 50%; color: #555; font-size: 22px; line-height: 1; opacity: .5; padding: 4px 6px 4px 7px!important; position: absolute; right: 8px; top: 11px; z-index: 1000100; } #npl_wrapper.npl-sidebar-open #npl_button_close { right: 514px; } #npl_button_close.hidden { display: none; } #npl_button_close:hover { cursor: pointer; } #npl_wrapper.npl_mobile #npl_button_close { font-size: 28px; top: 15px; right: 25px; } #npl_wrapper #npl_button_close.npl-sidebar-open { right: 500px; margin-right: 15px; } #npl_spinner_container { color: white; font-size: 86px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; z-index: 1000003; } #npl_wrapper.npl-sidebar-open #npl_spinner_container { right: 500px; } #npl_wrapper.npl_ie9_flex_hack #npl_spinner_container { display: block !important; } #npl_wrapper.npl_ie9_flex_hack #npl_spinner_container svg, #npl_wrapper.npl_ie9_flex_hack #npl_spinner_container i { position: relative; top: calc(50% - 43px); left: calc(50% - 43px); } #npl_spinner { margin: 0 auto; } #npl_wrapper.npl_ie9_flex_hack #npl_spinner_container.hidden { display: none !important; } #npl_spinner_container.hidden { display: none !important; } #npl_content { z-index: 1000002; width: 100%; height: 100%; padding: 0; margin: 0; transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: content-box; } body.nextgen_pro_lightbox_open #npl_wrapper.npl_ie9_flex_hack.npl-sidebar-open #npl_content { position: absolute; top: 0; right: 500px; left: 0; bottom: 0; } #npl_sidebar { z-index: 1000002; width: 0; height: 100%; min-height: 100%; max-height: 100%; color: white; overflow-y: auto; overflow-x: hidden; background: #252728 url('theme/container_bg.png'); box-sizing: border-box; -moz-box-sizing: border-box; font-family: 'Lato', sans-serif; } #npl_sidebar_overlay { width: 500px; height: 100%; min-height: 100%; max-height: 100%; overflow: hidden; background: black; position: absolute; right: 0; top: 0; align-items: center; opacity: 0; transition: opacity 0.75s; display: none; color: white; } body.nextgen_pro_lightbox_open #npl_wrapper.npl_ie9_flex_hack { display: block; } #npl_sidebar_overlay svg, #npl_sidebar_overlay i { margin: 0 auto; font-size: 86px; } #npl_wrapper.npl_ie9_flex_hack #npl_sidebar_overlay svg, #npl_wrapper.npl_ie9_flex_hack #npl_sidebar_overlay i { position: absolute; top: calc(50% - 43px); left: calc(50% - 43px); } #npl_wrapper.npl-sidebar-overlay-open #npl_sidebar_overlay { display: flex; z-index: 1000002; opacity: 1; } #npl_wrapper.npl-sidebar-open #npl_sidebar { width: 500px; min-width: 350px; border-left: 1px solid rgba(255, 255, 255, 0.2); } body.nextgen_pro_lightbox_open #npl_wrapper.npl_ie9_flex_hack.npl-sidebar-open #npl_sidebar { position: absolute; top: 0; right: 0; } #npl_wrapper.npl-sidebar-open #npl_content { width: calc(100% - 500px); /*border-right: 20px solid #fff; border-left: 20px solid #fff;*/ box-sizing: border-box; } #npl_content * { box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; } body.nextgen_pro_lightbox_open #npl_overlay { display: block; opacity: 0.8; } body.nextgen_pro_lightbox_open #npl_overlay.npl_ios_no_opacity { opacity: 1; } #npl_sidebar_toggle { position: absolute; top: 11px; right: 10px; font-size: 17px; text-decoration: none; display: none; opacity: .5; cursor: pointer; z-index: 1000100; line-height: 1; background: #fff; color: #555; border-radius: 50%; padding: 6px 6px 6px 7px; } #npl_wrapper.npl-sidebar-open #npl_sidebar_toggle { display: block; } @media only screen and (max-width: 760px) { /* Hide the close-modal button when only the sidebar is displayed */ #npl_wrapper.npl-sidebar-open #npl_button_close { display: none; } #npl_wrapper.npl-sidebar-open #npl_sidebar_toggle { right: 25px; } /* Remove padding at low resolutions */ body #npl_wrapper.npl_open_with_padding { border-radius: 0; box-shadow: none; top: 0; bottom: 0; right: 0; left: 0; } /* Hide the content area entirely and display only the sidebar */ #npl_wrapper.npl-sidebar-open #npl_content { width: 50vw; position: absolute; left: -100vw; } #npl_wrapper.npl-sidebar-open #npl_sidebar, #npl_wrapper.npl-sidebar-open #npl_sidebar_overlay { width: 100%; border-left: none; } #npl_wrapper.npl-sidebar-open #npl_spinner_container { display: none; } /* Display the sidebar thumbnail now that the main content is hidden */ #npl_sidebar .nggpl-sidebar-thumbnail { display: block !important; } }