Statistics
| Branch: | Tag: | Revision:

root / cloudcms / static / cloudcms / less / styles.less @ 913e2640

History | View | Annotate | Download (13 kB)

1
@import "../less/bootstrap.less";
2
@import "../less/django_forms.less";
3
@import "../less/tables.less";
4
@import "../less/xtra.less";
5
@import "../less/colorbox.less";
6

    
7

    
8
// mixins
9

    
10
.border-box {
11
    -moz-box-sizing: border-box;
12
    -webkit-box-sizing: border-box;
13
    box-sizing: border-box;
14
    *behavior: url(boxsizing.htc);
15
}
16

    
17
.clearme { .clearfix() }
18

    
19
@gradCol: #ddd;
20
body {
21
    #font.main();
22
}
23

    
24
.topbar {
25
    background-color: @shadowColor;
26
    .head {
27
        float: left;    
28
            padding: @gridGutterWidth/2-5;
29
    }
30
    .links {
31
        .clearfix();
32
        a {
33
            color: @black;
34
            text-decoration: none;
35
            display: block;
36
            float: left;
37
            margin-left: 10px;
38
            padding: @gridGutterWidth/2+1;
39

    
40
            &:hover {
41
                background-color: lighten(@black, 10%);
42
                color: @white;
43
            }
44
        }
45

    
46
        float: right;    
47
    }
48
}
49

    
50
// default link styles
51
section a, p a, form a, .section a, .styledlinks a, a.styled {
52
    color: @black;
53
    text-decoration: none;
54
    border-bottom: 1px solid @linkColor;
55

    
56
    &:hover {
57
        color: @linkColor;
58
    }
59

    
60
    &.noborder {
61
        border: none;   
62
    }
63

    
64
    em {
65
        color: @blue;    
66
    }
67
}
68

    
69
a.simple {
70
    border: none;
71

    
72
}
73
a.action {
74
    color: @linkColor;
75
    border-bottom: none;
76
}
77

    
78
a img {
79
    border-bottom: none;
80
}
81

    
82
// body borders
83
.content-border {
84
    border-right: 1px solid @mainBorderColor;
85
    border-left: 1px solid @mainBorderColor;
86
}
87

    
88
.hidden {
89
    display: none !important;
90
}
91

    
92
// container sizing
93
.container, .topbar, .footer {
94
    .fixed-container();
95
    .content-border();
96
    padding: 0 @siteWhiteSpace;
97
}
98

    
99
.container {
100
    padding-bottom: @siteWhiteSpace;
101
    background-color: @white;
102
}
103

    
104
.topbar {
105
}
106

    
107

    
108
div.header {
109
    position: relative;
110
    margin-top: 4*@gridGutterWidth;
111
    margin-bottom: @gridGutterWidth;
112
    h1 {
113
        color: @shadowColor;
114
        display: inline;
115
        font-size: 2.3em;
116
        border-bottom: 1px solid @shadowColor;
117
        padding-bottom: 3px;
118
    }
119
}
120
.mainlogo {
121
    height: 36px;
122

    
123
    h1 { height: 36px }
124
    img {
125
        margin-left: -10px;
126
    }
127
}
128

    
129
.footer {
130
    border-bottom: 1px solid @mainBorderColor;
131
    border-top: 1px solid lighten(@mainBorderColor, 15%);
132
    padding-top: @gridGutterWidth;
133
    padding-bottom: @gridGutterWidth;
134
}
135

    
136
ul.inline {
137
    .clearfix();
138
    li {
139
        display: block;    
140
        float: left;
141
        margin-right: 1em;
142
    }
143
}
144

    
145
.mainnav.quicknav {
146
    position: absolute;
147
    right: 0;
148
    top: -2.6*@gridGutterWidth;
149
    margin:0;
150

    
151
    li {
152
        margin-right:0;
153
        margin-left: 1em;
154
    }
155
}
156

    
157
.navigation {
158
    height: 83px;    
159
}
160

    
161
.mainnav {
162
    font-size: 1.2em;
163
    
164
    &.subnav {
165
        margin-bottom: -@gridGutterWidth;
166
        li {
167
            margin-top: 1.2em;
168
        }
169
    }
170

    
171
    li {
172
        margin-top: 3*@gridGutterWidth;
173
    }
174

    
175
    li.active {
176
        a {
177
            /*border-bottom: 1px solid @linkColor;*/
178
            border-bottom: none;
179
            color: @linkColor;
180
        }
181
    }
182
    a {
183
        color: @black;
184
        text-decoration: none;
185

    
186
        &:hover {
187
            border-bottom: 1px solid @linkColor;
188
        }
189

    
190
        &.active, &:active {
191
            border-bottom: 1px solid @linkColor;
192
            color: @linkColor;
193
        }
194
    }
195
}
196

    
197
.bottom-section {
198
    .clearfix();
199

    
200
    .section {
201
        img {
202
            width: 200px;    
203
        }
204
    }
205
}
206

    
207
.top-section {
208
    .clearfix();
209
}
210

    
211
div.page {
212
    .makeRow();
213
    margin-top: 6*@gridGutterWidth;
214
    font-size: 1.1em;
215
    .page-inner {
216
        position: relative;    
217
    }
218
}
219

    
220
// columnlayout
221
.maincol {
222
    position: relative;
223
    .makeColumn(5);
224
    
225
    &.wide {
226
        .makeColumn(6);    
227
    }
228

    
229
    &.full {
230
        .makeRow();
231
        margin-left: 0;
232
        .makeColumn(10);
233
    }
234

    
235
    .nextlink {
236
         margin-top: 60px;
237
         text-align: right;
238
         float: right;
239
         margin-right: 50px;
240
         font-size: 1.1em;
241
    }   
242

    
243
    .content-bottom { position: relative; .clearfix(); }
244
}
245

    
246
.backlink {
247
    margin: 30px 0;    
248
}
249

    
250
.appbar {
251
    height: 30px;
252
    background-color: @blue;
253
}
254

    
255
.rightcol {
256
    .offset(6.5);
257
    .columns(4);
258

    
259
    &.narrow {
260
        .offset(7.5);
261
        .columns(3);    
262
    }
263
    input[type=text], input[type=password] {
264
        width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5;    
265
    }
266
}
267

    
268
/* generic form styles */
269
input, textarea, .form-widget {
270
    background-color: @white;
271
    color: @gray;
272
    border-color: @black;
273
}
274

    
275
#forms {
276
    .input, input {
277
        #font.main();
278
        border: 1px solid @gray;
279
        height:21px;
280
        display: inline-block;
281
        margin-bottom: -1px;
282
        padding: 0.8em;
283
        padding-left: 1.5em;
284
        z-index: 2;
285
        &:focus {
286
            position: relative;
287
            border: 1px solid #000;
288
            z-index: 100;
289

    
290
            label {
291
                z-index: 300;    
292
            }
293
        }
294
    }
