Use prettier for SCSS (#3895)

[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 img,
		> div .icon:first-child {
			visibility: hidden;
		}
	}

	.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;
		}
	}

	.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;
		}
	}

	.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: 0.75;
			transition: opacity 0.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: 600;
		}
	}

	.pagination {
		flex: 0 0 auto;
		opacity: 0;
		transition: opacity 0.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;
			}
		}
	}

	.tabularListRowHead {
		.columnSort {
			flex: 1;

			@include wcfFontDefault;
		}

		.columnFilter {
			flex: 0 1 auto;
			padding-left: 40px;

			@include wcfFontDefault;

			@include screen-xs {
				display: none;
			}
		}

		.columnSort,
		.columnFilter {
			.inlineList > li:not(:last-child) {
				margin-right: 10px;
			}
		}

		.columnApplyFilter {
			flex: 0 1 auto;
			padding-right: 0;
		}
	}
}

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

	> .icon {
		color: inherit;
	}
}

@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,
		> .icon:first-child {
			visibility: hidden;
		}
	}

	&.messageDisabled > .contentHeaderIcon::before {
		color: rgb(0, 140, 0);
		content: $fa-var-eye-slash;
		left: 4px;
		top: -12px;
	}

	&.messageDeleted > .contentHeaderIcon::before {
		color: rgb(180, 0, 0);
		content: $fa-var-trash-o;
		left: 11px;
		top: -12px;
	}
}