Statistics
| Branch: | Tag: | Revision:

root / cloudcms / static / cloudcms / less / styles.less @ 1c8df218

History | View | Annotate | Download (13.8 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
@verticalSpacing: @gridGutterWidth/1.5;
20
@gradCol: #ddd;
21
body {
22
    #font.main();
23
    font-size: 12px;
24
}
25

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

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

    
48
        float: right;    
49
    }
50
}
51

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

    
58
    &:hover {
59
        color: @linkColor;
60
    }
61

    
62
    &.noborder {
63
        border: none;   
64
    }
65

    
66
    em {
67
        color: @blue;    
68
    }
69
}
70

    
71
a.simple {
72
    border: none;
73

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

    
80
a img {
81
    border-bottom: none;
82
}
83

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

    
90
.hidden {
91
    display: none !important;
92
}
93

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

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

    
106
.topbar {
107
}
108

    
109

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

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

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

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

    
147
.mainnav.quicknav {
148
    position: absolute;
149
    right: 0;
150
    top: -2.6*@verticalSpacing;
151
    margin:0;
152

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

    
159
.navigation {
160
    height: 83px;    
161
    position: absolute;
162
    right: -15px;
163
    top: -23px;
164
}
165

    
166
.mainnav {
167
    font-size: 1.3em;
168
    
169
    &.subnav {
170
        margin-bottom: -@verticalSpacing;
171
        li {
172
            margin-top: 0.4*@verticalSpacing;
173
            float: right;
174
        }
175
    }
176

    
177
    li {
178
        margin-top: 2*@verticalSpacing;
179
    }
180

    
181
    li.active {
182
        a {
183
            /*border-bottom: 1px solid @linkColor;*/
184
            border-bottom: none;
185
            color: @linkColor;
186
        }
187
    }
188
    a {
189
        color: @black;
190
        text-decoration: none;
191

    
192
        &:hover {
193
            border-bottom: 1px solid @linkColor;
194
        }
195

    
196
        &.active, &:active {
197
            border-bottom: 1px solid @linkColor;
198
            color: @linkColor;
199
        }
200
    }
201
}
202

    
203
.bottom-section {
204
    .clearfix();
205

    
206
    .section {
207
        img {
208
            width: 200px;    
209
        }
210
    }
211
}
212

    
213
.top-section {
214
    .clearfix();
215
}
216

    
217
div.page {
218
    .makeRow();
219
    margin-top: 5*@verticalSpacing;
220
    font-size: 1.1em;
221
    .page-inner {
222
        position: relative;    
223
    }
224
}
225

    
226
// columnlayout
227
.maincol {
228
    position: relative;
229
    .makeColumn(5);
230
    
231
    &.wide {
232
        .makeColumn(6);    
233
    }
234

    
235
    &.full {
236
        .makeRow();
237
        margin-left: 0;
238
        .makeColumn(10);
239
    }
240

    
241
    .nextlink {
242
         margin-top: 60px;
243
         text-align: right;
244
         float: right;
245
         margin-right: 50px;
246
         font-size: 1.1em;
247
    }   
248

    
249
    .content-bottom { position: relative; .clearfix(); }
250
}
251

    
252
.backlink {
253
    margin: 30px 0;    
254
}
255

    
256
.appbar {
257
    height: 30px;
258
    background-color: @blue;
259
}
260

    
261
.rightcol {
262
    .offset(6.5);
263
    .columns(4);
264

    
265
    &.narrow {
266
        .offset(7.5);
267
        .columns(3);    
268
    }
269
    input[type=text], input[type=password] {
270
        width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5;    
271
    }
272
}
273

    
274
/* generic form styles */
275
input, textarea, .form-widget {
276
    background-color: @white;
277
    color: @gray;
278
    border-color: @black;
279
}
280

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

    
296
            label {
297
                z-index: 300;    
298
            }
299
        }
300
    }
