Formular:Schlagworte q: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 47: | Zeile 47: | ||
border-radius: 0.5em; | border-radius: 0.5em; | ||
background: #dbf0ff; | background: #dbf0ff; | ||
| − | } | + | } |
| − | + | .infoTextBody { | |
| − | + | width: max(60%,18rem); | |
| − | + | margin: auto; | |
| − | + | } | |
| − | |||
| − | } | ||
#q_wrapper { | #q_wrapper { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| − | justify-content: space-between | + | justify-content: space-between; |
| − | |||
background: #eee; | background: #eee; | ||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
.formOptions { | .formOptions { | ||
| − | width: max( | + | width: max(20em,48%); |
| + | } | ||
| + | .formOptions#thema { | ||
width: auto; | width: auto; | ||
| − | } | + | } |
| − | .formOptions[id^= | + | .formOptions[id^=medium] { |
display: none; | display: none; | ||
} | } | ||
| Zeile 80: | Zeile 75: | ||
background: #fff; | background: #fff; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
| + | } | ||
| + | .radioButtonSpan, | ||
| + | .checkboxesSpan { | ||
| + | display: block; | ||
| + | column-width: 15em; | ||
| + | } | ||
| + | #pfForm label.checkboxLabel, | ||
| + | .formOptions label { | ||
| + | display: block; | ||
| + | width: 13.5em; | ||
| + | padding-left:1.5em; | ||
| + | position: relative; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | #pfForm input[type="checkbox"], | ||
| + | #pfForm input[type="radio"] { | ||
| + | -webkit-appearance: none; | ||
| + | appearance: none; | ||
| + | position: absolute; | ||
| + | left: 0; | ||
| + | top: 0.2em; | ||
| + | margin: 0; | ||
| + | display: inline-block; | ||
| + | width: 1.1rem; | ||
| + | height: 1.1rem; | ||
| + | } | ||
| + | #pfForm input[type="radio"] { | ||
| + | border-radius: 50%; | ||
| + | background-color: #fff; | ||
| + | border: .15em solid #aaa; | ||
| + | box-shadow: inset 0 0 0 0.2em #fff; | ||
} | } | ||
| − | + | #pfForm input[type="radio"]:hover { | |
| − | + | background-color: #ccc; | |
| − | |||
} | } | ||
| − | + | #pfForm input[type="radio"]:checked { | |
| − | + | background-color: #155bdb; | |
| + | border-color: #72a4ff; | ||
} | } | ||
| − | . | + | #pfForm input[type="checkbox"] { |
| − | + | font-family: 'Font Awesome 5 Free'; | |
| + | font-weight: 400; | ||
| + | font-size: 1rem; | ||
| + | line-height: 1rem; | ||
| + | border-radius: 0.2em; | ||
| + | box-shadow: 1px 1px 2px 0px #aaa; | ||
| + | background: #eee; | ||
} | } | ||
| − | + | #pfForm input[type="checkbox"]:checked { | |
| − | + | background-color: #cfdcff; | |
| − | |||
} | } | ||
| − | . | + | #pfForm input[type="checkbox"]::before { |
| − | + | content: '\f00c'; | |
| − | + | color: #003dad; | |
| + | position: absolute; | ||
| + | left: 0; | ||
| + | top: 0; | ||
| + | font-size: 1.3em; | ||
| + | opacity:0; | ||
| + | } | ||
| + | #pfForm input[type="checkbox"]:hover::before { | ||
| + | opacity:.2; | ||
| + | } | ||
| + | #pfForm input[type="checkbox"]:checked::before { | ||
| + | opacity:1; | ||
| + | } | ||
| + | .q_button { | ||
| + | width: 100%; | ||
| + | text-align: center; | ||
| + | padding-top: 1em; | ||
} | } | ||
#infoButton { | #infoButton { | ||
Version vom 21. Juli 2022, 11:31 Uhr
Dies ist das Formular „Schlagworte q“. Es definiert eine Abfrage von Bildern und Fachbegriffen nach Themen. S.a. Vorlage:Schlagworte q