mirror of
https://github.com/funamitech/mastodon
synced 2024-12-15 07:09:03 +09:00
aa884e0484
On mobile, batch actions are hidden from the settings/admin interface, but there are several places those actions can only be performed through batch actions. This may not look great, but at least it makes the actions available again.
294 lines
4.9 KiB
SCSS
294 lines
4.9 KiB
SCSS
.table {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
|
|
th,
|
|
td {
|
|
padding: 8px;
|
|
line-height: 18px;
|
|
vertical-align: top;
|
|
border-top: 1px solid $ui-base-color;
|
|
text-align: left;
|
|
background: darken($ui-base-color, 4%);
|
|
}
|
|
|
|
& > thead > tr > th {
|
|
vertical-align: bottom;
|
|
border-bottom: 2px solid $ui-base-color;
|
|
border-top: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
& > tbody > tr > th {
|
|
font-weight: 500;
|
|
}
|
|
|
|
& > tbody > tr:nth-child(odd) > td,
|
|
& > tbody > tr:nth-child(odd) > th {
|
|
background: $ui-base-color;
|
|
}
|
|
|
|
a {
|
|
color: $highlight-text-color;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
|
|
@each $lang in $cjk-langs {
|
|
&:lang(#{$lang}) {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.inline-table {
|
|
& > tbody > tr:nth-child(odd) {
|
|
& > td,
|
|
& > th {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
& > tbody > tr:first-child {
|
|
& > td,
|
|
& > th {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.batch-table {
|
|
& > thead > tr > th {
|
|
background: $ui-base-color;
|
|
border-top: 1px solid darken($ui-base-color, 8%);
|
|
border-bottom: 1px solid darken($ui-base-color, 8%);
|
|
|
|
&:first-child {
|
|
border-radius: 4px 0 0;
|
|
border-left: 1px solid darken($ui-base-color, 8%);
|
|
}
|
|
|
|
&:last-child {
|
|
border-radius: 0 4px 0 0;
|
|
border-right: 1px solid darken($ui-base-color, 8%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--invites tbody td {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.table-wrapper {
|
|
overflow: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
samp {
|
|
font-family: $font-monospace, monospace;
|
|
}
|
|
|
|
button.table-action-link {
|
|
background: transparent;
|
|
border: 0;
|
|
font: inherit;
|
|
}
|
|
|
|
button.table-action-link,
|
|
a.table-action-link {
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
padding: 0 10px;
|
|
color: $darker-text-color;
|
|
font-weight: 500;
|
|
|
|
&:hover {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
i.fa {
|
|
font-weight: 400;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&:first-child {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.batch-table {
|
|
&__toolbar,
|
|
&__row {
|
|
display: flex;
|
|
|
|
&__select {
|
|
box-sizing: border-box;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
min-height: 100%;
|
|
|
|
input {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
&--aligned {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
input {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__actions,
|
|
&__content {
|
|
padding: 8px 0;
|
|
padding-right: 16px;
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
&__toolbar {
|
|
border: 1px solid darken($ui-base-color, 8%);
|
|
background: $ui-base-color;
|
|
border-radius: 4px 0 0;
|
|
height: 47px;
|
|
align-items: center;
|
|
|
|
&__actions {
|
|
text-align: right;
|
|
padding-right: 16px - 5px;
|
|
}
|
|
}
|
|
|
|
&__form {
|
|
padding: 16px;
|
|
border: 1px solid darken($ui-base-color, 8%);
|
|
border-top: 0;
|
|
background: $ui-base-color;
|
|
|
|
.fields-row {
|
|
padding-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__row {
|
|
border: 1px solid darken($ui-base-color, 8%);
|
|
border-top: 0;
|
|
background: darken($ui-base-color, 4%);
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
.optional &:first-child {
|
|
border-top: 1px solid darken($ui-base-color, 8%);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: darken($ui-base-color, 2%);
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
background: $ui-base-color;
|
|
|
|
&:hover {
|
|
background: lighten($ui-base-color, 2%);
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
padding-top: 12px;
|
|
padding-bottom: 16px;
|
|
|
|
&--unpadded {
|
|
padding: 0;
|
|
}
|
|
|
|
&--with-image {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__image {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
|
|
.emojione {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
&__extra {
|
|
flex: 0 0 auto;
|
|
text-align: right;
|
|
color: $darker-text-color;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.directory__tag {
|
|
margin: 0;
|
|
width: 100%;
|
|
|
|
a {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.optional .batch-table__toolbar,
|
|
&.optional .batch-table__row__select {
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.status__content {
|
|
padding-top: 0;
|
|
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.nothing-here {
|
|
border: 1px solid darken($ui-base-color, 8%);
|
|
border-top: 0;
|
|
box-shadow: none;
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border-top: 1px solid darken($ui-base-color, 8%);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 870px) {
|
|
.accounts-table tbody td.optional {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|