root / cloudcms / static / cloudcms / less / styles.less @ c1468bcc
History | View | Annotate | Download (9.5 kB)
1 |
@import "../less/bootstrap.less"; |
---|---|
2 |
@import "../less/django_forms.less"; |
3 |
@import "../less/tables.less"; |
4 |
@import "../less/cloudbox.less"; |
5 |
|
6 |
|
7 |
@gradCol: #ddd; |
8 |
body { |
9 |
#font.main(); |
10 |
} |
11 |
|
12 |
.topbar { |
13 |
background-color: @shadowColor; |
14 |
.head { |
15 |
float: left; |
16 |
padding: @gridGutterWidth/2-5; |
17 |
} |
18 |
.links { |
19 |
.clearfix(); |
20 |
a { |
21 |
color: @black; |
22 |
text-decoration: none; |
23 |
display: block; |
24 |
float: left; |
25 |
margin-left: 10px; |
26 |
padding: @gridGutterWidth/2+1; |
27 |
|
28 |
&:hover { |
29 |
background-color: lighten(@black, 10%); |
30 |
color: @white; |
31 |
} |
32 |
} |
33 |
|
34 |
float: right; |
35 |
} |
36 |
} |
37 |
|
38 |
// default link styles |
39 |
section a, p a, form a, .section a { |
40 |
color: @black; |
41 |
text-decoration: none; |
42 |
border-bottom: 1px solid @linkColor; |
43 |
|
44 |
&:hover { |
45 |
color: @linkColor; |
46 |
} |
47 |
|
48 |
&.noborder { |
49 |
border: none; |
50 |
} |
51 |
|
52 |
em { |
53 |
color: @blue; |
54 |
} |
55 |
} |
56 |
|
57 |
a.simple { |
58 |
border: none; |
59 |
|
60 |
} |
61 |
a.action { |
62 |
color: @linkColor; |
63 |
border-bottom: none; |
64 |
} |
65 |
|
66 |
a img { |
67 |
border-bottom: none; |
68 |
} |
69 |
|
70 |
// body borders |
71 |
.content-border { |
72 |
border-right: 1px solid @mainBorderColor; |
73 |
border-left: 1px solid @mainBorderColor; |
74 |
} |
75 |
|
76 |
.hidden { |
77 |
display: none !important; |
78 |
} |
79 |
|
80 |
// container sizing |
81 |
.container, .topbar, .footer { |
82 |
.fixed-container(); |
83 |
.content-border(); |
84 |
padding: 0 @siteWhiteSpace; |
85 |
} |
86 |
|
87 |
.container { |
88 |
padding-bottom: @siteWhiteSpace; |
89 |
background-color: @white; |
90 |
} |
91 |
|
92 |
.topbar { |
93 |
} |
94 |
|
95 |
|
96 |
div.header { |
97 |
position: relative; |
98 |
margin-top: 4*@gridGutterWidth; |
99 |
margin-bottom: @gridGutterWidth; |
100 |
h1 { |
101 |
color: @shadowColor; |
102 |
display: inline; |
103 |
font-size: 2.3em; |
104 |
border-bottom: 1px solid @shadowColor; |
105 |
padding-bottom: 3px; |
106 |
} |
107 |
} |
108 |
.mainlogo { |
109 |
img { |
110 |
margin-left: -10px; |
111 |
} |
112 |
} |
113 |
|
114 |
.footer { |
115 |
border-bottom: 1px solid @mainBorderColor; |
116 |
border-top: 1px solid lighten(@mainBorderColor, 15%); |
117 |
padding-top: @gridGutterWidth; |
118 |
padding-bottom: @gridGutterWidth; |
119 |
} |
120 |
|
121 |
ul.inline { |
122 |
.clearfix(); |
123 |
li { |
124 |
display: block; |
125 |
float: left; |
126 |
margin-right: 1em; |
127 |
} |
128 |
} |
129 |
|
130 |
.mainnav.quicknav { |
131 |
position: absolute; |
132 |
right: 0; |
133 |
top: -2.6*@gridGutterWidth; |
134 |
margin:0; |
135 |
|
136 |
li { |
137 |
margin-right:0; |
138 |
margin-left: 1em; |
139 |
} |
140 |
} |
141 |
|
142 |
|
143 |
.mainnav { |
144 |
font-size: 1.2em; |
145 |
|
146 |
&.subnav { |
147 |
margin-bottom: -@gridGutterWidth; |
148 |
li { |
149 |
margin-top: 1.2em; |
150 |
} |
151 |
} |
152 |
|
153 |
li { |
154 |
margin-top: 3*@gridGutterWidth; |
155 |
} |
156 |
|
157 |
li.active { |
158 |
a { |
159 |
/*border-bottom: 1px solid @linkColor;*/ |
160 |
border-bottom: none; |
161 |
color: @linkColor; |
162 |
} |
163 |
} |
164 |
a { |
165 |
color: @black; |
166 |
text-decoration: none; |
167 |
|
168 |
&:hover { |
169 |
border-bottom: 1px solid @linkColor; |
170 |
} |
171 |
|
172 |
&.active, &:active { |
173 |
border-bottom: 1px solid @linkColor; |
174 |
color: @linkColor; |
175 |
} |
176 |
} |
177 |
} |
178 |
|
179 |
.page { |
180 |
.makeRow(); |
181 |
margin-top: 6*@gridGutterWidth; |
182 |
font-size: 1.1em; |
183 |
.page-inner { |
184 |
position: relative; |
185 |
} |
186 |
} |
187 |
|
188 |
// columnlayout |
189 |
.maincol { |
190 |
.makeColumn(5); |
191 |
|
192 |
&.wide { |
193 |
.makeColumn(6); |
194 |
} |
195 |
|
196 |
&.full { |
197 |
.makeRow(); |
198 |
margin-left: 0; |
199 |
.makeColumn(10); |
200 |
} |
201 |
} |
202 |
|
203 |
.appbar { |
204 |
height: 30px; |
205 |
background-color: @blue; |
206 |
} |
207 |
|
208 |
.rightcol { |
209 |
.offset(6.5); |
210 |
.columns(4); |
211 |
|
212 |
&.narrow { |
213 |
.offset(7.5); |
214 |
.columns(3); |
215 |
} |
216 |
input[type=text], input[type=password] { |
217 |
width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5; |
218 |
} |
219 |
} |
220 |
|
221 |
/* generic form styles */ |
222 |
input, textarea { |
223 |
background-color: @white; |
224 |
color: @gray; |
225 |
border-color: @black; |
226 |
} |
227 |
|
228 |
#forms { |
229 |
.input, input { |
230 |
#font.main(); |
231 |
border: 1px solid @gray; |
232 |
margin-bottom: -1px; |
233 |
padding: 0.8em; |
234 |
padding-left: 1.5em; |
235 |
z-index: 2; |
236 |
&:focus { |
237 |
position: relative; |
238 |
border: 1px solid #000; |
239 |
z-index: 100; |
240 |
|
241 |
label { |
242 |
z-index: 300; |
243 |
} |
244 |
} |
245 |
} |
246 |
} |
247 |
|
248 |
.altcol { |
249 |
background-color: @altColor !important; |
250 |
|
251 |
&:hover { |
252 |
background-color: @linkColor !important; |
253 |
} |
254 |
} |
255 |
|
256 |
.section { |
257 |
|
258 |
&.positioned { |
259 |
margin-bottom: 0; |
260 |
.content { |
261 |
.makeColumn(4); |
262 |
} |
263 |
|
264 |
img { |
265 |
} |
266 |
|
267 |
&.withimg { |
268 |
.img { |
269 |
.makeColumn(4); |
270 |
} |
271 |
|
272 |
img { |
273 |
float: left; |
274 |
} |
275 |
} |
276 |
|
277 |
h3 { |
278 |
font-size: 1.2em; |
279 |
margin-bottom: @gridGutterWidth; |
280 |
} |
281 |
|
282 |
.text { |
283 |
color: @black; |
284 |
} |
285 |
} |
286 |
|
287 |
margin-bottom: 3*@gridGutterWidth; |
288 |
|
289 |
.left, .right { |
290 |
width: 50%; |
291 |
float: left; |
292 |
} |
293 |
|
294 |
&.imagelist { |
295 |
margin-top: 2em; |
296 |
.clearfix(); |
297 |
img { |
298 |
float: left; |
299 |
margin-right: 4em; |
300 |
vertical-align: middle; |
301 |
} |
302 |
} |
303 |
} |
304 |
|
305 |
input[readonly=true] { |
306 |
background-color: #ddd; |
307 |
color: darken(#ddd, 50%); |
308 |
} |
309 |
|
310 |
form.withlabels { |
311 |
label { |
312 |
width: 3*@gridColumnWidth + 2*@gridGutterWidth; |
313 |
display: block; |
314 |
float: left; |
315 |
padding-top: 1em; |
316 |
} |
317 |
|
318 |
input[type=text], input[type=password], textarea { |
319 |
width: 3*@gridColumnWidth + 2*@gridGutterWidth; |
320 |
|
321 |
&.long { |
322 |
width: 3*@gridColumnWidth + 2*@gridGutterWidth; |
323 |
} |
324 |
} |
325 |
} |
326 |
|
327 |
@errorColor: lighten(@red, 30%); |
328 |
// forms |
329 |
form { |
330 |
|
331 |
&.login { |
332 |
margin-bottom: 3em; |
333 |
} |
334 |
|
335 |
h2 { |
336 |
color: @black; |
337 |
margin-bottom: @gridGutterWidth; |
338 |
font-size: 1.1em; |
339 |
|
340 |
span { |
341 |
padding-bottom: 3px; |
342 |
} |
343 |
} |
344 |
|
345 |
.form-row { |
346 |
position: relative; |
347 |
&.submit { |
348 |
margin-top: @gridGutterWidth; |
349 |
} |
350 |
|
351 |
.extra-link { |
352 |
color: @gray; |
353 |
text-decoration: none; |
354 |
border: none; |
355 |
font-size: 0.8em; |
356 |
margin-top: 1.3em; |
357 |
float: right; |
358 |
} |
359 |
} |
360 |
|
361 |
&.innerlabels label { |
362 |
position: absolute; |
363 |
top:1em; |
364 |
left:1.5em; |
365 |
color: #aaa; |
366 |
} |
367 |
|
368 |
&.innerlabels p { |
369 |
position: relative; |
370 |
} |
371 |
|
372 |
textarea, input.text, input[type="text"], input[type="password"] { |
373 |
#forms.input(); |
374 |
} |
375 |
|
376 |
input.submit, input[type="submit"] { |
377 |
.button(); |
378 |
} |
379 |
|
380 |
|
381 |
.with-errors { |
382 |
input, textarea, select { |
383 |
color: @red; |
384 |
} |
385 |
label { |
386 |
color: @errorColor; |
387 |
} |
388 |
} |
389 |
} |
390 |
|
391 |
.form-error { |
392 |
background-color: @red; |
393 |
color: #fff; |
394 |
font-size: 0.8em; |
395 |
padding: 5px 5px; |
396 |
} |
397 |
|
398 |
.form-errors.all { |
399 |
.form-error { |
400 |
position: relative; |
401 |
border-radius: 0; |
402 |
margin-bottom: 1.3em; |
403 |
padding: 0.5em; |
404 |
} |
405 |
} |
406 |
|
407 |
div.form-stacked { |
408 |
margin-bottom: 4em; |
409 |
} |
410 |
// content types |
411 |
.section { |
412 |
h2 { |
413 |
font-size: 1.1em; |
414 |
margin-bottom: 1.5*@gridGutterWidth; |
415 |
|
416 |
a { |
417 |
color: #4085A6; |
418 |
border: none; |
419 |
line-height: 1.3em; |
420 |
} |
421 |
} |
422 |
|
423 |
p { |
424 |
line-height: 1.7em; |
425 |
} |
426 |
} |
427 |
|
428 |
|
429 |
// page messages |
430 |
.messages { |
431 |
.makeColumn(10); |
432 |
|
433 |
margin-bottom: 2em; |
434 |
background-color: #ddd; |
435 |
|
436 |
li { |
437 |
padding: 1em; |
438 |
|
439 |
&.success { background-color: @green; color: @white } |
440 |
&.error { background-color: @red; color: @white } |
441 |
&.warning { background-color: @yellow; color: @black } |
442 |
} |
443 |
|
444 |
} |
445 |
|
446 |
// accounts specific styles |
447 |
.service-desc { |
448 |
margin-top: 4em; |
449 |
|
450 |
} |
451 |
|
452 |
|
453 |
// invitations table |
454 |
table { |
455 |
|
456 |
td.consumed { |
457 |
color: @red; |
458 |
} |
459 |
|
460 |
tr.consumed { |
461 |
td.consumed { |
462 |
color: @green; |
463 |
} |
464 |
} |
465 |
} |
466 |
|
467 |
|
468 |
.row { .makeRow() } |
469 |
|
470 |
// footer |
471 |
.footer { |
472 |
.makeRow() |
473 |
|
474 |
&:hover { |
475 |
a { |
476 |
color: @gray !important; |
477 |
.transit(); |
478 |
} |
479 |
} |
480 |
|
481 |
a { |
482 |
color: lighten(@gray, 20%); |
483 |
.transit(); |
484 |
text-decoration: none; |
485 |
|
486 |
&:hover { |
487 |
color: darken(@gray, 50%); |
488 |
} |
489 |
} |
490 |
|
491 |
li { |
492 |
margin-bottom: @gridGutterWidth/2; |
493 |
|
494 |
&.header { |
495 |
margin-bottom: @gridGutterWidth; |
496 |
} |
497 |
} |
498 |
|
499 |
.col { |
500 |
.makeColumn(4); |
501 |
&:last-child, &.last { |
502 |
width: 140px; |
503 |
margin-right:0; |
504 |
} |
505 |
} |
506 |
|
507 |
.bottom.row { |
508 |
.col { |
509 |
.makeColumn(2); |
510 |
&:last-child, &.last { |
511 |
width: 140px; |
512 |
margin-right:0; |
513 |
} |
514 |
} |
515 |
} |
516 |
} |
517 |
|
518 |
|
519 |
/*pagination*/ |
520 |
|
521 |
|
522 |
/*blog styles*/ |
523 |
.blog-entries { |
524 |
|
525 |
} |
526 |
|
527 |
.blog-entry { |
528 |
|
529 |
.section(); |
530 |
.clearfix(); |
531 |
margin-bottom: 2*@gridGutterWidth; |
532 |
|
533 |
.title { |
534 |
margin-bottom: 1em; |
535 |
font-size: 1.1em; |
536 |
line-height: 1.4em; |
537 |
} |
538 |
|
539 |
.media { |
540 |
img { |
541 |
border: 1px solid @gray; |
542 |
} |
543 |
} |
544 |
|
545 |
.intro-content, .content { |
546 |
margin-top: @gridGutterWidth; |
547 |
|
548 |
object { |
549 |
margin: @gridGutterWidth 0; |
550 |
} |
551 |
} |
552 |
|
553 |
.entry-info { |
554 |
font-size: 0.7em; |
555 |
margin-top: @gridGutterWidth; |
556 |
} |
557 |
|
558 |
&.single { |
559 |
.entry-info { |
560 |
margin-top: 0; |
561 |
margin-bottom: @gridGutterWidth; |
562 |
} |
563 |
} |
564 |
} |
565 |
|
566 |
.section.twitter-feed { |
567 |
|
568 |
.tweet { |
569 |
line-height: 1.3em; |
570 |
font-size: 0.9em; |
571 |
margin-bottom: @gridGutterWidth; |
572 |
color: @gray; |
573 |
|
574 |
.date { |
575 |
display: block; |
576 |
font-size: 0.7em; |
577 |
a { |
578 |
text-decoration: none !important; |
579 |
border: none; |
580 |
} |
581 |
} |
582 |
} |
583 |
} |
584 |
|
585 |
.pagination .page { |
586 |
margin-left: 0; |
587 |
} |