From 941ff04b03a8a3e3f03e95c108f0cfa621226fb1 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 18 Dec 2020 08:47:36 +0100 Subject: [PATCH] Fix styles for RTL languages and the light theme (#15356) --- .../styles/mastodon-light/diff.scss | 42 ++++++++++++++++- app/javascript/styles/mastodon/rtl.scss | 46 ++++++++++++++++++- 2 files changed, 86 insertions(+), 2 deletions(-) diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 64f4adb84..d4290d7e6 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -355,11 +355,45 @@ html { .error-modal, .onboarding-modal, .report-modal__comment .setting-text__wrapper, -.report-modal__comment .setting-text { +.report-modal__comment .setting-text, +.announcements, +.picture-in-picture__header, +.picture-in-picture__footer, +.reactions-bar__item { background: $white; border: 1px solid lighten($ui-base-color, 8%); } +.reactions-bar__item { + &:hover, + &:focus, + &:active { + background-color: $ui-base-color; + } +} + +.reactions-bar__item.active { + background-color: mix($white, $ui-highlight-color, 80%); + border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%); +} + +.media-modal__overlay .picture-in-picture__footer { + border: 0; +} + +.picture-in-picture__header { + border-bottom: 0; +} + +.announcements, +.picture-in-picture__footer { + border-top: 0; +} + +.icon-with-badge__badge { + border-color: $white; +} + .report-modal__comment { border-right-color: lighten($ui-base-color, 8%); } @@ -512,6 +546,12 @@ html { } } +.picture-in-picture-placeholder { + background: $white; + border-color: lighten($ui-base-color, 8%); + color: lighten($ui-base-color, 8%); +} + .brand__tagline { color: $ui-secondary-color; } diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index fbf26e30b..8051e4edb 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -17,15 +17,38 @@ body.rtl { margin-right: 15px; } - .display-name { + .display-name, + .announcements__item { text-align: right; } + .announcements__item__range { + padding-right: 0; + padding-left: 18px; + } + + .reactions-bar { + margin-left: auto; + margin-right: -2px; + direction: rtl; + } + + .reactions-bar__item__count { + margin-left: 0; + margin-right: 6px; + } + + .announcements__pagination { + right: auto; + left: 0; + } + .notification__message { margin-left: 0; margin-right: 68px; } + .announcements__mastodon, .drawer__inner__mastodon > img { transform: scaleX(-1); } @@ -195,6 +218,7 @@ body.rtl { margin-right: 0; } + .picture-in-picture__header__account .display-name, .detailed-status__display-name .display-name { text-align: right; } @@ -205,6 +229,21 @@ body.rtl { float: right; } + .picture-in-picture__header__account .account__avatar { + margin-right: 0; + margin-left: 10px; + } + + .icon-button__counter { + margin-left: 0; + margin-right: 4px; + } + + .notifications-permission-banner__close { + right: auto; + left: 10px; + } + .detailed-status__favorites, .detailed-status__reblogs { margin-left: 0; @@ -416,4 +455,9 @@ body.rtl { left: auto; right: 0; } + + .picture-in-picture { + right: auto; + left: 20px; + } }