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