Improve the visuals of embedded content, turn title into a `<h3>`

diff --git a/com.woltlab.wcf/templates/articleBBCode.tpl b/com.woltlab.wcf/templates/articleBBCode.tpl
index 949f0e180605d8af749e4c9ea8a2ed9d64a39c80..92af1e2a3a03d4b4213e360ae6287f32d9442f23 100644 (file)
--- 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 949f0e180605d8af749e4c9ea8a2ed9d64a39c80..92af1e2a3a03d4b4213e360ae6287f32d9442f23 100644 (file)
--- 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 ef2db3e164cb9c7e6f779a1b3e824bd182d716c3..71b7e4e9e551ccf66f3d685c66966d9d949fde35 100644 (file)
--- 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;