Overhauled attachments and image editing

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / attachment.less

/* attachment thumbnail list */
.attachmentThumbnailList, .attachmentFileList {
	padding-top: @wcfGapSmall !important;
	
	> fieldset {
		padding: 0;
		
		> legend {
			border-bottom: 0;
			font-size: @wcfTitleFontSize;
			padding-bottom: @wcfGapSmall;
		}
	}
}

.attachmentThumbnailList {
	padding-bottom: @wcfGapSmall !important;
	
	> fieldset {
		> ul {
			padding: 0 @wcfGapSmall+@wcfGapTiny 0 @wcfGapTiny;
			
			> li {
				margin: 0 0 @wcfGapMedium @wcfGapSmall;
				vertical-align: top;
			}
		}
	}
}

.attachmentFileList {
	> fieldset > ul > li {
		&:not(:first-child) {
			margin-top: @wcfGapTiny;
		}
	}
}

.attachmentThumbnail {
	background-color: white;
	display: inline-block;
	min-height: ~"@{wcf_option_attachment_thumbnail_height}px";
	min-width: ~"@{wcf_option_attachment_thumbnail_width}px";
	position: relative;
	
	> a {
		display: inline-block;
		min-height: ~"@{wcf_option_attachment_thumbnail_height}px";
		min-width: ~"@{wcf_option_attachment_thumbnail_width}px";
	}
	
	> div {
		background-color: rgba(0, 0, 0, 0.6);
		bottom: 0;
		color: #fff;
		position: absolute;
		width: 100%;
		padding: @wcfGapSmall 0;
		
		> p,
		> small {
			margin: 0 @wcfGapSmall;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
		}
		
		> small {
			display: block;
			height: 0;
			
			.transition(height, .25s, ease-out);
		}
	}
	
	&:hover {
		> div > small {
			height: 1.27em;
		}
	}
}

/* attachment form */
.formAttachmentList {
	border-bottom: 1px solid @wcfContainerBorderColor;
	margin-bottom: @wcfGapSmall;
	padding-bottom: @wcfGapMedium;
	
	> li {
		min-height: 64px;
		
		> div {
			> div {
				margin-right: @wcfGapSmall;
				
				> p {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					
					> a {
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
			
			> ul {
				margin-top: @wcfGapSmall;
				
				> li {
					display: inline-block;
					
					> span.jsDeleteButton {
						margin-right: @wcfGapMedium;
					}
				}
			}
		}
	}
	
	&.sortableList {
		list-style-type: none;
		margin-left: 0;
	}
}

.formAttachmentContent {
	.jsButtonAttachmentInsertAll {
		vertical-align: baseline;
	}
	
	.uploadButton {
		vertical-align: bottom;
	}
	
	> dl {
		div + small {
			margin-top: @wcfGapSmall !important;
		}
	}
}

@media only screen and (min-width: 801px) {
	.formAttachmentList {
		> li {
			float: left;
			width: 50%;
		}
	}
}

.box64 .attachmentTinyThumbnail {
	max-height: 64px;
	max-width: 64px;
}