2 /* work-around for IE 11 to properly align the image if overflowing */
13 height: auto !important;
14 width: 100% !important;
19 color: $wcfContentDimmedText;
24 @include wcfFontSmall;
44 justify-content: flex-end;
51 .articleLikesSummery:not(:empty),
52 .articleLikeButtons:not(:empty) {
58 .articleAboutAuthorText {
62 .articleAboutAuthorUsername {
66 @include wcfFontHeadline;
76 @include screen-md-up {
82 .previousArticleButton,
86 @include screen-md-up {
91 color: $wcfContentText;
98 font-family: FontAwesome;
106 .articleNavigationEntityName,
107 .articleNavigationArticleTitle {
111 .articleNavigationEntityName {
112 text-transform: uppercase;
115 .articleNavigationArticleTitle {
118 @include wcfFontHeadline;
121 .articleNavigationArticleImage {
125 transition: .2s ease opacity;
131 color: $wcfContentLinkActive;
134 .articleNavigationArticleTitle {
135 color: $wcfContentLinkActive;
138 .articleNavigationArticleImage {
147 .previousArticleButton {
148 @include screen-md-up {
154 content: $fa-var-chevron-left;
164 justify-content: flex-end;
167 @include screen-md-up {
172 .articleNavigationArticleImage {
180 content: $fa-var-chevron-right;
190 .previousArticleButton + .nextArticleButton {
191 @include screen-sm-down {
195 @include screen-md-up {
201 /* fix icons in rtl design */
204 .previousArticleButton {
207 content: $fa-var-chevron-right;
215 content: $fa-var-chevron-left;
223 .articleListMetaData {
224 color: $wcfContentDimmedText;
238 .articleListImage > img {
243 color: $wcfContentLinkActive;
248 .articleListImage > img {
251 transition: .2s ease opacity;
254 > li:not(:first-child) {
259 .box128 > .articleListImage {
263 .articleListImage > img {
264 height: 64px !important;
265 width: 64px !important;
274 margin: 0 -5px -20px -5px;
277 margin: 0 5px 20px 5px;
280 .articleListImage > img {
281 height: auto !important;
283 width: 100% !important;
286 .articleListImage + .articleListTitle {
290 .articleListMetaData {
298 flex: 0 0 calc(100%/3 - 10px);
299 max-width: calc(100%/3 - 10px);
306 flex: 0 0 calc(100%/6 - 10px);
307 max-width: calc(100%/6 - 10px);
313 @include screen-sm-up {
316 flex: 0 0 calc(100%/3 - 10px);
317 max-width: calc(100%/3 - 10px);
324 justify-content: center;