Statistics
| Branch: | Tag: | Revision:

root / cloudcms / static / cloudcms / less / styles.less @ 148c25ed

History | View | Annotate | Download (14.4 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
@import "../less/resources.less";
7

    
8

    
9
// mixins
10

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

    
18
.clearme { .clearfix() }
19

    
20
@verticalSpacing: @gridGutterWidth/1.5;
21
@gradCol: #ddd;
22
body {
23
    #font.main();
24
    font-size: 12px;
25
}
26

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

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

    
49
        float: right;    
50
    }
51
}
52

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

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

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

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

    
72
a.simple {
73
    border: none;
74

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

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

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

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

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

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

    
107
.topbar {
108
}
109

    
110

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
262
.rightcol {
263
    .makeColumn(4);
264
    margin-left: 4*@gridGutterWidth + 14;
265

    
266
    &.narrow {
267
        .makeColumn(3);
268
        margin-left: 4*@gridGutterWidth + 14;
269
    }
270

    
271
    input[type=text], input[type=password] {
272
        width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5;    
273
    }
274
}
275

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

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

    
298
            label {
299
                z-index: 300;    
300
            }
301
        }
302
    }
303
}
304

    
305
.altcol {
306
    background-color: @altColor !important;
307

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

    
313
.section {
314
    
315
    em {
316
        color: @blue;
317
    }
318

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

    
325
        img {
326
        }
327

    
328
        &.withimg {
329
            .img {
330
                .makeColumn(4);
331
            }
332

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

    
343
        .text {
344
            color: @black;    
345
        }
346
    }
347

    
348
    margin-bottom: 3*@verticalSpacing; 
349

    
350
    .left, .right {
351
        width: 50%;
352
        float: left;
353
    }
354

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

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

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

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

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

    
388

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

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

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

    
410

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

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

    
424
        span {
425
            padding-bottom: 3px;
426
        }
427
    }
428

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

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

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

    
457
    &.innerlabels p {
458
        display: table;
459
        position: relative;    
460
    }
461

    
462
    textarea, input.text, input[type="text"], input[type="password"] {
463
        #forms.input();
464
    }
465

    
466
    input.submit, input[type="submit"] {
467
        .button();
468
    }
469

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

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

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

    
501
div.form-stacked {
502
    margin-bottom: 4em;
503
}
504
// content types
505

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

    
513
}
514

    
515
.section {
516
    h2 {
517
        font-size: 1.1em;
518
        line-height: 1.3em;
519
        margin-bottom: 1.5*@verticalSpacing;    
520

    
521
        a {
522
            color: #4085A6;
523
            border: none;
524
            line-height: 1.3em;
525
        }
526
    }
527

    
528
    h3 {
529
        font-size: 1.1em;    
530
        line-height: 1.3em;
531
        margin-bottom: 1.5*@verticalSpacing;    
532
    }
533

    
534
    p {
535
        line-height: 1.7em;    
536
    }
537

    
538
    .section-img {
539
        margin-bottom: 1*@verticalSpacing;    
540
    }
541
}
542

    
543

    
544
// page messages
545
.messages {
546
    .makeColumn(10);
547

    
548
    margin: 2em 0;
549
    background-color: #ddd;
550
    margin-left: 0;
551
    font-size: 1.1em;
552
    li {
553
        padding: 1em;    
554

    
555
        &.success { background-color: @green; color: @white }
556
        &.error { background-color: @red; color: @white }
557
        &.warning { background-color: #AF6906; color: @black }
558
    }
559

    
560
    .warning {
561
        color: @white !important;   
562
        a {
563
            color: inherit;
564
            font-weight: bold;
565
        }
566
    }
567

    
568
}
569

    
570
form.innerlabels label.checkbox-label {
571
    position: relative !important; 
572
    margin-left: 10px !important;
573
    padding-top: 1em !important;
574
    top:7px !important; 
575
    left:10px;
576
    cursor: pointer;
577
}
578

    
579

    
580

    
581
// accounts specific styles
582
.service-desc {
583
    margin-top: 4em;    
584

    
585
}
586

    
587

    
588
// invitations table
589
table {
590

    
591
    td.consumed {
592
        color: @red;
593
    }
594

    
595
    tr.consumed {
596
        td.consumed {
597
            color: @green;    
598
        }
599
    }
600
}
601

    
602

    
603
.row { .makeRow() }
604

    
605
// footer
606
.footer {
607
    .clearfix();
608
    color: lighten(@gray, 20%);
609
    .transit();
610

    
611
    a { .transit() }
612

    
613
    &:hover {
614
        color: @gray !important;
615
        a {
616
            color: @gray !important;
617
        }
618
    }
619

    
620
    a {
621
        color: lighten(@gray, 20%);    
622
        text-decoration: none;
623

    
624
        &:hover {
625
            color: #000 !important;
626
        }
627
    }
628

    
629
    li {
630
        margin-bottom: @verticalSpacing/2;
631

    
632
        &.header {
633
            margin-bottom: @verticalSpacing;    
634
        }
635
    }
636

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

    
649
        .col {
650
            .makeColumn(4);    
651

    
652
            &.first {
653
                margin-left: 0 !important;    
654
            }
655
            &.last {
656
                .makeColumn(2);    
657
            }
658
        }
659
    }
660
    .top.row {
661
        margin-top: 0;
662
    }
663
    
664
    .last.row { 
665
        text-align: left; 
666
        font-size: 0.8em;
667
        margin-bottom: 0;
668
    }
669

    
670
    .bottom.row {
671
        .col {
672
            .makeColumn(2);    
673
            &:last-child, &.last {
674
                width: 140px;
675
                margin-right:0;
676
            }
677
        }
678
    }
679
}
680

    
681

    
682
/*pagination*/
683
.pagination {
684
    a.page {
685
        display: inline !important;
686

    
687
    }    
688
}
689

    
690
/*blog styles*/
691
.blog-entries {
692

    
693
}
694

    
695
.blog-entry {
696

    
697
    .section();
698
    .clearfix();
699
    margin-bottom: 2*@verticalSpacing;    
700

    
701
    .title {
702
        margin-bottom: 1em;    
703
        font-size: 1.1em;
704
        line-height: 1.4em;
705
    }    
706

    
707
    .media {
708
        img {
709
            border: 1px solid @gray;    
710
        }    
711
    }
712
    
713
    .intro-content, .content {
714
        margin-top: @verticalSpacing;
715

    
716
        object {
717
            margin: @verticalSpacing 0;    
718
        }
719
    }
720

    
721
    .entry-info {
722
        font-size: 0.7em;
723
        margin-top: @verticalSpacing;    
724
    }
725

    
726
    &.single {
727
        .entry-info {
728
            margin-top: 0;
729
            margin-bottom: @verticalSpacing;
730
        }    
731
    }
732
}
733

    
734
.section.twitter-feed {
735
    
736
    font-size: 1.1em;
737
    .tweet {
738
        &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }
739
        line-height: 1.3em;
740
        font-size: 0.9em;
741
        margin-bottom: @verticalSpacing;
742
        color: @gray;
743

    
744
        .date {
745
            display: block;
746
            font-size: 0.7em;
747
            a {
748
                text-decoration: none !important;
749
                border: none;
750
            }
751
        }
752
    }
