Formular:Schlagworte q: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
Zeile 52: Zeile 52:
 
     margin: auto;
 
     margin: auto;
 
}  
 
}  
#q_wrapper {
+
#infoButton i {
     display: flex;
+
    position: absolute;
     flex-wrap: wrap;  
+
     display: block;
     justify-content: space-between;  
+
    right: -2.2em;
 +
    top: 1em;
 +
    background: #0c67d3;
 +
    color: #fff;
 +
    width: 2em;
 +
     text-align: center;
 +
     line-height: 2em;
 +
    border-radius: 50%;
 +
opacity: .6;  
 +
}
 +
#infoButton i:hover {
 +
opacity: 1;
 +
}
 +
#q_wrapper {
 
     background: #eee;
 
     background: #eee;
 
}
 
}
.formOptions {
+
.formOptions {  
    width: max(20em,48%);
 
 
}  
 
}  
.formOptions#thema {
+
.formOptions#thema {  
    width: 100%;
 
 
}
 
}
 
.formOptions[id^=medium] {  
 
.formOptions[id^=medium] {  
 +
display:none;
 
}
 
}
 
.formOptionsBody  {
 
.formOptionsBody  {
Zeile 71: Zeile 83:
 
     overflow: auto;
 
     overflow: auto;
 
     background: #fff;
 
     background: #fff;
     border: 1px solid #ddd;
+
     border: 1px solid #ddd;  
     height: 6em;
+
     max-height: 12em;  
 
}   
 
}   
#thema .formOptionsBody{
 
    height: 10em;
 
    }
 
 
.radioButtonSpan {  
 
.radioButtonSpan {  
 
     display: block;
 
     display: block;
     column-width: 15em;
+
     column-width: 10em;
 
}
 
}
#pfForm label.checkboxLabel,
 
 
.formOptions label {
 
.formOptions label {
 
     display: block;
 
     display: block;
     width: 13.5em;   
+
     width: 8.5em;   
 
     padding-left:1.5em;
 
     padding-left:1.5em;
 
     position: relative;
 
     position: relative;
 
     cursor: pointer;
 
     cursor: pointer;
 
}  
 
}  
#pfForm input[type="checkbox"],
 
 
#pfForm input[type="radio"] {       
 
#pfForm input[type="radio"] {       
 
     -webkit-appearance: none;
 
     -webkit-appearance: none;
Zeile 114: Zeile 121:
 
     border-color: #72a4ff;
 
     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 {
 
.q_button {
 
     width: 100%;
 
     width: 100%;
Zeile 153: Zeile 133:
 
     z-index:1;
 
     z-index:1;
 
}
 
}
#infoButton i {
 
    position: absolute;
 
    display: block;
 
    right: -2.2em;
 
    top: 1em;
 
    background: #0c67d3;
 
    color: #fff;
 
    width: 2em;
 
    text-align: center;
 
    line-height: 2em;
 
    border-radius: 50%;
 
opacity: .6;
 
}
 
#infoButton i:hover {
 
opacity: 1;
 
}
 
.radioButtonItem {
 
    display: inline-block;
 
}
 
 
#wpRunQuery {
 
#wpRunQuery {
 
     display: inline-block;
 
     display: inline-block;

Version vom 21. Juli 2022, 12:02 Uhr

Dies ist das Formular „Schlagworte q“. Es definiert eine Abfrage von Bildern und Fachbegriffen nach Themen. S.a. Vorlage:Schlagworte q