chinwagsocial/app/javascript/styles/mastodon/admin.scss
Eugen Rochko 964ae8eee5
Change unconfirmed user login behaviour (#11375)
Allow access to account settings, 2FA, authorized applications, and
account deletions to unconfirmed and pending users, as well as
users who had their accounts disabled. Suspended users cannot update
their e-mail or password or delete their account.

Display account status on account settings page, for example, when
an account is frozen, limited, unconfirmed or pending review.

After sign up, login users straight away and show a simple page that
tells them the status of their account with links to account settings
and logout, to reduce onboarding friction and allow users to correct
wrongly typed e-mail addresses.

Move the final sign-up step of SSO integrations to be the same
as above to reduce code duplication.
2019-07-22 10:48:50 +02:00

718 lines
12 KiB
SCSS

$no-columns-breakpoint: 600px;
$sidebar-width: 240px;
$content-width: 840px;
.admin-wrapper {
display: flex;
justify-content: center;
height: 100%;
.sidebar-wrapper {
flex: 1 1 $sidebar-width;
height: 100%;
background: $ui-base-color;
display: flex;
justify-content: flex-end;
}
.sidebar {
width: $sidebar-width;
height: 100%;
padding: 0;
overflow-y: auto;
.logo {
display: block;
margin: 40px auto;
width: 100px;
height: 100px;
}
@media screen and (max-width: $no-columns-breakpoint) {
& > a:first-child {
display: none;
}
}
ul {
list-style: none;
border-radius: 4px 0 0 4px;
overflow: hidden;
margin-bottom: 20px;
@media screen and (max-width: $no-columns-breakpoint) {
margin-bottom: 0;
}
a {
display: block;
padding: 15px;
color: $darker-text-color;
text-decoration: none;
transition: all 200ms linear;
transition-property: color, background-color;
border-radius: 4px 0 0 4px;
i.fa {
margin-right: 5px;
}
&:hover {
color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
transition: all 100ms linear;
transition-property: color, background-color;
}
&.selected {
background: darken($ui-base-color, 2%);
border-radius: 4px 0 0;
}
}
ul {
background: darken($ui-base-color, 4%);
border-radius: 0 0 0 4px;
margin: 0;
a {
border: 0;
padding: 15px 35px;
}
}
.simple-navigation-active-leaf a {
color: $primary-text-color;
background-color: $ui-highlight-color;
border-bottom: 0;
border-radius: 0;
&:hover {
background-color: lighten($ui-highlight-color, 5%);
}
}
}
& > ul > .simple-navigation-active-leaf a {
border-radius: 4px 0 0 4px;
}
}
.content-wrapper {
flex: 2 1 $content-width;
overflow: auto;
}
.content {
max-width: $content-width;
padding: 20px 15px;
padding-top: 60px;
padding-left: 25px;
@media screen and (max-width: $no-columns-breakpoint) {
max-width: none;
padding: 15px;
padding-top: 30px;
}
h2 {
color: $secondary-text-color;
font-size: 24px;
line-height: 28px;
font-weight: 400;
padding-bottom: 40px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
margin-bottom: 40px;
}
h3 {
color: $secondary-text-color;
font-size: 20px;
line-height: 28px;
font-weight: 400;
margin-bottom: 30px;
}
h4 {
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
color: $darker-text-color;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
h6 {
font-size: 16px;
color: $secondary-text-color;
line-height: 28px;
font-weight: 400;
}
.fields-group h6 {
color: $primary-text-color;
font-weight: 500;
}
.directory__tag > a,
.directory__tag > div {
box-shadow: none;
}
.directory__tag .table-action-link .fa {
color: inherit;
}
.directory__tag h4 {
font-size: 18px;
font-weight: 700;
color: $primary-text-color;
text-transform: none;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
& > p {
font-size: 14px;
line-height: 18px;
color: $secondary-text-color;
margin-bottom: 20px;
strong {
color: $primary-text-color;
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
}
hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
&.spacer {
height: 1px;
border: 0;
}
}
}
@media screen and (max-width: $no-columns-breakpoint) {
display: block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.sidebar-wrapper,
.content-wrapper {
flex: 0 0 auto;
height: auto;
overflow: initial;
}
.sidebar {
width: 100%;
padding: 0;
height: auto;
}
}
}
hr.spacer {
width: 100%;
border: 0;
margin: 20px 0;
height: 1px;
}
.muted-hint {
color: $darker-text-color;
a {
color: $highlight-text-color;
}
}
.positive-hint {
color: $valid-value-color;
font-weight: 500;
}
.negative-hint {
color: $error-value-color;
font-weight: 500;
}
.neutral-hint {
color: $dark-text-color;
font-weight: 500;
}
.warning-hint {
color: $gold-star;
font-weight: 500;
}
.filters {
display: flex;
flex-wrap: wrap;
.filter-subset {
flex: 0 0 auto;
margin: 0 40px 10px 0;
&:last-child {
margin-bottom: 20px;
}
ul {
margin-top: 5px;
list-style: none;
li {
display: inline-block;
margin-right: 5px;
}
}
strong {
font-weight: 500;
text-transform: uppercase;
font-size: 12px;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
display: inline-block;
color: $darker-text-color;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
border-bottom: 2px solid $ui-base-color;
&:hover {
color: $primary-text-color;
border-bottom: 2px solid lighten($ui-base-color, 5%);
}
&.selected {
color: $highlight-text-color;
border-bottom: 2px solid $ui-highlight-color;
}
}
}
}
.report-accounts {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.report-accounts__item {
display: flex;
flex: 250px;
flex-direction: column;
margin: 0 5px;
& > strong {
display: block;
margin: 0 0 10px -5px;
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: $secondary-text-color;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
.account-card {
flex: 1 1 auto;
}
}
.report-status,
.account-status {
display: flex;
margin-bottom: 10px;
.activity-stream {
flex: 2 0 0;
margin-right: 20px;
max-width: calc(100% - 60px);
.entry {
border-radius: 4px;
}
}
}
.report-status__actions,
.account-status__actions {
flex: 0 0 auto;
display: flex;
flex-direction: column;
.icon-button {
font-size: 24px;
width: 24px;
text-align: center;
margin-bottom: 10px;
}
}
.simple_form.new_report_note,
.simple_form.new_account_moderation_note {
max-width: 100%;
}
.batch-form-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 5px;
#form_status_batch_action {
margin: 0 5px 5px 0;
font-size: 14px;
}
input.button {
margin: 0 5px 5px 0;
}
.media-spoiler-toggle-buttons {
margin-left: auto;
.button {
overflow: visible;
margin: 0 0 5px 5px;
float: right;
}
}
}
.back-link {
margin-bottom: 10px;
font-size: 14px;
a {
color: $highlight-text-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.spacer {
flex: 1 1 auto;
}
.log-entry {
margin-bottom: 20px;
line-height: 20px;
&__header {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px;
background: $ui-base-color;
color: $darker-text-color;
border-radius: 4px 4px 0 0;
font-size: 14px;
position: relative;
}
&__avatar {
margin-right: 10px;
.avatar {
display: block;
margin: 0;
border-radius: 50%;
width: 40px;
height: 40px;
}
}
&__content {
max-width: calc(100% - 90px);
}
&__title {
word-wrap: break-word;
}
&__timestamp {
color: $dark-text-color;
}
&__extras {
background: lighten($ui-base-color, 6%);
border-radius: 0 0 4px 4px;
padding: 10px;
color: $darker-text-color;
font-family: $font-monospace, monospace;
font-size: 12px;
word-wrap: break-word;
min-height: 20px;
}
&__icon {
font-size: 28px;
margin-right: 10px;
color: $dark-text-color;
}
&__icon__overlay {
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
&.positive {
background: $success-green;
}
&.negative {
background: lighten($error-red, 12%);
}
&.neutral {
background: $ui-highlight-color;
}
}
a,
.username,
.target {
color: $secondary-text-color;
text-decoration: none;
font-weight: 500;
}
.diff-old {
color: lighten($error-red, 12%);
}
.diff-neutral {
color: $secondary-text-color;
}
.diff-new {
color: $success-green;
}
}
a.name-tag,
.name-tag,
a.inline-name-tag,
.inline-name-tag {
text-decoration: none;
color: $secondary-text-color;
.username {
font-weight: 500;
}
&.suspended {
.username {
text-decoration: line-through;
color: lighten($error-red, 12%);
}
.avatar {
filter: grayscale(100%);
opacity: 0.8;
}
}
}
a.name-tag,
.name-tag {
display: flex;
align-items: center;
.avatar {
display: block;
margin: 0;
margin-right: 5px;
border-radius: 50%;
}
&.suspended {
.avatar {
filter: grayscale(100%);
opacity: 0.8;
}
}
}
.speech-bubble {
margin-bottom: 20px;
border-left: 4px solid $ui-highlight-color;
&.positive {
border-left-color: $success-green;
}
&.negative {
border-left-color: lighten($error-red, 12%);
}
&.warning {
border-left-color: $gold-star;
}
&__bubble {
padding: 16px;
padding-left: 14px;
font-size: 15px;
line-height: 20px;
border-radius: 4px 4px 4px 0;
position: relative;
font-weight: 500;
a {
color: $darker-text-color;
}
}
&__owner {
padding: 8px;
padding-left: 12px;
}
time {
color: $dark-text-color;
}
}
.report-card {
background: $ui-base-color;
border-radius: 4px;
margin-bottom: 20px;
&__profile {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
.account {
padding: 0;
border: 0;
&__avatar-wrapper {
margin-left: 0;
}
}
&__stats {
flex: 0 0 auto;
font-weight: 500;
color: $darker-text-color;
text-transform: uppercase;
text-align: right;
a {
color: inherit;
text-decoration: none;
&:focus,
&:hover,
&:active {
color: lighten($darker-text-color, 8%);
}
}
.red {
color: $error-value-color;
}
}
}
&__summary {
&__item {
display: flex;
justify-content: flex-start;
border-top: 1px solid darken($ui-base-color, 4%);
&:hover {
background: lighten($ui-base-color, 2%);
}
&__reported-by,
&__assigned {
padding: 15px;
flex: 0 0 auto;
box-sizing: border-box;
width: 150px;
color: $darker-text-color;
&,
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__content {
flex: 1 1 auto;
max-width: calc(100% - 300px);
&__icon {
color: $dark-text-color;
margin-right: 4px;
font-weight: 500;
}
}
&__content a {
display: block;
box-sizing: border-box;
width: 100%;
padding: 15px;
text-decoration: none;
color: $darker-text-color;
}
}
}
}
.one-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ellipsized-ip {
display: inline-block;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}