Statistics
| Branch: | Tag: | Revision:

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

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

    
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
    .offset(6.5);
262
    .columns(4);
263

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

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

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

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

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

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

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

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

    
322
        img {
323
        }
324

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

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

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

    
345
    margin-bottom: 3*@verticalSpacing; 
346

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

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

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

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

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

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

    
385

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

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

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

    
407

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
509
}
510

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

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

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

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

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

    
539

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

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

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

    
556
}
557

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

    
562
}
563

    
564

    
565
// invitations table
566
table {
567

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

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

    
579

    
580
.row { .makeRow() }
581

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

    
588
    a { .transit() }
589

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

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

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

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

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

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

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

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

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

    
658

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

    
664
    }    
665
}
666

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

    
670
}
671

    
672
.blog-entry {
673

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

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

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

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

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

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

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

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

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

    
736

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

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

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

    
753

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

    
758
/*resources styles*/
759

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

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

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

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

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

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

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

    
809
    th, td {
810
        line-height: 1;    
811
    }
812
}
813

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

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

    
830

    
831