Statistics
| Branch: | Tag: | Revision:

root / snf-astakos-app / astakos / im / static / im / css / styles.less @ a70dacde

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

    
6

    
7
// mixins
8

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

    
16
.clearme { .clearfix() }
17

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

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

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

    
47
        float: right;    
48
    }
49
}
50

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

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

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

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

    
70
a.simple {
71
    border: none;
72

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

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

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

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

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

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

    
105
.topbar {
106
}
107

    
108

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
264
    &.narrow {
265
        .makeColumn(3);
266
        margin-left: 4*@gridGutterWidth + 14;
267
    }
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
        &.with-checkbox {
435
            margin-top: 7px;    
436
        }
437

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

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

    
459
    &.innerlabels p {
460
        display: table;
461
        position: relative;    
462
    }
463

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

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

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

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

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

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

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

    
515
}
516

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

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

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

    
536
    p {
537
        line-height: 1.7em;    
538
    }
539

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

    
545

    
546
// page messages
547
.messages {
548
    .makeColumn(10);
549

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

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

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

    
570
}
571

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

    
581

    
582

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

    
587
}
588

    
589

    
590
// invitations table
591
table {
592

    
593
    td.consumed {
594
        color: @red;
595
    }
596

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

    
604

    
605
.row { .makeRow() }
606

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

    
613
    a { .transit() }
614

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

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

    
626
        &:hover {
627
            color: #000 !important;
628
        }
629
    }
630

    
631
    li {
632
        margin-bottom: @verticalSpacing/2;
633

    
634
        &.header {
635
            margin-bottom: @verticalSpacing;    
636
        }
637
    }
638

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

    
651
        .col {
652
            .makeColumn(4);    
653

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

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

    
683

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

    
689
    }    
690
}
691

    
692
/*blog styles*/
693
.blog-entries {
694

    
695
}
696

    
697
.blog-entry {
698

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

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

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

    
718
        object {
719
            margin: @verticalSpacing 0;    
720
        }
721
    }
722

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

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

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

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

    
757
.pagination .page {
758
    margin-left: 0;    
759
}
760

    
761

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

    
768
    .title {
769
        margin-bottom: 1em;    
770
    }
771

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

    
778

    
779
.initially-hidden {
780
    display: none;    
781
}
782

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

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

    
795
    th, td {
796
        line-height: 1;    
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: @verticalSpacing/2 - 2;
814
}
815

    
816

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

    
826
        &:first-child {
827
            margin-top: 0;    
828
        }
829
    }
830

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

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

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

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

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

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