5 .articleTeaser + .tableOfContentsWrapper {
9 .articleTeaserContainer + .section,
10 .articleImageContainer + .section {
11 margin-top: 20px !important;
15 .contentCoverPhotoImage {
16 /* work-around for IE 11 to properly align the image if overflowing */
21 .contentCoverPhotoImageWrapper {
24 box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
31 height: auto !important;
32 width: 100% !important;
37 color: $wcfContentDimmedText;
42 @include wcfFontSmall;
56 justify-content: flex-end;
63 .articleLikesSummery:not(:empty),
64 .articleLikeButtons:not(:empty) {
68 .anchorFixedHeader:target::before {
77 .articleAboutAuthorText {
81 .articleAboutAuthorUsername {
85 @include wcfFontHeadline;
95 @include screen-md-up {
101 .previousArticleButton,
105 @include screen-md-up {
110 color: $wcfContentText;
117 font-family: FontAwesome;
125 .articleNavigationEntityName,
126 .articleNavigationArticleTitle {
130 .articleNavigationEntityName {
131 text-transform: uppercase;
134 .articleNavigationArticleTitle {
137 @include wcfFontHeadline;
140 .articleNavigationArticleImage {
144 transition: .2s ease opacity;
150 color: $wcfContentLinkActive;
153 .articleNavigationArticleTitle {
154 color: $wcfContentLinkActive;
157 .articleNavigationArticleImage {
166 .previousArticleButton {
167 @include screen-md-up {
173 content: $fa-var-chevron-left;
183 justify-content: flex-end;
186 @include screen-md-up {
191 .articleNavigationArticleImage {
199 content: $fa-var-chevron-right;
209 .previousArticleButton + .nextArticleButton {
210 @include screen-sm-down {
214 @include screen-md-up {
220 /* fix icons in rtl design */
223 .previousArticleButton {
226 content: $fa-var-chevron-right;
234 content: $fa-var-chevron-left;
242 .articleListMetaData {
243 color: $wcfContentDimmedText;
257 .articleListImage > img {
262 color: $wcfContentLinkActive;
267 .articleListImage > img {
270 transition: .2s ease opacity;
273 > li:not(:first-child) {
278 .box128 > .articleListImage {
282 .articleListImage > img {
283 height: 64px !important;
284 width: 64px !important;
293 margin: 0 -5px -20px -5px;
296 margin: 0 5px 20px 5px;
299 .articleListImage > img {
300 height: auto !important;
302 width: 100% !important;
305 .articleListImage + .articleListTitle {
309 .articleListMetaData {
317 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
320 flex-basis: calc(100% / 3 - 10px);
327 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
330 flex-basis: calc(100% / 6 - 10px);
336 @include screen-sm-up {
339 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
342 flex-basis: calc(100% / 3 - 10px);
349 justify-content: center;