295
}
296

    
297
.altcol {
298
    background-color: @altColor !important;
299

    
300
    &:hover {
301
        background-color: @linkColor !important;
302
    }
303
}
304

    
305
.section {
306
    
307
    em {
308
        color: @blue;
309
    }
310

    
311
    &.positioned {
312
        margin-bottom: 0;
313
        .content {
314
            .makeColumn(4);
315
        }
316

    
317
        img {
318
        }
319

    
320
        &.withimg {
321
            .img {
322
                .makeColumn(4);
323
            }
324

    
325
            img {
326
                float: left;    
327
            }
328
        }
329
        
330
        h3 {
331
            font-size: 1.2em;
332
            margin-bottom: @gridGutterWidth;    
333
        }
334

    
335
        .text {
336
            color: @black;    
337
        }
338
    }
339

    
340
    margin-bottom: 3*@gridGutterWidth; 
341

    
342
    .left, .right {
343
        width: 50%;
344
        float: left;
345
    }
346

    
347
    &.imagelist {
348
        margin-top: 2em;
349
        .clearfix();
350
        img {
351
            float: left;    
352
            margin-right: 4em;
353
            vertical-align: middle;
354
        }    
355
    }
356
}
357

    
358
input[readonly=true] {
359
    background-color: #ddd;
360
    color: darken(#ddd, 50%);
361
}
362

    
363
form.withlabels {
364
    label {
365
        width: 3*@gridColumnWidth + 2*@gridGutterWidth;
366
        display: block;
367
        float: left;
368
        padding-top: 1em;
369
    }
370

    
371
    input[type=text], input[type=password], textarea {
372
        width: 3*@gridColumnWidth + 2*@gridGutterWidth;
373

    
374
        &.long {
375
            width: 3*@gridColumnWidth + 2*@gridGutterWidth;
376
        }
377
    }
378
}
379

    
380

    
381
.login-section {
382
    a.button {
383
        margin-bottom: 0.2*@gridColumnWidth;    
384
        
385
        &:last-child {
386
            margin-bottom: none;    
387
        }
388

    
389
        &.withicon {
390
            background-repeat: no-repeat;
391
            background-position: 15px 50%;
392
            padding-left: 40px;
393
        }
394
    }    
395

    
396
    &.loggedin {
397
        padding-bottom: 0 !important;
398
        background-image: none !important;
399
    }
400
}
401

    
402

    
403
@errorColor: lighten(@red, 30%);
404
// forms
405
form {
406
    
407
    &.login {
408
        margin-bottom: 1.5*@gridGutterWidth; 
409
    }
410

    
411
    h2 {
412
        color: @black;
413
        margin-bottom: @gridGutterWidth;
414
        font-size: 1.1em;
415

    
416
        span {
417
            padding-bottom: 3px;
418
        }
419
    }
420

    
421
    .form-row {
422
        min-height: 2*@gridGutterWidth;
423
        position: relative;
424
        &.submit {
425
            margin-top: 1.5*@gridGutterWidth;
426
        }
427

    
428
        .extra-link {
429
            color: @gray;
430
            text-decoration: none;
431
            border: none;
432
            font-size: 0.8em;
433
            margin-top: 1.3em;
434
            float: right;
435
        }
436
    }
437
    
438
    &.innerlabels label { 
439
        position: absolute;
440
        top:1em;
441
        left:1.5em;
442
        color: #aaa;
443
    }
444

    
445
    &.innerlabels p {
446
        position: relative;    
447
    }
448

    
449
    textarea, input.text, input[type="text"], input[type="password"] {
450
        #forms.input();
451
    }
452

    
453
    input.submit, input[type="submit"] {
454
        .button();
455
    }
456

    
457
    
458
    textarea {
459
        height: 200px;
460
        width: 350px !important;
461
    }
462
    .with-errors {
463
        input, textarea, select {
464
            color: @red;
465
        }
466
        label {
467
            color: @errorColor;
468
        }
469
    }
470
}
471

    
472
.form-error {
473
    background-color: @red;
474
    color: #fff;
475
    font-size: 0.8em;
476
    padding: 5px 5px;
477
}
478

    
479
.form-errors.all {
480
    .form-error {
481
        position: relative;
482
        border-radius: 0;
483
        margin-bottom: 1.3em;
484
        padding: 0.5em;
485
    }
486
}
487

    
488
div.form-stacked {
489
    margin-bottom: 4em;
490
}
491
// content types
492

    
493
.rightcol .section {
494
    background-image: url("../images/dashed_border.png");
495
    background-repeat: repeat-x;
496
    background-position: left bottom;
497
    padding-bottom: 2*@gridGutterWidth;
498
    margin-bottom: 2*@gridGutterWidth;
499

    
500
}
501

    
502
.section {
503
    h2 {
504
        font-size: 1.1em;
505
        line-height: 1.3em;
506
        margin-bottom: 1.5*@gridGutterWidth;    
507

    
508
        a {
509
            color: #4085A6;
510
            border: none;
511
            line-height: 1.3em;
512
        }
513
    }
514

    
515
    h3 {
516
        font-size: 1.1em;    
517
        line-height: 1.3em;
518
        margin-bottom: 1.5*@gridGutterWidth;    
519
    }
520

    
521
    p {
522
        line-height: 1.7em;    
523
    }
524

    
525
    .section-img {
526
        margin-bottom: 1*@gridGutterWidth;    
527
    }
528
}
529

    
530

    
531
// page messages
532
.messages {
533
    .makeColumn(10);
534

    
535
    margin: 2em 0;
536
    background-color: #ddd;
537
    margin-left: 0;
538

    
539
    li {
540
        padding: 1em;    
541

    
542
        &.success { background-color: @green; color: @white }
543
        &.error { background-color: @red; color: @white }
544
        &.warning { background-color: @yellow; color: @black }
545
    }
546

    
547
}
548

    
549
// accounts specific styles
550
.service-desc {
551
    margin-top: 4em;    
552

    
553
}
554

    
555

    
556
// invitations table
557
table {
558

    
559
    td.consumed {
560
        color: @red;
561
    }
562

    
563
    tr.consumed {
564
        td.consumed {
565
            color: @green;    
566
        }
567
    }
568
}
569

    
570

    
571
.row { .makeRow() }
572

    
573
// footer
574
.footer {
575
    .makeRow()
576
    
577
    &:hover {
578
        a {
579
            color: @gray !important;
580
            .transit();
581
        }
582
    }
583

    
584
    a {
585
        color: lighten(@gray, 20%);    
586
        .transit();
587
        text-decoration: none;
588

    
589
        &:hover {
590
            color: darken(@gray, 50%);    
591
        }
592
    }
593

    
594
    li {
595
        margin-bottom: @gridGutterWidth/2;
596

    
597
        &.header {
598
            margin-bottom: @gridGutterWidth;    
599
        }
600
    }
601

    
602
    .col {
603
        .makeColumn(4);
604
        &:last-child, &.last {
605
            width: 140px;
606
            margin-right:0;
607
        }
608
    }
609

    
610
    .bottom.row {
611
        .col {
612
            .makeColumn(2);    
613
            &:last-child, &.last {
614
                width: 140px;
615
                margin-right:0;
616
            }
617
        }
618
    }
619
}
620

    
621

    
622
/*pagination*/
623
.pagination {
624
    a.page {
625
        display: inline !important;
626

    
627
    }    
628
}
629

    
630
/*blog styles*/
631
.blog-entries {
632

    
633
}
634

    
635
.blog-entry {
636

    
637
    .section();
638
    .clearfix();
639
    margin-bottom: 2*@gridGutterWidth;    
640

    
641
    .title {
642
        margin-bottom: 1em;    
643
        font-size: 1.1em;
644
        line-height: 1.4em;
645
    }    
646

    
647
    .media {
648
        img {
649
            border: 1px solid @gray;    
650
        }    
651
    }
652
    
653
    .intro-content, .content {
654
        margin-top: @gridGutterWidth;
655

    
656
        object {
657
            margin: @gridGutterWidth 0;    
658
        }
659
    }
660

    
661
    .entry-info {
662
        font-size: 0.7em;
663
        margin-top: @gridGutterWidth;    
664
    }
665

    
666
    &.single {
667
        .entry-info {
668
            margin-top: 0;
669
            margin-bottom: @gridGutterWidth;
670
        }    
671
    }
672
}
673

    
674
.section.twitter-feed {
675
    
676
    .tweet {
677
        &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }
678
        line-height: 1.3em;
679
        font-size: 0.9em;
680
        margin-bottom: @gridGutterWidth;
681
        color: @gray;
682

    
683
        .date {
684
            display: block;
685
            font-size: 0.7em;
686
            a {
687
                text-decoration: none !important;
688
                border: none;
689
            }
690
        }
691
    }
692
}
693

    
694
.pagination .page {
695
    margin-left: 0;    
696
}
697

    
698

    
699
.entry-list {
700
    
701
    .since {
702
        font-size: 0.8em;    
703
    }
704

    
705
    .title {
706
        margin-bottom: 1em;    
707
    }
708

    
709
    .content, .text {
710
        margin-bottom: 2em;
711
        font-size: 0.8em;
712
    }
713
}
714

    
715

    
716
.initial_hidden {
717
    display: none;    
718
}
719

    
720
/*resources styles*/
721

    
722
@resCol: #FAAF40;
723
.resources {
724
    
725
    .categories {
726
        ul { .clearfix() }
727
        ul li { float: left; }
728
        .title {
729
            margin-bottom: @gridGutterWidth/2;    
730
        }
731

    
732
        ul li a {
733
            text-decoration: none;
734
            color: @resCol;
735
            margin-right: @gridGutterWidth;
736
        }
737
    }
738

    
739
    .list {
740
        
741
        margin-top: 4*@gridGutterWidth;
742

    
743
        .resource {
744
            .border-box();
745
            width: 33%;
746
            padding: 2*@gridGutterWidth;
747
            float: left;
748
            border: 1px solid @resCol;
749
            height: 12*@gridGutterWidth;
750

    
751
            .description {
752
                display: none;    
753
            }
754
        }    
755
    }
756
    
757
}
758

    
759
 
760
/* recaptcha */
761
#recaptcha_widget_div {
762
    margin-top: 10px;
763
    margin-left: -4px;
764

    
765
    #recaptcha_instructions_image {
766
        font-size: 0.8em;
767
        margin-bottom: 10px;
768
        display: block !important;
769
    }
770
}
771

    
772
.checkbox-widget.checked {
773
    background-color: #f00;
774
    background-image: url("../images/checkbox.png");
775
    background-position: 50% 50%;
776
}
777

    
778
.checkbox-widget {
779
    border: 1px solid @gray;
780
    width: 25px;
781
    height: 25px;
782
    display: block;
783
    float: left;
784
    cursor: pointer;
785
    margin-top: @gridGutterWidth/2 - 2;
786
}
787

    
788

    
789