$no-columns-breakpoint: 600px; code { font-family: $font-monospace, monospace; font-weight: 400; } .form-container { max-width: 450px; padding: 20px; padding-bottom: 50px; margin: 50px auto; } .indicator-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: $primary-text-color; &.success { background: $success-green; } &.failure { background: $error-red; } } .simple_form { &.hidden { display: none; } .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-inline-start: 28px; input { position: absolute; top: -2px; inset-inline-start: 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-inline-start: 28px; } .label_input__wrapper { position: static; } label.checkbox { position: absolute; top: 2px; inset-inline-start: 0; } label a { color: $highlight-text-color; text-decoration: underline; &:hover, &:active, &:focus { text-decoration: none; } } .recommended, .not_recommended, .glitch_only { position: absolute; margin: 0 4px; margin-top: -2px; } } } .row { display: flex; margin: 0 -5px; .input { box-sizing: border-box; flex: 1 1 auto; width: 50%; padding: 0 5px; } } .title { font-size: 28px; line-height: 33px; font-weight: 700; margin-bottom: 15px; } .lead { font-size: 17px; line-height: 22px; color: $secondary-text-color; margin-bottom: 30px; &.invited-by { margin-bottom: 15px; } a { color: $highlight-text-color; } } .rules-list { font-size: 17px; line-height: 22px; margin-bottom: 30px; } .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%); } li { list-style: disc; margin-inline-start: 18px; } } ul.hint { margin-bottom: 15px; } 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; } } .authentication-hint { margin-bottom: 25px; } .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-inline-start: 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: 14px; color: $primary-text-color; display: block; font-weight: 500; padding-top: 5px; } .hint { margin-bottom: 15px; } ul { columns: 2; } } .input.with_block_label.user_role_permissions_as_keys ul { columns: unset; } .input.datetime .label_input select { display: inline-block; width: auto; flex: 0; } .required abbr { text-decoration: none; color: lighten($error-value-color, 12%); } .fields-group { margin-bottom: 25px; .input:last-child { margin-bottom: 0; } &__thumbnail { display: block; margin: 0; margin-bottom: 10px; max-width: 100%; height: auto; border-radius: 4px; background: url('images/void.png'); &: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%; } .actions { margin-top: 27px; } } .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; } } .fields-group.invited-by { margin-bottom: 30px; .hint { text-align: center; } } } .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-inline-start: 25px; flex: 1 1 auto; } input[type='checkbox'] { position: absolute; inset-inline-start: 0; top: 5px; margin: 0; } } } .input.static .label_input__wrapper { font-size: 16px; padding: 10px; border: 1px solid $dark-text-color; border-radius: 4px; } input[type='text'], input[type='number'], input[type='email'], input[type='password'], input[type='url'], input[type='datetime-local'], 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; &::placeholder { color: lighten($darker-text-color, 4%); } &:invalid { box-shadow: none; } &: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[type='text'], input[type='number'], input[type='email'], input[type='password'], input[type='datetime-local'] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { border-color: lighten($error-red, 12%); } } .input.field_with_errors { label { color: lighten($error-red, 12%); } input[type='text'], input[type='number'], input[type='email'], input[type='password'], input[type='datetime-local'], textarea, select { border-color: lighten($error-red, 12%); } .error { display: block; font-weight: 500; color: lighten($error-red, 12%); margin-top: 4px; } } .input.disabled { opacity: 0.5; } .actions { margin-top: 30px; display: flex; &.actions--top { margin-top: 0; margin-bottom: 30px; } } .stacked-actions { margin-top: 30px; margin-bottom: 15px; } button, .button, .block-button { display: block; width: 100%; border: 0; border-radius: 4px; background: darken($ui-highlight-color, 2%); color: $primary-text-color; font-size: 18px; line-height: inherit; height: auto; padding: 10px; text-decoration: none; text-transform: uppercase; text-align: center; box-sizing: border-box; cursor: pointer; font-weight: 500; outline: 0; margin-bottom: 10px; margin-inline-end: 10px; &:last-child { margin-inline-end: 0; } &:active, &:focus, &:hover { background-color: $ui-highlight-color; } &:disabled:hover { background-color: $ui-primary-color; } &.negative { background: $error-value-color; &:hover { background-color: lighten($error-value-color, 5%); } &:active, &:focus { background-color: darken($error-value-color, 5%); } } } .button.button-tertiary { padding: 9px; &:hover, &:focus, &:active { padding: 10px; } } 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,") no-repeat right 8px center / auto 16px; border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; padding-inline-start: 10px; padding-inline-end: 30px; height: 41px; } h4 { margin-bottom: 15px !important; } .label_input { &__wrapper { position: relative; } &__append { position: absolute; inset-inline-end: 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; inset-inline-end: 0; bottom: 1px; width: 5px; background-image: linear-gradient( to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%) ); } } } } .block-icon { display: block; margin: 0 auto; margin-bottom: 10px; font-size: 24px; } .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; } &.warning { border: 1px solid rgba($gold-star, 0.5); background: rgba($gold-star, 0.25); color: $gold-star; } &.alert { border: 1px solid rgba($error-value-color, 0.5); background: rgba($error-value-color, 0.1); color: $error-value-color; } &.hidden { display: none; } a { display: inline-block; color: $darker-text-color; text-decoration: none; &:hover { color: $primary-text-color; text-decoration: underline; } } &.warning a { font-weight: 700; color: inherit; text-decoration: underline; &:hover, &:focus, &:active { text-decoration: none; color: inherit; } } p { margin-bottom: 15px; } .oauth-code { outline: 0; box-sizing: border-box; display: block; width: 100%; border: 0; 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 (width <= 740px) and (width >= 441px) { margin-top: 40px; } &.translation-prompt { text-align: unset; color: unset; a { text-decoration: underline; } } } .flash-message-stack { margin-bottom: 30px; .flash-message { border-radius: 0; margin-bottom: 0; border-top-width: 0; &:first-child { border-radius: 4px 4px 0 0; border-top-width: 1px; } &:last-child { border-radius: 0 0 4px 4px; &:first-child { border-radius: 4px; } } } } .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-inline-end: 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; } } } } .oauth-prompt { h3 { color: $ui-secondary-color; font-size: 17px; line-height: 22px; font-weight: 500; margin-bottom: 30px; } p { font-size: 14px; line-height: 18px; margin-bottom: 30px; } .permissions-list { border: 1px solid $ui-base-color; border-radius: 4px; background: darken($ui-base-color, 4%); margin-bottom: 30px; } .actions { margin: 0 -10px; display: flex; form { box-sizing: border-box; padding: 0 10px; flex: 1 1 auto; min-height: 1px; width: 50%; } } } .qr-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; } .qr-code { flex: 0 0 auto; background: $simple-background-color; padding: 4px; margin-inline-end: 10px; margin-bottom: 20px; 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; } } .simple_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-inline-end: 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-inline-end: 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; } } } .input.user_confirm_password, .input.user_website { &:not(.field_with_errors) { display: none; } } .simple_form .h-captcha { display: flex; justify-content: center; margin-bottom: 30px; } .permissions-list { &__item { padding: 15px; color: $ui-secondary-color; border-bottom: 1px solid lighten($ui-base-color, 4%); display: flex; align-items: center; &__text { flex: 1 1 auto; &__title { font-weight: 500; } &__type { color: $darker-text-color; } } &__icon { flex: 0 0 auto; font-size: 18px; width: 30px; color: $valid-value-color; display: flex; align-items: center; } &:last-child { border-bottom: 0; } } } // Only remove padding when listing applications, to prevent styling issues on // the Authorization page. .applications-list { .permissions-list__item:last-child { padding-bottom: 0; } } .keywords-table { thead { th { white-space: nowrap; } th:first-child { width: 100%; } } tfoot { td { border: 0; } } .input.string { margin-bottom: 0; } .label_input__wrapper { margin-top: 10px; } .table-action-link { margin-top: 10px; white-space: nowrap; } } .progress-tracker { display: flex; align-items: center; padding-bottom: 30px; margin-bottom: 30px; li { flex: 0 0 auto; position: relative; } .separator { height: 2px; background: $ui-base-lighter-color; flex: 1 1 auto; &.completed { background: $highlight-text-color; } } .circle { box-sizing: border-box; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid $ui-base-lighter-color; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; svg { width: 16px; } } .label { position: absolute; font-size: 14px; font-weight: 500; color: $secondary-text-color; padding-top: 10px; text-align: center; width: 100px; left: 50%; transform: translateX(-50%); } li:first-child .label { left: auto; inset-inline-start: 0; text-align: start; transform: none; } li:last-child .label { left: auto; inset-inline-end: 0; text-align: end; transform: none; } .active .circle { border-color: $highlight-text-color; &::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: $highlight-text-color; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } .completed .circle { border-color: $highlight-text-color; background: $highlight-text-color; } }