Commit | Line | Data |
---|---|---|
b9e122ff AE |
1 | .contentItemList { |
2 | display: flex; | |
3 | flex-wrap: wrap; | |
ecb2173f | 4 | margin: 0 0 -20px -20px; |
b9e122ff AE |
5 | } |
6 | ||
7 | .contentItem { | |
1a75e228 | 8 | background-color: var(--wcfContentBackground); |
976cfa85 | 9 | border-radius: var(--wcfBorderRadius); |
86fc5a1c | 10 | box-shadow: var(--wcfBoxShadowCard); |
b9e122ff | 11 | display: flex; |
b9e122ff | 12 | flex-direction: column; |
ecb2173f | 13 | margin: 0 0 20px 20px; |
ebd7b480 | 14 | position: relative; |
b9e122ff AE |
15 | overflow: hidden; |
16 | } | |
17 | ||
b70900a1 | 18 | .contentItemSingleColumn { |
212264b7 AE |
19 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
20 | flex-grow: 0; | |
21 | flex-shrink: 0; | |
22 | flex-basis: calc(100% - 20px); | |
b70900a1 AE |
23 | } |
24 | ||
25 | .contentItemMultiColumn { | |
212264b7 AE |
26 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
27 | flex-grow: 0; | |
28 | flex-shrink: 0; | |
29 | flex-basis: calc(50% - 20px); | |
b70900a1 AE |
30 | } |
31 | ||
b9e122ff AE |
32 | .contentItemLink { |
33 | flex: 1 auto; | |
27a18c8b AE |
34 | } |
35 | ||
55508d81 MW |
36 | .contentItemTitleLink { |
37 | color: inherit; | |
38 | ||
39 | &::before { | |
40 | bottom: 0; | |
41 | content: ""; | |
42 | left: 0; | |
43 | position: absolute; | |
44 | right: 0; | |
45 | top: 0; | |
46 | } | |
47 | ||
48 | &:hover, | |
49 | &:focus { | |
50 | color: inherit; | |
51 | } | |
52 | } | |
53 | ||
54 | /* Deprecated: use contentItemTitleLink instead. */ | |
27a18c8b AE |
55 | .contentItemLinkShadow { |
56 | bottom: 0; | |
57 | left: 0; | |
58 | position: absolute; | |
59 | right: 0; | |
60 | top: 0; | |
b9e122ff AE |
61 | } |
62 | ||
63 | .contentItemContent { | |
b70900a1 AE |
64 | padding: 10px; |
65 | } | |
66 | ||
67 | .contentItemContentTruncate { | |
b9e122ff AE |
68 | max-height: 150px; |
69 | overflow: hidden; | |
b9e122ff | 70 | position: relative; |
8a52619a | 71 | |
b9e122ff | 72 | &::after { |
4dfb95ef AE |
73 | background-image: linear-gradient( |
74 | to top, | |
75 | var(--wcfContentBackground), | |
76 | rgba(var(--wcfContentBackground-rgb) / 0) | |
77 | ); | |
b9e122ff AE |
78 | bottom: 0; |
79 | content: ""; | |
80 | height: 30px; | |
81 | left: 0; | |
82 | pointer-events: none; | |
83 | position: absolute; | |
84 | right: 0; | |
85 | /* The `top` value is important, because it prevents the last line from being affected | |
86 | when the content isn't too long. */ | |
87 | top: 120px; | |
88 | } | |
89 | } | |
90 | ||
91 | .contentItemImage { | |
92 | background-position: center; | |
93 | background-repeat: no-repeat; | |
94 | background-size: cover; | |
886f7f29 | 95 | padding: 10px; |
b9e122ff AE |
96 | position: relative; |
97 | } | |
98 | ||
b70900a1 | 99 | .contentItemImageSmall { |
886f7f29 | 100 | min-height: 75px; |
2bc265c8 AE |
101 | |
102 | .contentItemImageElement { | |
103 | height: 75px; | |
104 | } | |
b70900a1 AE |
105 | } |
106 | ||
107 | .contentItemImageLarge { | |
886f7f29 | 108 | min-height: 150px; |
2bc265c8 AE |
109 | |
110 | .contentItemImageElement { | |
111 | height: 150px; | |
112 | } | |
113 | } | |
114 | ||
115 | .contentItemImageElement { | |
08ee5b3e | 116 | margin: -10px -10px -10px -10px; |
2bc265c8 AE |
117 | object-fit: cover; |
118 | object-position: center; | |
119 | ||
120 | // The `100% + 20px` are the result of the negative margins. | |
121 | max-width: calc(100% + 20px); | |
b70900a1 AE |
122 | } |
123 | ||
ebd7b480 AE |
124 | .contentItemBadges, |
125 | .contentItemOptions { | |
b9e122ff AE |
126 | align-items: flex-start; |
127 | display: flex; | |
128 | flex-direction: column; | |
ebd7b480 AE |
129 | } |
130 | ||
2bc265c8 AE |
131 | .contentItemImageElement + .contentItemBadges { |
132 | left: 10px; | |
133 | position: absolute; | |
134 | top: 10px; | |
135 | z-index: 1; | |
136 | } | |
137 | ||
ebd7b480 | 138 | .contentItemOptions { |
886f7f29 | 139 | position: absolute; |
ebd7b480 | 140 | right: 10px; |
886f7f29 | 141 | top: 10px; |
ebd7b480 AE |
142 | z-index: 1; |
143 | } | |
144 | ||
145 | .contentItemBadge, | |
146 | .contentItemOption { | |
b9e122ff | 147 | flex: 0 auto; |
8a52619a | 148 | |
b9e122ff AE |
149 | &:not(:first-child) { |
150 | margin-top: 5px; | |
151 | } | |
152 | } | |
153 | ||
ebd7b480 AE |
154 | .contentItemBadge { |
155 | border: 1px solid currentColor; | |
156 | } | |
157 | ||
b70900a1 | 158 | .contentItemOption.button { |
6e3b9657 TD |
159 | box-shadow: |
160 | 0 0 3px rgba(0, 0, 0, 0.12), | |
161 | 0 1px 2px rgba(0, 0, 0, 0.24); | |
b70900a1 AE |
162 | } |
163 | ||
b9e122ff AE |
164 | .contentItemLabels { |
165 | margin-bottom: 5px; | |
166 | } | |
167 | ||
b70900a1 | 168 | .contentItemCategory { |
1a75e228 | 169 | color: var(--wcfContentDimmedText); |
c8a79279 | 170 | |
b70900a1 AE |
171 | @include wcfFontSmall; |
172 | } | |
173 | ||
b9e122ff | 174 | .contentItemTitle { |
1a75e228 | 175 | color: var(--wcfContentHeadlineLink); |
8a52619a | 176 | |
b9e122ff AE |
177 | @include wcfFontHeadline; |
178 | @include wcfFontBold; | |
8a52619a | 179 | |
b9e122ff | 180 | &:hover { |
1a75e228 | 181 | color: var(--wcfContentHeadlineLinkActive); |
b9e122ff AE |
182 | } |
183 | } | |
184 | ||
185 | .contentItemDescription { | |
1a75e228 | 186 | color: var(--wcfContentDimmedText); |
bbd1412e | 187 | margin-top: 5px; |
8a52619a | 188 | |
4ec53064 MW |
189 | img { |
190 | height: auto !important; | |
191 | max-width: 100%; | |
192 | } | |
b9e122ff AE |
193 | } |
194 | ||
ebd7b480 AE |
195 | .contentItemContentLinks { |
196 | padding: 0 10px 10px 10px; | |
197 | } | |
198 | ||
b9e122ff AE |
199 | .contentItemMeta { |
200 | align-items: center; | |
1a75e228 AE |
201 | border-top: 1px solid var(--wcfContentBorderInner); |
202 | color: var(--wcfContentDimmedText); | |
b9e122ff AE |
203 | display: flex; |
204 | flex: 0 auto; | |
205 | padding: 10px; | |
cd84abb9 | 206 | white-space: nowrap; |
8a52619a | 207 | |
b9e122ff AE |
208 | .icon { |
209 | color: inherit; | |
210 | } | |
211 | } | |
212 | ||
213 | .contentItemMetaImage { | |
214 | flex: 0 auto; | |
215 | margin-right: 10px; | |
216 | } | |
217 | ||
218 | .contentItemMetaContent { | |
219 | flex: 1 auto; | |
220 | font-size: 12px; | |
221 | } | |
222 | ||
223 | .contentItemMetaAuthor { | |
1a75e228 | 224 | color: var(--wcfContentText); |
8a52619a | 225 | |
b9e122ff AE |
226 | a, |
227 | a:hover { | |
228 | color: inherit; | |
229 | } | |
230 | } | |
231 | ||
232 | .contentItemMetaIcons { | |
bbd1412e | 233 | align-items: center; |
b9e122ff AE |
234 | display: flex; |
235 | flex: 0 auto; | |
236 | margin-left: 10px; | |
bbd1412e MW |
237 | |
238 | @include wcfFontSmall; | |
b9e122ff AE |
239 | } |
240 | ||
241 | .contentItemMetaIcon { | |
242 | flex: 0 auto; | |
8a52619a | 243 | |
b9e122ff AE |
244 | &:not(:first-child) { |
245 | margin-left: 10px; | |
246 | } | |
bbd1412e MW |
247 | |
248 | .topReactionShort { | |
249 | align-items: center; | |
250 | display: flex; | |
251 | } | |
252 | ||
253 | .reactionType { | |
254 | margin-right: 3px; | |
255 | } | |
b9e122ff AE |
256 | } |
257 | ||
702589e4 | 258 | .contentItemImagePreview { |
976cfa85 | 259 | border-radius: var(--wcfBorderRadius); |
6e3b9657 TD |
260 | box-shadow: |
261 | 0 0 3px rgba(0, 0, 0, 0.12), | |
262 | 0 1px 2px rgba(0, 0, 0, 0.24); | |
702589e4 AE |
263 | margin-bottom: 10px; |
264 | max-width: 100%; | |
265 | } | |
266 | ||
267 | .contentItemImagePreviewButtons { | |
268 | display: flex; | |
269 | flex-wrap: wrap; | |
270 | margin-left: -10px; | |
8a52619a | 271 | |
702589e4 AE |
272 | > .button { |
273 | flex: 0 auto; | |
274 | margin-left: 10px; | |
275 | } | |
8a52619a | 276 | |
702589e4 AE |
277 | > .innerError { |
278 | flex: 0 0 100%; | |
279 | margin-left: 10px; | |
280 | } | |
281 | } | |
282 | ||
b9e122ff AE |
283 | @include screen-lg { |
284 | /* There are no sidebars, use a three column layout. */ | |
68f87d16 MW |
285 | .content:first-child:last-child, |
286 | .boxesTop, | |
287 | .boxesBottom { | |
ecb2173f | 288 | .contentItemMultiColumn { |
212264b7 AE |
289 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
290 | flex-grow: 0; | |
291 | flex-shrink: 0; | |
292 | flex-basis: calc(100% / 3 - 20px); | |
b9e122ff AE |
293 | } |
294 | } | |
295 | } | |
296 | ||
297 | @include screen-md { | |
298 | /* The sidebar, if any, is not adjacent to the content, use a three column layout. */ | |
ecb2173f | 299 | .contentItemMultiColumn { |
212264b7 AE |
300 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
301 | flex-grow: 0; | |
302 | flex-shrink: 0; | |
303 | flex-basis: calc(100% / 3 - 20px); | |
b9e122ff AE |
304 | } |
305 | } | |
306 | ||
307 | @include screen-xs { | |
308 | /* There is not enough space to fit two columns. */ | |
309 | .contentItemList { | |
310 | display: block; | |
311 | } | |
8a52619a | 312 | |
ecb2173f | 313 | .contentItemMultiColumn { |
b9e122ff AE |
314 | max-width: none; |
315 | } | |
316 | } |