mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-12-05 04:29:03 +01: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.
293 lines
4.9 KiB
SCSS
293 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;
|
|
}
|
|
}
|
|
}
|