From babd86e594bbdd6dcc512d522ccbb4b24c1355e3 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 27 Mar 2023 10:56:25 +0200 Subject: [PATCH] Refactor styles to use logical properties for positioning (#23944) --- app/javascript/styles/mastodon/about.scss | 4 +- app/javascript/styles/mastodon/accounts.scss | 16 +- app/javascript/styles/mastodon/admin.scss | 83 +++-- app/javascript/styles/mastodon/basics.scss | 2 +- .../styles/mastodon/components.scss | 334 +++++++++--------- .../styles/mastodon/containers.scss | 6 +- .../styles/mastodon/emoji_picker.scss | 10 +- app/javascript/styles/mastodon/forms.scss | 34 +- app/javascript/styles/mastodon/modal.scss | 2 +- app/javascript/styles/mastodon/polls.scss | 2 +- app/javascript/styles/mastodon/rich_text.scss | 6 +- app/javascript/styles/mastodon/rtl.scss | 305 +--------------- app/javascript/styles/mastodon/statuses.scss | 8 +- app/javascript/styles/mastodon/tables.scss | 22 +- app/javascript/styles/mastodon/widgets.scss | 16 +- 15 files changed, 279 insertions(+), 571 deletions(-) diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 0183c43d5..0f02563b4 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -28,14 +28,14 @@ $fluid-breakpoint: $maximum-width + 20px; position: relative; border-bottom: 1px solid lighten($ui-base-color, 8%); padding: 1em 1.75em; - padding-left: 3em; + padding-inline-start: 3em; font-weight: 500; counter-increment: list-counter; &::before { content: counter(list-counter); position: absolute; - left: 0; + inset-inline-start: 0; top: 50%; transform: translateY(-50%); background: $highlight-text-color; diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index c007eb4b5..af0d8b5ed 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -73,8 +73,8 @@ } .display-name { - margin-left: 15px; - text-align: left; + margin-inline-start: 15px; + text-align: start; i[data-hidden] { display: none; @@ -138,22 +138,22 @@ } .older { - float: left; - padding-left: 0; + float: inline-start; + padding-inline-start: 0; .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } .newer { - float: right; - padding-right: 0; + float: inline-end; + padding-inline-end: 0; .fa { display: inline-block; - margin-left: 5px; + margin-inline-start: 5px; } } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index d54d6634d..accddc004 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -117,7 +117,7 @@ $content-width: 840px; text-overflow: ellipsis; i.fa { - margin-right: 5px; + margin-inline-end: 5px; } &:hover { @@ -186,7 +186,10 @@ $content-width: 840px; } .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) { max-width: none; @@ -202,11 +205,12 @@ $content-width: 840px; flex-wrap: wrap; align-items: center; justify-content: space-between; - margin: -15px -15px 0 0; + margin-top: -15px; + margin-inline-end: -15px; & > * { margin-top: 15px; - margin-right: 15px; + margin-inline-end: 15px; } } @@ -385,7 +389,7 @@ $content-width: 840px; z-index: 10; width: 100%; height: calc(100% - 56px); - left: 0; + inset-inline-start: 0; bottom: 0; overflow-y: auto; background: $ui-base-color; @@ -470,10 +474,11 @@ body, .filters { display: flex; flex-wrap: wrap; + gap: 40px; .filter-subset { flex: 0 0 auto; - margin: 0 40px 20px 0; + margin-bottom: 20px; &:last-child { margin-bottom: 30px; @@ -485,7 +490,7 @@ body, li { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -572,7 +577,7 @@ body, .activity-stream { flex: 2 0 0; - margin-right: 20px; + margin-inline-end: 20px; max-width: calc(100% - 60px); .entry { @@ -625,12 +630,12 @@ body, } .media-spoiler-toggle-buttons { - margin-left: auto; + margin-inline-start: auto; .button { overflow: visible; margin: 0 0 5px 5px; - float: right; + float: inline-end; } } } @@ -651,7 +656,7 @@ body, .special-action-button, .back-link { - text-align: right; + text-align: end; flex: 1 1 auto; } @@ -669,7 +674,7 @@ body, display: block; line-height: 20px; padding: 15px; - padding-left: 15px * 2 + 40px; + padding-inline-start: 15px * 2 + 40px; background: $ui-base-color; border-bottom: 1px solid darken($ui-base-color, 8%); position: relative; @@ -696,7 +701,7 @@ body, &__avatar { position: absolute; - left: 15px; + inset-inline-start: 15px; top: 15px; .avatar { @@ -764,7 +769,7 @@ a.name-tag, .avatar { display: block; margin: 0; - margin-right: 5px; + margin-inline-end: 5px; border-radius: 50%; } @@ -778,7 +783,7 @@ a.name-tag, .speech-bubble { margin-bottom: 20px; - border-left: 4px solid $ui-highlight-color; + border-inset-inline-start: 4px solid $ui-highlight-color; &.positive { border-left-color: $success-green; @@ -794,7 +799,7 @@ a.name-tag, &__bubble { padding: 16px; - padding-left: 14px; + padding-inline-start: 14px; font-size: 15px; line-height: 20px; border-radius: 4px 4px 4px 0; @@ -808,7 +813,7 @@ a.name-tag, &__owner { padding: 8px; - padding-left: 12px; + padding-inline-start: 12px; } time { @@ -832,7 +837,7 @@ a.name-tag, border: 0; &__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } } @@ -841,7 +846,7 @@ a.name-tag, font-weight: 500; color: $darker-text-color; text-transform: uppercase; - text-align: right; + text-align: end; a { color: inherit; @@ -892,7 +897,7 @@ a.name-tag, &__icon { color: $dark-text-color; - margin-right: 4px; + margin-inline-end: 4px; font-weight: 500; } } @@ -1090,7 +1095,7 @@ a.name-tag, > h4 { position: sticky; - left: 0; + inset-inline-start: 0; } &__table { @@ -1102,7 +1107,7 @@ a.name-tag, &__date { white-space: nowrap; padding: 10px 0; - text-align: left; + text-align: start; min-width: 120px; &.retention__table__average { @@ -1160,7 +1165,7 @@ a.name-tag, &__total { display: block; - margin-right: 10px; + margin-inline-end: 10px; font-weight: 500; font-size: 28px; color: $primary-text-color; @@ -1262,7 +1267,7 @@ a.sparkline { } &__value { - text-align: right; + text-align: end; color: $darker-text-color; padding: 11px 10px; } @@ -1273,7 +1278,7 @@ a.sparkline { height: 8px; border-radius: 50%; background: $ui-highlight-color; - margin-right: 10px; + margin-inline-end: 10px; @for $i from 0 through 10 { &--#{10 * $i} { @@ -1309,7 +1314,7 @@ a.sparkline { } &__rules { - margin-left: 30px; + margin-inline-start: 30px; } } @@ -1431,7 +1436,7 @@ a.sparkline { height: 21px; position: absolute; bottom: 0; - right: 15px; + inset-inline-end: 15px; background: linear-gradient(to left, $ui-base-color, transparent); pointer-events: none; } @@ -1511,7 +1516,7 @@ a.sparkline { background: $ui-base-color; position: relative; padding: 15px; - padding-left: 15px * 2 + 40px; + padding-inline-start: 15px * 2 + 40px; border-bottom: 1px solid darken($ui-base-color, 8%); &:first-child { @@ -1531,7 +1536,7 @@ a.sparkline { &__avatar { position: absolute; - left: 15px; + inset-inline-start: 15px; top: 15px; border-radius: 4px; width: 40px; @@ -1547,7 +1552,7 @@ a.sparkline { .username { color: $primary-text-color; font-weight: 500; - margin-right: 5px; + margin-inline-end: 5px; a { color: inherit; @@ -1562,7 +1567,7 @@ a.sparkline { } time { - margin-left: 5px; + margin-inline-start: 5px; vertical-align: baseline; } } @@ -1597,8 +1602,8 @@ a.sparkline { &__actions { position: absolute; top: 15px; - right: 15px; - text-align: right; + inset-inline-end: 15px; + text-align: end; } } } @@ -1621,7 +1626,7 @@ a.sparkline { flex: 0 0 auto; width: 200px; padding: 15px; - padding-right: 0; + padding-inline-end: 0; .button { display: block; @@ -1657,7 +1662,7 @@ a.sparkline { } .section-skip-link { - float: right; + float: inline-end; a { color: $ui-highlight-color; @@ -1707,7 +1712,7 @@ a.sparkline { &__rules { list-style: disc; - padding-left: 15px; + padding-inline-start: 15px; margin-bottom: 20px; color: $darker-text-color; @@ -1796,7 +1801,7 @@ a.sparkline { li { counter-increment: step 1; - padding-left: 2.5rem; + padding-inline-start: 2.5rem; padding-bottom: 8px; position: relative; margin-bottom: 8px; @@ -1806,7 +1811,7 @@ a.sparkline { content: counter(step); font-size: 0.625rem; font-weight: 500; - left: 0; + inset-inline-start: 0; display: flex; justify-content: center; align-items: center; @@ -1825,7 +1830,7 @@ a.sparkline { background: $highlight-text-color; bottom: 0; top: calc(1.875rem + 1px); - left: 0.6875rem; + inset-inline-start: 0.6875rem; } &:last-child { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 1d08b12e5..a344c7fa4 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -267,7 +267,7 @@ button { overflow: hidden; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: -1000; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 0893ea7d9..b9303f2ef 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -309,7 +309,7 @@ &__counter { display: inline-block; width: auto; - margin-left: 4px; + margin-inline-start: 4px; font-size: 12px; font-weight: 500; } @@ -413,7 +413,7 @@ body > [data-popper-placement] { width: 18px; height: 18px; flex: 0 0 auto; - margin-right: 10px; + margin-inline-end: 10px; top: -1px; border-radius: 4px; vertical-align: middle; @@ -465,7 +465,7 @@ body > [data-popper-placement] { .emoji-picker-dropdown { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; } .compose-form__autosuggest-wrapper { @@ -527,7 +527,7 @@ body > [data-popper-placement] { min-height: 100px; border-radius: 4px 4px 0 0; padding-bottom: 0; - padding-right: 10px + 22px; + padding-right: 10px + 22px; // Cannot use inline-end because of dir=auto resize: none; scrollbar-color: initial; @@ -536,7 +536,7 @@ body > [data-popper-placement] { } @media screen and (max-width: 600px) { - height: 100px !important; // prevent auto-resize textarea + height: 100px !important; // Prevent auto-resize textarea resize: vertical; } } @@ -605,7 +605,7 @@ body > [data-popper-placement] { &__uses { flex: 0 0 auto; - text-align: right; + text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -615,7 +615,7 @@ body > [data-popper-placement] { .autosuggest-account-icon, .autosuggest-emoji img { display: block; - margin-right: 8px; + margin-inline-end: 8px; width: 16px; height: 16px; } @@ -677,8 +677,8 @@ body > [data-popper-placement] { position: absolute; z-index: 2; bottom: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; box-sizing: border-box; background: linear-gradient( 0deg, @@ -737,7 +737,7 @@ body > [data-popper-placement] { .character-counter__wrapper { align-self: center; - margin-right: 4px; + margin-inline-end: 4px; } } @@ -826,7 +826,7 @@ body > [data-popper-placement] { } .reply-indicator__cancel { - float: right; + float: inline-end; line-height: 24px; } @@ -836,13 +836,13 @@ body > [data-popper-placement] { max-width: 100%; line-height: 24px; overflow: hidden; - padding-right: 25px; + padding-inline-end: 25px; text-decoration: none; } .reply-indicator__display-avatar { - float: left; - margin-right: 5px; + float: inline-start; + margin-inline-end: 5px; } .status__content--with-action { @@ -1159,7 +1159,7 @@ body > [data-popper-placement] { .notification__relative_time { color: $dark-text-color; - float: right; + float: inline-end; font-size: 14px; padding-bottom: 1px; } @@ -1344,7 +1344,7 @@ body > [data-popper-placement] { font-weight: 500; font-size: 12px; line-height: 17px; - margin-left: 6px; + margin-inline-start: 6px; } .reply-indicator__content { @@ -1389,7 +1389,7 @@ body > [data-popper-placement] { border-bottom: 0; .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } } @@ -1452,7 +1452,7 @@ body > [data-popper-placement] { &-inline { display: inline-block; vertical-align: middle; - margin-right: 5px; + margin-inline-end: 5px; } &-composite { @@ -1461,7 +1461,7 @@ body > [data-popper-placement] { position: relative; & > div { - float: left; + float: inline-start; position: relative; box-sizing: border-box; } @@ -1475,7 +1475,7 @@ body > [data-popper-placement] { display: block; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); color: $primary-text-color; text-shadow: 1px 1px 2px $base-shadow-color; @@ -1495,7 +1495,7 @@ a .account__avatar { &-overlay { position: absolute; bottom: 0; - right: 0; + inset-inline-end: 0; z-index: 1; } } @@ -1552,15 +1552,15 @@ a .account__avatar { .dropdown--active { .dropdown__content.dropdown__right { - left: 6px; - right: initial; + inset-inline-start: 6px; + inset-inline-end: initial; } &::after { bottom: initial; - margin-left: 11px; + margin-inline-start: 11px; margin-top: -7px; - right: initial; + inset-inline-end: initial; } } } @@ -1576,7 +1576,7 @@ a .account__avatar { text-decoration: none; overflow: hidden; flex: 0 1 100%; - border-right: 1px solid lighten($ui-base-color, 8%); + border-inset-inline-end: 1px solid lighten($ui-base-color, 8%); padding: 10px 0; border-bottom: 4px solid transparent; @@ -1616,8 +1616,8 @@ a .account__avatar { } .account-authorize__avatar { - float: left; - margin-right: 10px; + float: inline-start; + margin-inline-end: 10px; } .status__display-name, @@ -2089,7 +2089,7 @@ a.account__display-name { } &.right { - left: -9px; + inset-inline-start: -9px; &::before { transform: rotate(-90deg); @@ -2101,7 +2101,7 @@ a.account__display-name { } &.left { - right: -9px; + inset-inline-end: -9px; &::before { transform: rotate(90deg); @@ -2171,7 +2171,7 @@ a.account__display-name { vertical-align: top; .account__avatar { - margin-right: 5px; + margin-inline-end: 5px; border-radius: 50%; } @@ -2184,8 +2184,8 @@ a.account__display-name { display: block; line-height: 18px; max-width: 311px; - right: 0; - text-align: left; + inset-inline-end: 0; + text-align: start; z-index: 9999; & > ul { @@ -2199,12 +2199,12 @@ a.account__display-name { } &.dropdown__right { - right: 0; + inset-inline-end: 0; } &.dropdown__left { & > ul { - left: -98px; + inset-inline-start: -98px; } } @@ -2423,23 +2423,23 @@ $ui-header-height: 55px; .drawer { flex: 0 0 auto; padding: 10px; - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; &:first-child { - padding-left: 10px; + padding-inline-start: 10px; } &:last-child { - padding-right: 10px; + padding-inline-end: 10px; } } .columns-area > div { .column, .drawer { - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; } } } @@ -2486,7 +2486,7 @@ $ui-header-height: 55px; } span { - margin-left: 5px; + margin-inline-start: 5px; display: none; } } @@ -2528,7 +2528,7 @@ $ui-header-height: 55px; line-height: 18px; font-size: 16px; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; } .search__icon .fa { @@ -2596,7 +2596,7 @@ $ui-header-height: 55px; .navigation-panel { margin: 0; background: $ui-base-color; - border-left: 1px solid lighten($ui-base-color, 8%); + border-inset-inline-start: 1px solid lighten($ui-base-color, 8%); height: 100vh; } @@ -2668,7 +2668,7 @@ $ui-header-height: 55px; &__badge { position: absolute; - left: 9px; + inset-inline-start: 9px; top: -13px; background: $ui-highlight-color; border: 2px solid lighten($ui-base-color, 8%); @@ -2682,7 +2682,7 @@ $ui-header-height: 55px; &__issue-badge { position: absolute; - left: 11px; + inset-inline-start: 11px; bottom: 1px; display: block; background: $error-red; @@ -2738,7 +2738,7 @@ $ui-header-height: 55px; &__background { position: absolute; - left: 0; + inset-inline-start: 0; bottom: 0; height: 220px; width: auto; @@ -2864,7 +2864,7 @@ $ui-header-height: 55px; .drawer__inner { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; background: lighten($ui-base-color, 13%); box-sizing: border-box; padding: 0; @@ -2907,7 +2907,7 @@ $ui-header-height: 55px; .pseudo-drawer { background: lighten($ui-base-color, 13%); font-size: 13px; - text-align: left; + text-align: start; } .drawer__header { @@ -3010,7 +3010,7 @@ $ui-header-height: 55px; .column-back-button__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-back-button--slim { @@ -3023,7 +3023,7 @@ $ui-header-height: 55px; font-size: 16px; padding: 15px; position: absolute; - right: 0; + inset-inline-end: 0; top: -48px; } @@ -3088,7 +3088,7 @@ $ui-header-height: 55px; margin-top: auto; margin-bottom: auto; line-height: 0; - left: 8px; + inset-inline-start: 8px; opacity: 0; transition: opacity 0.25s ease; } @@ -3107,7 +3107,7 @@ $ui-header-height: 55px; margin-top: auto; margin-bottom: auto; line-height: 0; - right: 10px; + inset-inline-end: 10px; opacity: 1; transition: opacity 0.25s ease; } @@ -3119,7 +3119,7 @@ $ui-header-height: 55px; .react-toggle-thumb { position: absolute; top: 1px; - left: 1px; + inset-inline-start: 1px; width: 22px; height: 22px; border: 1px solid $ui-base-color; @@ -3131,7 +3131,7 @@ $ui-header-height: 55px; } .react-toggle--checked .react-toggle-thumb { - left: 27px; + inset-inline-start: 27px; border-color: $ui-highlight-color; } @@ -3185,7 +3185,7 @@ $ui-header-height: 55px; .column-link__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .column-link__badge { @@ -3279,7 +3279,7 @@ $ui-header-height: 55px; thead { position: absolute; - left: -9999px; + inset-inline-start: -9999px; } td { @@ -3383,9 +3383,9 @@ button.icon-button.active i.fa-retweet { &__actions { bottom: 0; - left: 0; + inset-inline-start: 0; position: absolute; - right: 0; + inset-inline-end: 0; top: 0; display: flex; justify-content: center; @@ -3491,7 +3491,7 @@ a.status-card { position: absolute; transform-origin: 50% 50%; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); } } @@ -3558,7 +3558,7 @@ a.status-card.compact:hover { object-fit: fill; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; background: $base-overlay-background; @@ -3673,8 +3673,8 @@ a.status-card.compact:hover { content: ''; position: absolute; bottom: -13px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; margin: 0 auto; width: 60%; pointer-events: none; @@ -3709,11 +3709,12 @@ a.status-card.compact:hover { & > button { margin: 0; border: 0; - padding: 15px 0 15px 15px; + padding: 15px; + padding-inline-end: 0; color: inherit; background: transparent; font: inherit; - text-align: left; + text-align: start; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -3747,7 +3748,7 @@ a.status-card.compact:hover { } .column-header__links .text-btn { - margin-right: 10px; + margin-inline-end: 10px; } .column-header__button { @@ -3830,18 +3831,18 @@ a.status-card.compact:hover { } .column-header__setting-arrows { - float: right; + float: inline-end; .column-header__setting-btn { padding: 5px; &:first-child { - padding-right: 7px; + padding-inline-end: 7px; } &:last-child { - padding-left: 7px; - margin-left: 5px; + padding-inline-start: 7px; + margin-inline-start: 5px; } } } @@ -3868,7 +3869,7 @@ a.status-card.compact:hover { .column-header__icon { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } .loading-indicator { @@ -3879,7 +3880,7 @@ a.status-card.compact:hover { overflow: visible; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; @@ -4015,7 +4016,7 @@ a.status-card.compact:hover { .spoiler-button { top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; position: absolute; @@ -4023,7 +4024,7 @@ a.status-card.compact:hover { &--minified { display: block; - left: 4px; + inset-inline-start: 4px; top: 4px; width: auto; height: auto; @@ -4140,12 +4141,12 @@ a.status-card.compact:hover { &__placeholder { color: $dark-text-color; - padding-left: 2px; + padding-inline-start: 2px; font-size: 12px; } &__value-container { - padding-left: 6px; + padding-inline-start: 6px; } &__multi-value { @@ -4242,7 +4243,7 @@ a.status-card.compact:hover { color: $darker-text-color; display: inline-block; margin-bottom: 14px; - margin-left: 8px; + margin-inline-start: 8px; vertical-align: middle; } @@ -4427,7 +4428,7 @@ a.status-card.compact:hover { .emoji-picker-dropdown__modifiers { position: absolute; top: 60px; - right: 11px; + inset-inline-end: 11px; cursor: pointer; } @@ -4435,7 +4436,7 @@ a.status-card.compact:hover { position: absolute; z-index: 4; top: -4px; - left: -8px; + inset-inline-start: -8px; background: $simple-background-color; border-radius: 4px; box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -4472,7 +4473,7 @@ a.status-card.compact:hover { display: flex; height: 100vh; justify-content: center; - left: 0; + inset-inline-start: 0; opacity: 0; position: fixed; top: 0; @@ -4497,9 +4498,9 @@ a.status-card.compact:hover { .upload-area__background { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 0; - left: 0; + inset-inline-start: 0; z-index: -1; border-radius: 4px; background: $ui-base-color; @@ -4527,7 +4528,7 @@ a.status-card.compact:hover { .fa { font-size: 34px; - margin-right: 10px; + margin-inline-end: 10px; } span { @@ -4553,7 +4554,7 @@ a.status-card.compact:hover { .upload-progress__tracker { position: absolute; - left: 0; + inset-inline-start: 0; top: 0; height: 6px; background: $ui-highlight-color; @@ -4562,7 +4563,10 @@ a.status-card.compact:hover { .emoji-button { display: block; - padding: 5px 5px 2px 2px; + padding-top: 5px; + padding-bottom: 2px; + padding-inline-start: 2px; + padding-inline-end: 5px; outline: 0; cursor: pointer; @@ -4650,7 +4654,7 @@ a.status-card.compact:hover { display: flex; align-items: center; justify-content: center; - margin-right: 10px; + margin-inline-end: 10px; } .privacy-dropdown__option__content { @@ -4716,11 +4720,11 @@ a.status-card.compact:hover { } .emoji-mart-search { - padding-right: 10px; + padding-inline-end: 10px; } .emoji-mart-search-icon { - right: 10px + 5px; + inset-inline-end: 10px + 5px; } .emoji-mart-scroll { @@ -4773,7 +4777,7 @@ a.status-card.compact:hover { display: block; padding: 15px; - padding-right: 30px; + padding-inline-end: 30px; line-height: 18px; font-size: 16px; @@ -4809,7 +4813,7 @@ a.status-card.compact:hover { .fa { position: absolute; top: 16px; - right: 10px; + inset-inline-end: 10px; z-index: 2; display: inline-block; opacity: 0; @@ -4863,7 +4867,7 @@ a.status-card.compact:hover { .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -4882,7 +4886,7 @@ a.status-card.compact:hover { .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -4920,8 +4924,8 @@ a.status-card.compact:hover { .modal-root__overlay { position: fixed; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; background: rgba($base-overlay-background, 0.7); transition: background 0.5s; @@ -4930,7 +4934,7 @@ a.status-card.compact:hover { .modal-root__container { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; @@ -4983,16 +4987,16 @@ a.status-card.compact:hover { .media-modal__closer { position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; } .media-modal__navigation { position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; pointer-events: none; transition: opacity 0.3s linear; @@ -5035,18 +5039,18 @@ a.status-card.compact:hover { } .media-modal__nav--left { - left: 0; + inset-inline-start: 0; } .media-modal__nav--right { - right: 0; + inset-inline-end: 0; } .media-modal__overlay { max-width: 600px; position: absolute; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; margin: 0 auto; @@ -5133,14 +5137,14 @@ a.status-card.compact:hover { .media-modal__close { position: absolute; - right: 8px; + inset-inline-end: 8px; top: 8px; z-index: 100; } .media-modal__zoom-button { position: absolute; - right: 64px; + inset-inline-end: 64px; top: 8px; z-index: 100; pointer-events: auto; @@ -5174,7 +5178,7 @@ a.status-card.compact:hover { & > div { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; box-sizing: border-box; @@ -5270,7 +5274,7 @@ a.status-card.compact:hover { display: inline-block; max-width: 30px; max-height: auto; - margin-left: 10px; + margin-inline-start: 10px; } .boost-modal, @@ -5325,9 +5329,9 @@ a.status-card.compact:hover { & > div { flex: 1 1 auto; - text-align: right; + text-align: end; color: $lighter-text-color; - padding-right: 10px; + padding-inline-end: 10px; } .button { @@ -5530,7 +5534,7 @@ a.status-card.compact:hover { & > span { font-size: 17px; font-weight: 500; - margin-left: 10px; + margin-inline-start: 10px; } } @@ -5554,11 +5558,11 @@ a.status-card.compact:hover { } .emoji-mart-search { - padding-right: 10px; + padding-inline-end: 10px; } .emoji-mart-search-icon { - right: 10px + 5px; + inset-inline-end: 10px + 5px; } } @@ -5621,7 +5625,7 @@ a.status-card.compact:hover { .report-modal__comment { padding: 20px; - border-right: 1px solid $ui-secondary-color; + border-inset-inline-end: 1px solid $ui-secondary-color; max-width: 320px; p { @@ -5719,7 +5723,7 @@ a.status-card.compact:hover { } button:first-child { - margin-right: 10px; + margin-inline-end: 10px; } } } @@ -5783,7 +5787,7 @@ a.status-card.compact:hover { border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; - padding-right: 30px; + padding-inline-end: 30px; } } @@ -5807,7 +5811,7 @@ a.status-card.compact:hover { &__label { color: $inverted-text-color; margin: 0; - margin-left: 8px; + margin-inline-start: 8px; } } } @@ -5818,7 +5822,7 @@ a.status-card.compact:hover { .report-modal__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } } @@ -5869,7 +5873,7 @@ a.status-card.compact:hover { height: 3px; position: fixed; top: 0; - left: 0; + inset-inline-start: 0; z-index: 9999; } @@ -5879,7 +5883,7 @@ a.status-card.compact:hover { color: $primary-text-color; background: rgba($base-overlay-background, 0.5); bottom: 6px; - left: 6px; + inset-inline-start: 6px; padding: 2px 6px; border-radius: 2px; font-size: 11px; @@ -5912,7 +5916,7 @@ a.status-card.compact:hover { color: $dark-text-color; padding: 8px 18px; cursor: default; - border-right: 1px solid lighten($ui-base-color, 8%); + border-inset-inline-end: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: column; align-items: center; @@ -5927,7 +5931,7 @@ a.status-card.compact:hover { &__list { list-style: none; padding: 4px 0; - padding-left: 8px; + padding-inline-start: 8px; display: flex; flex-direction: column; justify-content: center; @@ -5977,7 +5981,7 @@ a.status-card.compact:hover { border: 0; box-sizing: border-box; display: block; - float: left; + float: inline-start; position: relative; border-radius: 4px; overflow: hidden; @@ -6015,7 +6019,7 @@ a.status-card.compact:hover { object-fit: cover; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; background: $base-overlay-background; @@ -6183,8 +6187,8 @@ a.status-card.compact:hover { position: absolute; z-index: 2; bottom: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; box-sizing: border-box; background: linear-gradient( 0deg, @@ -6212,7 +6216,7 @@ a.status-card.compact:hover { display: none; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; z-index: 4; @@ -6328,7 +6332,7 @@ a.status-card.compact:hover { &.active { overflow: visible; width: 50px; - margin-right: 16px; + margin-inline-end: 16px; } &::before { @@ -6339,7 +6343,7 @@ a.status-card.compact:hover { display: block; position: absolute; height: 4px; - left: 0; + inset-inline-start: 0; top: 50%; transform: translate(0, -50%); } @@ -6349,7 +6353,7 @@ a.status-card.compact:hover { position: absolute; height: 4px; border-radius: 4px; - left: 0; + inset-inline-start: 0; top: 50%; transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); @@ -6362,8 +6366,8 @@ a.status-card.compact:hover { width: 12px; height: 12px; top: 50%; - left: 0; - margin-left: -6px; + inset-inline-start: 0; + margin-inline-start: -6px; transform: translate(0, -50%); background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -6434,7 +6438,7 @@ a.status-card.compact:hover { width: 12px; height: 12px; top: 10px; - margin-left: -6px; + margin-inline-start: -6px; background: lighten($ui-highlight-color, 8%); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); @@ -6510,7 +6514,7 @@ a.status-card.compact:hover { &__icons { position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; transform: translate(-50%, -50%); font-size: 24px; } @@ -6553,7 +6557,7 @@ a.status-card.compact:hover { content: ''; position: absolute; bottom: 0; - left: 50%; + inset-inline-start: 50%; width: 0; height: 0; transform: translateX(-50%); @@ -6629,7 +6633,7 @@ a.status-card.compact:hover { width: 18px; height: 18px; flex: 0 0 auto; - margin-right: 10px; + margin-inline-end: 10px; top: -1px; border-radius: 50%; vertical-align: middle; @@ -6706,10 +6710,10 @@ noscript { .navigation-bar { & > a:first-child { - will-change: margin-top, margin-left, margin-right, width; + will-change: margin-top, margin-inline-start, margin-inline-end, width; transition: margin-top $duration $delay, - margin-left $duration ($duration + $delay), - margin-right $duration ($duration + $delay); + margin-inline-start $duration ($duration + $delay), + margin-inline-end $duration ($duration + $delay); } & > .navigation-bar__profile-edit { @@ -6891,7 +6895,7 @@ noscript { cursor: pointer; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background: rgba($base-overlay-background, 0.5); @@ -7029,13 +7033,13 @@ noscript { width: 100%; height: 100%; top: 0; - left: 0; + inset-inline-start: 0; } &__preview { position: absolute; bottom: 10px; - right: 10px; + inset-inline-end: 10px; z-index: 2; cursor: move; transition: opacity 0.1s ease; @@ -7112,7 +7116,7 @@ noscript { &__info { position: absolute; top: 10px; - left: 10px; + inset-inline-start: 10px; } &__image { @@ -7155,7 +7159,7 @@ noscript { padding-top: 10px; gap: 8px; overflow: hidden; - margin-left: -2px; // aligns the pfp with content below + margin-inline-start: -2px; // aligns the pfp with content below &__buttons { display: flex; @@ -7383,7 +7387,7 @@ noscript { .fa { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; } } @@ -7433,7 +7437,7 @@ noscript { flex: 0 0 auto; font-size: 24px; font-weight: 500; - text-align: right; + text-align: end; color: $secondary-text-color; text-decoration: none; } @@ -7538,7 +7542,7 @@ noscript { &__content { flex: 1 1 auto; padding: 10px 5px; - padding-right: 15px; + padding-inline-end: 15px; overflow: hidden; &__info { @@ -7551,7 +7555,7 @@ noscript { &__relative-time { font-size: 15px; color: $darker-text-color; - padding-left: 15px; + padding-inline-start: 15px; } &__names { @@ -7641,13 +7645,13 @@ noscript { display: block; font-weight: 500; margin-bottom: 10px; - padding-right: 18px; + padding-inline-end: 18px; } &__unread { position: absolute; top: 19px; - right: 19px; + inset-inline-end: 19px; display: block; background: $highlight-text-color; border-radius: 50%; @@ -7661,7 +7665,7 @@ noscript { color: $darker-text-color; position: absolute; bottom: 3px; - right: 0; + inset-inline-end: 0; } } @@ -7678,7 +7682,7 @@ noscript { flex-wrap: wrap; align-items: center; margin-top: 15px; - margin-left: -2px; + margin-inline-start: -2px; width: calc(100% - (90px - 33px)); &__item { @@ -7719,7 +7723,7 @@ noscript { font-size: 13px; font-weight: 500; text-align: center; - margin-left: 6px; + margin-inline-start: 6px; color: $darker-text-color; } @@ -7798,10 +7802,10 @@ noscript { content: ''; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; - border-left: 4px solid $highlight-text-color; + border-inset-inline-start: 4px solid $highlight-text-color; pointer-events: none; } } @@ -7810,7 +7814,7 @@ noscript { .picture-in-picture { position: fixed; bottom: 20px; - right: 20px; + inset-inline-end: 20px; width: 300px; &__footer { @@ -7836,7 +7840,7 @@ noscript { } .account__avatar { - margin-right: 10px; + margin-inline-end: 10px; } .display-name { @@ -7902,7 +7906,7 @@ noscript { &__close { position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; } h2 { @@ -7937,7 +7941,7 @@ noscript { .search .fa { top: 10px; - right: 10px; + inset-inline-end: 10px; color: $dark-text-color; } @@ -8021,7 +8025,7 @@ noscript { object-fit: fill; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: 0; &--hidden { @@ -8107,7 +8111,7 @@ noscript { } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .spacer { @@ -8327,7 +8331,7 @@ noscript { &::before { content: counter(list-counter) '.'; position: absolute; - left: 0; + inset-inline-start: 0; } } @@ -8339,13 +8343,13 @@ noscript { width: 0.375em; height: 0.375em; top: 0.5em; - left: 0.25em; + inset-inline-start: 0.25em; } ul > li, ol > li { position: relative; - padding-left: 1.75em; + padding-inline-start: 1.75em; } & > ul > li p { @@ -8478,7 +8482,7 @@ noscript { &__preview { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; object-fit: cover; @@ -8684,7 +8688,7 @@ noscript { } .account__avatar-wrapper { - margin-left: 0; + margin-inline-start: 0; } .account__relationship { diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index b49b93984..fb71ad034 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -18,7 +18,7 @@ .logo { height: 42px; - margin-right: 10px; + margin-inline-end: 10px; } a { @@ -73,7 +73,7 @@ .avatar { width: 40px; height: 40px; - margin-right: 10px; + margin-inline-end: 10px; img { width: 100%; @@ -101,6 +101,6 @@ display: block; font-size: 32px; line-height: 40px; - margin-left: 10px; + margin-inline-start: 10px; } } diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 0d7a7df2e..c7247c3a5 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -71,7 +71,7 @@ .emoji-mart-anchor-bar { position: absolute; bottom: -5px; - left: 0; + inset-inline-start: 0; width: 100%; height: 4px; background-color: $highlight-text-color; @@ -106,7 +106,7 @@ .emoji-mart-search { padding: 10px; - padding-right: 45px; + padding-inline-end: 45px; background: $simple-background-color; position: relative; @@ -114,7 +114,7 @@ font-size: 16px; font-weight: 400; padding: 7px 9px; - padding-right: 25px; + padding-inline-end: 25px; font-family: inherit; display: block; width: 100%; @@ -142,7 +142,7 @@ .emoji-mart-search-icon { position: absolute; top: 18px; - right: 45px + 5px; + inset-inline-end: 45px + 5px; z-index: 2; padding: 2px 5px 1px; border: 0; @@ -177,7 +177,7 @@ content: ''; position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background-color: rgba($ui-secondary-color, 0.7); diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index e4539deff..7d4bde5e9 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -54,12 +54,12 @@ code { .radio > label { position: relative; - padding-left: 28px; + padding-inline-start: 28px; input { position: absolute; top: -2px; - left: 0; + inset-inline-start: 0; } } } @@ -79,7 +79,7 @@ code { .label_input, .hint { - padding-left: 28px; + padding-inline-start: 28px; } .label_input__wrapper { @@ -89,7 +89,7 @@ code { label.checkbox { position: absolute; top: 2px; - left: 0; + inset-inline-start: 0; } label a { @@ -159,7 +159,7 @@ code { li { list-style: disc; - margin-left: 18px; + margin-inline-start: 18px; } } @@ -225,7 +225,7 @@ code { &.select .hint { margin-top: 6px; - margin-left: 150px; + margin-inline-start: 150px; } } @@ -380,13 +380,13 @@ code { width: auto; position: relative; padding-top: 5px; - padding-left: 25px; + padding-inline-start: 25px; flex: 1 1 auto; } input[type='checkbox'] { position: absolute; - left: 0; + inset-inline-start: 0; top: 5px; margin: 0; } @@ -517,10 +517,10 @@ code { font-weight: 500; outline: 0; margin-bottom: 10px; - margin-right: 10px; + margin-inline-end: 10px; &:last-child { - margin-right: 0; + margin-inline-end: 0; } &:active, @@ -572,8 +572,8 @@ code { no-repeat right 8px center / auto 16px; border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; - padding-left: 10px; - padding-right: 30px; + padding-inline-start: 10px; + padding-inline-end: 30px; height: 41px; } @@ -588,7 +588,7 @@ code { &__append { position: absolute; - right: 3px; + inset-inline-end: 3px; top: 1px; padding: 10px; padding-bottom: 9px; @@ -606,7 +606,7 @@ code { display: block; position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 1px; width: 5px; background-image: linear-gradient( @@ -780,7 +780,7 @@ code { li { display: inline-block; - margin-right: 10px; + margin-inline-end: 10px; } a { @@ -939,7 +939,7 @@ code { .actions { padding: 30px 0; - padding-right: 20px; + padding-inline-end: 20px; flex: 0 0 auto; } } @@ -992,7 +992,7 @@ code { border-radius: 4px; display: flex; align-items: center; - padding-right: 4px; + padding-inline-end: 4px; position: relative; top: 1px; transition: border-color 300ms linear; diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss index 6170877b2..29b1f162b 100644 --- a/app/javascript/styles/mastodon/modal.scss +++ b/app/javascript/styles/mastodon/modal.scss @@ -25,7 +25,7 @@ height: 100%; position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; } } } diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index b30932e04..bdb87d7cf 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -269,7 +269,7 @@ border: 1px solid darken($simple-background-color, 14%); border-radius: 4px; padding: 6px 10px; - padding-right: 30px; + padding-inline-end: 30px; } .icon-button.disabled { diff --git a/app/javascript/styles/mastodon/rich_text.scss b/app/javascript/styles/mastodon/rich_text.scss index 35901984b..aa41e4ad3 100644 --- a/app/javascript/styles/mastodon/rich_text.scss +++ b/app/javascript/styles/mastodon/rich_text.scss @@ -13,8 +13,8 @@ } blockquote { - padding-left: 10px; - border-left: 3px solid $darker-text-color; + padding-inline-start: 10px; + border-inset-inline-start: 3px solid $darker-text-color; color: $darker-text-color; white-space: normal; @@ -40,7 +40,7 @@ ul, ol { - margin-left: 2em; + margin-inline-start: 2em; p { margin: 0; diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss index e60087dab..726135c58 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.scss @@ -1,273 +1,30 @@ body.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 { - 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); } - .notification__favourite-icon-wrapper { - 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 { + .compose-form .autosuggest-textarea__textarea { padding-right: 10px; - padding-left: 30px; - } - - .search__icon .fa { - right: auto; - left: 10px; + padding-left: 10px + 22px; } .columns-area { 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 { 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 { - right: auto; - left: 3px; - &::after { - right: auto; - left: 0; background-image: linear-gradient( to left, rgba(darken($ui-base-color, 10%), 0), @@ -282,49 +39,6 @@ body.rtl { 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 { content: '\F054'; } @@ -332,19 +46,4 @@ body.rtl { .fa-chevron-right::before { 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; - } } diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index a42f1f42c..6c9ea916a 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -97,7 +97,7 @@ width: 20px; height: auto; vertical-align: middle; - margin-right: 5px; + margin-inline-end: 5px; fill: $primary-text-color; } @@ -162,7 +162,7 @@ a.button.logo-button { min-height: 48px + 2px; &__avatar { - left: 15px; + inset-inline-start: 15px; top: 17px; .account__avatar { @@ -176,12 +176,12 @@ a.button.logo-button { } &__prepend { - margin-left: 48px + 15px * 2; + margin-inline-start: 48px + 15px * 2; padding-top: 15px; } &__prepend-icon-wrapper { - left: -32px; + inset-inline-start: -32px; } .media-gallery, diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index b644b38f1..fb1ff0781 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -10,7 +10,7 @@ line-height: 18px; vertical-align: top; border-top: 1px solid $ui-base-color; - text-align: left; + text-align: start; background: darken($ui-base-color, 4%); } @@ -91,12 +91,12 @@ &:first-child { 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 { 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 { text-decoration: none; display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; padding: 0 10px; color: $darker-text-color; font-weight: 500; @@ -136,11 +136,11 @@ a.table-action-link { i.fa { font-weight: 400; - margin-right: 5px; + margin-inline-end: 5px; } &:first-child { - padding-left: 0; + padding-inline-start: 0; } } @@ -172,7 +172,7 @@ a.table-action-link { &__actions, &__content { padding: 8px 0; - padding-right: 16px; + padding-inline-end: 16px; flex: 1 1 auto; } } @@ -188,8 +188,8 @@ a.table-action-link { align-items: center; &__actions { - text-align: right; - padding-right: 16px - 5px; + text-align: end; + padding-inline-end: 16px - 5px; } } @@ -296,7 +296,7 @@ a.table-action-link { display: flex; justify-content: center; align-items: center; - margin-right: 10px; + margin-inline-end: 10px; .emojione { width: 32px; @@ -315,7 +315,7 @@ a.table-action-link { &__extra { flex: 0 0 auto; - text-align: right; + text-align: end; color: $darker-text-color; font-weight: 500; } diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index ef7bfc6de..1f69f0cf0 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -39,8 +39,8 @@ width: 20px; height: 20px; margin: -3px 0 0; - margin-left: 0.075em; - margin-right: 0.075em; + margin-inline-start: 0.075em; + margin-inline-end: 0.075em; } p { @@ -171,7 +171,7 @@ margin-bottom: 15px; .fa { - margin-right: 5px; + margin-inline-end: 5px; color: $darker-text-color; } } @@ -284,7 +284,7 @@ } .trends__item__current { - padding-right: 0; + padding-inline-end: 0; } } } @@ -309,7 +309,7 @@ padding: 10px; &:first-child { - text-align: left; + text-align: start; } } @@ -340,9 +340,9 @@ tbody td.accounts-table__extra { width: 120px; - text-align: right; + text-align: end; color: $darker-text-color; - padding-right: 16px; + padding-inline-end: 16px; a { text-decoration: none; @@ -363,7 +363,7 @@ tbody td.accounts-table__interrelationships { width: 21px; - padding-right: 16px; + padding-inline-end: 16px; } .fa {