753
}
754

    
755
.pagination .page {
756
    margin-left: 0;    
757
}
758

    
759

    
760
.entry-list {
761
    
762
    .since {
763
        font-size: 0.8em;    
764
    }
765

    
766
    .title {
767
        margin-bottom: 1em;    
768
    }
769

    
770
    .content, .text {
771
        margin-bottom: 2em;
772
        font-size: 0.8em;
773
    }
774
}
775

    
776

    
777
.initially-hidden {
778
    display: none;    
779
}
780

    
781
 
782
/* recaptcha */
783
#recaptcha_widget_div {
784
    margin-top: 10px;
785
    margin-left: -4px;
786

    
787
    #recaptcha_instructions_image {
788
        font-size: 0.8em;
789
        margin-bottom: 10px;
790
        display: block !important;
791
    }
792

    
793
    th, td {
794
        line-height: 1;    
795
    }
796
}
797

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

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

    
814

    
815
// generic headings
816
@hColor: @blue;
817
.textcontent, .terms-content {
818
    h1 {
819
        font-size: 1.9em;    
820
        margin-bottom: 0.2em;
821
        margin-top: 1.2em;
822
        color: @hColor;
823

    
824
        &:first-child {
825
            margin-top: 0;    
826
        }
827
    }
828

    
829
    h2 {
830
        font-size: 1.6em;
831
        margin-bottom: 1.1em;
832
        margin-top: 1.1em;
833

    
834
        &:first-child {
835
            margin-top: 0;    
836
        }
837
        color: lighten(@hColor, 5%);
838
    }
839

    
840
    h3 {
841
        font-size: 1.3em;
842
        margin-bottom: 1em;
843
        margin-top: 1em;
844

    
845
        &:first-child {
846
            margin-top: 0;    
847
        }
848
        color: lighten(@hColor, 5%);
849
    }
850

    
851
    p {
852
        margin-bottom: 1em;    
853
        line-height: 1.5em;
854
    }
855

    
856
    .date {
857
        margin: 1em 0;
858
        font-size: 0.9em;
859
        margin-bottom: 2em;
860
        color: @gray;
861
    }
862
}
863