Merge pull request #5989 from WoltLab/wsc-rpc-api-const

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

.embeddedContent {
	background-color: var(--wcfContentBackground);
	box-shadow: var(--wcfBoxShadowCard);
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: var(--wcfBorderRadius);
	margin: 10px 0;
	max-width: 400px;
	overflow: hidden;
}

/* @deprecated 5.4 Use `<img class="embeddedContentImageElement">` instead */
.embeddedContentImage {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: -10px -10px 10px -10px;
	min-height: 150px;
}

.embeddedContentImageElement {
	margin: -10px -10px 10px -10px;
	object-fit: cover;
	object-position: center;
}

/* This repetition is required because of `.messageBody > .messageText img`. */
.embeddedContentImageElement.embeddedContentImageElement.embeddedContentImageElement {
	height: 150px !important;

	// The `100% + 20px` are the result of the negative margins.
	max-width: calc(100% + 20px);
	width: calc(100% + 20px);
}

.embeddedContentLink {
	display: block;
	padding: 10px;
	position: relative;
}

.embeddedContentTitleLink {
	color: inherit;

	&::before {
		content: "";
		inset: 0;
		position: absolute;
		z-index: 1;
	}

	&:hover,
	&:focus {
		color: inherit;
	}
}

@media (pointer: fine) {
	.embeddedContent:hover .embeddedContentTitleLink {
		text-decoration: underline;
	}
}

/* @deprecated 6.0 Use `.embeddedContentTitleLink` instead */
.embeddedContentLinkShadow {
	inset: 0;
	position: absolute;
}

.embeddedContentCategory {
	color: var(--wcfContentDimmedText);

	@include wcfFontSmall;
}

.embeddedContent .embeddedContentTitle,
.messageBody > .messageText .embeddedContentTitle,
#messagePreview > .htmlContent .embeddedContentTitle {
	color: var(--wcfContentHeadlineText);
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

	@include wcfFontHeadline;
	@include wcfFontBold;
}

.embeddedContentDetails {
	margin-top: 5px;

	@include wcfFontSmall;
}

.embeddedContentDescription {
	color: var(--wcfContentDimmedText);
	margin-top: 10px;
	max-height: calc(5em * #{var(--wcfFontLineHeight)});
	overflow: hidden;
	position: relative;

	&::after {
		background-image: linear-gradient(
			to top,
			var(--wcfContentBackground),
			rgba(var(--wcfContentBackground-rgb) / 0)
		);
		content: "";
		left: 0;
		height: calc(1em * #{var(--wcfFontLineHeight)});
		position: absolute;
		right: 0;
		top: calc(4em * #{var(--wcfFontLineHeight)});
	}
}

.embeddedContentMeta {
	align-items: center;
	border-top: 1px solid var(--wcfContentBorderInner);
	color: var(--wcfContentDimmedText);
	display: flex;
	padding: 10px;

	@include wcfFontSmall;
}

.embeddedContentMetaImage {
	flex: 0 auto;
	margin-right: 10px;
}

.embeddedContentMetaContent {
	flex: 1 auto;
}

.embeddedContentMetaAuthor {
	color: var(--wcfContentText);

	> a {
		color: inherit;

		&:hover {
			text-decoration: underline;
		}
	}
}