This repository has been archived on 2019-05-14. You can view files and clone it, but cannot push or open issues or pull requests.
mastodon/app/assets/stylesheets/forms.scss
Eugen Rochko b891a81008 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

203 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;
}
}