Seite ohne Menü doch mit Marginalspalte (nur andere Farbe)
[website] / src / main / webapp / less / base / formulare.less
1 /** Formulare *****************************************************************/
2
3 .form {
4   position: relative;
5   width: 100%;
6   overflow: hidden;
7 }
8
9 /** Trennlinie */
10 .form hr.f {
11   border-style: none;
12   border-top-style: dashed;
13   border-color: @normal;
14   border-width: .0625em;
15   margin: .625em 0; /** 10px 0 */
16   background-color: transparent;
17 }
18
19 /** Text im Formular */
20 .form p.f {
21   color: @schrifthell;
22 }
23 .form p.f,
24 .form .radiobutton > legend.f,
25 .form .checkbox > legend.f,
26 .form .textarea > label.f {
27   display: block;
28   font-size: 87.5%; /** 14px */
29   line-height: 1.5em; /** 21px */
30   color: @schrifthell;
31   margin: .428571429em 0; /** 6px 0 */
32 }
33
34 /** Aufzählungen im Formular */
35 .form ul.f,
36 .form ol.f {
37   color: @schrifthell;
38   margin: 1em 0;
39 }
40
41 /** Info-Text */
42 .form p.f.info,
43 .form .textarea > label.f.info,
44 .form .radiobutton > legend.f.info,
45 .form .checkbox > legend.f.info,
46 .form .textarea > label.f.info {
47   display: block;
48   font-size: 81.25%; /** 13px */
49   line-height: 1.230769231em; /** 16px */
50   font-style: italic;
51   color: @schrifthell;
52   padding: 0 0 0 1.538461538em; /** 0 0 0 20px */
53   background-image: url(../../img/em.png);
54   background-repeat: no-repeat;
55   background-position: 0 1px;
56   margin-top: .461538462em; /** 6px */
57   margin-bottom: .461538462em; /** 6px */
58 }
59 .form .info > a {
60   display: inline-block;
61 }
62
63 /** Überschriften */
64 .form h1.f {
65   font-size: 137.5%; /** 22px */
66   letter-spacing: .0454545em; /** 1px */
67   line-height: 1em;
68   padding: 0 0 .454545455em; /** 0 0 10px */
69   border-bottom: .090909091em solid @normal; /** 2px */
70   margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */
71 }
72 .form h2.f {
73   font-size: 100%; /** 16px */
74   letter-spacing: .0625em; /** 1px */
75   text-transform: uppercase;
76   line-height: 1.625em; /** 26px */
77   padding: 0 0 0 .125em; /** 0 0 0 2px */
78   border-bottom: .0625em solid @normal; /** 1px */
79   margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */
80 }
81 .form h3.f {
82 /**  border-bottom: 1px dashed @normal; */
83 }
84 .form p.required {
85   text-indent: -999em;
86   margin: -1.785714286em 0 0 0; /** -25px 0 0 0 zu 14px */
87 }
88 .form p.required > strong.r {
89   display: block;
90   float: right;
91   position: relative;
92   right: -994em;
93   margin-right: 1em; /** 14px */
94   font-weight: normal;
95 }
96 .form p.required > strong.symbol {
97   font-size: 128.5714286%; /** 18px zu 14px */
98   margin-right: .555555em; /** 10px */
99   padding-top: .1666666em; /** 3px */
100   right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */
101   font-weight: 700;
102   color: @dunkel;
103 }
104
105 /** Fehler-Hinweise */
106 .f.error {
107   color: @fehler;
108 }
109 span.f.error {
110   display: block;
111   position: relative;
112   font-size: 87.5%; /** 14px */
113   line-height: 1.214285714em; /** 17px */
114   padding: .571428571em; /** 8px */
115   color: @hintergrund;
116   background-color: @fehler;
117   margin: .857142857em 0 0 0; /** 12px 0 0 0 */
118 }
119 span.f.error > span.e {
120   display: block;
121   width: .857142857em; /** 12px */
122   height: .428571429em; /** 6px */
123   background-image: url(../../img/arrow-red.gif);
124   text-indent: -9999em;
125   position: absolute;
126   top: -.428571429em; /** -6px */
127   left: 2.142857143em; /** 30px */
128 }
129 span.f.error > strong.e {
130   text-transform: uppercase;
131 }
132
133 /** Input, Select und Dateiupload mit Label */
134 .form .text,
135 .form .select,
136 .form .file {
137   position: relative;
138   margin-bottom: .75em; /** 12px */
139 }
140 .form .text,
141 .form .file {
142   margin-right: 10em; /** 160px */
143 }
144 .form .select {
145   margin-right: 9em; /** 144px */
146 }
147 h2.f + div.text,
148 h2.f + div.select,
149 h2.f + div.file,
150 h2.f + div.captcha,
151 p.f + div.text,
152 p.f + div.select,
153 p.f + div.file {
154   margin-top: 20px;
155 }
156 .form .text > label.f,
157 .form .textarea > label.f,
158 .form .select > label.f,
159 .form .file > label.f,
160 .form .captcha > span.f {
161   display: block;
162   position: relative;
163   font-size: 87.5%; /** 14px */
164   line-height: 1.214285714em; /** 17px */
165   padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */
166   color: @schrift;
167 }
168 .form .file > label.f {
169   padding-top: .285714286em; /** 4px */
170   padding-bottom: .285714286em; /** 4px */
171 }
172 .form .captcha > span.f {
173   position: absolute;
174 }
175 .form .required > label.f {
176   padding-left: 1em; /** 14px */
177 }
178 .form .required > label.f > .required {
179   display: block;
180   position: absolute;
181   font-size: 128.5714286%; /** 18px zu 14px */
182   font-weight: 700;
183   color: @dunkel;
184   top: .611111111em; /** 11px */
185   left: 0;
186 }
187 .form .file > label.f > .required {
188   top: .5em; /** 7px */
189 }
190 .form .text > input.f,
191 .form .select > select.f,
192 .form .file > input.f {
193   display: block;
194   width: 100%;
195   position: absolute;
196   top: 0;
197   font-size: 81.25%; /** 13px */
198   border: .076923077em solid @normal; /** 1px */
199   color: @schrift;
200   background-color: @sehrhell;
201 }
202 .form .text > input.f {
203   line-height: 1.307692308em; /** 17px */
204   padding: .538461538em; /** 7px */
205   right: -12.307692308em; /** -160px */
206 }
207 .form .select > select.f {
208   line-height: 1.230769231em; /** 16px */
209   padding: .461538462em .538461538em; /** 6px 7px */
210   right: -11.076923077em; /** -144px */
211 }
212 .form .file > input.f {
213   margin-left: 11.076923077em; /** 144px */
214 }
215 .form .captcha > img.f {
216     float: right;
217     margin-top: -.9375em; /** 15px */
218     width: 7.5em; /** 120px */
219     height: 3.75em; /** 60px */
220 }
221 .form .text > input.f:focus,
222 .form .select > select.f:focus,
223 .form .text > input.f:active,
224 .form .select > select.f:active {
225   background-color: transparent;
226 }
227 .form .text > p.f.info,
228 .form .select > p.f.info,
229 .form .file > p.f.info {
230   position: relative;
231   left: 11.076923077em; /** 144px */
232 }
233 .form .text > span.f.error,
234 .form .select > span.f.error,
235 .form .file > span.f.error {
236   width: 100%;
237   margin: .857142857em 0 0 10.285714286em; /** 12px 0 0 144px zu 14(!)px*/
238 }
239
240 /** Textfelder */
241 .form .textarea {
242   position: relative;
243   margin: 0 .6875em .75em .6875em; /** 0px 11px 12px 11px */
244 }
245 .form .textarea > label.f {
246   margin: .615384615em -.846153846em; /** 8px -11px */
247 }
248 .form .textarea > textarea.f,
249 .form .textarea > div.textarea {
250   width: 100%;
251   border: .076923077em solid @normal; /** 1px */
252   color: @schrift;
253   background-color: @sehrhell;
254   padding: .769230769em; /** 10px */
255   position: relative;
256   left: -.846153846em; /** -11px */
257 }
258 .form .textarea > div.textarea {
259   margin: 0;
260   font-size: 87.5%; /** 14px */
261 }
262 .form .textarea > textarea.f:focus,
263 .form .textarea > textarea.f:active {
264   background-color: transparent;
265 }
266 .form .textarea > span.f.error {
267   margin: .714285714em -.785714286em 0 -.785714286em; /** 10px -11px 0 -11px */
268 }
269
270 /** Radiobuttons und Checkboxen */
271 .form .radiobutton > legend.f.info,
272 .form .checkbox > legend.f.info {
273   padding: .230769231em 0 0 1.538461538em; /** 3px 0 0 20px zu 13px*/
274   background-position: 0 .230769231em; /** 0 3px */
275 }
276 .form .col2,
277 .form .radiobutton > .col2,
278 .form .checkbox > .col2 {
279   width: 48%;
280   float: left;
281 }
282 .form .col2.left,
283 .form .radiobutton > .col2.left,
284 .form .checkbox > .col2.left {
285   margin-right: 2%;
286 }
287 .form .col2.right,
288 .form .radiobutton > .col2.right,
289 .form .checkbox > .col2.right {
290   float: right;
291   margin-left: 2%;
292 }
293 .form div.checkbox,
294 .form .radiobutton > .f,
295 .form .checkbox > .f,
296 .form .radiobutton > .col2 > .f,
297 .form .checkbox > .col2 > .f {
298   position: relative;
299 }
300 .form div.checkbox > label.f,
301 .form .radiobutton > .f > label.f,
302 .form .checkbox > .f > label.f,
303 .form .radiobutton > .col2 > .f > label.f,
304 .form .checkbox > .col2 > .f > label.f {
305   display: block;
306   font-size: 87.5%; /** 14px */
307   line-height: 1.285714286em; /** 18px */
308   color: @schrift;
309   margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */
310 }
311 .form div.checkbox > input.f,
312 .form .radiobutton > .f > input.f,
313 .form .checkbox > .f > input.f,
314 .form .radiobutton > .col2 > .f > input.f,
315 .form .checkbox > .col2 > .f > input.f {
316   position: absolute;
317   margin: .285714286em 0; /** 4px 0 */
318 }
319 .form div.checkbox > input.error,
320 .form .radiobutton > .f > input.error,
321 .form .checkbox > .f > input.error {
322   /** Wäre möglich -- konnte aber keine CSS-Eigenschaft finden, die sich rot färben ließ: der Firefox hat alles ignoriert! */
323 }
324 .form div.checkbox:hover > label.f,
325 .form .radiobutton > .f:hover > label.f,
326 .form .checkbox > .f:hover > label.f,
327 .form div.checkbox:focus > label.f,
328 .form .radiobutton > .f:focus > label.f,
329 .form .checkbox > .f:focus > label.f,
330 .form div.checkbox:active > label.f,
331 .form .radiobutton > .f:active > label.f,
332 .form .checkbox > .f:active > label.f,
333 .form .radiobutton > .col2 > .f:hover > label.f,
334 .form .checkbox > .col2 > .f:hover > label.f,
335 .form .radiobutton > .col2 > .f:focus > label.f,
336 .form .checkbox > .col2 > .f:focus > label.f,
337 .form .radiobutton > .col2 > .f:active > label.f,
338 .form .checkbox > .col2 > .f:active > label.f {
339   color: @schrift;
340 }
341
342 /** Sondereinstellungen für Fehler-Hervorhebungen */
343 .form .text > input.error,
344 .form .textarea > textarea.error,
345 .form .select > select.error,
346 .form .file > input.error {
347   color: @schrift;
348   font-weight: 700;
349   border-color: @fehler;
350   background-color: @fehlerhell;
351 }
352
353
354 /** Absende-Buttons */
355 ul.buttons,
356 ol.buttons {
357   margin: 0;
358   padding: 0;
359   list-style-type: none;
360   text-align: right;
361 }
362 ul.buttons > li.b,
363 ol.buttons > li.b {
364   display: inline-block;
365   margin: 0;
366   padding: 0;
367 }
368 .form .submit {
369   text-align: right;
370   margin-bottom: .75em; /** 12px */
371 }
372 .form .submit > input.f,
373 .form .submit > a.f,
374 a.ln.button {
375   display: inline-block;
376   font-family: 'PT Sans', Helvetica, Arial, sans-serif;
377   font-size: 81.25%; /** 13px */
378   letter-spacing: .076923077em; /** 1px */
379   line-height: 25px;
380   padding:0 6px;
381   height: 1.923076923em; /** 25px */
382   color: @hintergrund;
383   font-weight: 700;
384   background-color: @normal;
385   border-style: none;
386 }
387 .form .submit > input.f,
388 .form .submit > a.f,
389 ul.buttons > li.b,
390 ol.buttons > li.b {
391   margin: 0 0 0 .615384615em; /** 0 0 0 8px */
392 }
393 a.ln.button:before {
394   content: none;
395 }
396 .form .submit > input.left,
397 .form .submit > a.left,
398 a.ln.button.left {
399   float: left;
400   margin: 0 .923076923em 0 0; /** 0 12px 0 0 */
401 }
402 .form .submit > input.right,
403 .form .submit > a.right,
404 a.ln.button.right {
405   float: right;
406   margin: 0 0 0 .923076923em; /** 0 0 0 12px */
407 }
408 .form .submit > input.f:hover,
409 .form .submit > a.f:hover,
410 a.ln.button:hover,
411 .form .submit > input.f:focus,
412 .form .submit > a.f:focus,
413 a.ln.button:focus,
414 .form .submit > a.f:active,
415 .form .submit > input.f:active,
416 a.ln.button:active {
417   background-color: @dunkel;
418   text-decoration: none;
419 }