Commit | Line | Data |
---|---|---|
f709b4a7 | 1 | .embeddedContent { |
1a75e228 | 2 | background-color: var(--wcfContentBackground); |
8f93809d | 3 | box-shadow: var(--wcfBoxShadowCard); |
596f0694 | 4 | border: 1px solid var(--wcfContentBorderInner); |
8f93809d | 5 | border-radius: var(--wcfBorderRadius); |
f709b4a7 | 6 | margin: 10px 0; |
ca527294 MW |
7 | max-width: 400px; |
8 | overflow: hidden; | |
9 | } | |
10 | ||
7f1bef6b | 11 | /* @deprecated 5.4 Use `<img class="embeddedContentImageElement">` instead */ |
ca527294 MW |
12 | .embeddedContentImage { |
13 | background-position: center; | |
14 | background-repeat: no-repeat; | |
15 | background-size: cover; | |
16 | margin: -10px -10px 10px -10px; | |
17 | min-height: 150px; | |
f709b4a7 AE |
18 | } |
19 | ||
7f1bef6b AE |
20 | .embeddedContentImageElement { |
21 | margin: -10px -10px 10px -10px; | |
22 | object-fit: cover; | |
23 | object-position: center; | |
24 | } | |
25 | ||
26 | /* This repetition is required because of `.messageBody > .messageText img`. */ | |
27 | .embeddedContentImageElement.embeddedContentImageElement.embeddedContentImageElement { | |
28 | height: 150px !important; | |
29 | ||
30 | // The `100% + 20px` are the result of the negative margins. | |
31 | max-width: calc(100% + 20px); | |
3aaa0484 | 32 | width: calc(100% + 20px); |
7f1bef6b AE |
33 | } |
34 | ||
f709b4a7 AE |
35 | .embeddedContentLink { |
36 | display: block; | |
37 | padding: 10px; | |
4732fefb AE |
38 | position: relative; |
39 | } | |
40 | ||
47feadc6 MW |
41 | .embeddedContentTitleLink { |
42 | color: inherit; | |
43 | ||
44 | &::before { | |
47feadc6 | 45 | content: ""; |
426076c1 | 46 | inset: 0; |
47feadc6 | 47 | position: absolute; |
426076c1 | 48 | z-index: 1; |
47feadc6 MW |
49 | } |
50 | ||
51 | &:hover, | |
52 | &:focus { | |
53 | color: inherit; | |
54 | } | |
55 | } | |
56 | ||
7d137ac0 AE |
57 | @media (pointer: fine) { |
58 | .embeddedContent:hover .embeddedContentTitleLink { | |
59 | text-decoration: underline; | |
60 | } | |
61 | } | |
62 | ||
47feadc6 | 63 | /* @deprecated 6.0 Use `.embeddedContentTitleLink` instead */ |
4732fefb | 64 | .embeddedContentLinkShadow { |
8f93809d | 65 | inset: 0; |
4732fefb | 66 | position: absolute; |
f709b4a7 AE |
67 | } |
68 | ||
69 | .embeddedContentCategory { | |
1a75e228 | 70 | color: var(--wcfContentDimmedText); |
c8a79279 | 71 | |
f709b4a7 AE |
72 | @include wcfFontSmall; |
73 | } | |
74 | ||
e923626a | 75 | .embeddedContent .embeddedContentTitle, |
4b6ef559 AE |
76 | .messageBody > .messageText .embeddedContentTitle, |
77 | #messagePreview > .htmlContent .embeddedContentTitle { | |
1a75e228 | 78 | color: var(--wcfContentHeadlineText); |
ca527294 | 79 | display: -webkit-box; |
8f93809d | 80 | margin: 0; |
ca527294 | 81 | overflow: hidden; |
ee517562 TD |
82 | -webkit-line-clamp: 2; |
83 | -webkit-box-orient: vertical; | |
8a52619a | 84 | |
f709b4a7 AE |
85 | @include wcfFontHeadline; |
86 | @include wcfFontBold; | |
87 | } | |
88 | ||
40ca779c MW |
89 | .embeddedContentDetails { |
90 | margin-top: 5px; | |
91 | ||
92 | @include wcfFontSmall; | |
93 | } | |
94 | ||
f709b4a7 | 95 | .embeddedContentDescription { |
1a75e228 | 96 | color: var(--wcfContentDimmedText); |
e923626a | 97 | margin-top: 10px; |
d80419c4 | 98 | max-height: calc(5em * #{var(--wcfFontLineHeight)}); |
ee517562 | 99 | overflow: hidden; |
75611e74 | 100 | position: relative; |
7da901d4 | 101 | |
75611e74 | 102 | &::after { |
4dfb95ef AE |
103 | background-image: linear-gradient( |
104 | to top, | |
105 | var(--wcfContentBackground), | |
106 | rgba(var(--wcfContentBackground-rgb) / 0) | |
107 | ); | |
75611e74 AE |
108 | content: ""; |
109 | left: 0; | |
d80419c4 | 110 | height: calc(1em * #{var(--wcfFontLineHeight)}); |
75611e74 AE |
111 | position: absolute; |
112 | right: 0; | |
d80419c4 | 113 | top: calc(4em * #{var(--wcfFontLineHeight)}); |
75611e74 | 114 | } |
f709b4a7 | 115 | } |
f709b4a7 AE |
116 | |
117 | .embeddedContentMeta { | |
118 | align-items: center; | |
1a75e228 AE |
119 | border-top: 1px solid var(--wcfContentBorderInner); |
120 | color: var(--wcfContentDimmedText); | |
f709b4a7 AE |
121 | display: flex; |
122 | padding: 10px; | |
8a52619a | 123 | |
f709b4a7 AE |
124 | @include wcfFontSmall; |
125 | } | |
126 | ||
127 | .embeddedContentMetaImage { | |
128 | flex: 0 auto; | |
129 | margin-right: 10px; | |
130 | } | |
131 | ||
132 | .embeddedContentMetaContent { | |
133 | flex: 1 auto; | |
134 | } | |
135 | ||
136 | .embeddedContentMetaAuthor { | |
1a75e228 | 137 | color: var(--wcfContentText); |
8a52619a | 138 | |
f709b4a7 AE |
139 | > a { |
140 | color: inherit; | |
8a52619a | 141 | |
f709b4a7 AE |
142 | &:hover { |
143 | text-decoration: underline; | |
144 | } | |
145 | } | |
146 | } |