root / astakos / im / static / im / grnetstyles / css / styles.less @ 13858d75
History | View | Annotate | Download (5.2 kB)
1 |
@import "../less/bootstrap.less"; |
---|---|
2 |
@import "../less/django_forms.less"; |
3 |
|
4 |
body { |
5 |
#font.main(); |
6 |
} |
7 |
|
8 |
// default link styles |
9 |
section a, p a, form a, .section a { |
10 |
color: @black; |
11 |
text-decoration: none; |
12 |
border-bottom: 1px solid @linkColor; |
13 |
|
14 |
&:hover { |
15 |
color: @linkColor; |
16 |
} |
17 |
|
18 |
&.noborder { |
19 |
border: none; |
20 |
} |
21 |
} |
22 |
|
23 |
a.action { |
24 |
color: @linkColor; |
25 |
border-bottom: none; |
26 |
} |
27 |
|
28 |
a img { |
29 |
border-bottom: none; |
30 |
} |
31 |
|
32 |
// body borders |
33 |
.content-border { |
34 |
border-right: 1px solid @mainBorderColor; |
35 |
border-left: 1px solid @mainBorderColor; |
36 |
} |
37 |
|
38 |
.hidden { |
39 |
display: none !important; |
40 |
} |
41 |
|
42 |
// container sizing |
43 |
.container, .topbar, .footer { |
44 |
.fixed-container(); |
45 |
.content-border(); |
46 |
padding: 0 @siteWhiteSpace; |
47 |
} |
48 |
|
49 |
.container { |
50 |
padding-bottom: @siteWhiteSpace; |
51 |
} |
52 |
|
53 |
.topbar { |
54 |
background-color: @shadowColor; |
55 |
padding-top: @gridGutterWidth/2; |
56 |
padding-bottom: @gridGutterWidth/2; |
57 |
} |
58 |
|
59 |
|
60 |
.header { |
61 |
position: relative; |
62 |
height: 2*@gridGutterWidth; |
63 |
margin-top: 4*@gridGutterWidth; |
64 |
margin-bottom: 3*@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: 1em; |
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 |
margin-top: 2*@gridGutterWidth; |
111 |
|
112 |
height: 1*@gridGutterWidth; |
113 |
li.active { |
114 |
a { |
115 |
border-bottom: 1px solid @linkColor; |
116 |
color: @linkColor; |
117 |
} |
118 |
} |
119 |
a { |
120 |
color: @black; |
121 |
text-decoration: none; |
122 |
|
123 |
&:hover { |
124 |
border-bottom: 1px solid @linkColor; |
125 |
} |
126 |
|
127 |
&.active, &:active { |
128 |
border-bottom: 1px solid @linkColor; |
129 |
color: @linkColor; |
130 |
} |
131 |
} |
132 |
} |
133 |
|
134 |
.page { |
135 |
.makeRow(); |
136 |
margin-top: 6*@gridGutterWidth; |
137 |
font-size: 1.1em; |
138 |
} |
139 |
|
140 |
// columnlayout |
141 |
.maincol { |
142 |
.makeColumn(5); |
143 |
|
144 |
&.full { |
145 |
.makeColumn(10); |
146 |
} |
147 |
} |
148 |
|
149 |
.appbar { |
150 |
height: 30px; |
151 |
background-color: @blue; |
152 |
} |
153 |
.rightcol { |
154 |
.offset(6.5); |
155 |
.columns(4); |
156 |
input[type=text], input[type=password] { |
157 |
width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5; |
158 |
} |
159 |
} |
160 |
|
161 |
#forms { |
162 |
.input { |
163 |
#font.main(); |
164 |
border: 1px solid @gray; |
165 |
margin-bottom: -1px; |
166 |
padding: 0.8em; |
167 |
padding-left: 1.5em; |
168 |
} |
169 |
} |
170 |
|
171 |
.altcol { |
172 |
background-color: @altColor !important; |
173 |
|
174 |
&:hover { |
175 |
background-color: @linkColor !important; |
176 |
} |
177 |
} |
178 |
|
179 |
|
180 |
.section { |
181 |
margin-bottom: 2em; |
182 |
|
183 |
.left, .right { |
184 |
width: 50%; |
185 |
float: left; |
186 |
} |
187 |
|
188 |
&.imagelist { |
189 |
margin-top: 2em; |
190 |
.clearfix(); |
191 |
img { |
192 |
float: left; |
193 |
margin-right: 4em; |
194 |
vertical-align: middle; |
195 |
} |
196 |
} |
197 |
} |
198 |
|
199 |
input[readonly=true] { |
200 |
background-color: #ddd; |
201 |
} |
202 |
|
203 |
form.withlabels { |
204 |
label { |
205 |
width: 3*@gridColumnWidth + 2*@gridGutterWidth; |
206 |
display: block; |
207 |
float: left; |
208 |
padding-top: 1em; |
209 |
} |
210 |
|
211 |
input[type=text], input[type=password] { |
212 |
width: 3*@gridColumnWidth + 2*@gridGutterWidth; |
213 |
} |
214 |
} |
215 |
|
216 |
@errorColor: lighten(@red, 30%); |
217 |
// forms |
218 |
form { |
219 |
|
220 |
&.login { |
221 |
margin-bottom: 3em; |
222 |
} |
223 |
|
224 |
h2 { |
225 |
color: @black; |
226 |
margin-bottom: @gridGutterWidth; |
227 |
font-size: 1.1em; |
228 |
|
229 |
span { |
230 |
padding-bottom: 3px; |
231 |
} |
232 |
} |
233 |
|
234 |
.form-row { |
235 |
position: relative; |
236 |
&.submit { |
237 |
margin-top: @gridGutterWidth; |
238 |
} |
239 |
|
240 |
.extra-link { |
241 |
color: @gray; |
242 |
text-decoration: none; |
243 |
border: none; |
244 |
font-size: 0.8em; |
245 |
margin-top: 1.3em; |
246 |
float: right; |
247 |
} |
248 |
} |
249 |
|
250 |
&.innerlabels label { |
251 |
position: absolute; |
252 |
top:1em; |
253 |
left:1.5em; |
254 |
color: #aaa; |
255 |
} |
256 |
|
257 |
&.innerlabels p { |
258 |
position: relative; |
259 |
} |
260 |
|
261 |
input.text, input[type="text"], input[type="password"] { |
262 |
#forms.input(); |
263 |
} |
264 |
|
265 |
input.submit, input[type="submit"] { |
266 |
.button(); |
267 |
} |
268 |
|
269 |
|
270 |
.with-errors { |
271 |
input, textarea, select { |
272 |
color: @red; |
273 |
} |
274 |
label { |
275 |
color: @errorColor; |
276 |
} |
277 |
} |
278 |
} |
279 |
|
280 |
.form-error { |
281 |
position: absolute; |
282 |
background-color: @red; |
283 |
color: #fff; |
284 |
font-size: 0.8em; |
285 |
padding: 2px 5px; |
286 |
border-radius: 5px; |
287 |
} |
288 |
|
289 |
.form-errors.all { |
290 |
.form-error { |
291 |
position: relative; |
292 |
border-radius: 0; |
293 |
margin-bottom: 1.3em; |
294 |
padding: 0.5em; |
295 |
} |
296 |
} |
297 |
|
298 |
div.form-stacked { |
299 |
margin-bottom: 4em; |
300 |
} |
301 |
// content types |
302 |
.section { |
303 |
h2 { |
304 |
font-size: 1.1em; |
305 |
margin-bottom: 1.5*@gridGutterWidth; |
306 |
} |
307 |
|
308 |
p { |
309 |
line-height: 1.7em; |
310 |
} |
311 |
} |
312 |
|
313 |
|
314 |
// accounts specific styles |
315 |
.service-desc { |
316 |
margin-top: 4em; |
317 |
|
318 |
} |