treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Fix styles for RTL languages and the light theme (#15356)

lolsob-rspec
Eugen Rochko 2020-12-18 08:47:36 +01:00 committed by GitHub
parent 816df80b86
commit 832b70df82
2 changed files with 86 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/javascript/styles/mastodon-light/diff.scss
View File

@ -355,11 +355,45 @@ html {
.error-modal, .error-modal,
.onboarding-modal, .onboarding-modal,
.report-modal__comment .setting-text__wrapper, .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; background: $white;
border: 1px solid lighten($ui-base-color, 8%); 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 { .report-modal__comment {
border-right-color: lighten($ui-base-color, 8%); 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 { .brand__tagline {
color: $ui-secondary-color; color: $ui-secondary-color;
} }

46
app/javascript/styles/mastodon/rtl.scss
View File

@ -17,15 +17,38 @@ body.rtl {
margin-right: 15px; margin-right: 15px;
} }
.display-name { .display-name,
.announcements__item {
text-align: right; 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 { .notification__message {
margin-left: 0; margin-left: 0;
margin-right: 68px; margin-right: 68px;
} }
.announcements__mastodon,
.drawer__inner__mastodon > img { .drawer__inner__mastodon > img {
transform: scaleX(-1); transform: scaleX(-1);
} }
@ -195,6 +218,7 @@ body.rtl {
margin-right: 0; margin-right: 0;
} }
.picture-in-picture__header__account .display-name,
.detailed-status__display-name .display-name { .detailed-status__display-name .display-name {
text-align: right; text-align: right;
} }
@ -205,6 +229,21 @@ body.rtl {
float: right; 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__favorites,
.detailed-status__reblogs { .detailed-status__reblogs {
margin-left: 0; margin-left: 0;
@ -416,4 +455,9 @@ body.rtl {
left: auto; left: auto;
right: 0; right: 0;
} }
.picture-in-picture {
right: auto;
left: 20px;
}
} }