Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (12.6 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
    .with-errors {
441
        input, textarea, select {
442
            color: @red;
443
        }
444
        label {
445
            color: @errorColor;
446
        }
447
    }
448
}
449

    
450
.form-error {
451
    background-color: @red;
452
    color: #fff;
453
    font-size: 0.8em;
454
    padding: 5px 5px;
455
}
456

    
457
.form-errors.all {
458
    .form-error {
459
        position: relative;
460
        border-radius: 0;
461
        margin-bottom: 1.3em;
462
        padding: 0.5em;
463
    }
464
}
465

    
466
div.form-stacked {
467
    margin-bottom: 4em;
468
}
469
// content types
470

    
471
.rightcol .section {
472
    background-image: url("../images/dashed_border.png");
473
    background-repeat: repeat-x;
474
    background-position: left bottom;
475
    padding-bottom: 2*@gridGutterWidth;
476
    margin-bottom: 2*@gridGutterWidth;
477

    
478
}
479

    
480
.section {
481
    h2 {
482
        font-size: 1.1em;
483
        line-height: 1.3em;
484
        margin-bottom: 1.5*@gridGutterWidth;    
485

    
486
        a {
487
            color: #4085A6;
488
            border: none;
489
            line-height: 1.3em;
490
        }
491
    }
492

    
493
    h3 {
494
        font-size: 1.1em;    
495
        line-height: 1.3em;
496
        margin-bottom: 1.5*@gridGutterWidth;    
497
    }
498

    
499
    p {
500
        line-height: 1.7em;    
501
    }
502

    
503
    .section-img {
504
        margin-bottom: 1*@gridGutterWidth;    
505
    }
506
}
507

    
508

    
509
// page messages
510
.messages {
511
    .makeColumn(10);
512

    
513
    margin: 2em 0;
514
    background-color: #ddd;
515
    margin-left: 0;
516

    
517
    li {
518
        padding: 1em;    
519

    
520
        &.success { background-color: @green; color: @white }
521
        &.error { background-color: @red; color: @white }
522
        &.warning { background-color: @yellow; color: @black }
523
    }
524

    
525
}
526

    
527
// accounts specific styles
528
.service-desc {
529
    margin-top: 4em;    
530

    
531
}
532

    
533

    
534
// invitations table
535
table {
536

    
537
    td.consumed {
538
        color: @red;
539
    }
540

    
541
    tr.consumed {
542
        td.consumed {
543
            color: @green;    
544
        }
545
    }
546
}
547

    
548

    
549
.row { .makeRow() }
550

    
551
// footer
552
.footer {
553
    .makeRow()
554
    
555
    &:hover {
556
        a {
557
            color: @gray !important;
558
            .transit();
559
        }
560
    }
561

    
562
    a {
563
        color: lighten(@gray, 20%);    
564
        .transit();
565
        text-decoration: none;
566

    
567
        &:hover {
568
            color: darken(@gray, 50%);    
569
        }
570
    }
571

    
572
    li {
573
        margin-bottom: @gridGutterWidth/2;
574

    
575
        &.header {
576
            margin-bottom: @gridGutterWidth;    
577
        }
578
    }
579

    
580
    .col {
581
        .makeColumn(4);
582
        &:last-child, &.last {
583
            width: 140px;
584
            margin-right:0;
585
        }
586
    }
587

    
588
    .bottom.row {
589
        .col {
590
            .makeColumn(2);    
591
            &:last-child, &.last {
592
                width: 140px;
593
                margin-right:0;
594
            }
595
        }
596
    }
597
}
598

    
599

    
600
/*pagination*/
601
.pagination {
602
    a.page {
603
        display: inline !important;
604

    
605
    }    
606
}
607

    
608
/*blog styles*/
609
.blog-entries {
610

    
611
}
612

    
613
.blog-entry {
614

    
615
    .section();
616
    .clearfix();
617
    margin-bottom: 2*@gridGutterWidth;    
618

    
619
    .title {
620
        margin-bottom: 1em;    
621
        font-size: 1.1em;
622
        line-height: 1.4em;
623
    }    
624

    
625
    .media {
626
        img {
627
            border: 1px solid @gray;    
628
        }    
629
    }
630
    
631
    .intro-content, .content {
632
        margin-top: @gridGutterWidth;
633

    
634
        object {
635
            margin: @gridGutterWidth 0;    
636
        }
637
    }
638

    
639
    .entry-info {
640
        font-size: 0.7em;
641
        margin-top: @gridGutterWidth;    
642
    }
643

    
644
    &.single {
645
        .entry-info {
646
            margin-top: 0;
647
            margin-bottom: @gridGutterWidth;
648
        }    
649
    }
650
}
651

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

    
661
        .date {
662
            display: block;
663
            font-size: 0.7em;
664
            a {
665
                text-decoration: none !important;
666
                border: none;
667
            }
668
        }
669
    }
670
}
671

    
672
.pagination .page {
673
    margin-left: 0;    
674
}
675

    
676

    
677
.entry-list {
678
    
679
    .since {
680
        font-size: 0.8em;    
681
    }
682

    
683
    .title {
684
        margin-bottom: 1em;    
685
    }
686

    
687
    .content, .text {
688
        margin-bottom: 2em;
689
        font-size: 0.8em;
690
    }
691
}
692

    
693

    
694
.initial_hidden {
695
    display: none;    
696
}
697

    
698
/*resources styles*/
699

    
700
@resCol: #FAAF40;
701
.resources {
702
    
703
    .categories {
704
        ul { .clearfix() }
705
        ul li { float: left; }
706
        .title {
707
            margin-bottom: @gridGutterWidth/2;    
708
        }
709

    
710
        ul li a {
711
            text-decoration: none;
712
            color: @resCol;
713
            margin-right: @gridGutterWidth;
714
        }
715
    }
716

    
717
    .list {
718
        
719
        margin-top: 4*@gridGutterWidth;
720

    
721
        .resource {
722
            .border-box();
723
            width: 33%;
724
            padding: 2*@gridGutterWidth;
725
            float: left;
726
            border: 1px solid @resCol;
727
            height: 12*@gridGutterWidth;
728

    
729
            .description {
730
                display: none;    
731
            }
732
        }    
733
    }
734
    
735
}
736

    
737
 
738
/* recaptcha */
739
#recaptcha_widget_div {
740
    margin-top: 10px;
741
    margin-left: -4px;
742

    
743
    #recaptcha_instructions_image {
744
        font-size: 0.8em;
745
        margin-bottom: 10px;
746
        display: block !important;
747
    }
748
}
749

    
750
.checkbox-widget.checked {
751
    background-color: #f00;
752
    background-image: url("../images/checkbox.png");
753
    background-position: 50% 50%;
754
}
755

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

    
766

    
767