Fixed handling of placeholders

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / messageGroup.scss

.messageGroupList {
	.tabularList {
		.columnSubject {
			flex: 1 1 auto;
		}
		
		.columnStats {
			flex: 0 0 150px;
			text-align: center;
		}
		
		.columnLastPost {
			flex: 0 0 200px;
		}
		
		.tabularListRow:not(.tabularListRowHead) {
			.columnStats {
				position: relative;
				
				> dl {
					visibility: hidden;
				}
			}
			
			@include screen-lg {
				&:hover .columnStats {
					> dl {
						visibility: visible;
					}
					
					.messageGroupListStatsSimple {
						display: none;
					}
				}
			}
		}
	}
	
	.columnMark > label {
		cursor: pointer;
		display: block;
		height: 24px;
		width: 24px;
		
		@extend .messageCheckboxLabel;
		
		&::before {
			font-size: 24px;
			top: -6px;
		}
	}
	
	.jsMarked .columnMark > label::after {
		display: block;
		font-size: 13px;
		left: 3px;
		top: 1px;
	}
	
	.tabularListRowHead {
		.columnMark > label::before {
			top: -3px;
		}
		
		.jsMarked .columnMark > label::after {
			top: 4px;
		}
	}
	
	.messageDeleted .columnAvatar,
	.messageDisabled .columnAvatar {
		position: relative;
		
		&::before {
			display: block;
			font-family: FontAwesome;
			position: absolute;
			
			@include screen-md-up {
				font-size: 42px;
			}
			
			@include screen-sm-down {
				font-size: 28px;
			}
		}
		
		> div {
			visibility: hidden;
		}
	}
	
	.messageDeleted .columnAvatar::before {
		color: rgb(180, 0, 0);
		content: $fa-var-trash-o;
		left: 17px;
		top: -2px;
		
		@include screen-md-up {
			left: 17px;
			top: -2px;
		}
		
		@include screen-sm-down {
			left: 7px;
			top: -4px;
		}
	}
	
	.messageDisabled .columnAvatar::before {
		color: rgb(0, 140, 0);
		content: $fa-var-eye-slash;
		
		@include screen-md-up {
			left: 13px;
			top: -2px;
		}
		
		@include screen-sm-down {
			left: 3px;
			top: -4px;
		}
	}
	
	.columnAvatar {
		div {
			position: relative;
			width: 48px;
			height: 48px;
		}
		
		.myAvatar {
			position: absolute;
			width: 24px;
			height: 24px;
			bottom: -2px;
			right: -6px;
			
			> img {
				border: 1px solid $wcfContentBackground;
				box-sizing: content-box;
			}
		}
	}
	
	.columnSubject {
		overflow: hidden;
		
		> h3 {
			> .messageGroupLink {
				@include wcfFontHeadline;
			}
			
			> .badge.label {
				top: -2px;
			}
		}
		
		> small {
			display: block;
		}
		
		> .statusDisplay {
			display: flex;
			float: right;
			opacity: .75;
			transition: opacity .12s;
			
			> .statusIcons {
				align-items: center;
				flex: 0 0 auto;
				
				> li {
					align-items: center;
					display: flex;
				}
			}
		}
		
		> .labelList {
			float: right;
			padding-left: 7px;
		}
	}
	
	.columnLastPost {
		> .box32 {
			align-items: center;
		}
		
		
		time {
			color: $wcfContentDimmedText;
		}
		
		a {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	
	// hover
	.tabularListRow:hover,
	tr:hover { // deprecated
		.columnSubject > .statusDisplay {
			opacity: 1;
			
			> .pagination {
				opacity: 1;
			}
		}
	}
	
	// new status
	.tabularListColumns.new,
	tr.new { // deprecated
		.columnSubject > h3 > .messageGroupLink {
			font-weight: bold;
		}
	}
	
	.pagination {
		flex: 0 0 auto;
		opacity: 0;
		transition: opacity .12s;
		
		@include wcfFontSmall;
		
		&:not(:last-child) {
			margin-right: 5px;
		}
	}
	
	@include screen-md-up {
		.messageGroupCounterMobile,
		.messageGroupInfoMobile {
			display: none;
		}
	}
	
	@include screen-sm-down {
		.tabularListColumns > .columnMark {
			display: none;
		}
		
		.tabularListRowHead {
			.columnMark,
			.columnStats {
				display: none;
			}
			
			.columnSubject {
				padding: 0;
			}
			
			.columnLastPost {
				flex-basis: auto;
				padding: 0;
			}
		}
		
		.tabularListRow:not(.tabularListRowHead) > .tabularListColumns {
			flex-wrap: wrap;
			justify-content: flex-end;
			padding: 5px 0;
			
			> li {
				padding: 0;
			}
			
			.columnAvatar {
				margin-right: 10px;
				padding: 0;
				
				div {
					height: 32px;
					width: 32px;
				}
				
				img {
					max-height: 32px;
					max-width: 32px;
				}
				
				.myAvatar {
					display: none;
				}
			}
			
			.columnSubject {
				/* 37px = avatar width + margin-right */
				flex-basis: calc(100% - 42px);
				max-width: calc(100% - 42px);
				
				> h3 {
					align-items: flex-start;
					display: flex;
					
					> .messageGroupLink {
						flex: 1 1 auto;
						line-height: 1.48;
						overflow: hidden;
						text-overflow: ellipsis;
						
						@include wcfFontDefault;
					}
					
					> .messageGroupCounterMobile {
						flex: 0 0 auto;
						margin-left: 10px;
					}
				}
				
				.messageGroupInfoMobile {
					color: $wcfContentDimmedText;
					display: flex;
					
					@include wcfFontSmall;
					
					> .messageGroupAuthorMobile {
						flex: 1 1 auto;
					}
					
					> .messageGroupLastPostTimeMobile {
						flex: 0 0 auto;
						margin-left: 10px;
					}
				}
				
				.statusDisplay,
				.messageGroupInfo,
				.messageGroupTime,
				.messageGroupEditLink {
					display: none;
				}
				
				.labelList {
					float: none;
					padding-bottom: 2px;
					padding-left: 0;
				}
			}
			
			.columnStats,
			.columnLastPost {
				display: none;
			}
		}
	}
}

.messageGroupListStatsSimple {
	color: $wcfContentDimmedText;
	font-size: 1rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

@include screen-md-down {
	.mobileLinkShadowContainer {
		position: relative;
		
		> .mobileLinkShadow {
			bottom: 0;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
}

.contentHeader.messageGroupContentHeader {
	> .contentHeaderIcon {
		@include screen-lg {
			position: relative;
		}
	}
	
	&.messageDeleted > .contentHeaderIcon,
	&.messageDisabled > .contentHeaderIcon {
		&::before {
			display: block;
			font-family: FontAwesome;
			font-size: 56px;
			position: absolute;
		}
		
		> img {
			visibility: hidden;
		}
	}
	
	&.messageDeleted > .contentHeaderIcon::before {
		color: rgb(180, 0, 0);
		content: $fa-var-trash-o;
		left: 11px;
		top: -12px;
	}
	
	&.messageDisabled > .contentHeaderIcon::before {
		color: rgb(0, 140, 0);
		content: $fa-var-eye-slash;
		left: 4px;
		top: -12px;
	}
}