You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
567 lines
12 KiB
567 lines
12 KiB
/* common styles */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: #FFFFFF;
|
|
padding-top: 7px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
body,
|
|
textarea,
|
|
input,
|
|
select,
|
|
.senden {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.kontaktformular {
|
|
width: 600px;
|
|
max-width: 100%;
|
|
padding: 1.2rem;
|
|
margin-left:20px;
|
|
padding-top: 25px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
|
|
|
|
/* style common rows/grid */
|
|
|
|
.kontaktformular .row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 1.6rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.kontaktformular .row .col-sm-4 {
|
|
flex-grow:1;
|
|
flex-basis: 0;
|
|
margin: 0 .75rem;
|
|
position: relative;
|
|
}
|
|
.kontaktformular .row .col-sm-4:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.kontaktformular .row .col-sm-4:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.kontaktformular .row .col-sm-8 {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
|
|
/* style common labels */
|
|
|
|
.kontaktformular .row .control-label {
|
|
color: #404040;
|
|
margin-left:2.2px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* style rows with complex contents */
|
|
|
|
|
|
.kontaktformular .checkbox-row > div{
|
|
padding-bottom: 0rem;
|
|
padding-top:0.9rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.label-field {
|
|
color: #767688;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
left: 15px;
|
|
top: 12px;
|
|
padding: 0 5px;
|
|
background: #fff;
|
|
transition: 0.2s ease all;
|
|
-moz-transition: 0.2s ease all;
|
|
-webkit-transition: 0.2s ease all;
|
|
}
|
|
|
|
|
|
.input-field, .select-field, .textarea-field, .captcha-field, .question-field {
|
|
box-sizing: border-box;
|
|
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
|
-moz-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
|
-webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
padding: .84rem .8rem .60rem .8rem;
|
|
color: #555555;
|
|
margin-top:-1px;
|
|
border: 1px solid #CCCCCC;
|
|
border-radius: 2px;
|
|
transition: border-color ease-in-out .15s;
|
|
background-color: #fff;
|
|
}
|
|
.input-field:focus, .select-field:focus, .textarea-field:focus, .captcha-field:focus, .question-field:focus {
|
|
outline: none;
|
|
border: 1px solid #3266F2;
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-field:focus ~ .label-field, .textarea-field:focus ~ .label-field, .captcha-field:focus ~ .label-field, .question-field:focus ~ .label-field {
|
|
top: -9px;
|
|
font-size: 13px;
|
|
color: #3266F2;
|
|
}
|
|
|
|
select.select-field {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
select.textarea-field {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
select.captcha-field {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
select.question-field {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
select.select-field::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
select.textarea-field::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
select.captcha-field::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
select.question-field::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
.select-field.selected ~ .label-field {
|
|
top: -8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.input-field:not(:placeholder-shown) ~ .label-field {
|
|
top: -8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.textarea-field:not(:placeholder-shown) ~ .label-field {
|
|
top: -8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.captcha-field:not(:placeholder-shown) ~ .label-field {
|
|
top: -8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.question-field:not(:placeholder-shown) ~ .label-field {
|
|
top: -8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.textarea-field[value=""]:focus ~ .label-field {
|
|
top: 11px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.captcha-field[value=""]:focus ~ .label-field {
|
|
top: 11px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.question-field[value=""]:focus ~ .label-field {
|
|
top: 11px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.select-field:not([multiple]):not([size]) {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath id='Path_1' data-name='Path 1' d='M371,294l4,6,4-6Z' transform='translate(-371 -294)' fill='%23003d71'/%3E%3C/svg%3E%0A");
|
|
background-position: right 15px top 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.textarea-field:not([multiple]):not([size]) {
|
|
|
|
}
|
|
|
|
.captcha-field:not([multiple]):not([size]) {
|
|
|
|
}
|
|
|
|
.question-field:not([multiple]):not([size]) {
|
|
|
|
}
|
|
|
|
.did-error-input .input-field, .did-error-input .select-field, .did-error-input .textarea-field, .did-error-input .captcha-field, .did-error-input .question-field {
|
|
border: 2px solid #9d3b3b;
|
|
color: #9d3b3b;
|
|
}
|
|
.did-error-input .label-field {
|
|
font-weight: 600;
|
|
color: #9d3b3b;
|
|
}
|
|
.did-error-input .select-field:not([multiple]):not([size]) {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath id='Path_1' data-name='Path 1' d='M371,294l4,6,4-6Z' transform='translate(-371 -294)' fill='%239d3b3b'/%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
.did-error-input .textarea-field:not([multiple]):not([size]) {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath id='Path_1' data-name='Path 1' d='M371,294l4,6,4-6Z' transform='translate(-371 -294)' fill='%239d3b3b'/%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
.did-error-input .captcha-field:not([multiple]):not([size]) {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath id='Path_1' data-name='Path 1' d='M371,294l4,6,4-6Z' transform='translate(-371 -294)' fill='%239d3b3b'/%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
.did-error-input .question-field:not([multiple]):not([size]) {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath id='Path_1' data-name='Path 1' d='M371,294l4,6,4-6Z' transform='translate(-371 -294)' fill='%239d3b3b'/%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
}
|
|
.input-group .input-field {
|
|
border-radius: 0 4px 4px 0;
|
|
border-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.input-group-append {
|
|
display: flex;
|
|
align-items: center;
|
|
/* margin-left:-1px; */
|
|
}
|
|
|
|
.input-group-text {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
height: 34px;
|
|
color: #323840;
|
|
padding: 0 5px 0 20px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
border: 1px solid #3D85D8;
|
|
border-radius: 4px 0 0 4px;
|
|
border-right: none;
|
|
}
|
|
|
|
|
|
|
|
/* style checkbox-row */
|
|
|
|
.kontaktformular .checkbox-row{
|
|
margin-bottom: -10px;
|
|
}
|
|
|
|
|
|
.kontaktformular .checkbox-row .checkbox-inline{
|
|
display: block;
|
|
padding: 0rem 0 0rem 0px;
|
|
|
|
}
|
|
|
|
.kontaktformular .checkbox-row .checkbox-inline a:hover,
|
|
.kontaktformular .checkbox-row .checkbox-inline a:focus {
|
|
color: #0025e2;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.kontaktformular .checkbox-row .checkbox-inline a,
|
|
.kontaktformular .checkbox-row .checkbox-inline span {
|
|
color: #0020c1;
|
|
text-decoration: none;
|
|
line-height: 24px;
|
|
padding-left: 10px;
|
|
|
|
}
|
|
.kontaktformular .checkbox-row .checkbox-inline span{
|
|
color: inherit;
|
|
}
|
|
.kontaktformular .row input[type="checkbox"] {
|
|
height: 22px;
|
|
width: 22px;
|
|
border: 1px solid #CCCCCC;
|
|
border-radius: 2px;
|
|
transition: border-color ease-in-out .15s;
|
|
display: block;
|
|
float: left;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
margin-left: 0.5px;
|
|
background-color: #FFF;
|
|
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
|
-moz-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
|
-webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
|
}
|
|
.kontaktformular .row input:checked {
|
|
background: url(../img/check-solid.svg) no-repeat center center;
|
|
background-size: 75%;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* style submit-button */
|
|
|
|
.kontaktformular .row .senden {
|
|
width: 100%;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
height: 2.5rem;
|
|
margin-top: calc(1rem/16*5);
|
|
padding: .5rem .75rem;
|
|
color: white;
|
|
background-color: #337ab7;
|
|
border: 1px solid transparent;
|
|
border-color: #2e6da4;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.kontaktformular .row .senden:hover {
|
|
background-color: #286090;
|
|
border-color: #204d74;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* style errors */
|
|
|
|
.kontaktformular .row .error .select-label{
|
|
color: #404040;
|
|
margin-left:2.2px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.kontaktformular .row .error .control-label{
|
|
color: #404040;
|
|
margin-left:2.2px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.kontaktformular .row .error .textarea-label{
|
|
color: #404040;
|
|
margin-left:2.2px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.kontaktformular .row .error .input-field,
|
|
.kontaktformular .row .error .select-field,
|
|
.kontaktformular .row .error .textarea-field,
|
|
.kontaktformular .row .error .captcha-field,
|
|
.kontaktformular .row .error .question-field,
|
|
.kontaktformular .row .error .checkbox-inline input,
|
|
.kontaktformular.kontaktformular-validate .row .select-field:invalid,
|
|
.kontaktformular.kontaktformular-validate .row .input-field:invalid,
|
|
.kontaktformular.kontaktformular-validate .row .textarea-field:invalid,
|
|
.kontaktformular.kontaktformular-validate .row .captcha-field:invalid,
|
|
.kontaktformular.kontaktformular-validate .row .question-field:invalid,
|
|
.kontaktformular.kontaktformular-validate .row .checkbox-inline input:invalid{ /* style invalid fields only if user wants to send the form (integrated via js) */
|
|
background-color: #ffeaec;
|
|
border-color: #eac0c5;
|
|
}
|
|
|
|
.kontaktformular .row .error .label-field,
|
|
.kontaktformular .row .error .checkbox-inline input,
|
|
.kontaktformular.kontaktformular-validate .row .select-field:invalid ~ .label-field,
|
|
.kontaktformular.kontaktformular-validate .row .input-field:invalid ~ .label-field,
|
|
.kontaktformular.kontaktformular-validate .row .textarea-field:invalid ~ .label-field,
|
|
.kontaktformular.kontaktformular-validate .row .captcha-field:invalid ~ .label-field,
|
|
.kontaktformular.kontaktformular-validate .row .question-field:invalid ~ .label-field,
|
|
.kontaktformular.kontaktformular-validate .row .checkbox-inline input:invalid ~ .label-field
|
|
{ /* style invalid fields only if user wants to send the form (integrated via js) */
|
|
background-color: #ffeaec;
|
|
color: #767688;
|
|
|
|
}
|
|
|
|
|
|
.kontaktformular .row .errormsg .select-field:invalid,
|
|
.kontaktformular .row .errormsg .checkbox-inline input:invalid{ /* remove browser-style for invalid fields */
|
|
outline: none;
|
|
box-shadow:none;
|
|
}
|
|
.kontaktformular .row .errormsg .select-field:focus:valid,
|
|
.kontaktformular .row .errormsg .checkbox-inline input:focus:valid{
|
|
background-color: #FFFFFF;
|
|
border-color: #d9e8d5;
|
|
outline: none;
|
|
box-shadow:none;
|
|
}
|
|
.kontaktformular .row .error ::placeholder{
|
|
color: rgba(219, 0, 7, 0.6);
|
|
}
|
|
|
|
.kontaktformular .row .error select.unselected
|
|
{
|
|
color: rgba(219, 0, 7, 0.4);
|
|
}
|
|
|
|
.kontaktformular .row .errormsg{
|
|
color: #db0007;
|
|
font-size: .75rem;
|
|
|
|
|
|
}
|
|
.kontaktformular .captcha-row.error_container,
|
|
.kontaktformular .question-row.error_container,
|
|
.kontaktformular .checkbox-row.error_container{
|
|
margin-bottom: 2.7rem;
|
|
|
|
}
|
|
.kontaktformular .captcha-row .errormsg,
|
|
.kontaktformular .question-row .errormsg{
|
|
|
|
|
|
}
|
|
.kontaktformular .checkbox-row .errormsg{
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
margin-bottom: -20px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.kontaktformular .captcha-row.error_container .control-label,
|
|
.kontaktformular .question-row.error_container .control-label,
|
|
.kontaktformular .upload-row.error_container .control-label,
|
|
.kontaktformular .checkbox-row.error_container .control-label{
|
|
height: 100%;
|
|
margin-top: 0; background:url(https://sound-au.com/contact2/img/border-right-red.png) bottom right no-repeat;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* style for mobile */
|
|
|
|
@media (max-width: 655px) {
|
|
|
|
|
|
body {
|
|
margin: 0;
|
|
|
|
padding-top: 10px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.kontaktformular {
|
|
padding: 1px 1rem 1px 1rem;
|
|
/* box-shadow: none; */
|
|
margin-left:15px;
|
|
margin-top:0px;
|
|
margin-right:15px;
|
|
width: auto;
|
|
}
|
|
.kontaktformular .row {
|
|
display: block;
|
|
margin-top: 22px;
|
|
}
|
|
.kontaktformular .row .col-sm-4{
|
|
flex-grow:0;
|
|
flex-basis: 0;
|
|
margin: 0;
|
|
}
|
|
.kontaktformular .row .col-sm-4,
|
|
.kontaktformular .row .col-sm-8 {
|
|
margin-top: 25px;
|
|
}
|
|
.kontaktformular .captcha-row .col-sm-8,
|
|
.kontaktformular .question-row .col-sm-8,
|
|
.kontaktformular .upload-row .col-sm-8,
|
|
.kontaktformular .checkbox-row .col-sm-8{
|
|
margin-top: 0;
|
|
}
|
|
|
|
|
|
|
|
/* style copyright */
|
|
|
|
.copyright {
|
|
color: #000000;
|
|
font-size: 13px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|