Fix styles for RTL languages and the light theme (#15356)
This commit is contained in:
parent
8a95867693
commit
941ff04b03
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user