Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (12.7 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
@gradCol: #ddd;
17
body {
18
    #font.main();
19
}
20

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

    
37
            &:hover {
38
                background-color: lighten(@black, 10%);
39
                color: @white;
40
            }
41
        }
42

    
43
        float: right;    
44
    }
45
}
46

    
47
// default link styles
48
section a, p a, form a, .section a, .styledlinks a {
49
    color: @black;
50
    text-decoration: none;
51
    border-bottom: 1px solid @linkColor;
52

    
53
    &:hover {
54
        color: @linkColor;
55
    }
56

    
57
    &.noborder {
58
        border: none;   
59
    }
60

    
61
    em {
62
        color: @blue;    
63
    }
64
}
65

    
66
a.simple {
67
    border: none;
68

    
69
}
70
a.action {
71
    color: @linkColor;
72
    border-bottom: none;
73
}
74

    
75
a img {
76
    border-bottom: none;
77
}
78

    
79
// body borders
80
.content-border {
81
    border-right: 1px solid @mainBorderColor;
82
    border-left: 1px solid @mainBorderColor;
83
}
84

    
85
.hidden {
86
    display: none !important;
87
}
88

    
89
// container sizing
90
.container, .topbar, .footer {
91
    .fixed-container();
92
    .content-border();
93
    padding: 0 @siteWhiteSpace;
94
}
95

    
96
.container {
97
    padding-bottom: @siteWhiteSpace;
98
    background-color: @white;
99
}
100

    
101
.topbar {
102
}
103

    
104

    
105
div.header {
106
    position: relative;
107
    margin-top: 4*@gridGutterWidth;
108
    margin-bottom: @gridGutterWidth;
109
    h1 {
110
        color: @shadowColor;
111
        display: inline;
112
        font-size: 2.3em;
113
        border-bottom: 1px solid @shadowColor;
114
        padding-bottom: 3px;
115
    }
116
}
117
.mainlogo {
118
    height: 36px;
119

    
120
    h1 { height: 36px }
121
    img {
122
        margin-left: -10px;
123
    }
124
}
125

    
126
.footer {
127
    border-bottom: 1px solid @mainBorderColor;
128
    border-top: 1px solid lighten(@mainBorderColor, 15%);
129
    padding-top: @gridGutterWidth;
130
    padding-bottom: @gridGutterWidth;
131
}
132

    
133
ul.inline {
134
    .clearfix();
135
    li {
136
        display: block;    
137
        float: left;
138
        margin-right: 1em;
139
    }
140
}
141

    
142
.mainnav.quicknav {
143
    position: absolute;
144
    right: 0;
145
    top: -2.6*@gridGutterWidth;
146
    margin:0;
147

    
148
    li {
149
        margin-right:0;
150
        margin-left: 1em;
151
    }
152
}
153

    
154
.navigation {
155
    height: 83px;    
156
}
157

    
158
.mainnav {
159
    font-size: 1.2em;
160
    
161
    &.subnav {
162
        margin-bottom: -@gridGutterWidth;
163
        li {
164
            margin-top: 1.2em;
165
        }
166
    }
167

    
168
    li {
169
        margin-top: 3*@gridGutterWidth;
170
    }
171

    
172
    li.active {
173
        a {
174
            /*border-bottom: 1px solid @linkColor;*/
175
            border-bottom: none;
176
            color: @linkColor;
177
        }
178
    }
179
    a {
180
        color: @black;
181
        text-decoration: none;
182

    
183
        &:hover {
184
            border-bottom: 1px solid @linkColor;
185
        }
186

    
187
        &.active, &:active {
188
            border-bottom: 1px solid @linkColor;
189
            color: @linkColor;
190
        }
191
    }
192
}
193

    
194
.bottom-section {
195
    .clearfix();
196

    
197
    .section {
198
        img {
199
            width: 200px;    
200
        }
201
    }
202
}
203

    
204
.top-section {
205
    .clearfix();
206
}
207

    
208
div.page {
209
    .makeRow();
210
    margin-top: 6*@gridGutterWidth;
211
    font-size: 1.1em;
212
    .page-inner {
213
        position: relative;    
214
    }
215
}
216

    
217
// columnlayout
218
.maincol {
219
    .makeColumn(5);
220
    
221
    &.wide {
222
        .makeColumn(6);    
223
    }
224

    
225
    &.full {
226
        .makeRow();
227
        margin-left: 0;
228
        .makeColumn(10);
229
    }
230
}
231

    
232
.appbar {
233
    height: 30px;
234
    background-color: @blue;
235
}
236

    
237
.rightcol {
238
    .offset(6.5);
239
    .columns(4);
240

    
241
    &.narrow {
242
        .offset(7.5);
243
        .columns(3);    
244
    }
245
    input[type=text], input[type=password] {
246
        width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5;    
247
    }
248
}
249

    
250
/* generic form styles */
251
input, textarea, .form-widget {
252
    background-color: @white;
253
    color: @gray;
254
    border-color: @black;
255
}
256

    
257
#forms {
258
    .input, input {
259
        #font.main();
260
        border: 1px solid @gray;
261
        height:21px;
262
        display: inline-block;
263
        margin-bottom: -1px;
264
        padding: 0.8em;
265
        padding-left: 1.5em;
266
        z-index: 2;
267
        &:focus {
268
            position: relative;
269
            border: 1px solid #000;
270
            z-index: 100;
271

    
272
            label {
273
                z-index: 300;    
274
            }
275
        }
276
    }
