Commit | Line | Data |
---|---|---|
ecbd8a0b | 1 | /* ### globals ### */ |
28283ef7 MW |
2 | html, body { |
3 | font-size: @wcfBaseFontSize; | |
4 | } | |
5 | ||
ecbd8a0b MW |
6 | body { |
7 | background-color: @wcfPageBackgroundColor; | |
6ecda558 | 8 | color: @wcfColor; |
ecbd8a0b | 9 | font-family: @wcfBaseFontFamily; |
ecbd8a0b | 10 | line-height: @wcfBaseLineHeight; |
971f00fa | 11 | word-wrap: break-word; |
ecbd8a0b MW |
12 | } |
13 | ||
14 | small { | |
15 | font-size: @wcfSmallFontSize; | |
16 | } | |
17 | ||
18 | img { | |
19 | vertical-align: middle; | |
20 | ||
21 | &.disabled { | |
22 | opacity: .3; | |
23 | } | |
24 | } | |
25 | ||
26 | a { | |
6ecda558 | 27 | color: @wcfLinkColor; |
ecbd8a0b MW |
28 | cursor: pointer; |
29 | text-decoration: none; | |
30 | ||
31 | &:hover { | |
6ecda558 | 32 | color: @wcfLinkHoverColor; |
ecbd8a0b MW |
33 | text-decoration: underline; |
34 | } | |
fe5d23f0 | 35 | |
19e5d9ff | 36 | &.externalURL::after { |
556973c1 MW |
37 | content: "\f08e"; |
38 | display: inline-block; | |
8aa4241c MW |
39 | font-family: FontAwesome !important; |
40 | font-size: 14px !important; | |
41 | font-weight: normal !important; | |
42 | font-style: normal !important; | |
556973c1 MW |
43 | margin-left: 4px; |
44 | vertical-align: -1px; | |
fe5d23f0 | 45 | } |
ecbd8a0b MW |
46 | } |
47 | ||
556973c1 | 48 | .footerContent, .logo { |
6ecda558 | 49 | color: @wcfPageColor; |
d1aa2e82 MW |
50 | |
51 | a { | |
6ecda558 | 52 | color: @wcfPageLinkColor; |
d1aa2e82 MW |
53 | |
54 | &:hover { | |
6ecda558 | 55 | color: @wcfPageLinkHoverColor; |
d1aa2e82 MW |
56 | } |
57 | } | |
58 | } | |
59 | ||
fab6647e MW |
60 | .nativeList { |
61 | margin: 1em 0; | |
62 | margin-left: 40px; | |
63 | ||
64 | ul, | |
65 | ol { | |
66 | margin-bottom: 0; | |
67 | margin-top: 0; | |
68 | } | |
7e263553 MW |
69 | |
70 | li { | |
71 | margin: @wcfGapSmall 0; | |
72 | } | |
fab6647e MW |
73 | } |
74 | ||
75 | ul.nativeList { | |
76 | list-style-type: disc; | |
77 | } | |
78 | ol.nativeList { | |
79 | list-style-type: decimal; | |
80 | } | |
81 | ||
5fedcfe6 MW |
82 | .htmlContent { |
83 | p { | |
84 | margin: 1em 0; | |
85 | } | |
86 | ||
87 | h1 { | |
88 | font-size: @wcfSubHeadlineFontSize; | |
89 | } | |
90 | ||
91 | h2 { | |
92 | font-size: @wcfTitleFontSize; | |
93 | } | |
e3369fd2 | 94 | |
5fedcfe6 MW |
95 | h1, h2, h3, h4, h5, h6 { |
96 | font-weight: bold; | |
97 | margin: 0.5em 0; | |
98 | } | |
fab6647e MW |
99 | |
100 | ul, ol { | |
101 | .nativeList; | |
102 | } | |
103 | ||
104 | ul { | |
105 | list-style-type: disc; | |
106 | } | |
107 | ||
108 | ol { | |
109 | list-style-type: decimal; | |
110 | } | |
5fedcfe6 MW |
111 | } |
112 | ||
8998cd00 MW |
113 | /* hide broken reCaptcha iframe */ |
114 | body > iframe[src="about:blank"] { | |
115 | display:none; | |
116 | } | |
117 | ||
90a67f4f MW |
118 | ::selection { |
119 | text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important; | |
120 | color: #300; | |
121 | background-color: rgba(255, 170, 34, .7); | |
122 | } | |
123 | ||
ecbd8a0b MW |
124 | .invisible { |
125 | display: none; | |
126 | } | |
127 | ||
05697028 MW |
128 | .marginTopLarge { |
129 | margin-top: @wcfGapLarge; | |
130 | } | |
131 | ||
132 | .marginTop, | |
133 | .marginMedium { | |
ecbd8a0b MW |
134 | margin-top: @wcfGapMedium; |
135 | } | |
136 | ||
05697028 MW |
137 | .marginTopSmall { |
138 | margin-top: @wcfGapSmall; | |
139 | } | |
140 | ||
141 | .marginTopTiny { | |
142 | margin-top: @wcfGapTiny; | |
143 | } | |
144 | ||
145 | .center { | |
146 | text-align: center; | |
147 | } | |
148 | ||
83736ee3 AE |
149 | .pointer { |
150 | cursor: pointer; | |
151 | } | |
152 | ||
47f582f3 MW |
153 | .dimmed { |
154 | color: @wcfDimmedColor; | |
155 | } | |
156 | ||
ecbd8a0b | 157 | .iconFlag { |
c6bfa746 MW |
158 | background-color: @wcfContentBackgroundColor; |
159 | border: 1px solid @wcfContainerBorderColor; | |
160 | padding: 1px; | |
161 | ||
ecbd8a0b MW |
162 | height: 15px; |
163 | width: 24px; | |
164 | } | |
165 | ||
166 | .framed { | |
1f69f015 | 167 | > canvas, |
c8bb8a18 MM |
168 | > img, |
169 | > .icon { | |
ecbd8a0b MW |
170 | background-color: @wcfContentBackgroundColor; |
171 | border: 1px solid @wcfContainerBorderColor; | |
172 | padding: 1px; | |
173 | } | |
174 | } | |
175 | ||
79e7fbed MW |
176 | .highlight { |
177 | background-color: @wcfHighlightBackgroundColor; | |
178 | } | |
179 | ||
4a76de68 MW |
180 | .grayscale { |
181 | filter: url(../images/grayscale-filter.svg#grayscale); | |
182 | filter: gray; | |
183 | -webkit-filter: grayscale(1); | |
184 | } | |
185 | ||
18005b5f MW |
186 | /* fixes fieldset overflow issues */ |
187 | /* webkit */ | |
188 | fieldset { | |
189 | min-width: 0; | |
190 | } | |
191 | /* firefox */ | |
192 | @-moz-document url-prefix() { | |
193 | fieldset { | |
194 | display: table-column; | |
195 | } | |
196 | } | |
197 | ||
ecbd8a0b MW |
198 | /* balloon tooltips */ |
199 | .balloonTooltip { | |
200 | background-color: @wcfTooltipBackgroundColor; | |
8ce85e3a | 201 | border-radius: 6px; |
ecbd8a0b | 202 | color: @wcfTooltipColor; |
28283ef7 | 203 | font-size: @wcfSmallFontSize; |
ecbd8a0b MW |
204 | max-width: 300px; |
205 | padding: 5px 10px 7px; | |
206 | position: absolute; | |
207 | z-index: 800; | |
208 | ||
ecbd8a0b MW |
209 | .pointer { |
210 | border-color: @wcfTooltipBackgroundColor transparent; | |
211 | border-style: solid; | |
212 | border-width: 0 5px 5px; | |
213 | left: 50%; | |
214 | position: absolute; | |
215 | top: -5px; | |
216 | } | |
c8ee6af8 | 217 | |
218 | .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px); | |
219 | ||
220 | &.inverse { | |
c8ee6af8 | 221 | .pointer { |
222 | border-width: 5px 5px 0; | |
223 | } | |
224 | } | |
ecbd8a0b MW |
225 | } |
226 | ||
227 | /* popover */ | |
228 | .popover { | |
229 | background-color: rgba(0, 0, 0, .4); | |
8ce85e3a | 230 | border-radius: 6px; |
ecbd8a0b MW |
231 | padding: @wcfGapSmall; |
232 | position: absolute; | |
233 | vertical-align: middle; | |
031fafe4 | 234 | width: 400px !important; |
93a2ac11 | 235 | z-index: 500; |
ecbd8a0b | 236 | |
ecbd8a0b MW |
237 | .boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px); |
238 | ||
556973c1 MW |
239 | > .icon-spinner { |
240 | color: white; | |
241 | left: 50%; | |
242 | margin-left: -21px; | |
243 | margin-top: -21px; | |
244 | position: absolute; | |
245 | top: 50%; | |
246 | ||
247 | .textShadow(black); | |
248 | } | |
249 | ||
1cd5d6f3 MW |
250 | > .popoverContent { |
251 | background-color: @wcfContainerBackgroundColor; | |
8ce85e3a | 252 | border-radius: 6px; |
1cd5d6f3 MW |
253 | color: @wcfColor; |
254 | max-height: 300px; | |
255 | min-height: 32px; | |
256 | opacity: 0; | |
257 | overflow: hidden; | |
258 | padding: @wcfGapSmall @wcfGapMedium; | |
1cd5d6f3 MW |
259 | } |
260 | ||
19e5d9ff | 261 | &::after { |
ecbd8a0b MW |
262 | border: 10px solid transparent; |
263 | content: ""; | |
264 | display: inline-block; | |
265 | position: absolute; | |
266 | z-index: 100; | |
267 | } | |
268 | ||
19e5d9ff | 269 | &.top::after { |
ecbd8a0b | 270 | border-bottom-width: 0; |
a85aced3 | 271 | border-top-color: rgba(0, 0, 0, .3); |
ecbd8a0b MW |
272 | bottom: -10px; |
273 | } | |
274 | ||
19e5d9ff | 275 | &.bottom::after { |
a85aced3 | 276 | border-bottom-color: rgba(0, 0, 0, .3); |
ecbd8a0b MW |
277 | border-top-width: 0; |
278 | top: -10px; | |
279 | } | |
280 | ||
19e5d9ff | 281 | &.right::after { |
ecbd8a0b MW |
282 | left: 10px; |
283 | } | |
284 | ||
19e5d9ff | 285 | &.left::after { |
ecbd8a0b MW |
286 | right: 10px; |
287 | } | |
288 | } | |
289 | ||
ecbd8a0b MW |
290 | |
291 | /* ### badges ### */ | |
ecbd8a0b MW |
292 | /* default values */ |
293 | .badge { | |
90a67f4f | 294 | background-color: @wcfColor; |
8ce85e3a | 295 | border-radius: 9px; |
90a67f4f | 296 | color: @wcfContentBackgroundColor; |
ecbd8a0b | 297 | display: inline-block; |
28283ef7 | 298 | font-size: @wcfSmallFontSize; |
5e92fd88 MW |
299 | font-weight: bold; |
300 | padding: 1px 6px 1px; | |
ecbd8a0b | 301 | position: relative; |
47f582f3 | 302 | text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */ |
5e92fd88 | 303 | vertical-align: middle; |
ecbd8a0b | 304 | white-space: nowrap; |
18005b5f | 305 | word-wrap: normal; |
ecbd8a0b | 306 | |
5e92fd88 | 307 | &.label { |
8ce85e3a | 308 | border-radius: 4px; |
5e92fd88 MW |
309 | font-weight: normal; |
310 | } | |
311 | ||
ecbd8a0b MW |
312 | /* colors */ |
313 | &.badgeUpdate { | |
314 | background-color: @wcfTabularBoxBackgroundColor; | |
315 | color: @wcfTabularBoxColor; | |
127e384a MW |
316 | } |
317 | ||
318 | &.badgeInverse { | |
319 | background-color: @wcfTabularBoxColor; | |
320 | color: @wcfTabularBoxBackgroundColor; | |
ecbd8a0b MW |
321 | } |
322 | ||
127e384a MW |
323 | /* default label colors */ |
324 | &.green { | |
ac4bf269 MW |
325 | background-color: rgba(0, 153, 0, 1); |
326 | color: rgba(238, 255, 238, 1); | |
ecbd8a0b MW |
327 | } |
328 | ||
127e384a | 329 | &.red { |
ac4bf269 MW |
330 | background-color: rgba(204, 0, 0, 1); |
331 | color: rgba(255, 238, 238, 1); | |
ecbd8a0b MW |
332 | } |
333 | ||
127e384a MW |
334 | &.black { |
335 | background-color: #333; | |
336 | color: #fff; | |
ecbd8a0b | 337 | } |
3692a9d4 | 338 | |
127e384a MW |
339 | &.brown { |
340 | background-color: #c63; | |
3692a9d4 | 341 | color: #fff; |
127e384a MW |
342 | } |
343 | ||
344 | &.orange { | |
345 | background-color: #f90; | |
346 | color: #fff; | |
127e384a MW |
347 | } |
348 | ||
349 | &.yellow { | |
350 | background-color: #ff0; | |
351 | color: #333; | |
127e384a MW |
352 | } |
353 | ||
354 | &.blue { | |
60eef1d8 | 355 | background-color: #369; |
127e384a | 356 | color: #fff; |
3692a9d4 AE |
357 | } |
358 | ||
127e384a MW |
359 | &.purple { |
360 | background-color: #c0f; | |
361 | color: #fff; | |
127e384a | 362 | } |
3692a9d4 | 363 | |
127e384a MW |
364 | &.pink { |
365 | background-color: #f0c; | |
366 | color: #fff; | |
127e384a | 367 | } |
ecbd8a0b MW |
368 | } |
369 | ||
370 | a.badge:hover { | |
371 | color: @wcfContentBackgroundColor; | |
47630990 MW |
372 | text-decoration: none; |
373 | ||
127e384a MW |
374 | &.black { |
375 | background-color: #000; | |
376 | } | |
377 | ||
378 | &.brown { | |
379 | background-color: #930; | |
380 | } | |
381 | ||
382 | &.red { | |
383 | background-color: #900; | |
384 | } | |
385 | ||
386 | &.orange { | |
387 | background-color: #f60; | |
388 | } | |
389 | ||
390 | &.yellow { | |
391 | background-color: #cc0; | |
392 | } | |
393 | ||
394 | &.green { | |
0cceb4dd | 395 | background-color: #060; |
127e384a MW |
396 | } |
397 | ||
398 | &.blue { | |
0cceb4dd | 399 | background-color: #036; |
127e384a MW |
400 | } |
401 | ||
402 | &.purple { | |
403 | background-color: #90c; | |
404 | } | |
405 | ||
406 | &.pink { | |
407 | background-color: #c09; | |
3692a9d4 | 408 | } |
ecbd8a0b | 409 | } |
594da0bc | 410 | |
9899046c AE |
411 | /* the CSS below can be detected through JavaScript and works better than matchMedia-API (not supported by IE9) */ |
412 | @media only screen and (max-width: 800px) { | |
413 | html { | |
414 | caption-side: bottom; | |
415 | } | |
416 | ||
417 | body { | |
418 | caption-side: top; | |
419 | } | |
420 | } | |
421 | ||
bc7d7c8d | 422 | @media only screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 2) { |
c924988d | 423 | // Preserve HTML font-size when iPhone orientation changes from portrait to landscape |
594da0bc MW |
424 | html { |
425 | -webkit-text-size-adjust: 100%; | |
426 | } | |
c924988d MW |
427 | |
428 | // Fixes zoom when iPhone orientation changes from portrait to landscape | |
429 | html, | |
430 | body { | |
431 | width: 100%; | |
432 | overflow: hidden; | |
433 | } | |
594da0bc | 434 | } |