Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (13.2 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
            z-index: 10;
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: #AF6906; color: @black }
555
    }
556
    
557
    .warning {
558
        color: @white !important;   
559
        a {
560
            color: inherit;
561
            font-weight: bold;
562
        }
563
    }
564

    
565
}
566

    
567
// accounts specific styles
568
.service-desc {
569
    margin-top: 4em;    
570

    
571
}
572

    
573

    
574
// invitations table
575
table {
576

    
577
    td.consumed {
578
        color: @red;
579
    }
580

    
581
    tr.consumed {
582
        td.consumed {
583
            color: @green;    
584
        }
585
    }
586
}
587

    
588

    
589
.row { .makeRow() }
590

    
591
// footer
592
.footer {
593
    .clearfix();
594
    color: lighten(@gray, 20%);
595
    .transit();
596

    
597
    a { .transit() }
598

    
599
    &:hover {
600
        color: @gray !important;
601
        a {
602
            color: @gray !important;
603
        }
604
    }
605

    
606
    a {
607
        color: lighten(@gray, 20%);    
608
        text-decoration: none;
609

    
610
        &:hover {
611
            color: #000 !important;
612
        }
613
    }
614

    
615
    li {
616
        margin-bottom: @verticalSpacing/2;
617

    
618
        &.header {
619
            margin-bottom: @verticalSpacing;    
620
        }
621
    }
622

    
623
    .col {
624
        .makeColumn(4);
625
        &:last-child, &.last {
626
            width: 140px;
627
            margin-right:0;
628
        }
629
    }
630
    
631
    .top.row, .last.row {
632
        .makeRow();
633
        margin: 20px 0;
634

    
635
        .col {
636
            .makeColumn(4);    
637

    
638
            &.first {
639
                margin-left: 0 !important;    
640
            }
641
            &.last {
642
                .makeColumn(2);    
643
            }
644
        }
645
    }
646
    .top.row {
647
        margin-top: 0;
648
    }
649
    
650
    .last.row { 
651
        text-align: left; 
652
        font-size: 0.8em;
653
        margin-bottom: 0;
654
    }
655

    
656
    .bottom.row {
657
        .col {
658
            .makeColumn(2);    
659
            &:last-child, &.last {
660
                width: 140px;
661
                margin-right:0;
662
            }
663
        }
664
    }
665
}
666

    
667

    
668
/*pagination*/
669
.pagination {
670
    a.page {
671
        display: inline !important;
672

    
673
    }    
674
}
675

    
676
/*blog styles*/
677
.blog-entries {
678

    
679
}
680

    
681
.blog-entry {
682

    
683
    .section();
684
    .clearfix();
685
    margin-bottom: 2*@verticalSpacing;    
686

    
687
    .title {
688
        margin-bottom: 1em;    
689
        font-size: 1.1em;
690
        line-height: 1.4em;
691
    }    
692

    
693
    .media {
694
        img {
695
            border: 1px solid @gray;    
696
        }    
697
    }
698
    
699
    .intro-content, .content {
700
        margin-top: @verticalSpacing;
701

    
702
        object {
703
            margin: @verticalSpacing 0;    
704
        }
705
    }
706

    
707
    .entry-info {
708
        font-size: 0.7em;
709
        margin-top: @verticalSpacing;    
710
    }
711

    
712
    &.single {
713
        .entry-info {
714
            margin-top: 0;
715
            margin-bottom: @verticalSpacing;
716
        }    
717
    }
718
}
719

    
720
.section.twitter-feed {
721
    
722
    font-size: 1.1em;
723
    .tweet {
724
        &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }
725
        line-height: 1.3em;
726
        font-size: 0.9em;
727
        margin-bottom: @verticalSpacing;
728
        color: @gray;
729

    
730
        .date {
731
            display: block;
732
            font-size: 0.7em;
733
            a {
734
                text-decoration: none !important;
735
                border: none;
736
            }
737
        }
738
    }
739
}
740

    
741
.pagination .page {
742
    margin-left: 0;    
743
}
744

    
745

    
746
.entry-list {
747
    
748
    .since {
749
        font-size: 0.8em;    
750
    }
751

    
752
    .title {
753
        margin-bottom: 1em;    
754
    }
755

    
756
    .content, .text {
757
        margin-bottom: 2em;
758
        font-size: 0.8em;
759
    }
760
}
761

    
762

    
763
.initial_hidden {
764
    display: none;    
765
}
766

    
767
 
768
/* recaptcha */
769
#recaptcha_widget_div {
770
    margin-top: 10px;
771
    margin-left: -4px;
772

    
773
    #recaptcha_instructions_image {
774
        font-size: 0.8em;
775
        margin-bottom: 10px;
776
        display: block !important;
777
    }
778

    
779
    th, td {
780
        line-height: 1;    
781
    }
782
}
783

    
784
.checkbox-widget.checked {
785
    background-color: #f00;
786
    background-image: url("../images/checkbox.png");
787
    background-position: 50% 50%;
788
}
789

    
790
.checkbox-widget {
791
    border: 1px solid @gray;
792
    width: 25px;
793
    height: 25px;
794
    display: block;
795
    float: left;
796
    cursor: pointer;
797
    margin-top: @verticalSpacing/2 - 2;
798
}
799

    
800

    
801