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

Refactor styles to use logical properties for positioning (#23944)

pull/59/head
Eugen Rochko 2023-03-27 10:56:25 +02:00 committed by GitHub
parent 88fc04d3d7
commit babd86e594
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 279 additions and 571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/styles/mastodon/about.scss
View File

@ -28,14 +28,14 @@ $fluid-breakpoint: $maximum-width + 20px;
position: relative; position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
padding: 1em 1.75em; padding: 1em 1.75em;
padding-left: 3em; padding-inline-start: 3em;
font-weight: 500; font-weight: 500;
counter-increment: list-counter; counter-increment: list-counter;
&::before { &::before {
content: counter(list-counter); content: counter(list-counter);
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background: $highlight-text-color; background: $highlight-text-color;

16
app/javascript/styles/mastodon/accounts.scss
View File

@ -73,8 +73,8 @@
} }
.display-name { .display-name {
margin-left: 15px; margin-inline-start: 15px;
text-align: left; text-align: start;
i[data-hidden] { i[data-hidden] {
display: none; display: none;
@ -138,22 +138,22 @@
} }
.older { .older {
float: left; float: inline-start;
padding-left: 0; padding-inline-start: 0;
.fa { .fa {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
} }
} }
.newer { .newer {
float: right; float: inline-end;
padding-right: 0; padding-inline-end: 0;
.fa { .fa {
display: inline-block; display: inline-block;
margin-left: 5px; margin-inline-start: 5px;
} }
} }

83
app/javascript/styles/mastodon/admin.scss
View File

@ -117,7 +117,7 @@ $content-width: 840px;
text-overflow: ellipsis; text-overflow: ellipsis;
i.fa { i.fa {
margin-right: 5px; margin-inline-end: 5px;
} }
&:hover { &:hover {
@ -186,7 +186,10 @@ $content-width: 840px;
} }
.content { .content {
padding: 55px 15px 20px 25px; padding-top: 55px;
padding-bottom: 20px;
padding-inline-start: 25px;
padding-inline-end: 15px;
@media screen and (max-width: $no-columns-breakpoint) { @media screen and (max-width: $no-columns-breakpoint) {
max-width: none; max-width: none;
@ -202,11 +205,12 @@ $content-width: 840px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: -15px -15px 0 0; margin-top: -15px;
margin-inline-end: -15px;
& > * { & > * {
margin-top: 15px; margin-top: 15px;
margin-right: 15px; margin-inline-end: 15px;
} }
} }
@ -385,7 +389,7 @@ $content-width: 840px;
z-index: 10; z-index: 10;
width: 100%; width: 100%;
height: calc(100% - 56px); height: calc(100% - 56px);
left: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
overflow-y: auto; overflow-y: auto;
background: $ui-base-color; background: $ui-base-color;
@ -470,10 +474,11 @@ body,
.filters { .filters {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 40px;
.filter-subset { .filter-subset {
flex: 0 0 auto; flex: 0 0 auto;
margin: 0 40px 20px 0; margin-bottom: 20px;
&:last-child { &:last-child {
margin-bottom: 30px; margin-bottom: 30px;
@ -485,7 +490,7 @@ body,
li { li {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
} }
} }
@ -572,7 +577,7 @@ body,
.activity-stream { .activity-stream {
flex: 2 0 0; flex: 2 0 0;
margin-right: 20px; margin-inline-end: 20px;
max-width: calc(100% - 60px); max-width: calc(100% - 60px);
.entry { .entry {
@ -625,12 +630,12 @@ body,
} }
.media-spoiler-toggle-buttons { .media-spoiler-toggle-buttons {
margin-left: auto; margin-inline-start: auto;
.button { .button {
overflow: visible; overflow: visible;
margin: 0 0 5px 5px; margin: 0 0 5px 5px;
float: right; float: inline-end;
} }
} }
} }
@ -651,7 +656,7 @@ body,
.special-action-button, .special-action-button,
.back-link { .back-link {
text-align: right; text-align: end;
flex: 1 1 auto; flex: 1 1 auto;
} }
@ -669,7 +674,7 @@ body,
display: block; display: block;
line-height: 20px; line-height: 20px;
padding: 15px; padding: 15px;
padding-left: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
background: $ui-base-color; background: $ui-base-color;
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid darken($ui-base-color, 8%);
position: relative; position: relative;
@ -696,7 +701,7 @@ body,
&__avatar { &__avatar {
position: absolute; position: absolute;
left: 15px; inset-inline-start: 15px;
top: 15px; top: 15px;
.avatar { .avatar {
@ -764,7 +769,7 @@ a.name-tag,
.avatar { .avatar {
display: block; display: block;
margin: 0; margin: 0;
margin-right: 5px; margin-inline-end: 5px;
border-radius: 50%; border-radius: 50%;
} }
@ -778,7 +783,7 @@ a.name-tag,
.speech-bubble { .speech-bubble {
margin-bottom: 20px; margin-bottom: 20px;
border-left: 4px solid $ui-highlight-color; border-inset-inline-start: 4px solid $ui-highlight-color;
&.positive { &.positive {
border-left-color: $success-green; border-left-color: $success-green;
@ -794,7 +799,7 @@ a.name-tag,
&__bubble { &__bubble {
padding: 16px; padding: 16px;
padding-left: 14px; padding-inline-start: 14px;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
border-radius: 4px 4px 4px 0; border-radius: 4px 4px 4px 0;
@ -808,7 +813,7 @@ a.name-tag,
&__owner { &__owner {
padding: 8px; padding: 8px;
padding-left: 12px; padding-inline-start: 12px;
} }
time { time {
@ -832,7 +837,7 @@ a.name-tag,
border: 0; border: 0;
&__avatar-wrapper { &__avatar-wrapper {
margin-left: 0; margin-inline-start: 0;
} }
} }
@ -841,7 +846,7 @@ a.name-tag,
font-weight: 500; font-weight: 500;
color: $darker-text-color; color: $darker-text-color;
text-transform: uppercase; text-transform: uppercase;
text-align: right; text-align: end;
a { a {
color: inherit; color: inherit;
@ -892,7 +897,7 @@ a.name-tag,
&__icon { &__icon {
color: $dark-text-color; color: $dark-text-color;
margin-right: 4px; margin-inline-end: 4px;
font-weight: 500; font-weight: 500;
} }
} }
@ -1090,7 +1095,7 @@ a.name-tag,
> h4 { > h4 {
position: sticky; position: sticky;
left: 0; inset-inline-start: 0;
} }
&__table { &__table {
@ -1102,7 +1107,7 @@ a.name-tag,
&__date { &__date {
white-space: nowrap; white-space: nowrap;
padding: 10px 0; padding: 10px 0;
text-align: left; text-align: start;
min-width: 120px; min-width: 120px;
&.retention__table__average { &.retention__table__average {
@ -1160,7 +1165,7 @@ a.name-tag,
&__total { &__total {
display: block; display: block;
margin-right: 10px; margin-inline-end: 10px;
font-weight: 500; font-weight: 500;
font-size: 28px; font-size: 28px;
color: $primary-text-color; color: $primary-text-color;
@ -1262,7 +1267,7 @@ a.sparkline {
} }
&__value { &__value {
text-align: right; text-align: end;
color: $darker-text-color; color: $darker-text-color;
padding: 11px 10px; padding: 11px 10px;
} }
@ -1273,7 +1278,7 @@ a.sparkline {
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: $ui-highlight-color; background: $ui-highlight-color;
margin-right: 10px; margin-inline-end: 10px;
@for $i from 0 through 10 { @for $i from 0 through 10 {
&--#{10 * $i} { &--#{10 * $i} {
@ -1309,7 +1314,7 @@ a.sparkline {
} }
&__rules { &__rules {
margin-left: 30px; margin-inline-start: 30px;
} }
} }
@ -1431,7 +1436,7 @@ a.sparkline {
height: 21px; height: 21px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 15px; inset-inline-end: 15px;
background: linear-gradient(to left, $ui-base-color, transparent); background: linear-gradient(to left, $ui-base-color, transparent);
pointer-events: none; pointer-events: none;
} }
@ -1511,7 +1516,7 @@ a.sparkline {
background: $ui-base-color; background: $ui-base-color;
position: relative; position: relative;
padding: 15px; padding: 15px;
padding-left: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid darken($ui-base-color, 8%);
&:first-child { &:first-child {
@ -1531,7 +1536,7 @@ a.sparkline {
&__avatar { &__avatar {
position: absolute; position: absolute;
left: 15px; inset-inline-start: 15px;
top: 15px; top: 15px;
border-radius: 4px; border-radius: 4px;
width: 40px; width: 40px;
@ -1547,7 +1552,7 @@ a.sparkline {
.username { .username {
color: $primary-text-color; color: $primary-text-color;
font-weight: 500; font-weight: 500;
margin-right: 5px; margin-inline-end: 5px;
a { a {
color: inherit; color: inherit;
@ -1562,7 +1567,7 @@ a.sparkline {
} }
time { time {
margin-left: 5px; margin-inline-start: 5px;
vertical-align: baseline; vertical-align: baseline;
} }
} }
@ -1597,8 +1602,8 @@ a.sparkline {
&__actions { &__actions {
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 15px; inset-inline-end: 15px;
text-align: right; text-align: end;
} }
} }
} }
@ -1621,7 +1626,7 @@ a.sparkline {
flex: 0 0 auto; flex: 0 0 auto;
width: 200px; width: 200px;
padding: 15px; padding: 15px;
padding-right: 0; padding-inline-end: 0;
.button { .button {
display: block; display: block;
@ -1657,7 +1662,7 @@ a.sparkline {
} }
.section-skip-link { .section-skip-link {
float: right; float: inline-end;
a { a {
color: $ui-highlight-color; color: $ui-highlight-color;
@ -1707,7 +1712,7 @@ a.sparkline {
&__rules { &__rules {
list-style: disc; list-style: disc;
padding-left: 15px; padding-inline-start: 15px;
margin-bottom: 20px; margin-bottom: 20px;
color: $darker-text-color; color: $darker-text-color;
@ -1796,7 +1801,7 @@ a.sparkline {
li { li {
counter-increment: step 1; counter-increment: step 1;
padding-left: 2.5rem; padding-inline-start: 2.5rem;
padding-bottom: 8px; padding-bottom: 8px;
position: relative; position: relative;
margin-bottom: 8px; margin-bottom: 8px;
@ -1806,7 +1811,7 @@ a.sparkline {
content: counter(step); content: counter(step);
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 500; font-weight: 500;
left: 0; inset-inline-start: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -1825,7 +1830,7 @@ a.sparkline {
background: $highlight-text-color; background: $highlight-text-color;
bottom: 0; bottom: 0;
top: calc(1.875rem + 1px); top: calc(1.875rem + 1px);
left: 0.6875rem; inset-inline-start: 0.6875rem;
} }
&:last-child { &:last-child {

2
app/javascript/styles/mastodon/basics.scss
View File

@ -267,7 +267,7 @@ button {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: -1000; z-index: -1000;
} }

334
app/javascript/styles/mastodon/components.scss
View File

File diff suppressed because it is too large Load Diff

6
app/javascript/styles/mastodon/containers.scss
View File

@ -18,7 +18,7 @@
.logo { .logo {
height: 42px; height: 42px;
margin-right: 10px; margin-inline-end: 10px;
} }
a { a {
@ -73,7 +73,7 @@
.avatar { .avatar {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 10px; margin-inline-end: 10px;
img { img {
width: 100%; width: 100%;
@ -101,6 +101,6 @@
display: block; display: block;
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 40px;
margin-left: 10px; margin-inline-start: 10px;
} }
} }

10
app/javascript/styles/mastodon/emoji_picker.scss
View File

@ -71,7 +71,7 @@
.emoji-mart-anchor-bar { .emoji-mart-anchor-bar {
position: absolute; position: absolute;
bottom: -5px; bottom: -5px;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 4px; height: 4px;
background-color: $highlight-text-color; background-color: $highlight-text-color;
@ -106,7 +106,7 @@
.emoji-mart-search { .emoji-mart-search {
padding: 10px; padding: 10px;
padding-right: 45px; padding-inline-end: 45px;
background: $simple-background-color; background: $simple-background-color;
position: relative; position: relative;
@ -114,7 +114,7 @@
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
padding: 7px 9px; padding: 7px 9px;
padding-right: 25px; padding-inline-end: 25px;
font-family: inherit; font-family: inherit;
display: block; display: block;
width: 100%; width: 100%;
@ -142,7 +142,7 @@
.emoji-mart-search-icon { .emoji-mart-search-icon {
position: absolute; position: absolute;
top: 18px; top: 18px;
right: 45px + 5px; inset-inline-end: 45px + 5px;
z-index: 2; z-index: 2;
padding: 2px 5px 1px; padding: 2px 5px 1px;
border: 0; border: 0;
@ -177,7 +177,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba($ui-secondary-color, 0.7); background-color: rgba($ui-secondary-color, 0.7);

34
app/javascript/styles/mastodon/forms.scss
View File

@ -54,12 +54,12 @@ code {
.radio > label { .radio > label {
position: relative; position: relative;
padding-left: 28px; padding-inline-start: 28px;
input { input {
position: absolute; position: absolute;
top: -2px; top: -2px;
left: 0; inset-inline-start: 0;
} }
} }
} }
@ -79,7 +79,7 @@ code {
.label_input, .label_input,
.hint { .hint {
padding-left: 28px; padding-inline-start: 28px;
} }
.label_input__wrapper { .label_input__wrapper {
@ -89,7 +89,7 @@ code {
label.checkbox { label.checkbox {
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 0; inset-inline-start: 0;
} }
label a { label a {
@ -159,7 +159,7 @@ code {
li { li {
list-style: disc; list-style: disc;
margin-left: 18px; margin-inline-start: 18px;
} }
} }
@ -225,7 +225,7 @@ code {
&.select .hint { &.select .hint {
margin-top: 6px; margin-top: 6px;
margin-left: 150px; margin-inline-start: 150px;
} }
} }
@ -380,13 +380,13 @@ code {
width: auto; width: auto;
position: relative; position: relative;
padding-top: 5px; padding-top: 5px;
padding-left: 25px; padding-inline-start: 25px;
flex: 1 1 auto; flex: 1 1 auto;
} }
input[type='checkbox'] { input[type='checkbox'] {
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
top: 5px; top: 5px;
margin: 0; margin: 0;
} }
@ -517,10 +517,10 @@ code {
font-weight: 500; font-weight: 500;
outline: 0; outline: 0;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 10px; margin-inline-end: 10px;
&:last-child { &:last-child {
margin-right: 0; margin-inline-end: 0;
} }
&:active, &:active,
@ -572,8 +572,8 @@ code {
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%); border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px; border-radius: 4px;
padding-left: 10px; padding-inline-start: 10px;
padding-right: 30px; padding-inline-end: 30px;
height: 41px; height: 41px;
} }
@ -588,7 +588,7 @@ code {
&__append { &__append {
position: absolute; position: absolute;
right: 3px; inset-inline-end: 3px;
top: 1px; top: 1px;
padding: 10px; padding: 10px;
padding-bottom: 9px; padding-bottom: 9px;
@ -606,7 +606,7 @@ code {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 1px; bottom: 1px;
width: 5px; width: 5px;
background-image: linear-gradient( background-image: linear-gradient(
@ -780,7 +780,7 @@ code {
li { li {
display: inline-block; display: inline-block;
margin-right: 10px; margin-inline-end: 10px;
} }
a { a {
@ -939,7 +939,7 @@ code {
.actions { .actions {
padding: 30px 0; padding: 30px 0;
padding-right: 20px; padding-inline-end: 20px;
flex: 0 0 auto; flex: 0 0 auto;
} }
} }
@ -992,7 +992,7 @@ code {
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 4px; padding-inline-end: 4px;
position: relative; position: relative;
top: 1px; top: 1px;
transition: border-color 300ms linear; transition: border-color 300ms linear;

2
app/javascript/styles/mastodon/modal.scss
View File

@ -25,7 +25,7 @@
height: 100%; height: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
} }
} }
} }

2
app/javascript/styles/mastodon/polls.scss
View File

@ -269,7 +269,7 @@
border: 1px solid darken($simple-background-color, 14%); border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
padding-right: 30px; padding-inline-end: 30px;
} }
.icon-button.disabled { .icon-button.disabled {

6
app/javascript/styles/mastodon/rich_text.scss
View File

@ -13,8 +13,8 @@
} }
blockquote { blockquote {
padding-left: 10px; padding-inline-start: 10px;
border-left: 3px solid $darker-text-color; border-inset-inline-start: 3px solid $darker-text-color;
color: $darker-text-color; color: $darker-text-color;
white-space: normal; white-space: normal;
@ -40,7 +40,7 @@
ul, ul,
ol { ol {
margin-left: 2em; margin-inline-start: 2em;
p { p {
margin: 0; margin: 0;

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

@ -1,273 +1,30 @@
body.rtl { body.rtl {
direction: rtl; direction: rtl;
.column-header > button {
text-align: right;
padding-left: 0;
padding-right: 15px;
}
.radio-button__input {
margin-right: 0;
margin-left: 10px;
}
.display-name,
.announcements__item {
text-align: right;
}
.announcements__item__range {
padding-right: 0;
padding-left: 18px;
}
.reactions-bar { .reactions-bar {
margin-left: auto;
margin-right: -2px;
direction: rtl; 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, .announcements__mastodon,
.drawer__inner__mastodon > img { .drawer__inner__mastodon > img {
transform: scaleX(-1); transform: scaleX(-1);
} }
.notification__favourite-icon-wrapper { .compose-form .autosuggest-textarea__textarea {
left: auto;
right: -26px;
}
.column-link__icon,
.column-header__icon {
margin-right: 0;
margin-left: 5px;
}
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
margin-right: 0;
margin-left: 4px;
}
.navigation-bar__profile {
margin-left: 0;
margin-right: 8px;
}
.search__input {
padding-right: 10px; padding-right: 10px;
padding-left: 30px; padding-left: 10px + 22px;
}
.search__icon .fa {
right: auto;
left: 10px;
} }
.columns-area { .columns-area {
direction: rtl; direction: rtl;
} }
.column-header__buttons {
left: 0;
right: auto;
margin-left: 0;
margin-right: -15px;
}
.column-inline-form .icon-button {
margin-left: 0;
margin-right: 5px;
}
.column-header__links .text-btn {
margin-left: 10px;
margin-right: 0;
}
.account__avatar-wrapper {
float: right;
}
.column-header__back-button {
padding-left: 5px;
padding-right: 0;
}
.column-header__setting-arrows {
float: left;
.column-header__setting-btn {
&:first-child {
padding-left: 7px;
padding-right: 5px;
}
&:last-child {
padding-right: 7px;
padding-left: 5px;
margin-right: 5px;
margin-left: 0;
}
}
}
.setting-toggle__label {
margin-left: 0;
margin-right: 8px;
}
.account__header__tabs__buttons > .icon-button {
margin-right: 0;
margin-left: 8px;
}
.account__avatar-overlay-overlay {
right: auto;
left: 0;
}
.column-back-button--slim-button {
right: auto;
left: 0;
}
.status__action-bar {
&__counter {
margin-right: 0;
margin-left: 11px;
.status__action-bar-button {
margin-right: 0;
margin-left: 4px;
}
}
}
.privacy-dropdown__dropdown {
margin-left: 0;
margin-right: 40px;
}
.privacy-dropdown__option__icon {
margin-left: 10px;
margin-right: 0;
}
.picture-in-picture__header__account .display-name,
.detailed-status__display-name .display-name {
text-align: right;
}
.detailed-status__display-avatar {
margin-right: 0;
margin-left: 10px;
}
.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;
margin-right: 6px;
}
.fa-ul {
margin-left: 2.14285714em;
}
.fa-li {
left: auto;
right: -2.14285714em;
}
.admin-wrapper { .admin-wrapper {
direction: rtl; direction: rtl;
} }
.admin-wrapper .sidebar ul a i.fa,
a.table-action-link i.fa {
margin-right: 0;
margin-left: 5px;
}
.simple_form .check_boxes .checkbox label {
padding-left: 0;
padding-right: 25px;
}
.simple_form .input.with_label.boolean label.checkbox {
padding-left: 25px;
padding-right: 0;
}
.simple_form .check_boxes .checkbox input[type='checkbox'],
.simple_form .input.boolean input[type='checkbox'] {
left: auto;
right: 0;
}
.simple_form .input.radio_buttons .radio {
left: auto;
right: 0;
}
.simple_form .input.radio_buttons .radio > label {
padding-right: 28px;
padding-left: 0;
}
.simple_form .input-with-append .input input {
padding-left: 142px;
padding-right: 0;
}
.simple_form .input.boolean label.checkbox {
left: auto;
right: 0;
}
.simple_form .input.boolean .label_input,
.simple_form .input.boolean .hint {
padding-left: 0;
padding-right: 28px;
}
.simple_form .label_input__append { .simple_form .label_input__append {
right: auto;
left: 3px;
&::after { &::after {
right: auto;
left: 0;
background-image: linear-gradient( background-image: linear-gradient(
to left, to left,
rgba(darken($ui-base-color, 10%), 0), rgba(darken($ui-base-color, 10%), 0),
@ -282,49 +39,6 @@ body.rtl {
no-repeat left 8px center / auto 16px; no-repeat left 8px center / auto 16px;
} }
.table th,
.table td {
text-align: right;
}
.filters .filter-subset {
margin-right: 0;
margin-left: 45px;
}
@media screen and (min-width: 631px) {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
&:first-child {
padding-left: 5px;
padding-right: 10px;
}
}
.columns-area > div {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
}
}
}
.columns-area--mobile .column,
.columns-area--mobile .drawer {
padding-left: 0;
padding-right: 0;
}
.card__bar .display-name {
margin-left: 0;
margin-right: 15px;
text-align: right;
}
.fa-chevron-left::before { .fa-chevron-left::before {
content: '\F054'; content: '\F054';
} }
@ -332,19 +46,4 @@ body.rtl {
.fa-chevron-right::before { .fa-chevron-right::before {
content: '\F053'; content: '\F053';
} }
.column-back-button__icon {
margin-right: 0;
margin-left: 5px;
}
.simple_form .input.radio_buttons .radio > label input {
left: auto;
right: 0;
}
.picture-in-picture {
right: auto;
left: 20px;
}
} }

8
app/javascript/styles/mastodon/statuses.scss
View File

@ -97,7 +97,7 @@
width: 20px; width: 20px;
height: auto; height: auto;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-inline-end: 5px;
fill: $primary-text-color; fill: $primary-text-color;
} }
@ -162,7 +162,7 @@ a.button.logo-button {
min-height: 48px + 2px; min-height: 48px + 2px;
&__avatar { &__avatar {
left: 15px; inset-inline-start: 15px;
top: 17px; top: 17px;
.account__avatar { .account__avatar {
@ -176,12 +176,12 @@ a.button.logo-button {
} }
&__prepend { &__prepend {
margin-left: 48px + 15px * 2; margin-inline-start: 48px + 15px * 2;
padding-top: 15px; padding-top: 15px;
} }
&__prepend-icon-wrapper { &__prepend-icon-wrapper {
left: -32px; inset-inline-start: -32px;
} }
.media-gallery, .media-gallery,

22
app/javascript/styles/mastodon/tables.scss
View File

@ -10,7 +10,7 @@
line-height: 18px; line-height: 18px;
vertical-align: top; vertical-align: top;
border-top: 1px solid $ui-base-color; border-top: 1px solid $ui-base-color;
text-align: left; text-align: start;
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
} }
@ -91,12 +91,12 @@
&:first-child { &:first-child {
border-radius: 4px 0 0; border-radius: 4px 0 0;
border-left: 1px solid darken($ui-base-color, 8%); border-inset-inline-start: 1px solid darken($ui-base-color, 8%);
} }
&:last-child { &:last-child {
border-radius: 0 4px 0 0; border-radius: 0 4px 0 0;
border-right: 1px solid darken($ui-base-color, 8%); border-inset-inline-end: 1px solid darken($ui-base-color, 8%);
} }
} }
} }
@ -125,7 +125,7 @@ button.table-action-link,
a.table-action-link { a.table-action-link {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
padding: 0 10px; padding: 0 10px;
color: $darker-text-color; color: $darker-text-color;
font-weight: 500; font-weight: 500;
@ -136,11 +136,11 @@ a.table-action-link {
i.fa { i.fa {
font-weight: 400; font-weight: 400;
margin-right: 5px; margin-inline-end: 5px;
} }
&:first-child { &:first-child {
padding-left: 0; padding-inline-start: 0;
} }
} }
@ -172,7 +172,7 @@ a.table-action-link {
&__actions, &__actions,
&__content { &__content {
padding: 8px 0; padding: 8px 0;
padding-right: 16px; padding-inline-end: 16px;
flex: 1 1 auto; flex: 1 1 auto;
} }
} }
@ -188,8 +188,8 @@ a.table-action-link {
align-items: center; align-items: center;
&__actions { &__actions {
text-align: right; text-align: end;
padding-right: 16px - 5px; padding-inline-end: 16px - 5px;
} }
} }
@ -296,7 +296,7 @@ a.table-action-link {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 10px; margin-inline-end: 10px;
.emojione { .emojione {
width: 32px; width: 32px;
@ -315,7 +315,7 @@ a.table-action-link {
&__extra { &__extra {
flex: 0 0 auto; flex: 0 0 auto;
text-align: right; text-align: end;
color: $darker-text-color; color: $darker-text-color;
font-weight: 500; font-weight: 500;
} }

16
app/javascript/styles/mastodon/widgets.scss
View File

@ -39,8 +39,8 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: -3px 0 0; margin: -3px 0 0;
margin-left: 0.075em; margin-inline-start: 0.075em;
margin-right: 0.075em; margin-inline-end: 0.075em;
} }
p { p {
@ -171,7 +171,7 @@
margin-bottom: 15px; margin-bottom: 15px;
.fa { .fa {
margin-right: 5px; margin-inline-end: 5px;
color: $darker-text-color; color: $darker-text-color;
} }
} }
@ -284,7 +284,7 @@
} }
.trends__item__current { .trends__item__current {
padding-right: 0; padding-inline-end: 0;
} }
} }
} }
@ -309,7 +309,7 @@
padding: 10px; padding: 10px;
&:first-child { &:first-child {
text-align: left; text-align: start;
} }
} }
@ -340,9 +340,9 @@
tbody td.accounts-table__extra { tbody td.accounts-table__extra {
width: 120px; width: 120px;
text-align: right; text-align: end;
color: $darker-text-color; color: $darker-text-color;
padding-right: 16px; padding-inline-end: 16px;
a { a {
text-decoration: none; text-decoration: none;
@ -363,7 +363,7 @@
tbody td.accounts-table__interrelationships { tbody td.accounts-table__interrelationships {
width: 21px; width: 21px;
padding-right: 16px; padding-inline-end: 16px;
} }
.fa { .fa {