public/designs/themes/base/stylesheets/signup.scss
#signup-intro {
font-size: 16px;
color: #4A4A4A;
width: 100%;
max-width: 600px;
margin: 30px auto;
}
#signup-form {
color: #4A4A4A;
display: block;
width: 60%;
margin: 0 auto;
text-align: center;
input { width: 100%; }
}
#signup-form #signup-form-header {
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
margin: 30px auto 5px;
position: relative;
}
#signup-form select,
#signup-form textarea,
#signup-form input {
padding: 7px 7% 10px 3%;
color: #6d786e;
font-size: 18px;
}
#signup-form #profile_data_login {
margin: 3px 0px 0px 5px;
}
#signup-form input.checking {
box-shadow: none;
}
#signup-form select {
height: auto;
padding-right: 3px;
width: 365px;
}
#signup-form .select-birth-date select {
width: 93px;
margin-right: 2px;
margin-left: 0;
}
#signup-form select {
width: 100%;
}
#signup-form textarea {
height: 100px;
padding-right: 3px;
width: 96%;
}
#signup-form .button-bar a.button {
width: 200px;
height: 30px;
}
#signup-form input[type=file] {
font-size: 12px;
}
#signup-form input[type=radio] {
height: auto;
margin: 0px 5px 0px 3px;
width: auto;
}
#signup-form input[type=checkbox] {
height: 20px;
width: 20px;
margin: 0px 5px 0px 3px;
}
#signup-form input[type=number] {
padding-right: 0;
width: 96%;
}
#signup-form .fieldgroup {
margin: 5px 10px;
}
#signup-form label {
font-variant: small-caps;
font-size: 18px;
}
#signup-form #template-options li label {
font-size: 18px;
}
#signup-form #template-options li a {
color: #555753
}
#signup-form label[for=profile_data_sex_female],
#signup-form label[for=profile_data_sex_male] {
color: #6d786e;
font-size: 18px;
display: inline;
margin-left: 8px;
}
@mixin validation_icon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
font-size: 22px;
top: 8px;
right: 5px;
}
#signup-form .formfield.invalid {
input {
box-shadow: 0 0 7px red;
}
&::after {
@include validation_icon;
color: #7f0000;
content: '\f057';
}
}
#signup-form span.invalid {
border: none;
padding: 0px;
background: transparent;
color: #7f0000;
box-shadow: none;
}
#signup-form .formfield.checking::after {
@include validation_icon;
color: #4A4A4A;
content: '\f017';
}
#signup-form span.checking {
color: #4A4A4A;
}
#signup-form .formfield.validated::after {
@include validation_icon;
color: #005000;
content: '\f058';
}
#signup-form span.validated {
color: #005000;
}
.label-wrapper {
text-align: left;
margin-bottom: 1em;
.formlabel, .field_with_errors {
display: inline-block;
}
}
#checking-message {
display: none;
}
#signup-username-section {
> p {
font-style: italic;
}
#signup-username-form-line {
display: flex;
#signup-domain {
background: #EEE;
border: 1px solid #CFCFCF;
height: 38px;
line-height: 38px;
padding: 0px 7px;
color: #4A4A4A;
font-size: 14px;
text-transform: lowercase;
max-width: 50%;
}
#signup-login {
flex: 1;
text-align: right;
}
}
}
#signup-password-section {
margin: 15px 0;
.formfield {
margin-bottom: 5px;
}
}
.formfieldline {
margin-bottom: 10px;
}
#signup-form .formfield {
position: relative;
}
#signup-name {
margin-top: 25px;
}
#signup-form .formlabel {
color: #4A4A4A;
font-weight: normal;
text-align: left;
}
#signup-form div.custom-field.checkbox {
text-align: left;
padding: 10px 0;
label {
font-size: 20px;
}
}
#signup-form-profile {
margin-bottom: 50px;
}
#signup-form #signup-avatar {
margin: 10px auto;
text-align: left;
input { padding-left: 0 }
.file-fieldset { padding: 0 }
.formfieldline { display: none }
}
#signup-form #address-and-location .address-fields {
select, input {
margin-bottom: 10px;
}
}