From 8f93809de2b6a85878aec2f936f2f08852160205 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 22 May 2023 14:20:13 +0200
Subject: [PATCH] Improve the visuals of embedded content, turn title into a
 `<h3>`

---
 com.woltlab.wcf/templates/articleBBCode.tpl   |  4 ++--
 .../files/acp/templates/articleBBCode.tpl     |  4 ++--
 .../files/style/ui/embeddedContent.scss       | 19 +++++++++++--------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/com.woltlab.wcf/templates/articleBBCode.tpl b/com.woltlab.wcf/templates/articleBBCode.tpl
index 949f0e1806..92af1e2a3a 100644
--- a/com.woltlab.wcf/templates/articleBBCode.tpl
+++ b/com.woltlab.wcf/templates/articleBBCode.tpl
@@ -10,9 +10,9 @@
 
 		<div class="embeddedContentCategory">{lang}wcf.article.bbcode.type{/lang}</div>
 		
-		<div class="embeddedContentTitle" id="{$titleHash}_articleTitle{@$article->articleID}">
+		<h3 class="embeddedContentTitle" id="{$titleHash}_articleTitle{@$article->articleID}">
 			<a href="{@$article->getLink()}" class="embeddedContentTitleLink">{$article->getTitle()}</a>
-		</div>
+		</h3>
 		
 		<div class="embeddedContentDescription">
 			{@$article->getFormattedTeaser()}
diff --git a/wcfsetup/install/files/acp/templates/articleBBCode.tpl b/wcfsetup/install/files/acp/templates/articleBBCode.tpl
index 949f0e1806..92af1e2a3a 100644
--- a/wcfsetup/install/files/acp/templates/articleBBCode.tpl
+++ b/wcfsetup/install/files/acp/templates/articleBBCode.tpl
@@ -10,9 +10,9 @@
 
 		<div class="embeddedContentCategory">{lang}wcf.article.bbcode.type{/lang}</div>
 		
-		<div class="embeddedContentTitle" id="{$titleHash}_articleTitle{@$article->articleID}">
+		<h3 class="embeddedContentTitle" id="{$titleHash}_articleTitle{@$article->articleID}">
 			<a href="{@$article->getLink()}" class="embeddedContentTitleLink">{$article->getTitle()}</a>
-		</div>
+		</h3>
 		
 		<div class="embeddedContentDescription">
 			{@$article->getFormattedTeaser()}
diff --git a/wcfsetup/install/files/style/ui/embeddedContent.scss b/wcfsetup/install/files/style/ui/embeddedContent.scss
index ef2db3e164..71b7e4e9e5 100644
--- a/wcfsetup/install/files/style/ui/embeddedContent.scss
+++ b/wcfsetup/install/files/style/ui/embeddedContent.scss
@@ -1,12 +1,16 @@
 .embeddedContent {
 	background-color: var(--wcfContentBackground);
-	box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-	border-radius: 3px;
+	box-shadow: var(--wcfBoxShadowCard);
+	border-radius: var(--wcfBorderRadius);
 	margin: 10px 0;
 	max-width: 400px;
 	overflow: hidden;
 }
 
+html[data-color-scheme="dark"] .embeddedContent {
+	border: 1px solid var(--wcfContentBorderInner);
+}
+
 /* @deprecated 5.4 Use `<img class="embeddedContentImageElement">` instead */
 .embeddedContentImage {
 	background-position: center;
@@ -54,11 +58,8 @@
 
 /* @deprecated 6.0 Use `.embeddedContentTitleLink` instead */
 .embeddedContentLinkShadow {
-	bottom: 0;
-	left: 0;
+	inset: 0;
 	position: absolute;
-	right: 0;
-	top: 0;
 }
 
 .embeddedContentCategory {
@@ -67,10 +68,11 @@
 	@include wcfFontSmall;
 }
 
-.embeddedContentTitle {
+.embeddedContentTitle,
+.messageBody > .messageText .embeddedContentTitle {
 	color: var(--wcfContentHeadlineText);
 	display: -webkit-box;
-	margin-bottom: 5px;
+	margin: 0;
 	overflow: hidden;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
@@ -87,6 +89,7 @@
 
 .embeddedContentDescription {
 	color: var(--wcfContentDimmedText);
+	margin-top: 5px;
 	max-height: calc(5em * #{var(--wcfFontLineHeight)});
 	overflow: hidden;
 	position: relative;
-- 
2.20.1