Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Recolor Preferences/Admin UI to better match main design (#31034)

Browse source
This commit is contained in:
Michael Stanclift 2024-07-23 10:30:45 -05:00 • committed by GitHub
parent cd0ca4b994
commit 8b7f93cc7f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 266 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

68
app/javascript/styles/mastodon/tables.scss
View file

@ -9,9 +9,9 @@
padding: 8px;
line-height: 18px;
vertical-align: top;
border-top: 1px solid $ui-base-color;
border-bottom: 1px solid var(--background-border-color);
text-align: start;
background: darken($ui-base-color, 4%);
background: var(--background-color);
&.critical {
font-weight: 700;
@ -21,8 +21,6 @@
& > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid $ui-base-color;
border-top: 0;
font-weight: 500;
}
@ -32,15 +30,20 @@
& > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th {
background: $ui-base-color;
background: var(--background-color);
}
& > tbody > tr:last-child > td,
& > tbody > tr:last-child > th {
border-bottom: 0;
}
a {
color: $highlight-text-color;
text-decoration: underline;
color: $darker-text-color;
text-decoration: none;
&:hover {
text-decoration: none;
color: $highlight-text-color;
}
}
@ -78,7 +81,7 @@
& > tbody > tr > td {
padding: 11px 10px;
background: transparent;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid var(--background-border-color);
color: $secondary-text-color;
}
@ -90,18 +93,18 @@
&.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%);
background: var(--background-color);
border-top: 1px solid var(--background-border-color);
border-bottom: 1px solid var(--background-border-color);
&:first-child {
border-radius: 4px 0 0;
border-inline-start: 1px solid darken($ui-base-color, 8%);
border-inline-start: 1px solid var(--background-border-color);
}
&:last-child {
border-radius: 0 4px 0 0;
border-inline-end: 1px solid darken($ui-base-color, 8%);
border-inline-end: 1px solid var(--background-border-color);
}
}
}
@ -136,7 +139,7 @@ a.table-action-link {
font-weight: 500;
&:hover {
color: $primary-text-color;
color: $highlight-text-color;
}
i.fa {
@ -186,9 +189,9 @@ a.table-action-link {
position: sticky;
top: 0;
z-index: 1;
border: 1px solid darken($ui-base-color, 8%);
background: $ui-base-color;
border-radius: 4px 0 0;
border: 1px solid var(--background-border-color);
background: var(--background-color);
border-radius: 4px 4px 0 0;
height: 47px;
align-items: center;
@ -199,11 +202,11 @@ a.table-action-link {
}
&__select-all {
background: $ui-base-color;
background: var(--background-color);
height: 47px;
align-items: center;
justify-content: center;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid var(--background-border-color);
border-top: 0;
color: $secondary-text-color;
display: none;
@ -249,9 +252,9 @@ a.table-action-link {
&__form {
padding: 16px;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid var(--background-border-color);
border-top: 0;
background: $ui-base-color;
background: var(--background-color);
.fields-row {
padding-top: 0;
@ -260,26 +263,18 @@ a.table-action-link {
}
&__row {
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid var(--background-border-color);
border-top: 0;
background: darken($ui-base-color, 4%);
background: var(--background-color);
@media screen and (max-width: $no-gap-breakpoint) {
.optional &:first-child {
border-top: 1px solid darken($ui-base-color, 8%);
border-top: 1px solid var(--background-border-color);
}
}
&:hover {
background: darken($ui-base-color, 2%);
}
&:nth-child(even) {
background: $ui-base-color;
&:hover {
background: lighten($ui-base-color, 2%);
}
background: var(--background-color);
}
&__content {
@ -357,12 +352,13 @@ a.table-action-link {
}
.nothing-here {
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid var(--background-border-color);
border-top: 0;
box-shadow: none;
background: var(--background-color);
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 1px solid darken($ui-base-color, 8%);
border-top: 1px solid var(--background-border-color);
}
}