Commit | Line | Data |
---|---|---|
e519a593 AE |
1 | .articleTeaser { |
2 | @include wcfFontBold; | |
3 | } | |
4 | ||
544498c5 MW |
5 | .articleTeaser + .tableOfContentsWrapper { |
6 | margin-top: 20px; | |
7 | } | |
8 | ||
e519a593 AE |
9 | .articleTeaserContainer + .section, |
10 | .articleImageContainer + .section { | |
11 | margin-top: 20px !important; | |
12 | } | |
13 | ||
886f7f29 AE |
14 | .articleImage, |
15 | .contentCoverPhotoImage { | |
f7bb6f13 AE |
16 | /* work-around for IE 11 to properly align the image if overflowing */ |
17 | display: flex; | |
6bf598d7 | 18 | flex-wrap: wrap; |
8a52619a | 19 | |
886f7f29 AE |
20 | .articleImageWrapper, |
21 | .contentCoverPhotoImageWrapper { | |
a5a4f02d | 22 | align-items: center; |
e519a593 | 23 | border-radius: 3px; |
8a52619a | 24 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); |
a5a4f02d | 25 | display: flex; |
2dbac9ad | 26 | max-height: 300px; |
a5a4f02d | 27 | overflow: hidden; |
e519a593 | 28 | width: 100%; |
8a52619a | 29 | |
a5a4f02d | 30 | img { |
6a4d8742 MW |
31 | height: auto !important; |
32 | width: 100% !important; | |
a5a4f02d MW |
33 | } |
34 | } | |
8a52619a | 35 | |
a5a4f02d MW |
36 | figcaption { |
37 | color: $wcfContentDimmedText; | |
1948841e | 38 | flex: 1 0 100%; |
a5a4f02d MW |
39 | margin-top: 5px; |
40 | text-align: center; | |
8a52619a | 41 | |
a5a4f02d MW |
42 | @include wcfFontSmall; |
43 | } | |
44 | } | |
45 | ||
46 | .articleContent { | |
e1134b07 | 47 | .articleTagList { |
a5a4f02d MW |
48 | margin-top: 20px; |
49 | } | |
8a52619a | 50 | |
8c0a41a6 MW |
51 | .articleLikeSection { |
52 | align-items: center; | |
53 | } | |
8a52619a | 54 | |
8c0a41a6 MW |
55 | .articleLikeButtons { |
56 | justify-content: flex-end; | |
8a52619a | 57 | |
8c0a41a6 MW |
58 | .invisible { |
59 | display: inline; | |
60 | } | |
a5a4f02d | 61 | } |
8a52619a | 62 | |
e1134b07 MW |
63 | .articleLikesSummery:not(:empty), |
64 | .articleLikeButtons:not(:empty) { | |
65 | margin-top: 20px; | |
66 | } | |
8a52619a | 67 | |
f0fb0f30 AE |
68 | .anchorFixedHeader:target::before { |
69 | content: ""; | |
70 | display: block; | |
71 | height: 50px; | |
72 | margin-top: -50px; | |
73 | } | |
a5a4f02d MW |
74 | } |
75 | ||
76 | .articleAboutAuthor { | |
77 | .articleAboutAuthorText { | |
78 | font-style: italic; | |
79 | } | |
8a52619a | 80 | |
a5a4f02d MW |
81 | .articleAboutAuthorUsername { |
82 | margin-top: 5px; | |
8a52619a | 83 | |
a5a4f02d MW |
84 | .username { |
85 | @include wcfFontHeadline; | |
86 | } | |
8a52619a | 87 | |
a5a4f02d MW |
88 | .userTitleBadge { |
89 | top: -2px; | |
90 | } | |
91 | } | |
92 | } | |
93 | ||
94 | .articleNavigation { | |
95 | @include screen-md-up { | |
96 | > nav > ul { | |
97 | display: flex; | |
98 | } | |
99 | } | |
8a52619a | 100 | |
a5a4f02d MW |
101 | .previousArticleButton, |
102 | .nextArticleButton { | |
ea2fa3e5 | 103 | display: flex; |
8a52619a | 104 | |
a5a4f02d | 105 | @include screen-md-up { |
ea2fa3e5 | 106 | flex: 0 0 50%; |
a5a4f02d | 107 | } |
8a52619a | 108 | |
a5a4f02d MW |
109 | > a { |
110 | color: $wcfContentText; | |
ea2fa3e5 | 111 | display: flex; |
8a52619a | 112 | |
a5a4f02d | 113 | &::before { |
ea2fa3e5 MW |
114 | align-self: center; |
115 | display: block; | |
116 | flex: 0 0 auto; | |
a5a4f02d MW |
117 | font-family: FontAwesome; |
118 | font-size: 36px; | |
ea2fa3e5 | 119 | } |
8a52619a | 120 | |
ea2fa3e5 MW |
121 | > div { |
122 | flex: 1 1 auto; | |
a5a4f02d | 123 | } |
8a52619a | 124 | |
a5a4f02d MW |
125 | .articleNavigationEntityName, |
126 | .articleNavigationArticleTitle { | |
127 | display: block; | |
128 | } | |
8a52619a | 129 | |
a5a4f02d MW |
130 | .articleNavigationEntityName { |
131 | text-transform: uppercase; | |
132 | } | |
8a52619a | 133 | |
a5a4f02d MW |
134 | .articleNavigationArticleTitle { |
135 | margin-top: 3px; | |
8a52619a | 136 | |
a5a4f02d MW |
137 | @include wcfFontHeadline; |
138 | } | |
8a52619a | 139 | |
a5a4f02d MW |
140 | .articleNavigationArticleImage { |
141 | > img { | |
142 | border-radius: 2px; | |
8a52619a TD |
143 | opacity: 0.85; |
144 | transition: 0.2s ease opacity; | |
a5a4f02d MW |
145 | } |
146 | } | |
8a52619a | 147 | |
a5a4f02d MW |
148 | &:hover { |
149 | &::before { | |
150 | color: $wcfContentLinkActive; | |
151 | } | |
8a52619a | 152 | |
a5a4f02d MW |
153 | .articleNavigationArticleTitle { |
154 | color: $wcfContentLinkActive; | |
155 | } | |
8a52619a | 156 | |
a5a4f02d MW |
157 | .articleNavigationArticleImage { |
158 | > img { | |
159 | opacity: 1; | |
160 | } | |
161 | } | |
162 | } | |
163 | } | |
164 | } | |
8a52619a | 165 | |
a5a4f02d MW |
166 | .previousArticleButton { |
167 | @include screen-md-up { | |
168 | padding-right: 10px; | |
169 | } | |
8a52619a | 170 | |
a5a4f02d MW |
171 | > a { |
172 | &::before { | |
a5a4f02d MW |
173 | content: $fa-var-chevron-left; |
174 | } | |
8a52619a | 175 | |
a5a4f02d | 176 | > div { |
ea2fa3e5 | 177 | margin-left: 10px; |
a5a4f02d | 178 | } |
c5dd767e | 179 | } |
a5a4f02d | 180 | } |
8a52619a | 181 | |
a5a4f02d | 182 | .nextArticleButton { |
ea2fa3e5 | 183 | justify-content: flex-end; |
a5a4f02d | 184 | text-align: right; |
8a52619a | 185 | |
a5a4f02d MW |
186 | @include screen-md-up { |
187 | margin-left: 50%; | |
188 | padding-left: 10px; | |
c5dd767e | 189 | } |
8a52619a | 190 | |
a5a4f02d MW |
191 | .articleNavigationArticleImage { |
192 | order: 1; | |
193 | margin-left: 15px; | |
194 | margin-right: 0; | |
195 | } | |
8a52619a | 196 | |
a5a4f02d MW |
197 | > a { |
198 | &::before { | |
a5a4f02d | 199 | content: $fa-var-chevron-right; |
ea2fa3e5 | 200 | order: 1; |
a5a4f02d | 201 | } |
8a52619a | 202 | |
a5a4f02d | 203 | > div { |
ea2fa3e5 | 204 | margin-right: 10px; |
a5a4f02d MW |
205 | } |
206 | } | |
207 | } | |
8a52619a | 208 | |
a5a4f02d MW |
209 | .previousArticleButton + .nextArticleButton { |
210 | @include screen-sm-down { | |
211 | margin-top: 20px; | |
212 | } | |
8a52619a | 213 | |
a5a4f02d MW |
214 | @include screen-md-up { |
215 | margin-left: 0; | |
216 | } | |
217 | } | |
218 | } | |
219 | ||
f04a84b3 MW |
220 | /* fix icons in rtl design */ |
221 | html[dir="rtl"] { | |
222 | .articleNavigation { | |
223 | .previousArticleButton { | |
224 | > a { | |
225 | &::before { | |
226 | content: $fa-var-chevron-right; | |
227 | } | |
228 | } | |
229 | } | |
8a52619a | 230 | |
f04a84b3 MW |
231 | .nextArticleButton { |
232 | > a { | |
233 | &::before { | |
234 | content: $fa-var-chevron-left; | |
235 | } | |
236 | } | |
237 | } | |
238 | } | |
239 | } | |
240 | ||
a5a4f02d MW |
241 | .articleList { |
242 | .articleListMetaData { | |
243 | color: $wcfContentDimmedText; | |
244 | margin-top: 2px; | |
8a52619a | 245 | |
a5a4f02d MW |
246 | .icon { |
247 | color: inherit; | |
248 | } | |
249 | } | |
8a52619a | 250 | |
a5a4f02d | 251 | a { |
8b59f5ea | 252 | color: inherit; |
8a52619a | 253 | |
a5a4f02d | 254 | &:hover { |
8b59f5ea | 255 | color: inherit; |
8a52619a | 256 | |
a5a4f02d MW |
257 | .articleListImage > img { |
258 | opacity: 1; | |
259 | } | |
8a52619a | 260 | |
a5a4f02d MW |
261 | .articleListTitle { |
262 | color: $wcfContentLinkActive; | |
263 | } | |
264 | } | |
265 | } | |
8a52619a | 266 | |
a5a4f02d MW |
267 | .articleListImage > img { |
268 | border-radius: 2px; | |
8a52619a TD |
269 | opacity: 0.85; |
270 | transition: 0.2s ease opacity; | |
a5a4f02d | 271 | } |
8a52619a | 272 | |
a4fc5bab MW |
273 | > li:not(:first-child) { |
274 | margin-top: 30px; | |
a5a4f02d | 275 | } |
8a52619a | 276 | |
2dbac9ad MW |
277 | @include screen-xs { |
278 | .box128 > .articleListImage { | |
279 | margin-right: 10px; | |
280 | } | |
8a52619a | 281 | |
2dbac9ad MW |
282 | .articleListImage > img { |
283 | height: 64px !important; | |
284 | width: 64px !important; | |
285 | } | |
286 | } | |
287 | } | |
288 | ||
289 | .boxesFooterBoxes { | |
290 | .articleList { | |
291 | display: flex; | |
292 | flex-wrap: wrap; | |
293 | margin: 0 -5px -20px -5px; | |
8a52619a | 294 | |
2dbac9ad MW |
295 | > li { |
296 | margin: 0 5px 20px 5px; | |
297 | } | |
8a52619a | 298 | |
2dbac9ad MW |
299 | .articleListImage > img { |
300 | height: auto !important; | |
301 | max-width: 280px; | |
302 | width: 100% !important; | |
303 | } | |
8a52619a | 304 | |
2dbac9ad MW |
305 | .articleListImage + .articleListTitle { |
306 | margin-top: 5px; | |
307 | } | |
8a52619a | 308 | |
2dbac9ad MW |
309 | .articleListMetaData { |
310 | display: none; | |
311 | } | |
312 | } | |
8a52619a | 313 | |
2dbac9ad MW |
314 | @include screen-lg { |
315 | .articleList { | |
316 | > li { | |
212264b7 AE |
317 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
318 | flex-grow: 0; | |
319 | flex-shrink: 0; | |
320 | flex-basis: calc(100% / 3 - 10px); | |
2dbac9ad MW |
321 | } |
322 | } | |
323 | ||
324 | .boxFullWidth { | |
325 | .articleList { | |
326 | > li { | |
212264b7 AE |
327 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
328 | flex-grow: 0; | |
329 | flex-shrink: 0; | |
330 | flex-basis: calc(100% / 6 - 10px); | |
2dbac9ad | 331 | } |
c5dd767e | 332 | } |
2dbac9ad MW |
333 | } |
334 | } | |
8a52619a | 335 | |
2dbac9ad MW |
336 | @include screen-sm-up { |
337 | .articleList { | |
338 | > li { | |
212264b7 AE |
339 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
340 | flex-grow: 0; | |
341 | flex-shrink: 0; | |
342 | flex-basis: calc(100% / 3 - 10px); | |
2dbac9ad MW |
343 | } |
344 | } | |
345 | } | |
8a52619a | 346 | |
2dbac9ad MW |
347 | @include screen-xs { |
348 | .articleList { | |
349 | justify-content: center; | |
8a52619a | 350 | |
2dbac9ad MW |
351 | > li { |
352 | width: 280px; | |
353 | } | |
354 | } | |
355 | } | |
a4fc5bab | 356 | } |