glitchier-soc/app/assets/stylesheets/forms.scss
Eugen Rochko 238233440f Follow call on locked account creates follow request instead
Reflect "requested" relationship in API and UI
Reflect inability of private posts to be reblogged in the UI
Disable Webfinger for locked accounts
2016-12-22 23:03:57 +01:00

202 lines
3.2 KiB
SCSS

code {
font-family: 'Roboto Mono', monospace;
font-weight: 400;
}
.form-container {
max-width: 400px;
padding: 20px;
margin: 0 auto;
}
.simple_form {
.input {
margin-bottom: 15px;
}
.hint {
display: block;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
}
.input.file, .input.select {
padding: 15px 0;
margin-bottom: 0;
display: flex;
label {
font-family: 'Roboto';
font-size: 16px;
color: #fff;
width: 100px;
display: block;
flex: 0 0 auto;
padding-top: 5px;
}
input[type=file], select {
flex: 1 1 auto;
}
}
.fields-group {
margin-bottom: 25px;
}
.input.boolean {
margin-bottom: 5px;
label {
font-family: 'Roboto';
font-size: 14px;
color: white;
display: block;
}
label.checkbox {
position: relative;
padding-left: 25px;
}
input[type=checkbox] {
position: absolute;
left: 0;
top: 1px;
margin: 0;
}
.hint {
padding-left: 25px;
}
}
input[type=text], input[type=email], input[type=password], textarea {
background: transparent;
box-sizing: border-box;
border: 0;
border-bottom: 2px solid #9baec8;
border-radius: 2px 2px 0 0;
padding: 7px 4px;
font-size: 16px;
color: #fff;
display: block;
width: 100%;
outline: 0;
font-family: 'Roboto';
&:invalid {
box-shadow: none;
}
&:focus:invalid {
border-bottom-color: #df405a;
}
&:required:valid {
border-bottom-color: #79bd9a;
}
&:active, &:focus {
border-bottom-color: #2b90d9;
background: rgba(0, 0, 0, 0.1);
}
}
.input.field_with_errors {
input[type=text], input[type=email], input[type=password] {
border-bottom-color: #df405a;
}
.error {
font-weight: 500;
color: #df405a;
}
}
.actions {
margin-top: 30px;
}
button {
display: block;
width: 100%;
border: 0;
border-radius: 4px;
background: #2b90d9;
color: #fff;
font-size: 18px;
padding: 10px;
text-transform: uppercase;
cursor: pointer;
font-weight: 500;
outline: 0;
margin-bottom: 10px;
&:hover {
background-color: lighten(#2b90d9, 5%);
}
&:active, &:focus {
position: relative;
top: 1px;
background-color: darken(#2b90d9, 5%);
}
&.negative {
background: #df405a;
&:hover {
background-color: lighten(#df405a, 5%);
}
&:active, &:focus {
background-color: darken(#df405a, 5%);
}
}
}
}
.flash-message {
background: #282c37;
color: #9baec8;
border-radius: 4px;
padding: 15px 10px;
margin-bottom: 30px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
text-align: center;
strong {
font-weight: 500;
}
}
.form-footer {
margin-top: 30px;
text-align: center;
a {
color: white;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.oauth-prompt {
margin-bottom: 30px;
text-align: center;
color: #9baec8;
h2 {
font-size: 16px;
margin-bottom: 30px;
}
strong {
color: #d9e1e8;
font-weight: 500;
}
}