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, 10:31 Uhr
Dies ist das Formular „Schlagworte q“. Es definiert eine Abfrage von Bildern und Fachbegriffen nach Themen. S.a. Vorlage:Schlagworte q