Statistics
| Branch: | Tag: | Revision:

root / astakos / im / static / im / grnetstyles / css / styles.less @ e5726427

History | View | Annotate | Download (5.5 kB)

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

    
5
body {
6
    #font.main();
7
}
8

    
9
// default link styles
10
section a, p a, form a, .section a {
11
    color: @black;
12
    text-decoration: none;
13
    border-bottom: 1px solid @linkColor;
14

    
15
    &:hover {
16
        color: @linkColor;
17
    }
18

    
19
    &.noborder {
20
        border: none;   
21
    }
22
}
23

    
24
a.action {
25
    color: @linkColor;
26
    border-bottom: none;
27
}
28

    
29
a img {
30
    border-bottom: none;
31
}
32

    
33
// body borders
34
.content-border {
35
    border-right: 1px solid @mainBorderColor;
36
    border-left: 1px solid @mainBorderColor;
37
}
38

    
39
.hidden {
40
    display: none !important;
41
}
42

    
43
// container sizing
44
.container, .topbar, .footer {
45
    .fixed-container();
46
    .content-border();
47
    padding: 0 @siteWhiteSpace;
48
}
49

    
50
.container {
51
    padding-bottom: @siteWhiteSpace;
52
}
53

    
54
.topbar {
55
    background-color: @shadowColor;
56
    padding-top: @gridGutterWidth/2;
57
    padding-bottom: @gridGutterWidth/2;
58
}
59

    
60

    
61
.header {
62
    position: relative;
63
    margin-top: 4*@gridGutterWidth;
64
    margin-bottom: @gridGutterWidth;
65
    h1 {
66
        color: @shadowColor;
67
        display: inline;
68
        font-size: 2.3em;
69
        border-bottom: 1px solid @shadowColor;
70
        padding-bottom: 3px;
71
    }
72
}
73
.mainlogo {
74
    img {
75
        margin-left: -10px;
76
    }
77
}
78

    
79
.footer {
80
    border-bottom: 1px solid @mainBorderColor;
81
    border-top: 1px solid lighten(@mainBorderColor, 15%);
82
    padding-top: @gridGutterWidth;
83
    padding-bottom: @gridGutterWidth;
84
}
85

    
86
ul.inline {
87
    .clearfix();
88
    li {
89
        display: block;    
90
        float: left;
91
        margin-right: 1em;
92
    }
93
}
94

    
95
.mainnav.quicknav {
96
    position: absolute;
97
    right: 0;
98
    top: -2*@gridGutterWidth;
99
    margin:0;
100

    
101
    li {
102
        margin-right:0;
103
        margin-left: 1em;
104
    }
105
}
106

    
107
.mainnav {
108
    font-size: 1.2em;
109
    
110
    li {
111
        margin-top: 3*@gridGutterWidth;
112
    }
113

    
114
    li.active {
115
        a {
116
            border-bottom: 1px solid @linkColor;
117
            color: @linkColor;
118
        }
119
    }
120
    a {
121
        color: @black;
122
        text-decoration: none;
123

    
124
        &:hover {
125
            border-bottom: 1px solid @linkColor;
126
        }
127

    
128
        &.active, &:active {
129
            border-bottom: 1px solid @linkColor;
130
            color: @linkColor;
131
        }
132
    }
133
}
134

    
135
.page {
136
    .makeRow();
137
    margin-top: 6*@gridGutterWidth;
138
    font-size: 1.1em;
139
}
140

    
141
// columnlayout
142
.maincol {
143
    .makeColumn(5);
144

    
145
    &.full {
146
        .makeColumn(10);
147
    }
148
}
149

    
150
.appbar {
151
    height: 30px;
152
    background-color: @blue;
153
}
154
.rightcol {
155
    .offset(6.5);
156
    .columns(4);
157
    input[type=text], input[type=password] {
158
        width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5;    
159
    }
160
}
161

    
162
#forms {
163
    .input {
164
        #font.main();
165
        border: 1px solid @gray;
166
        margin-bottom: -1px;
167
        padding: 0.8em;
168
        padding-left: 1.5em;
169
    }
