Homec4science
Diffusion Phabricator (feature/testing) Browse

phab/webroot/rsrc/css/phui/phui-lightbox.css
88a966993be1feature/testing

Last Change
Raw File

phui-lightbox.css
View Options

/**
* @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};
}
c4science · Help