/** * CSS für Formulare * * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework * * @copyright Copyright 2005-2010, Dirk Jesse * @license CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/), * YAML-C (http://www.yaml.de/en/license/license-conditions.html) * @link http://www.yaml.de * @package yaml * @version 3.2 * @revision $Revision: 392 $ * @lastmodified $Date: 2010-04-01 15:00:00 $ */ @media screen, projection { /* Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox) */ input[type=hidden] { display: none !important; } .vie-form fieldset, .vie-form { overflow: hidden; } #vie_col1 .vie-form fieldset { background: #ccc; } /* ausser bei verschachtelten Fieldsets */ #vie_col1 .vie-form fieldset fieldset { background: #f6f6f6 !important; } /** * @note still looking for a way to override legend in Firefox's * resource://gre/res/forms.css without adding additional * markup. mozilla.org think that fieldset and legend are * replaced elements. We disagree. * @see https://bugzilla.mozilla.org/show_bug.cgi?id=269908 (Reported:2004-11-14 21:46) * @see https://bugzilla.mozilla.org/show_bug.cgi?id=292736 (Reported:2005-05-03 07:11) * @affected Gecko ≤ 1.9.1.7 / 20091221 (Firefox ≤ 3.5.7) * @css-for all browsers * @ugly yes */ #vie_col3 .vie-feedback { padding-top:4em; } legend { font-weight: bold; color: #000; } #vie_col1 .vie-form .vie-formblk legend, #vie_col2 .vie-form .vie-formblk legend, #vie_col3 .vie-form .vie-formblk legend{ background: #ccc; display: block; font-size: 1.077em; padding: 4px 10px; white-space: normal; width: 100%; } .vie-fragenblock { margin-bottom: 1em; } img.vie-smiley { height:2em; width:2em; } .vie-fragenblock th { text-align:left; font-weight: normal; padding: 0.3em; } .vie-fragenblock .vie-row1 th, .vie-fragenblock .vie-row1 td { background: #e6e6e6; } .vie-fragenblock .vie-row2 th, .vie-fragenblock .vie-row2 td { background: #fff; } .vie-fragenblock th.vie-firstlinecolheader, .vie-fragenblock td { text-align:center; vertical-align: middle; width: 2em; padding: 0.3em; } .vie-page #vie_col3 .vie-feedback-content h2 { font-size:1.077em; margin-top:1em; padding:0; } .vie-page #vie_col3 .vie-fragenblock ul { list-style:none outside none; margin-left: 0; } .vie-page #vie_col3 .vie-fragenblock ul li { padding:0; margin: 0 0 0.45em; } .vie-fragenblock .vie-kommentare { width:95%; } input.viesenden[value="Fragebogen abschicken"] { margin-left: 0; } .vie-form h2.vie-error-head, .vie-form h3.vie-error-head { margin: 0 0 .5em 0; padding: 5px 10px 0 10px; color: #dc0b33; font-size:1.1em; font-weight:normal; } /* ausser bei verschachtelten Fieldsets */ #vie_col1 .vie-form fieldset fieldset legend , #vie_col2 .vie-form fieldset fieldset legend { background: #f6f6f6; /* display: block; */ font-size: 1em; padding: 0; /* white-space: normal; width: 100%; */ } .vie-form .vie-egovlogo p * { color: #006464; font-family: "Times New Roman",Times,serif !important; font-size: 1.8em; font-style: italic; font-weight: bold; line-height: 105%; margin: 0; padding: 0; } /* Farbe über 2 zus. Elemente, weil Firefox sonst nicht mitspielt */ .vie-formblk { background-color: #ccc; border: 1px solid #ccc; position: relative; margin-bottom: 1em; } /* ausser bei verschachtelten Fieldsets */ .vie-form .vie-formblk .vie-formblk { background-color: #f6f6f6; border: 0px solid #ccc; margin-top: 1em; /* Wert vom Äusseren zurücksetzen, addiert sich sonst */ margin-bottom: 0; } #vie_col3 .vie-form .vie-formblk fieldset fieldset legend {background:none;font-size:1em;padding:0;} .vie-formblk-content { background-color: #f6f6f6; border-top: 1px solid #ccc; padding: 20px 10px 10px 10px; } /* ausser bei verschachtelten Fieldsets */ .vie-formblk-content .vie-formblk-content { border-top: 0px solid #f6f6f6; padding: 10px 0 0 0; } /* geänderte Werte für kleine Suchwidgets wie die Veranstaltungssuche */ form.vie-va-suche .vie-formblk-content { padding: 10px 0; } form.vie-va-suche .vie-formblk-content .vie-form-type-text label, form.vie-va-suche .vie-formblk-content .vie-form-type-select { padding-left: 10px; /* wird benötigt, damit die Elemente bei Umbrüchen nicht aneinander kleben */ line-height: 2.1; } form.vie-va-suche .vie-formblk-content .vie-form-type-button { padding-left: 10px; } /* Bei checkboxen andersrum, da Label rechts */ form.vie-va-suche .vie-formblk-content .vie-form-type-check label { padding-right: 10px; padding-left: 0; } /* geänderte Werte bei Subcolumns wg. Overflow in Firefox */ div.vie-subcolumns.vie-formblk-content { padding: 20px 0 10px 0; } /* um die Fluchten zur 25%-Achse wiederherzustellen */ div.vie-subcolumns.vie-formblk-content .vie-subcl { margin-left: 15px; } /* zur (optionalen) Trennung mehrerer Fieldsets in einer Form */ .vie-form hr { margin: 0 0 1em 0; } /* bissl kompakter in der Sidebar */ .vie-sidebar-form hr { margin: .5em 0 !important; } /* Abstand nach aussen */ .vie-sidebar-form fieldset { padding: 10px; } /* Gestaltung der kapselnden DIV-Elemente -------------------------- */ /* Datei-Upload */ .vie-form .vie-form-type-file, /* Input type=text UND Textarea */ .vie-form .vie-form-type-text, /* Select */ .vie-form .vie-form-type-select, /* input type=submit UND Button */ .vie-form .vie-form-type-button { margin: 0 0 .75em 0; padding: 5px 0; position: relative; overflow: hidden; } /* Ausnahme in der Sidebar */ .vie-sidebar .vie-form-type-button { /*margin-left: 10px;*/ background: #fff; } .vie-sidebar .vie-form-type-button input { background: #fff; border: 0px solid #fff; height: 19px; width: 20px; position: relative; top: .5em; } /* Textfelder mit dicktengleicher Schrift (Styleguide S.37) * OHNE Fallback monospace, weil auch hier mal wieder die CSS-Specs * waren und die Browserhersteller sich nicht zu ungenau einigen * konnten. Mehr dazu: http://webkit.org/blog/67/strange-medium/ bzw. * http://www.456bereastreet.com/archive/200609/font_size_inconsistencies_with_fontfamily_monospace/ */ .vie-form-monospaced input, .vie-form-monospaced textarea { /* font-family: Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier; */ /* Versuch eines neuen Fixes via http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ */ font-family: Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace, serif; } /* Frickelfox-Bug, Regel bitte nicht ändern */ textarea { font: 100% "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", GillSans, "Gill Sans", Helvetica, Arial, FreeSans, sans-serif !important; } .vie-form textarea {margin-bottom:1em;} .vie-form-small textarea {width:auto !important} .vie-form .vie-form-type-check { margin: 0 0 .2em 0; padding: .2em 0 .2em 0; position: relative; overflow: hidden; } /* Labels bei Checkboxen & Radionbuttons immer rechts daneben */ .vie-form .vie-form-type-check label { display: inline; /* To-Do: Abstand nach links? */ padding-left:5px; } /* To-Do: cursor: hand in iehacks */ label, .vie-form-type-button input, .vie-form-type-check input, .vie-form-type-select select { cursor: pointer; } .vie-form .vie-form-type-text input, .vie-form .vie-form-type-text textarea, .vie-form .vie-form-type-select select { border: 1px solid #999; padding: .2em; } /* unterdrückt die Möglichkeit, Textareas in Webkit-Browsern zu vergrößern. Bei Bedarf einfach Klasse noresize an Element dranhängen */ textarea.noresize, input[type=text].noresize, input[type=password].noresize { resize: none; } /* für Inputs, die sich nicht über die volle Breite erstrecken sollen (z.B. |PLZ|Stiege|Hausnummer| etc.) */ .vie-form-small input, .vie-form-small select, .vie-form-inline-label, .vie-form-inline-label label { /* die 25%ige Breite zurücksetzen */ width: auto !important; } .vie-form-inline-label label { float: left; /* To-Do: Abstand nach links & rechts ? */ padding: 0 12px 0 30px !important; } /* Geänderte Position der Pflichtfeldkenzeichnung; umgebendes Elemet relativ pos., Icon dann absolut, hier nur geänderte Werte, Rest kommt aus der Regel für normale Labels */ .vie-form-inline-label label.vie-form-mandatory img { right: 2px; top: -5px; } /* Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */ input[type=text]:focus, input[type=text]:hover, input[type=text]:active, input[type=password]:focus, input[type=password]:hover, input[type=password]:active, /*, select:focus, select:hover, select:active, */ textarea:focus, textarea:hover, textarea:active { background: #fff; border: 1px #000 solid !important; /* Zusätzlichen Schatten aussenrum zur besseren Hervorhebung */ box-shadow: rgba(9, 95, 149, 0.496094) 0px 0px 5px; -webkit-box-shadow: rgba(9, 95, 149, 0.496094) 0px 0px 5px; -moz-box-shadow: rgba(9, 95, 149, 0.496094) 0px 0px 5px; -o-box-shadow: rgba(9, 95, 149, 0.496094) 0px 0px 5px; /* Outline für alle Browser die o.g. verstehen unterdrücken, für alle anderen Browser die normale outline */ -webkit-outline: none; -moz-outline: none; -o-outline: none; } /* Ausnahme bei disabled-Feldern */ .vie-form .vie-form-type-text input[disabled=disabled], .vie-form .vie-form-type-text input[disabled=disabled]:focus, .vie-form .vie-form-type-text input[disabled=disabled]:hover { border: 1px #bbb solid; /* Achtung: wird in Safari wesentlich heller dargestellt! Bug? */ color: #666; /* hiermit geht's dann. Nicht schön, aber wenn's hilft … */ -webkit-text-fill-color: #666; } /* Alternative Ausgabeform mit Text-Optik ohne sichtbare Felder dann mit zus. Klasse .vie-form-disabled im Container */ .vie-form-disabled input, .vie-form-disabled label, .vie-form-disabled textarea, input[disabled=disabled], input[disabled=disabled]:focus, input[disabled=disabled]:hover, input[readonly=readonly], input[readonly=readonly]:focus, input[readonly=readonly]:hover, textarea[disabled=disabled], textarea[disabled=disabled]:focus, textarea[disabled=disabled]:hover, textarea[readonly=readonly], textarea[readonly=readonly]:focus, textarea[readonly=readonly]:hover, /* Ausnahme von der Ausnahme */ .vie-form-disabled input:focus, .vie-form-disabled input:hover, .vie-form-disabled textarea:focus, .vie-form-disabled textarea:hover { border: 0px #bbb solid !important; /* hier keine Hervorhebung */ outline: none !important; /* auch nicht per outline */ box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; /* Hintergrund = fieldset */ background: #f6f6f6 !important; cursor: default !important; /* #666 ist für WCAG AA ausreichend (5.74:1) */ color: #666 !important; } /* Ausnahme bei input type=file - hier kommt das UI aus dem Browser .vie-form .vie-form-type-file input:focus, .vie-form .vie-form-type-file input:hover { background: #fff; border: 0px #ccc solid; outline: 1px solid #ccc !important; } */ /* hüpfende Checkboxen & Radiobuttons in IE8 vermeiden */ .vie-form .vie-form-type-check input:focus, .vie-form .vie-form-type-check input:hover, .vie-form .vie-form-type-check input:active { border: 0 none; } /* Buttons --------------------------------------------------------- */ /* für Hilfe-Links etc. innerhalb des Button-Containers */ .vie-form .vie-form-type-button a { padding-left: 20px; } .vie-form .vie-form-type-button input { background: #ccc; border-top: 2px solid #eee; border-right: 2px solid #444; border-bottom: 2px solid #444; border-left: 2px solid #eee; color: #000; /* repariert den auto-padding-Bug im IE7 */ overflow: visible; padding: .2em .5em; width: auto; } /* optionales Button-Styling für IE6 mit Klassen */ .vie-form .vie-form-type-button input.submit { background: #ccc; border-top: 2px solid #eee; border-right: 2px solid #444; border-bottom: 2px solid #444; border-left: 2px solid #eee; color: #000; padding: .2em 1em; width: auto; } /* Effekt zur Hervorhebung von Schaltern bei :hover oder :focus */ .vie-form .vie-form-type-button input:focus, .vie-form .vie-form-type-button input:hover { background: #ddd; border-top: 2px solid #fff; border-right: 2px solid #222; border-bottom: 2px solid #222; border-left: 2px solid #fff; color: #000; } .vie-form .vie-form-type-button input:active { background: #ddd; border-top: 2px solid #222; border-right: 2px solid #fff; border-bottom: 2px solid #fff; border-left: 2px solid #222; color: #000; } .vie-form .vie-form-type-button input.submit:focus, .vie-form .vie-form-type-button input.submit:hover, .vie-form .vie-form-type-button input.submit:active { background: #ddd; color: #000; } /* Pflichtfelder kennzeichnen -------------------------------------- */ .vie-label, label.vie-form-mandatory { position: relative; } /* Clicking an image nested within a LABEL element (with a FOR attribute, explicity binding it with another control) does not transfer focus to its associated form control http://jhop.me/ie8-bugs#imagelabelfocus test case: http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/LabelForWithImage.html */ .vie-label .vie-icon-mandatory img, label .vie-icon-mandatory img { position: absolute; right: 9px; top: -5px; } .vie-formblk .vie-subcolumns .vie-form-label .vie-label .vie-label { display:inline; padding-right:10px; } .vie-label .vie-label .vie-icon-mandatory img { position: static; } #vie_col3_content legend label .vie-icon-mandatory img { vertical-align: middle; height: auto !important; } .vie-fieldcaption-1 .vie-label .vie-form-type-select select { width:auto; } /* Hinweis-Icon ---------------------------------------------------- */ .vie-form-info img { margin: 1px 0 0 10px; } .vie-form-type-check .vie-form-info img { position: relative; top: 4px; margin: 1px 0 0 10px; } legend .vie-form-info img { position: relative; top: 4px; margin: 0 0 0 10px; } .vie-egovhead { margin-bottom: 2em; position: relative; } .vie-egovlogo { overflow: visible; position: absolute; right: 0; text-align: right; top: 0; width: 25em; } #vie_col3_content .vie-form .vie-egovhead h1 { font-size: 1.692em; font-weight: 600; } .vie-page #vie_col3_content .vie-formpage-nr { font-size: 1.231em } /* Hinweisboxen vor dem Formular ----------------------------------- */ .vie-info { background: #f6f6f6; border: 1px solid #999; margin: 1em 0 1.5em 0; width: 99.7%; overflow: hidden; } /* mit roter Hinweisbox wie in den eGov-Formularen */ #vie_col3_content .vie-info h2.vie-legend-head, #vie_col2_content .vie-info h2.vie-legend-head { background: #dc0b33; color: #fff; display: inline-block; /* float: left; */ font-size: 1em; font-weight: 600; padding: 0 10px; margin: 0 !important; line-height: 2.5; } #vie_col3_content .vie-info .vie-info-link { display: inline-block; line-height: 2.5; margin:0; padding: 0 10px 0 5px; border-right: 2px solid #fff; } #vie_col3_content .vie-info ul.vie-info-list { list-style:none; margin: 0; } .vie-info ul.vie-info-list, .vie-info ul.vie-info-list li { display: inline; margin-bottom: 0 !important; line-height: 2.5; } .vie-info ul.vie-info-list li img { vertical-align: middle; padding: 0 5px 0 15px; } .vie-info ul.vie-info-list li .vie-icon-mandatory img { vertical-align: text-bottom; } /* Fehlermeldungen ------------------------------------------------- */ /* Icon */ .vie-icon-alert { vertical-align: middle; } .vie-form .vie-form-fehler label { color: #dc0b33; } #vie_col3_content .vie-form .vie-form-type-text select.vie-form-fehler, #vie_col3_content .vie-form .vie-form-fehler .vie-form-type-select select, #vie_col3_content .vie-form .vie-form-type-text textarea.vie-form-fehler, #vie_col3_content .vie-form .vie-form-type-text input.vie-form-fehler { border: 1px #dc0b33 solid; /* To-Do: Hintergrund auch einfärben? */ /* background: #faf4f4; */ } /* Fehlermeldung-Box vor dem Formular ------------------------------ */ .vie-form .vie-error { color: #dc0b33; border: 1px solid #dc0b33; background: #fefefe; } /* unterschiedliche Abstände je nach Platzierung in Haupt- oder Marginalspalte */ #vie_col1 .vie-form .vie-error, .vie-lonav #vie_col3 .vie-form .vie-error { margin: 1.5em 0; width: 99.7%; } #vie_col3 .vie-form .vie-error { margin: 10px; width: 90%; } .vie-lonav #vie_col3 .vie-form h2.vie-error-head, .vie-lonav #vie_col3 .vie-form h3.vie-error-head { margin: 0 0 .5em 0; padding: 5px 10px 0 10px; color: #dc0b33; } .vie-lonav #vie_col3 .vie-form ul.vie-error-list { margin-bottom: 0 !important; padding: 0 10px 10px 28px; } .vie-lonav #vie_col3 .vie-form ul.vie-error-list li, .vie-lonav #vie_col3 .vie-form ul.vie-error-list li a { color: #dc0b33; text-decoration:none; } /* @section Formular-Layout ------------------------------------- */ /* ----------------------------------------------------------------- */ /* Formulargestaltung, bei der label und input/select/textarea * mit display: block; gestaltet werden und die Inputs die volle * Breite einnehmen -