Statistics
| Branch: | Tag: | Revision:

root / cloudcms / static / cloudcms / less / styles.less @ 9df24f38

History | View | Annotate | Download (13.5 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
    .clearfix();
576
    color: lighten(@gray, 20%);
577
    .transit();
578

    
579
    a { .transit() }
580

    
581
    &:hover {
582
        color: @gray !important;
583
        a {
584
            color: @gray !important;
585
        }
586
    }
587

    
588
    a {
589
        color: lighten(@gray, 20%);    
590
        text-decoration: none;
591

    
592
        &:hover {
593
            color: #000 !important;
594
        }
595
    }
596

    
597
    li {
598
        margin-bottom: @gridGutterWidth/2;
599

    
600
        &.header {
601
            margin-bottom: @gridGutterWidth;    
602
        }
603
    }
604

    
605
    .col {
606
        .makeColumn(4);
607
        &:last-child, &.last {
608
            width: 140px;
609
            margin-right:0;
610
        }
611
    }
612
    
613
    .top.row, .last.row {
614
        .makeRow();
615
        margin: 20px 0;
616

    
617
        .col {
618
            .makeColumn(4);    
619

    
620
            &.first {
621
                margin-left: 0 !important;    
622
            }
623
            &.last {
624
                .makeColumn(2);    
625
            }
626
        }
627
    }
628
    .top.row {
629
        margin-top: 0;
630
    }
631
    
632
    .last.row { 
633
        text-align: left; 
634
        font-size: 0.8em;
635
        margin-bottom: 0;
636
    }
637

    
638
    .bottom.row {
639
        .col {
640
            .makeColumn(2);    
641
            &:last-child, &.last {
642
                width: 140px;
643
                margin-right:0;
644
            }
645
        }
646
    }
647
}
648

    
649

    
650
/*pagination*/
651
.pagination {
652
    a.page {
653
        display: inline !important;
654

    
655
    }    
656
}
657

    
658
/*blog styles*/
659
.blog-entries {
660

    
661
}
662

    
663
.blog-entry {
664

    
665
    .section();
666
    .clearfix();
667
    margin-bottom: 2*@gridGutterWidth;    
668

    
669
    .title {
670
        margin-bottom: 1em;    
671
        font-size: 1.1em;
672
        line-height: 1.4em;
673
    }    
674

    
675
    .media {
676
        img {
677
            border: 1px solid @gray;    
678
        }    
679
    }
680
    
681
    .intro-content, .content {
682
        margin-top: @gridGutterWidth;
683

    
684
        object {
685
            margin: @gridGutterWidth 0;    
686
        }
687
    }
688

    
689
    .entry-info {
690
        font-size: 0.7em;
691
        margin-top: @gridGutterWidth;    
692
    }
693

    
694
    &.single {
695
        .entry-info {
696
            margin-top: 0;
697
            margin-bottom: @gridGutterWidth;
698
        }    
699
    }
700
}
701

    
702
.section.twitter-feed {
703
    
704
    .tweet {
705
        &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }
706
        line-height: 1.3em;
707
        font-size: 0.9em;
708
        margin-bottom: @gridGutterWidth;
709
        color: @gray;
710

    
711
        .date {
712
            display: block;
713
            font-size: 0.7em;
714
            a {
715
                text-decoration: none !important;
716
                border: none;
717
            }
718
        }
719
    }
720
}
721

    
722
.pagination .page {
723
    margin-left: 0;    
724
}
725

    
726

    
727
.entry-list {
728
    
729
    .since {
730
        font-size: 0.8em;    
731
    }
732

    
733
    .title {
734
        margin-bottom: 1em;    
735
    }
736

    
737
    .content, .text {
738
        margin-bottom: 2em;
739
        font-size: 0.8em;
740
    }
741
}
742

    
743

    
744
.initial_hidden {
745
    display: none;    
746
}
747

    
748
/*resources styles*/
749

    
750
@resCol: #FAAF40;
751
.resources {
752
    
753
    .categories {
754
        ul { .clearfix() }
755
        ul li { float: left; }
756
        .title {
757
            margin-bottom: @gridGutterWidth/2;    
758
        }
759

    
760
        ul li a {
761
            text-decoration: none;
762
            color: @resCol;
763
            margin-right: @gridGutterWidth;
764
        }
765
    }
766

    
767
    .list {
768
        
769
        margin-top: 4*@gridGutterWidth;
770

    
771
        .resource {
772
            .border-box();
773
            width: 33%;
774
            padding: 2*@gridGutterWidth;
775
            float: left;
776
            border: 1px solid @resCol;
777
            height: 12*@gridGutterWidth;
778

    
779
            .description {
780
                display: none;    
781
            }
782
        }    
783
    }
784
    
785
}
786

    
787
 
788
/* recaptcha */
789
#recaptcha_widget_div {
790
    margin-top: 10px;
791
    margin-left: -4px;
792

    
793
    #recaptcha_instructions_image {
794
        font-size: 0.8em;
795
        margin-bottom: 10px;
796
        display: block !important;
797
    }
798
}
799

    
800
.checkbox-widget.checked {
801
    background-color: #f00;
802
    background-image: url("../images/checkbox.png");
803
    background-position: 50% 50%;
804
}
805

    
806
.checkbox-widget {
807
    border: 1px solid @gray;
808
    width: 25px;
809
    height: 25px;
810
    display: block;
811
    float: left;
812
    cursor: pointer;
813
    margin-top: @gridGutterWidth/2 - 2;
814
}
815

    
816

    
817