4 margin: 0 0 -20px -20px;
8 background-color: var(--wcfContentBackground);
9 border-radius: var(--wcfBorderRadius);
10 box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
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 {
159 box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
166 .contentItemCategory {
167 color: var(--wcfContentDimmedText);
169 @include wcfFontSmall;
173 color: var(--wcfContentHeadlineLink);
175 @include wcfFontHeadline;
176 @include wcfFontBold;
179 color: var(--wcfContentHeadlineLinkActive);
183 .contentItemDescription {
184 color: var(--wcfContentDimmedText);
188 height: auto !important;
193 .contentItemContentLinks {
194 padding: 0 10px 10px 10px;
199 border-top: 1px solid var(--wcfContentBorderInner);
200 color: var(--wcfContentDimmedText);
211 .contentItemMetaImage {
216 .contentItemMetaContent {
221 .contentItemMetaAuthor {
222 color: var(--wcfContentText);
230 .contentItemMetaIcons {
236 @include wcfFontSmall;
239 .contentItemMetaIcon {
242 &:not(:first-child) {
256 .contentItemImagePreview {
257 border-radius: var(--wcfBorderRadius);
258 box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
263 .contentItemImagePreviewButtons {
280 /* There are no sidebars, use a three column layout. */
281 .content:first-child:last-child,
284 .contentItemMultiColumn {
285 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
288 flex-basis: calc(100% / 3 - 20px);
294 /* The sidebar, if any, is not adjacent to the content, use a three column layout. */
295 .contentItemMultiColumn {
296 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
299 flex-basis: calc(100% / 3 - 20px);
304 /* There is not enough space to fit two columns. */
309 .contentItemMultiColumn {