2021-10-14 14:44:59 -04:00
|
|
|
@use "sass:math";
|
|
|
|
|
2018-09-18 10:45:58 -04:00
|
|
|
$no-columns-breakpoint: 600px;
|
2019-01-11 05:15:44 -05:00
|
|
|
$sidebar-width: 240px;
|
|
|
|
$content-width: 840px;
|
2018-09-18 10:45:58 -04:00
|
|
|
|
2016-12-13 07:42:10 -05:00
|
|
|
.admin-wrapper {
|
2017-01-27 21:56:10 -05:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
2019-09-20 04:52:14 -04:00
|
|
|
width: 100%;
|
|
|
|
min-height: 100vh;
|
2017-01-27 21:56:10 -05:00
|
|
|
|
|
|
|
.sidebar-wrapper {
|
2019-09-20 04:52:14 -04:00
|
|
|
min-height: 100vh;
|
|
|
|
overflow: hidden;
|
|
|
|
pointer-events: none;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
|
|
|
&__inner {
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
background: $ui-base-color;
|
|
|
|
height: 100%;
|
|
|
|
}
|
2017-01-27 21:56:10 -05:00
|
|
|
}
|
2016-12-13 07:42:10 -05:00
|
|
|
|
|
|
|
.sidebar {
|
2019-01-11 05:15:44 -05:00
|
|
|
width: $sidebar-width;
|
2017-04-19 08:30:23 -04:00
|
|
|
padding: 0;
|
2019-09-20 04:52:14 -04:00
|
|
|
pointer-events: auto;
|
|
|
|
|
|
|
|
&__toggle {
|
|
|
|
display: none;
|
|
|
|
background: lighten($ui-base-color, 8%);
|
|
|
|
height: 48px;
|
|
|
|
|
|
|
|
&__logo {
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
|
|
|
a {
|
|
|
|
display: inline-block;
|
|
|
|
padding: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
svg {
|
|
|
|
fill: $primary-text-color;
|
|
|
|
height: 20px;
|
|
|
|
position: relative;
|
|
|
|
bottom: -2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__icon {
|
|
|
|
display: block;
|
|
|
|
color: $darker-text-color;
|
|
|
|
text-decoration: none;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
font-size: 20px;
|
|
|
|
padding: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
&:hover,
|
|
|
|
&:focus,
|
|
|
|
&:active {
|
|
|
|
background: lighten($ui-base-color, 12%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2017-05-07 14:47:31 -04:00
|
|
|
|
2016-12-13 07:42:10 -05:00
|
|
|
.logo {
|
|
|
|
display: block;
|
|
|
|
margin: 40px auto;
|
|
|
|
width: 100px;
|
|
|
|
height: 100px;
|
|
|
|
}
|
|
|
|
|
2018-09-18 10:45:58 -04:00
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
|
|
|
& > a:first-child {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-12-13 07:42:10 -05:00
|
|
|
ul {
|
|
|
|
list-style: none;
|
2017-01-27 21:56:10 -05:00
|
|
|
border-radius: 4px 0 0 4px;
|
|
|
|
overflow: hidden;
|
2017-04-19 08:30:23 -04:00
|
|
|
margin-bottom: 20px;
|
2016-12-13 07:42:10 -05:00
|
|
|
|
2018-09-18 10:45:58 -04:00
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
2016-12-13 07:42:10 -05:00
|
|
|
a {
|
|
|
|
display: block;
|
2017-09-02 09:49:28 -04:00
|
|
|
padding: 15px;
|
2018-04-18 10:52:15 -04:00
|
|
|
color: $darker-text-color;
|
2016-12-13 07:42:10 -05:00
|
|
|
text-decoration: none;
|
|
|
|
transition: all 200ms linear;
|
2019-05-04 11:39:53 -04:00
|
|
|
transition-property: color, background-color;
|
2017-01-27 21:56:10 -05:00
|
|
|
border-radius: 4px 0 0 4px;
|
2019-09-20 04:52:14 -04:00
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
2016-12-13 07:42:10 -05:00
|
|
|
|
2018-09-27 20:11:14 -04:00
|
|
|
i.fa {
|
2016-12-13 07:42:10 -05:00
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
2017-05-08 09:57:49 -04:00
|
|
|
color: $primary-text-color;
|
|
|
|
background-color: darken($ui-base-color, 5%);
|
2016-12-13 07:42:10 -05:00
|
|
|
transition: all 100ms linear;
|
2019-05-04 11:39:53 -04:00
|
|
|
transition-property: color, background-color;
|
2016-12-13 07:42:10 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
&.selected {
|
2017-05-08 09:57:49 -04:00
|
|
|
background: darken($ui-base-color, 2%);
|
2017-05-07 14:47:31 -04:00
|
|
|
border-radius: 4px 0 0;
|
2017-01-27 21:56:10 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ul {
|
2017-05-08 09:57:49 -04:00
|
|
|
background: darken($ui-base-color, 4%);
|
2017-01-27 21:56:10 -05:00
|
|
|
border-radius: 0 0 0 4px;
|
2017-04-19 08:30:23 -04:00
|
|
|
margin: 0;
|
2017-01-27 21:56:10 -05:00
|
|
|
|
|
|
|
a {
|
|
|
|
border: 0;
|
2017-09-02 09:49:28 -04:00
|
|
|
padding: 15px 35px;
|
2018-09-18 10:45:58 -04:00
|
|
|
}
|
|
|
|
}
|
2016-12-13 07:42:10 -05:00
|
|
|
|
2018-09-18 10:45:58 -04:00
|
|
|
.simple-navigation-active-leaf a {
|
|
|
|
color: $primary-text-color;
|
|
|
|
background-color: $ui-highlight-color;
|
|
|
|
border-bottom: 0;
|
|
|
|
border-radius: 0;
|
2017-01-27 21:56:10 -05:00
|
|
|
|
2018-09-18 10:45:58 -04:00
|
|
|
&:hover {
|
|
|
|
background-color: lighten($ui-highlight-color, 5%);
|
2016-12-13 07:42:10 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-09-18 10:45:58 -04:00
|
|
|
|
|
|
|
& > ul > .simple-navigation-active-leaf a {
|
|
|
|
border-radius: 4px 0 0 4px;
|
|
|
|
}
|
2016-12-13 07:42:10 -05:00
|
|
|
}
|
|
|
|
|
2017-01-27 21:56:10 -05:00
|
|
|
.content-wrapper {
|
2019-09-20 04:52:14 -04:00
|
|
|
box-sizing: border-box;
|
|
|
|
width: 100%;
|
|
|
|
max-width: $content-width;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: $content-width + $sidebar-width) {
|
|
|
|
.sidebar-wrapper--empty {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sidebar-wrapper {
|
|
|
|
width: $sidebar-width;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
|
|
|
.sidebar-wrapper {
|
|
|
|
width: 100%;
|
|
|
|
}
|
2017-01-27 21:56:10 -05:00
|
|
|
}
|
|
|
|
|
2016-12-13 07:42:10 -05:00
|
|
|
.content {
|
2020-06-25 18:36:30 -04:00
|
|
|
padding: 55px 15px 20px 25px;
|
2017-01-27 21:56:10 -05:00
|
|
|
|
2018-09-18 10:45:58 -04:00
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
|
|
|
max-width: none;
|
|
|
|
padding: 15px;
|
|
|
|
padding-top: 30px;
|
|
|
|
}
|
|
|
|
|
2019-12-16 17:55:16 -05:00
|
|
|
&-heading {
|
|
|
|
display: flex;
|
|
|
|
|
2020-06-25 18:36:30 -04:00
|
|
|
padding-bottom: 36px;
|
2018-09-18 10:45:58 -04:00
|
|
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
2020-01-12 08:16:20 -05:00
|
|
|
|
|
|
|
margin: -15px -15px 40px 0;
|
2019-09-20 04:52:14 -04:00
|
|
|
|
2019-12-16 17:55:16 -05:00
|
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
2020-01-12 08:16:20 -05:00
|
|
|
& > * {
|
|
|
|
margin-top: 15px;
|
|
|
|
margin-right: 15px;
|
|
|
|
}
|
|
|
|
|
2019-12-16 17:55:16 -05:00
|
|
|
&-actions {
|
|
|
|
display: inline-flex;
|
|
|
|
|
2020-01-12 08:16:20 -05:00
|
|
|
& > :not(:first-child) {
|
2019-12-16 17:55:16 -05:00
|
|
|
margin-left: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-20 04:52:14 -04:00
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
|
|
|
border-bottom: 0;
|
|
|
|
padding-bottom: 0;
|
2019-12-16 17:55:16 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
color: $secondary-text-color;
|
|
|
|
font-size: 24px;
|
2020-06-25 18:36:30 -04:00
|
|
|
line-height: 36px;
|
2019-12-16 17:55:16 -05:00
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
2019-09-20 04:52:14 -04:00
|
|
|
font-weight: 700;
|
|
|
|
}
|
2017-01-27 21:56:10 -05:00
|
|
|
}
|
|
|
|
|
2017-09-12 17:06:10 -04:00
|
|
|
h3 {
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $secondary-text-color;
|
2017-09-12 17:06:10 -04:00
|
|
|
font-size: 20px;
|
|
|
|
line-height: 28px;
|
|
|
|
font-weight: 400;
|
|
|
|
margin-bottom: 30px;
|
|
|
|
}
|
|
|
|
|
2018-03-06 19:39:40 -05:00
|
|
|
h4 {
|
2020-01-27 07:44:29 -05:00
|
|
|
text-transform: uppercase;
|
|
|
|
font-size: 13px;
|
2018-09-18 10:45:58 -04:00
|
|
|
font-weight: 700;
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $darker-text-color;
|
2018-03-06 19:39:40 -05:00
|
|
|
padding-bottom: 8px;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
}
|
|
|
|
|
2017-06-14 12:01:27 -04:00
|
|
|
h6 {
|
|
|
|
font-size: 16px;
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $secondary-text-color;
|
2017-06-14 12:01:27 -04:00
|
|
|
line-height: 28px;
|
2019-09-20 04:52:14 -04:00
|
|
|
font-weight: 500;
|
2017-06-14 12:01:27 -04:00
|
|
|
}
|
|
|
|
|
2018-09-18 10:45:58 -04:00
|
|
|
.fields-group h6 {
|
|
|
|
color: $primary-text-color;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
|
2019-02-03 22:25:59 -05:00
|
|
|
.directory__tag > a,
|
|
|
|
.directory__tag > div {
|
2019-01-08 07:39:49 -05:00
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
|
2019-02-03 22:25:59 -05:00
|
|
|
.directory__tag .table-action-link .fa {
|
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
|
2019-01-08 07:39:49 -05:00
|
|
|
.directory__tag h4 {
|
|
|
|
font-size: 18px;
|
|
|
|
font-weight: 700;
|
|
|
|
color: $primary-text-color;
|
|
|
|
text-transform: none;
|
|
|
|
padding-bottom: 0;
|
|
|
|
margin-bottom: 0;
|
2019-06-06 12:51:46 -04:00
|
|
|
border-bottom: 0;
|
2019-01-08 07:39:49 -05:00
|
|
|
}
|
|
|
|
|
2017-02-16 18:42:52 -05:00
|
|
|
& > p {
|
2017-01-27 21:56:10 -05:00
|
|
|
font-size: 14px;
|
2019-09-20 04:52:14 -04:00
|
|
|
line-height: 21px;
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $secondary-text-color;
|
2017-01-27 21:56:10 -05:00
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
strong {
|
2017-05-08 09:57:49 -04:00
|
|
|
color: $primary-text-color;
|
2017-01-27 21:56:10 -05:00
|
|
|
font-weight: 500;
|
2017-12-07 10:01:52 -05:00
|
|
|
|
|
|
|
@each $lang in $cjk-langs {
|
|
|
|
&:lang(#{$lang}) {
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
}
|
2017-01-27 21:56:10 -05:00
|
|
|
}
|
|
|
|
}
|
2017-02-16 18:42:52 -05:00
|
|
|
|
|
|
|
hr {
|
2018-04-19 20:28:48 -04:00
|
|
|
width: 100%;
|
|
|
|
height: 0;
|
2017-02-16 18:42:52 -05:00
|
|
|
border: 0;
|
2018-04-19 20:28:48 -04:00
|
|
|
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
|
|
|
|
margin: 20px 0;
|
2018-04-10 14:27:59 -04:00
|
|
|
|
2018-04-19 20:28:48 -04:00
|
|
|
&.spacer {
|
|
|
|
height: 1px;
|
|
|
|
border: 0;
|
2018-04-10 14:27:59 -04:00
|
|
|
}
|
2017-02-16 18:42:52 -05:00
|
|
|
}
|
2017-01-27 21:56:10 -05:00
|
|
|
}
|
|
|
|
|
2018-09-18 10:45:58 -04:00
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
2017-01-28 15:57:03 -05:00
|
|
|
display: block;
|
|
|
|
|
2019-09-20 04:52:14 -04:00
|
|
|
.sidebar-wrapper {
|
|
|
|
min-height: 0;
|
2017-01-28 15:57:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
.sidebar {
|
|
|
|
width: 100%;
|
2018-09-18 10:45:58 -04:00
|
|
|
padding: 0;
|
2017-01-28 15:57:03 -05:00
|
|
|
height: auto;
|
2019-09-20 04:52:14 -04:00
|
|
|
|
|
|
|
&__toggle {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
& > ul {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
ul a,
|
|
|
|
ul ul a {
|
|
|
|
border-radius: 0;
|
|
|
|
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
|
|
|
transition: none;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
transition: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ul ul {
|
|
|
|
border-radius: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
ul .simple-navigation-active-leaf a {
|
|
|
|
border-bottom-color: $ui-highlight-color;
|
|
|
|
}
|
2017-01-28 15:57:03 -05:00
|
|
|
}
|
|
|
|
}
|
2016-12-13 07:42:10 -05:00
|
|
|
}
|
|
|
|
|
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 04:48:50 -04:00
|
|
|
hr.spacer {
|
|
|
|
width: 100%;
|
|
|
|
border: 0;
|
|
|
|
margin: 20px 0;
|
|
|
|
height: 1px;
|
|
|
|
}
|
|
|
|
|
2019-09-18 10:37:27 -04:00
|
|
|
body,
|
|
|
|
.admin-wrapper .content {
|
|
|
|
.muted-hint {
|
|
|
|
color: $darker-text-color;
|
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 04:48:50 -04:00
|
|
|
|
2019-09-18 10:37:27 -04:00
|
|
|
a {
|
|
|
|
color: $highlight-text-color;
|
|
|
|
}
|
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 04:48:50 -04:00
|
|
|
}
|
|
|
|
|
2019-09-18 10:37:27 -04:00
|
|
|
.positive-hint {
|
|
|
|
color: $valid-value-color;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
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 04:48:50 -04:00
|
|
|
|
2019-09-18 10:37:27 -04:00
|
|
|
.negative-hint {
|
|
|
|
color: $error-value-color;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
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 04:48:50 -04:00
|
|
|
|
2019-09-18 10:37:27 -04:00
|
|
|
.neutral-hint {
|
|
|
|
color: $dark-text-color;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
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 04:48:50 -04:00
|
|
|
|
2019-09-18 10:37:27 -04:00
|
|
|
.warning-hint {
|
|
|
|
color: $gold-star;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
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 04:48:50 -04:00
|
|
|
}
|
|
|
|
|
2016-12-13 07:42:10 -05:00
|
|
|
.filters {
|
|
|
|
display: flex;
|
2017-09-08 20:26:58 -04:00
|
|
|
flex-wrap: wrap;
|
2016-12-13 07:42:10 -05:00
|
|
|
|
|
|
|
.filter-subset {
|
|
|
|
flex: 0 0 auto;
|
2019-09-20 04:52:14 -04:00
|
|
|
margin: 0 40px 20px 0;
|
2017-09-08 20:26:58 -04:00
|
|
|
|
|
|
|
&:last-child {
|
2019-09-20 04:52:14 -04:00
|
|
|
margin-bottom: 30px;
|
2017-09-08 20:26:58 -04:00
|
|
|
}
|
2016-12-13 07:42:10 -05:00
|
|
|
|
|
|
|
ul {
|
|
|
|
margin-top: 5px;
|
|
|
|
list-style: none;
|
|
|
|
|
|
|
|
li {
|
|
|
|
display: inline-block;
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
strong {
|
|
|
|
font-weight: 500;
|
2020-01-27 07:44:29 -05:00
|
|
|
text-transform: uppercase;
|
|
|
|
font-size: 12px;
|
2017-12-07 10:01:52 -05:00
|
|
|
|
|
|
|
@each $lang in $cjk-langs {
|
|
|
|
&:lang(#{$lang}) {
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
}
|
2016-12-13 07:42:10 -05:00
|
|
|
}
|
|
|
|
|
2020-04-03 07:06:34 -04:00
|
|
|
&--with-select strong {
|
|
|
|
display: block;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
2016-12-13 07:42:10 -05:00
|
|
|
a {
|
|
|
|
display: inline-block;
|
2018-04-18 10:52:15 -04:00
|
|
|
color: $darker-text-color;
|
2016-12-13 07:42:10 -05:00
|
|
|
text-decoration: none;
|
2020-01-27 07:44:29 -05:00
|
|
|
text-transform: uppercase;
|
|
|
|
font-size: 12px;
|
2016-12-13 07:42:10 -05:00
|
|
|
font-weight: 500;
|
2017-05-08 09:57:49 -04:00
|
|
|
border-bottom: 2px solid $ui-base-color;
|
2016-12-13 07:42:10 -05:00
|
|
|
|
|
|
|
&:hover {
|
2017-05-08 09:57:49 -04:00
|
|
|
color: $primary-text-color;
|
|
|
|
border-bottom: 2px solid lighten($ui-base-color, 5%);
|
2016-12-13 07:42:10 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
&.selected {
|
2018-04-18 10:52:15 -04:00
|
|
|
color: $highlight-text-color;
|
2017-05-08 09:57:49 -04:00
|
|
|
border-bottom: 2px solid $ui-highlight-color;
|
2016-12-13 07:42:10 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2017-02-16 18:42:52 -05:00
|
|
|
|
|
|
|
.report-accounts {
|
|
|
|
display: flex;
|
2017-09-02 09:49:28 -04:00
|
|
|
flex-wrap: wrap;
|
2017-02-16 18:42:52 -05:00
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.report-accounts__item {
|
2017-02-16 20:05:15 -05:00
|
|
|
display: flex;
|
2017-09-02 09:49:28 -04:00
|
|
|
flex: 250px;
|
2017-02-16 20:05:15 -05:00
|
|
|
flex-direction: column;
|
2017-09-02 09:49:28 -04:00
|
|
|
margin: 0 5px;
|
2017-02-16 18:42:52 -05:00
|
|
|
|
|
|
|
& > strong {
|
|
|
|
display: block;
|
2017-09-02 09:49:28 -04:00
|
|
|
margin: 0 0 10px -5px;
|
2017-02-16 18:42:52 -05:00
|
|
|
font-weight: 500;
|
|
|
|
font-size: 14px;
|
|
|
|
line-height: 18px;
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $secondary-text-color;
|
2017-12-07 10:01:52 -05:00
|
|
|
|
|
|
|
@each $lang in $cjk-langs {
|
|
|
|
&:lang(#{$lang}) {
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
}
|
2017-02-16 18:42:52 -05:00
|
|
|
}
|
|
|
|
|
2017-02-16 20:05:15 -05:00
|
|
|
.account-card {
|
|
|
|
flex: 1 1 auto;
|
|
|
|
}
|
2017-02-16 18:42:52 -05:00
|
|
|
}
|
|
|
|
|
2017-07-18 10:38:22 -04:00
|
|
|
.report-status,
|
|
|
|
.account-status {
|
2017-02-16 18:42:52 -05:00
|
|
|
display: flex;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
.activity-stream {
|
2017-02-16 20:05:15 -05:00
|
|
|
flex: 2 0 0;
|
2017-02-16 18:42:52 -05:00
|
|
|
margin-right: 20px;
|
2017-09-02 09:49:28 -04:00
|
|
|
max-width: calc(100% - 60px);
|
|
|
|
|
|
|
|
.entry {
|
|
|
|
border-radius: 4px;
|
|
|
|
}
|
2017-02-16 18:42:52 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-07-18 10:38:22 -04:00
|
|
|
.report-status__actions,
|
|
|
|
.account-status__actions {
|
2017-02-16 18:42:52 -05:00
|
|
|
flex: 0 0 auto;
|
2017-06-08 08:58:22 -04:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2017-05-23 13:45:43 -04:00
|
|
|
|
2017-06-08 08:58:22 -04:00
|
|
|
.icon-button {
|
2017-05-23 13:45:43 -04:00
|
|
|
font-size: 24px;
|
|
|
|
width: 24px;
|
2017-06-08 08:58:22 -04:00
|
|
|
text-align: center;
|
|
|
|
margin-bottom: 10px;
|
2017-05-23 13:45:43 -04:00
|
|
|
}
|
2017-02-16 18:42:52 -05:00
|
|
|
}
|
2017-07-18 10:38:22 -04:00
|
|
|
|
2018-05-05 17:06:29 -04:00
|
|
|
.simple_form.new_report_note,
|
|
|
|
.simple_form.new_account_moderation_note {
|
2018-04-19 20:28:48 -04:00
|
|
|
max-width: 100%;
|
2018-04-10 14:27:59 -04:00
|
|
|
}
|
|
|
|
|
2020-06-25 18:36:30 -04:00
|
|
|
.simple_form {
|
|
|
|
.actions {
|
|
|
|
margin-top: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.button {
|
|
|
|
font-size: 15px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-07-18 10:38:22 -04:00
|
|
|
.batch-form-box {
|
|
|
|
display: flex;
|
2017-09-02 09:49:28 -04:00
|
|
|
flex-wrap: wrap;
|
|
|
|
margin-bottom: 5px;
|
2017-07-18 10:38:22 -04:00
|
|
|
|
|
|
|
#form_status_batch_action {
|
2017-09-02 09:49:28 -04:00
|
|
|
margin: 0 5px 5px 0;
|
2017-07-18 10:38:22 -04:00
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
|
2017-09-02 09:49:28 -04:00
|
|
|
input.button {
|
|
|
|
margin: 0 5px 5px 0;
|
|
|
|
}
|
|
|
|
|
2017-07-18 10:38:22 -04:00
|
|
|
.media-spoiler-toggle-buttons {
|
|
|
|
margin-left: auto;
|
|
|
|
|
|
|
|
.button {
|
|
|
|
overflow: visible;
|
2017-09-02 09:49:28 -04:00
|
|
|
margin: 0 0 5px 5px;
|
|
|
|
float: right;
|
2017-07-18 10:38:22 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.back-link {
|
|
|
|
margin-bottom: 10px;
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
a {
|
2018-04-18 10:52:15 -04:00
|
|
|
color: $highlight-text-color;
|
2017-07-18 10:38:22 -04:00
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2017-11-23 20:05:53 -05:00
|
|
|
|
2020-04-28 13:39:16 -04:00
|
|
|
.special-action-button,
|
|
|
|
.back-link {
|
|
|
|
text-align: right;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-buttons {
|
|
|
|
display: flex;
|
|
|
|
overflow: hidden;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
|
2017-11-23 20:05:53 -05:00
|
|
|
.spacer {
|
|
|
|
flex: 1 1 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.log-entry {
|
|
|
|
line-height: 20px;
|
2022-01-17 03:41:33 -05:00
|
|
|
padding: 15px;
|
|
|
|
padding-left: 15px * 2 + 40px;
|
2020-04-03 07:06:34 -04:00
|
|
|
background: $ui-base-color;
|
2022-01-17 03:41:33 -05:00
|
|
|
border-bottom: 1px solid darken($ui-base-color, 8%);
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
border-top-left-radius: 4px;
|
|
|
|
border-top-right-radius: 4px;
|
|
|
|
}
|
2020-04-03 07:06:34 -04:00
|
|
|
|
|
|
|
&:last-child {
|
2022-01-17 03:41:33 -05:00
|
|
|
border-bottom-left-radius: 4px;
|
|
|
|
border-bottom-right-radius: 4px;
|
2020-04-03 07:06:34 -04:00
|
|
|
border-bottom: 0;
|
|
|
|
}
|
2017-11-23 20:05:53 -05:00
|
|
|
|
2022-01-17 03:41:33 -05:00
|
|
|
&:hover {
|
|
|
|
background: lighten($ui-base-color, 4%);
|
|
|
|
}
|
|
|
|
|
2017-11-23 20:05:53 -05:00
|
|
|
&__header {
|
2018-04-18 10:52:15 -04:00
|
|
|
color: $darker-text-color;
|
2017-11-23 20:05:53 -05:00
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__avatar {
|
2022-01-17 03:41:33 -05:00
|
|
|
position: absolute;
|
|
|
|
left: 15px;
|
|
|
|
top: 15px;
|
2017-11-23 20:05:53 -05:00
|
|
|
|
|
|
|
.avatar {
|
2022-01-17 03:41:33 -05:00
|
|
|
border-radius: 4px;
|
2017-11-23 20:05:53 -05:00
|
|
|
width: 40px;
|
|
|
|
height: 40px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__title {
|
2018-01-04 13:38:46 -05:00
|
|
|
word-wrap: break-word;
|
2017-11-23 20:05:53 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
&__timestamp {
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $dark-text-color;
|
2017-11-23 20:05:53 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
a,
|
|
|
|
.username,
|
|
|
|
.target {
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $secondary-text-color;
|
2017-11-23 20:05:53 -05:00
|
|
|
text-decoration: none;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
2022-01-17 03:41:33 -05:00
|
|
|
|
|
|
|
a {
|
|
|
|
&:hover,
|
|
|
|
&:focus,
|
|
|
|
&:active {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
2017-11-23 20:05:53 -05:00
|
|
|
}
|
2017-11-27 10:07:59 -05:00
|
|
|
|
2018-04-19 20:28:48 -04:00
|
|
|
a.name-tag,
|
2018-05-12 11:44:15 -04:00
|
|
|
.name-tag,
|
|
|
|
a.inline-name-tag,
|
|
|
|
.inline-name-tag {
|
2018-04-19 20:28:48 -04:00
|
|
|
text-decoration: none;
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $secondary-text-color;
|
2017-11-27 10:07:59 -05:00
|
|
|
|
|
|
|
.username {
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
2018-04-19 20:28:48 -04:00
|
|
|
|
|
|
|
&.suspended {
|
|
|
|
.username {
|
|
|
|
text-decoration: line-through;
|
|
|
|
color: lighten($error-red, 12%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
filter: grayscale(100%);
|
|
|
|
opacity: 0.8;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-12 11:44:15 -04:00
|
|
|
a.name-tag,
|
|
|
|
.name-tag {
|
2022-01-17 03:41:33 -05:00
|
|
|
display: inline-flex;
|
2018-05-12 11:44:15 -04:00
|
|
|
align-items: center;
|
2022-01-17 03:41:33 -05:00
|
|
|
vertical-align: top;
|
2018-05-12 11:44:15 -04:00
|
|
|
|
|
|
|
.avatar {
|
|
|
|
display: block;
|
|
|
|
margin: 0;
|
|
|
|
margin-right: 5px;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.suspended {
|
|
|
|
.avatar {
|
|
|
|
filter: grayscale(100%);
|
|
|
|
opacity: 0.8;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-04-19 20:28:48 -04:00
|
|
|
.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%);
|
|
|
|
}
|
|
|
|
|
Add moderation warnings (#9519)
* Add moderation warnings
Replace individual routes for disabling, silencing, and suspending
a user, as well as the report update route, with a unified account
action controller that allows you to select an action (none,
disable, silence, suspend) as well as whether it should generate an
e-mail notification with optional custom text. That notification,
with the optional custom text, is saved as a warning.
Additionally, there are warning presets you can configure to save
time when performing the above.
* Use Account#local_username_and_domain
2018-12-22 14:02:09 -05:00
|
|
|
&.warning {
|
|
|
|
border-left-color: $gold-star;
|
|
|
|
}
|
|
|
|
|
2018-04-19 20:28:48 -04:00
|
|
|
&__bubble {
|
|
|
|
padding: 16px;
|
|
|
|
padding-left: 14px;
|
|
|
|
font-size: 15px;
|
|
|
|
line-height: 20px;
|
|
|
|
border-radius: 4px 4px 4px 0;
|
|
|
|
position: relative;
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
a {
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $darker-text-color;
|
2018-04-19 20:28:48 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__owner {
|
|
|
|
padding: 8px;
|
|
|
|
padding-left: 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
time {
|
2018-04-21 15:35:55 -04:00
|
|
|
color: $dark-text-color;
|
2018-04-19 20:28:48 -04:00
|
|
|
}
|
2017-11-27 10:07:59 -05:00
|
|
|
}
|
2018-09-12 21:44:08 -04:00
|
|
|
|
|
|
|
.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;
|
2020-01-27 07:44:29 -05:00
|
|
|
text-transform: uppercase;
|
2018-09-12 21:44:08 -04:00
|
|
|
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;
|
|
|
|
}
|
2019-03-14 00:28:30 -04:00
|
|
|
|
|
|
|
.ellipsized-ip {
|
|
|
|
display: inline-block;
|
|
|
|
max-width: 120px;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
2019-09-09 08:15:52 -04:00
|
|
|
|
|
|
|
.admin-account-bio {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
margin: 0 -5px;
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
|
|
> div {
|
|
|
|
box-sizing: border-box;
|
|
|
|
padding: 0 5px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
flex: 1 0 50%;
|
2021-11-19 12:22:49 -05:00
|
|
|
max-width: 100%;
|
2019-09-09 08:15:52 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.account__header__fields,
|
|
|
|
.account__header__content {
|
|
|
|
background: lighten($ui-base-color, 8%);
|
|
|
|
border-radius: 4px;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.account__header__fields {
|
|
|
|
margin: 0;
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: lighten($ui-highlight-color, 8%);
|
|
|
|
}
|
|
|
|
|
|
|
|
dl:first-child .verified {
|
|
|
|
border-radius: 0 4px 0 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.verified a {
|
|
|
|
color: $valid-value-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.account__header__content {
|
|
|
|
box-sizing: border-box;
|
|
|
|
padding: 20px;
|
|
|
|
color: $primary-text-color;
|
|
|
|
}
|
|
|
|
}
|
2020-01-10 20:14:45 -05:00
|
|
|
|
|
|
|
.center-text {
|
|
|
|
text-align: center;
|
|
|
|
}
|
2020-01-27 20:21:00 -05:00
|
|
|
|
|
|
|
.announcements-list {
|
|
|
|
border: 1px solid lighten($ui-base-color, 4%);
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
|
|
&__item {
|
|
|
|
padding: 15px 0;
|
|
|
|
background: $ui-base-color;
|
|
|
|
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
|
|
|
|
|
|
|
&__title {
|
|
|
|
padding: 0 15px;
|
|
|
|
display: block;
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 18px;
|
|
|
|
line-height: 1.5;
|
|
|
|
color: $secondary-text-color;
|
|
|
|
text-decoration: none;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus,
|
|
|
|
&:active {
|
|
|
|
color: $primary-text-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__meta {
|
|
|
|
padding: 0 15px;
|
|
|
|
color: $dark-text-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__action-bar {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-04-28 13:39:16 -04:00
|
|
|
|
2021-10-14 14:44:59 -04:00
|
|
|
.dashboard__counters.admin-account-counters {
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
|
|
|
|
2020-04-28 13:39:16 -04:00
|
|
|
.account-badges {
|
|
|
|
margin: -2px 0;
|
|
|
|
}
|
|
|
|
|
2021-10-14 14:44:59 -04:00
|
|
|
.retention {
|
2021-10-21 00:24:34 -04:00
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
> h4 {
|
|
|
|
position: sticky;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
2021-10-14 14:44:59 -04:00
|
|
|
&__table {
|
|
|
|
&__number {
|
|
|
|
color: $secondary-text-color;
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__date {
|
|
|
|
white-space: nowrap;
|
|
|
|
padding: 10px 0;
|
|
|
|
text-align: left;
|
|
|
|
min-width: 120px;
|
|
|
|
|
|
|
|
&.retention__table__average {
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__size {
|
|
|
|
text-align: center;
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__label {
|
|
|
|
font-weight: 700;
|
|
|
|
color: $darker-text-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__box {
|
|
|
|
box-sizing: border-box;
|
|
|
|
background: $ui-highlight-color;
|
|
|
|
padding: 10px;
|
|
|
|
font-weight: 500;
|
|
|
|
color: $primary-text-color;
|
|
|
|
width: 52px;
|
|
|
|
margin: 1px;
|
|
|
|
|
|
|
|
@for $i from 0 through 10 {
|
|
|
|
&--#{10 * $i} {
|
|
|
|
background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10)));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.sparkline {
|
|
|
|
display: block;
|
|
|
|
text-decoration: none;
|
|
|
|
background: lighten($ui-base-color, 4%);
|
|
|
|
border-radius: 4px;
|
|
|
|
padding: 0;
|
|
|
|
position: relative;
|
|
|
|
padding-bottom: 55px + 20px;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
&__value {
|
|
|
|
display: flex;
|
|
|
|
line-height: 33px;
|
|
|
|
align-items: flex-end;
|
|
|
|
padding: 20px;
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
|
|
|
&__total {
|
|
|
|
display: block;
|
|
|
|
margin-right: 10px;
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 28px;
|
|
|
|
color: $primary-text-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__change {
|
|
|
|
display: block;
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 18px;
|
|
|
|
color: $darker-text-color;
|
|
|
|
margin-bottom: -3px;
|
|
|
|
|
|
|
|
&.positive {
|
|
|
|
color: $valid-value-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.negative {
|
|
|
|
color: $error-value-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__label {
|
|
|
|
padding: 0 20px;
|
|
|
|
padding-bottom: 10px;
|
|
|
|
text-transform: uppercase;
|
|
|
|
color: $darker-text-color;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__graph {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
2021-10-21 00:24:34 -04:00
|
|
|
width: 100%;
|
2021-10-14 14:44:59 -04:00
|
|
|
|
|
|
|
svg {
|
|
|
|
display: block;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
path:first-child {
|
|
|
|
fill: rgba($highlight-text-color, 0.25) !important;
|
|
|
|
fill-opacity: 1 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
path:last-child {
|
|
|
|
stroke: lighten($highlight-text-color, 6%) !important;
|
|
|
|
fill: none !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
a.sparkline {
|
|
|
|
&:hover,
|
|
|
|
&:focus,
|
|
|
|
&:active {
|
|
|
|
background: lighten($ui-base-color, 6%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.skeleton {
|
|
|
|
background-color: lighten($ui-base-color, 8%);
|
|
|
|
background-image: linear-gradient(90deg, lighten($ui-base-color, 8%), lighten($ui-base-color, 12%), lighten($ui-base-color, 8%));
|
|
|
|
background-size: 200px 100%;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
border-radius: 4px;
|
|
|
|
display: inline-block;
|
|
|
|
line-height: 1;
|
|
|
|
width: 100%;
|
|
|
|
animation: skeleton 1.2s ease-in-out infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes skeleton {
|
|
|
|
0% {
|
|
|
|
background-position: -200px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
background-position: calc(200px + 100%) 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.dimension {
|
|
|
|
table {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__item {
|
|
|
|
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
|
|
|
|
|
|
|
&__key {
|
|
|
|
font-weight: 500;
|
|
|
|
padding: 11px 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__value {
|
|
|
|
text-align: right;
|
|
|
|
color: $darker-text-color;
|
|
|
|
padding: 11px 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__indicator {
|
|
|
|
display: inline-block;
|
|
|
|
width: 8px;
|
|
|
|
height: 8px;
|
|
|
|
border-radius: 50%;
|
|
|
|
background: $ui-highlight-color;
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
|
|
@for $i from 0 through 10 {
|
|
|
|
&--#{10 * $i} {
|
|
|
|
background-color: rgba($ui-highlight-color, 1 * (math.div(max(1, $i), 10)));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
2020-04-28 13:39:16 -04:00
|
|
|
}
|
2022-01-17 03:41:33 -05:00
|
|
|
|
|
|
|
.report-reason-selector {
|
|
|
|
border-radius: 4px;
|
|
|
|
background: $ui-base-color;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
&__category {
|
|
|
|
cursor: pointer;
|
|
|
|
border-bottom: 1px solid darken($ui-base-color, 8%);
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__label {
|
|
|
|
padding: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__rules {
|
|
|
|
margin-left: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__rule {
|
|
|
|
cursor: pointer;
|
|
|
|
padding: 15px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.report-header {
|
|
|
|
display: grid;
|
|
|
|
grid-gap: 15px;
|
|
|
|
grid-template-columns: minmax(0, 1fr) 300px;
|
|
|
|
|
|
|
|
&__details {
|
|
|
|
&__item {
|
|
|
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
padding: 15px 0;
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__header {
|
|
|
|
font-weight: 600;
|
|
|
|
padding: 4px 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&--horizontal {
|
|
|
|
display: grid;
|
|
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
|
|
grid-auto-flow: column;
|
|
|
|
|
|
|
|
.report-header__details__item {
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.account-card {
|
|
|
|
background: $ui-base-color;
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
|
|
&__header {
|
|
|
|
padding: 4px;
|
|
|
|
border-radius: 4px;
|
|
|
|
height: 128px;
|
|
|
|
|
|
|
|
img {
|
|
|
|
display: block;
|
|
|
|
margin: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
background: darken($ui-base-color, 8%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__title {
|
|
|
|
margin-top: -25px;
|
|
|
|
display: flex;
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
|
|
&__avatar {
|
|
|
|
padding: 15px;
|
|
|
|
|
|
|
|
img {
|
|
|
|
display: block;
|
|
|
|
margin: 0;
|
|
|
|
width: 56px;
|
|
|
|
height: 56px;
|
|
|
|
background: darken($ui-base-color, 8%);
|
|
|
|
border-radius: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.display-name {
|
|
|
|
color: $darker-text-color;
|
|
|
|
padding-bottom: 15px;
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
|
|
bdi {
|
|
|
|
display: block;
|
|
|
|
color: $primary-text-color;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__bio {
|
|
|
|
padding: 0 15px;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
word-wrap: break-word;
|
|
|
|
max-height: 18px * 2;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
display: block;
|
|
|
|
content: "";
|
|
|
|
width: 50px;
|
|
|
|
height: 18px;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
right: 15px;
|
|
|
|
background: linear-gradient(to left, $ui-base-color, transparent);
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__actions {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
padding-top: 10px;
|
|
|
|
|
|
|
|
&__button {
|
|
|
|
flex: 0 0 auto;
|
|
|
|
padding: 0 15px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__counters {
|
|
|
|
flex: 1 1 auto;
|
|
|
|
display: grid;
|
|
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
|
|
grid-auto-flow: column;
|
|
|
|
|
|
|
|
&__item {
|
|
|
|
padding: 15px;
|
|
|
|
text-align: center;
|
|
|
|
color: $primary-text-color;
|
|
|
|
font-weight: 600;
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
|
|
small {
|
|
|
|
display: block;
|
|
|
|
color: $darker-text-color;
|
|
|
|
font-weight: 400;
|
|
|
|
font-size: 13px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.report-notes {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
&__item {
|
|
|
|
background: $ui-base-color;
|
|
|
|
position: relative;
|
|
|
|
padding: 15px;
|
|
|
|
padding-left: 15px * 2 + 40px;
|
|
|
|
border-bottom: 1px solid darken($ui-base-color, 8%);
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
border-top-left-radius: 4px;
|
|
|
|
border-top-right-radius: 4px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-bottom-left-radius: 4px;
|
|
|
|
border-bottom-right-radius: 4px;
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: lighten($ui-base-color, 4%);
|
|
|
|
}
|
|
|
|
|
|
|
|
&__avatar {
|
|
|
|
position: absolute;
|
|
|
|
left: 15px;
|
|
|
|
top: 15px;
|
|
|
|
border-radius: 4px;
|
|
|
|
width: 40px;
|
|
|
|
height: 40px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__header {
|
|
|
|
color: $darker-text-color;
|
|
|
|
font-size: 15px;
|
|
|
|
line-height: 20px;
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
|
|
|
.username a {
|
|
|
|
color: $primary-text-color;
|
|
|
|
font-weight: 500;
|
|
|
|
text-decoration: none;
|
|
|
|
margin-right: 5px;
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus,
|
|
|
|
&:active {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
time {
|
|
|
|
margin-left: 5px;
|
|
|
|
vertical-align: baseline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__content {
|
|
|
|
font-size: 15px;
|
|
|
|
line-height: 20px;
|
|
|
|
word-wrap: break-word;
|
|
|
|
font-weight: 400;
|
|
|
|
color: $primary-text-color;
|
|
|
|
|
|
|
|
p {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
white-space: pre-wrap;
|
|
|
|
unicode-bidi: plaintext;
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__actions {
|
|
|
|
position: absolute;
|
|
|
|
top: 15px;
|
|
|
|
right: 15px;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.report-actions {
|
|
|
|
border: 1px solid darken($ui-base-color, 8%);
|
|
|
|
|
|
|
|
&__item {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
line-height: 18px;
|
|
|
|
border-bottom: 1px solid darken($ui-base-color, 8%);
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__button {
|
2022-02-11 15:51:57 -05:00
|
|
|
box-sizing: border-box;
|
2022-01-17 03:41:33 -05:00
|
|
|
flex: 0 0 auto;
|
2022-02-11 15:51:57 -05:00
|
|
|
width: 200px;
|
2022-01-17 03:41:33 -05:00
|
|
|
padding: 15px;
|
|
|
|
padding-right: 0;
|
|
|
|
|
|
|
|
.button {
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__description {
|
|
|
|
padding: 15px;
|
|
|
|
font-size: 14px;
|
|
|
|
color: $dark-text-color;
|
|
|
|
}
|
|
|
|
}
|
2022-02-11 15:51:57 -05:00
|
|
|
|
|
|
|
@media screen and (max-width: 800px) {
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
&__item {
|
|
|
|
flex-direction: column;
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
&__button {
|
|
|
|
width: 100%;
|
|
|
|
padding: 15px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__description {
|
|
|
|
padding: 0;
|
|
|
|
padding-bottom: 15px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.section-skip-link {
|
|
|
|
float: right;
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: $ui-highlight-color;
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus,
|
|
|
|
&:active {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
2022-01-17 03:41:33 -05:00
|
|
|
}
|