Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (14.3 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
        .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
        display: table;
457
        position: relative;    
458
    }
459

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

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

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

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

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

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

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

    
511
}
512

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

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

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

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

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

    
541

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

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

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

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

    
566
}
567

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

    
577

    
578

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

    
583
}
584

    
585

    
586
// invitations table
587
table {
588

    
589
    td.consumed {
590
        color: @red;
591
    }
592

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

    
600

    
601
.row { .makeRow() }
602

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

    
609
    a { .transit() }
610

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

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

    
622
        &:hover {
623
            color: #000 !important;
624
        }
625
    }
626

    
627
    li {
628
        margin-bottom: @verticalSpacing/2;
629

    
630
        &.header {
631
            margin-bottom: @verticalSpacing;    
632
        }
633
    }
634

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

    
647
        .col {
648
            .makeColumn(4);    
649

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

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

    
679

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

    
685
    }    
686
}
687

    
688
/*blog styles*/
689
.blog-entries {
690

    
691
}
692

    
693
.blog-entry {
694

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

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

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

    
714
        object {
715
            margin: @verticalSpacing 0;    
716
        }
717
    }
718

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

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

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

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

    
753
.pagination .page {
754
    margin-left: 0;    
755
}
756

    
757

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

    
764
    .title {
765
        margin-bottom: 1em;    
766
    }
767

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

    
774

    
775
.initially-hidden {
776
    display: none;    
777
}
778

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

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

    
791
    th, td {
792
        line-height: 1;    
793
    }
794
}
795

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

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

    
812

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

    
822
        &:first-child {
823
            margin-top: 0;    
824
        }
825
    }
826

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

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

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

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

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

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