1
0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
mastodon/app/javascript/styles/admin.scss
unarist af10c9fbff Add section for protocol specific information on the admin page ()
This PR adds section for protocol specific information, then always show
both of OStatus and ActivityPub. Specifically, this will help admins to
check PuSH subscription status and unsubscribe manually, even `protocol`
has been changed.

This also includes below changes:

* Add `overflow: hidden` to prevent float leaking
* Add missing fields for ActivityPub
2017-09-12 23:06:10 +02:00

350 lines
5.8 KiB
SCSS

.admin-wrapper {
display: flex;
justify-content: center;
height: 100%;
.sidebar-wrapper {
flex: 1;
height: 100%;
background: $ui-base-color;
display: flex;
justify-content: flex-end;
}
.sidebar {
width: 240px;
height: 100%;
padding: 0;
overflow-y: auto;
.logo {
display: block;
margin: 40px auto;
width: 100px;
height: 100px;
}
ul {
list-style: none;
border-radius: 4px 0 0 4px;
overflow: hidden;
margin-bottom: 20px;
a {
display: block;
padding: 15px;
color: rgba($primary-text-color, 0.7);
text-decoration: none;
transition: all 200ms linear;
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;
}
&.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;
&.selected {
color: $primary-text-color;
background-color: $ui-highlight-color;
border-bottom: 0;
border-radius: 0;
&:hover {
background-color: lighten($ui-highlight-color, 5%);
}
}
}
}
}
}
.content-wrapper {
flex: 2;
overflow: auto;
}
.content {
max-width: 700px;
padding: 20px 15px;
padding-top: 60px;
padding-left: 25px;
h2 {
color: $ui-secondary-color;
font-size: 24px;
line-height: 28px;
font-weight: 400;
margin-bottom: 40px;
}
h3 {
color: $ui-secondary-color;
font-size: 20px;
line-height: 28px;
font-weight: 400;
margin-bottom: 30px;
}
h6 {
font-size: 16px;
color: $ui-secondary-color;
line-height: 28px;
font-weight: 400;
}
& > p {
font-size: 14px;
line-height: 18px;
color: $ui-secondary-color;
margin-bottom: 20px;
strong {
color: $primary-text-color;
font-weight: 500;
}
}
hr {
margin: 20px 0;
border: 0;
background: transparent;
border-bottom: 1px solid $ui-base-color;
}
.muted-hint {
color: $ui-primary-color;
a {
color: $ui-highlight-color;
}
}
.positive-hint {
color: $valid-value-color;
font-weight: 500;
}
}
.simple_form {
max-width: 400px;
&.edit_user,
&.new_form_admin_settings,
&.new_form_two_factor_confirmation,
&.new_form_delete_confirmation,
&.new_import,
&.new_domain_block,
&.edit_domain_block {
max-width: none;
}
.form_two_factor_confirmation_code,
.form_delete_confirmation_password {
max-width: 400px;
}
.actions {
max-width: 400px;
}
}
@media screen and (max-width: 600px) {
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: 10px 0;
height: auto;
.logo {
margin: 20px auto;
}
}
.content {
padding-top: 20px;
}
}
}
.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;
}
a {
display: inline-block;
color: rgba($primary-text-color, 0.7);
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: $ui-highlight-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: $ui-secondary-color;
}
.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;
}
}
.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;
}
}
}
.batch-checkbox,
.batch-checkbox-all {
display: flex;
align-items: center;
margin-right: 5px;
}
.back-link {
margin-bottom: 10px;
font-size: 14px;
a {
color: $classic-highlight-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}