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, transparent);
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 {
99 .contentItemImageLarge {
104 .contentItemOptions {
105 align-items: flex-start;
107 flex-direction: column;
110 .contentItemOptions {
121 &:not(:first-child) {
127 border: 1px solid currentColor;
130 .contentItemOption.button {
131 box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
138 .contentItemCategory {
139 color: $wcfContentDimmedText;
140 text-transform: uppercase;
142 @include wcfFontSmall;
146 color: $wcfContentHeadlineLink;
148 @include wcfFontHeadline;
149 @include wcfFontBold;
152 color: $wcfContentHeadlineLinkActive;
156 .contentItemDescription {
157 color: $wcfContentText;
161 height: auto !important;
166 .contentItemContentLinks {
167 padding: 0 10px 10px 10px;
172 border-top: 1px solid $wcfContentBorderInner;
173 color: $wcfContentDimmedText;
183 .contentItemMetaImage {
188 .contentItemMetaContent {
193 .contentItemMetaAuthor {
194 color: $wcfContentText;
202 .contentItemMetaIcons {
208 .contentItemMetaIcon {
211 &:not(:first-child) {
216 .contentItemImagePreview {
218 box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
223 .contentItemImagePreviewButtons {
240 /* There are no sidebars, use a three column layout. */
241 .content:first-child:last-child,
244 .contentItemMultiColumn {
245 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
248 flex-basis: calc(100% / 3 - 20px);
254 /* The sidebar, if any, is not adjacent to the content, use a three column layout. */
255 .contentItemMultiColumn {
256 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
259 flex-basis: calc(100% / 3 - 20px);
264 /* There is not enough space to fit two columns. */
269 .contentItemMultiColumn {