170
}
171

    
172
.altcol {
173
    background-color: @altColor !important;
174

    
175
    &:hover {
176
        background-color: @linkColor !important;
177
    }
178
}
179

    
180

    
181
.section {
182
    margin-bottom: 2em; 
183

    
184
    .left, .right {
185
        width: 50%;
186
        float: left;
187
    }
188

    
189
    &.imagelist {
190
        margin-top: 2em;
191
        .clearfix();
192
        img {
193
            float: left;    
194
            margin-right: 4em;
195
            vertical-align: middle;
196
        }    
197
    }
198
}
199

    
200
input[readonly=true] {
201
    background-color: #ddd;
202
}
203

    
204
form.withlabels {
205
    label {
206
        width: 3*@gridColumnWidth + 2*@gridGutterWidth;
207
        display: block;
208
        float: left;
209
        padding-top: 1em;
210
    }
211

    
212
    input[type=text], input[type=password] {
213
        width: 3*@gridColumnWidth + 2*@gridGutterWidth;
214
    }
215
}
216

    
217
@errorColor: lighten(@red, 30%);
218
// forms
219
form {
220
    
221
    &.login {
222
        margin-bottom: 3em; 
223
    }
224

    
225
    h2 {
226
        color: @black;
227
        margin-bottom: @gridGutterWidth;
228
        font-size: 1.1em;
229

    
230
        span {
231
            padding-bottom: 3px;
232
        }
233
    }
234

    
235
    .form-row {
236
        position: relative;
237
        &.submit {
238
            margin-top: @gridGutterWidth;
239
        }
240

    
241
        .extra-link {
242
            color: @gray;
243
            text-decoration: none;
244
            border: none;
245
            font-size: 0.8em;
246
            margin-top: 1.3em;
247
            float: right;
248
        }
249
    }
250
    
251
    &.innerlabels label { 
252
        position: absolute;
253
        top:1em;
254
        left:1.5em;
255
        color: #aaa;
256
    }
257

    
258
    &.innerlabels p {
259
        position: relative;    
260
    }
261

    
262
    input.text, input[type="text"], input[type="password"] {
263
        #forms.input();
264
    }
265

    
266
    input.submit, input[type="submit"] {
267
        .button();
268
    }
269

    
270
    
271
    .with-errors {
272
        input, textarea, select {
273
            color: @red;
274
        }
275
        label {
276
            color: @errorColor;
277
        }
278
    }
279
}
280

    
281
.form-error {
282
    background-color: @red;
283
    color: #fff;
284
    font-size: 0.8em;
285
    padding: 5px 5px;
286
}
287

    
288
.form-errors.all {
289
    .form-error {
290
        position: relative;
291
        border-radius: 0;
292
        margin-bottom: 1.3em;
293
        padding: 0.5em;
294
    }
295
}
296

    
297
div.form-stacked {
298
    margin-bottom: 4em;
299
}
300
// content types
301
.section {
302
    h2 {
303
        font-size: 1.1em;
304
        margin-bottom: 1.5*@gridGutterWidth;    
305
    }
306

    
307
    p {
308
        line-height: 1.7em;    
309
    }
310
}
311

    
312

    
313
// page messages
314
.messages {
315
    .makeColumn(10);
316

    
317
    margin-bottom: 2em;
318
    background-color: #ddd;
319

    
320
    li {
321
        padding: 1em;    
322

    
323
        &.success { background-color: @green; color: @white }
324
        &.error { background-color: @red; color: @white }
325
        &.warning { background-color: @yellow; color: @black }
326
    }
327

    
328
}
329

    
330
// accounts specific styles
331
.service-desc {
332
    margin-top: 4em;    
333

    
334
}