$no-columns-breakpoint: 600px; code { font-family: $font-monospace, monospace; font-weight: 400; } .form-container { max-width: 400px; padding: 20px; margin: 0 auto; } .simple_form { .input { margin-bottom: 15px; overflow: hidden; &.hidden { margin: 0; } &.radio_buttons { .radio { margin-bottom: 15px; &:last-child { margin-bottom: 0; } } .radio > label { position: relative; padding-left: 28px; input { position: absolute; top: -2px; left: 0; } } } &.boolean { position: relative; margin-bottom: 0; .label_input > label { font-family: inherit; font-size: 14px; padding-top: 5px; color: $primary-text-color; display: block; width: auto; } .label_input, .hint { padding-left: 28px; } .label_input__wrapper { position: static; } label.checkbox { position: absolute; top: 2px; left: 0; } } } .row { display: flex; margin: 0 -5px; .input { box-sizing: border-box; flex: 1 1 auto; width: 50%; padding: 0 5px; } } .hint { color: $darker-text-color; a { color: $highlight-text-color; } code { border-radius: 3px; padding: 0.2em 0.4em; background: darken($ui-base-color, 12%); } } span.hint { display: block; font-size: 12px; margin-top: 4px; } p.hint { margin-bottom: 15px; color: $darker-text-color; &.subtle-hint { text-align: center; font-size: 12px; line-height: 18px; margin-top: 15px; margin-bottom: 0; } } .card { margin-bottom: 15px; } strong { font-weight: 500; @each $lang in $cjk-langs { &:lang(#{$lang}) { font-weight: 700; } } } .input.with_floating_label { .label_input { display: flex; & > label { font-family: inherit; font-size: 14px; color: $primary-text-color; font-weight: 500; min-width: 150px; flex: 0 0 auto; } input, select { flex: 1 1 auto; } } &.select .hint { margin-top: 6px; margin-left: 150px; } } .input.with_label { .label_input > label { font-family: inherit; font-size: 14px; color: $primary-text-color; display: block; margin-bottom: 8px; word-wrap: break-word; font-weight: 500; } .hint { margin-top: 6px; } ul { flex: 390px; } } .input.with_block_label { max-width: none; & > label { font-family: inherit; font-size: 16px; color: $primary-text-color; display: block; font-weight: 500; padding-top: 5px; } .hint { margin-bottom: 15px; } ul { columns: 2; } } .required abbr { text-decoration: none; color: lighten($error-value-color, 12%); } .fields-group { margin-bottom: 25px; .input:last-child { margin-bottom: 0; } } .fields-row { display: flex; margin: 0 -10px; padding-top: 5px; margin-bottom: 25px; .input { max-width: none; } &__column { box-sizing: border-box; padding: 0 10px; flex: 1 1 auto; min-height: 1px; &-6 { max-width: 50%; } } .fields-group:last-child, .fields-row__column.fields-group { margin-bottom: 0; } @media screen and (max-width: $no-columns-breakpoint) { display: block; margin-bottom: 0; &__column { max-width: none; } .fields-group:last-child, .fields-row__column.fields-group, .fields-row__column { margin-bottom: 25px; } } } .input.radio_buttons .radio label { margin-bottom: 5px; font-family: inherit; font-size: 14px; color: $primary-text-color; display: block; width: auto; } .check_boxes { .checkbox { label { font-family: inherit; font-size: 14px; color: $primary-text-color; display: inline-block; width: auto; position: relative; padding-top: 5px; padding-left: 25px; flex: 1 1 auto; } input[type=checkbox] { position: absolute; left: 0; top: 5px; margin: 0; } } } input[type=text], input[type=number], input[type=email], input[type=password], textarea { box-sizing: border-box; font-size: 16px; color: $primary-text-color; display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; background: darken($ui-base-color, 10%); border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; padding: 10px; &:invalid { box-shadow: none; } &:focus:invalid { border-color: lighten($error-red, 12%); } &:required:valid { border-color: $valid-value-color; } &:hover { border-color: darken($ui-base-color, 20%); } &:active, &:focus { border-color: $highlight-text-color; background: darken($ui-base-color, 8%); } } .input.field_with_errors { label { color: lighten($error-red, 12%); } input[type=text], input[type=number], input[type=email], input[type=password], textarea, select { border-color: lighten($error-red, 12%); } .error { display: block; font-weight: 500; color: lighten($error-red, 12%); margin-top: 4px; } } .actions { margin-top: 30px; display: flex; &.actions--top { margin-top: 0; margin-bottom: 30px; } } button, .button, .block-button { display: block; width: 100%; border: 0; border-radius: 4px; background: $ui-highlight-color; color: $primary-text-color; font-size: 18px; line-height: inherit; height: auto; 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; margin-right: 10px; &:last-child { margin-right: 0; } &:hover { background-color: lighten($ui-highlight-color, 5%); } &:active, &:focus { background-color: darken($ui-highlight-color, 5%); } &.negative { background: $error-value-color; &:hover { background-color: lighten($error-value-color, 5%); } &:active, &:focus { background-color: darken($error-value-color, 5%); } } } select { appearance: none; box-sizing: border-box; font-size: 16px; color: $primary-text-color; display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px; border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; padding-left: 10px; padding-right: 30px; height: 41px; } .label_input { &__wrapper { position: relative; } &__append { position: absolute; right: 3px; top: 1px; padding: 10px; padding-bottom: 9px; font-size: 16px; color: $dark-text-color; font-family: inherit; pointer-events: none; cursor: default; max-width: 140px; white-space: nowrap; overflow: hidden; &::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 1px; width: 5px; background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); } } } } .flash-message { background: lighten($ui-base-color, 8%); color: $darker-text-color; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; text-align: center; &.notice { border: 1px solid rgba($valid-value-color, 0.5); background: rgba($valid-value-color, 0.25); color: $valid-value-color; } &.alert { border: 1px solid rgba($error-value-color, 0.5); background: rgba($error-value-color, 0.25); color: $error-value-color; } p { margin-bottom: 15px; } .oauth-code { outline: 0; box-sizing: border-box; display: block; width: 100%; border: none; padding: 10px; font-family: $font-monospace, monospace; background: $ui-base-color; color: $primary-text-color; font-size: 14px; margin: 0; &::-moz-focus-inner { border: 0; } &::-moz-focus-inner, &:focus, &:active { outline: 0 !important; } &:focus { background: lighten($ui-base-color, 4%); } } strong { font-weight: 500; @each $lang in $cjk-langs { &:lang(#{$lang}) { font-weight: 700; } } } @media screen and (max-width: 740px) and (min-width: 441px) { margin-top: 40px; } } .form-footer { margin-top: 30px; text-align: center; a { color: $darker-text-color; text-decoration: none; &:hover { text-decoration: underline; } } } .quick-nav { list-style: none; margin-bottom: 25px; font-size: 14px; li { display: inline-block; margin-right: 10px; } a { color: $highlight-text-color; text-transform: uppercase; text-decoration: none; font-weight: 700; &:hover, &:focus, &:active { color: lighten($highlight-text-color, 8%); } } } .oauth-prompt, .follow-prompt { margin-bottom: 30px; color: $darker-text-color; h2 { font-size: 16px; margin-bottom: 30px; text-align: center; } strong { color: $secondary-text-color; font-weight: 500; @each $lang in $cjk-langs { &:lang(#{$lang}) { font-weight: 700; } } } @media screen and (max-width: 740px) and (min-width: 441px) { margin-top: 40px; } } .qr-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; } .qr-code { flex: 0 0 auto; background: $simple-background-color; padding: 4px; margin: 0 10px 20px 0; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); display: inline-block; svg { display: block; margin: 0; } } .qr-alternative { margin-bottom: 20px; color: $secondary-text-color; flex: 150px; samp { display: block; font-size: 14px; } } .table-form { p { margin-bottom: 15px; strong { font-weight: 500; @each $lang in $cjk-langs { &:lang(#{$lang}) { font-weight: 700; } } } } } .simple_form, .table-form { .warning { box-sizing: border-box; background: rgba($error-value-color, 0.5); color: $primary-text-color; text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3); box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4); border-radius: 4px; padding: 10px; margin-bottom: 15px; a { color: $primary-text-color; text-decoration: underline; &:hover, &:focus, &:active { text-decoration: none; } } strong { font-weight: 600; display: block; margin-bottom: 5px; @each $lang in $cjk-langs { &:lang(#{$lang}) { font-weight: 700; } } .fa { font-weight: 400; } } } } .action-pagination { display: flex; flex-wrap: wrap; align-items: center; .actions, .pagination { flex: 1 1 auto; } .actions { padding: 30px 0; padding-right: 20px; flex: 0 0 auto; } } .post-follow-actions { text-align: center; color: $darker-text-color; div { margin-bottom: 4px; } } .alternative-login { margin-top: 20px; margin-bottom: 20px; h4 { font-size: 16px; color: $primary-text-color; text-align: center; margin-bottom: 20px; border: 0; padding: 0; } .button { display: block; } } .scope-danger { color: $warning-red; } .form_admin_settings_site_short_description, .form_admin_settings_site_description, .form_admin_settings_site_extended_description, .form_admin_settings_site_terms, .form_admin_settings_custom_css, .form_admin_settings_closed_registrations_message { textarea { font-family: $font-monospace, monospace; } } .input-copy { background: darken($ui-base-color, 10%); border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; display: flex; align-items: center; padding-right: 4px; position: relative; top: 1px; transition: border-color 300ms linear; &__wrapper { flex: 1 1 auto; } input[type=text] { background: transparent; border: 0; padding: 10px; font-size: 14px; font-family: $font-monospace, monospace; } button { flex: 0 0 auto; margin: 4px; text-transform: none; font-weight: 400; font-size: 14px; padding: 7px 18px; padding-bottom: 6px; width: auto; transition: background 300ms linear; } &.copied { border-color: $valid-value-color; transition: none; button { background: $valid-value-color; transition: none; } } }