4 margin: 0 0 -20px -20px;
8 background-color: $wcfContentBackground;
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(to top, $wcfContentBackground, transparentize($wcfContentBackground, 1));
81 /* The `top` value is important, because it prevents the last line from being affected
82 when the content isn't too long. */
88 background-position: center;
89 background-repeat: no-repeat;
90 background-size: cover;
95 .contentItemImageSmall {
98 .contentItemImageElement {
103 .contentItemImageLarge {
106 .contentItemImageElement {
111 .contentItemImageElement {
112 margin: -10px -10px 10px -10px;
114 object-position: center;
116 // The `100% + 20px` are the result of the negative margins.
117 max-width: calc(100% + 20px);
121 .contentItemOptions {
122 align-items: flex-start;
124 flex-direction: column;
127 .contentItemImageElement + .contentItemBadges {
134 .contentItemOptions {
145 &:not(:first-child) {
151 border: 1px solid currentColor;
154 .contentItemOption.button {
155 box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
162 .contentItemCategory {
163 color: $wcfContentDimmedText;
165 @include wcfFontSmall;
169 color: $wcfContentHeadlineLink;
171 @include wcfFontHeadline;
172 @include wcfFontBold;
175 color: $wcfContentHeadlineLinkActive;
179 .contentItemDescription {
180 color: $wcfContentDimmedText;
184 height: auto !important;
189 .contentItemContentLinks {
190 padding: 0 10px 10px 10px;
195 border-top: 1px solid $wcfContentBorderInner;
196 color: $wcfContentDimmedText;
206 .contentItemMetaImage {
211 .contentItemMetaContent {
216 .contentItemMetaAuthor {
217 color: $wcfContentText;
225 .contentItemMetaIcons {
231 @include wcfFontSmall;
234 .contentItemMetaIcon {
237 &:not(:first-child) {
251 .contentItemImagePreview {
253 box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
258 .contentItemImagePreviewButtons {
275 /* There are no sidebars, use a three column layout. */
276 .content:first-child:last-child,
279 .contentItemMultiColumn {
280 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
283 flex-basis: calc(100% / 3 - 20px);
289 /* The sidebar, if any, is not adjacent to the content, use a three column layout. */
290 .contentItemMultiColumn {
291 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
294 flex-basis: calc(100% / 3 - 20px);
299 /* There is not enough space to fit two columns. */
304 .contentItemMultiColumn {