4 margin: 0 0 -20px -20px;
8 background-color: $wcfContentBackground;
10 box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(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);
37 .contentItemLinkShadow {
49 .contentItemContentTruncate {
55 background-image: linear-gradient(to top, $wcfContentBackground, transparent);
63 /* The `top` value is important, because it prevents the last line from being affected
64 when the content isn't too long. */
70 background-position: center;
71 background-repeat: no-repeat;
72 background-size: cover;
77 .contentItemImageSmall {
81 .contentItemImageLarge {
87 align-items: flex-start;
89 flex-direction: column;
103 &:not(:first-child) {
109 border: 1px solid currentColor;
112 .contentItemOption.button {
113 box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
120 .contentItemCategory {
121 color: $wcfContentDimmedText;
122 text-transform: uppercase;
124 @include wcfFontSmall;
128 color: $wcfContentHeadlineLink;
130 @include wcfFontHeadline;
131 @include wcfFontBold;
134 color: $wcfContentHeadlineLinkActive;
138 .contentItemDescription {
139 color: $wcfContentText;
143 height: auto !important;
148 .contentItemContentLinks {
149 padding: 0 10px 10px 10px;
154 border-top: 1px solid $wcfContentBorderInner;
155 color: $wcfContentDimmedText;
165 .contentItemMetaImage {
170 .contentItemMetaContent {
175 .contentItemMetaAuthor {
176 color: $wcfContentText;
184 .contentItemMetaIcons {
190 .contentItemMetaIcon {
193 &:not(:first-child) {
198 .contentItemImagePreview {
200 box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
205 .contentItemImagePreviewButtons {
222 /* There are no sidebars, use a three column layout. */
223 .content:first-child:last-child {
224 .contentItemMultiColumn {
225 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
228 flex-basis: calc(100% / 3 - 20px);
234 /* The sidebar, if any, is not adjacent to the content, use a three column layout. */
235 .contentItemMultiColumn {
236 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
239 flex-basis: calc(100% / 3 - 20px);
244 /* There is not enough space to fit two columns. */
249 .contentItemMultiColumn {