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; |
6e3b9657 TD |
24 | box-shadow: |
25 | 0 0 3px rgba(0, 0, 0, 0.12), | |
26 | 0 1px 2px rgba(0, 0, 0, 0.24); | |
a5a4f02d | 27 | display: flex; |
2dbac9ad | 28 | max-height: 300px; |
a5a4f02d | 29 | overflow: hidden; |
e519a593 | 30 | width: 100%; |
8a52619a | 31 | |
a5a4f02d | 32 | img { |
6a4d8742 MW |
33 | height: auto !important; |
34 | width: 100% !important; | |
a5a4f02d MW |
35 | } |
36 | } | |
8a52619a | 37 | |
a5a4f02d | 38 | figcaption { |
1a75e228 | 39 | color: var(--wcfContentDimmedText); |
1948841e | 40 | flex: 1 0 100%; |
a5a4f02d MW |
41 | margin-top: 5px; |
42 | text-align: center; | |
8a52619a | 43 | |
a5a4f02d MW |
44 | @include wcfFontSmall; |
45 | } | |
46 | } | |
47 | ||
48 | .articleContent { | |
e1134b07 | 49 | .articleTagList { |
a5a4f02d MW |
50 | margin-top: 20px; |
51 | } | |
8a52619a | 52 | |
8c0a41a6 MW |
53 | .articleLikeSection { |
54 | align-items: center; | |
55 | } | |
8a52619a | 56 | |
a8253ac4 | 57 | .articleButtons { |
8c0a41a6 | 58 | justify-content: flex-end; |
a5a4f02d | 59 | } |
8a52619a | 60 | |
e1134b07 | 61 | .articleLikesSummery:not(:empty), |
a8253ac4 | 62 | .articleButtons:not(:empty) { |
e1134b07 MW |
63 | margin-top: 20px; |
64 | } | |
8a52619a | 65 | |
f0fb0f30 AE |
66 | .anchorFixedHeader:target::before { |
67 | content: ""; | |
68 | display: block; | |
69 | height: 50px; | |
70 | margin-top: -50px; | |
71 | } | |
a5a4f02d MW |
72 | } |
73 | ||
74 | .articleAboutAuthor { | |
75 | .articleAboutAuthorText { | |
76 | font-style: italic; | |
77 | } | |
8a52619a | 78 | |
a5a4f02d MW |
79 | .articleAboutAuthorUsername { |
80 | margin-top: 5px; | |
8a52619a | 81 | |
a5a4f02d MW |
82 | .username { |
83 | @include wcfFontHeadline; | |
84 | } | |
8a52619a | 85 | |
a5a4f02d MW |
86 | .userTitleBadge { |
87 | top: -2px; | |
88 | } | |
89 | } | |
90 | } | |
91 | ||
92 | .articleNavigation { | |
741ec9ef AE |
93 | column-gap: 20px; |
94 | display: grid; | |
95 | grid-template-areas: "previous next"; | |
96 | grid-template-columns: 1fr 1fr; | |
97 | ||
98 | @include screen-sm-down { | |
99 | column-gap: 0; | |
100 | grid-template-areas: | |
101 | "previous" | |
102 | "next"; | |
103 | grid-template-columns: 1fr; | |
104 | row-gap: 20px; | |
a5a4f02d | 105 | } |
741ec9ef | 106 | } |
8a52619a | 107 | |
741ec9ef | 108 | .articleNavigationArticle { |
1a75e228 | 109 | color: var(--wcfContentText); |
741ec9ef AE |
110 | display: grid; |
111 | grid-template-rows: repeat(2, minmax(0, max-content)); | |
112 | position: relative; | |
113 | ||
114 | &.previousArticleButton { | |
115 | grid-area: previous; | |
f67edb77 | 116 | grid-template-areas: "icon content"; |
741ec9ef AE |
117 | grid-template-columns: 60px auto; |
118 | } | |
119 | ||
120 | &.nextArticleButton { | |
121 | grid-area: next; | |
f67edb77 | 122 | grid-template-areas: "content icon"; |
741ec9ef AE |
123 | text-align: right; |
124 | } | |
8a52619a | 125 | |
741ec9ef AE |
126 | &.articleNavigationArticleWithImage { |
127 | &.previousArticleButton { | |
128 | grid-template-areas: "icon image content"; | |
129 | grid-template-columns: 60px 96px auto; | |
a5a4f02d | 130 | } |
8a52619a | 131 | |
741ec9ef AE |
132 | &.nextArticleButton { |
133 | grid-template-areas: "content image icon"; | |
134 | grid-template-columns: auto 96px 60px; | |
135 | text-align: right; | |
a5a4f02d MW |
136 | } |
137 | } | |
741ec9ef | 138 | } |
8a52619a | 139 | |
741ec9ef | 140 | .articleNavigationArticleIcon { |
5be26bb7 | 141 | align-self: center; |
741ec9ef AE |
142 | grid-area: icon; |
143 | } | |
8a52619a | 144 | |
741ec9ef | 145 | body:not(.touch) .articleNavigationArticle:hover .articleNavigationArticleIcon { |
1a75e228 | 146 | color: var(--wcfContentLinkActive); |
741ec9ef | 147 | } |
8a52619a | 148 | |
741ec9ef AE |
149 | .articleNavigationArticleImage { |
150 | border-radius: 3px; | |
151 | grid-area: image; | |
152 | overflow: hidden; | |
153 | } | |
8a52619a | 154 | |
741ec9ef AE |
155 | .previousArticleButton.articleNavigationArticleWithImage .articleNavigationArticleContent { |
156 | margin-left: 20px; | |
157 | } | |
8a52619a | 158 | |
741ec9ef AE |
159 | .nextArticleButton.articleNavigationArticleWithImage .articleNavigationArticleContent { |
160 | margin-right: 20px; | |
161 | } | |
8a52619a | 162 | |
741ec9ef AE |
163 | .articleNavigationArticleContent { |
164 | grid-area: content; | |
165 | } | |
8a52619a | 166 | |
741ec9ef | 167 | .articleNavigationEntityName { |
1a75e228 | 168 | color: var(--wcfContentDimmedText); |
741ec9ef AE |
169 | display: block; |
170 | } | |
8a52619a | 171 | |
741ec9ef AE |
172 | .articleNavigationArticleTitle { |
173 | display: block; | |
174 | margin-top: 5px; | |
8a52619a | 175 | |
741ec9ef | 176 | @include wcfFontHeadline; |
a5a4f02d MW |
177 | } |
178 | ||
741ec9ef | 179 | .articleNavigationArticleLink { |
1a75e228 | 180 | color: var(--wcfContentText); |
8a52619a | 181 | |
741ec9ef AE |
182 | &::before { |
183 | bottom: 0; | |
184 | content: ""; | |
185 | left: 0; | |
186 | position: absolute; | |
187 | right: 0; | |
188 | top: 0; | |
f04a84b3 MW |
189 | } |
190 | } | |
191 | ||
a5a4f02d MW |
192 | .articleList { |
193 | .articleListMetaData { | |
1a75e228 | 194 | color: var(--wcfContentDimmedText); |
a5a4f02d | 195 | margin-top: 2px; |
8a52619a | 196 | |
a5a4f02d MW |
197 | .icon { |
198 | color: inherit; | |
199 | } | |
200 | } | |
8a52619a | 201 | |
a5a4f02d | 202 | a { |
8b59f5ea | 203 | color: inherit; |
8a52619a | 204 | |
a5a4f02d | 205 | &:hover { |
8b59f5ea | 206 | color: inherit; |
8a52619a | 207 | |
a5a4f02d MW |
208 | .articleListImage > img { |
209 | opacity: 1; | |
210 | } | |
8a52619a | 211 | |
a5a4f02d | 212 | .articleListTitle { |
1a75e228 | 213 | color: var(--wcfContentLinkActive); |
a5a4f02d MW |
214 | } |
215 | } | |
216 | } | |
8a52619a | 217 | |
a5a4f02d MW |
218 | .articleListImage > img { |
219 | border-radius: 2px; | |
8a52619a TD |
220 | opacity: 0.85; |
221 | transition: 0.2s ease opacity; | |
a5a4f02d | 222 | } |
8a52619a | 223 | |
a4fc5bab MW |
224 | > li:not(:first-child) { |
225 | margin-top: 30px; | |
a5a4f02d | 226 | } |
8a52619a | 227 | |
2dbac9ad MW |
228 | @include screen-xs { |
229 | .box128 > .articleListImage { | |
230 | margin-right: 10px; | |
231 | } | |
8a52619a | 232 | |
2dbac9ad MW |
233 | .articleListImage > img { |
234 | height: 64px !important; | |
235 | width: 64px !important; | |
236 | } | |
237 | } | |
238 | } | |
239 | ||
240 | .boxesFooterBoxes { | |
241 | .articleList { | |
242 | display: flex; | |
243 | flex-wrap: wrap; | |
244 | margin: 0 -5px -20px -5px; | |
8a52619a | 245 | |
2dbac9ad MW |
246 | > li { |
247 | margin: 0 5px 20px 5px; | |
248 | } | |
8a52619a | 249 | |
2dbac9ad MW |
250 | .articleListImage > img { |
251 | height: auto !important; | |
252 | max-width: 280px; | |
253 | width: 100% !important; | |
254 | } | |
8a52619a | 255 | |
2dbac9ad MW |
256 | .articleListImage + .articleListTitle { |
257 | margin-top: 5px; | |
258 | } | |
8a52619a | 259 | |
2dbac9ad MW |
260 | .articleListMetaData { |
261 | display: none; | |
262 | } | |
263 | } | |
8a52619a | 264 | |
2dbac9ad MW |
265 | @include screen-lg { |
266 | .articleList { | |
267 | > li { | |
212264b7 AE |
268 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
269 | flex-grow: 0; | |
270 | flex-shrink: 0; | |
271 | flex-basis: calc(100% / 3 - 10px); | |
2dbac9ad MW |
272 | } |
273 | } | |
274 | ||
275 | .boxFullWidth { | |
276 | .articleList { | |
277 | > li { | |
212264b7 AE |
278 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
279 | flex-grow: 0; | |
280 | flex-shrink: 0; | |
281 | flex-basis: calc(100% / 6 - 10px); | |
2dbac9ad | 282 | } |
c5dd767e | 283 | } |
2dbac9ad MW |
284 | } |
285 | } | |
8a52619a | 286 | |
2dbac9ad MW |
287 | @include screen-sm-up { |
288 | .articleList { | |
289 | > li { | |
212264b7 AE |
290 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
291 | flex-grow: 0; | |
292 | flex-shrink: 0; | |
293 | flex-basis: calc(100% / 3 - 10px); | |
2dbac9ad MW |
294 | } |
295 | } | |
296 | } | |
8a52619a | 297 | |
2dbac9ad MW |
298 | @include screen-xs { |
299 | .articleList { | |
300 | justify-content: center; | |
8a52619a | 301 | |
2dbac9ad MW |
302 | > li { |
303 | width: 280px; | |
304 | } | |
305 | } | |
306 | } | |
a4fc5bab | 307 | } |
844ffd2e MW |
308 | |
309 | .discussionProviderCtaContainer { | |
310 | align-items: center; | |
311 | display: flex; | |
312 | flex-direction: column; | |
313 | row-gap: 10px; | |
314 | } |