From 8b7f93cc7fa7a8421ceddeaa79e487360a4ad223 Mon Sep 17 00:00:00 2001 From: Michael Stanclift Date: Tue, 23 Jul 2024 10:30:45 -0500 Subject: [PATCH] Recolor Preferences/Admin UI to better match main design (#31034) --- .../styles/mastodon-light/diff.scss | 106 ++++++++--- app/javascript/styles/mastodon/accounts.scss | 10 +- app/javascript/styles/mastodon/admin.scss | 176 ++++++++++-------- app/javascript/styles/mastodon/basics.scss | 2 +- .../styles/mastodon/components.scss | 23 ++- .../styles/mastodon/containers.scss | 2 +- app/javascript/styles/mastodon/dashboard.scss | 5 +- .../styles/mastodon/emoji_picker.scss | 2 +- app/javascript/styles/mastodon/forms.scss | 35 ++-- app/javascript/styles/mastodon/rtl.scss | 2 +- app/javascript/styles/mastodon/tables.scss | 68 ++++--- app/javascript/styles/mastodon/widgets.scss | 8 +- app/views/admin/roles/index.html.haml | 4 +- .../registrations/_account_warning.html.haml | 12 +- 14 files changed, 266 insertions(+), 189 deletions(-) diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index a41272364a..635bab5460 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -23,7 +23,7 @@ html { // Change default background colors of columns .interaction-modal { background: $white; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); } .rules-list li::before { @@ -75,8 +75,8 @@ html { } .getting-started .navigation-bar { - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid var(--background-border-color); + border-bottom: 1px solid var(--background-border-color); @media screen and (max-width: $no-gap-breakpoint) { border-top: 0; @@ -88,7 +88,7 @@ html { .setting-text, .report-dialog-modal__textarea, .audio-player { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); } .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:hover, .actions-modal ul li:not(:empty) a:hover button, -.admin-wrapper .sidebar ul .simple-navigation-active-leaf a, .simple_form .block-button, .simple_form .button, .simple_form button { @@ -175,7 +174,7 @@ html { .picture-in-picture__footer, .reactions-bar__item { background: $white; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); } .reactions-bar__item:hover, @@ -217,7 +216,7 @@ html { .column-header__collapsible-inner { background: darken($ui-base-color, 4%); - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); border-bottom: 0; } @@ -259,7 +258,7 @@ html { .embed-modal .embed-modal__container .embed-modal__html { background: $white; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); &:focus { border-color: lighten($ui-base-color, 12%); @@ -298,7 +297,7 @@ html { .directory__tag > a, .directory__tag > div { 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) { 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 { background: $white; border-color: lighten($ui-base-color, 8%); @@ -346,7 +333,7 @@ html { } .activity-stream { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); &--under-tabs { border-top: 0; @@ -411,6 +398,22 @@ html { color: $ui-highlight-color; 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,") + no-repeat right 8px center / auto 14px; + } } .compose-form .compose-form__warning { @@ -449,8 +452,24 @@ html { 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 { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; @@ -491,6 +510,7 @@ html { .search__popout, .emoji-mart-search input, .language-dropdown__dropdown .emoji-mart-search input, +// .strike-card, .poll__option input[type='text'] { background: darken($ui-base-color, 10%); } @@ -507,3 +527,43 @@ html { .inline-follow-suggestions__body__scroll-button__icon { 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%); + } +} diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 80d6c13cef..e63601fa9f 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -10,7 +10,7 @@ &:active, &:focus { .card__bar { - background: lighten($ui-base-color, 8%); + background: $ui-base-color; } } } @@ -18,7 +18,9 @@ &__img { height: 130px; position: relative; - background: darken($ui-base-color, 12%); + background: $ui-base-color; + border: 1px solid var(--background-border-color); + border-bottom: none; img { display: block; @@ -39,7 +41,9 @@ display: flex; justify-content: flex-start; align-items: center; - background: lighten($ui-base-color, 4%); + background: var(--background-color); + border: 1px solid var(--background-border-color); + border-top: none; .avatar { flex: 0 0 auto; diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 06a3b52021..7420a6fc59 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1,7 +1,7 @@ @use 'sass:math'; $no-columns-breakpoint: 600px; -$sidebar-width: 240px; +$sidebar-width: 300px; $content-width: 840px; .admin-wrapper { @@ -26,7 +26,7 @@ $content-width: 840px; &__inner { display: flex; justify-content: flex-end; - background: $ui-base-color; + background: var(--background-color); height: 100%; } } @@ -38,7 +38,7 @@ $content-width: 840px; &__toggle { display: none; - background: darken($ui-base-color, 4%); + background: var(--background-color); border-bottom: 1px solid lighten($ui-base-color, 4%); align-items: center; @@ -103,7 +103,6 @@ $content-width: 840px; ul { list-style: none; - border-radius: 4px 0 0 4px; overflow: hidden; margin-bottom: 20px; @@ -112,13 +111,13 @@ $content-width: 840px; } a { + font-size: 14px; display: block; padding: 15px; color: $darker-text-color; text-decoration: none; transition: all 200ms linear; transition-property: color, background-color; - border-radius: 4px 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -129,19 +128,13 @@ $content-width: 840px; &:hover { color: $primary-text-color; - background-color: darken($ui-base-color, 5%); transition: all 100ms linear; transition-property: color, background-color; } - - &.selected { - border-radius: 4px 0 0; - } } ul { - background: darken($ui-base-color, 4%); - border-radius: 0 0 0 4px; + background: var(--background-color); margin: 0; a { @@ -156,16 +149,10 @@ $content-width: 840px; } .simple-navigation-active-leaf a { - color: $primary-text-color; - background-color: $ui-highlight-color; + color: $highlight-text-color; border-bottom: 0; - border-radius: 0; } } - - & > ul > .simple-navigation-active-leaf a { - border-radius: 4px 0 0 4px; - } } .content-wrapper { @@ -299,7 +286,7 @@ $content-width: 840px; color: $darker-text-color; padding-bottom: 8px; margin-bottom: 8px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--background-border-color); } h6 { @@ -372,7 +359,7 @@ $content-width: 840px; width: 100%; height: 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; &.spacer { @@ -410,14 +397,14 @@ $content-width: 840px; inset-inline-start: 0; bottom: 0; overflow-y: auto; - background: $ui-base-color; + background: var(--background-color); } } ul a, ul ul a { + font-size: 16px; border-radius: 0; - border-bottom: 1px solid lighten($ui-base-color, 4%); transition: none; &:hover { @@ -683,8 +670,10 @@ body, line-height: 20px; padding: 15px; padding-inline-start: 15px * 2 + 40px; - background: $ui-base-color; - border-bottom: 1px solid darken($ui-base-color, 8%); + background: var(--background-color); + 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; text-decoration: none; color: $darker-text-color; @@ -693,18 +682,13 @@ body, &:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; + border-top: 1px solid var(--background-border-color); } &:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - border-bottom: 0; - } - - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 4%); + border-bottom: 1px solid var(--background-border-color); } &__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, .name-tag, a.inline-name-tag, @@ -751,6 +776,10 @@ a.inline-name-tag, text-decoration: none; color: $secondary-text-color; + &:hover { + color: $highlight-text-color; + } + .username { font-weight: 500; } @@ -830,7 +859,8 @@ a.name-tag, } .report-card { - background: $ui-base-color; + background: var(--background-color); + border: 1px solid var(--background-border-color); border-radius: 4px; margin-bottom: 20px; @@ -842,7 +872,6 @@ a.name-tag, .account { padding: 0; - border: 0; &__avatar-wrapper { margin-inline-start: 0; @@ -863,7 +892,7 @@ a.name-tag, &:focus, &:hover, &:active { - color: lighten($darker-text-color, 8%); + color: $highlight-text-color; } } @@ -877,11 +906,7 @@ a.name-tag, &__item { display: flex; justify-content: flex-start; - border-top: 1px solid darken($ui-base-color, 4%); - - &:hover { - background: lighten($ui-base-color, 2%); - } + border-top: 1px solid var(--background-border-color); &__reported-by, &__assigned { @@ -904,7 +929,6 @@ a.name-tag, max-width: calc(100% - 300px); &__icon { - color: $dark-text-color; margin-inline-end: 4px; font-weight: 500; } @@ -917,6 +941,10 @@ a.name-tag, padding: 15px; text-decoration: none; color: $darker-text-color; + + &:hover { + color: $highlight-text-color; + } } } } @@ -952,14 +980,15 @@ a.name-tag, .account__header__fields, .account__header__content { - background: lighten($ui-base-color, 8%); + background: var(--background-color); + border: 1px solid var(--background-border-color); border-radius: 4px; height: 100%; } .account__header__fields { margin: 0; - border: 0; + border: 1px solid var(--background-border-color); a { color: $highlight-text-color; @@ -988,8 +1017,8 @@ a.name-tag, .applications-list__item, .filters-list__item { padding: 15px 0; - background: $ui-base-color; - border: 1px solid lighten($ui-base-color, 4%); + background: var(--background-color); + border: 1px solid var(--background-border-color); border-radius: 4px; margin-top: 15px; } @@ -1000,13 +1029,13 @@ a.name-tag, .announcements-list, .filters-list { - border: 1px solid lighten($ui-base-color, 4%); + border: 1px solid var(--background-border-color); border-radius: 4px; + border-bottom: none; &__item { padding: 15px 0; - background: $ui-base-color; - border-bottom: 1px solid lighten($ui-base-color, 4%); + border-bottom: 1px solid var(--background-border-color); &__title { padding: 0 15px; @@ -1018,6 +1047,10 @@ a.name-tag, text-decoration: none; margin-bottom: 10px; + &:hover { + color: $highlight-text-color; + } + .account-role { vertical-align: middle; } @@ -1056,10 +1089,6 @@ a.name-tag, &__permissions { margin-top: 10px; } - - &:last-child { - border-bottom: 0; - } } } @@ -1109,7 +1138,7 @@ a.name-tag, &__table { &__number { - color: $secondary-text-color; + color: var(--background-color); padding: 10px; } @@ -1136,7 +1165,7 @@ a.name-tag, &__box { box-sizing: border-box; - background: $ui-highlight-color; + background: var(--background-color); padding: 10px; font-weight: 500; color: $primary-text-color; @@ -1158,8 +1187,9 @@ a.name-tag, .sparkline { display: block; text-decoration: none; - background: lighten($ui-base-color, 4%); + background: var(--background-color); border-radius: 4px; + border: 1px solid var(--background-border-color); padding: 0; position: relative; padding-bottom: 55px + 20px; @@ -1231,12 +1261,12 @@ a.sparkline { &:hover, &:focus, &:active { - background: lighten($ui-base-color, 6%); + background: $ui-base-color; } } .skeleton { - background-color: lighten($ui-base-color, 8%); + background-color: var(--background-color); background-image: linear-gradient( 90deg, lighten($ui-base-color, 8%), @@ -1316,17 +1346,13 @@ a.sparkline { .report-reason-selector { border-radius: 4px; - background: $ui-base-color; + background: var(--background-color); margin-bottom: 20px; &__category { cursor: pointer; border-bottom: 1px solid darken($ui-base-color, 8%); - &:last-child { - border-bottom: 0; - } - &__label { padding: 15px; display: flex; @@ -1355,7 +1381,7 @@ a.sparkline { &__details { &__item { - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--background-border-color); padding: 15px 0; &:last-child { @@ -1386,7 +1412,7 @@ a.sparkline { .account-card { border-radius: 4px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); position: relative; &__warning-badge { @@ -1474,7 +1500,6 @@ a.sparkline { position: absolute; bottom: 0; inset-inline-end: 15px; - background: linear-gradient(to left, $ui-base-color, transparent); pointer-events: none; } @@ -1550,11 +1575,11 @@ a.sparkline { margin-bottom: 20px; &__item { - background: $ui-base-color; + background: var(--background-color); position: relative; padding: 15px; padding-inline-start: 15px * 2 + 40px; - border-bottom: 1px solid darken($ui-base-color, 8%); + border: 1px solid var(--background-border-color); &:first-child { border-top-left-radius: 4px; @@ -1564,11 +1589,6 @@ a.sparkline { &:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - border-bottom: 0; - } - - &:hover { - background-color: lighten($ui-base-color, 4%); } &__avatar { @@ -1646,13 +1666,10 @@ a.sparkline { } .report-actions { - border: 1px solid darken($ui-base-color, 8%); - &__item { display: flex; align-items: center; line-height: 18px; - border-bottom: 1px solid darken($ui-base-color, 8%); &:last-child { border-bottom: 0; @@ -1715,8 +1732,6 @@ a.sparkline { .strike-card { padding: 15px; - border-radius: 4px; - background: $ui-base-color; font-size: 15px; line-height: 20px; word-wrap: break-word; @@ -1724,6 +1739,8 @@ a.sparkline { color: $primary-text-color; box-sizing: border-box; min-height: 100%; + border: 1px solid var(--background-border-color); + border-radius: 4px; a { color: $highlight-text-color; @@ -1764,15 +1781,14 @@ a.sparkline { &__statuses-list { border-radius: 4px; - border: 1px solid darken($ui-base-color, 8%); + border: 1px solid var(--background-border-color); font-size: 13px; line-height: 18px; overflow: hidden; &__item { padding: 16px; - background: lighten($ui-base-color, 2%); - border-bottom: 1px solid darken($ui-base-color, 8%); + border-bottom: 1px solid var(--background-border-color); &:last-child { border-bottom: 0; diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 2e7d5e5e9c..456e042c53 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -122,7 +122,7 @@ body { } &.admin { - background: darken($ui-base-color, 4%); + background: var(--background-color); padding: 0; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 18a775fb2f..58c9b53a2c 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -521,7 +521,7 @@ body > [data-popper-placement] { gap: 16px; flex: 0 1 auto; border-radius: 4px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); transition: border-color 300ms linear; min-height: 0; position: relative; @@ -587,7 +587,7 @@ body > [data-popper-placement] { .autosuggest-input { 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 { - border-top: 1px solid lighten($ui-base-color, 8%); + border-top: 1px solid var(--background-border-color); } &__line { @@ -1794,7 +1794,6 @@ body > [data-popper-placement] { .account { padding: 16px; - border-bottom: 1px solid var(--background-border-color); .account__display-name { flex: 1 1 auto; @@ -3325,7 +3324,7 @@ $ui-header-logo-wordmark-width: 99px; .copy-paste-text { background: lighten($ui-base-color, 4%); border-radius: 8px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); padding: 16px; color: $primary-text-color; font-size: 15px; @@ -4728,7 +4727,7 @@ a.status-card { section { padding: 16px; - border-bottom: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid var(--background-border-color); &:last-child { border-bottom: 0; @@ -5316,7 +5315,7 @@ a.status-card { input { padding: 8px 12px; background: $ui-base-color; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); color: $darker-text-color; @media screen and (width <= 600px) { @@ -5402,7 +5401,7 @@ a.status-card { margin-top: -2px; width: 100%; 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; box-shadow: var(--dropdown-shadow); z-index: 99; @@ -8789,13 +8788,13 @@ noscript { } .search__input { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); padding: 10px; padding-inline-end: 30px; } .search__popout { - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); } .search .icon { @@ -9114,7 +9113,7 @@ noscript { &__input { @include search-input; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); padding: 4px 6px; color: $primary-text-color; font-size: 16px; @@ -9149,7 +9148,7 @@ noscript { margin-top: -1px; padding-top: 5px; padding-bottom: 5px; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); } &.focused &__input { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 8a472d75b1..9363e428b3 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -63,7 +63,7 @@ padding: 20px 0; margin-top: 40px; 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) { width: 100%; diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index 36a7f44253..12d0a6b92f 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -13,8 +13,9 @@ & > div, & > a { padding: 20px; - background: lighten($ui-base-color, 4%); + background: var(--background-color); border-radius: 4px; + border: 1px solid var(--background-border-color); box-sizing: border-box; height: 100%; } @@ -27,7 +28,7 @@ &:hover, &:focus, &:active { - background: lighten($ui-base-color, 8%); + background: $ui-base-color; } } } diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index b9fdaa5847..3652ad4abb 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -105,7 +105,7 @@ width: 100%; background: $ui-base-color; color: $darker-text-color; - border: 1px solid lighten($ui-base-color, 8%); + border: 1px solid var(--background-border-color); border-radius: 4px; &::-moz-focus-inner { diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 26bb2bee14..13a731f7f6 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -414,7 +414,7 @@ code { } .input.static .label_input__wrapper { - font-size: 16px; + font-size: 14px; padding: 10px; border: 1px solid $dark-text-color; border-radius: 4px; @@ -436,13 +436,14 @@ code { outline: 0; font-family: inherit; resize: vertical; - background: darken($ui-base-color, 10%); - border: 1px solid darken($ui-base-color, 10%); - border-radius: 8px; + background: $ui-base-color; + border: 1px solid var(--background-border-color); + border-radius: 4px; padding: 10px 16px; &::placeholder { - color: lighten($darker-text-color, 4%); + color: $dark-text-color; + opacity: 1; } &:invalid { @@ -453,11 +454,6 @@ code { border-color: $valid-value-color; } - &:active, - &:focus { - border-color: $highlight-text-color; - } - @media screen and (width <= 600px) { font-size: 16px; } @@ -576,21 +572,25 @@ code { select { appearance: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; color: $primary-text-color; display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; - background: darken($ui-base-color, 10%) + background: $ui-base-color url("data:image/svg+xml;utf8,") - no-repeat right 8px center / auto 16px; - border: 1px solid darken($ui-base-color, 14%); + no-repeat right 8px center / auto 14px; + border: 1px solid var(--background-border-color); border-radius: 4px; padding-inline-start: 10px; padding-inline-end: 30px; height: 41px; + + @media screen and (width <= 600px) { + font-size: 16px; + } } h4 { @@ -644,8 +644,9 @@ code { } .flash-message { - background: lighten($ui-base-color, 8%); - color: $darker-text-color; + background: var(--background-color); + color: $highlight-text-color; + border: 1px solid $highlight-text-color; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; @@ -1335,7 +1336,7 @@ code { &__toggle > div { 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; } } diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index b5c4836bcd..8d3efcb572 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -46,7 +46,7 @@ body.rtl { } .simple_form select { - background: darken($ui-base-color, 10%) + background: $ui-base-color url("data:image/svg+xml;utf8,") no-repeat left 8px center / auto 16px; } diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index dd5b483ec4..eab7937150 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -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); } } diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index 1f69f0cf01..0d56bd9c48 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -204,7 +204,7 @@ } .directory { - background: $ui-base-color; + background: var(--background-color); border-radius: 4px; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); @@ -217,7 +217,7 @@ display: flex; align-items: center; justify-content: space-between; - background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; padding: 15px; text-decoration: none; @@ -229,7 +229,7 @@ &:hover, &:active, &:focus { - background: lighten($ui-base-color, 8%); + background: $ui-base-color; } } @@ -351,7 +351,7 @@ &:focus, &:hover, &:active { - text-decoration: underline; + color: $highlight-text-color; } } } diff --git a/app/views/admin/roles/index.html.haml b/app/views/admin/roles/index.html.haml index 4f6c511b4f..90a647cc8a 100644 --- a/app/views/admin/roles/index.html.haml +++ b/app/views/admin/roles/index.html.haml @@ -8,10 +8,10 @@ %hr.spacer/ -.applications-list +.announcements-list = render partial: 'role', collection: @roles.select(&:everyone?) %hr.spacer/ -.applications-list +.announcements-list = render partial: 'role', collection: @roles.reject(&:everyone?) diff --git a/app/views/auth/registrations/_account_warning.html.haml b/app/views/auth/registrations/_account_warning.html.haml index 19e5746ff6..c51179b49d 100644 --- a/app/views/auth/registrations/_account_warning.html.haml +++ b/app/views/auth/registrations/_account_warning.html.haml @@ -1,14 +1,14 @@ -= link_to disputes_strike_path(account_warning), class: 'log-entry' do - .log-entry__header - .log-entry__avatar += link_to disputes_strike_path(account_warning), class: 'strike-entry' do + .strike-entry__header + .strike-entry__avatar .indicator-icon{ class: account_warning.overruled? ? 'success' : 'failure' } = fa_icon 'warning' - .log-entry__content - .log-entry__title + .strike-entry__content + .strike-entry__title = t 'disputes.strikes.title', action: t(account_warning.action, scope: 'disputes.strikes.title_actions'), 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) - if account_warning.overruled?