From 0679fcd2f181228214a5b90c818140a2778e7256 Mon Sep 17 00:00:00 2001 From: Claire Date: Tue, 4 Apr 2023 16:48:34 +0200 Subject: [PATCH] Fix styling regressions from RTL layout refactor (#24415) --- app/javascript/styles/mastodon/accounts.scss | 4 ++-- app/javascript/styles/mastodon/admin.scss | 6 ++--- .../styles/mastodon/components.scss | 24 +++++++++---------- app/javascript/styles/mastodon/rich_text.scss | 2 +- app/javascript/styles/mastodon/rtl.scss | 12 ++++++++++ app/javascript/styles/mastodon/tables.scss | 4 ++-- 6 files changed, 32 insertions(+), 20 deletions(-) diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index af0d8b5ed9..90775ee427 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -138,7 +138,7 @@ } .older { - float: inline-start; + float: left; padding-inline-start: 0; .fa { @@ -148,7 +148,7 @@ } .newer { - float: inline-end; + float: right; padding-inline-end: 0; .fa { diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index accddc0043..c92191ea21 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -635,7 +635,7 @@ body, .button { overflow: visible; margin: 0 0 5px 5px; - float: inline-end; + float: right; } } } @@ -783,7 +783,7 @@ a.name-tag, .speech-bubble { margin-bottom: 20px; - border-inset-inline-start: 4px solid $ui-highlight-color; + border-inline-start: 4px solid $ui-highlight-color; &.positive { border-left-color: $success-green; @@ -1662,7 +1662,7 @@ a.sparkline { } .section-skip-link { - float: inline-end; + float: right; a { color: $ui-highlight-color; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 160211dd1d..a4d7a61924 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -826,7 +826,7 @@ body > [data-popper-placement] { } .reply-indicator__cancel { - float: inline-end; + float: right; line-height: 24px; } @@ -841,7 +841,7 @@ body > [data-popper-placement] { } .reply-indicator__display-avatar { - float: inline-start; + float: left; margin-inline-end: 5px; } @@ -1159,7 +1159,7 @@ body > [data-popper-placement] { .notification__relative_time { color: $dark-text-color; - float: inline-end; + float: right; font-size: 14px; padding-bottom: 1px; } @@ -1507,7 +1507,7 @@ body > [data-popper-placement] { position: relative; & > div { - float: inline-start; + float: left; position: relative; box-sizing: border-box; } @@ -1622,7 +1622,7 @@ a .account__avatar { text-decoration: none; overflow: hidden; flex: 0 1 100%; - border-inset-inline-end: 1px solid lighten($ui-base-color, 8%); + border-inline-end: 1px solid lighten($ui-base-color, 8%); padding: 10px 0; border-bottom: 4px solid transparent; @@ -1662,7 +1662,7 @@ a .account__avatar { } .account-authorize__avatar { - float: inline-start; + float: left; margin-inline-end: 10px; } @@ -2642,7 +2642,7 @@ $ui-header-height: 55px; .navigation-panel { margin: 0; background: $ui-base-color; - border-inset-inline-start: 1px solid lighten($ui-base-color, 8%); + border-inline-start: 1px solid lighten($ui-base-color, 8%); height: 100vh; } @@ -3879,7 +3879,7 @@ a.status-card.compact:hover { } .column-header__setting-arrows { - float: inline-end; + float: right; .column-header__setting-btn { padding: 5px; @@ -5753,7 +5753,7 @@ a.status-card.compact:hover { .report-modal__comment { padding: 20px; - border-inset-inline-end: 1px solid $ui-secondary-color; + border-inline-end: 1px solid $ui-secondary-color; max-width: 320px; p { @@ -6044,7 +6044,7 @@ a.status-card.compact:hover { color: $dark-text-color; padding: 8px 18px; cursor: default; - border-inset-inline-end: 1px solid lighten($ui-base-color, 8%); + border-inline-end: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: column; align-items: center; @@ -6109,7 +6109,7 @@ a.status-card.compact:hover { border: 0; box-sizing: border-box; display: block; - float: inline-start; + float: left; position: relative; border-radius: 4px; overflow: hidden; @@ -7930,7 +7930,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - border-inset-inline-start: 4px solid $highlight-text-color; + border-inline-start: 4px solid $highlight-text-color; pointer-events: none; } } diff --git a/app/javascript/styles/mastodon/rich_text.scss b/app/javascript/styles/mastodon/rich_text.scss index aa41e4ad32..c77c23bc40 100644 --- a/app/javascript/styles/mastodon/rich_text.scss +++ b/app/javascript/styles/mastodon/rich_text.scss @@ -14,7 +14,7 @@ blockquote { padding-inline-start: 10px; - border-inset-inline-start: 3px solid $darker-text-color; + border-inline-start: 3px solid $darker-text-color; color: $darker-text-color; white-space: normal; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index 726135c58f..8d3d32665c 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -19,10 +19,22 @@ body.rtl { direction: rtl; } + .account__avatar-wrapper { + float: right; + } + + .column-header__setting-arrows { + float: left; + } + .admin-wrapper { direction: rtl; } + .react-swipeable-view-container > * { + direction: rtl; + } + .simple_form .label_input__append { &::after { background-image: linear-gradient( diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index fb1ff0781d..49e5bbf9fc 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -91,12 +91,12 @@ &:first-child { border-radius: 4px 0 0; - border-inset-inline-start: 1px solid darken($ui-base-color, 8%); + border-inline-start: 1px solid darken($ui-base-color, 8%); } &:last-child { border-radius: 0 4px 0 0; - border-inset-inline-end: 1px solid darken($ui-base-color, 8%); + border-inline-end: 1px solid darken($ui-base-color, 8%); } } }