Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (12.7 kB)

1
@import "../less/bootstrap.less";
2
@import "../less/xtra.less";
3
@import "../less/django_forms.less";
4
@import "../less/tables.less";
5
@import "../less/xtra.less";
6

    
7

    
8
// mixins
9

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

    
17
@gradCol: #ddd;
18
body {
19
    #font.main();
20
}
21

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

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

    
44
        float: right;    
45
    }
46
}
47

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

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

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

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

    
67
a.simple {
68
    border: none;
69

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

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

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

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

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

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

    
102
.topbar {
103
}
104

    
105

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
300
        img {
301
        }
302

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

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

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

    
323
    margin-bottom: 3*@gridGutterWidth; 
324

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

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

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

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

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

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

    
363

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

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

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

    
385

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

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

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

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

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

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

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

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

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

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

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

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

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

    
483
}
484

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

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

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

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

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

    
513

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

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

    
522
    li {
523
        padding: 1em;    
524

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

    
530
}
531

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

    
536
}
537

    
538

    
539
// invitations table
540
table {
541

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

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

    
553

    
554
.row { .makeRow() }
555

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

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

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

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

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

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

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

    
604

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

    
610
    }    
611
}
612

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

    
616
}
617

    
618
.blog-entry {
619

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

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

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

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

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

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

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

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

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

    
681

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

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

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

    
698

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

    
703
/*resources styles*/
704

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

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

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

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

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

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

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

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

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

    
771

    
772