Differential D16896 Diff 40684 webroot/rsrc/css/phui/phui-lightbox.css

Changeset View

Standalone View

webroot/rsrc/css/phui/phui-lightbox.css

This file was moved from webroot/rsrc/css/aphront/lightbox-attachment.css.

/**		/**
* @provides lightbox-attachment-css		* @provides phui-lightbox-css
*/		*/


.lightbox-attached {		.lightbox-attached {
overflow: hidden;		overflow: hidden;
}		}

.lightbox-attachment {		.lightbox-attachment {
position: fixed;		position: fixed;
top: 0;		top: 0;
left: 0;		left: 0;
bottom: 0;		bottom: 0;
right: 0;		right: 0;
overflow-y: auto;		overflow-y: auto;
}		}

.lightbox-attachment img {		.lightbox-attachment .lightbox-image-frame {
max-width: calc(100% - 44px);
max-height: calc(100% - 44px);
position: absolute;		position: absolute;
top: 44px;		top: 44px;
right: 0;		right: 0;
bottom: 0;		bottom: 0;
left: 0;		left: 0;
margin: auto;
}		}

.jx-mask + .lightbox-attachment {		.lightbox-attachment.comment-panel-open .lightbox-image-frame {
background: {$lightgreybackground};		right: 320px;
		}

		.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-attachment .loading {		.lightbox-comment-frame {
position: absolute;		position: absolute;
top: -9999px;		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: 320px;
		overflow-y: auto;
		background: #fff;
		opacity: 1;
		}

		.jx-mask + .lightbox-attachment {
		background: {$lightgreybackground};
}		}

.lightbox-attachment .attachment-name {		.lightbox-attachment .attachment-name {
width: 100%;		width: 100%;
line-height: 30px;		line-height: 30px;
text-align: center;		text-align: center;
}		}

.lightbox-attachment .lightbox-status {		.lightbox-attachment .lightbox-status {
background: #fff;		background: #fff;
position: fixed;		position: fixed;
top: 0;		top: 0;
left: 0;		left: 0;
right: 0;		right: 0;
height: 44px;		height: 44px;
padding: 0 20px;		padding: 0 20px;
line-height: 44px;		line-height: 44px;
border-bottom: 1px solid {$thinblueborder};		border-bottom: 1px solid {$thinblueborder};
		color: {$greytext};
}		}

.lightbox-attachment .lightbox-status .lightbox-download {		.lightbox-attachment .lightbox-status .lightbox-download {
float: right;		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-attachment .lightbox-status .lightbox-download
.lightbox-download-form {		.lightbox-download-form {
display: inline;		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 {		.lightbox-attachment .lightbox-close {
float: right;		float: right;
margin: 9px 0 0px 8px;		margin: 9px 0 0 8px;
}		}

.lightbox-attachment .lightbox-left {		.lightbox-attachment .lightbox-left {
top: 46%;		top: 46%;
left: 12px;		left: 12px;
position: fixed;		position: fixed;
display: block;		display: block;
height: 40px;		height: 40px;
Show All 12 Lines	.lightbox-attachment .lightbox-right .phui-icon-view {
top: 46%;		top: 46%;
right: 12px;		right: 12px;
position: fixed;		position: fixed;
display: block;		display: block;
height: 38px;		height: 38px;
width: 21px;		width: 21px;
}		}

		.lightbox-attachment.comment-panel-open .lightbox-right .phui-icon-view {
		right: 322px;
		}

.lightbox-attachment .lightbox-right .phui-icon-view {		.lightbox-attachment .lightbox-right .phui-icon-view {
font-size: 40px;		font-size: 40px;
}		}

.lightbox-attachment .lightbox-right:hover .phui-icon-view {		.lightbox-attachment .lightbox-right:hover .phui-icon-view {
color: {$sky};		color: {$sky};
}		}