277
}
278

    
279
.altcol {
280
    background-color: @altColor !important;
281

    
282
    &:hover {
283
        background-color: @linkColor !important;
284
    }
285
}
286

    
287
.section {
288
    
289
    em {
290
        color: @blue;
291
    }
292

    
293
    &.positioned {
294
        margin-bottom: 0;
295
        .content {
296
            .makeColumn(4);
297
        }
298

    
299
        img {
300
        }
301

    
302
        &.withimg {
303
            .img {
304
                .makeColumn(4);
305
            }
306

    
307
            img {
308
                float: left;    
309
            }
310
        }
311
        
312
        h3 {
313
            font-size: 1.2em;
314
            margin-bottom: @gridGutterWidth;    
315
        }
316

    
317
        .text {
318
            color: @black;    
319
        }
320
    }
321

    
322
    margin-bottom: 3*@gridGutterWidth; 
323

    
324
    .left, .right {
325
        width: 50%;
326
        float: left;
327
    }
328

    
329
    &.imagelist {
330
        margin-top: 2em;
331
        .clearfix();
332
        img {
333
            float: left;    
334
            margin-right: 4em;
335
            vertical-align: middle;
336
        }    
337
    }
338
}
339

    
340
input[readonly=true] {
341
    background-color: #ddd;
342
    color: darken(#ddd, 50%);
343
}
344

    
345
form.withlabels {
346
    label {
347
        width: 3*@gridColumnWidth + 2*@gridGutterWidth;
348
        display: block;
349
        float: left;
350
        padding-top: 1em;
351
    }
352

    
353
    input[type=text], input[type=password], textarea {
354
        width: 3*@gridColumnWidth + 2*@gridGutterWidth;
355

    
356
        &.long {
357
            width: 3*@gridColumnWidth + 2*@gridGutterWidth;
358
        }
359
    }
360
}
361

    
362

    
363
.login-section {
364
    a.button {
365
        margin-bottom: 0.2*@gridColumnWidth;    
366
        
367
        &:last-child {
368
            margin-bottom: none;    
369
        }
370

    
371
        &.withicon {
372
            background-repeat: no-repeat;
373
            background-position: 15px 50%;
374
            padding-left: 40px;
375
        }
376
    }    
377

    
378
    &.loggedin {
379
        padding-bottom: 0 !important;
380
        background-image: none !important;
381
    }
382
}
383

    
384

    
385
@errorColor: lighten(@red, 30%);
386
// forms
387
form {
388
    
389
    &.login {
390
        margin-bottom: 1.5*@gridGutterWidth; 
391
    }
392

    
393
    h2 {
394
        color: @black;
395
        margin-bottom: @gridGutterWidth;
396
        font-size: 1.1em;
397

    
398
        span {
399
            padding-bottom: 3px;
400
        }
401
    }
402

    
403
    .form-row {
404
        min-height: 2*@gridGutterWidth;
405
        position: relative;
406
        &.submit {
407
            margin-top: 1.5*@gridGutterWidth;
408
        }
409

    
410
        .extra-link {
411
            color: @gray;
412
            text-decoration: none;
413
            border: none;
414
            font-size: 0.8em;
415
            margin-top: 1.3em;
416
            float: right;
417
        }
418
    }
419
    
420
    &.innerlabels label { 
421
        position: absolute;
422
        top:1em;
423
        left:1.5em;
424
        color: #aaa;
425
    }
426

    
427
    &.innerlabels p {
428
        position: relative;    
429
    }
430

    
431
    textarea, input.text, input[type="text"], input[type="password"] {
432
        #forms.input();
433
    }
434

    
435
    input.submit, input[type="submit"] {
436
        .button();
437
    }
438

    
439
    
440
    textarea {
441
        height: 200px;
442
        width: 350px !important;
443
    }
444
    .with-errors {
445
        input, textarea, select {
446
            color: @red;
447
        }
448
        label {
449
            color: @errorColor;
450
        }
451
    }
452
}
453

    
454
.form-error {
455
    background-color: @red;
456
    color: #fff;
457
    font-size: 0.8em;
458
    padding: 5px 5px;
459
}
460

    
461
.form-errors.all {
462
    .form-error {
463
        position: relative;
464
        border-radius: 0;
465
        margin-bottom: 1.3em;
466
        padding: 0.5em;
467
    }
468
}
469

    
470
div.form-stacked {
471
    margin-bottom: 4em;
472
}
473
// content types
474

    
475
.rightcol .section {
476
    background-image: url("../images/dashed_border.png");
477
    background-repeat: repeat-x;
478
    background-position: left bottom;
479
    padding-bottom: 2*@gridGutterWidth;
480
    margin-bottom: 2*@gridGutterWidth;
481

    
482
}
483

    
484
.section {
485
    h2 {
486
        font-size: 1.1em;
487
        line-height: 1.3em;
488
        margin-bottom: 1.5*@gridGutterWidth;    
489

    
490
        a {
491
            color: #4085A6;
492
            border: none;
493
            line-height: 1.3em;
494
        }
495
    }
496

    
497
    h3 {
498
        font-size: 1.1em;    
499
        line-height: 1.3em;
500
        margin-bottom: 1.5*@gridGutterWidth;    
501
    }
502

    
503
    p {
504
        line-height: 1.7em;    
505
    }
506

    
507
    .section-img {
508
        margin-bottom: 1*@gridGutterWidth;    
509
    }
510
}
511

    
512

    
513
// page messages
514
.messages {
515
    .makeColumn(10);
516

    
517
    margin: 2em 0;
518
    background-color: #ddd;
519
    margin-left: 0;
520

    
521
    li {
522
        padding: 1em;    
523

    
524
        &.success { background-color: @green; color: @white }
525
        &.error { background-color: @red; color: @white }
526
        &.warning { background-color: @yellow; color: @black }
527
    }
528

    
529
}
530

    
531
// accounts specific styles
532
.service-desc {
533
    margin-top: 4em;    
534

    
535
}
536

    
537

    
538
// invitations table
539
table {
540

    
541
    td.consumed {
542
        color: @red;
543
    }
544

    
545
    tr.consumed {
546
        td.consumed {
547
            color: @green;    
548
        }
549
    }
550
}
551

    
552

    
553
.row { .makeRow() }
554

    
555
// footer
556
.footer {
557
    .makeRow()
558
    
559
    &:hover {
560
        a {
561
            color: @gray !important;
562
            .transit();
563
        }
564
    }
565

    
566
    a {
567
        color: lighten(@gray, 20%);    
568
        .transit();
569
        text-decoration: none;
570

    
571
        &:hover {
572
            color: darken(@gray, 50%);    
573
        }
574
    }
575

    
576
    li {
577
        margin-bottom: @gridGutterWidth/2;
578

    
579
        &.header {
580
            margin-bottom: @gridGutterWidth;    
581
        }
582
    }
583

    
584
    .col {
585
        .makeColumn(4);
586
        &:last-child, &.last {
587
            width: 140px;
588
            margin-right:0;
589
        }
590
    }
591

    
592
    .bottom.row {
593
        .col {
594
            .makeColumn(2);    
595
            &:last-child, &.last {
596
                width: 140px;
597
                margin-right:0;
598
            }
599
        }
600
    }
601
}
602

    
603

    
604
/*pagination*/
605
.pagination {
606
    a.page {
607
        display: inline !important;
608

    
609
    }    
610
}
611

    
612
/*blog styles*/
613
.blog-entries {
614

    
615
}
616

    
617
.blog-entry {
618

    
619
    .section();
620
    .clearfix();
621
    margin-bottom: 2*@gridGutterWidth;    
622

    
623
    .title {
624
        margin-bottom: 1em;    
625
        font-size: 1.1em;
626
        line-height: 1.4em;
627
    }    
628

    
629
    .media {
630
        img {
631
            border: 1px solid @gray;    
632
        }    
633
    }
634
    
635
    .intro-content, .content {
636
        margin-top: @gridGutterWidth;
637

    
638
        object {
639
            margin: @gridGutterWidth 0;    
640
        }
641
    }
642

    
643
    .entry-info {
644
        font-size: 0.7em;
645
        margin-top: @gridGutterWidth;    
646
    }
647

    
648
    &.single {
649
        .entry-info {
650
            margin-top: 0;
651
            margin-bottom: @gridGutterWidth;
652
        }    
653
    }
654
}
655

    
656
.section.twitter-feed {
657
    
658
    .tweet {
659
        &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }
660
        line-height: 1.3em;
661
        font-size: 0.9em;
662
        margin-bottom: @gridGutterWidth;
663
        color: @gray;
664

    
665
        .date {
666
            display: block;
667
            font-size: 0.7em;
668
            a {
669
                text-decoration: none !important;
670
                border: none;
671
            }
672
        }
673
    }
674
}
675

    
676
.pagination .page {
677
    margin-left: 0;    
678
}
679

    
680

    
681
.entry-list {
682
    
683
    .since {
684
        font-size: 0.8em;    
685
    }
686

    
687
    .title {
688
        margin-bottom: 1em;    
689
    }
690

    
691
    .content, .text {
692
        margin-bottom: 2em;
693
        font-size: 0.8em;
694
    }
695
}
696

    
697

    
698
.initial_hidden {
699
    display: none;    
700
}
701

    
702
/*resources styles*/
703

    
704
@resCol: #FAAF40;
705
.resources {
706
    
707
    .categories {
708
        ul { .clearfix() }
709
        ul li { float: left; }
710
        .title {
711
            margin-bottom: @gridGutterWidth/2;    
712
        }
713

    
714
        ul li a {
715
            text-decoration: none;
716
            color: @resCol;
717
            margin-right: @gridGutterWidth;
718
        }
719
    }
720

    
721
    .list {
722
        
723
        margin-top: 4*@gridGutterWidth;
724

    
725
        .resource {
726
            .border-box();
727
            width: 33%;
728
            padding: 2*@gridGutterWidth;
729
            float: left;
730
            border: 1px solid @resCol;
731
            height: 12*@gridGutterWidth;
732

    
733
            .description {
734
                display: none;    
735
            }
736
        }    
737
    }
738
    
739
}
740

    
741
 
742
/* recaptcha */
743
#recaptcha_widget_div {
744
    margin-top: 10px;
745
    margin-left: -4px;
746

    
747
    #recaptcha_instructions_image {
748
        font-size: 0.8em;
749
        margin-bottom: 10px;
750
        display: block !important;
751
    }
752
}
753

    
754
.checkbox-widget.checked {
755
    background-color: #f00;
756
    background-image: url("../images/checkbox.png");
757
    background-position: 50% 50%;
758
}
759

    
760
.checkbox-widget {
761
    border: 1px solid @gray;
762
    width: 25px;
763
    height: 25px;
764
    display: block;
765
    float: left;
766
    cursor: pointer;
767
    margin-top: @gridGutterWidth/2 - 2;
768
}
769

    
770

    
771