/** * @provides phui-lightbox-css */ .lightbox-attached { overflow: hidden; } .lightbox-attachment { position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow-y: auto; } .lightbox-attachment .lightbox-image-frame { position: absolute; top: 44px; right: 0; bottom: 0; left: 0; } .lightbox-attachment.comment-panel-open .lightbox-image-frame { right: 360px; } .lightbox-attachment .lightbox-image-frame img { max-width: calc(100% - 40px); max-height: calc(100% - 24px); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .lightbox-comment-frame { position: absolute; top: -19999px; bottom: -19999px; opacity: 0; transition: all 0.2s; } .comment-panel-open .lightbox-comment-frame { position: fixed; top: 44px; bottom: 0; right: 0; width: 360px; overflow-y: auto; background: #fff; opacity: 1; } .jx-mask + .lightbox-attachment { background: {$lightgreybackground}; } .lightbox-attachment .attachment-name { width: 100%; line-height: 30px; text-align: center; } .lightbox-attachment .lightbox-status { background: #fff; position: fixed; top: 0; left: 0; right: 0; height: 44px; padding: 0 20px; line-height: 44px; border-bottom: 1px solid {$thinblueborder}; color: {$greytext}; } .lightbox-attachment .lightbox-status .lightbox-download { float: right; } .lightbox-attachment .lightbox-status a { color: #000; margin-right: 4px; font-size: {$biggerfontsize}; } .lightbox-download button.has-icon { padding-left: 28px; } .lightbox-attachment .lightbox-status .lightbox-download .lightbox-download-form { display: inline; } .lightbox-attachment .lightbox-comment { float: right; margin: 9px 0 0 8px; padding-left: 28px; } .lightbox-attachment.comment-panel-open .lightbox-comment, .lightbox-attachment.comment-panel-open .lightbox-comment .phui-icon-view { color: {$sky}; } .lightbox-attachment .lightbox-close { float: right; margin: 9px 0 0 8px; } .lightbox-attachment .lightbox-left { top: 46%; left: 12px; position: fixed; display: block; height: 40px; width: 40px; } .lightbox-attachment .lightbox-left .phui-icon-view { font-size: 40px; } .lightbox-attachment .lightbox-left:hover .phui-icon-view { color: {$sky}; } .lightbox-attachment .lightbox-right .phui-icon-view { top: 46%; right: 12px; position: fixed; display: block; height: 38px; width: 21px; } .lightbox-attachment.comment-panel-open .lightbox-right .phui-icon-view { right: 362px; } .lightbox-attachment .lightbox-right .phui-icon-view { font-size: 40px; } .lightbox-attachment .lightbox-right:hover .phui-icon-view { color: {$sky}; }