301
}
302

    
303
.altcol {
304
    background-color: @altColor !important;
305

    
306
    &:hover {
307
        background-color: @linkColor !important;
308
    }
309
}
310

    
311
.section {
312
    
313
    em {
314
        color: @blue;
315
    }
316

    
317
    &.positioned {
318
        margin-bottom: 0;
319
        .content {
320
            .makeColumn(4);
321
        }
322

    
323
        img {
324
        }
325

    
326
        &.withimg {
327
            .img {
328
                .makeColumn(4);
329
            }
330

    
331
            img {
332
                float: left;    
333
            }
334
        }
335
        
336
        h3 {
337
            font-size: 1.2em;
338
            margin-bottom: @verticalSpacing;    
339
        }
340

    
341
        .text {
342
            color: @black;    
343
        }
344
    }
345

    
346
    margin-bottom: 3*@verticalSpacing; 
347

    
348
    .left, .right {
349
        width: 50%;
350
        float: left;
351
    }
352

    
353
    &.imagelist {
354
        margin-top: 2em;
355
        .clearfix();
356
        img {
357
            float: left;    
358
            margin-right: 4em;
359
            vertical-align: middle;
360
        }    
361
    }
362
}
363

    
364
input[readonly=true] {
365
    background-color: #ddd;
366
    color: darken(#ddd, 50%);
367
}
368

    
369
form.withlabels {
370
    label {
371
        width: 3*@gridColumnWidth + 2*@gridGutterWidth;
372
        display: block;
373
        float: left;
374
        padding-top: 1em;
375
    }
376

    
377
    input[type=text], input[type=password], textarea {
378
        width: 3*@gridColumnWidth + 2*@gridGutterWidth;
379

    
380
        &.long {
381
            width: 3*@gridColumnWidth + 2*@gridGutterWidth;
382
        }
383
    }
384
}
385

    
386

    
387
.login-section {
388
    a.button {
389
        margin-bottom: 0.2*@gridColumnWidth;    
390
        
391
        &:last-child {
392
            margin-bottom: none;    
393
        }
394

    
395
        &.withicon {
396
            background-repeat: no-repeat;
397
            background-position: 15px 50%;
398
            padding-left: 40px;
399
        }
400
    }    
401

    
402
    &.loggedin {
403
        padding-bottom: 0 !important;
404
        background-image: none !important;
405
    }
406
}
407

    
408

    
409
@errorColor: lighten(@red, 30%);
410
// forms
411
form {
412
    
413
    &.login {
414
        margin-bottom: 1.5*@verticalSpacing; 
415
    }
416

    
417
    h2 {
418
        color: @black;
419
        margin-bottom: @verticalSpacing;
420
        font-size: 1.1em;
421

    
422
        span {
423
            padding-bottom: 3px;
424
        }
425
    }
426

    
427
    .form-row {
428
        min-height: 2*@verticalSpacing;
429
        position: relative;
430
        &.submit {
431
            margin-top: 1.5*@verticalSpacing;
432
        }
433

    
434
        .extra-link {
435
            color: @gray;
436
            text-decoration: none;
437
            border: none;
438
            font-size: 0.8em;
439
            margin-top: 1.3em;
440
            float: right;
441
        }
442

    
443
        label {
444
            font-size: 1.1em;    
445
        }
446
    }
447
    
448
    &.innerlabels label { 
449
        position: absolute;
450
        top: 1.1em;
451
        left: 1.5em;
452
        color: #aaa;
453
    }
454

    
455
    &.innerlabels p {
456
        position: relative;    
457
    }
458

    
459
    textarea, input.text, input[type="text"], input[type="password"] {
460
        #forms.input();
461
    }
462

    
463
    input.submit, input[type="submit"] {
464
        .button();
465
    }
466

    
467
    
468
    textarea {
469
        height: 200px;
470
        width: 350px !important;
471
    }
472
    .with-errors {
473
        input, textarea, select {
474
            color: @red;
475
        }
476
        label {
477
            color: @errorColor;
478
        }
479
    }
480
}
481

    
482
.form-error {
483
    background-color: @red;
484
    color: #fff;
485
    font-size: 0.8em;
486
    padding: 5px 5px;
487
}
488

    
489
.form-errors.all {
490
    .form-error {
491
        position: relative;
492
        border-radius: 0;
493
        margin-bottom: 1.3em;
494
        padding: 0.5em;
495
    }
496
}
497

    
498
div.form-stacked {
499
    margin-bottom: 4em;
500
}
501
// content types
502

    
503
.rightcol .section {
504
    background-image: url("../images/dashed_border.png");
505
    background-repeat: repeat-x;
506
    background-position: left bottom;
507
    padding-bottom: 2*@verticalSpacing;
508
    margin-bottom: 2*@verticalSpacing;
509

    
510
}
511

    
512
.section {
513
    h2 {
514
        font-size: 1.1em;
515
        line-height: 1.3em;
516
        margin-bottom: 1.5*@verticalSpacing;    
517

    
518
        a {
519
            color: #4085A6;
520
            border: none;
521
            line-height: 1.3em;
522
        }
523
    }
524

    
525
    h3 {
526
        font-size: 1.1em;    
527
        line-height: 1.3em;
528
        margin-bottom: 1.5*@verticalSpacing;    
529
    }
530

    
531
    p {
532
        line-height: 1.7em;    
533
    }
534

    
535
    .section-img {
536
        margin-bottom: 1*@verticalSpacing;    
537
    }
538
}
539

    
540

    
541
// page messages
542
.messages {
543
    .makeColumn(10);
544

    
545
    margin: 2em 0;
546
    background-color: #ddd;
547
    margin-left: 0;
548
    font-size: 1.1em;
549
    li {
550
        padding: 1em;    
551

    
552
        &.success { background-color: @green; color: @white }
553
        &.error { background-color: @red; color: @white }
554
        &.warning { background-color: @yellow; color: @black }
555
    }
556

    
557
}
558

    
559
// accounts specific styles
560
.service-desc {
561
    margin-top: 4em;    
562

    
563
}
564

    
565

    
566
// invitations table
567
table {
568

    
569
    td.consumed {
570
        color: @red;
571
    }
572

    
573
    tr.consumed {
574
        td.consumed {
575
            color: @green;    
576
        }
577
    }
578
}
579

    
580

    
581
.row { .makeRow() }
582

    
583
// footer
584
.footer {
585
    .clearfix();
586
    color: lighten(@gray, 20%);
587
    .transit();
588

    
589
    a { .transit() }
590

    
591
    &:hover {
592
        color: @gray !important;
593
        a {
594
            color: @gray !important;
595
        }
596
    }
597

    
598
    a {
599
        color: lighten(@gray, 20%);    
600
        text-decoration: none;
601

    
602
        &:hover {
603
            color: #000 !important;
604
        }
605
    }
606

    
607
    li {
608
        margin-bottom: @verticalSpacing/2;
609

    
610
        &.header {
611
            margin-bottom: @verticalSpacing;    
612
        }
613
    }
614

    
615
    .col {
616
        .makeColumn(4);
617
        &:last-child, &.last {
618
            width: 140px;
619
            margin-right:0;
620
        }
621
    }
622
    
623
    .top.row, .last.row {
624
        .makeRow();
625
        margin: 20px 0;
626

    
627
        .col {
628
            .makeColumn(4);    
629

    
630
            &.first {
631
                margin-left: 0 !important;    
632
            }
633
            &.last {
634
                .makeColumn(2);    
635
            }
636
        }
637
    }
638
    .top.row {
639
        margin-top: 0;
640
    }
641
    
642
    .last.row { 
643
        text-align: left; 
644
        font-size: 0.8em;
645
        margin-bottom: 0;
646
    }
647

    
648
    .bottom.row {
649
        .col {
650
            .makeColumn(2);    
651
            &:last-child, &.last {
652
                width: 140px;
653
                margin-right:0;
654
            }
655
        }
656
    }
657
}
658

    
659

    
660
/*pagination*/
661
.pagination {
662
    a.page {
663
        display: inline !important;
664

    
665
    }    
666
}
667

    
668
/*blog styles*/
669
.blog-entries {
670

    
671
}
672

    
673
.blog-entry {
674

    
675
    .section();
676
    .clearfix();
677
    margin-bottom: 2*@verticalSpacing;    
678

    
679
    .title {
680
        margin-bottom: 1em;    
681
        font-size: 1.1em;
682
        line-height: 1.4em;
683
    }    
684

    
685
    .media {
686
        img {
687
            border: 1px solid @gray;    
688
        }    
689
    }
690
    
691
    .intro-content, .content {
692
        margin-top: @verticalSpacing;
693

    
694
        object {
695
            margin: @verticalSpacing 0;    
696
        }
697
    }
698

    
699
    .entry-info {
700
        font-size: 0.7em;
701
        margin-top: @verticalSpacing;    
702
    }
703

    
704
    &.single {
705
        .entry-info {
706
            margin-top: 0;
707
            margin-bottom: @verticalSpacing;
708
        }    
709
    }
710
}
711

    
712
.section.twitter-feed {
713
    
714
    font-size: 1.1em;
715
    .tweet {
716
        &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }
717
        line-height: 1.3em;
718
        font-size: 0.9em;
719
        margin-bottom: @verticalSpacing;
720
        color: @gray;
721

    
722
        .date {
723
            display: block;
724
            font-size: 0.7em;
725
            a {
726
                text-decoration: none !important;
727
                border: none;
728
            }
729
        }
730
    }
731
}
732

    
733
.pagination .page {
734
    margin-left: 0;    
735
}
736

    
737

    
738
.entry-list {
739
    
740
    .since {
741
        font-size: 0.8em;    
742
    }
743

    
744
    .title {
745
        margin-bottom: 1em;    
746
    }
747

    
748
    .content, .text {
749
        margin-bottom: 2em;
750
        font-size: 0.8em;
751
    }
752
}
753

    
754

    
755
.initial_hidden {
756
    display: none;    
757
}
758

    
759
/*resources styles*/
760

    
761
@resCol: #FAAF40;
762
.resources {
763
    
764
    .categories {
765
        ul { .clearfix() }
766
        ul li { float: left; }
767
        .title {
768
            margin-bottom: @verticalSpacing/2;    
769
        }
770

    
771
        ul li a {
772
            text-decoration: none;
773
            color: @resCol;
774
            margin-right: @gridGutterWidth;
775
        }
776
    }
777

    
778
    .list {
779
        
780
        margin-top: 4*@verticalSpacing;
781

    
782
        .resource {
783
            .border-box();
784
            width: 33%;
785
            padding: 2*@verticalSpacing;
786
            float: left;
787
            border: 1px solid @resCol;
788
            height: 12*@verticalSpacing;
789

    
790
            .description {
791
                display: none;    
792
            }
793
        }    
794
    }
795
    
796
}
797

    
798
 
799
/* recaptcha */
800
#recaptcha_widget_div {
801
    margin-top: 10px;
802
    margin-left: -4px;
803

    
804
    #recaptcha_instructions_image {
805
        font-size: 0.8em;
806
        margin-bottom: 10px;
807
        display: block !important;
808
    }
809
}
810

    
811
.checkbox-widget.checked {
812
    background-color: #f00;
813
    background-image: url("../images/checkbox.png");
814
    background-position: 50% 50%;
815
}
816

    
817
.checkbox-widget {
818
    border: 1px solid @gray;
819
    width: 25px;
820
    height: 25px;
821
    display: block;
822
    float: left;
823
    cursor: pointer;
824
    margin-top: @verticalSpacing/2 - 2;
825
}
826

    
827

    
828