4 margin: 0 0 -20px -20px;
8 background-color: var(--wcfContentBackground);
9 border-radius: var(--wcfBorderRadius);
10 box-shadow: var(--wcfBoxShadowCard);
12 flex-direction: column;
13 margin: 0 0 20px 20px;
18 .contentItemSingleColumn {
19 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
22 flex-basis: calc(100% - 20px);
25 .contentItemMultiColumn {
26 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
29 flex-basis: calc(50% - 20px);
36 .contentItemTitleLink {
54 /* Deprecated: use contentItemTitleLink instead. */
55 .contentItemLinkShadow {
67 .contentItemContentTruncate {
73 background-image: linear-gradient(
75 var(--wcfContentBackground),
76 rgba(var(--wcfContentBackground-rgb) / 0)
85 /* The `top` value is important, because it prevents the last line from being affected
86 when the content isn't too long. */
92 background-position: center;
93 background-repeat: no-repeat;
94 background-size: cover;
99 .contentItemImageSmall {
102 .contentItemImageElement {
107 .contentItemImageLarge {
110 .contentItemImageElement {
115 .contentItemImageElement {
116 margin: -10px -10px -10px -10px;
118 object-position: center;
120 // The `100% + 20px` are the result of the negative margins.
121 max-width: calc(100% + 20px);
125 .contentItemOptions {
126 align-items: flex-start;
128 flex-direction: column;
131 .contentItemImageElement + .contentItemBadges {
138 .contentItemOptions {
149 &:not(:first-child) {
155 border: 1px solid currentColor;
158 .contentItemOption.button {
160 0 0 3px rgba(0, 0, 0, 0.12),
161 0 1px 2px rgba(0, 0, 0, 0.24);
168 .contentItemCategory {
169 color: var(--wcfContentDimmedText);
171 @include wcfFontSmall;
175 color: var(--wcfContentHeadlineLink);
177 @include wcfFontHeadline;
178 @include wcfFontBold;
181 color: var(--wcfContentHeadlineLinkActive);
185 .contentItemDescription {
186 color: var(--wcfContentDimmedText);
190 height: auto !important;
195 .contentItemContentLinks {
196 padding: 0 10px 10px 10px;
201 border-top: 1px solid var(--wcfContentBorderInner);
202 color: var(--wcfContentDimmedText);
213 .contentItemMetaImage {
218 .contentItemMetaContent {
223 .contentItemMetaAuthor {
224 color: var(--wcfContentText);
232 .contentItemMetaIcons {
238 @include wcfFontSmall;
241 .contentItemMetaIcon {
244 &:not(:first-child) {
258 .contentItemImagePreview {
259 border-radius: var(--wcfBorderRadius);
261 0 0 3px rgba(0, 0, 0, 0.12),
262 0 1px 2px rgba(0, 0, 0, 0.24);
267 .contentItemImagePreviewButtons {
284 /* There are no sidebars, use a three column layout. */
285 .content:first-child:last-child,
288 .contentItemMultiColumn {
289 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
292 flex-basis: calc(100% / 3 - 20px);
298 /* The sidebar, if any, is not adjacent to the content, use a three column layout. */
299 .contentItemMultiColumn {
300 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
303 flex-basis: calc(100% / 3 - 20px);
308 /* There is not enough space to fit two columns. */
313 .contentItemMultiColumn {