code { font-family: 'mastodon-font-monospace', monospace; font-weight: 400; } .form-container { max-width: 400px; padding: 20px; margin: 0 auto; } .simple_form { .input { margin-bottom: 15px; } span.hint { display: block; color: $color3; font-size: 12px; margin-top: 4px; } p.hint { margin-bottom: 15px; } strong { font-weight: 500; } .label_input { display: flex; label { flex: 0 0 auto; width: 100px; } input { flex: 1 1 auto; } } .input.file, .input.select, .input.radio_buttons { padding: 15px 0; margin-bottom: 0; label { font-family: inherit; font-size: 16px; color: $color5; display: block; padding-top: 5px; } } .fields-group { margin-bottom: 25px; } .input.radio_buttons .radio label { margin-bottom: 5px; font-family: inherit; font-size: 14px; color: $color5; display: block; width: auto; } .input.boolean { margin-bottom: 5px; label { font-family: inherit; font-size: 14px; color: $color5; display: block; width: auto; } label.checkbox { position: relative; padding-left: 25px; flex: 1 1 auto; } input[type=checkbox] { position: absolute; left: 0; top: 1px; margin: 0; } .hint { padding-left: 25px; margin-left: 0; } } input[type=text], input[type=number], input[type=email], input[type=password], textarea { background: transparent; box-sizing: border-box; border: 0; border-bottom: 2px solid $color3; border-radius: 2px 2px 0 0; padding: 7px 4px; font-size: 16px; color: $color5; display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; &:invalid { box-shadow: none; } &:focus:invalid { border-bottom-color: $color6; } &:required:valid { border-bottom-color: $color7; } &:active, &:focus { border-bottom-color: $color4; background: rgba($color8, 0.1); } } .input.field_with_errors { label { color: $color6; } input[type=text], input[type=email], input[type=password] { border-bottom-color: $color6; } .error { display: block; font-weight: 500; color: $color6; margin-top: 4px; } } .actions { margin-top: 30px; } button, .block-button { display: block; width: 100%; border: 0; border-radius: 4px; background: $color4; color: $color5; font-size: 18px; padding: 10px; text-transform: uppercase; text-decoration: none; text-align: center; box-sizing: border-box; cursor: pointer; font-weight: 500; outline: 0; margin-bottom: 10px; &:hover { background-color: lighten($color4, 5%); } &:active, &:focus { position: relative; top: 1px; background-color: darken($color4, 5%); } &.negative { background: $color6; &:hover { background-color: lighten($color6, 5%); } &:active, &:focus { background-color: darken($color6, 5%); } } } select { font-size: 16px; } } .flash-message { background: $color1; color: $color3; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; box-shadow: 0 0 5px rgba($color8, 0.2); text-align: center; strong { font-weight: 500; } } .form-footer { margin-top: 30px; text-align: center; a { color: $color5; text-decoration: none; &:hover { text-decoration: underline; } } } .oauth-prompt, .follow-prompt { margin-bottom: 30px; text-align: center; color: $color3; h2 { font-size: 16px; margin-bottom: 30px; } strong { color: $color2; font-weight: 500; } } .qr-wrapper { display: flex; } .qr-code { flex: 0 0 auto; background: $color5; padding: 4px; margin-bottom: 20px; box-shadow: 0 0 15px rgba($color8, 0.2); display: inline-block; svg { display: block; margin: 0; } } .qr-alternative { margin-left: 10px; color: $color3; samp { display: block; font-size: 14px; } } .table-form { p { max-width: 400px; margin-bottom: 15px; strong { font-weight: 500; } } .warning { max-width: 400px; box-sizing: border-box; background: rgba($color6, 0.5); color: $color5; text-shadow: 1px 1px 0 rgba($color8, 0.3); box-shadow: 0 2px 6px rgba($color8, 0.4); border-radius: 4px; padding: 10px; margin-bottom: 15px; a { color: $color5; text-decoration: underline; &:hover, &:focus, &:active { text-decoration: none; } } strong { font-weight: 600; display: block; margin-bottom: 5px; .fa { font-weight: 400; } } } } .action-pagination { display: flex; align-items: center; .actions, .pagination { flex: 1 1 auto; } .actions { padding: 30px 0; padding-right: 20px; flex: 0 0 auto; } } .user_allowed_languages { li { float: left; width: 50%; } }