OpenSource/mastodon
OpenSource/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-22 17:35:40 +01:00
Code Issues Projects Releases Packages Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

106
app/javascript/styles/mastodon-light/diff.scss
View file

@ -23,7 +23,7 @@ html {
// Change default background colors of columns // Change default background colors of columns
.interaction-modal { .interaction-modal {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
.rules-list li::before { .rules-list li::before {
@ -75,8 +75,8 @@ html {
} }
.getting-started .navigation-bar { .getting-started .navigation-bar {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--background-border-color);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
border-top: 0; border-top: 0;
@ -88,7 +88,7 @@ html {
.setting-text, .setting-text,
.report-dialog-modal__textarea, .report-dialog-modal__textarea,
.audio-player { .audio-player {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
.report-dialog-modal .dialog-option .poll__input { .report-dialog-modal .dialog-option .poll__input {
@ -140,7 +140,6 @@ html {
.actions-modal ul li:not(:empty) a:focus button, .actions-modal ul li:not(:empty) a:focus button,
.actions-modal ul li:not(:empty) a:hover, .actions-modal ul li:not(:empty) a:hover,
.actions-modal ul li:not(:empty) a:hover button, .actions-modal ul li:not(:empty) a:hover button,
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
.simple_form .block-button, .simple_form .block-button,
.simple_form .button, .simple_form .button,
.simple_form button { .simple_form button {
@ -175,7 +174,7 @@ html {
.picture-in-picture__footer, .picture-in-picture__footer,
.reactions-bar__item { .reactions-bar__item {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
.reactions-bar__item:hover, .reactions-bar__item:hover,
@ -217,7 +216,7 @@ html {
.column-header__collapsible-inner { .column-header__collapsible-inner {
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-bottom: 0; border-bottom: 0;
} }
@ -259,7 +258,7 @@ html {
.embed-modal .embed-modal__container .embed-modal__html { .embed-modal .embed-modal__container .embed-modal__html {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
&:focus { &:focus {
border-color: lighten($ui-base-color, 12%); border-color: lighten($ui-base-color, 12%);
@ -298,7 +297,7 @@ html {
.directory__tag > a, .directory__tag > a,
.directory__tag > div { .directory__tag > div {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
border-left: 0; border-left: 0;
@ -307,18 +306,6 @@ html {
} }
} }
.simple_form {
input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
textarea {
&:hover {
border-color: lighten($ui-base-color, 12%);
}
}
}
.picture-in-picture-placeholder { .picture-in-picture-placeholder {
background: $white; background: $white;
border-color: lighten($ui-base-color, 8%); border-color: lighten($ui-base-color, 8%);
@ -346,7 +333,7 @@ html {
} }
.activity-stream { .activity-stream {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
&--under-tabs { &--under-tabs {
border-top: 0; border-top: 0;
@ -411,6 +398,22 @@ html {
color: $ui-highlight-color; color: $ui-highlight-color;
background-color: rgba($ui-highlight-color, 0.1); background-color: rgba($ui-highlight-color, 0.1);
} }
input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
input[type='url'],
input[type='datetime-local'],
textarea {
background: darken($ui-base-color, 10%);
}
select {
background: darken($ui-base-color, 10%)
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
no-repeat right 8px center / auto 14px;
}
} }
.compose-form .compose-form__warning { .compose-form .compose-form__warning {
@ -449,8 +452,24 @@ html {
box-shadow: none; box-shadow: none;
} }
.card {
&__img {
background: darken($ui-base-color, 10%);
}
& > a {
&:hover,
&:active,
&:focus {
.card__bar {
background: darken($ui-base-color, 10%);
}
}
}
}
.mute-modal select { .mute-modal select {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
background: $simple-background-color background: $simple-background-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
@ -491,6 +510,7 @@ html {
.search__popout, .search__popout,
.emoji-mart-search input, .emoji-mart-search input,
.language-dropdown__dropdown .emoji-mart-search input, .language-dropdown__dropdown .emoji-mart-search input,
// .strike-card,
.poll__option input[type='text'] { .poll__option input[type='text'] {
background: darken($ui-base-color, 10%); background: darken($ui-base-color, 10%);
} }
@ -507,3 +527,43 @@ html {
.inline-follow-suggestions__body__scroll-button__icon { .inline-follow-suggestions__body__scroll-button__icon {
color: $white; color: $white;
} }
a.sparkline {
&:hover,
&:focus,
&:active {
background: darken($ui-base-color, 10%);
}
}
.dashboard__counters {
& > div {
& > a {
&:hover,
&:focus,
&:active {
background: darken($ui-base-color, 10%);
}
}
}
}
.directory {
&__tag {
& > a {
&:hover,
&:focus,
&:active {
background: darken($ui-base-color, 10%);
}
}
}
}
.strike-entry {
&:hover,
&:focus,
&:active {
background: darken($ui-base-color, 10%);
}
}

10
app/javascript/styles/mastodon/accounts.scss
View file

@ -10,7 +10,7 @@
&:active, &:active,
&:focus { &:focus {
.card__bar { .card__bar {
background: lighten($ui-base-color, 8%); background: $ui-base-color;
} }
} }
} }
@ -18,7 +18,9 @@
&__img { &__img {
height: 130px; height: 130px;
position: relative; position: relative;
background: darken($ui-base-color, 12%); background: $ui-base-color;
border: 1px solid var(--background-border-color);
border-bottom: none;
img { img {
display: block; display: block;
@ -39,7 +41,9 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: lighten($ui-base-color, 4%); background: var(--background-color);
border: 1px solid var(--background-border-color);
border-top: none;
.avatar { .avatar {
flex: 0 0 auto; flex: 0 0 auto;

176
app/javascript/styles/mastodon/admin.scss
View file

@ -1,7 +1,7 @@
@use 'sass:math'; @use 'sass:math';
$no-columns-breakpoint: 600px; $no-columns-breakpoint: 600px;
$sidebar-width: 240px; $sidebar-width: 300px;
$content-width: 840px; $content-width: 840px;
.admin-wrapper { .admin-wrapper {
@ -26,7 +26,7 @@ $content-width: 840px;
&__inner { &__inner {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
background: $ui-base-color; background: var(--background-color);
height: 100%; height: 100%;
} }
} }
@ -38,7 +38,7 @@ $content-width: 840px;
&__toggle { &__toggle {
display: none; display: none;
background: darken($ui-base-color, 4%); background: var(--background-color);
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid lighten($ui-base-color, 4%);
align-items: center; align-items: center;
@ -103,7 +103,6 @@ $content-width: 840px;
ul { ul {
list-style: none; list-style: none;
border-radius: 4px 0 0 4px;
overflow: hidden; overflow: hidden;
margin-bottom: 20px; margin-bottom: 20px;
@ -112,13 +111,13 @@ $content-width: 840px;
} }
a { a {
font-size: 14px;
display: block; display: block;
padding: 15px; padding: 15px;
color: $darker-text-color; color: $darker-text-color;
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
transition-property: color, background-color; transition-property: color, background-color;
border-radius: 4px 0 0 4px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -129,19 +128,13 @@ $content-width: 840px;
&:hover { &:hover {
color: $primary-text-color; color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
transition: all 100ms linear; transition: all 100ms linear;
transition-property: color, background-color; transition-property: color, background-color;
} }
&.selected {
border-radius: 4px 0 0;
}
} }
ul { ul {
background: darken($ui-base-color, 4%); background: var(--background-color);
border-radius: 0 0 0 4px;
margin: 0; margin: 0;
a { a {
@ -156,16 +149,10 @@ $content-width: 840px;
} }
.simple-navigation-active-leaf a { .simple-navigation-active-leaf a {
color: $primary-text-color; color: $highlight-text-color;
background-color: $ui-highlight-color;
border-bottom: 0; border-bottom: 0;
border-radius: 0;
} }
} }
& > ul > .simple-navigation-active-leaf a {
border-radius: 4px 0 0 4px;
}
} }
.content-wrapper { .content-wrapper {
@ -299,7 +286,7 @@ $content-width: 840px;
color: $darker-text-color; color: $darker-text-color;
padding-bottom: 8px; padding-bottom: 8px;
margin-bottom: 8px; margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
} }
h6 { h6 {
@ -372,7 +359,7 @@ $content-width: 840px;
width: 100%; width: 100%;
height: 0; height: 0;
border: 0; border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6); border-bottom: 1px solid var(--background-border-color);
margin: 20px 0; margin: 20px 0;
&.spacer { &.spacer {
@ -410,14 +397,14 @@ $content-width: 840px;
inset-inline-start: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
overflow-y: auto; overflow-y: auto;
background: $ui-base-color; background: var(--background-color);
} }
} }
ul a, ul a,
ul ul a { ul ul a {
font-size: 16px;
border-radius: 0; border-radius: 0;
border-bottom: 1px solid lighten($ui-base-color, 4%);
transition: none; transition: none;
&:hover { &:hover {
@ -683,8 +670,10 @@ body,
line-height: 20px; line-height: 20px;
padding: 15px; padding: 15px;
padding-inline-start: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
background: $ui-base-color; background: var(--background-color);
border-bottom: 1px solid darken($ui-base-color, 8%); border-right: 1px solid var(--background-border-color);
border-left: 1px solid var(--background-border-color);
border-bottom: 1px solid var(--background-border-color);
position: relative; position: relative;
text-decoration: none; text-decoration: none;
color: $darker-text-color; color: $darker-text-color;
@ -693,18 +682,13 @@ body,
&:first-child { &:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top: 1px solid var(--background-border-color);
} }
&:last-child { &:last-child {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom: 0; border-bottom: 1px solid var(--background-border-color);
}
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 4%);
} }
&__avatar { &__avatar {
@ -744,6 +728,47 @@ body,
} }
} }
.strike-entry {
display: block;
line-height: 20px;
padding: 15px;
padding-inline-start: 15px * 2 + 40px;
background: var(--background-color);
border: 1px solid var(--background-border-color);
border-radius: 4px;
position: relative;
text-decoration: none;
color: $darker-text-color;
font-size: 14px;
margin-bottom: 15px;
&__avatar {
position: absolute;
inset-inline-start: 15px;
top: 15px;
.avatar {
border-radius: 4px;
width: 40px;
height: 40px;
}
}
&__title {
word-wrap: break-word;
}
&__timestamp {
color: $dark-text-color;
}
&:hover,
&:focus,
&:active {
background: $ui-base-color;
}
}
a.name-tag, a.name-tag,
.name-tag, .name-tag,
a.inline-name-tag, a.inline-name-tag,
@ -751,6 +776,10 @@ a.inline-name-tag,
text-decoration: none; text-decoration: none;
color: $secondary-text-color; color: $secondary-text-color;
&:hover {
color: $highlight-text-color;
}
.username { .username {
font-weight: 500; font-weight: 500;
} }
@ -830,7 +859,8 @@ a.name-tag,
} }
.report-card { .report-card {
background: $ui-base-color; background: var(--background-color);
border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
margin-bottom: 20px; margin-bottom: 20px;
@ -842,7 +872,6 @@ a.name-tag,
.account { .account {
padding: 0; padding: 0;
border: 0;
&__avatar-wrapper { &__avatar-wrapper {
margin-inline-start: 0; margin-inline-start: 0;
@ -863,7 +892,7 @@ a.name-tag,
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
color: lighten($darker-text-color, 8%); color: $highlight-text-color;
} }
} }
@ -877,11 +906,7 @@ a.name-tag,
&__item { &__item {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
border-top: 1px solid darken($ui-base-color, 4%); border-top: 1px solid var(--background-border-color);
&:hover {
background: lighten($ui-base-color, 2%);
}
&__reported-by, &__reported-by,
&__assigned { &__assigned {
@ -904,7 +929,6 @@ a.name-tag,
max-width: calc(100% - 300px); max-width: calc(100% - 300px);
&__icon { &__icon {
color: $dark-text-color;
margin-inline-end: 4px; margin-inline-end: 4px;
font-weight: 500; font-weight: 500;
} }
@ -917,6 +941,10 @@ a.name-tag,
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
color: $darker-text-color; color: $darker-text-color;
&:hover {
color: $highlight-text-color;
}
} }
} }
} }
@ -952,14 +980,15 @@ a.name-tag,
.account__header__fields, .account__header__fields,
.account__header__content { .account__header__content {
background: lighten($ui-base-color, 8%); background: var(--background-color);
border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
height: 100%; height: 100%;
} }
.account__header__fields { .account__header__fields {
margin: 0; margin: 0;
border: 0; border: 1px solid var(--background-border-color);
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -988,8 +1017,8 @@ a.name-tag,
.applications-list__item, .applications-list__item,
.filters-list__item { .filters-list__item {
padding: 15px 0; padding: 15px 0;
background: $ui-base-color; background: var(--background-color);
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
margin-top: 15px; margin-top: 15px;
} }
@ -1000,13 +1029,13 @@ a.name-tag,
.announcements-list, .announcements-list,
.filters-list { .filters-list {
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
border-bottom: none;
&__item { &__item {
padding: 15px 0; padding: 15px 0;
background: $ui-base-color; border-bottom: 1px solid var(--background-border-color);
border-bottom: 1px solid lighten($ui-base-color, 4%);
&__title { &__title {
padding: 0 15px; padding: 0 15px;
@ -1018,6 +1047,10 @@ a.name-tag,
text-decoration: none; text-decoration: none;
margin-bottom: 10px; margin-bottom: 10px;
&:hover {
color: $highlight-text-color;
}
.account-role { .account-role {
vertical-align: middle; vertical-align: middle;
} }
@ -1056,10 +1089,6 @@ a.name-tag,
&__permissions { &__permissions {
margin-top: 10px; margin-top: 10px;
} }
&:last-child {
border-bottom: 0;
}
} }
} }
@ -1109,7 +1138,7 @@ a.name-tag,
&__table { &__table {
&__number { &__number {
color: $secondary-text-color; color: var(--background-color);
padding: 10px; padding: 10px;
} }
@ -1136,7 +1165,7 @@ a.name-tag,
&__box { &__box {
box-sizing: border-box; box-sizing: border-box;
background: $ui-highlight-color; background: var(--background-color);
padding: 10px; padding: 10px;
font-weight: 500; font-weight: 500;
color: $primary-text-color; color: $primary-text-color;
@ -1158,8 +1187,9 @@ a.name-tag,
.sparkline { .sparkline {
display: block; display: block;
text-decoration: none; text-decoration: none;
background: lighten($ui-base-color, 4%); background: var(--background-color);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color);
padding: 0; padding: 0;
position: relative; position: relative;
padding-bottom: 55px + 20px; padding-bottom: 55px + 20px;
@ -1231,12 +1261,12 @@ a.sparkline {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 6%); background: $ui-base-color;
} }
} }
.skeleton { .skeleton {
background-color: lighten($ui-base-color, 8%); background-color: var(--background-color);
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
lighten($ui-base-color, 8%), lighten($ui-base-color, 8%),
@ -1316,17 +1346,13 @@ a.sparkline {
.report-reason-selector { .report-reason-selector {
border-radius: 4px; border-radius: 4px;
background: $ui-base-color; background: var(--background-color);
margin-bottom: 20px; margin-bottom: 20px;
&__category { &__category {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid darken($ui-base-color, 8%);
&:last-child {
border-bottom: 0;
}
&__label { &__label {
padding: 15px; padding: 15px;
display: flex; display: flex;
@ -1355,7 +1381,7 @@ a.sparkline {
&__details { &__details {
&__item { &__item {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
padding: 15px 0; padding: 15px 0;
&:last-child { &:last-child {
@ -1386,7 +1412,7 @@ a.sparkline {
.account-card { .account-card {
border-radius: 4px; border-radius: 4px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
position: relative; position: relative;
&__warning-badge { &__warning-badge {
@ -1474,7 +1500,6 @@ a.sparkline {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
inset-inline-end: 15px; inset-inline-end: 15px;
background: linear-gradient(to left, $ui-base-color, transparent);
pointer-events: none; pointer-events: none;
} }
@ -1550,11 +1575,11 @@ a.sparkline {
margin-bottom: 20px; margin-bottom: 20px;
&__item { &__item {
background: $ui-base-color; background: var(--background-color);
position: relative; position: relative;
padding: 15px; padding: 15px;
padding-inline-start: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
border-bottom: 1px solid darken($ui-base-color, 8%); border: 1px solid var(--background-border-color);
&:first-child { &:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
@ -1564,11 +1589,6 @@ a.sparkline {
&:last-child { &:last-child {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom: 0;
}
&:hover {
background-color: lighten($ui-base-color, 4%);
} }
&__avatar { &__avatar {
@ -1646,13 +1666,10 @@ a.sparkline {
} }
.report-actions { .report-actions {
border: 1px solid darken($ui-base-color, 8%);
&__item { &__item {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 18px; line-height: 18px;
border-bottom: 1px solid darken($ui-base-color, 8%);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -1715,8 +1732,6 @@ a.sparkline {
.strike-card { .strike-card {
padding: 15px; padding: 15px;
border-radius: 4px;
background: $ui-base-color;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
@ -1724,6 +1739,8 @@ a.sparkline {
color: $primary-text-color; color: $primary-text-color;
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
border: 1px solid var(--background-border-color);
border-radius: 4px;
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -1764,15 +1781,14 @@ a.sparkline {
&__statuses-list { &__statuses-list {
border-radius: 4px; border-radius: 4px;
border: 1px solid darken($ui-base-color, 8%); border: 1px solid var(--background-border-color);
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
overflow: hidden; overflow: hidden;
&__item { &__item {
padding: 16px; padding: 16px;
background: lighten($ui-base-color, 2%); border-bottom: 1px solid var(--background-border-color);
border-bottom: 1px solid darken($ui-base-color, 8%);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;

2
app/javascript/styles/mastodon/basics.scss
View file

@ -122,7 +122,7 @@ body {
} }
&.admin { &.admin {
background: darken($ui-base-color, 4%); background: var(--background-color);
padding: 0; padding: 0;
} }

23
app/javascript/styles/mastodon/components.scss
View file

@ -521,7 +521,7 @@ body > [data-popper-placement] {
gap: 16px; gap: 16px;
flex: 0 1 auto; flex: 0 1 auto;
border-radius: 4px; border-radius: 4px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
transition: border-color 300ms linear; transition: border-color 300ms linear;
min-height: 0; min-height: 0;
position: relative; position: relative;
@ -587,7 +587,7 @@ body > [data-popper-placement] {
.autosuggest-input { .autosuggest-input {
flex: 1 1 auto; flex: 1 1 auto;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
} }
} }
@ -1452,7 +1452,7 @@ body > [data-popper-placement] {
} }
&--first-in-thread { &--first-in-thread {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--background-border-color);
} }
&__line { &__line {
@ -1794,7 +1794,6 @@ body > [data-popper-placement] {
.account { .account {
padding: 16px; padding: 16px;
border-bottom: 1px solid var(--background-border-color);
.account__display-name { .account__display-name {
flex: 1 1 auto; flex: 1 1 auto;
@ -3325,7 +3324,7 @@ $ui-header-logo-wordmark-width: 99px;
.copy-paste-text { .copy-paste-text {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
border-radius: 8px; border-radius: 8px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
padding: 16px; padding: 16px;
color: $primary-text-color; color: $primary-text-color;
font-size: 15px; font-size: 15px;
@ -4728,7 +4727,7 @@ a.status-card {
section { section {
padding: 16px; padding: 16px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -5316,7 +5315,7 @@ a.status-card {
input { input {
padding: 8px 12px; padding: 8px 12px;
background: $ui-base-color; background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
color: $darker-text-color; color: $darker-text-color;
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
@ -5402,7 +5401,7 @@ a.status-card {
margin-top: -2px; margin-top: -2px;
width: 100%; width: 100%;
background: $ui-base-color; background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
z-index: 99; z-index: 99;
@ -8789,13 +8788,13 @@ noscript {
} }
.search__input { .search__input {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
padding: 10px; padding: 10px;
padding-inline-end: 30px; padding-inline-end: 30px;
} }
.search__popout { .search__popout {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
.search .icon { .search .icon {
@ -9114,7 +9113,7 @@ noscript {
&__input { &__input {
@include search-input; @include search-input;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
padding: 4px 6px; padding: 4px 6px;
color: $primary-text-color; color: $primary-text-color;
font-size: 16px; font-size: 16px;
@ -9149,7 +9148,7 @@ noscript {
margin-top: -1px; margin-top: -1px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
&.focused &__input { &.focused &__input {

2
app/javascript/styles/mastodon/containers.scss
View file

@ -63,7 +63,7 @@
padding: 20px 0; padding: 20px 0;
margin-top: 40px; margin-top: 40px;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
@media screen and (width <= 440px) { @media screen and (width <= 440px) {
width: 100%; width: 100%;

5
app/javascript/styles/mastodon/dashboard.scss
View file

@ -13,8 +13,9 @@
& > div, & > div,
& > a { & > a {
padding: 20px; padding: 20px;
background: lighten($ui-base-color, 4%); background: var(--background-color);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color);
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
} }
@ -27,7 +28,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 8%); background: $ui-base-color;
} }
} }
} }

2
app/javascript/styles/mastodon/emoji_picker.scss
View file

@ -105,7 +105,7 @@
width: 100%; width: 100%;
background: $ui-base-color; background: $ui-base-color;
color: $darker-text-color; color: $darker-text-color;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
&::-moz-focus-inner { &::-moz-focus-inner {

35
app/javascript/styles/mastodon/forms.scss
View file

@ -414,7 +414,7 @@ code {
} }
.input.static .label_input__wrapper { .input.static .label_input__wrapper {
font-size: 16px; font-size: 14px;
padding: 10px; padding: 10px;
border: 1px solid $dark-text-color; border: 1px solid $dark-text-color;
border-radius: 4px; border-radius: 4px;
@ -436,13 +436,14 @@ code {
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: darken($ui-base-color, 10%); background: $ui-base-color;
border: 1px solid darken($ui-base-color, 10%); border: 1px solid var(--background-border-color);
border-radius: 8px; border-radius: 4px;
padding: 10px 16px; padding: 10px 16px;
&::placeholder { &::placeholder {
color: lighten($darker-text-color, 4%); color: $dark-text-color;
opacity: 1;
} }
&:invalid { &:invalid {
@ -453,11 +454,6 @@ code {
border-color: $valid-value-color; border-color: $valid-value-color;
} }
&:active,
&:focus {
border-color: $highlight-text-color;
}
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
font-size: 16px; font-size: 16px;
} }
@ -576,21 +572,25 @@ code {
select { select {
appearance: none; appearance: none;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 14px;
color: $primary-text-color; color: $primary-text-color;
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: darken($ui-base-color, 10%) background: $ui-base-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 14px;
border: 1px solid darken($ui-base-color, 14%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
padding-inline-start: 10px; padding-inline-start: 10px;
padding-inline-end: 30px; padding-inline-end: 30px;
height: 41px; height: 41px;
@media screen and (width <= 600px) {
font-size: 16px;
}
} }
h4 { h4 {
@ -644,8 +644,9 @@ code {
} }
.flash-message { .flash-message {
background: lighten($ui-base-color, 8%); background: var(--background-color);
color: $darker-text-color; color: $highlight-text-color;
border: 1px solid $highlight-text-color;
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
margin-bottom: 30px; margin-bottom: 30px;
@ -1335,7 +1336,7 @@ code {
&__toggle > div { &__toggle > div {
display: flex; display: flex;
border-inline-start: 1px solid lighten($ui-base-color, 8%); border-inline-start: 1px solid var(--background-border-color);
padding-inline-start: 16px; padding-inline-start: 16px;
} }
} }

2
app/javascript/styles/mastodon/rtl.scss
View file

@ -46,7 +46,7 @@ body.rtl {
} }
.simple_form select { .simple_form select {
background: darken($ui-base-color, 10%) background: $ui-base-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
no-repeat left 8px center / auto 16px; no-repeat left 8px center / auto 16px;
} }

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

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

8
app/javascript/styles/mastodon/widgets.scss
View file

@ -204,7 +204,7 @@
} }
.directory { .directory {
background: $ui-base-color; background: var(--background-color);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@ -217,7 +217,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: $ui-base-color; border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px; border-radius: 4px;
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
@ -229,7 +229,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: lighten($ui-base-color, 8%); background: $ui-base-color;
} }
} }
@ -351,7 +351,7 @@
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
text-decoration: underline; color: $highlight-text-color;
} }
} }
} }

4
app/views/admin/roles/index.html.haml
View file

@ -8,10 +8,10 @@
%hr.spacer/ %hr.spacer/
.applications-list .announcements-list
= render partial: 'role', collection: @roles.select(&:everyone?) = render partial: 'role', collection: @roles.select(&:everyone?)
%hr.spacer/ %hr.spacer/
.applications-list .announcements-list
= render partial: 'role', collection: @roles.reject(&:everyone?) = render partial: 'role', collection: @roles.reject(&:everyone?)

12
app/views/auth/registrations/_account_warning.html.haml
View file

@ -1,14 +1,14 @@
= link_to disputes_strike_path(account_warning), class: 'log-entry' do = link_to disputes_strike_path(account_warning), class: 'strike-entry' do
.log-entry__header .strike-entry__header
.log-entry__avatar .strike-entry__avatar
.indicator-icon{ class: account_warning.overruled? ? 'success' : 'failure' } .indicator-icon{ class: account_warning.overruled? ? 'success' : 'failure' }
= fa_icon 'warning' = fa_icon 'warning'
.log-entry__content .strike-entry__content
.log-entry__title .strike-entry__title
= t 'disputes.strikes.title', = t 'disputes.strikes.title',
action: t(account_warning.action, scope: 'disputes.strikes.title_actions'), action: t(account_warning.action, scope: 'disputes.strikes.title_actions'),
date: l(account_warning.created_at.to_date) date: l(account_warning.created_at.to_date)
.log-entry__timestamp .strike-entry__timestamp
%time.formatted{ datetime: account_warning.created_at.iso8601 }= l(account_warning.created_at) %time.formatted{ datetime: account_warning.created_at.iso8601 }= l(account_warning.created_at)
- if account_warning.overruled? - if account_warning.overruled?