root / astakos / im / static / im / grnetstyles / css / styles.less @ 35a62b9d
History | View | Annotate | Download (5.1 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 |
// accounts specific styles |
314 |
.service-desc { |
315 |
margin-top: 4em; |
316 |
|
317 |
} |